/* ============================================================
   AG Landing V15 - Avrupa Goc
   Almanya'da universite odakli landing page

   V14'TEN DEVRALINAN TASARIM SISTEMI (degistirilmedi)
   Palet    : lacivert baskin, sari yalnizca sinyal rengi olarak
   Tipografi: Inter tek aile (govde + baslik), ADAY2-v3 ile ayni yapi
   Imza     : CEFR dil merdiveni (A1'den C1'e)
   Motif    : Kemer (arch), Avrupa universite mimarisinden

   V15'TE EKLENENLER
   1.  Gercek logo (.brandmark)
   2.  Ogrenci kartinda standart rozet alani (.badges)
   3.  Surec kartlarinda "yaninda kim var" + "cikti" + baglanti cizgisi
   4.  Koyu bolumde dengeli iki kolon + kanit izgarasi
   5.  Universite kartinda ogrenci video posteri, placeholder satir YOK
   6.  SSS 960px ortalanmis kolon, cevap ici video, kaynak rozeti
   7.  V16.4: kucuk davet karti kaldirildi; kosullar saglaninca
       dogrudan mevcut cok adimli form modali aciliyor

   Harici bagimlilik: yalnizca Google Fonts (1 aile: Inter).
   ============================================================ */

/* ---------- 1. TOKENLAR ---------- */
:root {
  /* Renk: marka lacivert + sari, reklam banner'i olmayacak sekilde dizginlenmis */
  --deep:    #0A3350;   /* baskin koyu lacivert: koyu bolumler, footer */
  --navy:    #0F568A;   /* marka mavisi: link, vurgu, buton */
  --sky:     #E9F0F6;   /* acik mavi zemin: bolum arkaplani */
  --sky-2:   #D3E2EE;   /* acik mavi kenarlik */
  --signal:  #F2C230;   /* dizginlenmis altin: YALNIZ sinyal */
  --signal-d:#8A6A00;   /* altin uzerine okunur koyu ton (AA kontrast) */
  --paper:   #FBFAF8;   /* sicak kirik beyaz: sayfa zemini */
  --white:   #FFFFFF;
  --ink:     #12202C;   /* mavi alt tonlu ana metin */
  --mute:    #566675;   /* ikincil metin: paper ustunde AA */
  --line:    #E3E8ED;
  --wa:      #1FA855;   /* WhatsApp yesili, AA icin koyultuldu */

  /* Tipografi: tek aile, ADAY2-v3 ile ayni (Inter, system-ui fallback) */
  --display: 'Inter', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;

  /* Olcek */
  --wrap: 1200px;
  --read: 1000px;       /* V15: SSS gibi okuma kolonlari icin */
  --gut: clamp(18px, 4vw, 32px);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Bolumler arasi tek kaynak: .band tek basina yonetir.
     V16.4: tek buyuk deger yerine UC seviye. Her bolum kendi
     yogunluguna gore seviye secer; 100px+ bosluklar kalkti. */
  --section-y-sm: clamp(40px, 5vw, 56px);   /* kisa gecis bolumleri */
  --section-y-md: clamp(48px, 6.4vw, 76px); /* kart / video yogun bolumler */
  --section-y-lg: clamp(56px, 7.6vw, 92px); /* hero ve final CTA */
  --band-y: var(--section-y-md);

  /* Hareket: tek kaynak, prefers-reduced-motion tek yerden kisitlanir */
  --mo-head: 420ms;
  --mo-card: 420ms;
  --mo-swap: 300ms;
  --mo-panel: 320ms;

  --shadow-sm: 0 2px 8px -2px rgba(10, 51, 80, .10);
  --shadow-md: 0 14px 34px -18px rgba(10, 51, 80, .38);
  --shadow-lg: 0 30px 70px -34px rgba(10, 51, 80, .55);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. TEMEL ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* V15: logo eklendigi icin top bar biraz yukseldi, capa boslugu buyudu */
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0; line-height: 1.14; letter-spacing: -.02em; }
h1, h2 { font-family: var(--display); font-weight: 700; }
h3, h4 { font-family: var(--body); font-weight: 700; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; }

::selection { background: var(--navy); color: #fff; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :focus-visible { outline-color: var(--signal); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--deep); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600;
  transition: top .18s var(--ease);
}
.skip:focus { top: 0; }

.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;
}

/* ---------- 3. DUZEN ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--read { max-width: var(--read); }

.band { padding-block: var(--band-y); }
.band--tight { padding-block: calc(var(--band-y) * .62); }
/* Uc spacing seviyesi: hicbir bolum digerinin ritmini tasimaz */
.band--sm { padding-block: var(--section-y-sm); }
.band--lg { padding-block: var(--section-y-lg); }

.band--sky   { background: var(--sky); }
.band--deep  { background: var(--deep); color: #fff; }
.band--white { background: var(--white); }

.band--deep .lead { color: rgba(255,255,255,.74); }

.head { max-width: 660px; }
.head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 16px;
}
.band--deep .eyebrow { color: var(--signal); }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; flex: none; }

h2.title { font-size: clamp(28px, 4.4vw, 46px); }
.lead {
  margin-top: 16px; font-size: clamp(15.5px, 1.6vw, 17.5px);
  color: var(--mute); line-height: 1.68; max-width: 62ch;
}
.head--center .lead { margin-inline: auto; }

/* ---------- 4. BUTONLAR ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px;
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--body); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--deep); }

.btn--signal { background: var(--signal); color: #22160B; }
.btn--signal:hover { background: #FFD34D; }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--sky-2); }
.btn--ghost:hover { border-color: var(--navy); background: var(--white); }

.band--deep .btn--ghost { color: #fff; border-color: rgba(255,255,255,.34); }
.band--deep .btn--ghost:hover { border-color: var(--signal); background: rgba(255,255,255,.06); }

.btn--sm { min-height: 44px; padding: 10px 20px; font-size: 14px; }
.btn--quiet {
  background: none; border: 0; color: var(--mute);
  min-height: 44px; padding: 10px 14px; font-size: 14px; font-weight: 600;
  font-family: var(--body); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.btn--quiet:hover { color: var(--ink); }

/* Video/kart grid'i ile bolum CTA'si arasi 28-32px */
.cta-rail { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 32px); }
.cta-rail--center { justify-content: center; }
.cta-rail .btn { flex: 1 1 auto; }
@media (min-width: 600px) { .cta-rail .btn { flex: 0 0 auto; } }

/* ---------- 5. V15: GERCEK LOGO ---------- */
/* Yaziyla kurulan "Avrupa Göç" markasi kaldirildi. Her yerde gercek
   logo dosyasi, sabit width/height ile (CLS yok). */
.brandmark { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brandmark img { display: block; width: auto; }

/* Top bar: beyaz kapsulun icinde, seffaf zeminli renkli logo */
.brandmark--bar img { height: 40px; }
@media (min-width: 700px) { .brandmark--bar img { height: 46px; } }

/* Mobil menu paneli beyaz zeminli */
.brandmark--menu img { height: 42px; }

/* Footer koyu zeminli: beyaz logo varyanti */
.brandmark--foot img { height: 54px; margin-bottom: 14px; }

/* ---------- 6. IMZA: CEFR DIL MERDIVENI ---------- */
.ladder {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--sky-2); border-radius: var(--r-sm);
  background: var(--white); overflow: hidden; position: relative;
}
.ladder::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--sky-2) 0%, var(--signal) 22%, var(--signal) 100%);
}
.band--deep .ladder { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }

.ladder__step {
  flex: 1; text-align: center; padding: 11px 4px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
  color: var(--navy); white-space: nowrap; background: none; border: 0;
  font-family: var(--body);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.ladder__step + .ladder__step { border-left: 1px solid var(--sky-2); }
.band--deep .ladder__step { color: rgba(255,255,255,.82); }
.band--deep .ladder__step + .ladder__step { border-left-color: rgba(255,255,255,.16); }

/* Etkilesimli hal. V15: sayfa acilisinda HICBIRI secili degil. */
.ladder--nav .ladder__step { cursor: pointer; min-height: 46px; }
.ladder--nav .ladder__step:hover { background: var(--sky); }
.ladder--nav .ladder__step[aria-pressed="true"] { background: var(--signal); color: #22160B; }

/* Merdiven altindaki canli bilgi satiri (gelistirici notu DEGIL) */
.ladder__status {
  font-size: 13px; color: var(--mute); margin-top: 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 22px;
}
.ladder__status .btn--quiet { padding-inline: 0; }

/* Kart ustundeki kucuk kur cipi */
.level {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(242,194,48,.20); color: var(--signal-d);
  border: 1px solid rgba(242,194,48,.5);
}

/* ---------- 7. KEMER (ARCH) ---------- */
.arch {
  border-radius: 50% 50% var(--r-lg) var(--r-lg) / 34% 34% var(--r-lg) var(--r-lg);
  overflow: hidden;
}

/* ---------- 8. TOP BAR ---------- */
.topbar {
  position: fixed; inset: 12px 0 auto; z-index: 90;
  pointer-events: none;
  transition: transform .3s var(--ease);
}
.topbar__pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 14px;
  max-width: var(--wrap); margin-inline: auto;
  padding: 8px 10px 8px 16px;
  /* V15: logo beyaz kapsul uzerinde duruyor, opaklik artirildi ki
     renkli logo her zeminde net okunsun */
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: padding .28s var(--ease), box-shadow .28s var(--ease);
}
.topbar[data-shrunk="true"] .topbar__pill { padding-block: 5px; box-shadow: var(--shadow-md); }

.topbar__nav { display: none; gap: 4px; margin-left: auto; }
@media (min-width: 1040px) { .topbar__nav { display: flex; } }
.topbar__nav a {
  padding: 8px 12px; border-radius: 999px; text-decoration: none;
  font-size: 14.5px; font-weight: 600; color: var(--mute);
  transition: color .18s, background-color .18s;
}
.topbar__nav a:hover { color: var(--navy); background: var(--sky); }

.topbar__cta { margin-left: auto; flex: none; }
@media (min-width: 1040px) { .topbar__cta { margin-left: 8px; } }
@media (max-width: 599px) { .topbar__cta { display: none; } }

.burger {
  flex: none; width: 46px; height: 46px; margin-left: 2px;
  display: grid; place-items: center;
  background: var(--sky); border: 1px solid var(--sky-2); border-radius: 50%;
  cursor: pointer; color: var(--navy);
}
@media (min-width: 1040px) { .burger { display: none; } }
.burger__bars { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.burger__bars::before, .burger__bars::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform .25s var(--ease), top .25s var(--ease);
}
.burger__bars::before { top: -6px; }
.burger__bars::after  { top: 6px; }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after  { top: 0; transform: rotate(-45deg); }

.mobmenu {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(10,51,80,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.mobmenu[data-open="true"] { opacity: 1; visibility: visible; }
.mobmenu__panel {
  position: absolute; inset: 10px 10px auto; padding: 18px;
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  transform: translateY(-14px); transition: transform .28s var(--ease);
  max-height: calc(100dvh - 20px); overflow-y: auto;
}
.mobmenu[data-open="true"] .mobmenu__panel { transform: none; }
.mobmenu__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mobmenu__close {
  width: 46px; height: 46px; display: grid; place-items: center; flex: none;
  background: var(--sky); border: 1px solid var(--sky-2); border-radius: 50%;
  cursor: pointer; font-size: 20px; color: var(--navy); line-height: 1;
}
.mobmenu__panel a.mlink {
  display: block; padding: 15px 8px; min-height: 48px;
  border-bottom: 1px solid var(--line); text-decoration: none;
  font-size: 17px; font-weight: 600; color: var(--ink);
}
.mobmenu__panel a.mlink:last-of-type { border-bottom: 0; }
.mobmenu__panel .btn { width: 100%; margin-top: 14px; }

/* ---------- 9. HERO ---------- */
/* Hero: ust bosluk sabit topbar'i hesaba katar, alt bosluk lg seviyesi */
.hero { padding-block: clamp(112px, 13vw, 158px) var(--section-y-lg); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 44% at 78% 8%, rgba(242,194,48,.16), transparent 70%),
    radial-gradient(70% 52% at 6% 0%, rgba(15,86,138,.10), transparent 68%);
}
.hero .wrap { position: relative; z-index: 1; }

.hero__grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: start; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.04fr .96fr; align-items: center; } }

.hero h1 { font-size: clamp(44px, 6.2vw, 62px); line-height: .94; letter-spacing: -.035em; font-weight: 400; }
.hero h1 em { font-style: italic; color: var(--navy); }
.hero__desc { margin-top: 20px; font-size: clamp(16px, 1.9vw, 18.5px); color: var(--mute); max-width: 54ch; }

.hero__stage { position: relative; max-width: 430px; margin-inline: auto; width: 100%; }
.hero__frame {
  position: relative; aspect-ratio: 9 / 13;
  background: var(--deep); box-shadow: var(--shadow-lg);
  border: 6px solid var(--white);
}
.hero__frame video { width: 100%; height: 100%; object-fit: cover; }
.hero__stage::after {
  content: ''; position: absolute; inset: -14px; z-index: -1;
  border: 1.5px dashed rgba(242,194,48,.6);
  border-radius: 50% 50% var(--r-xl) var(--r-xl) / 34% 34% var(--r-xl) var(--r-xl);
  pointer-events: none;
}

/* Video oynat katmani */
.vplay {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; gap: 0;
  background: linear-gradient(180deg, rgba(10,51,80,.12) 0%, rgba(10,51,80,.62) 100%);
  border: 0; cursor: pointer; width: 100%; padding: 0;
  color: #fff; font-family: var(--body);
  transition: opacity .5s var(--ease);
}
.vplay[hidden] { display: none; }
.vplay__ring {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.45);
  transition: transform .28s var(--ease), background-color .18s;
}
.vplay:hover .vplay__ring { background: rgba(255,255,255,.22); transform: scale(1.06); }
.vplay { z-index: 4; }
.vplay__ring svg { width: 18px; height: 18px; margin-left: 3px; }
.vplay__label {
  position: absolute; left: 0; right: 0; bottom: 20px; padding-inline: 18px;
  font-size: 13.5px; font-weight: 600; text-align: center; text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.vplay.is-opening { opacity: 0; }

/* ---------- 9b. V16.4: KARE VIDEO CERCEVESI ----------
   Kaynak videolarin cogu 9:16. Kareye "object-fit: cover" ile kirpmak
   yuzu, videoya gomulu altyaziyi ve alt bilgi metnini kesiyordu.
   Cozum: video contain ile TAM gorunur; yanlarda kalan alani ayni
   posterin bulanik ve buyutulmus hali doldurur.

   Katman sirasi: bulanik zemin 0 · video 1 · poster 2 · oynat 4 ·
   rozet 5 · video sonu CTA 6.

   JS calismazsa: backdrop ve poster katmani olusmaz, video yine kare
   cercevede contain durur, arkasi koyu lacivert marka zemini olur.
   Kirpma HICBIR durumda olmaz.
   ---------------------------------------------------------------- */
.vcard__stage,
.slide__stage,
.faq__videostage,
.brandsplit__video,
.tcard__player {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--deep);
  isolation: isolate;
}

/* Videonun kendisi: kirpilmaz, tamami gorunur */
.vcard__stage > video,
.slide__stage > video,
.faq__videostage > video,
.brandsplit__video > video,
.tcard__player > video {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  background: transparent;
}

/* Manifest alani: yalnizca gomulu altyazisi karede okunmayan
   videolarda kart uzerinde data-aspect="4/5" yazilir. Global
   kural DEGISMEZ. */
[data-video-card][data-aspect="4/5"]  { aspect-ratio: 4 / 5; }
[data-video-card][data-aspect="9/16"] { aspect-ratio: 9 / 16; }
[data-video-card][data-aspect="16/9"] { aspect-ratio: 16 / 9; }

/* Bulanik zemin: ayni posterin buyutulmus hali */
.vstage__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(18px);
  transform: scale(1.12);
  opacity: .42;
  pointer-events: none;
}

/* Poster katmani: baslangicta kareyi doldurur (cover), video
   oynayinca 300ms icinde silinir ve altindaki tam kadraj gorunur.
   Boyut sicramasi olmaz, gecis yumusaktir. */
.vstage__poster {
  position: absolute; inset: 0; z-index: 2;
  background-size: cover; background-position: center;
  opacity: 1;
  transition: opacity 280ms var(--ease);
  pointer-events: none;
}
[data-video-card][data-playing="true"] .vstage__poster { opacity: 0; }

/* ---------- 9c. V16.5: OZEL VIDEO KONTROLLERI ----------
   Tarayicinin kendi kontrolleri KULLANILMIYOR. Safari'de video
   uzerine binen buyuk ust/alt native katmanlar bu yuzden hic
   olusmuyor. Yerine mevcut sari play sistemiyle ayni dilde,
   dort parcali minimal bir katman var:
     merkez play/pause · sag ust ses ve tam ekran · alt 4px cizgi
   Etkilesim olmazsa 1.8 sn sonra gizlenir, fare/dokunma ile
   geri gelir. Video duraklatildiginda gizlenmez.
   ---------------------------------------------------------------- */
.vctrl {
  position: absolute; inset: 0; z-index: 7;
  pointer-events: none;
  opacity: 0;
  transition: opacity .24s var(--ease);
}
.vctrl[hidden] { display: none; }
.vctrl[data-show="true"] { opacity: 1; }
/* Katmanin kendisi tiklamayi yutmaz; yalnizca gercek kontroller alir */
.vctrl > * { pointer-events: auto; }

.vctrl__pp {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0;
  cursor: pointer; background: var(--signal); color: #22160B;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.5);
  transition: transform .2s var(--ease);
}
.vctrl__pp:hover { transform: translate(-50%, -50%) scale(1.06); }

.vctrl__top { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.vctrl__b {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(10, 51, 80, .6); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background-color .2s var(--ease);
}
.vctrl__b:hover { background: rgba(10, 51, 80, .85); }

/* Alt ilerleme cizgisi: 4px gorunur, 12px dokunma alani.
   Tiklanabilir - native kontroller kalktigi icin sarma buradan. */
.vctrl__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 12px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: flex-end;
}
.vctrl__bar::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: rgba(255, 255, 255, .26);
}
.vctrl__bar i {
  position: relative; display: block; height: 4px; width: 0;
  background: var(--signal); transition: width .12s linear;
}

/* CTA katmani goruntuye girince merkez butonu geri cekilir:
   ayni anda iki cagri yarismaz. */
.vctrl[data-cta="on"] .vctrl__pp { opacity: 0; pointer-events: none; }

/* Video oynarken: aktif kart tam, digerleri geri planda.
   html.video-playing on eki gerekli: aksi halde bolum 24'teki
   .reveal-item.is-in { opacity: 1 } ayni ozgullukte olup sonra
   geldigi icin bu kurali eziyordu. */
.vcard { transition: opacity .28s var(--ease); }
html.video-playing .vcard[data-dim="true"] { opacity: .76; }

/* Video oynarken WhatsApp butonu icerigin onune gecmez */
html.video-playing .wa-float { opacity: 0; pointer-events: none; }

/* ---------- 10. V15: VIDEO SONU CTA KATMANI ---------- */
/* Video bitimine 1 saniye kala girer. Video degisince, yeniden
   baslayinca ve geri sarilinca durumu yeniden hesaplanir. */
/* V16.4: video icerigini KAPATMAZ. En fazla alt %28'ini kaplar,
   fazlasi kendi icinde kaydirilir. Giris 320ms / cikis 180ms. */
.vend {
  position: absolute; inset: auto 0 0; z-index: 6;
  max-height: 28%; overflow: auto; overscroll-behavior: contain;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(10,51,80,.72), rgba(10,51,80,.96) 46%);
  color: #fff; text-align: center;
  transform: translateY(12px); opacity: 0;
  pointer-events: none;
  transition: transform 320ms var(--ease), opacity 320ms var(--ease);
}
.vend[data-show="true"] { transform: none; opacity: 1; pointer-events: auto; }
.vend[data-show="false"] { transition-duration: 180ms; }
.vend[hidden] { display: none; }
.vend__q { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.vend__sub { font-size: 12px; color: rgba(255,255,255,.76); margin-top: 4px; margin-bottom: 9px; line-height: 1.4; }
.vend .btn { min-height: 40px; padding: 8px 16px; font-size: 13px; }

/* Hero sosyal kanit */
.hero__proof { margin-top: 26px; display: grid; gap: 10px; }
@media (min-width: 560px) { .hero__proof { grid-template-columns: 1fr 1fr; } }
.proofline {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 15px;
}
.proofline b { display: block; font-size: 15.5px; font-family: var(--display); font-weight: 700; }
.proofline .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); margin-top: 7px; }

/* ---------- 11. SOSYAL KANIT SERIDI ---------- */
.proofgrid { display: grid; gap: 16px; }
@media (min-width: 640px)  { .proofgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .proofgrid { grid-template-columns: repeat(4, 1fr); } }
.proofcard {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 22px; box-shadow: var(--shadow-sm);
}
.proofcard__n {
  font-family: var(--display); font-weight: 700; font-size: 34px;
  color: var(--navy); line-height: 1; letter-spacing: -.03em;
}
.proofcard h3 { font-size: 16px; margin-top: 10px; }
.proofcard p { font-size: 14px; color: var(--mute); margin-top: 7px; line-height: 1.58; }

/* ---------- 12. V15: OGRENCI YOLCULUK KARTLARI ---------- */
.transform { display: grid; gap: 20px; }
/* align-items: start -> kisa iceriğe sahip kart komsusu kadar
   uzamaz, icerik bitince kart da biter. Sabit yukseklik YOK. */
@media (min-width: 900px) {
  .transform {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 22px; row-gap: 20px; align-items: start;
  }
}

.tcard {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}

/* Kart basi: gercek video posteri + isim + izle baglantisi */
/* V16.4: masaustunde kart gereginden yuksekti. Icerik AYNI,
   dikey ritim sikilastirildi: 82px portre kucuk resim kareye indi,
   padding ve satir araliklari kisaldi. */
.tcard__head {
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.tcard__thumb {
  flex: none; width: 62px; height: 62px; border-radius: 14px; overflow: hidden;
  background: var(--deep); position: relative; border: 0; padding: 0; cursor: pointer;
  transition: transform .24s var(--ease);
}
@media (hover: hover) { .tcard__thumb:hover { transform: scale(1.04); } }
.tcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tcard__thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,51,80,.05), rgba(10,51,80,.5));
}
.tcard__thumb svg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 2; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.tcard__idn { min-width: 0; }
.tcard__name { font-size: 16px; font-weight: 700; line-height: 1.28; }
.tcard__watch {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 13px; font-weight: 700; color: var(--navy);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--body);
  text-decoration: underline; text-underline-offset: 3px;
}
.tcard__watch:hover { color: var(--deep); }

/* V15: STANDART ROZET ALANI
   Bir kartta "A2", digerinde "Bir aydir Almanya'da" gibi farkli veri
   turleri artik ayni alanda gosterilmiyor. Dort sabit etiket var,
   degeri olmayan rozet HIC render edilmiyor. */
.badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 18px 0;
}
.badge {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 11.5px; line-height: 1.25;
  padding: 4px 9px; border-radius: 999px;
  background: var(--sky); border: 1px solid var(--sky-2); color: var(--ink);
}
.badge__k { font-weight: 700; color: var(--mute); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.badge__v { font-weight: 700; }
.badge--dil { background: rgba(242,194,48,.18); border-color: rgba(242,194,48,.5); }
.badge--dil .badge__k { color: var(--signal-d); }

/* Kart govdesi: Baslangic noktasi / Bugun */
.tcard__body { display: grid; margin-top: 12px; }
@media (min-width: 520px) { .tcard__body { grid-template-columns: 1fr 1fr; } }
.tcol { padding: 14px 18px 16px; }
.tcol + .tcol { border-top: 1px solid var(--line); }
@media (min-width: 520px) { .tcol + .tcol { border-top: 0; border-left: 1px solid var(--line); } }
.tcol--now { background: var(--sky); }
.tcol__tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 9px; display: block;
}
.tcol--now .tcol__tag { color: var(--navy); }
.tcol ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tcol li { font-size: 15px; line-height: 1.5; padding-left: 17px; position: relative; }
.tcol li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sky-2);
}
.tcol--now li::before { background: var(--signal); }

/* Karttan acilan video katmani (kare cerceve kurallari 9b'de) */
.tcard__player[hidden] { display: none; }
.tcard__playerclose {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(10,51,80,.72); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: 19px; line-height: 1; display: grid; place-items: center;
}

/* ---------- 13. V15: SUREC YOL HARITASI ---------- */
/* Kartlar arasinda baglanti cizgisi. Mobilde dikey timeline,
   masaustunde yatay ilerleme rayi. */
.roadmap { display: grid; gap: 0; position: relative; }

/* Mobil: dikey timeline */
.rstep { position: relative; padding-left: 34px; padding-bottom: 18px; }
.rstep::before {
  /* dikey cizgi */
  content: ''; position: absolute; left: 11px; top: 8px; bottom: -10px; width: 2px;
  background: var(--sky-2);
}
.rstep:last-child::before { display: none; }
.rstep::after {
  /* nokta */
  content: ''; position: absolute; left: 5px; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--signal); z-index: 1;
}
.rstep__card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
}

@media (min-width: 900px) {
  .roadmap { grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 30px; }
  /* Yatay ilerleme rayi: kartlarin ustunden gecer */
  .roadmap::before {
    content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 7px; height: 2px;
    background: linear-gradient(90deg, var(--sky-2), var(--signal));
  }
  .rstep { padding: 0; }
  .rstep::before { display: none; }
  .rstep::after {
    left: 50%; top: 0; transform: translate(-50%, 0);
  }
  .rstep__card { height: 100%; }
}

.rstep__n {
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .1em;
  color: var(--navy); text-transform: uppercase; margin-bottom: 10px; display: block;
}
.rstep h3 { font-size: 17px; }
.rstep__desc { font-size: 14px; color: var(--mute); margin-top: 8px; }

/* "Yaninda kim var?" ve "Bu asamanin ciktisi" bloklari */
.rmeta { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.rmeta + .rmeta { margin-top: 12px; }
.rmeta__k {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); display: block; margin-bottom: 8px;
}
.rmeta ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.rmeta li {
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
  padding: 5px 10px; border-radius: 999px;
  background: var(--sky); border: 1px solid var(--sky-2); color: var(--ink);
}
.rmeta--out ul { display: grid; gap: 8px; }
.rmeta--out li {
  background: none; border: 0; padding: 0 0 0 20px; position: relative;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.rmeta--out li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 11px; height: 6px;
  border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(-45deg);
}

/* Yalnizca mobilde: "Temel isler" ve video linki kart kalabalik
   olmasin diye varsayilan kapali, istege bagli acilir.
   NOT: sinif adi bilinçli olarak ".rstep__more" DEGIL — o isim
   ag-v17.css'te masaustu JS panelinin dugmesine ait; ayni ismi
   kullanmak dosya sirasi yuzunden bu ogeyi de gorunur yapiyordu. */
.rstep__toggle { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 4px; }
.rstep__toggle-s {
  display: flex; align-items: center; gap: 6px; min-height: 40px;
  font-size: 13px; font-weight: 700; color: var(--navy);
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.rstep__toggle-s::marker, .rstep__toggle-s::-webkit-details-marker { display: none; }
.rstep__toggle-s::after {
  content: '▾'; font-size: 10px; color: var(--mute);
  transition: transform .2s var(--ease);
}
.rstep__toggle[open] .rstep__toggle-s::after { transform: rotate(180deg); }
.rstep__toggle .rmeta { margin-top: 14px; border-top: 0; padding-top: 0; }
.rstep__toggle .rstep__vid { margin-top: 14px; }

.ladder-panel {
  margin-top: clamp(28px, 4vw, 40px);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
}
.ladder-panel h3 { font-size: 17px; }
.ladder-panel p { font-size: 14px; color: var(--mute); margin-top: 8px; margin-bottom: 18px; max-width: 66ch; }

/* ---------- 14. ASAMA VIDEO BOLUMLERI ---------- */
/* Asama sonu CTA'si ile sonraki asama basligi arasi 40-56px */
.stage + .stage { margin-top: clamp(40px, 4.4vw, 56px); }
.stage__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.stage__n {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  color: var(--navy); letter-spacing: .04em; flex: none;
}
.band--deep .stage__n { color: var(--signal); }
.stage h3 { font-size: clamp(21px, 2.8vw, 27px); font-family: var(--display); font-weight: 700; }
.stage__desc { font-size: 15.5px; color: var(--mute); margin-top: 10px; max-width: 62ch; }
.band--deep .stage__desc { color: rgba(255,255,255,.72); }

.vidrow {
  display: grid; gap: 16px; margin-top: 24px;
  grid-auto-flow: column; grid-auto-columns: 74%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  scrollbar-width: thin;
}
/* Masaustu: 3 esit kolon, kare media, kartlar ayni hizada.
   Baslik + aciklama ile grid arasi 28px, grid ile section CTA'si
   arasi 32px (cta-rail margin-top). */
@media (min-width: 760px) {
  /* minmax(0,1fr): uzun basliklarin min-content genisligi kolonu
     itmesin. Aksi halde kartlarin media alani birkac piksel farkli
     yukseklikte kaliyor ve alt metinler ayni hizaya gelmiyordu. */
  .vidrow { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr));
            overflow: visible; gap: 24px; margin-top: 30px;
            max-width: 1440px; margin-inline: auto;
            padding-inline: 0; align-items: start; }
  /* Genis ekranda video alani sinirsiz buyumez */
  .vcard__stage { max-width: 450px; margin-inline: auto; }
  /* Play butonu masaustunde daha olculu */
  .vplay__ring { width: 52px; height: 52px; }
}
.vidrow > * { scroll-snap-align: start; }

.vcard { display: flex; flex-direction: column; }
.vcard__stage {
  border-radius: var(--r-lg);
  border: 1px solid var(--sky-2);
  box-shadow: var(--shadow-md);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.band--deep .vcard__stage { border-color: rgba(255,255,255,.14); }
.vcard__meta { margin-top: 11px; }
/* Baslik her kartta IKI SATIRLIK alan kaplar (tek satirlik baslikta
   da). Boylece butun aciklamalar ayni yatay hizada baslar. */
.vcard__title {
  font-size: 14.5px; font-weight: 700; line-height: 1.38;
  min-height: calc(1.38em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vcard__sub {
  font-size: 13px; color: var(--mute); margin-top: 6px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.band--deep .vcard__sub { color: rgba(255,255,255,.72); }

/* CTA videosunun isareti: "Sıradaki adım" rozeti + sari play butonu.
   Ucuncu bir sari vurgu (kalin dis cerceve) YOK; kenarlik yalnizca
   1px ve dusuk opaklikta. */
.vcard--cta .vcard__stage { border-color: rgba(242,194,48,.45); box-shadow: var(--shadow-md); }
.band--deep .vcard--cta .vcard__stage { border-color: rgba(242,194,48,.4); }
.vtag {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(10,51,80,.72); color: var(--signal);
  border: 1px solid rgba(242,194,48,.55);
  padding: 4px 9px; border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* Masaustu mikro etkilesim: kart hafifce kalkar, golge ve kenarlik artar */
@media (hover: hover) and (min-width: 1040px) {
  .vcard:hover .vcard__stage {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--navy);
  }
  .vcard--cta:hover .vcard__stage { border-color: rgba(242,194,48,.7); box-shadow: var(--shadow-lg); }
  /* Video oynarken hover kaldirma efekti kapali: kartlar sabit dursun */
  html.video-playing .vcard:hover .vcard__stage { transform: none; }
}

/* ---------- 15. OGRENCI CAROUSEL ---------- */
.carousel { position: relative; }
.carousel__viewport {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-block: 6px 14px;
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  scrollbar-width: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .carousel__viewport { margin-inline: 0; padding-inline: 0; justify-content: flex-start; } }

.slide {
  flex: 0 0 78%; scroll-snap-align: center; position: relative;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
@media (min-width: 560px)  { .slide { flex-basis: 46%; } }
@media (min-width: 900px)  { .slide { flex-basis: 30%; } }
@media (min-width: 1140px) { .slide { flex-basis: 23.2%; } }
.slide[hidden] { display: none; }

.slide { transition: opacity .32s var(--ease), transform .32s var(--ease); }
.slide:not([data-active="true"]) { opacity: .62; transform: scale(.97); }
.slide[data-active="true"] { opacity: 1; transform: none; }

.slide__stage {
  border-radius: var(--r-lg);
  border: 1px solid var(--sky-2);
  box-shadow: var(--shadow-md);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.band--deep .slide__stage { border-color: rgba(255,255,255,.14); }
@media (hover: hover) and (min-width: 1040px) {
  .slide[data-active="true"]:hover .slide__stage {
    transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--navy);
  }
}
.slide__meta { margin-top: 12px; display: grid; gap: 6px; }
.slide__name { font-size: 15px; font-weight: 700; }
.slide__fact { font-size: 13px; color: var(--mute); line-height: 1.5; }

.carousel__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.carousel__nav { display: flex; gap: 8px; }
.cbtn {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: var(--white); border: 1px solid var(--sky-2); color: var(--navy);
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.cbtn:hover:not(:disabled) { border-color: var(--navy); transform: translateY(-2px); }
.cbtn:disabled { opacity: .34; cursor: default; }

.carousel__count { font-size: 13.5px; font-weight: 700; color: var(--mute); font-variant-numeric: tabular-nums; }
.carousel__dots { display: flex; gap: 2px; margin-left: auto; }
.cdot { width: 26px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: 0; }
.cdot[hidden] { display: none; }
.cdot i { display: block; height: 4px; width: 10px; border-radius: 999px; background: var(--sky-2); transition: width .3s var(--ease), background-color .3s; }
.cdot[aria-current="true"] i { width: 22px; background: var(--signal); }

/* Aktif dil filtresi bildirimi */
.carousel__filter {
  display: none; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 11px 16px;
  background: rgba(242,194,48,.16); border: 1px solid rgba(242,194,48,.5);
  border-radius: var(--r-md); font-size: 13.5px; font-weight: 600;
}
.carousel__filter[data-on="true"] { display: flex; }

/* ---------- 16. V15: KOYU BOLUM, DENGELI IKI KOLON ---------- */
/* V14'te sag tarafta buyuk bosluk kaliyordu. V15'te sol kolon
   video/topluluk goruntusu, sag kolon marka anlatisi ve kanitlar. */
.brandsplit { display: grid; gap: clamp(22px, 3.2vw, 34px); align-items: start; margin-top: 26px; }
@media (min-width: 940px) { .brandsplit { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; } }

.brandsplit__media { display: grid; gap: 14px; }
.brandsplit__video {
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-lg);
}
.brandsplit__cap { font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.5; }

.brandsplit__copy p { color: rgba(255,255,255,.78); font-size: 15.5px; line-height: 1.6; }
.brandsplit__copy p + p { margin-top: 11px; }

/* Marka imza cumlesi */
.signature {
  margin-top: 18px; padding: 15px 18px;
  border-left: 3px solid var(--signal);
  background: rgba(255,255,255,.055); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2.4vw, 23px);
  line-height: 1.25; color: #fff;
}

/* Kanit izgarasi: portre + video + fotograf kanitlari */
.evidence { display: grid; gap: 9px; margin-top: 20px; }
@media (min-width: 620px) { .evidence { grid-template-columns: 1fr 1fr; } }
.ecard {
  display: flex; gap: 11px; align-items: flex-start;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-md); padding: 11px;
}
.ecard__ico {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(242,194,48,.18); color: var(--signal);
  display: grid; place-items: center;
}
.ecard__t { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; }
.ecard__d { font-size: 12.5px; color: rgba(255,255,255,.66); margin-top: 3px; line-height: 1.42; }

/* Kurumsal ekip serisi: kisisel isim YOK, kurumsal baslik VAR */
.teamstrip { margin-top: 20px; }
.teamstrip__row { display: flex; gap: -10px; align-items: center; }
.teamfaces { display: flex; }
.teamfaces img {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: 50% 22%;
  border: 2px solid var(--deep); background: var(--navy);
}
.teamfaces img + img { margin-left: -14px; }
.teamstrip__cap { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 9px; line-height: 1.5; }

.teamlist { display: grid; gap: 6px; margin-top: 12px; padding: 0; list-style: none; }
@media (min-width: 620px) { .teamlist { grid-template-columns: 1fr 1fr; } }
.teamlist li {
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.86);
  padding-left: 20px; position: relative; line-height: 1.4;
}
.teamlist li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
}

/* Adi ve unvani DOGRULANMIS tek uzman */
.expert {
  display: flex; gap: 14px; align-items: center; margin-top: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md); padding: 12px 14px;
}
.expert img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; }
.expert__n { font-size: 15px; font-weight: 700; color: #fff; }
.expert__t { font-size: 12.5px; color: rgba(255,255,255,.68); margin-top: 3px; }
.expert__link {
  font-size: 12.5px; font-weight: 700; color: var(--signal);
  background: none; border: 0; padding: 0; margin-top: 6px; cursor: pointer;
  font-family: var(--body); text-decoration: underline; text-underline-offset: 3px;
  display: inline-block;
}

/* Ogrenci ziyaret fotograflari.
   Kareler 4:5 dikey ve ust seritte "Ogrencimiz ... Almanya'da" yazisi var,
   bu yuzden en boy orani korunuyor: yazi kirpilmasin. */
.visits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.visits img {
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--r-sm); width: 100%;
  border: 1px solid rgba(255,255,255,.14);
}

/* ---------- 17. V15: UNIVERSITE KARTLARI ---------- */
/* Placeholder satir YOK. Kaynagi olmayan satir hic basilmaz. */
.unis { display: grid; gap: 16px; }
@media (min-width: 620px)  { .unis { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .unis { grid-template-columns: repeat(4, 1fr); } }
.uni {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm); overflow: hidden;
}
.uni__media { position: relative; aspect-ratio: 4 / 3; background: var(--deep); }
.uni__media video, .uni__media img { width: 100%; height: 100%; object-fit: cover; }
.uni__media .vplay__ring { width: 56px; height: 56px; }
.uni__media .vplay__label { bottom: 12px; font-size: 12px; }
.uni__body { padding: 18px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.uni__city {
  font-size: 11.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--navy);
}
.uni h3 { font-size: 16.5px; line-height: 1.28; }
.uni__rows { display: grid; gap: 9px; margin: 0; }
.uni__row { font-size: 13px; }
.uni__row dt { color: var(--mute); margin: 0 0 3px; font-weight: 600; }
.uni__row dd { margin: 0; font-weight: 600; line-height: 1.45; }
.uni__src { font-size: 11.5px; color: var(--mute); font-weight: 500; margin-top: 3px; line-height: 1.4; }
.uni__acts { display: grid; gap: 8px; margin-top: auto; padding-top: 4px; }
.uni__acts .btn { width: 100%; }

/* ---------- 18. PDF KANCASI ---------- */
.hook {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(26px, 4vw, 44px); box-shadow: var(--shadow-md);
  display: grid; gap: 26px; align-items: center;
}
@media (min-width: 880px) { .hook { grid-template-columns: 1.2fr .8fr; } }
.hook h2 { font-size: clamp(24px, 3.4vw, 34px); }
.hook ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hook li { font-size: 15px; padding-left: 26px; position: relative; }
.hook li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 8px;
  border-left: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy);
  transform: rotate(-45deg);
}
.hook__side { display: grid; gap: 12px; }

/* ---------- 19. MODAL + FORM ---------- */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: end center;
  background: rgba(10,51,80,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s;
  padding: 12px;
}
@media (min-width: 640px) { .modal { place-items: center; padding: 24px; } }
.modal[data-open="true"] { opacity: 1; visibility: visible; }

.modal__box {
  width: 100%; max-width: 560px;
  max-height: calc(100dvh - 24px); overflow-y: auto;
  background: var(--white); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(24px); transition: transform .32s var(--ease);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.modal[data-open="true"] .modal__box { transform: none; }

.modal__head {
  position: sticky; top: 0; z-index: 2;
  background: var(--deep); color: #fff; padding: 18px 20px 14px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.modal__headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal__title { font-family: var(--display); font-weight: 700; font-size: 19px; }
.modal__sub { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 3px; }
.modal__close {
  flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 20px; line-height: 1; display: grid; place-items: center;
}
.modal__close:hover { background: rgba(255,255,255,.2); }

/* Formu hangi baglamdan actigini gosteren satir */
.modal__ctx {
  font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 10px;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.08); line-height: 1.45;
}
.modal__ctx[hidden] { display: none; }

.progress { margin-top: 14px; }
.progress__track { height: 5px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.progress__fill { height: 100%; width: 20%; background: var(--signal); border-radius: 999px; transition: width .4s var(--ease); }
.progress__label { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 8px; font-weight: 600; }

.modal__body { padding: 22px 20px 24px; }

.step[hidden] { display: none; }
.step__q { font-size: 18px; font-weight: 700; line-height: 1.35; }
.step__hint { font-size: 13.5px; color: var(--mute); margin-top: 7px; }

.chips { display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 480px) { .chips--2 { grid-template-columns: 1fr 1fr; } }
.chip {
  display: flex; align-items: center; gap: 11px; text-align: left;
  min-height: 54px; padding: 13px 16px; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--ink);
  transition: border-color .18s, background-color .18s, transform .18s var(--ease);
}
.chip:hover { border-color: var(--navy); transform: translateX(2px); }
.chip[aria-pressed="true"] { border-color: var(--navy); background: var(--sky); }
.chip__mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--sky-2); display: grid; place-items: center;
}
.chip[aria-pressed="true"] .chip__mark { border-color: var(--navy); background: var(--navy); }
.chip[aria-pressed="true"] .chip__mark::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

.fields { display: grid; gap: 14px; margin-top: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.field input {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font-family: var(--body); font-size: 16px; /* 16px = iOS zoom yapmaz */
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .18s, box-shadow .18s;
}
.field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,86,138,.14); }
.field input[aria-invalid="true"] { border-color: #C0392B; }
.field__err { font-size: 12.5px; color: #C0392B; font-weight: 600; margin-top: 6px; min-height: 1px; }
.field__err:empty { display: none; }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--mute); line-height: 1.55; margin-top: 4px; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--navy); }
.consent a { color: var(--navy); font-weight: 600; }

.modal__foot { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.modal__foot .btn { flex: 1; }
.btn--back { flex: 0 0 auto; min-width: 52px; padding-inline: 18px; }
.btn--back[hidden] { display: none; }

/* Basari ekrani */
.done[hidden] { display: none; }
.done__seal { width: 62px; height: 62px; border-radius: 50%; margin-inline: auto; background: var(--signal); color: #22160B; display: grid; place-items: center; }
.done h3 { font-family: var(--display); font-weight: 700; font-size: 23px; text-align: center; margin-top: 16px; }
.done__sum { font-size: 14.5px; color: var(--mute); text-align: center; margin-top: 8px; line-height: 1.6; }
.nextsteps { display: grid; gap: 10px; margin-top: 22px; }
.nstep {
  display: flex; align-items: center; gap: 13px; text-decoration: none;
  min-height: 60px; padding: 14px 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .18s, background-color .18s;
}
.nstep:hover { border-color: var(--navy); background: var(--white); }
.nstep__n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
/* V16.2: iki satir span'di ve yan yana akiyordu ("...ulaş+90 549...").
   margin-top zaten blok varsayiyordu; display eksikti. */
.nstep__t { display: block; font-size: 15px; font-weight: 700; }
.nstep__d { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; }

/* ---------- 20. V15: SSS ---------- */
/* Masaustunde 960-1000px ortalanmis kolon. Sagdaki buyuk bosluk gitti. */
.faqwrap { max-width: var(--read); margin-inline: auto; }
.faqwrap .head { max-width: none; }

.faqcats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.faqcat {
  min-height: 44px; padding: 9px 18px; border-radius: 999px; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line);
  font-family: var(--body); font-size: 13.5px; font-weight: 700; color: var(--ink);
  transition: border-color .18s, background-color .18s, color .18s;
}
.faqcat:hover { border-color: var(--navy); }
.faqcat[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Aileler kategorisi daha gorunur: altin cerceve */
.faqcat--aile { border-color: rgba(242,194,48,.85); background: rgba(242,194,48,.16); }
.faqcat--aile:hover { border-color: var(--signal-d); }
.faqcat--aile[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: #22160B; }

.faqlist { display: grid; gap: 10px; }
.faq { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding-inline: 20px; }
.faq[hidden] { display: none; }
.faq summary {
  list-style: none; cursor: pointer; padding-block: 17px;
  display: flex; align-items: center; gap: 14px;
  font-size: 15.5px; font-weight: 700; line-height: 1.42;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__cat {
  flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: var(--sky); color: var(--navy); border-radius: 999px; padding: 4px 10px;
}
.faq[data-cat="Aileler"] .faq__cat { background: rgba(242,194,48,.22); color: var(--signal-d); }
.faq__pm { margin-left: auto; flex: none; color: var(--navy); transition: transform .25s var(--ease); }
.faq[open] .faq__pm { transform: rotate(45deg); }
.faq__a { font-size: 14.5px; color: var(--mute); line-height: 1.72; padding-bottom: 4px; }

/* Kaynak ve son guncelleme rozeti: degisken cevaplarda */
.faq__meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 12px; padding-bottom: 18px;
}
.faq__meta span {
  font-size: 11.5px; font-weight: 600; color: var(--mute);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; line-height: 1.4;
}
.faq__meta span b { color: var(--ink); font-weight: 700; }
.faq--plain .faq__a { padding-bottom: 18px; }

/* Cevap ici video: kopuk kart degil, cevabin parcasi */
.faq__video {
  display: grid; grid-template-columns: 132px 1fr; gap: 15px; align-items: center;
  margin-top: 14px; margin-bottom: 18px; padding: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
}
@media (max-width: 479px) { .faq__video { grid-template-columns: 104px 1fr; gap: 12px; } }
.faq__videostage {
  border-radius: var(--r-md);
  border: 1px solid var(--sky-2);
}
.faq__videostage .vplay__ring { width: 46px; height: 46px; }
.faq__videostage .vplay__label { display: none; }
.faq__videot { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.faq__videod { font-size: 13px; color: var(--mute); margin-top: 6px; line-height: 1.5; }

/* Aileler kategorisi acilis notu */
.faqnote {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 12px; padding: 14px 16px;
  background: rgba(242,194,48,.14); border: 1px solid rgba(242,194,48,.5);
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.5;
}
.faqnote[hidden] { display: none; }
.faqnote svg { flex: none; color: var(--signal-d); margin-top: 1px; }

/* ---------- 21. V16.4: FORM ACIKKEN YUZEN OGELER ----------
   Kucuk sag alt davet karti KALDIRILDI (bkz. form-triggers.js).
   Kosullar saglandiginda dogrudan mevcut cok adimli form modali
   acilir. Form acikken hicbir yuzen oge modalin uzerine binmez.
   Bu kural her ekran genisliginde gecerlidir. */
html.form-open .wa-float,
html.form-open .sticky-cta {
  opacity: 0;
  pointer-events: none;
  transform: translateY(140%);
}
html.form-open .wa-float { transform: scale(.9); }

/* ---------- 22. FINAL CTA + FOOTER ---------- */
.final { text-align: center; }
.final h2 { font-size: clamp(28px, 4.6vw, 48px); color: #fff; }
.final .lead { margin-inline: auto; }

.foot { background: #071F31; color: rgba(255,255,255,.72); font-size: 14.5px; }
.foot__cols { display: grid; gap: 28px; padding-block: 44px 26px; }
@media (min-width: 860px) { .foot__cols { grid-template-columns: 1.25fr 1fr 1.3fr; } }
.foot a { color: rgba(255,255,255,.9); text-decoration: none; }
.foot a:hover { color: var(--signal); text-decoration: underline; }
.foot h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); margin-bottom: 12px; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.foot__note {
  border-top: 1px solid rgba(255,255,255,.12); padding-block: 20px 26px;
  font-size: 12.5px; color: rgba(255,255,255,.52); line-height: 1.65;
}

/* ---------- 22b. CTA ALTI MIKROKOPI ----------
   "Ucretsiz" kelimesi butonun icinde tekrar edilmiyor; ne oldugu
   butonun ALTINDA bir kez aciklaniyor. */
.cta-note {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mute);
}
.cta-rail--center + .cta-note { text-align: center; }
.band--deep .cta-note,
.on-dark .cta-note { color: rgba(255,255,255,.6); }

/* ---------- 23. YUZEN OGELER ---------- */
.wa-float {
  position: fixed; z-index: 80;
  right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa); color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.45);
  transition: transform .22s var(--ease), opacity .3s var(--ease);
}
.wa-float:hover { transform: scale(1.06); }

.sticky-cta {
  position: fixed; z-index: 78; left: 12px; right: 84px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(140%); transition: transform .32s var(--ease);
}
.sticky-cta .btn { width: 100%; box-shadow: var(--shadow-lg); }
.sticky-cta[data-show="true"] { transform: none; }
@media (min-width: 1040px) { .sticky-cta { display: none; } }

/* ---------- 24. HAREKET ----------
   Progressive enhancement: gizleme kurallari YALNIZCA html.js-motion
   varken uygulanir. JS calismazsa hicbir sey gizlenmez, sinif hic
   eklenmez. Inline style ile kalici gizleme YOK. Her oge bir kez
   girer (IntersectionObserver unobserve eder), asagi-yukari
   kaydirmada tekrar oynamaz. */
.js-motion .reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--mo-head) var(--ease), transform var(--mo-head) var(--ease);
}

/* Kart gruplari: 80ms araliklarla sirayla girer (--rd JS'ten gelir).
   Yalnizca masaustunde. Mobilde kartlar yatay carousel icinde
   duruyor; ekran disindaki kart hic gorunmeyebilirdi. */
@media (min-width: 1040px) {
  .js-motion .reveal-item { opacity: 0; transform: translateY(16px); }
  .reveal-item.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--mo-card) var(--ease) var(--rd, 0ms),
                transform var(--mo-card) var(--ease) var(--rd, 0ms);
  }
}

/* Accordion (<details>) icerigi sert acilmasin: isaret doner,
   icerik opaklik + kucuk kaymayla girer. */
details > summary { transition: color .2s var(--ease); }
details > summary::after,
details > summary::marker { transition: transform var(--mo-panel) var(--ease); }
.js-motion details[open] > *:not(summary) {
  animation: agPanelIn var(--mo-panel) var(--ease) both;
}
@keyframes agPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  /* Icerik dogrudan gorunur: reveal, stagger ve carousel olcek kapali */
  .js-motion .reveal,
  .js-motion .reveal-item { opacity: 1 !important; transform: none !important; }
  .slide:not([data-active="true"]) { opacity: .8; transform: none !important; }
  .vcard:hover .vcard__stage,
  .slide[data-active="true"]:hover .slide__stage { transform: none !important; }
}

/* ============================================================
   25. V16: MOBILE-ONLY OGELER (masaustunde gizli)

   Bu blok YALNIZCA V15'te var olmayan, mobil katman icin eklenen
   yeni siniflari gizler. Hicbiri masaustu gorunumunu degistirmez;
   tamami "yeni oge, masaustunde gorunme" kuralindan ibaret.
   Gorunur hale gelmeleri ag-v16-mobile.css icindeki
   @media (max-width: 767px) blogunda tanimlidir.
   ============================================================ */
.mnav,
.hero__ladderlink,
.mladderinfo,
.mcommunity,
.rstep__m,
.tcard__ozet,
.tcard__more,
.mworks,
.uni__more,
.uni__det,
.faqall,
.sheet,
.mstepper,
.m-carbar { display: none; }