/* ============================================================
   HAIRMEDICO — hm-polish.css  (2026-09-06)
   Görsel cila katmanı. Yalnız CSS: içerik, başlık, meta, şema,
   hreflang, canonical, link ve HTML yapısına dokunmaz.
   hm-home.css + hm-design.css'ten SONRA yüklenir. Önce yalnız EN
   ana sayfaya bağlı; onay sonrası diğer ana sayfalara yayılır.
   ============================================================ */
/* ============================================================
   HAIRMEDICO — TASARIM CİLASI (öneri) • yalnız görsel katman
   İçerik, başlık, meta, şema, link ve sayfa yapısına dokunmaz.
   ============================================================ */

/* 0. Tipografi ritmi */
.hero-h1, h2, .t-xl, .t-lg, .t-md, .hm-cta__h2, .tp-header-h, .xt-title{ text-wrap: balance; }
p, .hero-p, .tp-card-quote, .xt-desc{ text-wrap: pretty; }
.hs-n, .hm-cta__stat-n, .fl-n, [data-count]{ font-variant-numeric: tabular-nums; }

/* 1. Hero — orkestre edilmiş açılış (kademeli beliriş) */
@keyframes hmRise{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
@keyframes hmFrame{ from{ opacity:0; transform:translateY(26px) scale(.985) } to{ opacity:1; transform:none } }
.hero{ min-height:100dvh; }
.hero .over, .hero .hero-h1, .hero .hero-p, .hero .hero-actions, .hero .hero-stats{ opacity:0; animation: hmRise .9s var(--ease) forwards; }
.hero .over{ animation-delay:.05s } .hero .hero-h1{ animation-delay:.18s } .hero .hero-p{ animation-delay:.34s }
.hero .hero-actions{ animation-delay:.48s } .hero .hero-stats{ animation-delay:.62s }
.hero .hv-frame{ opacity:0; animation: hmFrame 1.1s var(--ease) .25s forwards; }
.hero .hv-badge, .hero .fl{ opacity:0; animation: hmRise .8s var(--ease) .9s forwards; }

/* 2. Hero atmosferi — tekrar eden ızgara yerine yumuşak derinlik (moiré/çizgi riski yok) */
.hero .hero-grid{ background-image:none; mask-image:none; -webkit-mask-image:none;
  background: radial-gradient(ellipse 40% 50% at 78% 30%, rgba(196,169,106,.10), transparent 60%),
              radial-gradient(ellipse 70% 60% at 15% 90%, rgba(12,22,48,.9), transparent 60%); }
.hero .hv-frame{ box-shadow: 0 30px 80px rgba(2,8,22,.55), 0 0 0 1px rgba(196,169,106,.18), 0 0 120px rgba(196,169,106,.08); }
.hero .hv-frame::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(180deg, transparent 55%, rgba(5,13,31,.55) 100%); }

/* 3. Hero istatistikleri — altın gradyan rakamlar */
.hs-n{ background: linear-gradient(135deg,#E6D3A3 0%,var(--gold) 45%,var(--gold-d) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* 4. Bölüm ritmi — optik dolgu (alt biraz daha geniş), yumuşak geçişler, çizgi YOK */
.sec-navy, .sec-white, .sec-cream{ padding:96px 0 112px; }
.sec-navy{ position:relative; }
.sec-navy::before{ content:""; position:absolute; left:0; right:0; top:0; height:120px; pointer-events:none; background: linear-gradient(180deg, rgba(196,169,106,.05), transparent); }
.sec-navy::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 60% 50% at 85% 15%, rgba(196,169,106,.07), transparent 60%); }
.sec-navy > *{ position:relative; z-index:1; }
.sec-cream{ background: linear-gradient(180deg, var(--cream) 0%, var(--cream2) 100%); }

/* 5. Yorum kartları — "3 eşit sütun tablo" görünümünden çıkış: nefes alan boşluk, hafif kaydırma, tonlu gölge */
.tp-section{ padding:96px 0 112px; }
.tp-grid{ gap:14px; }
.tp-card{ border-radius:var(--r16); box-shadow: 0 1px 0 rgba(5,13,31,.04); }
.tp-grid .tp-card:nth-child(3n+2){ transform: translateY(18px); }
.tp-grid .tp-card:nth-child(3n+2).rv.in{ transform: translateY(18px); }
@media (max-width:900px){ .tp-grid .tp-card:nth-child(3n+2), .tp-grid .tp-card:nth-child(3n+2).rv.in{ transform:none } }

/* 6. Kartlar — hover'da yükselme, navy-tonlu gölge, altın kenar; basınca geri bildirim */
.tp-card, .xt-card, .hm-cta__card, .pk, .tc{ transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.tp-card:hover{ transform: translateY(-4px); box-shadow: 0 22px 48px rgba(5,13,31,.14); border-color: rgba(196,169,106,.45); }
.tp-grid .tp-card:nth-child(3n+2):hover{ transform: translateY(14px); }
.xt-card:hover, .hm-cta__card:hover{ transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0,0,0,.35); border-color: rgba(196,169,106,.45); }

/* 7. Butonlar — altın parlama, kaldırma, basma */
.btn-gold{ position:relative; overflow:hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s; }
.btn-gold::after{ content:""; position:absolute; inset:0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn-gold:hover::after{ transform: translateX(120%); }
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(196,169,106,.35); }
.btn-gold:active, .btn-out-w:active, .cta-btn:active{ transform: translateY(0) scale(.98); transition-duration:.12s; }
.btn-out-w{ transition: border-color .3s, background .3s, transform .3s var(--ease); }
.btn-out-w:hover{ transform: translateY(-2px); background: rgba(255,255,255,.06); border-color: rgba(196,169,106,.6); }

/* 8. Scroll ile beliriş — biraz daha yumuşak ve uzun */
.rv{ transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in, .rv.vis{ transform:none; }
.d1{ transition-delay:.12s } .d2{ transition-delay:.24s } .d3{ transition-delay:.36s }

/* 9. Navigasyon — kaydırınca cam efekti */
.nav.sc{ backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: rgba(5,13,31,.72); border-bottom: 1px solid rgba(196,169,106,.12); }

/* 10. Klavye odak halkası — erişilebilirlik */
a:focus-visible, button:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* 11. Hareket azaltma tercihine TAM saygı (site geneli)
   Bulunan hatalar: (a) Grup-A paketinde (hm-home.css) transition/animation
   süresi "NaNs" gibi GEÇERSİZ bir değere ayarlanmış — tarayıcı bu satırı
   tamamen yok sayıyor, yani reduced-motion aslında .rv beliriş animasyonunu
   durdurmuyordu. (b) Grup-B paketlerinde (main.css, hm-e2ae2492e847.css ve
   türevleri — ar/cs/da/es/he/it/nl/no/pl/pt/ro/sv/tr) reduced-motion için
   HİÇ kural yoktu. Bu blok globaldir (hm-polish.css artık 26 sayfada da
   yüklü), her iki paket ailesini de kapsar. */
@media (prefers-reduced-motion: reduce){
  *, ::before, ::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html{ scroll-behavior: auto; }
  .rv, .rv.in, .rv.vis{ opacity: 1 !important; transform: none !important; }
  .hero .over, .hero .hero-h1, .hero .hero-p, .hero .hero-actions, .hero .hero-stats, .hero .hv-frame, .hero .hv-badge, .hero .fl{ animation:none !important; opacity:1 !important; transform:none !important; }
  .btn-gold::after{ display:none; }
  .tp-grid .tp-card:nth-child(3n+2){ transform:none }
}