/* ==========================================================================
   VU BOX — ana stil (2026-10-16 sıfırdan yeniden tasarım)
   Dengeli ton: koyu (header, hero, dersler, yorumlar, kapanış/footer) ⇄ açık bölümler.
   Tek aile Onest; başlıklar 600, Her Kelimenin İlk Harfi Büyük, ölçülü boyut.
   İçerik 1400px (dersler kenardan kenara). Köşe yarıçapı her yerde 6px.
   ========================================================================== */

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokenlar ------------------------------------------------------------ */
:root {
  --bg: #ffffff;
  --bg-2: #f2f2f0;
  --metin: #141414;
  --metin-2: #5f5e59;
  --soluk: #8c8b85;
  --cizgi: rgba(20, 20, 20, .08);
  --cizgi-guclu: rgba(20, 20, 20, .14);

  --koyu: #121212;
  --koyu-2: #1d1d1d;
  --koyu-3: #262626;
  --acik: #f5f5f2;
  --acik-2: rgba(245, 245, 242, .68);
  --soluk-koyu: #8a8984;
  --cizgi-koyu: rgba(255, 255, 255, .08);
  --cizgi-koyu-guclu: rgba(255, 255, 255, .18);

  --f-govde: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 6px;
  --kap: 1400px;
  --yan: clamp(16px, 3.4vw, 48px);
  --ust: 76px;
  --bolum: clamp(80px, 9vw, 128px);
}

/* --- Temel --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--ust); }
body { margin: 0; background: var(--bg); color: var(--metin); font-family: var(--f-govde); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, dl, dd, ul, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: #dedcd5; color: var(--metin); }
.ust ::selection, .hero ::selection, .bolum--koyu ::selection, .kapanis ::selection, .alt ::selection { background: rgba(255, 255, 255, .2); color: #fff; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.atla { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--metin); color: var(--acik); padding: .6rem 1rem; border-radius: var(--r); }
.atla:focus { top: 16px; }

.kap { width: 100%; max-width: calc(var(--kap) + 2 * var(--yan)); margin-inline: auto; padding-inline: var(--yan); }
.ikon { width: 1em; height: 1em; flex: none; }
.g-logo { width: 24px; height: 24px; flex: none; }

/* --- Reveal (TEK sözleşme) ------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* --- Buton ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .75rem 1.35rem; border-radius: var(--r); border: 1px solid transparent;
  font-size: .9375rem; font-weight: 600; white-space: nowrap;
  transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn .ikon { width: 1.05em; height: 1.05em; }
.btn__ok { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.btn:hover .btn__ok { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--sm { min-height: 42px; padding: .55rem 1.1rem; font-size: .875rem; }
.btn--koyu { background: var(--metin); color: var(--acik); }
.btn--koyu:hover { background: #333; }
.btn--acik { background: var(--acik); color: var(--metin); }
.btn--acik:hover { background: #fff; }
.btn--cizgi { border-color: var(--metin); color: var(--metin); }
.btn--cizgi-acik { border-color: var(--cizgi-koyu-guclu); color: var(--acik); }
.btn--cizgi-acik:hover { border-color: var(--acik); }


/* --- Bölüm başlığı (tüm H2'ler) ------------------------------------------- */
.bas { max-width: 60rem; }
.bas__h { font-weight: 600; font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.15; letter-spacing: -.025em; }
.bas__h span { display: inline; }
.bas__soluk { color: var(--soluk); }
.bas__p { margin-top: 1rem; max-width: 34rem; color: var(--metin-2); }
.bolum--koyu .bas__soluk { color: var(--soluk-koyu); }
.bolum--koyu .bas__p { color: var(--acik-2); }

.bolum { padding-block: var(--bolum); }
.bolum--ikinci { background: var(--bg-2); }
.bolum--koyu { background: var(--koyu); color: var(--acik); }

/* Başlık solda | metin sağda */
.iki-kolon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(40px, 6vw, 96px); align-items: start; }   /* başlık ve metin üstten hizalı */
.iki-kolon__sag { color: var(--metin-2); max-width: 36rem; }
.iki-kolon__sag p { color: var(--metin-2); }

/* Siyah kutu + beyaz ikon (detay defteri) */
.ikon-kutu { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); background: var(--metin); color: #fff; }
.ikon-kutu .ikon { width: 18px; height: 18px; }

.yildizlar { display: inline-flex; gap: 3px; color: #f2b01e; }
.yildizlar .ikon { width: 16px; height: 16px; }
.yildizlar--kucuk .ikon { width: 12px; height: 12px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.ust {
  position: sticky; top: 0; z-index: 50; margin-bottom: calc(-1 * var(--ust)); color: var(--acik);
  background: transparent linear-gradient(rgba(18, 18, 18, .6), rgba(18, 18, 18, 0));
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Header İletişim düğmesi hap biçiminde (2026-10-19, kullanıcı isteği; 6px kuralının tek istisnası) */
.ust__ic > .btn { border-radius: 999px; padding-inline: 1.5rem; font-weight: 600; }
.ust.is-kaydi { background-color: var(--koyu); box-shadow: 0 1px 0 var(--cizgi-koyu); }
.ust__ic { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--ust); }
.ust__logo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.ust__logo img { width: 104px; height: auto; }
.ust__menu-dugme { display: grid; width: 44px; height: 44px; place-items: center; margin-left: -10px; }
.ust__menu-dugme .ikon { width: 22px; height: 22px; }

/* Menü düğmesi: açıkken çarpıya döner */
.ust__menu-dugme > span { grid-area: 1 / 1; display: grid; }
.ust__kapat, .ust__menu-dugme[aria-expanded="true"] .ust__ac { display: none !important; }
.ust__menu-dugme[aria-expanded="true"] .ust__kapat { display: grid !important; }
.ust.is-menu { background-color: var(--koyu); box-shadow: 0 1px 0 var(--cizgi-koyu); }

/* Mega menü — header'ın altından açılan koyu panel (Varm Up düzeni) */
.mega { position: fixed; inset: var(--ust) 0 0; z-index: -1; }
.mega[hidden] { display: none; }
.mega__perde { position: absolute; inset: 0; background: rgba(18, 18, 18, .45); opacity: 0; transition: opacity .35s var(--ease); }
.mega__panel { position: relative; max-height: 100%; overflow-y: auto; background: #1d1d1d; border-top: 1px solid var(--cizgi-koyu); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); transform: translateY(-12px); opacity: 0; transition: transform .35s var(--ease), opacity .35s var(--ease); }
.mega.is-acik .mega__perde, .mega.is-acik .mega__panel { opacity: 1; }
.mega.is-acik .mega__panel { transform: none; }
.mega__sutunlar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.5rem; padding-top: 28px; }
.mega__etiket { margin-bottom: 1.25rem; font-size: .75rem; color: rgba(244, 244, 241, .42); }
.mega__sutunlar ul { display: flex; flex-direction: column; gap: 1rem; }
.mega__link { display: inline-flex; align-items: center; gap: .65rem; font-size: .875rem; font-weight: 700; text-transform: uppercase; color: var(--acik); transition: color .18s var(--ease); }
.mega__link:hover, .mega__link:focus-visible { color: #fff; }
.mega__ikon { flex: none; width: 18px; height: 18px; color: rgba(244, 244, 241, .8); transition: color .18s var(--ease); }
.mega__link:hover .mega__ikon { color: var(--acik); }
.mega__alt { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap; margin-top: 40px; padding-block: 24px 28px; border-top: 1px solid var(--cizgi-koyu); font-size: .875rem; }
.mega__bilgi { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; color: rgba(244, 244, 241, .6); }
.mega__bilgi a, .mega__durum { display: inline-flex; align-items: center; gap: .5rem; transition: color .18s var(--ease); }
.mega__bilgi a:hover { color: var(--acik); }
.mega__bilgi .ikon { width: 14px; height: 14px; }
.mega__tel { font-weight: 600; color: var(--acik); font-variant-numeric: tabular-nums; }
.mega__gorsel { position: relative; grid-column: 4 / -1; min-height: 240px; overflow: hidden; border-radius: var(--r); background: var(--koyu-2); }
.mega__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega__gorsel span { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: var(--r); background: var(--acik); color: var(--metin); font-size: .875rem; font-weight: 600; }
.mega__gorsel svg { width: 14px; height: 14px; }
.mega__sosyal { display: flex; gap: .5rem; }
.mega__sosyal a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r); border: 1px solid var(--cizgi-koyu-guclu); transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.mega__sosyal a:hover { background: var(--acik); color: var(--metin); border-color: var(--acik); }
.mega__sosyal .ikon { width: 16px; height: 16px; }

/* ==========================================================================
   HERO — tam ekran görsel slider (includes/hero-tam.php)
   ========================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--koyu); color: var(--acik); text-align: center; }
.hero__ic { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: clamp(72px, 9vw, 120px); }
.hero__h { font-weight: 600; font-size: clamp(2.5rem, 4.4vw, 3.75rem); line-height: 1.08; letter-spacing: -.035em; max-width: 18ch; }
.hero__soluk { color: var(--soluk-koyu); }
.js .hero__h span { display: inline-block; animation: hero-giris .9s var(--ease) both; }
.js .hero__h .hero__soluk { animation-delay: .08s; }
@keyframes hero-giris { from { transform: translateY(16px); } }
.hero__p { margin-top: 1.25rem; max-width: 34rem; font-size: 1.0625rem; color: var(--acik-2); }
.hero__dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }

.hs { --hs-sure: 6s; display: flex; min-height: 100svh; text-align: left; }   /* header şeffaf, slider'ın üstünde */
.hs__gorseller { position: absolute; inset: 0; z-index: 0; background: var(--koyu); }
.hs__slayt { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; transition: opacity 1.2s var(--ease); }
.hs__slayt.is-aktif { opacity: 1; }
.hs__slayt img { width: 100%; height: 100%; object-fit: cover; }
.hs__perde { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hs__ic { position: relative; z-index: 2; display: flex; width: 100%; padding-block: calc(var(--ust) + clamp(48px, 6vw, 88px)) 96px; } /* altta WhatsApp düğmesine yer */
.hs .hero__soluk { color: rgba(255, 255, 255, .62); }
.hs .hero__p { color: rgba(255, 255, 255, .82); }
.hs .hero__dugmeler { justify-content: flex-start; }
/* ilerleme dolgusu: kök .is-oynuyor olunca aktif öğede baştan başlar */
@keyframes hs-dol { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Sol altta metin + çizgiler, sağ altta "Sıradaki" kartı; uzaklaşarak geçiş */
.hs .hs__perde { background: linear-gradient(90deg, rgba(12,12,12,.8), rgba(12,12,12,.3) 55%, rgba(12,12,12,.05)), linear-gradient(transparent 50%, rgba(12,12,12,.7)); }
.hs .hs__slayt img { transform: scale(1.15); transition: transform 1.8s var(--ease); }
.hs .hs__slayt.is-aktif img { transform: scale(1); }
.hs .hs__ic { align-items: flex-end; justify-content: space-between; gap: 3rem; }
.hs__cizgiler { display: flex; gap: .5rem; margin-top: 2.5rem; }
.hs__cizgiler button { position: relative; width: 44px; height: 32px; }
.hs__cizgiler i { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.hs__cizgiler i::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hs.is-oynuyor .hs__cizgiler .is-aktif i::after { animation: hs-dol var(--hs-sure) linear forwards; }
.hs__sira { position: relative; flex: 0 0 auto; display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 1rem; width: 320px; padding: 8px 1rem 8px 8px; overflow: hidden; text-align: left; border-radius: var(--r); background: rgba(18,18,18,.82); border: 1px solid rgba(255,255,255,.14); color: #fff; transition: border-color .18s var(--ease); }
.hs__sira:hover { border-color: rgba(255,255,255,.4); }
.hs__sira img { width: 128px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.hs__sira span { display: flex; flex-direction: column; gap: .2rem; }
.hs__sira small { font-size: .75rem; color: rgba(255,255,255,.6); }
.hs__sira b { font-size: 1rem; font-weight: 600; }
.hs__sira i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; transform: scaleX(0); transform-origin: left; }
.hs.is-oynuyor .hs__sira i { animation: hs-dol var(--hs-sure) linear forwards; }


/* ==========================================================================
   HAKKIMIZDA — başlık | metin, üç fotoğraf, ikonlu özellikler
   ========================================================================== */
.hk3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hk__yazi { color: var(--metin-2); max-width: 36rem; margin-top: 1.5rem; }
.hk__yazi p { color: var(--metin-2); }
.hk__yazi .btn { margin-top: 1.5rem; }
.hk-ozellik { display: grid; gap: 1.25rem; }
.hk-ozellik li { display: flex; gap: 1rem; align-items: flex-start; }
.hk-ozellik h3 { font-size: 1rem; font-weight: 600; }
.hk-ozellik p { margin-top: .2rem; font-size: .9rem; color: var(--metin-2); }
.hk3__liste { margin-top: 2.5rem; }
/* Görseller: büyük (eğitmen) sağda, küçük (el sargısı) sol altta üstüne biner */
.hk3__gorseller { position: relative; padding: 0 6% 12% 24%; }
.hk3__gorseller figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); background: var(--koyu-2); }
.hk3__gorseller img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.hk3__gorseller figcaption { position: absolute; right: 1rem; bottom: 1rem; z-index: 1; padding: .4rem .75rem; border-radius: var(--r); background: var(--bg); color: var(--metin); font-size: .85rem; font-weight: 600; }
.hk3__buyuk { aspect-ratio: 4 / 5; }
.hk3__kucuk { position: absolute !important; left: 0; bottom: 0; width: 42%; aspect-ratio: 3 / 4; border: 8px solid var(--bg); box-shadow: 0 24px 50px rgba(0,0,0,.18); }

/* ==========================================================================
   ÜYELİK — solda başlık + maddeler, sağda eğik üye kartı
   ========================================================================== */
.uy-liste { display: grid; gap: 1.5rem; width: 100%; }
.uy-liste li { display: flex; gap: 1rem; align-items: flex-start; }
.uy-liste h3 { font-size: 1.0625rem; font-weight: 600; }
.uy-liste p { margin-top: .25rem; font-size: .9rem; color: var(--metin-2); }
.uyk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.uyk__sol { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
/* Kart sahnesi: zemine düşen yumuşak gölge + arkada gümüş ikinci kart + önde siyah üye kartı */
.uyk__sahne { position: relative; display: grid; place-items: center; padding: 96px 32px 88px 96px; perspective: 1200px; }
.uyk__sahne > * { grid-area: 1 / 1; }
.uyk__kart, .uyk__arka { width: min(100%, 520px); aspect-ratio: 1.586; border-radius: var(--r); }
.uyk__zemin { align-self: end; width: min(90%, 470px); height: 48px; margin-bottom: -60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), rgba(0,0,0,.18) 55%, transparent); filter: blur(12px); transform: scaleX(.95); transition: transform .7s var(--ease), opacity .7s var(--ease); }
.uyk__arka {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, #474744, #2c2c2a 50%, #1f1f1e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.12), 0 12px 24px rgba(0,0,0,.14), 0 34px 64px -14px rgba(0,0,0,.35);
  transform: rotate(-10deg) translate(-96px, -58px); transition: transform .7s var(--ease);
}
/* kartın arka yüzü: manyetik şerit, imza alanı, alt yazı + logo */
.uyk__serit { display: block; height: 19%; margin-top: 7%; background: linear-gradient(#050505, #1c1c1c 50%, #050505); }
.uyk__imza { display: flex; align-items: center; width: 58%; height: 15%; margin: 6% 0 0 7%; padding-left: .75rem; border-radius: 2px; background: repeating-linear-gradient(-45deg, #ecebe6 0 6px, #dddcd6 6px 12px); }
.uyk__imza span { font-size: .7rem; color: #7a7a74; font-style: italic; }
.uyk__arka-alt { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: auto 7% 7%; }
.uyk__arka-alt small { font-size: .65rem; color: rgba(255,255,255,.45); }
.uyk__arka-alt img { flex: none; width: 58px; height: auto; object-fit: contain; opacity: .55; }
.uyk__kart {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  padding: clamp(20px, 2.4vw, 32px); background: linear-gradient(135deg, #1f1f1f, #0b0b0b 60%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 4px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.16), 0 44px 80px -16px rgba(0,0,0,.42);
  transform: rotateY(-14deg) rotateX(8deg) rotate(2deg); transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.uyk__sahne:hover .uyk__kart { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 4px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.12), 0 30px 60px -16px rgba(0,0,0,.3); }
.uyk__sahne:hover .uyk__arka { transform: rotate(-13deg) translate(-116px, -70px); }
.uyk__sahne:hover .uyk__zemin { transform: scaleX(.8); opacity: .8; }
.uyk__kart::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 48%, transparent 60%); transform: translateX(-100%); animation: parilti 5s 1s infinite; }
@keyframes parilti { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.uyk__doku { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; mix-blend-mode: luminosity; }
.uyk__ust, .uyk__orta, .uyk__alt { position: relative; }
.uyk__ust { display: flex; align-items: center; justify-content: space-between; }
.uyk__logo { width: 96px; height: auto; object-fit: contain; }
.uyk__ust span { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.uyk__orta { display: flex; flex-direction: column; gap: .25rem; }
.uyk__orta b { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.uyk__orta span { font-size: .9rem; color: rgba(255,255,255,.7); }
.uyk__alt { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; font-size: .75rem; color: rgba(255,255,255,.7); }
.uyk__barkod { flex: none; width: 92px; height: 30px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px, #fff 8px 11px, transparent 11px 13px); opacity: .85; }

/* ==========================================================================
   DERSLER — Psycle "How we train" akordeonu: tıklanan kart ~2 kat genişler,
   şerit onu sola hizalayacak kadar kayar. Kartlar kabın sağından taşar.
   (2026-10-16: kabın içine sığan sürüm denendi, proje sahibi bu sürüme geri döndürdü.)
   ========================================================================== */
.egitim { overflow: hidden; }
.egitim .kap { max-width: none; }   /* hizmetler 1400px sınırına dahil değil */
.egitim__bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.egitim__pencere { margin-top: clamp(40px, 5vw, 64px); }
.egitim__iz {
  --bosluk: 24px;
  display: flex; gap: var(--bosluk);
  transition: transform 1s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.egitim__panel {
  position: relative; flex: 0 0 31%; height: clamp(420px, 36vw, 560px);
  overflow: hidden; border-radius: var(--r); background: var(--koyu-2); cursor: pointer;
  transition: flex-basis 1s cubic-bezier(.4, 0, .2, 1);
}
.egitim__panel.is-acik { flex-basis: 63.5%; cursor: default; }
.egitim__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.4, 0, .2, 1); }
.egitim__panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.62)); pointer-events: none; }

.egitim__dugme {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r); background: #fff; color: var(--metin);   /* Psycle: kapalı kartta beyaz kare + */
  border: 1px solid #fff;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.egitim__dugme:hover { background: var(--acik); }
.is-acik .egitim__dugme { background: transparent; color: #fff; border-width: 2px; }   /* açık kartta çerçeveli − */
.is-acik .egitim__dugme:hover { background: rgba(255,255,255,.12); }
.egitim__dugme:active { transform: scale(.96); }
.egitim__dugme svg { width: 22px; height: 22px; }
.egitim__eksi, .is-acik .egitim__arti { display: none; }
.is-acik .egitim__eksi { display: block; }

.egitim__alt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  padding: clamp(18px, 2vw, 28px); color: #fff;
}
.egitim__sol { min-width: 0; }
.egitim__ad { font-size: clamp(1.375rem, 1.9vw, 1.75rem); font-weight: 600; letter-spacing: .01em; line-height: 1.1; text-transform: uppercase; }
/* Açıklama yalnız açık kartta: yükseklik 0fr → 1fr */
.egitim__aciklama { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .4s var(--ease); }
.egitim__aciklama p { overflow: hidden; max-width: 34rem; color: rgba(255,255,255,.82); font-size: .95rem; }
.is-acik .egitim__aciklama { grid-template-rows: 1fr; opacity: 1; transition-delay: .35s; }
.is-acik .egitim__aciklama p { padding-top: .6rem; }
.egitim__cta { flex: none; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s, background-color .18s var(--ease); }
.is-acik .egitim__cta { opacity: 1; visibility: visible; transition-delay: .45s, .45s, 0s; }


/* ==========================================================================
   SALON — çift sıra akış
   ========================================================================== */
.salon .iki-kolon { margin-bottom: clamp(40px, 5vw, 56px); }
.akis { display: flex; flex-direction: column; gap: 14px; }
.akis__sira { overflow: hidden; }
.akis__iz { display: flex; gap: 14px; width: max-content; animation: akis 60s linear infinite; }
.akis__iz--ters { animation-direction: reverse; animation-duration: 70s; }
.akis__sira:hover .akis__iz { animation-play-state: paused; }
@keyframes akis { to { transform: translateX(calc(-50% - 7px)); } }
.akis__kare { position: relative; flex: none; width: clamp(240px, 22vw, 340px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--bg-2); cursor: zoom-in; transition: transform .5s var(--ease); }
.akis__kare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.akis__kare:hover { transform: translateY(-6px); }
.foto-yazi { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: .2rem; padding: 1.25rem 1.25rem 1.1rem; text-align: left; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); opacity: 0; transition: opacity .35s var(--ease); }
.foto-yazi b { font-size: 1.0625rem; font-weight: 600; }
.foto-yazi small { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.akis__kare:hover .foto-yazi, .akis__kare:focus-visible .foto-yazi { opacity: 1; }


/* Tam ekran görüntüleyici */
.isik { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 20, 20, .95); color: #fff; }
.isik::backdrop { background: rgba(0, 0, 0, .6); }
.isik[open] { display: grid; place-items: center; }
.isik__kare { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 72px 16px 32px; }
.isik__kare img { max-width: min(92vw, 960px); max-height: 80dvh; width: auto; height: auto; object-fit: contain; border-radius: var(--r); }
.isik__kare figcaption { font-size: .9375rem; color: rgba(255,255,255,.75); }
.isik__dugme {
  position: absolute; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r); color: #fff;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.isik__dugme:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); }
.isik__dugme svg { width: 16px; height: 16px; }
.isik__kapat { top: 20px; right: 20px; }
.isik__onceki { left: 20px; top: 50%; translate: 0 -50%; }
.isik__sonraki { right: 20px; top: 50%; translate: 0 -50%; }

/* ==========================================================================
   YORUMLAR — koyu zemin, puan rozetleri + oklar, kabın içinde kayan kartlar
   ========================================================================== */
.yorumlar__bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.yorumlar__sag { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.puan { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; }
.puan .g-logo { grid-row: 1 / 3; width: 30px; height: 30px; }
.puan > span { display: flex; align-items: center; gap: .5rem; }
.puan strong { font-size: 1.25rem; font-weight: 600; }
.puan small { font-size: .8125rem; color: var(--acik-2); }
.puan:hover small { color: var(--acik); }
.oklar { display: flex; gap: .5rem; }
.oklar button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--cizgi-koyu-guclu); border-radius: var(--r); transition: border-color .18s var(--ease), background-color .18s var(--ease); }
.oklar button:hover { border-color: var(--acik); background: rgba(255,255,255,.05); }
.oklar button:active { transform: scale(.96); }
.oklar svg { width: 16px; height: 16px; }
.yorumlar__serit { display: flex; gap: 14px; margin: clamp(40px, 5vw, 56px) auto 0; width: calc(100% - 2 * var(--yan)); max-width: var(--kap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.yorumlar__serit::-webkit-scrollbar { display: none; }
.yorumlar__serit { cursor: grab; }
.yorumlar__serit.is-surukleniyor { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.yorum { flex: 0 0 clamp(280px, 28vw, 400px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; border-radius: var(--r); background: var(--koyu-2); border: 1px solid var(--cizgi-koyu); }
.yorum__metin { flex: 1; font-size: .975rem; line-height: 1.65; color: rgba(245,245,242,.88); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.yorum__metin--bos { color: var(--acik-2); font-style: italic; }
.yorum__alt { display: flex; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--cizgi-koyu); }
.yorum__alt > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; }
.yorum__alt strong { font-size: .9rem; font-weight: 600; }
.yorum__alt small { font-size: .75rem; color: var(--acik-2); }
.yorum__bas { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r); background: var(--acik); color: var(--metin); font-weight: 600; font-size: .875rem; }
.yorum__isletme { margin-left: auto; padding: .2rem .55rem; border-radius: var(--r); background: var(--koyu-3); font-size: .7rem; font-weight: 600; color: var(--acik-2); }

/* ==========================================================================
   SSS
   ========================================================================== */
.sss__izgara { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.sss__bas { position: sticky; top: calc(var(--ust) + 32px); display: flex; flex-direction: column; gap: 2rem; }
.sss__liste { display: flex; flex-direction: column; gap: 10px; }
.sss__madde { border-radius: var(--r); background: var(--bg-2); }
.sss__madde summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 600; }
.sss__madde summary::-webkit-details-marker { display: none; }
.sss__arti { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r); background: var(--bg); color: var(--metin); }
.sss__arti .ikon { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.sss__madde[open] .sss__arti .ikon { transform: rotate(45deg); }
.sss__madde p { padding: 0 4.5rem 1.5rem 1.5rem; color: var(--metin-2); }
.sss__madde summary:focus-visible { outline-offset: -4px; }

/* ==========================================================================
   BAŞVURU
   ========================================================================== */
.basvuru__izgara { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.iletisim-liste { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; }
.iletisim-liste a, .iletisim-liste__satir { display: inline-flex; align-items: center; gap: 1rem; }
.iletisim-liste a > span:last-child, .iletisim-liste__satir > span:last-child { display: flex; flex-direction: column; line-height: 1.35; font-weight: 600; }
.iletisim-liste small { font-size: .75rem; font-weight: 500; color: var(--metin-2); }
.basvuru__ikon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r); background: var(--metin); color: #fff; }
.basvuru__ikon svg { width: 22px; height: 22px; }
.basvuru__ikon--buyuk { width: 52px; height: 52px; }

/* Form */
.basvuru .form { background: var(--bg); box-shadow: 0 1px 0 var(--cizgi); }
.form { padding: clamp(24px, 3vw, 40px); border-radius: var(--r); background: var(--bg-2); }
.form__bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.alan { display: flex; flex-direction: column; gap: .5rem; }
.alan--genis { grid-column: 1 / -1; }
.alan > span { font-size: .875rem; font-weight: 500; }
.alan em { font-style: normal; color: var(--metin-2); font-weight: 400; }
.alan input, .alan select, .alan textarea {
  width: 100%; min-height: 48px; padding: .75rem .9rem;
  font: inherit; color: var(--metin); background: #fff;
  border: 1px solid var(--cizgi-guclu); border-radius: var(--r);
}
.alan textarea { resize: vertical; min-height: 120px; }
.alan select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 14px; padding-right: 2.5rem; }
/* Odak: kenar rengi değişmez, hale de yok (2026-10-19: "kenar çizgisi olmasın"); odağı imleç gösterir */
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; }
.alan--hata input, .alan--hata select, .alan--hata .secim__dugme { border-color: #c2410c; }
/* Özel açılır liste (data-secim): yerel select formda kalır, görünen kısım düğme + liste (app.js) */
.secim { position: relative; }
.secim__yerel { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.secim__dugme { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 48px; padding: .75rem .9rem; font: inherit; color: var(--metin); text-align: left; background: #fff; border: 1px solid var(--cizgi-guclu); border-radius: var(--r); cursor: pointer; }
.secim__dugme.is-bos span { color: var(--metin-2); }
.secim__dugme svg { flex: none; width: 14px; height: 14px; transition: transform .2s var(--ease); }
.secim__dugme[aria-expanded="true"] svg { transform: rotate(180deg); }
.secim__dugme:focus { outline: none; }
.secim__dugme:focus-visible { outline: 2px solid var(--metin); outline-offset: 2px; }
.secim__liste { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: 0 18px 40px rgba(18,18,18,.12); opacity: 0; transform: translateY(-4px); visibility: hidden; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; }
.secim.is-acik .secim__liste { opacity: 1; transform: none; visibility: visible; }
.secim__liste:focus { outline: none; }
.secim__liste li { padding: .75rem .9rem; border-radius: var(--r); cursor: pointer; }
.secim__liste li.is-aktif { background: var(--bg-2); }
.secim__liste li[aria-selected="true"] { font-weight: 600; }
.alan small, .onay__hata { font-size: .8125rem; color: #b33a0a; }
.onay { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.5rem; font-size: .875rem; color: var(--metin-2); cursor: pointer; }
.onay input { flex: none; width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--metin); }
.onay__hata { display: block; margin-top: .4rem; }
.form__genel { margin-bottom: 1rem; padding: .75rem 1rem; border-radius: var(--r); background: #fdecea; color: #8a1c0f; font-size: .875rem; }
.form__gonder { margin-top: 1.75rem; }
.form--tamam { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.form--tamam h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.form--tamam p { color: var(--metin-2); max-width: 30rem; }

/* ==========================================================================
   KAPANIŞ BANDI + FOOTER
   ========================================================================== */
.kapanis { position: relative; isolation: isolate; overflow: hidden; background: var(--koyu); color: var(--acik); border-bottom: 1px solid var(--cizgi-koyu); }
.kapanis__gorsel { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.kapanis::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(18,18,18,.92), rgba(18,18,18,.55) 55%, rgba(18,18,18,.35)); }
.kapanis__ic { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2rem; padding-block: clamp(80px, 9vw, 128px); }
.kapanis__h { font-weight: 600; font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.15; letter-spacing: -.025em; }
.kapanis__p { margin-top: 1rem; max-width: 30rem; color: var(--acik-2); }
.kapanis__dugmeler { display: flex; flex-wrap: wrap; gap: .75rem; }


.alt { background: var(--koyu); color: var(--acik); border-top: 1px solid var(--cizgi-koyu); }
.alt__ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-block: 56px 40px; border-bottom: 1px solid var(--cizgi-koyu); }
.alt__marka img { width: 132px; height: auto; }
.alt__marka p { margin-top: 1rem; max-width: 22rem; font-size: .9rem; color: var(--acik-2); }
.alt__menu { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.alt__menu a { font-size: .9rem; font-weight: 500; color: var(--acik-2); transition: color .18s var(--ease); }
.alt__menu a:hover { color: var(--acik); }
.alt__kolonlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: 40px; }
.alt__kolonlar h3 { font-size: .8125rem; font-weight: 600; color: var(--acik-2); margin-bottom: .75rem; }
.alt__satir { display: block; padding-block: .15rem; font-size: .95rem; transition: color .18s var(--ease); }
a.alt__satir:hover { color: #fff; }
.alt__sosyal { display: flex; gap: .5rem; }
.alt__sosyal a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r); background: var(--koyu-3); transition: background-color .18s var(--ease); }
.alt__sosyal a:hover { background: #333; }
.alt__sosyal .ikon { width: 16px; height: 16px; }
.alt__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 24px 32px; border-top: 1px solid var(--cizgi-koyu); font-size: .8125rem; color: var(--acik-2); }
.imza { display: inline-flex; align-items: center; gap: .7rem; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius: var(--r); padding: .55rem 1rem; transition: border-color .3s, background-color .3s; }
.imza:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); }
.imza-metin { font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.imza img { height: 1.1rem; width: auto; opacity: .9; }

.fablar { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; flex-direction: column; gap: 10px; }
.fab { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: transform .18s var(--ease); }
.fab:hover { transform: translateY(-2px); }
.fab:active { transform: scale(.96); }
.fab--yukari { background: #262626; color: var(--acik); border: 1px solid var(--cizgi-koyu-guclu); }
.fab--yukari svg { width: 18px; height: 18px; }
.fab--yukari[hidden] { display: none; }
/* Sağ kenar sosyal sekmesi (masaüstü) + telefonda alt sabit bar — Varm Up sitesindeki düzen */
.yan-sosyal { position: fixed; right: 0; top: 50%; z-index: 40; display: flex; flex-direction: column; margin: 0; padding: .25rem; list-style: none; border-radius: var(--r) 0 0 var(--r); background: var(--koyu-2); box-shadow: 0 0 0 1px var(--cizgi-koyu); transform: translateY(-50%); }
.yan-sosyal li + li { position: relative; }
.yan-sosyal li + li::before { content: ''; position: absolute; top: 0; left: .625rem; right: .625rem; height: 1px; background: rgba(255,255,255,.14); }
.yan-sosyal a { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 4px; color: var(--acik); transition: color .2s var(--ease), background-color .2s var(--ease); }
.yan-sosyal a:hover, .yan-sosyal a:focus-visible { color: #fff; background: rgba(255,255,255,.06); }
.yan-sosyal svg { width: 20px; height: 20px; }
.yan-sosyal__etiket { position: absolute; top: 50%; right: calc(100% + .75rem); padding: .375rem .625rem; border-radius: 4px; background: var(--koyu-2); color: var(--acik); font-size: .8rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(6px, -50%); transition: opacity .2s var(--ease), transform .3s var(--ease); }
.yan-sosyal a:hover .yan-sosyal__etiket, .yan-sosyal a:focus-visible .yan-sosyal__etiket { opacity: 1; transform: translateY(-50%); }
.alt-bar { display: none; }
@media (max-width: 1023px) {
  .yan-sosyal { display: none; }
  .alt-bar { position: fixed; inset: auto 0 0; z-index: 40; display: block; padding-bottom: env(safe-area-inset-bottom); background: var(--koyu-2); border-top: 1px solid rgba(255,255,255,.1); color: var(--acik); }
  .alt-bar ul { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; font-size: .8rem; font-weight: 600; }
  .alt-bar li + li { border-left: 1px solid rgba(255,255,255,.1); }
  .alt-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 64px; }
  .alt-bar svg { width: 20px; height: 20px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }   /* bar footer'ın son satırını örtmesin */
  .fablar { bottom: calc(64px + 14px + env(safe-area-inset-bottom)); }
}


/* ==========================================================================
   DUYARLI
   ========================================================================== */
/* ==========================================================================
   İÇ SAYFALAR (2026-10-19) — ana sayfanın token, tipografi, buton ve bölüm ritmiyle
   ========================================================================== */
/* Ana sayfa bölümlerine eklenen bağlantı satırları */
.egitim__dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.uyk__dugmeler, .sss__dugmeler { display: flex; flex-wrap: wrap; gap: .75rem; }
.iki-kolon__sag .btn { margin-top: 1.5rem; }

/* Sayfa başlığı (PageHero): slider'ın dili — koyu, tam genişlik görsel, soldan koyu geçiş */
.sb { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(460px, 62vh, 640px); background: var(--koyu); color: var(--acik); }
.sb--duz { min-height: clamp(340px, 44vh, 440px); }
.sb--duz .sb__ic { padding-block: calc(var(--ust) + 72px) clamp(64px, 8vw, 112px); }   /* biraz daha uzun bant (2026-10-22) */
.sb__gorsel { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sb::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12,12,12,.86), rgba(12,12,12,.45) 55%, rgba(12,12,12,.2)), linear-gradient(rgba(12,12,12,.5), transparent 30%, transparent 55%, rgba(12,12,12,.7)); }
.sb--duz::before { content: none; }   /* görselsiz bant düz siyah (2026-10-22) */
.sb__ic { width: 100%; padding-block: calc(var(--ust) + 48px) clamp(48px, 6vw, 80px); }
/* Ders sayfası başlığının zemini: perspektifli pist çizgileri (2026-10-22, 4 alternatiften seçilen; yalnız ders sayfaları) */
.sb--kart::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('../img/desen/pist.svg') center bottom / cover no-repeat; -webkit-mask: linear-gradient(transparent, #000 45%); mask: linear-gradient(transparent, #000 45%); }

/* Kartlı başlık (ders sayfaları): düz siyah bant, solda metin, sağda çerçeveli görsel */
.sb--kart { min-height: 0; align-items: center; }
.sb--kart::before { content: none; }
.sb--kart .sb__ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: calc(var(--ust) + 56px) clamp(56px, 7vw, 96px); }
.sb__kart { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: #1c1c1c; }
.sb__kart img { width: 100%; height: 100%; object-fit: cover; }
.yol ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .85rem; color: rgba(244,244,241,.6); }
.yol li + li::before { content: '/'; margin-right: .5rem; color: rgba(244,244,241,.35); }
.yol a { transition: color .18s var(--ease); }
.yol a:hover { color: var(--acik); }
.yol [aria-current] { color: var(--acik); }
.sb__h { max-width: 18ch; font-weight: 600; font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -.035em; }
.sb__soluk { color: rgba(255,255,255,.62); }
.sb__p { max-width: 36rem; margin-top: 1rem; font-size: 1.0625rem; color: rgba(255,255,255,.82); }
.sb__dugmeler { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Bölüm başlık satırı: solda başlık, sağda bağlantı/düğme */
.bas-satir { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 56px); }

/* Ders kartları (/dersler, ders sayfalarında "Diğer Dersler") */
.dk-izgara { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.dk-izgara > .dk { grid-column: span 2; }
.dk-izgara > .dk:nth-child(-n+2) { grid-column: span 3; }   /* 5 ders: üstte 2 büyük, altta 3 */
.dk-izgara > .dk:nth-child(-n+2) .dk__gorsel { aspect-ratio: 16 / 9; }
.dk-izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dk-izgara--4 > .dk, .dk-izgara--4 > .dk:nth-child(-n+2) { grid-column: auto; }
.dk-izgara--4 > .dk:nth-child(-n+2) .dk__gorsel { aspect-ratio: 4 / 3; }
.dk { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--bg); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.bolum:not(.bolum--ikinci) .dk { background: var(--bg-2); }
.dk:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0,0,0,.08); }
.dk__gorsel { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin: 0; background: var(--koyu-2); }
.dk__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.dk__gorsel b { position: absolute; left: 1.25rem; bottom: 1rem; z-index: 1; color: #fff; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.dk__gorsel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.6)); }
.dk__govde { display: flex; flex-direction: column; gap: .9rem; flex: 1; padding: 1.5rem; }
.dk__govde p { color: var(--metin-2); font-size: .95rem; }
.dk__govde .btn { margin-top: auto; align-self: flex-start; }
.dk--genis { grid-column: span 2; }
.dk--genis .dk__gorsel { aspect-ratio: auto; flex: 1; min-height: 260px; }

/* Adımlar (Nasıl katılırım, Üye olmak) — numarasız, ikonlu */
.adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cizgi); }
.adim { display: flex; flex-direction: column; gap: .75rem; padding: 2rem 2rem 0 0; }
.adim + .adim { padding-left: 2rem; border-left: 1px solid var(--cizgi); }
.adim h3 { margin-top: .5rem; font-size: 1.125rem; font-weight: 600; }
.adim p { color: var(--metin-2); font-size: .95rem; }
.adim .btn { margin-top: .5rem; align-self: flex-start; }
.bolum--koyu .adimlar { border-color: var(--cizgi-koyu); }
.bolum--koyu .adim + .adim { border-color: var(--cizgi-koyu); }
.bolum--koyu .adim p { color: var(--acik-2); }
.bolum--koyu .adim .ikon-kutu { background: var(--acik); color: var(--metin); }

/* Neden VU BOX — 4 kart */
.nedenler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.neden { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; border-radius: var(--r); background: var(--koyu-2); border: 1px solid var(--cizgi-koyu); }
.neden .ikon-kutu { background: var(--acik); color: var(--metin); }
.neden h3 { margin-top: .75rem; font-size: 1.0625rem; font-weight: 600; }
.neden p { color: var(--acik-2); font-size: .925rem; }

/* Ders sayfası */
.dd-giris { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.dd-giris__metin p { color: var(--metin-2); font-size: 1.0625rem; }
.dd-giris__metin p + p { margin-top: 1rem; }
.dd-giris__metin .bas { margin-bottom: 1.5rem; }
.dd-giris__dugmeler { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.dd-alan { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--koyu-2); }
.dd-alan img { width: 100%; height: 100%; object-fit: cover; }
.dd-alan figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .4rem .75rem; border-radius: var(--r); background: var(--bg); font-size: .85rem; font-weight: 600; }

/* Salon sayfası — alan kartları */
.alanlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.alanlar > .alan-kart:first-child { grid-column: span 2; }   /* 7 alan: ilk kart geniş, iki tam satır */
.alanlar > .alan-kart:first-child .alan-kart__gorsel { flex: 1; aspect-ratio: auto; min-height: 280px; }
.alan-kart { display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: var(--r); background: var(--bg); text-align: left; cursor: zoom-in; }
.alan-kart__gorsel { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--koyu-2); }
.alan-kart__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }   /* mutlak: geniş kartta görsel satırı kendi boyuna uzatmasın */
.alan-kart__govde { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.5rem 1.5rem; }
.alan-kart__govde small { font-size: .78rem; color: var(--metin-2); }
.alan-kart__govde b { font-size: 1.0625rem; font-weight: 600; }
.alan-kart__govde span { color: var(--metin-2); font-size: .925rem; }

/* Konum bandı (salon, iletişim) */
/* İletişim sayfası: solda bilgi satırları + düğmeler, sağda gömülü harita */
.ilt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: stretch; }
.ilt__liste { margin: 2.5rem 0 0; border-top: 1px solid var(--cizgi); }
.ilt__satir { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--cizgi); }
.ilt__satir dt { display: flex; align-items: center; gap: .6rem; align-self: start; font-size: .875rem; color: var(--metin-2); }
.ilt__satir dt svg { width: 16px; height: 16px; flex: none; }
.ilt__satir dd { margin: 0; font-weight: 500; line-height: 1.5; word-break: break-word; }
.ilt__satir a { color: inherit; transition: color .2s var(--ease); }
.ilt__satir a:hover { color: var(--metin-2); }
.ilt__dugmeler { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.ilt__harita { min-height: 420px; overflow: hidden; border-radius: var(--r); background: var(--bg-2); }
.ilt__harita iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
.konum { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.konum__harita { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: #1a1a1a; }
.konum__harita svg { width: 100%; height: 100%; transition: transform .9s var(--ease); }
.konum__etiket { position: absolute; left: 1.25rem; bottom: 1.25rem; display: flex; flex-direction: column; gap: .15rem; padding: .75rem 1rem; border-radius: var(--r); background: var(--bg); color: var(--metin); }
.konum__etiket b { font-size: .95rem; }
.konum__etiket small { font-size: .78rem; color: var(--metin-2); }
.konum__dalga { transform-box: fill-box; transform-origin: center; animation: dalga 2.4s ease-out infinite; }
@keyframes dalga { from { transform: scale(.4); opacity: .3; } to { transform: scale(1.6); opacity: 0; } }

/* İletişim kartları */

/* SSS sayfası — gruplu */
.sss-sayfa { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.sss-sayfa__yan { position: sticky; top: calc(var(--ust) + 32px); display: flex; flex-direction: column; gap: 1.5rem; }
.sss-sayfa__nav { display: grid; border-top: 1px solid var(--cizgi); }
.sss-sayfa__nav a { display: flex; justify-content: space-between; align-items: center; padding-block: .9rem; border-bottom: 1px solid var(--cizgi); font-weight: 600; transition: padding .3s var(--ease); }
.sss-sayfa__nav a:hover { padding-left: .5rem; }
.sss-sayfa__nav small { font-weight: 400; color: var(--metin-2); }
.sss-grup + .sss-grup { margin-top: clamp(48px, 6vw, 72px); }
.sss-grup h2 { margin-bottom: 1.25rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; scroll-margin-top: calc(var(--ust) + 24px); }
.yardim-kart { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; border-radius: var(--r); background: var(--koyu); color: var(--acik); }
.yardim-kart h3 { font-size: 1.125rem; font-weight: 600; }
.yardim-kart p { color: var(--acik-2); font-size: .925rem; }
.yardim-kart .btn { align-self: flex-start; }

/* Metin sayfası (KVKK) */
.metin-sayfa { max-width: 46rem; }
.metin-sayfa h2 { margin: 2.5rem 0 .75rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }
.metin-sayfa h2:first-child { margin-top: 0; }
.metin-sayfa p, .metin-sayfa li { color: var(--metin-2); }
.metin-sayfa p + p { margin-top: .9rem; }
.metin-sayfa ul { display: grid; gap: .5rem; margin: .75rem 0 0; padding-left: 1.25rem; list-style: disc; }
.metin-sayfa a { text-decoration: underline; text-underline-offset: 3px; }
.metin-sayfa__not { margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-radius: var(--r); background: var(--bg-2); font-size: .9rem; }

/* 404 (referans: Mai Müşavirlik): açık zemin, ince dikey ızgara, arkada soluk dev 404, ortalı başlık + düğmeler */
body:has(.h404) .ust { background-color: var(--koyu); }
.h404 { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: 100svh; padding-block: calc(var(--ust) + 64px) 96px; background: var(--bg); }
.h404__izgara { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.h404__izgara span { border-left: 1px solid var(--cizgi); }
.h404__izgara span:last-child { border-right: 1px solid var(--cizgi); }
.h404__ic { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.h404__kod { position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); font-size: clamp(10rem, 30vw, 28rem); font-weight: 700; line-height: 1; letter-spacing: -.06em; color: var(--bg-2); user-select: none; }
.h404__h { font-weight: 600; font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.05; letter-spacing: -.035em; }
.h404__p { max-width: 34rem; margin-top: 1.25rem; font-size: 1.0625rem; color: var(--metin-2); }
.h404__dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }


/* Ders "Nedir?" alanı: metin + sekmeli görsel (salon / ders), perde silmesiyle geçiş */
.ddg4 img { width: 100%; height: 100%; object-fit: cover; }
.ddg4 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ddg4__sahne { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--r); background: var(--koyu-2); }
.ddg4__kat { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path .9s var(--ease); }
.ddg4__kat.is-acik { clip-path: inset(0); z-index: 1; }
.ddg4__kat img { transform: scale(1.08); transition: transform 1.2s var(--ease); }
.ddg4__kat.is-acik img { transform: none; }
.ddg4__sekme { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; display: flex; gap: 4px; padding: 4px; border-radius: var(--r); background: rgba(18,18,18,.82); }
.ddg4__sekme button { padding: .45rem .8rem; border: 0; border-radius: var(--r); background: none; color: var(--acik); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.ddg4__sekme button.is-secili { background: var(--acik); color: var(--koyu); }

/* Ders sayfası "Derste Neler Var?" — bento */
.nv1 img { width: 100%; height: 100%; object-fit: cover; }
.nv1 h3 { font-size: 1.0625rem; font-weight: 600; }
.nv1 p { color: var(--metin-2); font-size: .925rem; }
.nv1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nv1__kart { display: flex; flex-direction: column; gap: .4rem; padding: 1.5rem; border-radius: var(--r); background: var(--bg-2); transition: background-color .25s var(--ease); }
.nv1__kart:hover { background: #e9e9e6; }
.nv1__kart .ikon-kutu { margin-bottom: auto; }
.nv1__gorsel { position: relative; overflow: hidden; border-radius: var(--r); background: var(--koyu-2); }
.nv1__gorsel img { position: absolute; inset: 0; }
.nv1__gorsel span { position: absolute; left: 1rem; bottom: 1rem; padding: .4rem .75rem; border-radius: var(--r); background: var(--bg); font-size: .85rem; font-weight: 600; }
.nv1__serit { display: grid; grid-template-rows: repeat(2, minmax(210px, auto)); grid-auto-flow: column; grid-auto-columns: calc((100% - 14px) / 2); gap: 14px; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.nv1__serit::-webkit-scrollbar { display: none; }
.nv1__serit li { scroll-snap-align: start; }
.nv1__serit li:last-child:nth-child(odd) { grid-row: span 2; }
.oklar--acik button { border-color: var(--cizgi); color: var(--metin); }
.oklar--acik button:hover { border-color: var(--metin); background: none; }
.oklar button:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* Ders sayfası "Kimler İçin?" — görselli kartlar */
.kv4 img { width: 100%; height: 100%; object-fit: cover; }
.kv4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kv4 li { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--bg); }
.kv4__gorsel { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--koyu-2); }
.kv4__gorsel img { transition: transform .7s var(--ease); }
.kv4__metin { display: flex; align-items: flex-start; gap: .75rem; padding: 1.25rem 1.5rem 1.5rem; }
.kv4__metin svg { flex: none; width: 18px; height: 18px; margin-top: .2rem; }
.kv4__metin b { font-size: 1.0625rem; font-weight: 600; }

@media (max-width: 960px) {
  .sb--kart .sb__ic { grid-template-columns: 1fr; }   /* telefonda metin önce (H1 ilk ekranda), görsel altta */
  .dk-izgara, .dk-izgara--4, .alanlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-izgara > .dk, .dk-izgara > .dk:nth-child(-n+2) { grid-column: auto; }
  .dk-izgara > .dk:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .alanlar > .alan-kart:first-child { grid-column: 1 / -1; }
  .nedenler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-giris, .konum, .ilt, .sss-sayfa { grid-template-columns: 1fr; }
  .sss-sayfa__yan { position: static; }
  .dd-alan { aspect-ratio: 4 / 3; }
  .kv4 { grid-template-columns: 1fr; }
  .kv4 li { flex-direction: row; }
  .kv4__gorsel { position: relative; flex: 0 0 38%; aspect-ratio: auto; min-height: 120px; }
  .kv4__gorsel img { position: absolute; inset: 0; }
  .kv4__metin { align-items: center; padding: 1rem 1.25rem; }
  .kv4__metin svg { margin-top: 0; }
  .kv4__metin b { font-size: 1rem; }
  .nv1 { grid-template-columns: 1fr; }
  .nv1__gorsel { aspect-ratio: 16 / 9; }
  .ddg4 { grid-template-columns: 1fr; }
  .ddg4__sahne { order: -1; }
}
@media (max-width: 640px) {
  /* "Nasıl Katılırım?" telefonda (2026-10-22, 4 alternatiften Çizelge): solda dikey çizgi, ikonlar çizginin üstünde,
     adımlar kutu; aşağı kaydırınca kutular üst üste biner */
  .adimlar { --adim-kutu: var(--bg-2); position: relative; gap: 14px; padding-left: 60px; border-top: 0; }
  .bolum--ikinci .adimlar { --adim-kutu: #fff; }
  .bolum--koyu .adimlar { --adim-kutu: var(--koyu-2); }
  .adimlar::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--cizgi); }
  .bolum--koyu .adimlar::before { background: rgba(255,255,255,.14); }
  /* Çizgi kaydırdıkça dolar (app.js --dolum 0..1 yazar): açık zeminde siyah, koyu zeminde beyaz */
  .adimlar::after { content: ''; position: absolute; left: 21px; top: 22px; width: 2px; height: calc((100% - 44px) * var(--dolum, 0)); border-radius: 2px; background: var(--metin); }
  .bolum--koyu .adimlar::after { background: var(--acik); }
  .adimlar .adim, .adimlar .adim + .adim { position: sticky; top: calc(var(--ust) + 16px); padding: 1.25rem 1.25rem 1.4rem; border: 0; border-radius: var(--r); background: var(--adim-kutu); box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
  .adimlar .adim:nth-child(2) { top: calc(var(--ust) + 26px); }
  .adimlar .adim:nth-child(3) { top: calc(var(--ust) + 36px); }
  .bolum--koyu .adimlar .adim { box-shadow: 0 -8px 24px rgba(0,0,0,.35); }
  .adimlar .ikon-kutu { position: absolute; left: -60px; top: 1.1rem; }
  .adimlar .adim h3 { margin-top: 0; }
  /* Telefonda üst üste binen kartlar (2026-10-22, iç sayfalar; ana sayfada bu listeler yok): her kart header'ın altında
     yapışır, sonraki kart alttan gelip öncekinin üstüne biner; 10px kademe ile alttaki kartların üst kenarı görünür */
  .nedenler > *, .dk-izgara > *, .alanlar > *, .kv4 > * { position: sticky; top: calc(var(--ust) + 16px); box-shadow: 0 -8px 24px rgba(0, 0, 0, .08); }
  .nedenler > * { box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); }
  .nedenler > :nth-child(2), .dk-izgara > :nth-child(2), .alanlar > :nth-child(2), .kv4 > :nth-child(2) { top: calc(var(--ust) + 26px); }
  .nedenler > :nth-child(3), .dk-izgara > :nth-child(3), .alanlar > :nth-child(3), .kv4 > :nth-child(3) { top: calc(var(--ust) + 36px); }
  .nedenler > :nth-child(4), .dk-izgara > :nth-child(4), .alanlar > :nth-child(4) { top: calc(var(--ust) + 46px); }
  .dk-izgara > :nth-child(5), .alanlar > :nth-child(5) { top: calc(var(--ust) + 56px); }
  .alanlar > :nth-child(6) { top: calc(var(--ust) + 66px); }
  .alanlar > :nth-child(7) { top: calc(var(--ust) + 76px); }
  /* Dersler sayfası "Hangi Dersle Başlamak İstersin?": telefonda yana kaydırmalı şerit (destenin yerine); sonraki kart kenardan görünür */
  .dk-izgara--kaydir { display: flex; gap: 12px; margin-inline: calc(-1 * var(--yan)); padding-inline: var(--yan); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--yan); scrollbar-width: none; }
  .dk-izgara--kaydir::-webkit-scrollbar { display: none; }
  .dk-izgara--kaydir > .dk, .dk-izgara--kaydir > .dk:nth-child(n) { position: static; flex: 0 0 82%; box-shadow: none; scroll-snap-align: start; }
  .dk-izgara--kaydir > .dk:nth-child(-n+2) .dk__gorsel { aspect-ratio: 4 / 3; }
  .sb { min-height: 420px; }
  .sb__h { font-size: 2.125rem; }
  .sb__p { font-size: 1rem; }
  .sb__dugmeler { flex-wrap: wrap; gap: .5rem; }
  .sb__dugmeler .btn { flex: 1 1 auto; padding-inline: 1rem; white-space: nowrap; }   /* mobilde yan yana; sığmayan çok dar ekranda alt alta */
  .sb::before { background: linear-gradient(rgba(12,12,12,.45), rgba(12,12,12,.6) 40%, rgba(12,12,12,.88)); }
  .dk-izgara, .dk-izgara--4, .alanlar, .nedenler { grid-template-columns: 1fr; }
  .nv1__serit { grid-template-rows: none; grid-auto-flow: row; grid-auto-columns: auto; gap: 10px; overflow: visible; }
  .nv1__serit li { grid-row: auto !important; }
  .nv1__kart .ikon-kutu { margin-bottom: .75rem; }
  .dk--genis { grid-column: auto; }
  .adimlar { grid-template-columns: 1fr; }
  .alan-kart__gorsel { aspect-ratio: 4 / 3; }
  .alanlar > .alan-kart:first-child .alan-kart__gorsel { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  /* Telefonda kartlar yatay ve kompakt: ikon solda, metin sağda */
  .h404__izgara { grid-template-columns: repeat(2, 1fr); }
  .h404__h { font-size: 2.25rem; }
  .neden { padding: 1.4rem; }
  .neden h3 { margin-top: .25rem; }
}

@media (max-width: 1100px) {
}

@media (max-width: 960px) {
  .iki-kolon { grid-template-columns: 1fr; align-items: start; }
  .hk3 { grid-template-columns: 1fr; }
  /* Görsel + metin bölümlerinde tek sütunda önce görsel (tasarım kuralı: mobilde görsel önce) */
  .hk3__gorseller, .uyk__sahne, .dd-giris > .dd-alan, .konum__harita { order: -1; }
  .sss__izgara, .basvuru__izgara, .uyk { grid-template-columns: 1fr; }
  .sss__bas { position: static; }
  .egitim__bas { flex-direction: column; align-items: flex-start; }
  .alt__kolonlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  :root { --bolum: 80px; --ust: 64px; }
  .ust__logo img { width: 92px; }
  .mega__panel { height: 100%; }
  .mega__sutunlar { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; padding-top: 24px; }
  .mega__sutunlar > div:nth-child(3) { grid-column: 1 / -1; }
  .mega__gorsel { display: none; }
  .mega__alt { flex-direction: column; align-items: flex-start; margin-top: 32px; }
  .mega__bilgi { flex-direction: column; align-items: flex-start; }
  .btn { min-height: 48px; }
  .hero__dugmeler { flex-wrap: wrap; gap: .5rem; }
  .hero__dugmeler .btn { flex: 1 1 auto; padding-inline: 1rem; white-space: nowrap; }   /* mobilde yan yana; sığmayan çok dar ekranda alt alta */
  .hs .hero__h { font-size: 2.25rem; }
  .hs .hero__p { font-size: 1rem; }
  .hs .hs__ic { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 2rem; }
  .hs .hs__perde { background: linear-gradient(rgba(12,12,12,.3), rgba(12,12,12,.55) 35%, rgba(12,12,12,.88)); }
  .hs__sira { display: none; }
  .hs__cizgiler { margin-top: 2rem; }
  .hk3__gorseller { padding: 0 0 18% 14%; }
  .uyk__sahne { padding: 56px 12px 64px 36px; }
  .uyk__arka, .uyk__sahne:hover .uyk__arka { transform: rotate(-8deg) translate(-18px, -30px); }
  /* Dokunma alanları: footer menüsü, iletişim satırları, yol izi */
  .alt__menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
  .alt__menu a { display: inline-block; padding-block: .6rem; }
  .alt__satir { padding-block: .5rem; }
  .yol li > * { display: inline-block; padding-block: .4rem; }
  /* Mobil: akordeon yerine yatay kaydırmalı kartlar, hepsi açık */
  .egitim__pencere { margin-inline: calc(var(--yan) * -1); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--yan); }
  .egitim__pencere::-webkit-scrollbar { display: none; }
  .egitim__iz { --bosluk: 12px; transform: none !important; padding-inline: var(--yan); width: max-content; }
  .egitim__panel, .egitim__panel.is-acik { flex: 0 0 84vw; height: 480px; scroll-snap-align: start; cursor: default; }
  .egitim__dugme { display: none; }
  .egitim__alt { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .egitim__aciklama { grid-template-rows: 1fr; opacity: 1; }
  .egitim__aciklama p { padding-top: .6rem; }
  .egitim__cta { opacity: 1; visibility: visible; }
  .akis__kare { width: 46vw; }
  .yorum { flex-basis: 84vw; }
  .oklar { display: none; }
  .sss__madde summary { padding: 1.1rem 1.1rem; font-size: 1rem; }
  .sss__madde p { padding: 0 1.1rem 1.25rem; }
  .form__izgara { grid-template-columns: 1fr; }
  .isik__onceki, .isik__sonraki { top: auto; bottom: 20px; translate: none; }
  .kapanis__dugmeler { width: 100%; }
  .kapanis__dugmeler { flex-wrap: wrap; gap: .5rem; }
  .kapanis__dugmeler .btn { flex: 1 1 auto; padding-inline: 1rem; white-space: nowrap; }   /* mobilde yan yana; sığmayan çok dar ekranda alt alta */
  .alt__kolonlar { grid-template-columns: 1fr; gap: 1.5rem; }
  .alt__bar { flex-direction: column; align-items: flex-start; }
  .fablar { right: 14px; bottom: calc(64px + 14px + env(safe-area-inset-bottom)); }   /* alt barın üstünde */
  .fab { width: 48px; height: 48px; }
}

/* --- Hareket azaltma: global kill-switch ----------------------------------- */
/* Çok dar telefonlar: yan yana düğmeler sığsın diye iç boşluk ve punto biraz küçülür */
@media (max-width: 400px) {
  .hero__dugmeler .btn, .sb__dugmeler .btn, .kapanis__dugmeler .btn { padding-inline: .7rem; gap: .4rem; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .akis__iz, .uyk__kart::after, .konum__dalga { animation: none !important; }
}