/* ============================================================
   Ypup / tasarım sistemi
   ------------------------------------------------------------
   Okuma: yapay zekâ destekli yurt dışı eğitim danışmanı; öğrenci
   ve veli için güven önce gelir. Sakin, kesin, ürün odaklı.

   RENK KURALI (üç aile, her birinin işi belli)
   - Koyu yeşil (orman): marka ve birincil eylem. Ana düğme, seçili
     gezinme, bağlantı, başlık vurgusu.
   - Su yeşili: ikincil vurgu. Seçili durum zemini, ilerleme,
     tamamlanan adım, odak halkası, bilgi notu.
   - Sarı (az): tek bir şeye dikkat çekmek için. Hayal okulu,
     "bugün" işareti, yaklaşan son tarih. Sayfa başına birkaç yer.
   Kırmızı yalnızca hata, silme ve geciken adım için.

   ŞEKİL KURALI: kontrol 8px, kart 12px, büyük yüzey 16px.
   Tam yuvarlak sadece avatar, durum noktası ve anahtar düğmesi.
   Gölge yerine ince kenar; gölge sadece açılır paneller için.

   Koyu mod: sistem tercihine uyar; data-tema="koyu"/"acik" ile
   elle seçilebilir (assets/js/tema.js).
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---------- Palet ---------- */
  --orman-50:  #EDF4F1;
  --orman-100: #D5E6DF;
  --orman-300: #6E9C8C;
  --orman-500: #2C6E5A;
  --orman-600: #1F5E4B;
  --orman-700: #174B3C;
  --orman-800: #10382D;
  --orman-900: #0A251E;

  --su-50:  #EAF8F3;
  --su-100: #CFEFE4;
  --su-200: #A2DECB;
  --su-300: #6CC8AE;
  --su-400: #3FB193;
  --su-500: #24987A;
  --su-600: #1A7D64;
  --su-700: #146551;

  --sari-50:  #FFF9E5;
  --sari-100: #FFF0B8;
  --sari-200: #FFE27F;
  --sari-300: #FCD04A;
  --sari-400: #F4BB1F;
  --sari-500: #D99E0B;
  --sari-700: #7A5806;

  /* ---------- Anlamsal: açık tema ---------- */
  --zemin:        #F6F8F7;
  --yuzey:        #FEFFFE;
  --yuzey-2:      #EFF3F1;
  --yuzey-3:      #E5ECE9;
  --metin:        #10201B;
  --metin-2:      #43544E;
  --metin-3:      #5B6B65;
  --cizgi:        #DCE3E0;
  --cizgi-hafif:  #E8EEEB;
  --cizgi-guclu:  #86948F;   /* form kenarı: beyaz zeminde 3:1 */

  --vurgu:        var(--orman-700);
  --vurgu-hover:  var(--orman-800);
  --vurgu-metin:  #F6FBF9;
  --vurgu-yazi:   var(--orman-600);   /* zemin üstünde yeşil yazı */
  --link:         var(--orman-600);
  --odak:         var(--su-600);

  --su:           var(--su-500);
  --su-zemin:     var(--su-50);
  --su-zemin-2:   var(--su-100);
  --su-metin:     var(--su-700);

  --sari:         var(--sari-300);
  --sari-zemin:   var(--sari-50);
  --sari-metin:   var(--sari-700);
  --sari-cizgi:   var(--sari-200);

  --tehlike:       #B03A2E;
  --tehlike-hover: #92301F;
  --tehlike-zemin: #FBECEA;
  --tehlike-cizgi: #EFC4BE;

  --golge-panel: 0 1px 2px rgba(16,32,27,.06), 0 12px 32px rgba(16,32,27,.10);
  --perde:       rgba(16,32,27,.32);
  /* Düğme parlaması (su yeşili) */
  --parlama-halka:       rgba(36,152,122,.28);
  --parlama-halka-guclu: rgba(36,152,122,.42);
  --parlama-golge:       rgba(36,152,122,.45);

  /* ---------- Ölçü ---------- */
  --r-kontrol: 8px;
  --r-kart:    12px;
  --r-yuzey:   16px;
  --maxw:      1160px;
  --gap:       clamp(16px, 3vw, 28px);

  /* Yazı ölçeği (piksel karşılığı): 12 13 15 17 20 24 32 44 56 */
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-15: .9375rem;
  --fs-17: 1.0625rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-44: 2.75rem;
  --fs-56: 3.5rem;

  /* Hareket: kısa, yumuşak duruş */
  --egri:   cubic-bezier(.16, 1, .3, 1);
  --hizli:  160ms;
  --orta:   220ms;

  /* Yazı tipleri: gövde Inter (geniş x-yüksekliği, açık harf ağızları),
     başlık Plus Jakarta Sans. İkisi de Türkçe karakterlerin tamamını içerir.
     Ağırlıklar: 400 gövde, 500 arayüz, 600 başlık ve vurgu. */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-baslik: 'Plus Jakarta Sans', var(--font);

  /* ---------- Eski adlar (geçiş için; yeni kodda kullanma) ---------- */
  --bg: var(--zemin);
  --surface: var(--yuzey);
  --surface-2: var(--yuzey-2);
  --tint: var(--su-zemin);
  --tint-blue: var(--yuzey-2);
  --ink: var(--metin);
  --ink-soft: var(--metin-2);
  --ink-faint: var(--metin-3);
  --blue: var(--link);
  --blue-600: var(--vurgu-hover);
  --green: var(--vurgu);
  --green-600: var(--vurgu-yazi);
  --green-050: var(--su-zemin);
  --amber: var(--sari-metin);
  --amber-050: var(--sari-zemin);
  --red: var(--tehlike);
  --red-600: var(--tehlike-hover);
  --red-050: var(--tehlike-zemin);
  --red-line: var(--tehlike-cizgi);
  --line: var(--cizgi);
  --line-soft: var(--cizgi-hafif);
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: var(--golge-panel);
  --radius: var(--r-kart);
  --radius-sm: var(--r-kontrol);
  --radius-lg: var(--r-yuzey);
}

/* ---------- Koyu tema ----------
   Aynı değerler iki yerde: sistem tercihi (elle açık seçilmediyse) ve elle seçim. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin:        #0B1411;
    --yuzey:        #111C18;
    --yuzey-2:      #16231E;
    --yuzey-3:      #1C2B25;
    --metin:        #E6EEEA;
    --metin-2:      #A8B8B1;
    --metin-3:      #8B9C95;
    --cizgi:        #22322C;
    --cizgi-hafif:  #1A2823;
    --cizgi-guclu:  #5C716A;
    --vurgu:        #49BE9E;
    --vurgu-hover:  #66CDB0;
    --vurgu-metin:  #04201A;
    --vurgu-yazi:   #7FD8BE;
    --link:         #7FD8BE;
    --odak:         #6CC8AE;
    --su:           #3FB193;
    --su-zemin:     rgba(63,177,147,.13);
    --su-zemin-2:   rgba(63,177,147,.22);
    --su-metin:     #8BDDC5;
    --sari:         #F4C542;
    --sari-zemin:   rgba(244,197,66,.12);
    --sari-metin:   #F4D27A;
    --sari-cizgi:   rgba(244,197,66,.35);
    --tehlike:       #F08A7E;
    --tehlike-hover: #F6A79D;
    --tehlike-zemin: rgba(240,138,126,.12);
    --tehlike-cizgi: rgba(240,138,126,.35);
    --golge-panel: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);
    --perde:       rgba(0,0,0,.55);
    --parlama-halka:       rgba(63,177,147,.5);
    --parlama-halka-guclu: rgba(63,177,147,.65);
    --parlama-golge:       rgba(63,177,147,.6);
  }
}
:root[data-tema="koyu"] {
  color-scheme: dark;
  --zemin:        #0B1411;
  --yuzey:        #111C18;
  --yuzey-2:      #16231E;
  --yuzey-3:      #1C2B25;
  --metin:        #E6EEEA;
  --metin-2:      #A8B8B1;
  --metin-3:      #8B9C95;
  --cizgi:        #22322C;
  --cizgi-hafif:  #1A2823;
  --cizgi-guclu:  #5C716A;
  --vurgu:        #49BE9E;
  --vurgu-hover:  #66CDB0;
  --vurgu-metin:  #04201A;
  --vurgu-yazi:   #7FD8BE;
  --link:         #7FD8BE;
  --odak:         #6CC8AE;
  --su:           #3FB193;
  --su-zemin:     rgba(63,177,147,.13);
  --su-zemin-2:   rgba(63,177,147,.22);
  --su-metin:     #8BDDC5;
  --sari:         #F4C542;
  --sari-zemin:   rgba(244,197,66,.12);
  --sari-metin:   #F4D27A;
  --sari-cizgi:   rgba(244,197,66,.35);
  --tehlike:       #F08A7E;
  --tehlike-hover: #F6A79D;
  --tehlike-zemin: rgba(240,138,126,.12);
  --tehlike-cizgi: rgba(240,138,126,.35);
  --golge-panel: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);
  --perde:       rgba(0,0,0,.55);
  --parlama-halka:       rgba(63,177,147,.5);
  --parlama-halka-guclu: rgba(63,177,147,.65);
  --parlama-golge:       rgba(63,177,147,.6);
}
:root[data-tema="acik"] { color-scheme: light; }

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }   /* sabit menü odaklanan öğeyi ve bağlantı hedefini örtmesin */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font);
  background: var(--zemin);
  color: var(--metin);
  line-height: 1.6;
  font-size: var(--fs-17);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
::selection { background: var(--su-zemin-2); color: var(--metin); }
p, li { text-wrap: pretty; }

/* Tek odak stili: opak, zemine karşı en az 3:1 */
:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }

/* ---------- Yardımcılar ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.center { text-align: center; }
.muted { color: var(--metin-2); }
.hidden { display: none !important; }
/* hidden niteliği, display veren sınıflara rağmen gizlesin */
[hidden] { display: none !important; }
.sayi { font-variant-numeric: tabular-nums; }
.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;
}
.atla {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--metin); color: var(--zemin); padding: 10px 16px;
  border-radius: var(--r-kontrol); font-weight: 600;
}
.atla:focus { top: 12px; color: var(--zemin); }

/* Simgeler (Tabler Icons, MIT; assets/img/simgeler.svg) */
.simge {
  width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Tipografi ---------- */
h1, h2, h3 {
  font-family: var(--font-baslik); color: var(--metin);
  font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance;
}
h1 { font-size: clamp(var(--fs-32), 4.6vw, var(--fs-56)); letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-size: clamp(var(--fs-24), 3vw, var(--fs-32)); }
h3 { font-size: var(--fs-20); letter-spacing: -0.01em; }
.lead { font-size: clamp(var(--fs-17), 1.6vw, var(--fs-20)); color: var(--metin-2); line-height: 1.55; }
/* Üst etiket: büyük harf ve hap yok; sayfa başına en fazla birkaç tane */
.eyebrow {
  display: inline-block; font-size: var(--fs-13); font-weight: 500; letter-spacing: 0;
  color: var(--vurgu-yazi);
}

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 500; font-size: var(--fs-15); line-height: 1.2;
  min-height: 44px; padding: 11px 18px; border-radius: var(--r-kontrol);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color var(--hizli) var(--egri), border-color var(--hizli) var(--egri),
              color var(--hizli) var(--egri), transform var(--hizli) var(--egri),
              box-shadow var(--orta) var(--egri);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn .simge { width: 18px; height: 18px; }
.btn-primary { background: var(--vurgu); color: var(--vurgu-metin); }
.btn-primary:hover { background: var(--vurgu-hover); color: var(--vurgu-metin); }
.btn-ghost { background: var(--yuzey); color: var(--metin); border-color: var(--cizgi); }
.btn-ghost:hover { background: var(--su-zemin); border-color: var(--su); color: var(--metin); }

/* Su yeşili parlama: fareyle üstüne gelince, klavyeyle odaklanınca ve basınca.
   Halka + yumuşak, renge boyanmış gölge (siyah gölge değil). Tehlike düğmesinde yok. */
.btn:not(.btn-tehlike):not(:disabled):not([aria-disabled="true"]):hover,
.btn:not(.btn-tehlike):focus-visible {
  box-shadow: 0 0 0 3px var(--parlama-halka), 0 8px 22px -6px var(--parlama-golge);
}
.btn:not(.btn-tehlike):not(:disabled):not([aria-disabled="true"]):active {
  box-shadow: 0 0 0 4px var(--parlama-halka-guclu), 0 4px 14px -4px var(--parlama-golge);
}
@media (prefers-reduced-motion: no-preference) {
  .btn:not(.btn-tehlike):not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-1px); }
  .btn:not(.btn-tehlike):not(:disabled):not([aria-disabled="true"]):active { transform: translateY(0) scale(.98); }
}
.btn-su { background: var(--su-zemin); color: var(--su-metin); }
.btn-su:hover { background: var(--su-zemin-2); color: var(--su-metin); }
.btn-lg { min-height: 48px; padding: 13px 22px; font-size: var(--fs-17); }
.btn-sm { min-height: 36px; padding: 7px 12px; font-size: var(--fs-13); }
.btn-block { width: 100%; }
.btn-ikon { min-height: 40px; width: 40px; padding: 0; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn[aria-disabled="true"]:active, .btn:disabled:active { transform: none; }

/* Yazı düğmesi (ikincil eylem) */
.btn-metin {
  background: none; border: 0; padding: 8px 6px; font: inherit; font-weight: 500;
  color: var(--link); cursor: pointer; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
}
.btn-metin:hover { text-decoration: underline; }
.btn-tehlike { background: var(--yuzey); color: var(--tehlike); border-color: var(--tehlike-cizgi); }
.btn-tehlike:hover { background: var(--tehlike-zemin); color: var(--tehlike-hover); }

/* ---------- Üst menü (karşılama ve giriş sayfaları) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--zemin) 82%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--cizgi-hafif);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--metin-2); font-weight: 500; font-size: var(--fs-15); }
.nav-links a:hover { color: var(--metin); text-decoration: none; }
.nav-cta { display: flex; align-items: center; gap: 8px; }

/* Logo: tek parça kelime işareti (Ypup!) */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo:hover { text-decoration: none; }
.logo-img { height: 30px; width: auto; display: block; padding: 2px 0; }

/* Tema ve dil düğmeleri */
.dil-sec, .tema-sec {
  font: inherit; font-weight: 500; font-size: var(--fs-13);
  min-width: 40px; height: 40px; padding: 0 10px; cursor: pointer;
  display: inline-grid; place-items: center;
  background: transparent; color: var(--metin-2);
  border: 1px solid transparent; border-radius: var(--r-kontrol);
}
.dil-sec:hover, .tema-sec:hover { color: var(--metin); background: var(--yuzey-2); }
.tema-sec .simge { width: 20px; height: 20px; }

/* ---------- Bölümler ---------- */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--metin-2); }

/* ============================================================
   Form ve giriş sayfaları
   ============================================================ */
.auth-page { min-height: 100dvh; display: flex; flex-direction: column; }
/* Üste hizalı: dikey ortalamada sihirbazın her adımında yükseklik değişince kart zıplıyordu,
   telefonda da üstte büyük boşluk kalıyordu */
.auth-main { flex: 1; display: grid; place-items: start center; padding: clamp(24px, 7vh, 72px) 20px 56px; }
.auth-card {
  width: 100%; max-width: 520px; background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: var(--r-yuzey);
  padding: clamp(24px, 4vw, 36px);
}
.auth-card.narrow { max-width: 440px; }
.auth-head { margin-bottom: 24px; }
.auth-head .mascot-mini { width: 56px; height: 56px; margin-bottom: 14px; }
.auth-head h1 { font-size: var(--fs-24); letter-spacing: -0.02em; margin-bottom: 6px; }
.auth-head p { color: var(--metin-2); font-size: var(--fs-15); }

.field { margin-bottom: 18px; }
.field > label, .alan-etiket { display: block; font-weight: 500; font-size: var(--fs-15); margin-bottom: 6px; color: var(--metin); }
.field .hint { font-size: var(--fs-13); color: var(--metin-3); margin-top: 6px; }
.input, .select, .textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--metin);
  background: var(--yuzey); border: 1px solid var(--cizgi-guclu); border-radius: var(--r-kontrol);
  padding: 11px 13px; min-height: 44px;
  transition: border-color var(--hizli) var(--egri), box-shadow var(--hizli) var(--egri);
}
.input::placeholder, .textarea::placeholder { color: var(--metin-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--metin-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible,
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--odak); box-shadow: 0 0 0 3px color-mix(in srgb, var(--odak) 28%, transparent);
}
.select { background-color: var(--yuzey); color: var(--metin); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field.invalid .input, .field.invalid .select, .field.invalid .textarea,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--tehlike); }
.error-msg { color: var(--tehlike); font-size: var(--fs-13); margin-top: 6px; display: none; }
.field.invalid .error-msg { display: block; }

/* Doğum tarihi: gün / ay / yıl yan yana */
.dogum-satir { display: grid; grid-template-columns: 86px 1fr 104px; gap: 10px; align-items: center; }
.dogum-satir .input { text-align: center; font-variant-numeric: tabular-nums; }
.dogum-satir input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.dogum-satir input[type="number"]::-webkit-outer-spin-button,
.dogum-satir input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 420px) {
  .dogum-satir { grid-template-columns: 70px 1fr 86px; gap: 8px; }
}

/* Şifre göster */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 88px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--metin-2); font-weight: 500;
  font-size: var(--fs-13); cursor: pointer; padding: 0 12px; min-height: 40px; border-radius: 6px;
}
.pw-toggle:hover { color: var(--metin); background: var(--yuzey-2); }

/* Şifre güç göstergesi */
.pw-meter { display: flex; gap: 4px; margin-top: 8px; }
.pw-meter span { flex: 1; height: 4px; border-radius: 2px; background: var(--yuzey-3); transition: background-color var(--orta) var(--egri); }
.pw-meter.guc-1 span:nth-child(-n+1) { background: var(--tehlike); }
.pw-meter.guc-2 span:nth-child(-n+2) { background: var(--sari-400); }
.pw-meter.guc-3 span:nth-child(-n+3) { background: var(--su); }
.pw-meter.guc-4 span { background: var(--vurgu); }
.pw-meter.bos span { background: var(--yuzey-3); }

/* Dosya ekleme alanı */
.dropzone {
  border: 1.5px dashed var(--cizgi-guclu); border-radius: var(--r-kart); background: var(--yuzey-2);
  padding: 28px 20px; text-align: center; cursor: pointer;
  transition: border-color var(--hizli) var(--egri), background-color var(--hizli) var(--egri);
}
.dropzone:hover, .dropzone.uzerinde { border-color: var(--su); background: var(--su-zemin); }
.dropzone .dz-ikon { margin: 0 auto 8px; color: var(--metin-2); }
.dropzone .dz-ikon .simge { width: 28px; height: 28px; margin: 0 auto; }
.dropzone .dz-baslik { font-weight: 600; margin-bottom: 4px; }
.dropzone .dz-alt { font-size: var(--fs-13); color: var(--metin-3); }
.file-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.file-item {
  display: flex; align-items: center; gap: 10px; background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: var(--r-kontrol); padding: 8px 8px 8px 12px; font-size: var(--fs-15);
}
.file-item .fi-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file-item .fi-boyut { color: var(--metin-3); font-size: var(--fs-13); flex: none; font-variant-numeric: tabular-nums; }
.file-item .fi-sil {
  background: none; border: 0; color: var(--metin-3); cursor: pointer; flex: none;
  min-width: 36px; min-height: 36px; display: grid; place-items: center; border-radius: 6px;
}
.file-item .fi-sil:hover { color: var(--tehlike); background: var(--tehlike-zemin); }

/* İkili seçim kartları */
.secim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.secim-kart {
  border: 1px solid var(--cizgi-guclu); background: var(--yuzey); border-radius: var(--r-kart);
  padding: 16px; cursor: pointer; text-align: left; color: var(--metin);
  transition: border-color var(--hizli) var(--egri), background-color var(--hizli) var(--egri);
}
.secim-kart:hover { border-color: var(--vurgu); }
.secim-kart.active, .secim-kart[aria-pressed="true"], .secim-kart[aria-checked="true"] {
  border-color: var(--vurgu); background: var(--su-zemin); box-shadow: inset 0 0 0 1px var(--vurgu);
}
.secim-kart .sk-ikon { margin-bottom: 8px; color: var(--vurgu-yazi); }
.secim-kart .sk-baslik { font-weight: 600; margin-bottom: 2px; }
.secim-kart .sk-alt { font-size: var(--fs-13); color: var(--metin-2); }

/* Sınav puan satırları */
.sinav-satir {
  display: grid; grid-template-columns: 1.1fr 1fr .9fr; gap: 10px; align-items: end;
  border-top: 1px solid var(--cizgi); padding: 12px 0; margin-bottom: 0;
}
.sinav-satir .sn-ad { font-weight: 600; font-size: var(--fs-15); padding-bottom: 12px; }
.sinav-satir .field { margin-bottom: 0; }
.sinav-satir label { font-size: var(--fs-13); }
.sinav-satir.hatali .sn-ad { color: var(--tehlike); }
.sn-hata { grid-column: 1 / -1; color: var(--tehlike); font-size: var(--fs-13); }
.sn-hata:empty { display: none; }

.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* E-posta yazım hatası önerisi */
.oneri-btn {
  margin-top: 8px; background: var(--su-zemin); border: 1px solid transparent;
  color: var(--su-metin); font-weight: 500; font-size: var(--fs-15); cursor: pointer;
  padding: 8px 12px; border-radius: var(--r-kontrol); min-height: 40px;
}
.oneri-btn:hover { background: var(--su-zemin-2); }

/* ---------- Ülke seçici ---------- */
.ulke-etiketler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ulke-etiketler:empty { display: none; }
.ulke-etiket {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--su-zemin); color: var(--su-metin);
  border-radius: var(--r-kontrol); padding: 4px 4px 4px 12px; font-weight: 500; font-size: var(--fs-15);
}
.ulke-etiket button {
  background: none; border: 0; color: inherit; cursor: pointer;
  min-width: 32px; min-height: 32px; display: grid; place-items: center; border-radius: 6px;
}
.ulke-etiket button:hover { color: var(--tehlike); background: var(--tehlike-zemin); }

.ulke-sarmal { position: relative; }
.ulke-ac { min-height: 44px; }
.ulke-panel {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: min(380px, 100%); background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: var(--r-kart);
  box-shadow: var(--golge-panel); padding: 10px; overscroll-behavior: contain;
}
.ulke-arama { margin-bottom: 8px; }
.ulke-liste {
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px;
}
.ulke-grup { font-size: var(--fs-13); font-weight: 500; color: var(--metin-3); padding: 10px 8px 4px; }
.ulke-sat {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 9px 10px; border-radius: var(--r-kontrol); font-size: var(--fs-15); font-weight: 400; color: var(--metin);
}
.ulke-sat:hover { background: var(--yuzey-2); }
.ulke-sat.secili { background: var(--su-zemin); color: var(--su-metin); font-weight: 500; }
.ulke-sat .tik { color: var(--su-metin); display: inline-grid; }
.ulke-bos { padding: 16px 10px; color: var(--metin-3); font-size: var(--fs-15); text-align: center; }
.ulke-ozel { display: flex; gap: 8px; border-top: 1px solid var(--cizgi-hafif); padding-top: 10px; }
.ulke-ozel .input { flex: 1; }
.ulke-arti { flex: none; }
.ulke-liste::-webkit-scrollbar { width: 8px; }
.ulke-liste::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius: 4px; }

/* ---------- Çip seçiciler ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
  border: 1px solid var(--cizgi-guclu); background: var(--yuzey); color: var(--metin);
  padding: 8px 13px; min-height: 40px; border-radius: var(--r-kontrol);
  font-weight: 500; font-size: var(--fs-15); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color var(--hizli) var(--egri), background-color var(--hizli) var(--egri), color var(--hizli) var(--egri);
}
.chip:hover { border-color: var(--vurgu); }
.chip.active, .chip[aria-pressed="true"], .chip[aria-checked="true"] {
  background: var(--su-zemin); border-color: var(--vurgu); color: var(--su-metin);
  box-shadow: inset 0 0 0 1px var(--vurgu);
}

/* Veli rıza bloğu */
/* Sarı sadece bugün, hayal okulu ve yaklaşan son tarih için: veli onayı nötr kutu */
.consent {
  background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: var(--r-kart);
  padding: 16px; margin-bottom: 18px;
}
.consent .consent-title { font-weight: 600; color: var(--metin); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.consent .consent-title .simge { color: var(--vurgu-yazi); }
.consent p { font-size: var(--fs-15); color: var(--metin-2); margin-bottom: 14px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-15); cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--vurgu); flex: none; }

/* Sihirbaz: adım göstergesi */
.wizard-head { margin-bottom: 24px; }
.steps-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.steps-bar .seg { flex: 1; height: 4px; border-radius: 2px; background: var(--yuzey-3); overflow: hidden; }
.steps-bar .seg.done { background: var(--vurgu); }
.steps-bar .seg.current { background: var(--su); }
.step-title { font-size: var(--fs-24); font-weight: 600; margin-bottom: 4px; }
.step-sub { color: var(--metin-2); font-size: var(--fs-15); }
.step-count { font-size: var(--fs-13); color: var(--metin-3); font-weight: 500; font-variant-numeric: tabular-nums; }

.wstep { display: none; }
.wstep.active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .wstep.active { animation: belir-yukari var(--orta) var(--egri); }
}
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.wizard-nav .btn-ghost.hidden { visibility: hidden; }

.auth-foot { text-align: center; margin-top: 22px; font-size: var(--fs-15); color: var(--metin-2); }
.auth-foot a { font-weight: 500; }

/* Başarı ekranı */
.success { text-align: center; padding: 10px 0; }
.success .mascot-mini { width: 88px; height: 88px; margin: 0 auto 18px; }
.success h2 { margin-bottom: 10px; }
.success p { color: var(--metin-2); margin-bottom: 24px; }

/* Bilgi satırları (profil): kutu yok, ince ayırıcı */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin: 8px 0 4px; }
.info-item { padding: 12px 0; border-bottom: 1px solid var(--cizgi-hafif); min-width: 0; }
.info-item .k { font-size: var(--fs-13); color: var(--metin-3); font-weight: 500; }
.info-item .v { font-weight: 500; margin-top: 2px; overflow-wrap: anywhere; }

/* Bildirim satırı */
.notice {
  background: var(--yuzey-2); border: 1px solid var(--cizgi); color: var(--metin);
  border-radius: var(--r-kart); padding: 12px 14px; font-size: var(--fs-15); margin-bottom: 18px;
  display: flex; gap: 10px; align-items: flex-start;
}
.notice .simge { margin-top: 2px; color: var(--metin-2); }
.notice.error { background: var(--tehlike-zemin); border-color: var(--tehlike-cizgi); }
.notice.error .simge { color: var(--tehlike); }
.notice.basari { background: var(--su-zemin); border-color: transparent; }
.notice.basari .simge { color: var(--su-metin); }
.notice.uyari { background: var(--sari-zemin); border-color: var(--sari-cizgi); }

/* ---------- Plan kartı (ödeme) ---------- */
.plan-kart {
  margin: 18px 0 4px; padding: 16px;
  background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: var(--r-kart);
}
.plan-kart.premium { background: var(--su-zemin); border-color: transparent; }
.plan-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.plan-rozet { font-weight: 600; font-size: var(--fs-15); color: var(--metin); }
.plan-kart.premium .plan-rozet { color: var(--su-metin); }
.plan-kalan { font-weight: 500; font-size: var(--fs-15); color: var(--metin-2); font-variant-numeric: tabular-nums; }
.plan-not { margin: 8px 0 0; font-size: var(--fs-15); color: var(--metin-2); }
.plan-uyari { margin: 8px 0 0; font-size: var(--fs-15); color: var(--sari-metin); font-weight: 500; }
.plan-paketler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.plan-durum { margin: 8px 0 0; font-size: var(--fs-13); color: var(--metin-3); }
.plan-durum:empty { display: none; }

/* ---------- Yükleniyor iskeleti ---------- */
.iskelet {
  display: block; border-radius: var(--r-kontrol); background: var(--yuzey-2);
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--yuzey-3) 70%, transparent), transparent);
  background-size: 200% 100%; background-repeat: no-repeat;
}
.iskelet-satir { height: 14px; margin: 10px 0; }
.iskelet-satir.kisa { width: 55%; }
.iskelet-blok { height: 96px; border-radius: var(--r-kart); margin: 12px 0; }
@media (prefers-reduced-motion: no-preference) {
  .iskelet { animation: iskelet-parla 1.4s ease-in-out infinite; }
}
@keyframes iskelet-parla { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* ---------- Hareket ---------- */
@keyframes belir-yukari { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes belir { from { opacity: 0; } to { opacity: 1; } }
/* Kaydırınca beliren bölümler: CSS'in kaydırmaya bağlı animasyonu.
   JS gerekmez; desteklemeyen tarayıcıda içerik olduğu gibi görünür. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .gorunur-ol { animation: belir-yukari linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
  /* Sayfalar arası yumuşak geçiş (destekleyen tarayıcılarda) */
  @view-transition { navigation: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-links { display: none; }
}
/* Telefon: form kutusu yerine düz sayfa; iç içe kenar boşlukları alanları daraltıyordu */
@media (max-width: 560px) {
  .auth-main { padding: 12px 16px 40px; }
  .auth-card, .auth-card.narrow { max-width: none; border: 0; border-radius: 0; background: transparent; padding: 8px 0 0; }
}
@media (max-width: 520px) {
  body { font-size: 1rem; }
  .logo-img { height: 30px; }
  .nav-cta { gap: 4px; }
  .nav-cta .btn { padding: 8px 12px; min-height: 40px; }
  .nav-ipucu { display: none; }
  .info-grid { grid-template-columns: 1fr; }
  .secim-grid, .ikili { grid-template-columns: 1fr; }
  .sinav-satir { grid-template-columns: 1fr; }
  .sinav-satir .sn-ad { padding-bottom: 0; }
}
@media (max-width: 400px) {
  .nav-inner { gap: 8px; }
}

/* Hareketi azalt tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Saydamlığı azalt tercihi: bulanık menü düz zemine döner */
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--zemin); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Sözleşmeler ve izinler: kayıt formu ve giriş sonrası onay penceresi */
.onaylar { border: 0; margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid var(--cizgi-hafif); min-width: 0; }
.onaylar legend { padding: 0; margin-bottom: 10px; }
.onaylar .field { margin-bottom: 12px; }
.onaylar .check { font-size: var(--fs-15); line-height: 1.5; }
.onaylar .check a { color: var(--link); }
.onay-etiket {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; vertical-align: 1px;
  font-size: var(--fs-12); font-weight: 600; color: var(--metin-2); background: var(--yuzey-2);
}
.onay-ayrac { margin: 16px 0 10px; font-size: var(--fs-13); color: var(--metin-2); }
.onay-detay { margin: 6px 0 0 28px; font-size: var(--fs-13); color: var(--metin-2); }
.onay-detay summary { cursor: pointer; color: var(--link); font-weight: 500; width: fit-content; }
.onay-detay ul { margin: 6px 0 6px; padding-left: 1.2em; }
.onay-detay li { margin: 2px 0; }
.onay-detay p { margin: 0; }
.onay-not { font-size: var(--fs-13); color: var(--metin-2); margin: 4px 0 0; }
/* Açık rıza önerisi (kayıt formu ve demo "Hesabını tamamla"): kutunun yazısıyla hizalı */
.onay-oneri { margin: 6px 0 0 28px; font-size: var(--fs-13); line-height: 1.5; color: var(--metin-2); }

/* Çerez onayı (cerez.js): sayfayı kapatmayan alt şerit. Reddet ve Kabul et
   aynı görünür (KVKK Çerez Rehberi: reddetmek kabul etmek kadar kolay olmalı) */
.cerez-penceresi {
  position: fixed; z-index: 90; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px 24px;
  padding: 16px 20px; background: var(--yuzey); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: var(--r-yuzey); box-shadow: var(--golge-panel);
}
.cerez-metin { flex: 1 1 auto; min-width: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--metin-2); }
.cerez-metin p { margin: 0 0 4px; }
.cerez-baslik { font-size: var(--fs-15); font-weight: 600; color: var(--metin); }
.cerez-link { color: var(--link); font-weight: 500; }
.cerez-eylem { display: flex; gap: 8px; flex: none; }
.cerez-eylem .btn { min-width: 104px; }
@media (max-width: 640px) {
  .cerez-penceresi { flex-direction: column; align-items: stretch; left: 12px; right: 12px; padding: 14px 16px; }
  .cerez-eylem .btn { flex: 1 1 0; }
}
/* Uygulama sayfalarında telefondaki alt menünün üstünde dursun */
@media (max-width: 860px) {
  body:has(.alt-menu) .cerez-penceresi { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- Demo (demo.ypup.io) ----------
   Rozet ve karşılama sayfasının üst şeridi (main.js demoGorunum).
   Uygulamadaki demo kartı uygulama.css'te, kayıt notu formlar.css'te. */
.demo-rozet {
  display: inline-flex; align-items: center; flex: none; padding: 1px 8px; border-radius: 999px;
  background: var(--su-zemin-2); color: var(--su-metin);
  font-size: var(--fs-12); font-weight: 600; letter-spacing: .02em;
}
.demo-serit { background: var(--su-zemin); border-bottom: 1px solid var(--cizgi-hafif); color: var(--metin); font-size: var(--fs-13); }
.demo-serit-ic {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
  padding-top: 8px; padding-bottom: 8px; text-align: center;
}