/* ============================================================
   AG V17 - UX / UI yeniden duzenleme katmani (masaustu odakli)

   MIMARI KURAL (V16'dan devam):
     ag-v16.css          masaustu temeli (V15 duzeni)
     ag-v17.css          BU DOSYA: yeni bilgi hiyerarsisi + hareket
     ag-v16-mobile.css   yalnizca @media (max-width: 767px)

   Bu dosyadaki kurallarin tamami ya yeni siniflara aittir ya da
   `@media (min-width: 768px)` icindedir. 767px altinda hicbir V16
   mobil davranisi degismez; dosya silinse sayfa V16 gorunumune doner.

   Icerik silinmedi: gorunurluk katmanlandi (progressive disclosure).
   ============================================================ */

/* ---------- 1. EK TOKENLAR ---------- */
:root {
  --mo-seq:   90ms;    /* hero ogeleri arasi sira gecikmesi */
  --mo-in:    520ms;   /* bolum girisi */
  --tl-line:  #D9E4EE; /* timeline bos ray */
}

/* ---------- 2. SADE METIN BAGLANTISI ----------
   Ikincil eylemler artik ikinci bir BUTON degil. Boylece her
   gorunur alanda tek ana CTA kalir (brief md. 4, 13, 14). */
.textlink {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 6px 2px;
  font-family: var(--body); font-size: 15px; font-weight: 700;
  color: var(--navy); text-decoration: none; background: none; border: 0;
  cursor: pointer; letter-spacing: -.01em;
}
.textlink::after {
  content: '→'; font-size: 15px; line-height: 1;
  transition: transform .22s var(--ease);
}
.textlink:hover { color: var(--deep); }
.textlink:hover::after { transform: translateX(4px); }
.textlink--sm { font-size: 14px; min-height: 40px; }
.on-dark .textlink, .band--deep .textlink { color: var(--signal); }
.on-dark .textlink:hover, .band--deep .textlink:hover { color: #FFD867; }

/* Bolum seviyesinde TEK kaynak satiri (kart basina tekrar etmiyor) */
.srcnote {
  margin-top: 14px; font-size: 12.5px; color: var(--mute);
  display: inline-flex; align-items: center; gap: 7px;
}
.srcnote::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sky-2); flex: none;
}

/* Video suresi: oynatma dugmesinin ustune yazi yigmak yerine kose cipi */
.vdur {
  position: absolute; z-index: 5; right: 10px; top: 10px;
  background: rgba(10, 51, 80, .74); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  padding: 3px 8px; border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ---------- 3. HERO ----------
   Ilk ekranda karar icin gereken 4 bilgi: kime, ne, nasil, siradaki adim. */
.hero h1 { text-wrap: balance; }
@media (min-width: 1040px) { .hero h1 { max-width: 15ch; } }
.hero__trust {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.hero__trust li {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px 8px 12px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.hero__trust li::before {
  content: '✓'; color: var(--signal-d); font-weight: 800; font-size: 13px;
}
.hero__langline {
  margin-top: 22px; max-width: 52ch;
  font-size: 14.5px; line-height: 1.6; color: var(--mute);
}
.hero__langline .textlink { min-height: 0; margin-left: 2px; }

/* Hero vurgu: kabul garantisi satiri, sertlestirilmis ton */
.hero h1 em.hero__guarantee {
  font-style: normal; color: var(--navy);
  background: linear-gradient(180deg, transparent 62%, rgba(242, 194, 48, .42) 62%);
  padding-inline: 2px;
}

/* ===== V18 SADE HERO: 3 blok (lede / video / cta), video merkezli =====
   Mobil: dikey sira -> baslik, VIDEO, CTA (video ilk ekranda).
   Masaustu: solda baslik+CTA, sagda tam boy buyuk video. */
.hero__grid { grid-template-areas: "copy" "stage" "cta"; }
.hero__copy  { grid-area: copy; }
.hero__stage { grid-area: stage; }
.hero__cta   { grid-area: cta; }
.hero__cta .cta-note { margin-top: 12px; }
/* ===== HERO ONIZLEME: arka plan video (v3 tarzi) =====
   GECICI PREVIEW ALTYAPISI — karar sonrasi sadelestirilecek.
   Masaustu (>=940px): her zaman acik. Mobil: data-hero-mobile="new" ile acilir. */
.hero__bgvideo {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; display: none;
}
.hero__bgvideo video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.hero__bgoverlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,20,32,.58) 0%, rgba(8,18,29,.5) 40%, rgba(6,14,23,.88) 100%);
}
@media (min-width: 940px) { .hero__bgvideo { display: block; } }

/* ===== Eyebrow bayrak rozeti (v3 hero acilisi ile ayni dil) ===== */
.eyebrow__flag {
  width: 20px; height: 15px; border-radius: 3px; object-fit: cover;
  flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

/* ===== Olgu seridi: cip bicimi (ikon + kisa etiket, kompakt) =====
   Temel (acik) gorunum; video-arka-plan baglaminda asagidaki medya
   sorgulari cam-gorunumlu koyu pill'e ceviriyor. */
.hero__chips {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.hero__chip {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; border-radius: 999px;
  background: rgba(15,86,138,.07); border: 1px solid rgba(15,86,138,.16);
}
.hero__chip-icon {
  flex: none; width: 19px; height: 19px; color: var(--navy);
}
.hero__chip-icon svg { width: 100%; height: 100%; display: block; }
.hero__chip-label {
  font-size: 13px; font-weight: 800; letter-spacing: -.005em;
  line-height: 1.2; color: inherit;
}

/* Mobil/tablet (<940px): sadece data-hero-mobile="new" iken video-arka-plan temasi acilir.
   Varsayilan "old" tamamen dokunulmadan kalir. */
@media (max-width: 939px) {
  .hero[data-hero-mobile="new"] .hero__bgvideo { display: block; }
  .hero[data-hero-mobile="new"] { color: #fff; }
  .hero[data-hero-mobile="new"] .eyebrow { color: var(--signal); }
  .hero[data-hero-mobile="new"] .hero__guarantee { color: var(--signal); background: none; }
  .hero[data-hero-mobile="new"] .hero__desc { color: rgba(255,255,255,.82); }
  .hero[data-hero-mobile="new"] .hero__chip {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28);
    color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .hero[data-hero-mobile="new"] .hero__chip-icon { color: var(--signal); }
  .hero[data-hero-mobile="new"] .textlink { color: var(--signal); }
  .hero[data-hero-mobile="new"] .cta-note { color: rgba(255,255,255,.62); }
}

@media (min-width: 940px) {
  /* MASAUSTU: arka planda tam-bleed video (v3 hero yapisi). Sol %66 baslik/CTA,
     sag %33 dikey/kare rontaj video karti. (mobil dokunulmadi) */
  .hero { padding-block: clamp(120px, 12vw, 168px) clamp(64px, 7vw, 96px); min-height: 660px; }
  .hero__grid {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    grid-template-areas: "copy stage" "cta stage";
    column-gap: clamp(28px, 3.4vw, 48px);
    row-gap: 26px;
    align-items: end;
  }
  .hero h1 { font-size: clamp(44px, 5vw, 74px); }
  .hero__copy { align-self: end; }
  .hero__cta  { align-self: end; }
  /* Dev video: sag kolonu doldurur, cevresindeki sari deko yok. Baslik/CTA alt hizali
     kalirken video biraz daha yukarida dursun diye kendi hizasi ayri: center. */
  .hero__stage { max-width: 420px; margin-inline: 0; align-self: center; }
  .hero__stage::after { display: none; }
  /* Sag CTA blogu: once olgular (cip), sonra CTA. Buton tam genislik ve davetkar. */
  .hero__chips { margin: 0 0 20px; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .hero__chip { padding: 8px 10px; }
  .hero__chip-icon { width: 16px; height: 16px; }
  .hero__chip-label { font-size: 11.5px; white-space: nowrap; }
  .hero__cta .cta-rail--hero { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__cta .cta-rail--hero .btn--primary { width: 100%; text-align: center; font-size: 16px; padding-block: 15px; }
  .hero__cta .cta-rail--hero .textlink { align-self: center; }
  .hero__cta .cta-note { margin-top: 10px; text-align: center; }

  /* Video arka plan uzerinde acik/koyu metin teması (band--deep ile ayni dil) */
  .hero { color: #fff; }
  .hero .eyebrow { color: var(--signal); }
  .hero h1 em.hero__guarantee { color: var(--signal); background: none; padding-inline: 0; }
  .hero__desc { color: rgba(255,255,255,.82); }
  .hero .textlink { color: var(--signal); }
  .hero .textlink:hover { color: #FFD867; }
  .hero .cta-note { color: rgba(255,255,255,.62); }

  /* Sol icerik varyantlari (A/B/C) — sadece karsilastirma icin, karar sonrasi kaldirilacak */
  .hero[data-hero-copy="a"] .hero__chips { display: none; }
  .hero[data-hero-copy="b"] .hero__cta { display: none; }

  /* Video-arka-plan uzerinde cip: cam-gorunumlu koyu pill */
  .hero__chip {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28);
    color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .hero__chip-icon { color: var(--signal); }
}

.cta-rail--hero { align-items: center; }
.cta-rail--hero .btn--primary { flex: 0 0 auto; }
.cta-rail--hero .textlink { flex: 0 0 auto; }

/* ===== NO-BRAINER AVANTAJ BANDI (hero'dan sonra) =====
   5 cekirdek vaat kartta; sayfanin geri kalaninda da bu diller tekrar eder. */
.nb { background: var(--paper); }
.nb__lead {
  text-align: center; font-family: var(--display);
  font-size: clamp(19px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 clamp(16px, 2.4vw, 24px); text-wrap: balance;
}
.nb__lead em {
  font-style: normal; color: var(--navy);
  background: linear-gradient(180deg, transparent 60%, rgba(242, 194, 48, .42) 60%);
  padding-inline: 3px;
}
.nb__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: 1fr;
}
@media (min-width: 560px) { .nb__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 980px) { .nb__grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
.nb__item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
@media (min-width: 980px) {
  .nb__item { flex-direction: column; align-items: flex-start; gap: 8px; padding: 15px; }
}
.nb__icon {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(15,86,138,.08); color: var(--navy);
  display: grid; place-items: center;
}
.nb__icon svg { width: 17px; height: 17px; display: block; }
.nb__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb__v { font-size: 14.5px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.nb__l { font-size: 12px; color: var(--mute); line-height: 1.3; }
@media (min-width: 980px) {
  .nb__v { font-size: 15.5px; }
  .nb__l { font-size: 12.5px; }
}

/* Kompakt vaat seridi (kapanis / koyu zemin): props tek satirda pill'ler */
.nbline {
  list-style: none; margin: clamp(18px, 3vw, 26px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 10px;
}
.nbline li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  padding: 7px 14px 7px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
}
.nbline li::before {
  content: '✓'; color: var(--signal); font-weight: 900; font-size: 13px;
}

/* ===== V18 HERO VIDEO: karemsi cerceve + sahne animasyonu + hover etiketi =====
   Yeni kaynak yatay (16:9) roportaj; kemer yerine kareye yakin yuvarlak cerceve. */
.hero__frame.hero__frame--sq {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hero__frame.hero__frame--sq video { object-position: 50% 50%; }
/* Kesikli altin deko: karemsi cerceveye uyumlu yuvarlak dikdortgen */
.hero__stage::after { border-radius: calc(var(--r-lg) + 8px); }

/* Giris: baslik alttan gelirken video ~180ms sonra olceklenerek belirir */
@media (prefers-reduced-motion: no-preference) {
  .hero__stage.is-in .hero__frame--sq { animation: heroVidIn .52s var(--ease) .18s both; }
}
@keyframes heroVidIn {
  from { transform: scale(.93); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ===== BASLIK FONTU: hero'daki ince/sik gorunum site geneline =====
   Karar verildi, kalici: tum h1/h2/h3 (kart basliklari, asama basliklari
   dahil) hero h1 ile ayni agirlik/izlenimi (weight 400, siki letter-spacing)
   alir. Once bir onizleme panelinden secilebiliyordu; panel kaldirildi,
   <body data-heading-style="hero"> artik HTML'de sabit. */
body[data-heading-style="hero"] h1,
body[data-heading-style="hero"] h2,
body[data-heading-style="hero"] h3 {
  font-weight: 400 !important; letter-spacing: -.035em !important;
}

/* Sessiz on-izleme modu (yalniz masaustu): kontrol katmani gizli,
   uzerine gelince "sesli izle" etiketi belirir, imlec pointer. */
.hero__frame--sq.is-preview { cursor: pointer; }
.hero__frame--sq.is-preview .vctrl { display: none !important; }
.hero__frame--sq.is-preview .vplay { background: linear-gradient(180deg, rgba(10,51,80,.10) 0%, rgba(10,51,80,.42) 100%); }
@media (hover: hover) {
  .hero__frame--sq .vplay__label {
    opacity: 0; transform: translateY(6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .hero__frame--sq:hover .vplay__label,
  .hero__frame--sq:focus-within .vplay__label { opacity: 1; transform: none; }
}

/* Videonun yazili metni (transkript) */
.hero__transcript { margin-top: 14px; }
.hero__transcript summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  list-style: none;
}
.hero__transcript summary::-webkit-details-marker { display: none; }
.hero__transcript summary::before { content: '📝'; font-size: 13px; }
.hero__transcript[open] summary { margin-bottom: 8px; }
.hero__transcript-body {
  font-size: 13.5px; line-height: 1.65; color: var(--mute);
  max-width: 52ch;
}
.hero__transcript-body p + p { margin-top: 8px; }

/* ---------- 4. SEGMENT: "SEN HANGI ASAMADASIN?" ---------- */
.segments { display: grid; gap: 14px; }
@media (min-width: 768px)  { .segments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.seg {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.seg:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sky-2); }
.seg__tag {
  align-self: flex-start;
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); background: var(--sky); border-radius: 999px; padding: 5px 11px;
}
.seg h3 { font-size: 17px; line-height: 1.3; }
.seg__d { font-size: 14.5px; line-height: 1.6; color: var(--mute); }
.seg .textlink { margin-top: auto; }

/* ---------- 4b. TÜRKİYE ↔ ALMANYA KARSILASTIRMA (yukari-asagi) ----------
   Neden Almanya videolarindan sonra. Palet tamamen V16 tokenlari:
   Turkiye serit notr/kapali, Almanya serit vurgulu koyu + altin sinyal. */
/* Karsilastirma ustu carpici baslik: YKS + Bogazici mesaji */
.cmp__lead {
  max-width: 940px; margin: clamp(30px, 4.5vw, 48px) auto 0;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(21px, 3vw, 31px); line-height: 1.18; letter-spacing: -.02em;
  color: var(--ink); text-wrap: balance;
}
.cmp__lead em {
  font-style: normal; color: var(--navy);
  background: linear-gradient(180deg, transparent 60%, rgba(242, 194, 48, .42) 60%);
  padding-inline: 3px;
}
.cmp {
  margin-top: clamp(18px, 2.6vw, 26px);
  display: grid; gap: 0;
  max-width: 940px; margin-inline: auto;
}
.cmp__row { border-radius: var(--r-lg); padding: clamp(22px, 3.4vw, 30px); }
.cmp__row--tr {
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.cmp__row--de {
  position: relative; overflow: hidden;
  background: var(--deep); color: var(--white);
  box-shadow: var(--shadow-md);
}
/* Almanya seridinin ustunde ince bayrak cizgisi: siyah / kirmizi / altin */
.cmp__row--de::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg,
    #1a1a1a 0%, #1a1a1a 33.33%,
    #D0111B 33.33%, #D0111B 66.66%,
    var(--signal) 66.66%, var(--signal) 100%);
}
.cmp__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cmp__flag { font-size: 26px; line-height: 1; }
.cmp__title { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.2; letter-spacing: -.02em; }
.cmp__row--tr .cmp__title { color: var(--ink); }
.cmp__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cmp__list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; line-height: 1.5;
}
.cmp__row--tr .cmp__list li { color: var(--mute); }
.cmp__row--de .cmp__list li { color: rgba(255, 255, 255, .92); }
.cmp__mark { flex: 0 0 auto; font-weight: 800; font-size: 15px; margin-top: 1px; }
.cmp__mark--x { color: #98A4AE; }              /* notr slate: olumsuz, palet disi kirmizi YOK */
.cmp__mark--v { color: var(--signal); }        /* altin sinyal = avantaj */
/* Ortadaki "vs" ayirici */
.cmp__vs {
  justify-self: center; align-self: center;
  margin: -14px 0; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--signal); color: var(--deep);
  font-weight: 800; font-size: 14px; letter-spacing: .02em;
  box-shadow: 0 6px 18px -6px rgba(10, 51, 80, .5), 0 0 0 5px var(--paper);
}
@media (min-width: 760px) {
  .cmp__list { grid-template-columns: 1fr 1fr; gap: 11px 26px; }
}
/* Desktop: iki kart yan yana. Karsilastirma bu sekilde daha guclu okunuyor;
   ortadaki "vs" rozeti iki kartin arasindaki bosluga oturur. */
@media (min-width: 880px) {
  .cmp {
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 2.4vw, 30px);
    /* stretch degil: Turkiye (4 madde) ve Almanya (6 madde) listeleri
       farkli uzunlukta, stretch kisa karti gereksiz bos alanla sisiriyordu */
    align-items: start;
    position: relative;
    max-width: 1080px;
  }
  .cmp__row { display: flex; flex-direction: column; }
  /* Yan yana kartlarda liste tek kolona doner (kart daraldigi icin) */
  .cmp__list { grid-template-columns: 1fr; gap: 12px; }
  /* "vs" rozeti akistan cikip iki kartin ortasina, dikey merkeze oturur */
  .cmp__vs {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 52px; height: 52px; font-size: 15px;
  }
}

/* ---------- KABUL SERIDI (universite logolari, akan marquee) ----------
   Karsilastirmanin hemen altinda kanit: "Almanya daha iyi" dedikten sonra
   ogrencilerin kabul aldigi gercek universiteler serit halinde akiyor,
   altinda tek net CTA -> form. */
.uni-strip {
  max-width: 1080px; margin: clamp(30px, 4.5vw, 46px) auto 0;
  text-align: center;
}
.uni-strip__lead {
  font-family: var(--display);
  font-size: clamp(18px, 2.3vw, 24px); line-height: 1.25; letter-spacing: -.01em;
  color: var(--ink); text-wrap: balance;
  margin-bottom: clamp(18px, 2.6vw, 26px);
}
.uni-strip__lead em {
  font-style: normal; color: var(--navy);
  background: linear-gradient(180deg, transparent 60%, rgba(242, 194, 48, .42) 60%);
  padding-inline: 3px;
}
/* Serit: uctan uca BEYAZ zemin (logolar kutu icinde degil, dogrudan beyazin
   uzerinde akiyor; beyaz-zeminli logolar da boylece kaynasiyor).
   body { overflow-x:hidden } oldugu icin full-bleed guvenli. */
.logostrip {
  position: relative; overflow: hidden;
  background: var(--white);
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(28px, 3.6vw, 46px);
  border-block: 1px solid var(--line);
}
.logostrip__track {
  --logo-gap: clamp(40px, 5.4vw, 72px);
  display: flex; align-items: center; width: max-content; gap: var(--logo-gap);
  animation: uni-logoscroll 46s linear infinite;
  will-change: transform;
}
.logostrip:hover .logostrip__track { animation-play-state: paused; }
/* Logolar kutu/kart YOK: dogrudan zemin uzerinde akiyor */
.logostrip__item {
  flex: 0 0 auto;
  width: clamp(84px, 9.5vw, 116px); height: clamp(72px, 8vw, 96px);
  display: grid; place-items: center;
}
.logostrip__item img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
@keyframes uni-logoscroll {
  from { transform: translateX(0); }
  /* yarim gap duzeltmesi: iki kopya sinirinda kesintisiz dongu */
  to   { transform: translateX(calc(-50% - var(--logo-gap) / 2)); }
}
.uni-strip__cta { margin-top: clamp(22px, 3.2vw, 32px); }
.btn--lg { min-height: 56px; padding: 16px 34px; font-size: 17px; }
.uni-strip__note {
  margin-top: 12px; font-size: 13.5px; color: var(--mute); line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .logostrip__track { animation: none; }
}

/* ---------- 5. SIRALI GIRIS (hero) ----------
   Baslik once, aciklama sonra, CTA en son. Yalnizca gecikme;
   gizleme kurali V16'daki .reveal sisteminden geliyor. */
.reveal[data-seq="1"] { --sq: calc(var(--mo-seq) * 0); }
.reveal[data-seq="2"] { --sq: calc(var(--mo-seq) * 1); }
.reveal[data-seq="3"] { --sq: calc(var(--mo-seq) * 2); }
.reveal[data-seq="4"] { --sq: calc(var(--mo-seq) * 3); }
.reveal[data-seq="5"] { --sq: calc(var(--mo-seq) * 4); }
.reveal[data-seq="6"] { --sq: calc(var(--mo-seq) * 5); }
.reveal[data-seq].is-in {
  transition: opacity var(--mo-head) var(--ease) var(--sq, 0ms),
              transform var(--mo-head) var(--ease) var(--sq, 0ms);
}

/* ---------- 6. USTTEKI SABIT BARDA AKTIF BOLUM + ILERLEME ----------
   Ayri ikinci bir navigasyon serit EKLENMEDI; var olan bar
   kullanicinin sayfadaki yerini gosterir hale getirildi. */
.topbar__nav a[aria-current="true"] {
  position: relative;
  color: var(--navy); background: var(--sky);
}
.topbar__nav a[aria-current="true"]::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    #1a1a1a 0%, #1a1a1a 33.33%,
    #D0111B 33.33%, #D0111B 66.66%,
    var(--signal) 66.66%, var(--signal) 100%);
}
.topbar__prog {
  position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px;
  border-radius: 2px; background: var(--line); overflow: hidden;
  opacity: 0; transition: opacity .3s var(--ease);
  pointer-events: none;
}
.topbar[data-shrunk="true"] .topbar__prog { opacity: 1; }
.topbar__prog span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--navy), var(--signal));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .18s linear;
}
@media (max-width: 1039px) { .topbar__prog { display: none; } }

/* ---------- 7. SUREC: DORT ASAMALI TIMELINE ---------- */
@media (min-width: 768px) {
  /* Ray: bos hat + scroll ile dolan sari hat */
  .roadmap--tl { padding-top: 34px; }
  .roadmap--tl::before { display: none; }          /* V16'nin statik cizgisi */
  .roadmap__rail {
    position: absolute; left: 12.5%; right: 12.5%; top: 7px; height: 3px;
    border-radius: 3px; background: var(--tl-line); overflow: hidden;
  }
  .roadmap__fill {
    display: block; height: 100%; width: 100%;
    background: linear-gradient(90deg, var(--navy), var(--signal));
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .45s var(--ease);
  }

  /* Asama durumlari: gecilen / aktif / ileride */
  .roadmap--tl .rstep { transition: opacity .4s var(--ease); }
  .roadmap--tl .rstep[data-tl="future"] { opacity: .55; }
  .roadmap--tl .rstep[data-tl="past"] { opacity: .92; }
  .roadmap--tl .rstep::after {
    background: var(--white); border-color: var(--tl-line);
    transition: background-color .3s var(--ease), border-color .3s var(--ease),
                transform .3s var(--ease);
  }
  .roadmap--tl .rstep[data-tl="past"]::after { border-color: var(--navy); background: var(--navy); }
  .roadmap--tl .rstep[data-tl="active"]::after {
    border-color: var(--signal); background: var(--signal);
    transform: translate(-50%, 0) scale(1.25);
  }
  .roadmap--tl .rstep__card {
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  .roadmap--tl .rstep[data-tl="active"] .rstep__card {
    border-color: var(--signal); box-shadow: var(--shadow-md); transform: translateY(-3px);
  }

  /* Ilk gorunum: numara + baslik + tek satir. Gerisi panelde. */
  .rstep__more {
    margin-top: 14px; align-self: flex-start;
    background: none; border: 0; padding: 8px 0; min-height: 40px;
    font-family: var(--body); font-size: 14px; font-weight: 700;
    color: var(--navy); cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
  }
  .rstep__more::after {
    content: '+'; font-size: 16px; font-weight: 800; line-height: 1;
    transition: transform .26s var(--ease);
  }
  .rstep__more[aria-expanded="true"]::after { transform: rotate(45deg); }
  .rstep__more:hover { color: var(--deep); }
  .rstep__card { display: flex; flex-direction: column; }
  /* Acilma: yukseklik 0fr -> 1fr, icerik bir anda belirmiyor */
  .rstep__det {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows .34s var(--ease), opacity .28s var(--ease),
                visibility 0s linear .34s;
    opacity: 0;
  }
  .rstep__det[data-open="true"] {
    grid-template-rows: 1fr; visibility: visible; opacity: 1;
    transition: grid-template-rows .34s var(--ease), opacity .3s var(--ease) .06s, visibility 0s;
  }
  .rstep__detin { overflow: hidden; min-height: 0; }
  /* Panel icinde mobil-only bilgiler de gorunur (V16'da masaustunde gizliydi) */
  .rstep__det .rstep__m { display: block; }
  /* Ok metnin hemen ardinda kalsin: satir kirilinca sagda asili kalmiyor */
  .rstep__det .rstep__vid {
    display: block; margin-top: 12px;
    font-size: 13.5px; font-weight: 700; color: var(--navy); text-decoration: none;
  }
  .rstep__det .rstep__vid::after { content: ' →'; white-space: nowrap; }
  .rstep__det .rstep__vid:hover { color: var(--deep); }

  /* Bir kart acilinca digerleri bosuna uzamasin (brief md. 17) */
  .roadmap--tl { align-items: start; }

  /* ---------- 7b. ÖĞRENCİ HİKAYE KARTLARI (masaustu) ----------
     4 kart her zaman TAM acikti (Baslangic + Bugun sutunlari), bolum
     gereginden uzun duruyordu. 767px altindaki ozet/buton deseni
     (mobile-ui.js) buraya da tasindi: kisa ozet + istege bagli detay.
     Ayni [data-more] dugmesi kullanilir, genislik kontrolu MQ.matches
     ile ag-v17.js'te yapilir; iki mantik carpismaz. */
  .tcard__ozet { display: grid; gap: 6px; padding: 12px 18px 0; }
  .tcard__ozet p {
    font-size: 13.5px; line-height: 1.5; color: var(--mute);
    display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: baseline;
  }
  .tcard__ozet span {
    font-size: 10px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mute);
  }
  .tcard__more {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 12px 18px 18px; padding: 0; background: none; border: 0; cursor: pointer;
    font-family: var(--body); font-size: 13.5px; font-weight: 700; color: var(--navy);
  }
  .tcard__more:hover { color: var(--deep); }
  .tcard__more::after {
    content: '+'; font-size: 15px; font-weight: 800; line-height: 1;
    transition: transform .22s var(--ease);
  }
  .tcard__more[aria-expanded="true"]::after { transform: rotate(45deg); }
  .tcard__body { display: none; }
  .tcard[data-open="true"] .tcard__body { display: grid; }
  .tcard[data-open="true"] .tcard__ozet { display: none; }
}

/* ---------- 8. ASAMA VIDEOLARI: ACIK ZEMIN + ONE CIKAN VIDEO ----------
   Brief md. 20: uzun bolumlerde kesintisiz koyu lacivert kullanma.
   #asamalar masaustunde acik zemine tasindi; her asama kendi
   yuzeyinde duruyor. MOBILDE koyu zemin AYNEN korunuyor
   (ag-v16-mobile.css icindeki kural). */
@media (min-width: 768px) {
  #asamalar.band--deep { background: var(--paper); color: var(--ink); }
  #asamalar .title,
  #asamalar .stage__head h3 { color: var(--ink); }
  #asamalar .lead,
  #asamalar .stage__desc { color: var(--mute); }
  #asamalar .eyebrow { color: var(--navy); }
  #asamalar .stage__n { color: var(--navy); }
  #asamalar .vcard__stage { border-color: var(--sky-2); }
  #asamalar .vcard__title { color: var(--ink); }
  #asamalar .vcard__sub { color: var(--mute); }
  #asamalar .btn--ghost { color: var(--navy); border-color: var(--sky-2); }
  #asamalar :focus-visible { outline-color: var(--navy); }

  /* Her asama ayri bir yuzey: ton degisimi bolum gecisini gosterir */
  #asamalar .stage {
    border-radius: var(--r-xl);
    padding: clamp(26px, 3.2vw, 40px);
    margin-top: clamp(22px, 2.6vw, 32px) !important;
    border: 1px solid var(--line);
  }
  #asama-1 { background: var(--white); }
  #asama-2 { background: var(--sky); border-color: var(--sky-2) !important; }
  #asama-3 { background: var(--white); }

  /* Asama basligi: numara belirgin, baslik yaninda */
  #asamalar .stage__head { align-items: baseline; }
  #asamalar .stage__desc { max-width: 68ch; }
}

@media (min-width: 1040px) {
  /* Uc video AYNI SATIRDA, ayni kart tipinde; ama biri "vitrinde".
     Carousel mantigi: hakim kart genis durur, digerleri yaninda
     gorunmeye devam eder (var olduklari belli olur). Uzerine
     gelince / tiklaninca vitrin o karta kayar.
     Once denenen "1 buyuk + 2 minik yatay kart" duzeni ikincil
     videolari kullanilamayacak kadar kucultuyordu, geri alindi. */
  #asamalar .vidrow {
    display: flex; grid-template-columns: none;
    gap: 20px; align-items: flex-start;
  }
  #asamalar .vidrow > .vcard {
    flex: 0 1 26.5%; min-width: 0; opacity: .84;
    transition: flex-basis .42s var(--ease), opacity .32s var(--ease);
  }
  #asamalar .vidrow > .vcard[data-feat="true"] { flex-basis: 43%; opacity: 1; }
  #asamalar .vidrow > .vcard[data-feat="true"] .vcard__title { font-size: 17px; }
  #asamalar .vidrow > .vcard[data-feat="true"] .vcard__stage {
    box-shadow: var(--shadow-lg); border-color: var(--sky-2);
  }

  /* Video uzerinde tek bilgi kalir: sure. Kose cipi olarak. */
  #asamalar .vplay__label {
    left: auto; right: 10px; top: 10px; bottom: auto; padding: 3px 8px;
    background: rgba(10, 51, 80, .74); border-radius: 999px;
    font-size: 11.5px; font-weight: 700; text-shadow: none;
  }

  /* Kare + contain sistemi bilerek korundu: videolarda gomulu
     altyazi var, hicbir kadrajda kirpma yok. */
  #asamalar .vidrow > * .vcard__stage {
    width: 100%; max-width: none; margin-inline: 0;
  }
  /* Vitrinde OLMAYAN kartlar: hafif kucuk oynat ikonu, ayni okunurluk */
  #asamalar .vidrow > .vcard { }
  #asamalar .vidrow > .vcard .vcard__title { font-size: 15.5px; }
  #asamalar .vidrow > .vcard .vcard__sub { font-size: 13.5px; }
  #asamalar .vidrow > .vcard[data-feat="false"] .vplay__ring { transform: scale(.88); }
  #asamalar .vidrow > .vcard[data-feat="false"] .vplay:hover .vplay__ring { transform: scale(.95); }
}

/* ---------- 8b. TOPLULUK VIDEOSU: REELS CERCEVESI ----------
   Kare cercevede 9/16'lik dikey video kucucuk kaliyor, iki yanda
   koyu bant olusuyordu. Cerceve videonun kendi orani (9/16) yapildi:
   kirpma yok, bant yok, telefon reels'i gibi duruyor.
   Kaynak dosya 720x1280 = tam 9/16. */
.brandsplit__video {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}
/* Cerceve videonun oraniyla ayni oldugu icin contain kirpmadan doldurur */
.brandsplit__video > video { object-fit: contain; }
@media (min-width: 940px) {
  .brandsplit__video { max-width: 390px; margin-inline: 0; }
  /* Medya kolonu ust hizada dursun: yanindaki uzun metin kolonu
     yuzunden video ortada asili kalmiyor. */
  .brandsplit { align-items: start; }
  .brandsplit__copy { padding-top: 4px; }
}
.brandsplit__cap { max-width: 46ch; }

/* Bolum icindeki ogelerin sirali girisi V16'nin .reveal-item
   sistemine devredildi (ag-v16.js STAGGER listesi). */

/* ---------- 9. UNIVERSITE KARTI: TEK ANA BUTON + SADE BAGLANTI ---------- */
.uni__more { display: inline-flex; }          /* V16'da masaustunde gizliydi */
.uni__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.uni__acts .btn { width: auto; flex: 1 1 auto; }
.uni__acts .textlink { flex: 0 0 auto; }
/* Panel KAPALI baslar: [hidden] her zaman kazanmali, bu yuzden
   display kurali yalnizca :not([hidden]) icinde. */
.uni__det:not([hidden]) {
  display: grid; gap: 6px;
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px;
  font-size: 13.5px; color: var(--mute);
}
.uni__det b { color: var(--ink); }
.uni { transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease); }
@media (min-width: 1040px) {
  .uni:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sky-2); }
}

/* ---------- 9b. SSS: "TUM SORULARI GOR" (masaustu) ---------- */
.faqmore {
  margin: 18px auto 0; display: block;
  background: var(--white); border: 1px solid var(--sky-2); border-radius: 999px;
  min-height: 48px; padding: 12px 26px;
  font-family: var(--body); font-size: 15px; font-weight: 700; color: var(--navy);
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.faqmore:hover { border-color: var(--navy); transform: translateY(-2px); }
.faqmore[hidden] { display: none; }

/* ---------- 10. BOLUM GECISLERI ----------
   Yeni bir ana bolume girildigi baslik + zemin + bosluk ile anlasilsin. */
@media (min-width: 768px) {
  .band .head .title { position: relative; }
  .band--white { background: var(--white); }
}

/* ---------- 11. HAREKET: OLCULU HOVER + AZALTILMIS HAREKET ---------- */
@media (hover: hover) and (min-width: 768px) {
  .vplay:hover .vplay__ring { transform: scale(1.09); }
  .btn--primary:hover { box-shadow: var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal[data-seq].is-in { transition-delay: 0ms !important; }
  .roadmap__fill { transition: none !important; }
  .rstep__det { transition: none !important; }
  #asamalar .vidrow > .vcard { transition: none !important; }
  .hero__frame { transform: none !important; }
  .seg:hover, .uni:hover { transform: none !important; }
  .textlink:hover::after { transform: none !important; }
  .rstep__det > * { animation: none !important; }
}

/* ---------- 12. MINI MALIYET HESABI (kompakt, no-brainer) ----------
   Tek cumle soru + slider + tek satir "Turkiye -> Almanya" kiyasi.
   Almanya net kazanan (koyu kart + altin "neredeyse ucretsiz" rozeti). */
.costcalc {
  margin: clamp(22px, 3vw, 32px) 0 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: clamp(18px, 2.6vw, 24px);
}
.costcalc__q {
  font-size: clamp(15px, 1.9vw, 17px); line-height: 1.4; font-weight: 600; color: var(--ink);
}
.costcalc__pill { font-weight: 800; color: var(--navy); white-space: nowrap; }
.costcalc__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: 12px 0 2px; border-radius: 999px;
  background: var(--sky-2);
  background-image: linear-gradient(var(--navy), var(--navy));
  background-size: 33% 100%; background-repeat: no-repeat; /* JS canli gunceller */
  cursor: pointer;
}
.costcalc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--navy); box-shadow: var(--shadow-sm);
}
.costcalc__range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--navy);
}
.costcalc__range:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.costcalc__vs {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  gap: clamp(8px, 1.6vw, 14px); margin-top: clamp(14px, 2vw, 18px);
}
.costcalc__cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--r-md);
}
.costcalc__cell--tr { background: var(--paper); }
.costcalc__cell--de {
  position: relative; overflow: hidden;
  background: var(--deep); border-color: var(--deep); color: #fff;
}
.costcalc__cell--de::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--signal));
}
.costcalc__lbl { font-size: 12px; font-weight: 700; color: var(--mute); }
.costcalc__cell--de .costcalc__lbl { color: rgba(255, 255, 255, .78); }
.costcalc__amt {
  font-family: var(--display); font-size: clamp(21px, 3vw, 28px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--ink);
}
.costcalc__cell--de .costcalc__amt { color: #fff; }
.costcalc__win {
  margin-top: 5px; align-self: flex-start;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: var(--deep); background: var(--signal);
  padding: 3px 9px; border-radius: 999px;
}
.costcalc__arrow { align-self: center; font-size: 22px; font-weight: 800; color: var(--navy); }

.costcalc__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; margin-top: clamp(14px, 2vw, 18px);
}
.costcalc__note { flex: 1 1 240px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--mute); }
.costcalc__foot .btn { flex: 0 0 auto; }

@media (max-width: 520px) {
  .costcalc__vs { grid-template-columns: 1fr; }
  .costcalc__arrow { transform: rotate(90deg); justify-self: center; }
}