/* ================================================================
   BRAND — MARKA DEGISIM NOKTASI 1/3
   Diji Kilavuz kurumsal kimligi. Renkler ve tipografi ANA SITEDEN
   (dijikilavuz.com) ornekleme ile alindi:
     kobalt #0041D1  · sitenin hero zemini ve birincil butonu
     amber  #FFB422  · sitenin ikincil vurgusu
     #1F1F1F         · baslik rengi
     #636D78         · govde metni (mavi-gri)
     Albert Sans     · sitenin TEK fontu, tum agirliklarda
   ================================================================ */
:root{
  /* Vurgu — ACIK ekranlarda (soru akisi) */
  --brand-accent:        #0041D1;   /* beyaz zeminde 7.85:1 */
  --brand-accent-deep:   #0035AB;
  --brand-accent-ink:    #FFFFFF;
  --brand-accent-soft:   rgba(0,65,209,.06);
  --brand-accent-line:   rgba(0,65,209,.28);

  /* Vurgu — KOBALT ekranlarda (gecis/analiz/final).
     Zemin markanin mavisi oldugu icin vurgu amber'e geciyor —
     sitenin mavi hero'sundaki sari nokta ile ayni mantik. */
  --brand-accent-dark:      #FFB422;   /* kobalt uzerinde 4.41:1 */
  --brand-accent-dark-ink:  #1F1F1F;   /* amber uzerinde 9.26:1 */
  --brand-accent-dark-soft: rgba(255,180,34,.14);
  --brand-accent-dark-line: rgba(255,180,34,.38);

  /* Site tek font kullaniyor; biz de oyle yapiyoruz.
     Etiketlerde mono yerine BUYUK HARF + kalin + harf araligi
     (sitenin buton/etiket dili). */
  --brand-font-display: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --brand-font-body:    'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --brand-font-mono:    'Albert Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --brand-radius: 12px;    /* sitenin buton yaricapi */
  --brand-logo-h: 34px;
}

/* ================================================================
   SEMANTIK KATMAN — acik tema (soru ekranlarinin varsayilani)
   ================================================================ */
:root{
  --accent:      var(--brand-accent);
  --accent-dp:   var(--brand-accent-deep);
  --accent-ink:  var(--brand-accent-ink);
  --accent-soft: var(--brand-accent-soft);
  --accent-line: var(--brand-accent-line);

  /* Notrler saf gri degil — sicak tonlu */
  /* Site beyaz zemin + mavi-gri metin kullaniyor. Kartlarin uzerinde
     durabilmesi icin sayfa zemini cok hafif soguk bir ton. */
  --bg:       #F4F7FB;
  --bg-soft:  #EAF0F8;
  --surface:  #FFFFFF;
  --surface-raise: #FFFFFF;

  --ink:       #1F1F1F;   /* siteden — baslik  15.34:1 */
  --ink-dim:   #636D78;   /* siteden — govde    4.90:1 */
  /* Not: acik zeminde AA'yi gecen daha soluk bir ton yok. Hiyerarsi
     renkle degil TIPOGRAFIYLE kuruluyor (boyut + BUYUK HARF + aralik). */
  --ink-faint: #636D78;

  --line:        rgba(31,31,31,.10);
  --line-strong: rgba(31,31,31,.18);

  --err:  #A33A32;
  --err-soft: rgba(163,58,50,.08);

  --shadow-card: 0 1px 2px rgba(31,45,80,.05), 0 10px 28px -14px rgba(31,45,80,.16);
  --shadow-lift: 0 2px 6px rgba(31,45,80,.07), 0 18px 40px -16px rgba(31,45,80,.24);
  --amber: #FFB422;
  --amber-text: #FFB422;

  --display: var(--brand-font-display);
  --body:    var(--brand-font-body);
  --mono:    var(--brand-font-mono);

  --radius: var(--brand-radius);

  --t-enter: 260ms;
  --t-leave: 170ms;
  --t-mode:  420ms;
  --ease:    cubic-bezier(.22,.61,.36,1);

  --maxw: 560px;
  --maxw-wide: 640px;
}

/* ================================================================
   KOYU MOD — analiz / gecis / final ekranlari
   Sadece semantik isimler ezilir; BRAND blogu hic okunmaz degismez.
   ================================================================ */
:root[data-mode="dark"]{
  --accent:      var(--brand-accent-dark);
  --accent-dp:   var(--brand-accent-dark);
  --accent-ink:  var(--brand-accent-dark-ink);
  --accent-soft: var(--brand-accent-dark-soft);
  --accent-line: var(--brand-accent-dark-line);

  /* Zemin = MARKANIN MAVISI. Sitenin hero bolumu de tam olarak bu:
     dolu kobalt alan, uzerinde beyaz kalin baslik ve beyaz kartlar. */
  --bg:       #0041D1;
  --bg-soft:  #0038B8;
  /* Kart zemini beyazla ACILMAZ, siyahla KOYULASTIRILIR. Yari saydam
     beyaz kullanilinca zemin aciliyor ve uzerindeki acik metnin
     kontrasti AA'nin altina dusuyordu (4.42:1). Koyulastirinca 6.70. */
  --surface:  rgba(0,0,0,.16);
  --surface-raise: rgba(0,0,0,.24);

  --ink:       #FFFFFF;   /* 7.85:1 */
  --ink-dim:   #C7D6FF;   /* 5.41:1 */
  --ink-faint: #B4C8F7;   /* 4.69:1 */

  --line:        rgba(255,255,255,.20);
  --line-strong: rgba(255,255,255,.34);

  /* Marka amber'i kobalt uzerinde 4.41:1 — ikon icin yeterli (3:1)
     ama METIN icin degil. Metinde bir tik acik tonu kullaniliyor. */
  --amber:      #FFB422;
  --amber-text: #FFC24D;   /* kobalt uzerinde 4.88:1 */

  --err:  #FFD2CE;
  --err-soft: rgba(255,210,206,.14);

  --shadow-card: none;
  --shadow-lift: none;
}

/* ================================================================
   RESET
   ================================================================ */
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overscroll-behavior-y:contain;          /* pull-to-refresh yarim formu silmesin */
  -webkit-tap-highlight-color:transparent;
  transition:background var(--t-mode) var(--ease), color var(--t-mode) var(--ease);
}
@supports (min-height:100dvh){ body{ min-height:100dvh } }

button{ font-family:inherit; font-size:inherit; cursor:pointer; border:0; background:none; color:inherit }
input,textarea{ font-family:inherit; color:inherit }
::selection{ background:var(--accent); color:var(--accent-ink) }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
:focus:not(:focus-visible){ outline:none }

.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;
}
.hp-wrap{
  position:absolute; left:-9999px; top:0; width:1px; height:1px;
  opacity:0; overflow:hidden; pointer-events:none;
}

/* ================================================================
   TOPBAR + ILERLEME
   Sticky — fixed degil. Klavye acikken icerigin uzerine binmez.
   ================================================================ */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  padding:calc(14px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right));
  transition:background var(--t-mode) var(--ease), opacity 200ms var(--ease);
}
.topbar[data-hidden="true"]{ opacity:0; pointer-events:none }
/* Ilerleme cubugu yalnizca soru akisinda; logo her zaman (analiz haric) */
.topbar[data-progress="false"] .phasebar,
.topbar[data-progress="false"] .phase-labels{ display:none }
.topbar[data-progress="false"] .topbar-inner{ padding-bottom:0 }

.topbar-inner{
  max-width:var(--maxw); margin:0 auto;
  transition:max-width 200ms var(--ease);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:14px;
}
.logo-slot{
  font-family:var(--display);
  font-weight:700; font-size:.95rem; letter-spacing:-.01em;
  color:var(--ink);
}
.logo-slot img{ height:var(--brand-logo-h); width:auto; display:block }
/* Logo iki varyantli: koyu ekranlarda wordmark okunmaz oldugu icin
   acik varyanta gecilir. Ikisi de assets/ icinde, adlari hangi ZEMIN
   icin olduklarini soyluyor. */
.logo-slot .on-dark{ display:none }
:root[data-mode="dark"] .logo-slot .on-light{ display:none }
:root[data-mode="dark"] .logo-slot .on-dark{ display:block }
@media (hover:hover) and (pointer:fine){
  :root[data-mode="dark"] .btn-primary:hover:not(:disabled){ background:#F0F4FF }
}

.step-count{
  font-weight:700;
  font-size:.72rem; letter-spacing:.06em;
  color:var(--ink-dim);
  font-variant-numeric:tabular-nums;
}

.phasebar{
  max-width:var(--maxw); margin:0 auto;
  display:flex; gap:5px;
  transition:max-width 200ms var(--ease);
}
/* Genis kart kullanan ekranda (teshis) ust cubuk da genisler —
   aksi halde logo/ilerleme cubugu icerikle hizalanmiyor. */
.topbar[data-wide="true"] .topbar-inner,
.topbar[data-wide="true"] .phasebar,
.topbar[data-wide="true"] .phase-labels{ max-width:var(--maxw-wide) }
.phasebar i{
  flex:1; height:3px; border-radius:2px;
  background:var(--line); position:relative; overflow:hidden;
}
.phasebar i::after{
  content:""; position:absolute; inset:0;
  background:var(--accent);
  transform:scaleX(var(--fill,0)); transform-origin:left;
  transition:transform 480ms var(--ease);
}
.phase-labels{
  max-width:var(--maxw); margin:6px auto 0;
  transition:max-width 200ms var(--ease);
  display:flex; gap:5px;
}
.phase-labels span{
  flex:1;
  font-weight:700; font-size:.63rem; letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-dim); opacity:.55;
  transition:opacity 300ms var(--ease), color 300ms var(--ease);
}
.phase-labels span.active{ color:var(--accent); opacity:1 }
:root[data-mode="dark"] .phase-labels span.active{ color:var(--amber-text) }

/* ================================================================
   STAGE + EKRAN GECISI
   Cikan ekran absolute'a alinir; iki ekran ayni anda DOM'da durur.
   Bu, referans uygulamanin innerHTML-silme yuzunden hic calismayan
   gecis animasyonu sorununu cozer.
   ================================================================ */
.stage{
  position:relative;
  flex:1 0 auto;
  display:flex; flex-direction:column;
  /* Alttaki yapiskan aksiyon cubugu, kaydirirken icerigin uzerine
     biner (sticky davranisi). Son secenek cubugun altinda kalmasin
     diye ekstra alt bosluk birakiliyor. */
  padding:8px max(18px, env(safe-area-inset-left)) 92px max(18px, env(safe-area-inset-right));
}
.screen{
  flex:1 0 auto;
  transition:opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease);
}
/* Dikey ortalama min-height tahminleriyle degil, flex ile yapilir —
   topbar/aksiyon cubugu yuksekligi ekrana gore degistigi icin sabit
   bir cikarma degeri her cihazda yaniliyordu. */
.screen--center{ display:flex; flex-direction:column; justify-content:center }
.screen--enter.is-fwd{  opacity:0; transform:translate3d(0, 14px,0) }
.screen--enter.is-back{ opacity:0; transform:translate3d(0,-12px,0) }
.screen--leaving{
  position:absolute; inset:0;
  padding:inherit;
  pointer-events:none;
}
.screen--leave-active{
  opacity:0; transform:translate3d(0,-10px,0);
  transition-duration:var(--t-leave);
}

.card{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(20px,5vw,32px) 0 0;
}
.card--wide{ max-width:var(--maxw-wide) }

/* ================================================================
   SORU TIPOGRAFISI
   ================================================================ */
.eyebrow{
  font-weight:700;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
  margin:0 0 14px;
}
:root[data-mode="dark"] .eyebrow{ color:var(--amber-text) }
.q-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.5rem, 5.4vw, 2rem);
  line-height:1.18;
  letter-spacing:-.022em;
  color:var(--ink);
  margin:0 0 12px;
  text-wrap:balance;
}
.q-help{
  font-size:.95rem; line-height:1.55;
  color:var(--ink-dim);
  margin:0 0 26px;
  max-width:46ch;
}
.q-title + .options,
.q-title + .fields,
.q-title + .scale{ margin-top:26px }

/* ================================================================
   SECIM KARTLARI
   ================================================================ */
.options{ display:flex; flex-direction:column; gap:9px }
.options--grid{ display:grid; grid-template-columns:1fr; gap:9px }

.opt{
  position:relative;
  display:flex; align-items:center; gap:13px;
  width:100%; min-height:58px;
  padding:15px 17px;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  color:var(--ink);
  font-size:1rem; line-height:1.35;
  transition:border-color 160ms var(--ease), background 160ms var(--ease),
             box-shadow 160ms var(--ease), transform 160ms var(--ease),
             opacity 220ms var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .opt:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-lift); transform:translateY(-1px) }
}
.opt:active{ transform:translateY(0) scale(.994) }

.opt.sel{
  border-color:var(--accent-line);
  background:var(--accent-soft);
  box-shadow:var(--shadow-card);
}
/* Cok secimli teshis ekraninda secim, kaydirirken de okunabilsin */
.opt.sel::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px;
  width:3px; border-radius:0 3px 3px 0;
  background:var(--accent);
}
.options:not(.options--multi) .opt.sel::before{ display:none }

.mark{
  flex:0 0 auto;
  width:21px; height:21px;
  border:1.5px solid var(--line-strong);
  background:transparent;
  position:relative;
  transition:border-color 160ms var(--ease), background 160ms var(--ease);
}
.mark--radio{ border-radius:50% }
.mark--check{ border-radius:6px }
.opt.sel .mark{ border-color:var(--accent); background:var(--accent) }
.mark::after{
  content:""; position:absolute;
  opacity:0; transition:opacity 140ms var(--ease);
}
.mark--radio::after{
  inset:5px; border-radius:50%; background:var(--accent-ink);
}
.mark--check::after{
  left:6.5px; top:2.5px; width:5px; height:10px;
  border:solid var(--accent-ink); border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
.opt.sel .mark::after{ opacity:1 }

.opt-label{ flex:1 1 auto }

/* ================================================================
   1-5 OLCEK
   ================================================================ */
.scale{ display:flex; flex-direction:column; gap:12px }
.scale-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px }
.scale-dot{
  min-height:62px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  font-family:var(--mono); font-size:1.05rem;
  font-variant-numeric:tabular-nums;
  color:var(--ink-dim);
  transition:border-color 160ms var(--ease), background 160ms var(--ease),
             color 160ms var(--ease), transform 160ms var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .scale-dot:hover{ border-color:var(--line-strong); transform:translateY(-1px) }
}
.scale-dot.sel{
  background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink);
}
.scale-anchors{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.8rem; color:var(--ink-faint);
}
.scale-anchors span:last-child{ text-align:right }

/* ================================================================
   METIN ALANLARI
   ================================================================ */
.fields{ display:flex; flex-direction:column; gap:18px }
.field{ display:flex; flex-direction:column; gap:7px }
.field-label{
  font-size:.85rem; font-weight:500;
  color:var(--ink-dim);
  letter-spacing:.005em;
}
.field-input{
  width:100%;
  border-radius:var(--radius);
  /* 16px TABAN — altina inersen iOS Safari odaklaninca sayfayi
     zoomlar ve layout dagilir. Referans uygulama bunu ihlal ediyor. */
  font-size:16px;
  line-height:1.5;
  padding:14px 15px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:var(--shadow-card);
  transition:border-color 160ms var(--ease), box-shadow 160ms var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field-input::placeholder{ color:var(--ink-faint) }
.field-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
textarea.field-input{ resize:vertical; min-height:120px }

.field.has-error .field-input{ border-color:var(--err) }
.field.has-error .field-input:focus{ box-shadow:0 0 0 3px var(--err-soft) }
.field-error{
  font-size:.83rem; line-height:1.45;
  color:var(--err);
}
.field-counter{
  font-size:.72rem; font-weight:600;
  color:var(--ink-faint); text-align:right;
  font-variant-numeric:tabular-nums;
}

/* "Diger" acilir alani — max-height degil 0fr->1fr.
   max-height'in bitis degeri tahmindir; ya kirpar ya yanlis yavaslar. */
.reveal{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 260ms var(--ease), opacity 200ms var(--ease);
  opacity:0;
}
.reveal > *{ overflow:hidden; min-height:0 }
.reveal.open{ grid-template-rows:1fr; opacity:1 }
.reveal-inner{ padding-top:10px }

/* ================================================================
   AKSIYON CUBUGU — sticky bottom.
   iOS'ta yumusak klavyenin ustunde kalir, altinda kaybolmaz.
   ================================================================ */
.actionbar{
  position:sticky; bottom:0; z-index:15;
  padding:26px max(18px, env(safe-area-inset-left)) calc(16px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-right));
  /* Daha uzun ve daha gec baslayan solma: altta kalan kart kaydirirken
     ortasindan kesilmis gibi gorunmesin. */
  background:linear-gradient(to top, var(--bg) 64%, rgba(0,0,0,0));
  transition:background var(--t-mode) var(--ease);
}
.actionbar:empty{ padding:0 }
.actionbar-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:12px;
}
.actionbar-inner--wide{ max-width:var(--maxw-wide) }

.btn{
  min-height:54px;
  padding:16px 30px;
  border-radius:var(--radius);
  font-weight:700; font-size:.88rem;
  text-transform:uppercase; letter-spacing:.06em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background 160ms var(--ease), border-color 160ms var(--ease),
             opacity 160ms var(--ease), transform 160ms var(--ease);
}
.btn-primary{
  flex:1 1 auto;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:var(--shadow-card);
}
/* Kobalt zeminde birincil buton BEYAZ, metni mavi — sitenin
   hero'sundaki "DAHA FAZLA" butonuyla ayni. */
:root[data-mode="dark"] .btn-primary{
  background:#FFFFFF; color:#0041D1;
}
:root[data-mode="dark"] .btn-ghost{ color:var(--ink-dim) }
:root[data-mode="dark"] .btn-ghost:hover{ color:#FFFFFF }
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover:not(:disabled){ background:var(--accent-dp); transform:translateY(-1px) }
}
.btn-primary:active:not(:disabled){ transform:translateY(0) scale(.99) }
.btn-primary:disabled{ opacity:.42; cursor:not-allowed }

.btn-ghost{
  flex:0 0 auto;
  color:var(--ink-dim);
  padding:16px 10px;
  min-height:54px;
  font-size:.82rem;
  text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
@media (hover:hover) and (pointer:fine){
  .btn-ghost:hover{ color:var(--ink) }
}

.btn-reveal{ opacity:0; transform:translateY(6px);
  transition:opacity 320ms var(--ease), transform 320ms var(--ease) }
.btn-reveal.in{ opacity:1; transform:none }

.btn-count{
  font-size:.85rem; font-weight:700;
  font-variant-numeric:tabular-nums;
  opacity:.8;
}

.spinner{
  width:15px; height:15px; flex:0 0 auto;
  border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%;
  animation:spin 640ms linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ================================================================
   KARSILAMA EKRANI
   ================================================================ */
.welcome{ max-width:var(--maxw); margin:0 auto; padding:clamp(24px,7vw,48px) 0 }
.welcome h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem, 7.6vw, 2.7rem);
  line-height:1.1; letter-spacing:-.03em;
  margin:0 0 20px;
  text-wrap:balance;
}
.welcome p{
  font-size:1.02rem; line-height:1.62;
  color:var(--ink-dim);
  margin:0 0 16px; max-width:46ch;
}
.welcome .meta{
  font-weight:700;
  font-size:.75rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent);
  margin-top:26px;
}

/* ================================================================
   GECIS EKRANLARI (koyu)
   ================================================================ */
.interstitial{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(28px,9vw,56px) 0;
}
.beat{
  font-weight:600;
  font-size:.9rem; letter-spacing:.02em;
  color:var(--ink-dim);
  display:flex; align-items:center; gap:11px;
}
.beat .pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex:0 0 auto;
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(.85) } 50%{ opacity:1; transform:scale(1) } }

.reveal-block{ opacity:0; transform:translateY(10px);
  transition:opacity 480ms var(--ease), transform 480ms var(--ease) }
.reveal-block.in{ opacity:1; transform:none }
.reveal-block h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.35rem, 5vw, 1.75rem);
  line-height:1.22; letter-spacing:-.02em;
  margin:0 0 12px; text-wrap:balance;
}
.reveal-block p{
  color:var(--ink-dim); font-size:1rem; line-height:1.6;
  margin:0; max-width:44ch;
}

/* ================================================================
   ANALIZ EKRANI (koyu)
   ================================================================ */
.analysis{
  max-width:var(--maxw); margin:0 auto; width:100%;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(28px,9vw,56px) 0; text-align:center;
}
.ring{
  width:112px; height:112px; border-radius:50%;
  position:relative; margin:0 auto 34px;
  background:conic-gradient(var(--accent) calc(var(--p,0) * 1%), var(--line) 0);
}
.ring::before{
  content:""; position:absolute; inset:7px;
  border-radius:50%; background:var(--bg);
  transition:background var(--t-mode) var(--ease);
}
.ring-mark{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--accent);
  opacity:0; transition:opacity 320ms var(--ease);
}
.ring.done .ring-mark{ opacity:1 }

.step-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; text-align:left }
.step{
  display:flex; align-items:flex-start; gap:11px;
  font-size:.95rem; line-height:1.45;
  color:var(--ink-faint);
  opacity:.4;
  transition:opacity 380ms var(--ease), color 380ms var(--ease);
}
.step.active{ opacity:1; color:var(--ink) }
.step.done{ opacity:1; color:var(--ink-dim) }
.step-icon{
  flex:0 0 auto; width:17px; height:17px; margin-top:3px;
  font-family:var(--mono); font-size:.85rem;
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}

/* ================================================================
   FINAL EKRANI (koyu)
   ================================================================ */
.final{ max-width:var(--maxw); margin:0 auto; padding:clamp(28px,9vw,56px) 0 0 }
.final h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.7rem, 6.4vw, 2.3rem);
  line-height:1.15; letter-spacing:-.026em;
  margin:0 0 18px; text-wrap:balance;
}
.final p{ color:var(--ink-dim); font-size:1rem; line-height:1.62; margin:0 0 16px; max-width:46ch }

.commit{
  margin-top:38px; padding-top:28px;
  border-top:1px solid var(--line);
}
.commit h2{
  font-family:var(--display); font-weight:700;
  font-size:1.12rem; letter-spacing:-.012em;
  margin:0 0 18px;
}
.commit-list{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px }
.commit-list li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:.97rem; color:var(--ink-dim); line-height:1.5;
}
.commit-list .tick{ color:var(--amber-text); flex:0 0 auto; font-size:.95rem; margin-top:1px }

.next-step{
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:22px;
}
.next-step .label{
  font-weight:700; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amber-text); margin:0 0 10px;
}
.next-step .headline{
  font-size:1.02rem; font-weight:500; color:var(--ink);
  margin:0 0 10px; line-height:1.45;
}
.next-step .sub{ font-size:.9rem; color:var(--ink-dim); margin:0 0 14px; line-height:1.55 }
.next-step .already{
  font-size:.83rem; color:var(--ink-faint); margin:0; line-height:1.5;
  padding-top:13px; border-top:1px solid var(--line);
}
/* <a> olarak render edilen buton, <button> ile ayni gorunmeli */
a.btn{ text-decoration:none }

/* Referans videolari — yatay kaydirilan serit.
   Dikey (9:16) videolar alt alta dizilirse mobilde ekranlarca yer
   kaplar ve asil aksiyonu (randevu butonu) asagi iter. Serit hem
   kompakt hem de bu kitlenin alisik oldugu bir desen. */
.slots{ margin-top:34px; padding-top:28px; border-top:1px solid var(--line) }
.slots-label{
  font-weight:700; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dim); margin:0 0 14px;
}
.reel-strip{
  display:flex; gap:12px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* kenarlara tasip nefes alsin */
  margin-inline:calc(-1 * max(18px, env(safe-area-inset-left)));
  padding-inline:max(18px, env(safe-area-inset-left));
  padding-bottom:4px;
}
.reel-strip::-webkit-scrollbar{ display:none }

.reel, .reel-video{
  flex:0 0 auto;
  width:min(62vw, 208px);
  aspect-ratio:9/16;
  border-radius:var(--radius);
  scroll-snap-align:start;
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
}
.reel{ position:relative; padding:0; display:block }
.reel-poster{
  width:100%; height:100%; object-fit:cover; display:block;
}
.reel-play{
  position:absolute; left:50%; top:50%;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%;
  background:rgba(11,14,20,.55);
  border:1.5px solid rgba(242,241,236,.85);
  transition:transform 180ms var(--ease), background 180ms var(--ease);
}
.reel-play::after{
  content:""; position:absolute; left:50%; top:50%;
  margin:-8px 0 0 -5px;
  border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #F2F1EC;
}
@media (hover:hover) and (pointer:fine){
  .reel:hover .reel-play{ transform:scale(1.08); background:rgba(11,14,20,.72) }
}
.reel-cap{
  position:absolute; left:8px; right:8px; bottom:8px;
  font-size:.64rem; font-weight:600; letter-spacing:.02em;
  color:#F2F1EC; text-align:left;
  background:rgba(11,14,20,.62);
  border-radius:7px; padding:5px 7px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reel-video{ object-fit:cover; background:#000 }

/* ================================================================
   HATA EKRANI
   ================================================================ */
.errscreen{ max-width:var(--maxw); margin:0 auto; padding:clamp(28px,9vw,56px) 0 0 }
.errscreen h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.4rem,5.2vw,1.85rem); line-height:1.2;
  letter-spacing:-.02em; margin:0 0 14px;
}
.errscreen p{ color:var(--ink-dim); line-height:1.6; margin:0 0 10px; max-width:44ch }

/* ================================================================
   KVKK notu
   ================================================================ */
.legal{
  margin-top:22px;
  font-size:.79rem; line-height:1.55;
  color:var(--ink-faint);
  max-width:46ch;
}
.legal a{ color:var(--ink-dim); text-decoration:underline; text-underline-offset:2px }

/* ================================================================
   HUKUKI METIN SAYFASI (kvkk.html)
   Ayni token'lari kullanir; forma ait hicbir bilesene dokunmaz.
   ================================================================ */
.legal-page{
  max-width:44rem; margin:0 auto;
  padding:clamp(28px,6vw,56px) max(18px, env(safe-area-inset-left))
          calc(56px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-right));
}
.legal-page .back{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.9rem; color:var(--ink-dim);
  text-decoration:none; margin-bottom:30px;
}
.legal-page .back:hover{ color:var(--ink) }
.legal-page h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem,4.6vw,2.05rem); line-height:1.18;
  letter-spacing:-.022em; margin:0 0 10px; text-wrap:balance;
}
.legal-page .org{
  font-weight:700; font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); margin:0 0 36px;
}
.legal-page h2{
  font-family:var(--display); font-weight:700;
  font-size:1.06rem; letter-spacing:-.01em;
  margin:34px 0 12px; color:var(--ink);
}
.legal-page h2 .num{ color:var(--accent); margin-right:8px; font-variant-numeric:tabular-nums }
.legal-page p{ margin:0 0 14px; color:var(--ink-dim); line-height:1.68; font-size:1rem }
.legal-page ul{ margin:0 0 14px; padding-left:1.15rem; color:var(--ink-dim); line-height:1.68 }
.legal-page li{ margin-bottom:8px }
.legal-page li strong,
.legal-page p strong{ color:var(--ink); font-weight:600 }
.legal-page a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px }
.legal-page .contact-box{
  margin-top:34px; padding:20px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius);
}
.legal-page .contact-box p{ margin:0 0 8px }
.legal-page .contact-box p:last-child{ margin:0 }
.legal-page hr{
  border:0; border-top:1px solid var(--line); margin:38px 0 0;
}
.legal-page .updated{
  font-size:.78rem; letter-spacing:.01em;
  color:var(--ink-faint); margin-top:18px;
}

/* ================================================================
   DEBUG rozeti
   ================================================================ */
.debug-badge{
  position:fixed; right:10px; bottom:calc(78px + env(safe-area-inset-bottom));
  z-index:60;
  font-size:.66rem; font-weight:700; letter-spacing:.06em;
  background:var(--ink); color:var(--bg);
  padding:7px 11px; border-radius:8px; opacity:.85;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (min-width:640px){
  .options--grid{ grid-template-columns:1fr 1fr }
  body{ font-size:17px }
}
/* Not: soru ekranlari masaustunde de YUKARIDAN akar. Dikey ortalama
   yalnizca kisa ekranlarda (.screen--center) uygulanir — 8 secenekli
   teshis ekrani ortalanirsa uzun viewport'ta tasar. */

/* ================================================================
   HAREKET AZALTMA — global emniyet agi.
   JS tarafi da ayrica kisa devre yapar (bkz. flow.js REDUCED).
   ================================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }
}