/* ══════════════════════════════════════════
   HAIRMEDICO — hm-pages.css

   İçerik sayfaları için uyum katmanı.

   "web son hali" klasöründeki sayfalar farklı bir tasarım sisteminde
   yazılmıştı (DM Sans, --accent:#D4AF5F, --navy:#0a1b33). İçerik HTML'ine
   dokunmak yerine, o sistemin değişkenlerini buradaki mevcut tokenlara
   bağlıyoruz — böylece sayfalar sitenin paletini ve fontunu otomatik alır.

   ÖNEMLİ: --navy, --white, --serif, --sans burada YENİDEN TANIMLANMAZ.
   Sitenin kendi değerleri geçerli olsun diye kasıtlı olarak dışarıda
   bırakıldılar; tanımlansalardı mevcut sayfaları da bozarlardı.
══════════════════════════════════════════ */

:root {
  /* eski isim → mevcut token */
  --accent:   var(--gold);
  --accent-h: var(--gold-d);
  --accent-s: var(--gold-bg);
  --sand:     var(--cream);
  --bg:       var(--warm);
  --th:       var(--ink);      /* başlık metni */
  --tb:       var(--ink3);     /* gövde metni */
  --br:       var(--line);     /* kenarlık */
}

/* ══ LAYOUT ══ */
.w { width:100%; max-width:var(--mw); margin:0 auto; padding:0 clamp(18px,4vw,40px) }
.sec { padding:clamp(64px,8vw,100px) 0 }
.sec-sand  { background:var(--sand) }
.sec-white { background:var(--white) }
.sec-navy-alt { background:var(--navy) }

/* ══ TYPE ══ */
.ey { display:flex; align-items:center; gap:11px; margin-bottom:14px }
.ey::before { content:''; width:28px; height:1px; background:var(--accent); flex-shrink:0 }
.ey span {
  font-size:.63rem; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-d);
}
.ital { font-style:italic; color:var(--gold-d); font-family:var(--serif); font-weight:300 }

.pg-hero h1, .sec h2 { font-family:var(--serif); font-weight:300; letter-spacing:-.015em }
.pg-hero h1 { font-size:clamp(2.2rem,5vw,4rem); line-height:1.02; color:var(--white) }
.sec h2     { font-size:clamp(1.7rem,3.4vw,3rem); line-height:1.1; color:var(--ink) }
.sec p      { font-size:.875rem; line-height:1.78; color:var(--tb); font-weight:300 }

/* ══ PAGE HERO ══ */
.pg-hero {
  padding-top:calc(var(--nav-h) + clamp(48px,7vw,88px));
  padding-bottom:clamp(48px,7vw,80px);
  background:var(--navy); position:relative; overflow:hidden;
}
.pg-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 85% 70% at 75% 35%, rgba(196,169,106,.07), transparent 65%);
}
.pg-hero > * { position:relative; z-index:1 }
.pg-hero p { color:rgba(255,255,255,.6); font-weight:200 }
.pg-hero .ey span { color:rgba(196,169,106,.8) }

/* ══ CARDS ══ */
.card {
  background:var(--white);
  border:1px solid var(--gold-br);
  border-radius:var(--r8);
  padding:clamp(18px,2.2vw,28px);
  transition:border-color var(--t2), transform var(--t2) var(--ease), box-shadow var(--t2);
}
.card:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:0 8px 24px rgba(196,169,106,.09) }
.card-n {
  font-family:var(--serif); font-size:clamp(2rem,4vw,2.9rem); font-weight:300;
  color:var(--gold-d); line-height:1; margin-bottom:8px;
}
.card-t { font-size:.875rem; font-weight:400; color:var(--ink); margin-bottom:6px }
.card p { font-size:.8rem; color:var(--tb); line-height:1.7 }

/* ══ PHOTO BLOCKS ══ */
.ph { border-radius:var(--r8); overflow:hidden; position:relative; background:var(--cream) }
.ph img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .55s var(--ease) }
.ph:hover img { transform:scale(1.04) }
.ph-cap {
  position:absolute; bottom:0; left:0; right:0; padding:14px;
  background:linear-gradient(to top, rgba(5,13,31,.9), transparent);
}
.ph-tag {
  font-size:.56rem; font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:3px;
}
.ph-txt { font-size:.75rem; color:rgba(255,255,255,.78) }

/* ══ FAQ ══ */
.faq-item { border-bottom:1px solid var(--br); overflow:hidden }
.faq-q, .faq-item h2 {
  font-family:var(--sans); font-size:.9rem; font-weight:300; color:var(--ink2);
  padding:clamp(16px,1.8vw,21px) 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:13px;
  transition:color var(--t1); line-height:1.5; user-select:none;
  width:100%; text-align:left; background:none; border:none;
}
.faq-q:hover, .faq-item h2:hover { color:var(--gold-d) }
.faq-ic {
  width:22px; height:22px; border:1px solid var(--br); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; color:var(--gold-d); flex-shrink:0;
  transition:transform var(--t2) var(--ease), background var(--t2), border-color var(--t2);
}
.faq-item.op .faq-ic { transform:rotate(45deg); background:var(--gold-bg); border-color:var(--gold) }
.faq-a {
  font-size:.82rem; color:var(--tb); line-height:1.85;
  max-height:0; overflow:hidden;
  transition:max-height .4s var(--ease), padding .3s;
}
.faq-item.op .faq-a { max-height:400px; padding-bottom:16px }

/* ══ RELATED CARDS ══ */
.rc {
  background:var(--white); border:1px solid var(--gold-br);
  border-radius:var(--r8); padding:clamp(16px,2vw,24px);
  transition:border-color var(--t2), transform var(--t2); display:block;
}
.rc:hover { border-color:var(--gold); transform:translateY(-2px) }
.rc-tag {
  font-size:.56rem; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-d); margin-bottom:8px;
}
.rc-title {
  font-family:var(--serif); font-size:clamp(.95rem,1.6vw,1.15rem); font-weight:400;
  color:var(--ink); margin-bottom:6px; line-height:1.35;
}
.rc-desc { font-size:.78rem; color:var(--tb); line-height:1.65; margin-bottom:12px }
.rc-lnk { font-size:.65rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-d) }

/* ══ LISTS ══ */
.ul-c { list-style:none; display:flex; flex-direction:column; gap:8px }
.ul-c li { display:flex; gap:10px; font-size:.82rem; color:var(--tb); line-height:1.65; align-items:flex-start }
.ul-c li::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--gold); margin-top:8px; flex-shrink:0;
}

/* ══ REVEAL ══
   Content must never be invisible because a script failed to run, so the
   hidden state is only applied once JS has confirmed it is present. */
.rev { opacity:1; transform:none }
html.js .rev { opacity:0; transform:translateY(20px); transition:opacity .65s ease, transform .65s var(--ease) }
html.js .rev.in { opacity:1; transform:none }

/* ══ BREADCRUMB ══ */
.bc-bar { background:var(--white); border-bottom:1px solid var(--line2) }
.bc-inner {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 0; font-size:.72rem; color:var(--ink3);
}
.bc-inner a { color:var(--ink3); transition:color var(--t1) }
.bc-inner a:hover { color:var(--gold-d) }
.bc-sep { color:var(--ink4) }

@media (prefers-reduced-motion: reduce) {
  .rev { opacity:1 !important; transform:none !important }
  .ph:hover img { transform:none }
}

/* ══ MOBİL KORUMA ══
   İçerik markup'ı satır içi `grid-template-columns` taşıyor ve satır içi
   stiller media query ile ezilemez — dar ekranda tek sütuna düşürmek için
   !important şart. */
@media(max-width:860px) {
  .sec [style*="grid-template-columns"],
  .pg-hero [style*="grid-template-columns"] { grid-template-columns:1fr !important }
  .sec [style*="gap:clamp"] { gap:32px !important }
}
@media(max-width:520px) {
  .w { padding:0 18px }
  .pg-hero h1 { font-size:clamp(1.8rem,8vw,2.4rem) }
}

/* Uzun kelimeler ve URL'ler dar ekranda taşmasın */
.sec p, .card p, .ul-c li, .rc-desc, .faq-a { overflow-wrap:break-word }

/* ══ FOTOĞRAF YER TUTUCUSU ══
   Gerçek görsel eklenene kadar duran blok. Değiştirirken:
   <figure class="ph-slot" data-slot="..."> … </figure>  yerine
   <figure class="ph"><img src="…" alt="…" width="…" height="…" loading="lazy">
   <figcaption class="ph-cap">…</figcaption></figure>
   koyun — .ph stilleri hazır. */
.ph-slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  aspect-ratio: 4/3;
  padding: 24px;
  background: repeating-linear-gradient(45deg, var(--cream) 0 12px, var(--warm) 12px 24px);
  border: 1.5px dashed var(--gold-br);
  border-radius: var(--r8);
  color: var(--ink4);
}
.ph-slot svg { stroke: var(--gold-d); fill: none; width: 26px; height: 26px; stroke-width: 1.2; opacity: .7 }
.ph-slot-label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d);
}
.ph-slot-hint { font-size: .72rem; line-height: 1.5; max-width: 260px; color: var(--ink4) }
.ph-slot-alt {
  font-size: .64rem; color: var(--ink4); font-style: italic;
  border-top: 1px solid var(--line2); padding-top: 8px; margin-top: 2px; max-width: 280px;
}
.ph-slot--wide { aspect-ratio: 16/7 }
.ph-slot--portrait { aspect-ratio: 3/4 }

/* ══ İÇERİK YARDIMCILARI ══ */
.key-answer {
  background: var(--gold-bg); border-left: 3px solid var(--gold);
  border-radius: 0 var(--r8) var(--r8) 0;
  padding: 18px 22px; margin: 0 0 24px;
}
.key-answer p { font-size: .92rem; line-height: 1.75; color: var(--ink2); margin: 0 }
.tbl-wrap { overflow-x: auto; margin: 22px 0 }
.tbl { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 460px }
.tbl th, .tbl td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line2); vertical-align: top }
.tbl th { font-weight: 400; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-d); white-space: nowrap }
.tbl td { color: var(--tb); line-height: 1.6 }
.tbl tr:last-child td { border-bottom: none }
.updated { font-size: .72rem; color: var(--ink4); margin-top: 6px }
.checklist { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 20px 0 }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: .85rem; line-height: 1.7; color: var(--tb) }
.checklist li strong { color: var(--ink); font-weight: 400; display: block; margin-bottom: 2px }
.checklist li::before {
  content: ''; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;
  border-radius: 50%; border: 1.5px solid var(--gold); background: var(--gold-bg);
}

/* ══════════════════════════════════════════
   EKSİK BİLEŞENLER

   Uyarlanan sayfalar, kendi tasarım sisteminden gelen sınıf isimlerini
   kullanıyor ama o sistemin stil dosyası siteye hiç taşınmamıştı. Sonuç:
   kahraman bölümü kenar boşluğu olmadan, kartlar ızgara olmadan, CTA bandı
   düz metin olarak görünüyordu. Aşağıdaki kurallar o boşluğu, sitenin kendi
   tokenlarıyla kapatıyor — yeni bir görünüm icat etmeden.

   Kapsam: 15 uyarlanmış içerik sayfası. Hesaplayıcılar ve /surgeon-led
   kendi bileşen setlerine sahip; onlar ayrıca ele alınıyor.
══════════════════════════════════════════ */

/* ── kahraman ── */
.pg-hi, .ph-inner {
  width: 100%; max-width: var(--mw); margin: 0 auto;
  padding: clamp(56px,7vw,96px) clamp(18px,4vw,40px) clamp(48px,6vw,80px);
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px,4vw,56px); align-items: center;
}
.pg-hi > *, .ph-inner > * { min-width: 0 }

/* kahraman içindeki açık renkli ekmek kırıntısı */
.bc { font-size: .72rem; color: rgba(255,255,255,.45); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center }
.bc a { color: rgba(255,255,255,.55); transition: color var(--t1) }
.bc a:hover { color: var(--gold) }
.bc span { color: rgba(255,255,255,.28) }

.h-tag, .hero-tag { display: flex; align-items: center; gap: 11px; margin-bottom: 14px }
.h-tag::before, .hero-tag::before { content: ''; width: 28px; height: 1px; background: var(--gold); flex-shrink: 0 }
.h-tag span, .hero-tag span {
  font-size: .63rem; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(196,169,106,.8);
}

/* kahraman görseli + üzerindeki başlık şeridi */
.hero-img, .hero-img-wrap {
  position: relative; border-radius: var(--r8); overflow: hidden;
  background: rgba(255,255,255,.04);
}
.hero-img img, .hero-img-wrap img {
  width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover;
}
.hic, .hero-img-cap, .pp-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px 14px;
  background: linear-gradient(transparent, rgba(5,13,31,.88));
}
.hic-tag, .hero-img-tag, .pp-tag {
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 3px;
}
.hic-txt, .hero-img-txt, .pp-txt { font-size: .72rem; color: rgba(255,255,255,.72); line-height: 1.5 }

/* ── başlıklar ── */
.H2, .H2w {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.015em;
  font-size: clamp(1.7rem,3.4vw,3rem); line-height: 1.1; color: var(--ink);
}
.H2w { color: var(--white) }
.ey-c { justify-content: center }
.ey-c::before { display: none }

/* ── ızgaralar ── */
.g2, .g3, .grid-3, .rel-g, .photo-3, .photo-pair, .info-g, .cause-g, .treat-g, .types-g, .bp-g {
  display: grid; gap: clamp(14px,2vw,22px);
}
.g2 { grid-template-columns: repeat(2,1fr) }
.g3, .grid-3, .rel-g, .photo-3 { grid-template-columns: repeat(3,1fr) }
.photo-pair { grid-template-columns: repeat(2,1fr) }

/* ── kart parçaları ── */
.card-title, .card-num { font-family: var(--serif); font-weight: 300; color: var(--ink) }
.card-num { font-size: .7rem; letter-spacing: .16em; color: var(--gold-d); margin-bottom: 8px; font-family: var(--sans) }
.card-title { font-size: 1.05rem; margin-bottom: 8px }
.card-d, .card-desc { font-size: .8rem; color: var(--tb); line-height: 1.7 }

/* ── istatistik şeridi ── */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
  gap: 1px; background: var(--line2); border: 1px solid var(--line2);
  border-radius: var(--r8); overflow: hidden; margin: clamp(20px,3vw,32px) 0;
}
.stat-item { background: var(--white); padding: 20px 16px; text-align: center }
.stat-n { font-family: var(--serif); font-weight: 300; font-size: 1.7rem; color: var(--gold-d); line-height: 1 }
.stat-l { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink4); margin-top: 7px }

/* ── kapanış çağrısı ── */
.cta-b, .cta-block {
  display: grid; grid-template-columns: 1.4fr .6fr;
  gap: clamp(22px,3vw,44px); align-items: center;
  background: var(--navy); border-radius: var(--r16);
  padding: clamp(28px,4vw,52px);
}
.ctb-tag { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px }
.ctb-title {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.015em;
  font-size: clamp(1.4rem,2.6vw,2.2rem); line-height: 1.15; color: var(--white); margin-bottom: 12px;
}
.ctb-sub { font-size: .84rem; line-height: 1.75; color: rgba(255,255,255,.55); font-weight: 300; margin: 0 }
.cta-b .ctb-sub, .cta-block .ctb-sub { color: rgba(255,255,255,.55) }
.ctb-btns { display: flex; flex-direction: column; gap: 10px }

/* ── düğmeler ── */
.btn-wa, .btn-out, .rp-btn-wa, .rp-btn-out {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 4px;
  font-size: .72rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  transition: all var(--t1); white-space: nowrap;
}
.btn-wa, .rp-btn-wa { background: var(--gold); color: var(--navy); border: 1.5px solid var(--gold) }
.btn-wa:hover, .rp-btn-wa:hover { background: var(--gold-l,var(--gold)); transform: translateY(-1px) }
.btn-out, .rp-btn-out { background: transparent; color: rgba(255,255,255,.65); border: 1.5px solid rgba(255,255,255,.22); font-weight: 300 }
.btn-out:hover, .rp-btn-out:hover { border-color: rgba(255,255,255,.5); color: #fff }
/* açık zeminde aynı anahat düğmesi okunur kalsın */
.sec-white .btn-out, .sec-sand .btn-out { color: var(--ink2); border-color: var(--line) }
.sec-white .btn-out:hover, .sec-sand .btn-out:hover { border-color: var(--gold); color: var(--gold-d) }

/* ── erişilebilirlik ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── dar ekran ── */
@media(max-width:900px) {
  .pg-hi, .ph-inner, .cta-b, .cta-block { grid-template-columns: 1fr }
  .g3, .grid-3, .rel-g, .photo-3 { grid-template-columns: repeat(2,1fr) }
  .ctb-btns { flex-direction: row; flex-wrap: wrap }
}
@media(max-width:560px) {
  .g2, .g3, .grid-3, .rel-g, .photo-3, .photo-pair { grid-template-columns: 1fr }
  .ctb-btns { flex-direction: column }
}

/* ══════════════════════════════════════════
   SAYFAYA ÖZEL BİLEŞENLER

   Beş sayfa kendi bileşen setini kullanıyor ve o setin stil dosyası siteye
   hiç taşınmamış. Tarayıcıda doğrulandı (1280 px): hesaplayıcı seçenekleri
   çerçevesiz düz metin satırları olarak (581×27) çiziliyordu, neden kartları
   ve tedavi satırları kutu değil alt alta metin oluyordu.

   Aşağıdakiler tanımsız sınıf saymaya göre değil, gerçek rendering
   ölçümüne göre yazıldı. Yeni görünüm icat edilmedi; sitenin kendi
   tokenları (--gold, --navy, --cream, --line, --serif) kullanıldı.

   /surgeon-led bilerek dışarıda — o sayfada iki adet <main> elemanı var,
   önce yapısal düzeltme gerekiyor.
══════════════════════════════════════════ */

/* ── kahraman: iki sütun + istatistik şeridi (hair-loss-causes-*) ── */
/* .hero üç sayfada geçiyor ve iki farklı iç yapısı var: hair-loss ikilisi
   doğrudan .hero-l/.hero-r çocukları taşıyor, /surgeon-led ise kendi
   .wrap.hero__grid sarmalayıcısını. Ortak kural yalnızca zemin ve dikey
   boşluk verir; sütunlar aşağıda her yapıya ayrı tanımlanır. Tek bir grid
   kuralı ikisine birden uygulanırsa /surgeon-led'de iç içe ızgara oluşup
   içerik 610 px'e sıkışıyor — ölçülerek görüldü. */
.hero {
  background: var(--navy);
  padding: clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px);
}
/* hair-loss ikilisi: sarmalayıcısı yok, hizalamayı .hero yapar */
.hero > .hero-l { grid-area: l }
.hero > .hero-r { grid-area: r }
.hero:has(> .hero-l) {
  display: grid; grid-template-areas: 'l r'; grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px,4vw,56px); align-items: center;
  width: 100%; max-width: var(--mw); margin: 0 auto;
  padding-left: clamp(18px,4vw,40px); padding-right: clamp(18px,4vw,40px);
}
/* :has() desteklemeyen tarayıcı tek sütun alır — bozuk değil, sade */
.hero-l, .hero-r { min-width: 0 }
.hero-r img { width: 100%; display: block; border-radius: var(--r8); aspect-ratio: 4/3; object-fit: cover }
.hero-stats { display: flex; flex-wrap: wrap; gap: clamp(20px,3vw,40px); margin-top: 26px }
.hs-n { font-family: var(--serif); font-weight: 300; font-size: 2rem; line-height: 1; color: var(--gold) }
.hs-n sup { font-size: .5em; vertical-align: super }
.hs-l { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-top: 6px }

/* ── neden kartları (.cause-g > .cc) ── */
.cause-g, .types-g, .treat-g, .bp-g {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: clamp(14px,2vw,22px);
}
.cc {
  background: var(--white); border: 1px solid var(--gold-br);
  border-radius: var(--r8); padding: 24px 22px;
  transition: border-color var(--t1), transform var(--t1);
}
.cc:hover { border-color: var(--gold); transform: translateY(-3px) }
.cc-icon { width: 34px; height: 34px; margin-bottom: 14px; color: var(--gold-d) }
.cc-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.3 }
.cc-pct { font-family: var(--serif); font-weight: 300; font-size: 1.6rem; color: var(--gold-d); line-height: 1 }
.cc-title { font-size: .95rem; font-weight: 400; color: var(--ink); margin: 8px 0 8px }
.cc-desc { font-size: .8rem; line-height: 1.72; color: var(--tb) }
.cc-link { display: inline-block; margin-top: 12px; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-d) }

/* ── tedavi satırları (.tr) ── */
.tr { background: var(--white); border: 1px solid var(--line); border-radius: var(--r8); overflow: hidden }
.tr-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: var(--cream); border-bottom: 1px solid var(--line) }
.tr-head.surgical { background: var(--navy) }
.tr-head.surgical .tr-name { color: var(--white) }
.tr-head.surgical .tr-tag { color: rgba(255,255,255,.45) }
.tr-icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--gold-bg); color: var(--gold-d) }
.tr-icon svg { width: 16px; height: 16px; fill: currentColor }
.tr-head.surgical .tr-icon { background: rgba(196,169,106,.18); color: var(--gold) }
.tr-name { font-size: .95rem; font-weight: 400; color: var(--ink) }
.tr-tag { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink4); margin-top: 3px }
.tr-body { padding: 18px 22px }
.tr-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0 }
.tr-list li { position: relative; padding-left: 18px; font-size: .82rem; line-height: 1.7; color: var(--tb) }
.tr-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold) }
.tr-link { display: inline-block; margin-top: 14px; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-d) }

/* ── yaş dağılımı çubukları (.age-tl > .at-item) ── */
.at-item { display: grid; grid-template-columns: 60px 70px 1fr 2fr; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line2) }
.at-item:last-child { border-bottom: none }
.at-age { font-size: .82rem; font-weight: 400; color: var(--ink) }
.at-pct { font-family: var(--serif); font-weight: 300; font-size: 1.15rem; color: var(--gold-d) }
.at-pct sup { font-size: .55em; vertical-align: super }
.at-label { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink4) }
.at-bar { height: 6px; border-radius: 3px; background: var(--cream); overflow: hidden }
.at-fill { height: 100%; background: var(--gold); border-radius: 3px }

/* ── DHT adımları ── */
.dht-steps { display: flex; flex-direction: column; gap: 18px; margin-top: 22px }
.dht-step { display: flex; gap: 16px; align-items: flex-start }
.dht-step-num {
  flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--gold-br); background: var(--gold-bg);
  font-family: var(--serif); font-size: .9rem; color: var(--gold-d);
}
.dht-step-title { font-size: .92rem; font-weight: 400; color: var(--ink); margin-bottom: 5px }
.dht-step-desc { font-size: .82rem; line-height: 1.72; color: var(--tb) }
.dht-step-tag { display: inline-block; margin-top: 8px; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); border: 1px solid var(--gold-br); border-radius: 100px; padding: 3px 10px }

/* ── tetikleyici zaman çizelgesi (kadınlar) ── */
.trigger-tl { display: flex; flex-direction: column; gap: 20px; margin-top: 24px }
.trig { display: flex; gap: 16px; align-items: flex-start }
.trig-dot { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-bg); border: 1px solid var(--gold-br); color: var(--gold-d) }
.trig-dot svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.4 }
.trig-age { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 3px }
.trig-title { font-size: .92rem; font-weight: 400; color: var(--ink); margin-bottom: 5px }
.trig-desc { font-size: .82rem; line-height: 1.72; color: var(--tb) }

/* ── erkek/kadın karşılaştırma kutusu ── */
.diff-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r8); overflow: hidden }
.diff-box-title { padding: 16px 22px; background: var(--navy); color: var(--white); font-family: var(--serif); font-weight: 300; font-size: 1.05rem }
.diff-cols { display: grid; grid-template-columns: 1fr 1fr }
.diff-col { padding: 22px }
.diff-col + .diff-col { border-left: 1px solid var(--line2) }
.diff-col-h { font-size: .82rem; font-weight: 400; color: var(--ink); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line2) }
.diff-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0 }
.diff-col li { position: relative; padding-left: 16px; font-size: .8rem; line-height: 1.7; color: var(--tb) }
.diff-col li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold) }

/* ── kan paneli kartları ── */
.bpc { background: var(--white); border: 1px solid var(--gold-br); border-radius: var(--r8); padding: 18px }
.bpc-icon { width: 26px; height: 26px; color: var(--gold-d); margin-bottom: 10px }
.bpc-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4 }
.bpc-name { font-size: .88rem; font-weight: 400; color: var(--ink); margin-bottom: 4px }
.bpc-why { font-size: .76rem; line-height: 1.65; color: var(--tb) }

/* ── fotoğraf çifti ── */
.pp { position: relative; border-radius: var(--r8); overflow: hidden; background: var(--cream) }
.pp img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover }

/* ── büyüme zaman çizelgesi (.tl) ── */
.tl { display: flex; flex-direction: column; gap: 0; position: relative }
.tl-i { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 26px; position: relative }
.tl-i:not(:last-child)::before {
  content: ''; position: absolute; left: 19px; top: 40px; bottom: 0;
  width: 1px; background: var(--line);
}
.tl-dot {
  flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--gold-br); background: var(--gold-bg);
  font-size: .72rem; font-weight: 400; color: var(--gold-d); position: relative; z-index: 1;
}
.tl-time { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 3px }
.tl-title { font-size: .95rem; font-weight: 400; color: var(--ink); margin-bottom: 5px }
.tl-desc { font-size: .82rem; line-height: 1.72; color: var(--tb) }

/* ── tablo içi durum etiketi (finasteride) ── */
.tg { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: .7rem; line-height: 1.5 }
.tg-g { background: rgba(46,125,80,.10); color: #2E7D50; border: 1px solid rgba(46,125,80,.22) }
.tg-y { background: var(--gold-bg); color: var(--gold-d); border: 1px solid var(--gold-br) }
.dt { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink4) }

/* ══ HESAPLAYICILAR ══ */
.calc-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--r16); overflow: hidden }
.calc-header, .calc-hd { padding: 22px 26px; background: var(--navy) }
.calc-header-tag, .calc-hd-tag { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px }
.calc-header-title, .calc-hd-title { font-family: var(--serif); font-weight: 300; font-size: 1.3rem; color: var(--white) }
.calc-body { padding: clamp(20px,3vw,30px) }
.step + .step { margin-top: 26px }
.step-label, .step-lbl {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2);
}
.step-num {
  flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--gold-bg); border: 1px solid var(--gold-br);
  font-size: .68rem; color: var(--gold-d); letter-spacing: 0;
}
.opt-grid { display: grid; gap: 10px }
.opt-grid-2 { grid-template-columns: repeat(2,1fr) }
.opt-grid-3 { grid-template-columns: repeat(3,1fr) }
.opt-grid-4 { grid-template-columns: repeat(4,1fr) }
.opt-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 62px; padding: 12px 10px; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r8);
  cursor: pointer; user-select: none;
  transition: border-color var(--t1), background var(--t1), transform var(--t1);
}
.opt-btn:hover { border-color: var(--gold); background: var(--gold-bg) }
.opt-btn.sel { border-color: var(--gold); background: var(--gold-bg); box-shadow: inset 0 0 0 1px var(--gold) }
.ob-main, .ob-m { font-size: .88rem; font-weight: 400; color: var(--ink) }
.ob-sub, .ob-s { font-size: .68rem; color: var(--ink4); line-height: 1.4 }
.opt-btn.sel .ob-main, .opt-btn.sel .ob-m { color: var(--gold-d) }
.slider-wrap { padding: 4px 0 }
.range-sl { width: 100%; accent-color: var(--gold); height: 24px; cursor: pointer }
.range-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: .64rem; color: var(--ink4) }

.result-panel { display: none; margin-top: 26px; padding: 24px; background: var(--navy); border-radius: var(--r8) }
.result-panel.show { display: block }
.rp-tag { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px }
.rp-graft { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem,4vw,2.8rem); line-height: 1; color: var(--white) }
.rp-graft span { font-size: .38em; color: rgba(255,255,255,.5); margin-left: 6px }
.rp-label, .rp-lbl { font-size: .78rem; color: rgba(255,255,255,.5); margin-top: 8px }
.prog-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin: 16px 0 }
.prog-fill { height: 100%; background: var(--gold); border-radius: 3px; transition: width .4s var(--ease) }
.rp-details { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 1px; background: rgba(255,255,255,.10); border-radius: var(--r8); overflow: hidden; margin-top: 6px }
.rpd { background: var(--navy); padding: 14px }
.rpd-l { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 5px }
.rpd-v { font-size: .82rem; color: var(--white); line-height: 1.5 }
.rp-note { font-size: .72rem; line-height: 1.65; color: rgba(255,255,255,.42); margin-top: 14px }
.rp-btns, .rp-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px }

/* ── dar ekran ── */
@media(max-width:900px) {
  .hero { grid-template-columns: 1fr }
  .diff-cols { grid-template-columns: 1fr }
  .diff-col + .diff-col { border-left: none; border-top: 1px solid var(--line2) }
  .at-item { grid-template-columns: 52px 60px 1fr; row-gap: 8px }
  .at-bar { grid-column: 1 / -1 }
  .opt-grid-4 { grid-template-columns: repeat(2,1fr) }
}
@media(max-width:560px) {
  .opt-grid-3, .opt-grid-2 { grid-template-columns: repeat(2,1fr) }
  .hero-stats { gap: 18px }
  .tl-i { gap: 12px }
  .tl-i:not(:last-child)::before { left: 16px }
  .tl-dot { width: 34px; height: 34px }
}

/* ══════════════════════════════════════════
   /surgeon-led — kendi BEM adlandırması

   Bu sayfa başka bir tasarım sisteminden geliyor ve o sistemin stil dosyası
   siteye hiç taşınmamış: 66 sınıf tanımsızdı. Ekran görüntüsünde "At a
   glance" tablosu çökmüş, gövde metni x=0'da, kimlik şeridi düz metin
   listesiydi.

   Ayrıca sayfada iki <main> elemanı ve açılışı olmayan bir </header>
   kapanışı vardı (işaretleme birleştirme hatası) — CSS yazılmadan önce
   düzeltildi, yoksa stil yanlış ağaca uygulanırdı.
══════════════════════════════════════════ */

.hero__grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px,4vw,56px); align-items: center;
}
.hero__sub { font-size: .95rem; line-height: 1.8; color: rgba(255,255,255,.62); font-weight: 300; margin: 16px 0 0 }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px }
.hero h1 { font-family: var(--serif); font-weight: 300; letter-spacing: -.015em;
  font-size: clamp(1.9rem,3.6vw,3.1rem); line-height: 1.08; color: var(--white) }
.hero h1 em { font-style: italic; color: var(--gold) }

.eyebrow {
  font-size: .63rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-d); margin: 0 0 12px;
}
.hero .eyebrow, .on-dark .eyebrow { color: rgba(196,169,106,.8) }
.lede { font-size: .95rem; line-height: 1.8; color: var(--tb); font-weight: 300; max-width: 62ch }
.head { margin-bottom: clamp(26px,4vw,44px) }
.head h2, .section h2 {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.015em;
  font-size: clamp(1.6rem,3.2vw,2.6rem); line-height: 1.12; color: var(--ink); margin: 0 0 12px;
}
.narrow { max-width: 760px }
.section { padding: clamp(56px,7vw,92px) 0 }
.section--tight { padding: clamp(36px,5vw,60px) 0 }
.section.on-warm { background: var(--cream) }
.section.on-dark { background: var(--navy) }
.section.on-dark h2, .section.on-dark h3 { color: var(--white) }
.section.on-dark p, .section.on-dark .lede { color: rgba(255,255,255,.6) }

/* ── kimlik kartı (hero sağ sütun) ── */
.signature-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(196,169,106,.20);
  border-radius: var(--r16); padding: clamp(22px,3vw,30px);
}
.signature-card h2 {
  font-family: var(--serif); font-weight: 300; font-size: 1.2rem;
  color: var(--gold); margin: 0 0 16px;
}
.signature-card dl { margin: 0 }
.sig-row {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07);
}
.sig-row:last-child { border-bottom: none }
.sig-row dt { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.38) }
.sig-row dd { margin: 0; font-size: .84rem; color: rgba(255,255,255,.86) }

/* ── kimlik şeridi ── */
.strip { background: var(--cream); border-block: 1px solid var(--line2) }
.strip__in {
  width: 100%; max-width: var(--mw); margin: 0 auto;
  padding: clamp(24px,3vw,34px) clamp(18px,4vw,40px);
  display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: clamp(18px,3vw,32px);
}
.strip__cell { display: flex; flex-direction: column; gap: 6px }
.strip__n { font-family: var(--serif); font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--gold-d) }
.strip__l { font-size: .72rem; line-height: 1.55; color: var(--tb) }

/* ── özellik listesi ── */
.features { display: grid; gap: clamp(16px,2.4vw,26px) }
.feature { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start }
.feature__k { font-family: var(--serif); font-weight: 300; font-size: 1.25rem; color: var(--gold-d); line-height: 1.2 }
.feature__t { font-size: .95rem; font-weight: 400; color: var(--ink); margin: 0 0 5px }
.feature__d { font-size: .84rem; line-height: 1.75; color: var(--tb); margin: 0 }

/* ── yöntem kartları ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: clamp(16px,2.4vw,24px) }
.cards .card { padding: clamp(22px,3vw,28px) }
.card__tag { display: inline-block; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 10px }
.cards .card h3 { font-family: var(--serif); font-weight: 300; font-size: 1.3rem; color: var(--ink); margin: 0 0 10px }

/* ── süreç adımları ── */
.steps { display: grid; gap: clamp(18px,2.6vw,28px) }
.steps .step {
  display: grid; grid-template-columns: 46px 1fr; gap: 16px 16px; align-items: start;
  padding-bottom: clamp(18px,2.6vw,28px); border-bottom: 1px solid var(--line2);
}
.steps .step:last-child { border-bottom: none; padding-bottom: 0 }
.step__n { font-family: var(--serif); font-weight: 300; font-size: 1.25rem; color: var(--gold-d) }
.step__t { font-size: .95rem; font-weight: 400; color: var(--ink); margin: 0 }
.step__meta { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink4) }
.step__d { grid-column: 2; font-size: .84rem; line-height: 1.75; color: var(--tb); margin: 0 }

/* ── katılım paketleri ── */
.pkgs { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: clamp(14px,2vw,20px) }
.pkgs .pkg {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r8); padding: clamp(20px,2.6vw,26px);
}
.pkg--hero { border-color: var(--gold); box-shadow: 0 6px 24px rgba(196,169,106,.10) }
.pkg__name { font-family: var(--serif); font-weight: 300; font-size: 1.3rem; color: var(--ink); margin: 0 0 3px }
.pkg__role { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); margin: 0 0 12px }
.pkg__price { font-size: .82rem; color: var(--ink2); margin: 0 0 10px }
.pkg__body { font-size: .82rem; line-height: 1.75; color: var(--tb); margin: 0 }

/* ── sorumluluk matrisi ── */
.matrix-scroll { overflow-x: auto; margin: clamp(20px,3vw,28px) 0 }
.matrix { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 620px; background: var(--white) }
.matrix caption { caption-side: bottom; padding-top: 12px; font-size: .72rem; color: var(--ink4); text-align: left }
.matrix th, .matrix td { padding: 12px 14px; border-bottom: 1px solid var(--line2); text-align: left; vertical-align: top }
.matrix thead th { font-weight: 400; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-d); background: var(--cream); white-space: nowrap }
.matrix tbody th { font-weight: 400; color: var(--ink) }
.matrix tbody th small { display: block; margin-top: 4px; font-size: .72rem; color: var(--ink4); font-weight: 300 }
.matrix td { text-align: center }
.matrix col.hi + col, .matrix .hi { background: var(--gold-bg) }
.mark {
  display: inline-block; padding: 4px 11px; border-radius: 100px;
  font-size: .62rem; letter-spacing: .06em; line-height: 1.5; white-space: nowrap;
}
.mark--surgeon { background: var(--gold-bg); color: var(--gold-d); border: 1px solid var(--gold-br) }
.mark--team { background: var(--cream); color: var(--ink3); border: 1px solid var(--line) }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(20px,3vw,28px) }
.legend .mark { white-space: normal }

/* ── büyüme evreleri ── */
.growth { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 1px; background: var(--line2); border: 1px solid var(--line2); border-radius: var(--r8); overflow: hidden }
.growth__cell { background: var(--white); padding: 20px 18px }
.growth__m { display: block; font-family: var(--serif); font-weight: 300; font-size: 1.2rem; color: var(--gold-d); margin-bottom: 8px }
.growth__m span { font-size: .58em; letter-spacing: .1em; text-transform: uppercase; color: var(--ink4); font-family: var(--sans) }
.growth__x { font-size: .8rem; line-height: 1.72; color: var(--tb); margin: 0 }

/* ── yazar kutusu ── */
.author { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 820px }
.author__mono { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d); margin: 0 }
.author__n { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; color: var(--ink); margin: 0 }
.author__r { font-size: .78rem; color: var(--ink4); margin: 0 }
.author__b { font-size: .84rem; line-height: 1.78; color: var(--tb); margin: 8px 0 0 }

/* ── SSS (yerel <details>) ── */
.faq > details { border-bottom: 1px solid var(--line2) }
.faq > details > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 17px 0; min-height: 44px;
  font-size: .95rem; line-height: 1.5; color: var(--ink);
}
.faq > details > summary::-webkit-details-marker { display: none }
.faq > details > summary::after {
  content: '+'; flex-shrink: 0; width: 26px; height: 26px;
  display: grid; place-items: center; border: 1px solid var(--gold-br);
  border-radius: 50%; color: var(--gold-d); font-weight: 300;
  transition: transform .22s ease, background .22s ease;
}
.faq > details[open] > summary::after { transform: rotate(45deg); background: var(--gold-bg) }
.faq > details > summary:hover { color: var(--gold-d) }
.faq__a { padding: 0 44px 18px 0 }
.faq__a p { font-size: .86rem; line-height: 1.8; color: var(--tb); margin: 0 0 10px }
.faq__a p:last-child { margin-bottom: 0 }

/* ── kapanış çağrısı ── */
.cta { background: var(--navy); border-radius: var(--r16); padding: clamp(28px,4vw,52px) }
.cta h2 { color: var(--white) }
.cta p { color: rgba(255,255,255,.58) }
.cta__row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px }
.cta__note { font-size: .72rem; color: rgba(255,255,255,.4); margin-top: 14px }

/* ── metin yardımcıları ── */
.pull {
  border-left: 3px solid var(--gold); background: var(--gold-bg);
  border-radius: 0 var(--r8) var(--r8) 0; padding: 16px 20px; margin: 20px 0;
  font-size: .92rem; line-height: 1.75; color: var(--ink2);
}
.check { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 18px 0; padding: 0 }
.check li { position: relative; padding-left: 26px; font-size: .84rem; line-height: 1.72; color: var(--tb) }
.check li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 14px; height: 8px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,48px) }
.btn--sm { padding: 9px 18px; font-size: .66rem }
.btn--solid { background: var(--gold); color: var(--navy) }
.btn--solid:hover { background: var(--gold-d); color: var(--white) }
.hero .btn:not(.btn--solid) { color: rgba(255,255,255,.7); border: 1.5px solid rgba(255,255,255,.22) }
.hero .btn:not(.btn--solid):hover { border-color: rgba(255,255,255,.5); color: #fff }

@media(max-width:900px) {
  .hero__grid, .split, .author { grid-template-columns: 1fr }
  .sig-row { grid-template-columns: 1fr }
  .sig-row dd { margin-top: 2px }
}

html[lang] :is(.nlogo-img,.logo-img){display:block;height:38px;width:auto;max-width:200px}
html[lang] .fl-logo .logo-img{height:36px}
html[lang] :is(.nlogo-text,.logo-text){display:none}
html[lang] :is(.nlogo,.fl-logo).logo-fallback :is(.nlogo-text,.logo-text){display:inline-flex;align-items:baseline;gap:1px}
html[lang] .nav.hero-zone .nlogo-img--dark,
html[lang] .nav.light-zone .nlogo-img--light{display:none}
@media(max-width:767px){
  html[lang] .nlogo-img{height:32px}
  html[lang] .fl-logo .logo-img{height:32px}
}

.ft-top{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:48px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.ft-tagline{font-size:.78rem;color:rgba(255,255,255,.38);font-weight:200;margin-top:8px;line-height:1.75;max-width:340px}
.ft-contacts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.ft-ct{display:flex;align-items:flex-start;gap:8px;font-size:.72rem;color:rgba(255,255,255,.35);line-height:1.5}
.ft-ct svg{width:12px!important;height:12px!important;stroke:var(--gold,#C4A96A);fill:none;stroke-width:1.5;flex-shrink:0;margin-top:2px}
.ft-wa{display:flex;align-items:center;gap:8px;font-size:.72rem;color:#25D366;text-decoration:none;transition:opacity .2s}
.ft-wa svg{width:12px!important;height:12px!important;stroke:#25D366;fill:none;stroke-width:1.5;flex-shrink:0}
.ft-wa:hover{opacity:.8}
.ft-langs-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.06);margin-top:0}
.ft-langs-label{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28);white-space:nowrap;flex-shrink:0}
.fbot-creds{font-size:.63rem;color:rgba(255,255,255,.2)}
.ft-sister{margin-top:0;padding:16px 0 24px;border-top:1px solid rgba(255,255,255,.05);font-size:.68rem;color:rgba(255,255,255,.2);line-height:1.7}
.ft-sister a{color:rgba(196,169,106,.4);text-decoration:none}
.ft-sister a:hover{color:rgba(196,169,106,.75)}
@media(max-width:600px){.ft-top{flex-direction:column}}

.ft-langs-toggle{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:0;font:inherit;color:inherit}
.ft-langs-toggle .ft-lchev{font-size:.6rem;color:rgba(255,255,255,.28);transition:transform .2s;display:inline-block}
.ft-langs-row.open .ft-langs-toggle .ft-lchev{transform:rotate(180deg)}
.ft-langs-panel{flex-basis:100%;max-height:0;overflow:hidden;transition:max-height .3s ease,margin-top .3s ease;margin-top:0}
.ft-langs-row.open .ft-langs-panel{max-height:600px;margin-top:14px}