@charset "UTF-8";
/* ============================================================================
   ceneeklemi.net — Prof. Dr. Mehmet Oğuz Öztoprak
   ----------------------------------------------------------------------------
   TASARIM YÖNÜ: "premium klinik" — sakin, pahalı, kendinden emin.
   Az öğe, çok boşluk, güçlü kontrast. Süs yok; her öğe iş yapıyor.

   İKİ KURAL (birinci denemede ihlal edildi, ansiklopediye döndü):
     1) Gövde metni SANS. Serif YALNIZCA büyük başlıkta. Serif gövde =
        Wikipedia hissi.
     2) Ana sayfa okunacak bir yazı DEĞİL. Kısa cümle, geniş boşluk,
        güçlü görsel. Uzun anlatım detay sayfalarına ait.
   ============================================================================ */

/* Yazı tipleri: /assets/fonts/fonts.css — layouts/main.php bunu ÖNCE yükler.
   Google Fonts CDN'i kasten kullanılmıyor (ziyaretçi IP'si Google'a gitmesin). */

:root {
  /* ---- Zemin: sıcak fildişi. Saf beyaz steril, lacivert kasvetli;
         fildişi hem aydınlık hem sıcak. ---- */
  --paper:      #FBF8F3;
  --paper-2:    #F4EEE4;
  --paper-3:    #EBE3D5;
  --white:      #FFFFFF;

  /* ---- Mürekkep: sıcak siyah (nötr gri değil) ---- */
  --ink:        #221F1B;
  --ink-2:      #5A5349;
  --ink-3:      #93897C;

  /* ---- Ana renk: derin petrol yeşili.
         Lacivertin verdiği güveni verir ama soğuk değil, sıcak tarafta.
         Ve diş hekimliği sitelerinin jenerik mavisinden uzak. ---- */
  --navy-950:   #0A3330;   /* eski isimler korunuyor: iç sayfalar bunlara bağlı */
  --navy-900:   #0E413D;
  --navy:       #10514B;
  --navy-700:   #17706A;
  --navy-wash:  #E8F1EF;

  /* ---- Vurgu: kiremit. Yeşilin karşısında sıcak ve canlı. ---- */
  --gold:       #B5654A;
  --gold-lift:  #C97A5C;
  --gold-wash:  #FAEDE7;

  --line:       #E5DCCC;
  --line-soft:  #EFE9DD;
  --line-dark:  rgba(255, 255, 255, .14);

  --ok:         #2C6E49;
  --warn-wash:  #FCF6EA;
  --warn-line:  #E2CB96;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Plex', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-lg:   1.0625rem;
  --t-xl:   1.1875rem;
  --t-2xl:  1.4375rem;
  --t-3xl:  1.75rem;
  --t-4xl:  2.25rem;
  --t-5xl:  3rem;
  --t-6xl:  4rem;

  --measure: 36rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --page: 82rem;

  --r: 3px;
  --shadow-1: 0 1px 2px rgba(15, 20, 24, .04);
  --shadow-2: 0 4px 16px -4px rgba(15, 20, 24, .10), 0 1px 3px rgba(15, 20, 24, .05);
  --shadow-3: 0 18px 44px -12px rgba(10, 32, 53, .22);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* SANS gövde — birinci denemedeki serif gövde ansiklopedi hissi veriyordu */
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--gold); }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -9999px; background: var(--navy); color: #fff;
        padding: .75rem 1.25rem; z-index: 200; font-size: var(--t-sm); }
.skip:focus { left: 1rem; top: 1rem; }
.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; }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 52rem; }

/* ============================================================================
   TİPOGRAFİ
   ============================================================================ */
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-size: clamp(2.25rem, 5.2vw, var(--t-6xl));
  text-wrap: balance;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-size: clamp(1.75rem, 3.4vw, var(--t-4xl));
  text-wrap: balance;
}
.h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  font-size: var(--t-2xl);
}
.lede {
  font-size: var(--t-lg);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 34rem;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ''; width: 1.5rem; height: 1px; background: currentColor; opacity: .6;
}
/* Çizgisiz üst etiket: kart ve form içinde, çizgi kalabalık yaratıyor */
.eyebrow--plain::before { display: none; }
/* Koyu zeminde kiremit (#B5654A) kontrastı zayıf kalıyor — açık tonu.
   Karanlık bloklara giren her metin burada elden geçmeli. */
.section--dark .eyebrow,
.statement .eyebrow,
.cta .eyebrow,
.foot .eyebrow { color: var(--gold-lift); }
.muted { color: var(--ink-3); }
.small { font-size: var(--t-sm); }
.center { text-align: center; }

/* Yan sütun paneli (profil künyesi, form yardımı) */
.hero__aside {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem;
  box-shadow: var(--shadow-2);
}
.hero__aside h2 {
  font-family: var(--sans); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  color: var(--ink-3); margin-bottom: 1rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ============================================================================
   ÜST BANT + GEZİNTİ
   Giriş ekranı koyu; başlık da koyu başlar, kaydırınca kağıda döner.
   ============================================================================ */
/* Giriş ekranı aydınlık olduğu için başlık da kağıt. Kaydırınca sadece
   bulanıklık ve çizgi kazanır — renk sıçraması olmaz. */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.5rem;
}

.brand { text-decoration: none; display: block; }
.brand__text { line-height: 1.15; }
.brand__name {
  display: block;
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 500;
  color: var(--ink); letter-spacing: -.015em; white-space: nowrap;
}
.brand__field {
  display: block;
  font-size: 0.5625rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3); font-weight: 500;
}
@media (max-width: 26rem) { .brand__field { display: none; } }

.nav { display: none; }
@media (min-width: 64rem) { .nav { display: flex; align-items: center; gap: .1rem; } }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .75rem;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  border-radius: var(--r); white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__link:hover, .nav__item:focus-within .nav__link { color: var(--navy); background: var(--navy-wash); }
.nav__link[aria-current="page"] { color: var(--navy); }
.nav__caret { width: .5rem; height: .5rem; opacity: .5; }

.nav__panel {
  position: absolute; top: calc(100% + .4rem); left: 0;
  min-width: 15.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-3);
  padding: .4rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* Görünmez köprü: bağlantı ile panel arasındaki .4rem boşluk hover'ı
   kesiyordu — fare aşağı inerken menü kapanıyordu. Bu dolgu boşluğu
   fare açısından kapatır; görsel olarak hiçbir şey değişmez. */
.nav__panel::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: -.5rem; height: .5rem;
}
.nav__item:hover .nav__panel, .nav__item:focus-within .nav__panel {
  opacity: 1; visibility: visible; transform: none;
}
.nav__panel a {
  display: block; padding: .5rem .7rem; border-radius: 2px;
  font-size: var(--t-sm); color: var(--ink-2); text-decoration: none;
}
.nav__panel a:hover { background: var(--navy-wash); color: var(--navy); }
.nav__panel hr { border: 0; border-top: 1px solid var(--line-soft); margin: .35rem .7rem; }

.nav__cta {
  display: none; margin-left: .6rem;
  padding: .6rem 1.15rem;
  background: var(--gold); color: var(--navy-950);
  font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; border-radius: var(--r);
  /* İki satıra kırılınca başlık şişiyor ve ucuz duruyor */
  white-space: nowrap;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.nav__cta:hover { background: var(--gold-lift); color: var(--navy-950); transform: translateY(-1px); }
.nav__cta { white-space: nowrap; }
@media (min-width: 70rem) { .nav__cta { display: inline-block; } }

/* Kaydırınca yalnızca ayrışma çizgisi ve bulanıklık gelir; renk sıçraması yok */
.masthead[data-scrolled="true"] {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-1);
}

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 2.75rem; height: 2.75rem; padding: 0 .7rem;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer;
}
@media (min-width: 64rem) { .burger { display: none; } }
.burger span { display: block; height: 1.5px; background: var(--ink); transition: transform .2s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobilenav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--navy-950);
  padding: 5.5rem var(--gutter) 2rem;
  overflow-y: auto;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s var(--ease), visibility .3s;
}
.mobilenav[data-open="true"] { transform: none; visibility: visible; }
@media (min-width: 64rem) { .mobilenav { display: none; } }
.mobilenav ul { list-style: none; margin: 0; padding: 0; }
.mobilenav > ul > li { border-bottom: 1px solid var(--line-dark); }
.mobilenav a {
  display: block; padding: .95rem 0;
  font-family: var(--serif); font-size: var(--t-2xl);
  color: #fff; text-decoration: none;
}
.mobilenav a:active { color: var(--gold); }
.mobilenav__group { padding: .2rem 0 .9rem; }
.mobilenav__group a {
  font-family: var(--sans); font-size: var(--t-base);
  color: rgba(255,255,255,.6); padding: .45rem 0 .45rem 1rem;
  border-left: 1px solid var(--line-dark);
}
.mobilenav__cta {
  display: block; margin-top: 1.75rem; border-radius: var(--r);
  background: var(--gold); color: var(--navy-950) !important;
  text-align: center; padding: 1rem !important;
  font-family: var(--sans) !important; font-size: var(--t-base) !important; font-weight: 600;
}

/* ============================================================================
   DÜĞMELER
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem;
  font-size: var(--t-base); font-weight: 500;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; text-align: center;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--gold { background: var(--gold); color: var(--navy-950); border-color: var(--gold); font-weight: 600; }
.btn--gold:hover { background: var(--gold-lift); border-color: var(--gold-lift); color: var(--navy-950); }
.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--outline:hover { border-color: var(--navy); background: #fff; color: var(--navy); }
.btn--onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn--onDark:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); color: #fff; }
.btn--ghost {
  background: none; border: none; color: var(--ink-2); padding-inline: .2rem;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .3em;
}
.btn--ghost:hover { color: var(--gold); text-decoration-color: var(--gold); transform: none; }
.btn--block { width: 100%; }
.btn--lg { padding: 1rem 1.9rem; font-size: var(--t-lg); }
.arrow { width: .75em; height: .75em; fill: currentColor; transition: transform .18s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ============================================================================
   GİRİŞ EKRANI — koyu, tam genişlik, tek güçlü görsel
   ============================================================================ */
/* AYDINLIK giriş ekranı. Koyu sürüm "soğuk ve kasvetli" bulundu.
   Sıcak fildişi zemin + sağda büyük fotoğraf. */
.hero {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
}
/* Sıcaklık: sağ üstte yumuşak bir ışık, sol altta hafif kiremit yansıması */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(52rem 38rem at 88% 6%, var(--navy-wash), transparent 60%),
    radial-gradient(36rem 26rem at 4% 96%, var(--gold-wash), transparent 62%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: 1.02fr .98fr; } }

.hero__title { color: var(--ink); margin-bottom: 1.5rem; }
.hero__title em { font-style: italic; color: var(--navy); }
.hero__sub {
  font-size: var(--t-lg); line-height: 1.62;
  color: var(--ink-2);
  max-width: 32rem; margin-bottom: 2.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* Güven şeridi: rakam değil, doğrulanabilir kimlik */
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  margin-top: 2.75rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero__trust div { line-height: 1.35; }
.hero__trust dt {
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3); margin-bottom: .3rem;
}
.hero__trust dd { margin: 0; font-size: var(--t-sm); color: var(--ink); font-weight: 600; }

/* İmza anatomi çizimi — artık yardımcı öğe; asıl yıldız fotoğraf */
.hero__art { position: relative; display: grid; place-items: center; }
.joint { width: 100%; max-width: 26rem; height: auto; }
@media (max-width: 62rem) { .hero__art { display: none; } }

/* ============================================================================
   GÖRSEL YUVASI
   ----------------------------------------------------------------------------
   Fotoğraflar sonradan eklenecek. Yuvalar şimdiden yerinde dursun ki tasarım
   fotoğraf ÜZERİNE kurulsun, sonradan araya sıkıştırılmasın.
   Yuva boşken hangi görselin geleceğini ve önerilen ölçüyü yazar; dosya
   eklenince yer tutucu kendiliğinden kaybolur.
   Yerleşim listesi: GORSEL-LISTESI.md
   ============================================================================ */
.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-2);
}
.shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
.shot--zoom:hover img { transform: scale(1.04); }
.shot--tall  { aspect-ratio: 4 / 5; }
.shot--wide  { aspect-ratio: 16 / 10; }
.shot--square{ aspect-ratio: 1 / 1; }
.shot--hero  { aspect-ratio: 5 / 6; }

/* Boş yuva: ne geleceğini söyler */
.shot__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: .6rem; padding: 1.5rem; text-align: center;
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  background: repeating-linear-gradient(45deg,
    var(--paper-2), var(--paper-2) 10px, var(--paper-3) 10px, var(--paper-3) 20px);
  color: var(--ink-3);
}
.shot__icon { width: 1.75rem; height: 1.75rem; fill: var(--ink-3); opacity: .5; }
.shot__what { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); max-width: 22ch; line-height: 1.4; }
.shot__size { font-size: var(--t-xs); font-variant-numeric: tabular-nums; opacity: .8; }

/* Fotoğrafın üstüne binen künye kartı: kompozisyona derinlik verir */
.shot__badge {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-radius: var(--r);
  padding: .85rem 1rem;
  box-shadow: var(--shadow-2);
  font-size: var(--t-sm);
}

/* ============================================================================
   KAYDIRMA HAREKETİ
   "Çok sakin, cansız" geri bildirimi için: bloklar göründükçe yerine otursun.
   Abartı yok — brief "gereksiz animasyondan kaçın" diyor; tek seferlik, kısa.
   ============================================================================ */
/* KRİTİK: gizleme yalnızca .js sınıfı varken uygulanır.
   Bu sınıfı <head>'deki tek satırlık betik ekler. JS çalışmazsa (hata, eski
   tarayıcı, bot) bloklar baştan görünür kalır — içerik hiçbir koşulda
   JS'e bağımlı olmamalı. Aksi hâlde sayfanın yarısı kaybolurdu. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .js [data-rise][data-seen="true"] { opacity: 1; transform: none; }
  /* Sıralı gecikme: aynı ızgaradaki kartlar peş peşe girsin */
  [data-rise][data-i="1"] { transition-delay: .08s; }
  [data-rise][data-i="2"] { transition-delay: .16s; }
  [data-rise][data-i="3"] { transition-delay: .24s; }
  [data-rise][data-i="4"] { transition-delay: .32s; }
}

/* Çizim sakin sakin kendini çizer. Tek seferlik, döngüsüz.
   .jl = kontur çizgileri (dash ile çizilir)
   .jt = dişler (belirerek gelir — DASH KURALINDAN MUAF)
   İlk sürümde dişlere de dasharray uygulanmış, animasyonları ise fadeUp'tı;
   dashoffset hiç sıfırlanmadığı için dişler görünmez kalmıştı. */
@media (prefers-reduced-motion: no-preference) {
  .joint .jl {
    stroke-dasharray: 1200; stroke-dashoffset: 1200;
    animation: draw 2s var(--ease) forwards;
  }
  .joint .jd-wrap .jl { animation-delay: .45s; }
  .joint .jload { animation: draw 1.2s var(--ease) 1.15s forwards; }
  .joint .jmus  { animation: draw 1.2s var(--ease) 1.3s forwards; }
  .joint .jt {
    opacity: 0;
    animation: fadeUp .45s var(--ease) forwards;
    animation-delay: calc(1.1s + var(--i) * .05s);
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}
/* Hareket kapalıysa çizim eksiksiz görünmeli */
@media (prefers-reduced-motion: reduce) {
  .joint .jl { stroke-dashoffset: 0; }
  .joint .jt { opacity: 1; }
}

/* ============================================================================
   BÖLÜM LİSTESİ DEĞİL, AN DİZİSİ
   ----------------------------------------------------------------------------
   İkinci denemede ana sayfa hâlâ "üst etiket + başlık + metin + kutu"nun
   sekiz kez tekrarıydı ve her şey solda dar bir sütunda duruyordu; sağ taraf
   ölü alandı. Fotoğrafımız olmadığı için premium hissi ancak üç şeyden
   çıkabilir: ÖLÇEK KONTRASTI, ASİMETRİK BÖLÜNME, ve AZ AMA GÜÇLÜ AN.
   Aşağıdaki bileşenler bunun içindir.
   ============================================================================ */

/* ---- İfade anı: tek cümle, dev punto, bol siyah boşluk ---------------- */
.statement {
  position: relative;
  background: var(--navy-950);
  color: #fff;
  padding-block: clamp(5rem, 14vw, 11rem);
  overflow: hidden;
}
.statement::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(50rem 32rem at 20% 0%, rgba(23,69,110,.5), transparent 60%),
              radial-gradient(38rem 26rem at 92% 100%, rgba(192,138,62,.13), transparent 62%);
}
.statement > * { position: relative; }
.statement__text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.6vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  max-width: 20ch;
  text-wrap: balance;
}
.statement__text em { font-style: italic; color: var(--gold-lift); }
/* Devasa tırnak: dekoratif, metnin arkasında */
.statement__quote {
  position: absolute; top: -2rem; left: -1.5rem;
  font-family: var(--serif); font-size: 22rem; line-height: 1;
  color: rgba(255,255,255,.028); pointer-events: none; user-select: none;
}
.statement__by {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  max-width: 30rem;
  font-size: var(--t-sm); color: rgba(255,255,255,.5); line-height: 1.6;
}

/* ---- Asimetrik bölünme: sağdaki ölü alanı öldürür -------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1.25fr; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--wideLeft { grid-template-columns: 1.25fr 1fr; }
  /* Başlık sütunu kaydıkça sabit dursun: pahalı bir editoryal hamle */
  .split__sticky { position: sticky; top: 7rem; }
}

/* ---- Şikâyet menüsü: etiket bulutu değil, tasarlanmış liste ---------- */
.menu { border-top: 1px solid var(--line); }
.menu__row {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.15rem .5rem 1.15rem 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: var(--ink);
  transition: padding .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.menu__row:hover { padding-left: 1rem; background: #fff; color: var(--navy); }
.menu__num {
  flex: none; width: 2ch;
  font-size: var(--t-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: color .25s var(--ease);
}
.menu__row:hover .menu__num { color: var(--gold); }
.menu__label {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.25; letter-spacing: -.012em;
}
.menu__go {
  flex: none; margin-left: auto;
  width: 1.5rem; height: 1.5rem; fill: var(--ink-3);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), fill .25s var(--ease);
}
.menu__row:hover .menu__go { opacity: 1; transform: none; fill: var(--gold); }

/* ---- Basamaklar: rakam grafik öğe olarak --------------------------- */
.steps { display: grid; gap: 1px; background: var(--line-dark); border-block: 1px solid var(--line-dark); }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(5, 1fr); } }
.step {
  background: var(--navy-950);
  padding: 2rem 1.5rem 2.25rem;
  transition: background .3s var(--ease);
}
.step:hover { background: var(--navy-900); }
.step__num {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1; color: rgba(255,255,255,.13);
  margin-bottom: 1.1rem;
  transition: color .3s var(--ease);
}
.step:hover .step__num { color: var(--gold); }
.step__title {
  font-family: var(--serif); font-size: var(--t-xl); font-weight: 500;
  line-height: 1.3; color: #fff; margin-bottom: .6rem;
}
.step__text { font-size: var(--t-sm); line-height: 1.6; color: rgba(255,255,255,.5); }

/* ---- Tedavi Yolculuğu: dikey zaman çizgisi --------------------------
   Basamak dili (yatay 5 sütun) burada çalışmaz: yolculuk bir sıra, sütun
   değil. Okuyucu adım adım aşağı iniyor. */
.journey { max-width: 54rem; }
.jstep { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.5rem; }
.jstep:not(:last-child) { padding-bottom: 3rem; }
.jstep__marker { position: relative; }
/* Adımları bağlayan dikey hat */
.jstep:not(:last-child) .jstep__marker::after {
  content: ''; position: absolute; left: 50%; top: 3.75rem; bottom: -3rem;
  width: 1px; background: var(--line); transform: translateX(-50%);
}
.jstep__num {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border: 1px solid var(--navy); border-radius: 50%;
  background: var(--paper);
  font-family: var(--serif); font-size: var(--t-xl); color: var(--navy);
  position: relative; z-index: 1;
}
.jstep__lede {
  font-family: var(--serif); font-style: italic;
  font-size: var(--t-lg); color: var(--gold); margin: 0 0 .35rem;
}
.jstep__title { margin-bottom: .85rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.jstep__text { color: var(--ink-2); line-height: 1.7; font-size: var(--t-lg); margin: 0; max-width: 38rem; }
/* "Sizin için ne demek" satırı: her adımda somut bir beklenti */
.jstep__you {
  display: flex; gap: .65rem; align-items: flex-start;
  margin: 1.1rem 0 0; padding: .8rem 1rem;
  background: var(--navy-wash); border-radius: var(--r);
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55;
  max-width: 38rem;
}
.jstep__you svg { flex: none; width: 1rem; height: 1rem; fill: var(--navy); margin-top: .12rem; }
@media (max-width: 40rem) {
  .jstep { grid-template-columns: 2.75rem 1fr; gap: 1rem; }
  .jstep__num { width: 2.75rem; height: 2.75rem; font-size: var(--t-base); }
  .jstep:not(:last-child) .jstep__marker::after { top: 3rem; }
  .jstep__text { font-size: var(--t-base); }
}

/* ---- Sayı/etiket künyesi: ölçek kontrastının kaynağı ---------------- */
.factlist { list-style: none; margin: 0; padding: 0; }
.factlist li {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--line-soft);
}
.section--dark .factlist li { border-bottom-color: var(--line-dark); }
.factlist dt, .factlist__k {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3);
}
.section--dark .factlist__k { color: rgba(255,255,255,.4); }
.factlist__v {
  font-family: var(--serif); font-size: var(--t-lg); text-align: right; color: var(--ink);
}
.section--dark .factlist__v { color: #fff; }

/* ---- Tam genişlik: kenardan taşan blok ------------------------------ */
.bleed { width: 100%; }

/* ============================================================================
   BÖLÜMLER
   ============================================================================ */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--paper2 { background: var(--paper-2); }
.section--dark { background: var(--navy-950); color: #fff; }
.section--dark .h2, .section--dark .h3 { color: #fff; }
.section--dark .lede { color: rgba(255,255,255,.62); }
.section--dark .muted { color: rgba(255,255,255,.45); }
.section__head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ============================================================================
   İÇ SAYFA BAŞLIĞI
   Ana sayfanın giriş ekranıyla aynı sıcaklık, daha alçak: iç sayfada amaç
   etkilemek değil, okuyucuyu hızla içeriğe bırakmak.
   ============================================================================ */
.phead {
  position: relative;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--paper);
  overflow: hidden;
}
.phead::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(44rem 26rem at 92% -10%, var(--navy-wash), transparent 62%);
  pointer-events: none;
}
.phead > * { position: relative; }
.phead__grid { display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 60rem) { .phead__grid { grid-template-columns: 1.5fr 1fr; } }
.phead__title { max-width: 18ch; }
.phead__lede { margin-top: 1.25rem; max-width: 40rem; }
.phead__aside { padding-bottom: .35rem; }

/* ============================================================================
   İÇERİK DETAY — metin + sabit yan sütun
   ============================================================================ */
.article { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 66rem) { .article { grid-template-columns: minmax(0, 1fr) 17.5rem; } }

.aside { display: none; }
@media (min-width: 66rem) {
  .aside { display: block; position: sticky; top: 6.5rem; }
}

/* İçindekiler: sayfalar uzun, hasta tek bir sorunun peşinde geliyor */
.toc { border-left: 1px solid var(--line); padding-left: 1.1rem; }
.toc__title {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; color: var(--ink-3); margin-bottom: .9rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin-bottom: .1rem; }
.toc a {
  display: block; padding: .4rem 0;
  font-size: var(--t-sm); line-height: 1.4;
  color: var(--ink-2); text-decoration: none;
  border-left: 2px solid transparent; margin-left: -1.1rem; padding-left: 1.1rem;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.toc a:hover { color: var(--navy); }
.toc a[data-active="true"] { color: var(--navy); font-weight: 600; border-left-color: var(--gold); }

/* Yan sütun çağrı kartı */
.askcard {
  margin-top: 2rem; padding: 1.35rem;
  background: var(--navy); color: #fff; border-radius: var(--r);
}
.askcard h3 {
  font-family: var(--serif); font-size: var(--t-xl); font-weight: 500;
  line-height: 1.3; color: #fff; margin-bottom: .6rem;
}
.askcard p { font-size: var(--t-sm); color: rgba(255,255,255,.7); line-height: 1.55; margin: 0 0 1.1rem; }

/* ============================================================================
   DOĞRUDAN CEVAP — GEO imzası
   ============================================================================ */
.answer {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  padding: 1.75rem;
  margin-block: 2rem;
  max-width: 44rem;
  box-shadow: var(--shadow-2);
}
.section--dark .answer {
  background: rgba(255,255,255,.045);
  border-color: var(--line-dark);
  border-left-color: var(--gold);
  box-shadow: none;
}
.answer__label {
  display: block; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .15em; font-weight: 600;
  color: var(--gold); margin-bottom: .8rem;
}
.answer__body {
  font-size: var(--t-lg); line-height: 1.62; color: var(--ink); margin: 0;
}
.section--dark .answer__body { color: rgba(255,255,255,.9); }
.answer__body > p { margin: 0 0 .8rem; }
.answer__body > p:last-child { margin-bottom: 0; }
@media (min-width: 48rem) { .answer { padding: 2.1rem 2.25rem; } }

/* ============================================================================
   GÖVDE METNİ — detay sayfaları (sans, ölçülü)
   ============================================================================ */
.prose { font-size: var(--t-lg); line-height: 1.72; color: var(--ink-2); max-width: var(--measure); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 {
  font-family: var(--serif); font-size: var(--t-3xl); font-weight: 400;
  line-height: 1.2; letter-spacing: -.018em; color: var(--ink);
  margin-top: 2.4em; padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
}
.prose h3 {
  font-family: var(--sans); font-size: var(--t-lg); font-weight: 600;
  color: var(--navy); margin-top: 2em;
}
.prose h2 + *, .prose h3 + * { margin-top: .65em; }
.prose p { margin: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 1.25em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--gold); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--navy); text-decoration-color: color-mix(in srgb, var(--navy) 30%, transparent); }
.prose a:hover { color: var(--gold); text-decoration-color: var(--gold); }
.prose blockquote {
  margin: 2em 0; padding: .1em 0 .1em 1.4rem;
  border-left: 2px solid var(--gold); font-style: italic; color: var(--ink-2);
}
.prose figure { margin: 2.4em 0; }
.prose figcaption {
  font-size: var(--t-sm); color: var(--ink-3); margin-top: .7rem;
  padding-left: .8rem; border-left: 2px solid var(--line); line-height: 1.5;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }

.prose table, .table { width: 100%; border-collapse: collapse; font-size: var(--t-base); margin: 2em 0; }
.table-scroll { overflow-x: auto; margin: 2em 0; -webkit-overflow-scrolling: touch; }
.table-scroll > table { margin: 0; min-width: 34rem; }
.prose th, .prose td, .table th, .table td {
  padding: .8rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.prose th, .table th {
  font-weight: 600; font-size: var(--t-sm); text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.prose tbody tr:hover, .table tbody tr:hover { background: var(--paper-2); }

/* ============================================================================
   PROTOKOL — dikey eklemli hat
   ============================================================================ */
.protocol { counter-reset: stage; }
.protocol__stage { position: relative; padding-left: 4.25rem; padding-bottom: 2.5rem; }
.protocol__stage:last-child { padding-bottom: 0; }
.protocol__stage::before {
  content: ''; position: absolute; left: 1.4rem; top: 2.9rem; bottom: 0;
  width: 1px; background: var(--line);
}
.section--dark .protocol__stage::before { background: var(--line-dark); }
.protocol__stage:last-child::before { display: none; }
.protocol__stage::after {
  counter-increment: stage; content: counter(stage, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border: 1px solid var(--gold); border-radius: 50%;
  font-family: var(--serif); font-size: var(--t-base); color: var(--gold);
}
.protocol__title { margin-bottom: .45rem; }
.protocol__text { color: var(--ink-2); max-width: 38rem; line-height: 1.62; }
.section--dark .protocol__text { color: rgba(255,255,255,.6); }
.protocol__list {
  margin: .85rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.protocol__list li {
  font-size: var(--t-xs); color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--line-soft);
  padding: .28rem .65rem; border-radius: 100px;
}
.section--dark .protocol__list li {
  background: rgba(255,255,255,.05); border-color: var(--line-dark); color: rgba(255,255,255,.7);
}
@media (max-width: 40rem) {
  .protocol__stage { padding-left: 3.4rem; }
  .protocol__stage::after { width: 2.25rem; height: 2.25rem; font-size: var(--t-sm); }
  .protocol__stage::before { left: 1.12rem; top: 2.35rem; }
}

/* ============================================================================
   KARTLAR — derinlikli, hareketli
   ============================================================================ */
.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.65rem;
  text-decoration: none; color: inherit;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: transparent;
}
/* Üstte altın çizgi: hover'da soldan sağa açılır */
a.card::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--gold); border-radius: var(--r) var(--r) 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
a.card:hover::before { transform: scaleX(1); }
.section--dark .card {
  background: rgba(255,255,255,.04); border-color: var(--line-dark); color: #fff;
}
.section--dark a.card:hover { background: rgba(255,255,255,.07); }
.card__title { margin-bottom: .5rem; color: var(--ink); }
.section--dark .card__title { color: #fff; }
a.card:hover .card__title { color: var(--navy); }
.section--dark a.card:hover .card__title { color: var(--gold-lift); }
.card__text {
  font-size: var(--t-base); color: var(--ink-2); line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.section--dark .card__text { color: rgba(255,255,255,.55); }
.card__more {
  margin-top: auto; padding-top: 1.15rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--gold);
  display: inline-flex; align-items: center; gap: .35rem;
}

/* Görselli kart: fotoğraf kenara yaslanır, metin altında */
.card--shot { padding: 0; overflow: hidden; }
.card--shot .shot { border-radius: 0; }
.card--shot .card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }

/* Etiketler */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-block; padding: .5rem 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  font-size: var(--t-sm); color: var(--ink-2); text-decoration: none;
  transition: border-color .18s var(--ease), color .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease);
}
a.chip:hover {
  border-color: var(--navy); color: var(--navy);
  transform: translateY(-1px); box-shadow: var(--shadow-2);
}
.section--dark .chip { background: rgba(255,255,255,.05); border-color: var(--line-dark); color: rgba(255,255,255,.78); }
.section--dark a.chip:hover { border-color: var(--gold); color: var(--gold-lift); }
.chip--gold { border-color: var(--gold); color: var(--gold); }

/* ============================================================================
   SSS
   ============================================================================ */
.faq { max-width: 46rem; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__q {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: var(--t-2xl); line-height: 1.35; color: var(--ink);
  transition: color .18s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--navy); }
.faq__q::after {
  content: ''; flex: none; margin-left: auto; margin-top: .5em;
  width: .6rem; height: .6rem;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a {
  padding: 0 2.5rem 1.4rem 0;
  color: var(--ink-2); font-size: var(--t-base); line-height: 1.68; max-width: var(--measure);
}
.faq__a > * + * { margin-top: .75em; }
.faq__a p { margin: 0; }

/* ============================================================================
   YAZAR KÜNYESİ
   ============================================================================ */
.byline {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-block: 2.25rem; font-size: var(--t-sm);
  max-width: 44rem;
}
.byline__avatar {
  flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  object-fit: cover; background: var(--navy-wash); border: 1px solid var(--line);
}
.byline__avatar--empty {
  display: grid; place-items: center;
  font-family: var(--serif); font-size: var(--t-base); color: var(--navy);
}
.byline__label { color: var(--ink-3); font-size: var(--t-xs); }
.byline__name { font-weight: 600; color: var(--navy); text-decoration: none; }
.byline__name:hover { color: var(--gold); }
.byline__dates { margin-left: auto; text-align: right; color: var(--ink-3); font-size: var(--t-xs); line-height: 1.5; }
@media (max-width: 34rem) {
  .byline { flex-wrap: wrap; }
  .byline__dates { margin-left: 0; width: 100%; text-align: left; padding-top: .5rem; }
}

/* ============================================================================
   KAYNAKLAR / UYARI
   ============================================================================ */
/* ---- Kanıt düzeyi rozeti (2. Ek Rehber md. 15) --------------------------
   D grubu (postür, denge, vagus) sitenin en riskli alanı: kesin neden-sonuç
   cümlesi hem tıbbi etiğe hem tanıtım mevzuatına aykırı. Rozet bunu görünür
   kılar — okuyucuya da, sayfayı sonradan güncelleyecek yazara da. */
.evidence {
  display: flex; gap: .9rem; align-items: center;
  max-width: 44rem; margin-block: 1.75rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--line); border-left: 3px solid var(--ink-3);
  border-radius: var(--r);
  background: #fff;
  font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2);
}
.evidence__grade {
  flex: none; width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 500;
  border: 1px solid currentColor;
}
.evidence strong { color: var(--ink); font-weight: 600; }
.evidence--a { border-left-color: var(--ok); }
.evidence--a .evidence__grade { color: var(--ok); }
.evidence--b { border-left-color: var(--navy); }
.evidence--b .evidence__grade { color: var(--navy); }
.evidence--c { border-left-color: var(--gold); }
.evidence--c .evidence__grade { color: var(--gold); }
.evidence--d { border-left-color: #9A7326; background: var(--warn-wash); }
.evidence--d .evidence__grade { color: #9A7326; }

.sources { margin-top: 3rem; max-width: 44rem; }
.sources ol { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; padding-left: 1.3em; margin: 0; }
.sources li + li { margin-top: .6em; }
.sources li::marker { color: var(--ink-3); }
.sources a { word-break: break-word; }

.disclaimer {
  background: var(--warn-wash); border: 1px solid var(--warn-line); border-radius: var(--r);
  padding: 1.05rem 1.2rem; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2);
  margin-block: 2.25rem; max-width: 44rem;
  display: flex; gap: .8rem; align-items: flex-start;
}
.disclaimer svg { flex: none; width: 1.1rem; height: 1.1rem; fill: #9A7326; margin-top: .12rem; }

/* ============================================================================
   EYLEM ÇAĞRISI
   ============================================================================ */
.cta {
  position: relative; overflow: hidden;
  background: var(--navy-950); color: #fff;
  border-radius: var(--r);
  padding: clamp(2.25rem, 5vw, 3.75rem);
  margin-block: 3.5rem;
}
.cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(40rem 26rem at 88% 12%, rgba(192,138,62,.16), transparent 62%);
}
.cta > * { position: relative; }
.cta__title { color: #fff; margin-bottom: .8rem; max-width: 22ch; }
.cta__text { color: rgba(255,255,255,.62); max-width: 40rem; line-height: 1.62; margin-bottom: 1.75rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ============================================================================
   KIRINTI YOLU
   ============================================================================ */
.crumbs { font-size: var(--t-xs); color: var(--ink-3); padding: 1.25rem 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: .4rem; opacity: .4; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current] { color: var(--ink-2); }

/* ============================================================================
   ALT BİLGİ
   ============================================================================ */
.foot { background: var(--navy-950); color: rgba(255,255,255,.55); padding-block: 4rem 2rem; font-size: var(--t-sm); }
.foot a { color: rgba(255,255,255,.78); text-decoration: none; }
.foot a:hover { color: var(--gold-lift); }
/* Marka bloğu koyu zeminde: .brand__name varsayılanı koyu mürekkep, burada
   ezilmezse okunmuyordu. Karanlık zemine giren HER metin burada ele alınmalı. */
.foot .brand__name { color: #fff; font-size: var(--t-2xl); }
.foot .brand__field { color: rgba(255,255,255,.42); }
.foot .foot__grid {
  display: grid; gap: 2.5rem; grid-template-columns: 1fr;
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 44rem) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 64rem) { .foot__grid { grid-template-columns: 1.9fr 1fr 1fr 1fr; } }
.foot__about { margin-top: 1rem; line-height: 1.62; max-width: 25rem; }
.foot h3 {
  font-family: var(--sans); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .14em; color: rgba(255,255,255,.35); font-weight: 600; margin-bottom: 1rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li + li { margin-top: .55rem; }
.foot__note {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark);
  font-size: var(--t-xs); color: rgba(255,255,255,.4); line-height: 1.6; max-width: 62rem;
}
.foot__bottom {
  padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; font-size: var(--t-xs); color: rgba(255,255,255,.35);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 1.15rem; }

/* ============================================================================
   FORMLAR
   ============================================================================ */
.field { margin-bottom: 1.4rem; }
.field__label { display: block; margin-bottom: .45rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.field__hint { font-size: var(--t-xs); color: var(--ink-3); margin-top: .35rem; line-height: 1.5; }
.field__req { color: var(--gold); }
.input, .select, .textarea {
  width: 100%; padding: .8rem 1rem;
  font-family: var(--sans);
  /* iOS 16px altında alanı yakınlaştırır — mobil deneyimi bozar */
  font-size: max(16px, var(--t-base));
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-wash);
}
.textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
.select {
  appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238A929A' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: .7rem;
}
.field__row { display: grid; gap: 1.4rem; }
@media (min-width: 40rem) { .field__row--2 { grid-template-columns: 1fr 1fr; } }

.radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio { position: relative; display: inline-flex; }
.radio input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.radio span {
  padding: .55rem 1.05rem; border: 1px solid var(--line); border-radius: 100px;
  background: #fff; font-size: var(--t-base); color: var(--ink-2); transition: all .15s var(--ease);
}
.radio input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; }
.radio input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.check { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-sm);
         line-height: 1.6; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; margin-top: .18rem; width: 1.1rem; height: 1.1rem; accent-color: var(--navy); }

.scale { display: flex; align-items: center; gap: 1rem; }
.scale input[type="range"] { flex: 1; accent-color: var(--gold); }
.scale__val {
  flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--serif); font-size: var(--t-xl); color: var(--navy);
}

.drop {
  border: 1.5px dashed var(--line); border-radius: var(--r);
  background: var(--paper-2); padding: 2rem 1.5rem; text-align: center;
  transition: border-color .18s var(--ease), background .18s var(--ease);
  cursor: pointer;
}
.drop:hover, .drop[data-over="true"] { border-color: var(--navy); background: var(--navy-wash); }
.drop__icon { width: 1.9rem; height: 1.9rem; fill: var(--ink-3); margin: 0 auto .7rem; }
.drop__title { font-weight: 600; margin-bottom: .3rem; }
.drop__hint { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.55; }
.drop input[type="file"] { display: none; }
.filelist { list-style: none; margin: 1rem 0 0; padding: 0; text-align: left; }
.filelist li {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--r);
  font-size: var(--t-sm); margin-bottom: .35rem;
}
.filelist__size { margin-left: auto; color: var(--ink-3); font-size: var(--t-xs); }
.filelist__rm { background: none; border: none; cursor: pointer; color: var(--ink-3);
                font-size: var(--t-lg); line-height: 1; padding: 0 .25rem; }
.filelist__rm:hover { color: var(--gold); }

.alert { padding: 1rem 1.2rem; font-size: var(--t-base); margin-bottom: 1.6rem;
         border: 1px solid; border-radius: var(--r); }
.alert--error { background: #FCF0EA; border-color: #C9772A; color: #7A3C1C; }
.alert--ok { background: #EAF3EE; border-color: var(--ok); color: #1E5235; }
.alert ul { margin: .5rem 0 0; padding-left: 1.2rem; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ============================================================================
   AÇILIŞ HAREKETİ — tek seferlik, sakin
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .6s var(--ease) backwards; }
  .reveal:nth-child(2) { animation-delay: .07s; }
  .reveal:nth-child(3) { animation-delay: .14s; }
  .reveal:nth-child(4) { animation-delay: .21s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

@media print {
  .masthead, .mobilenav, .cta, .foot, .burger, .hero__art { display: none !important; }
  .hero, .section--dark { background: #fff !important; color: #000 !important; }
  body { background: #fff; font-size: 11pt; }
  .prose { max-width: none; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}