/* =====================================================================
   HURRA LINGO · TASARIM SİSTEMİ (base.css) · sahibi: Ajan 0
   ---------------------------------------------------------------------
   KULLANIM KILAVUZU (bölüm ajanları için kısa özet)

   Tokenlar (:root)
     Renk     --coral/--cyan/--orange/--lilac/--green/--sun + her birinin
              -50 (açık zemin) ve -ink (beyaz ya da -50 üstünde metin, >=5:1).
              Renkli zeminde metin HER ZAMAN lacivert: --ink ya da --ink-deep.
     Köşe     --r-xl 40 · --r-l 32 · --r-m 24 · --r-s 16 · --r-xs 10
     Gölge    --shadow-s · --shadow-m · --shadow-l (lacivert tonlu, yumuşak)
     Yazı     --display (başlık) · --body (gövde) · --fun (Poetsen One; yalnızca
              rozet, damga, kısa etiket)
     Hareket  --ease-out · --ease-in-out · --ease-spring (küçük pop) ·
              --ease-pop (yumuşak yay) · --ease-drawer (çekmece)
              --dur-fast 140 · --dur 240 · --dur-slow 420
     Düzen    --gutter (body yan boşluğu) · --wrap 1240

   Bileşenler (sınıf adları sabit)
     .btn + .btn-primary | .btn-dark | .btn-line | .btn-light | .btn-sun
          + .btn-sm | .btn-block. Renk özelleştirme: style="--btn-bg:..;
          --btn-bg-h:..; --btn-fg:.." İçindeki #i-arrow ikonu (ya da .arr)
          hover'da yaylanarak 4px ileri kayar. aria-busy="true" = yükleniyor.
     .link    mercan alt çizgi soldan dolar; renk: style="--link-c:var(--cyan)"
     .chip    aria-pressed="true" seçili; seçili renk: --chip-on-bg/--chip-on-fg
     .eyebrow · h2 · .lead · .sec · .sec-head · .wrap

   Yardımcılar
     .num-tab        rakamlarda tabular-nums
     .sr-only        görsel olarak gizli, ekran okuyucuda var
     .bleed          body yan boşluğunu aşan tam genişlik renkli bant
                     (içeriği .wrap ile ortala)
     .stamp          Poetsen "damga" rozeti: --stamp-bg, --stamp-fg, --stamp-rot
     .squiggle       kelimenin altına el çizimi dalga; ekrana girince çizilir.
                     Renk: --squiggle-c
     .reveal         kaydırınca 14px yukarı kayarak belirir (yalnızca CSS
                     scroll-driven; desteklenmezse içerik zaten görünür).
                     `translate` + `opacity` kullanır: hover'da transform
                     kullanan öğeye koyabilirsin, translate/opacity hover'ı olan
                     öğeye koyma (bir sarmalayıcıya koy).
     .reveal-stagger çocuklarını sırayla (her biri ~%5 menzil gecikmeli) belirtir
     .pop-in         ekrana ilk girişte yaylanarak "pop" (konuşma balonu, rozet).
                     core.js tetikler; JS yoksa öğe zaten görünür.
                     Gecikme: style="--pop-delay:120ms"; köken: transform-origin
     .tilt           kart hover'ında 4px kalkma + 1,25° eğilme (çift sıradakiler
                     ters yöne). Açı: --tilt
     .wiggle         ebeveyni hover/focus olunca ikon bir kez kıpırdar
     .zoom           overflow:hidden kap; içindeki img/video hover'da 1.04.
                     Kartın tamamı tetiklesin istersen karta .zoom-host ver.
     .mascot         maskot kutusu: <span class="mascot" data-blink>
                     <img src="img/maskot-mutlu.svg" alt=""><img
                     src="img/maskot-goz-kirp.svg" alt=""></span>; boyut
                     --mascot-w. data-blink: birkaç saniyede bir göz kırpar;
                     ebeveyn hover'ında da kırpar.

   Mobil sabit çubuk (.mbar): #lead ya da [data-mbar-hide] taşıyan bir öğe
   ekrandayken kendiliğinden gizlenir (çift CTA olmasın diye).
   Hover stilleri yalnızca @media (hover:hover) and (pointer:fine) içinde.
   prefers-reduced-motion: reduce altında tüm animasyon/geçişler kapanır.
   ===================================================================== */

:root{
  color-scheme: light;
  /* Zemin ve metin */
  --bg:#FFFFFF;
  --bg-2:#F4F6F9;
  --ink:#082D56;
  --ink-deep:#05213F;          /* mercan/cyan zemin üstünde metin (>=5.6:1) */
  --ink-2:#465B76;
  --muted:#5B6D86;             /* beyazda 5.3:1, --bg-2'de 4.9:1 */
  --line:#E1E7EE;
  --line-2:#C9D3DF;
  /* Marka paleti: taban · -50 açık zemin · -ink metin tonu */
  --coral:#FC6961;  --coral-50:#FFF0EE;  --coral-ink:#C2342B;
  --cyan:#00AED0;   --cyan-50:#E7F6FA;   --cyan-ink:#00718A;
  --orange:#FB991E; --orange-50:#FFF3E2; --orange-ink:#9A5200;
  --lilac:#C997CB;  --lilac-50:#F5EEF6;  --lilac-ink:#7E4583;
  --green:#98C33F;  --green-50:#EEF6E2;  --green-ink:#4B6E12;
  --sun:#FFC94A;    --sun-50:#FFF8E1;    --sun-ink:#8A5E00;
  /* Köşe ve ölçü */
  --r-xl:40px; --r-l:32px; --r-m:24px; --r-s:16px; --r-xs:10px;
  --wrap:1240px;
  --gutter:clamp(16px,3vw,40px);
  /* Yazı */
  --display:'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --body:'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fun:'Poetsen One', 'Bricolage Grotesque', system-ui, sans-serif;
  /* Gölge */
  --shadow-s:0 1px 2px rgb(8 45 86 / .06), 0 3px 8px -3px rgb(8 45 86 / .12);
  --shadow-m:0 2px 4px rgb(8 45 86 / .05), 0 14px 30px -14px rgb(8 45 86 / .30);
  --shadow-l:0 4px 12px rgb(8 45 86 / .06), 0 36px 72px -28px rgb(8 45 86 / .45);
  /* Hareket */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-pop:cubic-bezier(.3,1.3,.5,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --dur-fast:140ms; --dur:240ms; --dur-slow:420ms;
}

/* ---------- Temel ---------- */
*, *::before, *::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scrollbar-gutter:stable}
html:has(dialog[open]), html.hl-lock{overflow:hidden}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; padding-inline:var(--gutter); padding-block:0 110px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-kerning:normal}
img, video{max-width:100%; height:auto; display:block}
a{color:inherit}
:where(a:not([class])){text-decoration-thickness:1.5px; text-underline-offset:.2em}
h1, h2, h3, h4{margin:0; text-wrap:balance}
p{margin:0}
p, li, blockquote, figcaption, dd{text-wrap:pretty}
ul, ol{margin:0; padding:0; list-style:none}
button, input, select, textarea{font:inherit; color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
::selection{background:rgb(255 201 74 / .6); color:var(--ink)}

:where(:focus-visible){outline:2.5px solid var(--cyan-ink); outline-offset:3px}
:where(a:not([class])):focus-visible{border-radius:4px}

.skip{position:absolute; left:16px; top:-60px; background:var(--ink); color:#fff; padding:10px 16px; border-radius:12px; z-index:100; text-decoration:none; font-weight:700; transition:top var(--dur) var(--ease-out)}
.skip:focus{top:12px}

.icon{width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.icon.fill{fill:currentColor; stroke:none}

/* ---------- Düzen ---------- */
.wrap{max-width:var(--wrap); margin-inline:auto}
.sec{max-width:var(--wrap); margin-inline:auto; padding-block:clamp(56px,8vw,112px) 0}
.bleed{margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter)}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px 24px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,48px)}
.sec-head > div{max-width:720px}

/* ---------- Tipografi ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; line-height:1.3; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--coral-ink); margin-bottom:14px}
h2{font-family:var(--display); font-weight:800; font-size:clamp(32px,4.2vw,54px); line-height:1.04; letter-spacing:-.025em; text-wrap:balance}
.lead{font-size:clamp(17px,1.5vw,19.5px); line-height:1.55; color:var(--ink-2); max-width:60ch; margin-top:16px; text-wrap:pretty}
.num-tab{font-variant-numeric:tabular-nums lining-nums}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* ---------- Butonlar ---------- */
.btn{
  --btn-bg:var(--ink); --btn-bg-h:#0F4079; --btn-fg:#fff; --btn-spin:#fff;
  --btn-edge:0 0 #0000; --btn-edge-h:var(--btn-edge);
  --btn-sh:var(--shadow-s);
  --btn-sh-h:0 2px 4px rgb(8 45 86 / .08), 0 16px 28px -14px rgb(8 45 86 / .55);
  --btn-sh-p:0 1px 2px rgb(8 45 86 / .10);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 26px; border:0; border-radius:999px;
  background-color:var(--btn-bg); color:var(--btn-fg); box-shadow:var(--btn-edge), var(--btn-sh);
  font-family:var(--body); font-weight:700; font-size:16.5px; line-height:1.2; letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:manipulation;
  transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.btn .icon{width:1.1em; height:1.1em; stroke-width:2.4; transition:transform var(--dur) var(--ease-spring)}
.btn-primary{
  /* Beyaz yazı için koyulaştırılmış mercan: #D34039 beyazla 4,6:1 (AA). Marka mercanı #FC6961 beyazla yalnızca 2,9:1 verir. */
  --btn-bg:#D34039; --btn-bg-h:#BF352F; --btn-fg:#fff; --btn-spin:#fff;
  --btn-sh:0 1px 2px rgb(8 45 86 / .08), 0 6px 14px -8px rgb(229 76 68 / .85);
  --btn-sh-h:0 2px 4px rgb(8 45 86 / .06), 0 16px 28px -12px rgb(229 76 68 / .8);
  --btn-sh-p:0 1px 2px rgb(8 45 86 / .12), 0 2px 6px -3px rgb(229 76 68 / .7);
}
.btn-dark{--btn-bg:var(--ink); --btn-bg-h:#0F4079; --btn-fg:#fff; --btn-spin:#fff}
.btn-line{
  --btn-bg:#fff; --btn-bg-h:#fff; --btn-fg:var(--ink); --btn-spin:var(--ink);
  --btn-edge:inset 0 0 0 1.5px var(--line-2); --btn-edge-h:inset 0 0 0 1.5px var(--ink);
  --btn-sh:0 0 #0000; --btn-sh-h:var(--shadow-m); --btn-sh-p:0 0 #0000;
}
.btn-light{
  --btn-bg:#fff; --btn-bg-h:#fff; --btn-fg:var(--ink); --btn-spin:var(--ink);
  --btn-sh:0 1px 2px rgb(8 45 86 / .08), 0 6px 16px -10px rgb(8 45 86 / .4);
}
.btn-sun{
  --btn-bg:var(--sun); --btn-bg-h:#FFD466; --btn-fg:var(--ink-deep); --btn-spin:var(--ink-deep);
  --btn-sh:0 1px 2px rgb(8 45 86 / .08), 0 6px 14px -8px rgb(214 150 20 / .8);
  --btn-sh-h:0 2px 4px rgb(8 45 86 / .06), 0 16px 28px -12px rgb(214 150 20 / .75);
}
.btn-sm{min-height:42px; padding:9px 18px; font-size:15px; gap:8px}
.btn-block{width:100%}

@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover{background-color:var(--btn-bg-h); box-shadow:var(--btn-edge-h), var(--btn-sh-h); transform:translateY(-2px)}
  .btn:not(:disabled, [aria-disabled="true"]):hover .icon:is(:has(> use[href="#i-arrow"]), .arr){transform:translateX(4px)}
  .btn:not(:disabled, [aria-disabled="true"]):hover .icon:has(> use[href="#i-arrow-ur"]){transform:translate(3px,-3px)}
}
.btn:focus-visible{outline:2.5px solid var(--cyan-ink); outline-offset:3px; background-color:var(--btn-bg-h); box-shadow:var(--btn-edge-h), var(--btn-sh-h); transform:translateY(-2px)}
.btn:focus-visible .icon:is(:has(> use[href="#i-arrow"]), .arr){transform:translateX(4px)}
.btn:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):active{transform:translateY(0) scale(.96); box-shadow:var(--btn-edge-h), var(--btn-sh-p); transition-duration:var(--dur-fast); transition-timing-function:var(--ease-out)}
.btn:disabled, .btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; box-shadow:var(--btn-edge); transform:none}
.btn[aria-busy="true"]{color:transparent!important; cursor:progress}
.btn[aria-busy="true"]::after{content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px; border-radius:50%; border:2.5px solid var(--btn-spin); border-right-color:transparent; animation:hl-spin .6s linear infinite}
@keyframes hl-spin{to{transform:rotate(1turn)}}

/* Genel ok kayması: .arr ikonlu herhangi bir bağlantı/düğme ya da .hover-host */
.arr{transition:transform var(--dur) var(--ease-spring)}
@media (hover:hover) and (pointer:fine){
  :is(a, button, .hover-host):hover .arr{transform:translateX(4px)}
}
:is(a, button):focus-visible .arr{transform:translateX(4px)}

/* ---------- Metin bağlantısı ---------- */
.link{
  --link-c:var(--coral);
  position:relative; display:inline-flex; align-items:center; gap:6px; padding-bottom:4px;
  font-weight:700; color:var(--ink); text-decoration:none; border:0; background:none;
  transition:color var(--dur-fast) ease;
}
.link::before, .link::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--link-c); pointer-events:none}
.link::before{opacity:.35}
.link::after{transform:scaleX(0); transform-origin:right center; transition:transform var(--dur) var(--ease-out)}
.link .icon{transition:transform var(--dur) var(--ease-spring)}
@media (hover:hover) and (pointer:fine){
  .link:hover::after{transform:scaleX(1); transform-origin:left center}
  .link:hover .icon:is(:has(> use[href="#i-arrow"]), .arr){transform:translateX(4px)}
  .link:hover .icon:has(> use[href="#i-arrow-ur"]){transform:translate(3px,-3px)}
}
.link:focus-visible{outline-offset:4px; border-radius:4px}
.link:focus-visible::after{transform:scaleX(1); transform-origin:left center}
.link:focus-visible .icon:is(:has(> use[href="#i-arrow"]), .arr){transform:translateX(4px)}

/* ---------- Çip ---------- */
.chip{
  --chip-on-bg:var(--ink); --chip-on-fg:#fff;
  display:inline-flex; align-items:center; gap:6px; min-height:40px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:7px 16px;
  font-weight:700; font-size:15px; line-height:1.2; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:manipulation;
  transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
@media (hover:hover) and (pointer:fine){
  .chip:hover{border-color:var(--ink); transform:translateY(-2px); box-shadow:var(--shadow-s)}
  .chip[aria-pressed="true"]:hover{border-color:var(--chip-on-bg)}
}
.chip:focus-visible{outline:2.5px solid var(--cyan-ink); outline-offset:2px; border-color:var(--ink)}
.chip:active{transform:scale(.95); box-shadow:none; transition-duration:var(--dur-fast); transition-timing-function:var(--ease-out)}
.chip[aria-pressed="true"]{background:var(--chip-on-bg); border-color:var(--chip-on-bg); color:var(--chip-on-fg); animation:hl-press-pop var(--dur-slow) var(--ease-spring)}
@keyframes hl-press-pop{0%{scale:1} 35%{scale:1.07} 100%{scale:1}}

/* ---------- Oyuncu yardımcılar ---------- */
.stamp{display:inline-flex; align-items:center; gap:6px; font-family:var(--fun); font-weight:400; font-size:15px; line-height:1; letter-spacing:.01em; padding:7px 13px 8px; border-radius:999px; background:var(--stamp-bg, var(--sun)); color:var(--stamp-fg, var(--ink)); transform:rotate(var(--stamp-rot, -3deg)); white-space:nowrap}

.squiggle{position:relative; display:inline-block; z-index:0; view-timeline:--hl-sq block}
.squiggle::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:-.2em; height:.34em; z-index:-1; pointer-events:none;
  background:var(--squiggle-c, var(--coral));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 9c16-6 32-6 48.5 0s32 6 48.5 0 32-6 48.5 0 32 6 48.5 0' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 9c16-6 32-6 48.5 0s32 6 48.5 0 32-6 48.5 0 32 6 48.5 0' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.tilt{--tilt:-1.25deg; transition:transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur) var(--ease-out)}
.tilt:nth-child(even){--tilt:1.25deg}
@media (hover:hover) and (pointer:fine){ .tilt:hover{transform:translateY(-4px) rotate(var(--tilt))} }
.tilt:focus-within:has(:focus-visible){transform:translateY(-4px) rotate(var(--tilt))}

@keyframes hl-wiggle{0%, 100%{rotate:0deg} 18%{rotate:-12deg} 42%{rotate:9deg} 64%{rotate:-5deg} 84%{rotate:2deg}}
@media (hover:hover) and (pointer:fine){ :hover > .wiggle, .wiggle:hover{animation:hl-wiggle .55s var(--ease-out)} }
:focus-visible > .wiggle{animation:hl-wiggle .55s var(--ease-out)}

.zoom{overflow:hidden; isolation:isolate}
.zoom :is(img, video){transition:transform var(--dur-slow) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .zoom:hover :is(img, video), .zoom-host:hover .zoom :is(img, video){transform:scale(1.04)} }
.zoom-host:focus-visible .zoom :is(img, video), .zoom-host:focus-within .zoom :is(img, video){transform:scale(1.04)}

.mascot{position:relative; display:inline-block; flex:none; width:var(--mascot-w, 64px); aspect-ratio:120 / 124}
.mascot > img{position:absolute; inset:0; width:100%; height:100%; max-width:none}
.mascot > img + img{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .mascot[data-blink] > img + img{animation:hl-wink 5.6s steps(1, end) 1.8s infinite}
}
@media (hover:hover) and (pointer:fine){ :hover > .mascot > img + img, .mascot:hover > img + img{animation:none; opacity:1} }
@keyframes hl-wink{0%{opacity:0} 93%{opacity:1} 97%{opacity:0}}

/* Ekrana ilk girişte "pop" (core.js .is-in ekler; JS yoksa öğe görünür kalır) */
@media (prefers-reduced-motion:no-preference){
  .pop-in.is-in{animation:hl-pop-in .56s var(--ease-spring) var(--pop-delay, 0ms) both}
}
@keyframes hl-pop-in{from{opacity:0; scale:.6}}

/* ---------- Kaydırmayla giriş (yalnızca CSS, destek + hareket izni varsa) ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal, .reveal-stagger > *{animation:hl-reveal var(--ease-out) both; animation-timeline:view(); animation-range:entry 0% entry 35%}
    .reveal-stagger > :nth-child(2){animation-range:entry 5% entry 40%}
    .reveal-stagger > :nth-child(3){animation-range:entry 10% entry 45%}
    .reveal-stagger > :nth-child(4){animation-range:entry 15% entry 50%}
    .reveal-stagger > :nth-child(5){animation-range:entry 20% entry 55%}
    .reveal-stagger > :nth-child(n+6){animation-range:entry 25% entry 60%}
    .squiggle::after{animation:hl-draw linear both; animation-timeline:--hl-sq; animation-range:entry 60% cover 45%}
  }
}
@keyframes hl-reveal{from{opacity:0; translate:0 14px}}
@keyframes hl-draw{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}

/* ---------- Mobil sabit çubuk ---------- */
.mbar{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:60;
  display:none; align-items:center; gap:6px; padding:6px; border-radius:999px;
  background:rgb(255 255 255 / .92); -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 0 0 1px rgb(8 45 86 / .08), 0 18px 40px -16px rgb(8 45 86 / .5);
  transition:transform var(--dur-slow) var(--ease-spring), opacity var(--dur) var(--ease-out);
}
.mbar.is-away{transform:translateY(calc(100% + 28px + env(safe-area-inset-bottom, 0px))); opacity:0; pointer-events:none; transition-timing-function:var(--ease-drawer), var(--ease-out)}
.mbar .btn{flex:1; min-width:0; min-height:50px; padding:12px 16px; gap:8px}
.mbar-face{width:26px; height:auto; margin-block:-4px; flex:none; transition:rotate var(--dur) var(--ease-spring)}
.mbar .btn:active .mbar-face{rotate:-10deg}
.wa{width:50px; height:50px; border-radius:50%; display:grid; place-items:center; background:#E3F8EC; color:#0B7A3E; text-decoration:none; flex:none; transition:background-color var(--dur-fast) ease, transform var(--dur) var(--ease-spring)}
.wa:active{transform:scale(.92); transition-duration:var(--dur-fast)}
@media (hover:hover) and (pointer:fine){ .wa:hover{background:#CFF2DD; transform:translateY(-2px)} }

/* ---------- Çerez kartı ---------- */
.cookie{
  position:fixed; left:20px; bottom:20px; z-index:70; width:380px; max-width:calc(100% - 24px);
  padding:18px 18px 16px; isolation:isolate; color:var(--ink);
  animation:hl-rise .56s var(--ease-drawer) .7s both;
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), translate var(--dur-slow) var(--ease-drawer);
}
.cookie::before{content:""; position:absolute; inset:0; z-index:-1; background:#fff; border-radius:var(--r-m); box-shadow:0 0 0 1px rgb(8 45 86 / .08), 0 24px 56px -22px rgb(8 45 86 / .5)}
.ck-maskot{position:absolute; z-index:-2; top:-33px; right:22px; width:54px; height:auto; animation:hl-peek .6s var(--ease-spring) 1.25s both}
.cookie h2{font-family:var(--display); font-size:17px; line-height:1.25; font-weight:800; letter-spacing:-.01em; padding-right:64px}
.cookie p{font-size:14px; line-height:1.5; color:var(--ink-2); margin-top:6px}
.cookie .row{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:14px}
.cookie .row button{
  min-height:42px; border:0; border-radius:999px; padding:9px 8px; font-weight:700; font-size:14.5px; line-height:1.15;
  background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-2);
  transition:box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur) var(--ease-spring);
}
@media (hover:hover) and (pointer:fine){ .cookie .row button:hover{box-shadow:inset 0 0 0 1.5px var(--ink); transform:translateY(-1px)} }
.cookie .row button:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ink)}
.cookie .row button:active{transform:scale(.96); transition-duration:var(--dur-fast)}
.cookie.is-leaving{opacity:0; transform:translateY(12px); pointer-events:none}
.ck-prefs{display:grid; gap:2px; margin-top:12px; padding:4px 12px; border-radius:var(--r-s); background:var(--bg-2)}
.ck-opt{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; cursor:pointer}
.ck-opt + .ck-opt{border-top:1px solid var(--line)}
.ck-opt b{display:block; font-size:14.5px; line-height:1.3}
.ck-opt small{display:block; font-size:13px; color:var(--muted); line-height:1.35}
@keyframes hl-rise{from{opacity:0; transform:translateY(24px)}}
@keyframes hl-peek{from{transform:translateY(30px) rotate(8deg)}}

/* Anahtar (switch) */
.switch{
  appearance:none; -webkit-appearance:none; flex:none; margin:0; width:42px; height:26px; border-radius:999px; cursor:pointer;
  background-color:var(--line-2);
  background-image:radial-gradient(circle at center, #fff 9px, transparent 9.5px);
  background-size:26px 26px; background-repeat:no-repeat; background-position:0 0;
  transition:background-color var(--dur-fast) ease, background-position var(--dur) var(--ease-spring);
}
.switch:checked{background-color:var(--green); background-position:16px 0}
.switch:disabled{opacity:.55; cursor:not-allowed}
.switch:focus-visible{outline:2.5px solid var(--cyan-ink); outline-offset:2px}

/* ---------- Diyaloglar (ortak) ---------- */
dialog{
  border:0; padding:0; margin:auto; max-width:none; max-height:none; border-radius:var(--r-l);
  background:#fff; color:var(--ink); box-shadow:var(--shadow-l); overflow:auto; overscroll-behavior:contain;
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out), overlay 180ms allow-discrete, display 180ms allow-discrete;
}
dialog[open]{opacity:1; transform:none; transition-duration:var(--dur), var(--dur-slow), var(--dur-slow), var(--dur-slow); transition-timing-function:var(--ease-out), var(--ease-pop)}
@starting-style{ dialog[open]{opacity:0; transform:translateY(10px) scale(.97)} }
dialog::backdrop{
  background:rgb(6 25 48 / .5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0;
  transition:opacity 180ms var(--ease-out);
  transition:opacity 180ms var(--ease-out), overlay 180ms allow-discrete, display 180ms allow-discrete;
}
dialog[open]::backdrop{opacity:1; transition-duration:var(--dur)}
@starting-style{ dialog[open]::backdrop{opacity:0} }

.x{width:44px; height:44px; border-radius:50%; border:0; padding:0; background:var(--bg-2); color:var(--ink); display:grid; place-items:center; flex:none; cursor:pointer; transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur) var(--ease-spring)}
.x .icon{width:20px; height:20px; stroke-width:2.4; transition:rotate var(--dur) var(--ease-spring)}
@media (hover:hover) and (pointer:fine){ .x:hover{background:var(--coral-50); color:var(--coral-ink)} .x:hover .icon{rotate:90deg} }
.x:focus-visible{outline:2.5px solid var(--cyan-ink); outline-offset:2px}
.x:active{transform:scale(.9); transition-duration:var(--dur-fast)}

/* ---------- Video ışık kutusu (#vdlg) ---------- */
#vdlg{--vw:min(440px, calc(100vw - 32px), calc((100vh - 120px) * 9 / 16)); --vw:min(440px, calc(100vw - 32px), calc((100dvh - 120px) * 9 / 16)); width:var(--vw); background:transparent; box-shadow:none; border-radius:0; overflow:visible}
#vdlg::backdrop{background:rgb(4 16 32 / .84)}
.v-frame{
  position:relative; overflow:hidden; border-radius:var(--r-l); aspect-ratio:9 / 16; width:100%;
  background:#0B2240; box-shadow:0 0 0 1px rgb(255 255 255 / .08), 0 40px 90px -30px rgb(0 0 0 / .7);
}
#vdlg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent}
#vdlg .x{position:absolute; right:12px; top:12px; z-index:3; background:rgb(255 255 255 / .92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.v-load{position:absolute; inset:0; margin:auto; z-index:2; width:44px; height:44px; border-radius:50%; border:3px solid rgb(255 255 255 / .9); border-right-color:transparent; opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease-out)}
.v-frame.is-loading .v-load{opacity:1; animation:hl-spin .7s linear infinite}
.v-cap{margin:14px auto 0; text-align:center; color:#fff; font-weight:600; font-size:15.5px; line-height:1.4}

/* ---------- Duyarlı ---------- */
@media (max-width:720px){
  body{font-size:16px}
  .mbar{display:flex}
  .cookie{left:12px; right:12px; width:auto; max-width:none; bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
  html:not(.mbar-away) .cookie{translate:0 -70px}
  .ck-maskot{width:48px; top:-29px}

  /* Form: alttan açılan sayfa */
  #vdlg{--vw:min(440px, calc(100vw - 16px), calc((100vh - 96px) * 9 / 16)); --vw:min(440px, calc(100vw - 16px), calc((100dvh - 96px) * 9 / 16))}
  .v-frame{border-radius:var(--r-m)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{transition:none!important; animation:none!important}
}



/* ── 01 · Duyuru çubuğu (lacivert zemin, beyaz metin; tek renk vurgusu: güneş sarısı damga) ── */
.announce{position:relative; margin-inline:calc(-1 * var(--gutter)); display:flex; justify-content:center; align-items:center; min-height:44px; padding:8px 60px; background:var(--ink); color:rgba(255,255,255,.84); font-size:14.5px; line-height:1.4; font-weight:500; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
.announce.is-leaving{opacity:0; transform:translateY(-4px)}
.announce .an-msg{display:flex; align-items:center; gap:12px; min-width:0; max-width:100%; white-space:nowrap}
.announce .an-sm{display:none}
.announce .stamp{--stamp-bg:var(--sun); --stamp-fg:var(--ink); --stamp-rot:-4deg; --pop-delay:250ms; position:relative; flex:none; padding:4px 11px 5px; font-size:13.5px}
.announce .an-spark{position:absolute; right:-11px; top:-5px; width:12px; height:12px; fill:none; stroke:var(--sun); stroke-width:2.2; stroke-linecap:round}
.announce .an-txt{min-width:0; overflow:hidden; text-overflow:ellipsis}
.announce strong{font-weight:800; color:#fff}
.announce .an-dot{width:4px; height:4px; flex:none; border-radius:50%; background:rgba(255,255,255,.4)}
.announce .an-link{display:inline-flex; align-items:center; gap:4px; flex:none; font-weight:800; color:#fff; text-decoration:none; border-radius:6px}
.announce .an-link span{text-decoration:underline wavy rgba(255,255,255,.5); text-decoration-thickness:1.5px; text-underline-offset:5px; text-decoration-skip-ink:none; transition:text-decoration-color var(--dur-fast) var(--ease-out)}
.announce .an-link .icon{width:15px; height:15px; stroke-width:2.4}
.announce .an-x{position:absolute; right:max(6px, calc(var(--gutter) - 10px)); top:50%; width:36px; height:36px; margin-top:-18px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; color:rgba(255,255,255,.8); transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
.announce .an-x svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; transition:transform var(--dur) var(--ease-spring)}
.announce .an-x:active{transform:scale(.9)}
.announce :focus-visible{outline:2px solid #fff; outline-offset:2px}
.announce .an-x:focus-visible{color:#fff; background:rgba(255,255,255,.14)}
.announce .an-link:focus-visible span{text-decoration-color:#fff}
@media (hover:hover) and (pointer:fine){
  .announce .an-link:hover span{text-decoration-color:#fff}
  .announce .an-x:hover{color:#fff; background:rgba(255,255,255,.12)}
  .announce .an-x:hover svg{transform:rotate(90deg)}
}

/* ── 01 · Header ──────────────────────────────────────────────────── */
/* Sıkışma: header yapışkan konumda --hd-shrink kadar yukarı taşar (düzen değişmez);
   içerik transform ile yeniden ortalanır, altta ince çizgi belirir (gölge yok). */
.header{--hd-h:76px; --hd-shrink:10px; position:sticky; top:calc(env(safe-area-inset-top,0px) - var(--hd-shrink)); z-index:50; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); background:rgba(255,255,255,.95); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); box-shadow:0 1px 0 rgba(225,231,238,0), 0 14px 32px -22px rgba(8,45,86,0); transition:box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out)}
.header.scrolled{background:rgba(255,255,255,.95); box-shadow:0 1px 0 var(--line)}
.header .bar{max-width:var(--wrap); height:var(--hd-h); margin-inline:auto; display:flex; align-items:center; gap:clamp(16px,1.7vw,24px); transition:transform var(--dur) var(--ease-out)}
.header.scrolled .bar{transform:translateY(calc(var(--hd-shrink) / 2))}
.header .brand{display:flex; flex:none; border-radius:10px}
.header .brand img{height:48px; width:auto}

/* Nav öğeleri: hover/aktif = çizilerek beliren mercan dalga alt çizgi */
.header .nav{display:flex; align-items:center; gap:2px}
.header .nav-a{position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 9px; border:0; border-radius:999px; background:none; font:inherit; font-size:15.5px; font-weight:600; line-height:1; letter-spacing:-.005em; color:var(--ink-2); text-decoration:none; white-space:nowrap; cursor:pointer; transition:color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
.header .nav-a:active{transform:scale(.96)}
.header .nav .nav-a::after{content:""; position:absolute; left:9px; right:9px; bottom:3px; height:6px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3Q4 .2 8 3T16 3' fill='none' stroke='%23FC6961' stroke-width='2.2'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 6px; clip-path:inset(0 100% 0 0); transition:clip-path 200ms var(--ease-out)}
.header .nav .nav-a.has-caret::after{right:27px}
.header .nav .nav-a.is-active, .header .nav-a[aria-expanded="true"], .header .nav-a:focus-visible{color:var(--ink)}
.header .nav .nav-a.is-active::after, .header .nav .nav-a[aria-expanded="true"]::after, .header .nav .nav-a:focus-visible::after{clip-path:inset(0 0 0 0); transition-duration:420ms}
.header .nav-a:focus-visible{outline-offset:2px; border-radius:999px}
/* yardımcı öğeler (dil, giriş): yumuşak pill */
.header .bar-end .nav-a::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--bg-2); opacity:0; transform:scale(.86); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring)}
.header .bar-end .nav-a[aria-expanded="true"]::before, .header .bar-end .nav-a:focus-visible::before{opacity:1; transform:none}
.header .hd-caret{width:12px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur) var(--ease-spring)}
.header [aria-expanded="true"] > .hd-caret{transform:rotate(180deg)}
.header .lang .icon{width:18px; height:18px; stroke-width:1.8}
@media (hover:hover) and (pointer:fine){
  .header .nav-a:hover{color:var(--ink)}
  .header .nav .nav-a:hover::after{clip-path:inset(0 0 0 0); transition-duration:420ms}
  .header .bar-end .nav-a:hover::before{opacity:1; transform:none}
}

/* Açılır menüler (Programlar + dil) */
.header .nav-dd{position:relative}
.header .dd{position:absolute; top:calc(100% + 18px); left:-8px; z-index:2; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast)}
.header .dd::before{content:""; position:absolute; left:0; right:0; top:-20px; height:20px}
.header .nav-dd.is-open > .dd{opacity:1; visibility:visible; transform:none; transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s}
.header .dd-card{position:relative; z-index:1; padding:8px; background:#fff; border-radius:var(--r-m); box-shadow:0 0 0 1px var(--line), 0 30px 60px -30px rgba(8,45,86,.38), 0 10px 22px -16px rgba(8,45,86,.16)}
/* meraklı maskot kartın arkasından bakar */
.header .dd-peek{position:absolute; z-index:0; top:-27px; right:44px; width:58px; height:auto; transform:translateY(24px) rotate(10deg); transition:transform 160ms var(--ease-out)}
.header .nav-dd.is-open .dd-peek{transform:none; transition:transform 460ms var(--ease-spring) 110ms}
.header .dd-prog{width:604px}
.header .dd-eyebrow{padding:10px 12px 8px; font-family:var(--fun); font-size:16px; line-height:1.2; color:var(--ink)}
.header .dd-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px}
.header .dd-i{--c:var(--bg-2); display:grid; grid-template-columns:54px 1fr; column-gap:14px; align-items:center; padding:10px 12px; border-radius:16px; color:var(--ink); text-decoration:none; transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
.header .dd-i.c-or{--c:var(--orange)}
.header .dd-i.c-cy{--c:var(--cyan)}
.header .dd-i.c-li{--c:var(--lilac)}
.header .dd-i.c-gr{--c:var(--green)}
.header .dd-i.c-ink{--c:var(--ink)}
.header .dd-b{grid-row:1 / 3; width:54px; height:50px; display:grid; place-content:center; text-align:center; border-radius:15px; background:var(--c); color:var(--ink); font-family:var(--display); font-weight:800; font-size:16px; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; transition:transform var(--dur) var(--ease-spring)}
.header .dd-b small{display:block; margin-top:3px; font-family:var(--body); font-size:11.5px; font-weight:700; letter-spacing:.01em}
.header .dd-i.c-ink .dd-b{color:#fff}
.header .dd-b .icon{width:22px; height:22px; stroke-width:1.8}
.header .dd-t{align-self:end; display:flex; align-items:center; gap:6px; font-family:var(--display); font-weight:700; font-size:17px; line-height:1.25; letter-spacing:-.01em}
.header .dd-d{align-self:start; margin-top:2px; font-size:13.5px; line-height:1.4; color:var(--ink-2)}
.header .dd-arr{width:15px; height:15px; stroke-width:2.4; color:var(--ink); opacity:0; transform:translateX(-5px); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring)}
.header .dd-sep{height:1px; margin:6px 12px; background:var(--line)}
.header .dd-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px; padding:12px 14px 12px 16px; border-radius:14px; background:var(--cyan-50); font-size:13.5px; color:var(--ink-2)}
.header .dd-foot b{color:var(--ink); font-weight:700}
.header .dd-all{display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--ink); text-decoration:none; border-radius:8px}
.header .dd-all .icon{width:15px; height:15px; stroke-width:2.4}
.header .dd-i:active, .header .dd-l:active{transform:scale(.98)}
.header .dd-i:focus-visible{outline-offset:0; border-radius:16px; background:var(--bg-2)}
.header .dd-i:focus-visible .dd-b{transform:rotate(-6deg) scale(1.06)}
.header .dd-i:focus-visible .dd-arr{opacity:1; transform:none}

.header .dd-right > .dd{left:auto; right:-6px}
.header .dd-lang{width:236px; padding:6px}
.header .dd-l{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:12px; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
.header .dd-l:focus-visible{outline-offset:0; background:var(--bg-2)}
.header .dd-code{width:34px; height:26px; display:grid; place-items:center; flex:none; border-radius:8px; font-size:11.5px; font-weight:800; letter-spacing:.06em; color:var(--ink); transition:transform var(--dur) var(--ease-spring)}
.header .dd-code{background:var(--bg-2)}
.header .dd-l[aria-current] .dd-code{background:var(--ink); color:#fff}
.header .dd-l .dd-chk{margin-left:auto; width:16px; height:16px; fill:none; stroke:var(--coral-ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  .header .dd-i:hover{background:var(--bg-2)}
  .header .dd-i:hover .dd-b{transform:rotate(-6deg) scale(1.06)}
  .header .dd-i:hover .dd-arr{opacity:1; transform:none}
  .header .dd-l:hover{background:var(--bg-2)}
  .header .dd-l:not([aria-current]):hover .dd-code{background:#fff}
  .header .dd-l:hover .dd-code{transform:rotate(-6deg) scale(1.06)}
}

/* Sağ uç: dil, giriş, CTA, hamburger */
.header .bar-end{margin-left:auto; display:flex; align-items:center; gap:2px}
.header .hd-cta{margin-left:10px}
.header .hd-cta .icon{margin-right:-2px}

.header .menu-btn{display:none; position:relative; flex:none; width:44px; height:44px; margin-left:6px; padding:0; border:0; border-radius:14px; background:var(--bg-2); color:var(--ink); transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
.header .menu-btn:active{transform:scale(.94)}
.header .menu-btn[aria-expanded="true"]{background:var(--ink); color:#fff}
.header .mb-l{position:absolute; left:13px; width:18px; height:2.4px; border-radius:2px; background:currentColor; transition:transform 360ms var(--ease-spring), opacity var(--dur-fast) var(--ease-out)}
.header .mb-l:nth-child(1){top:14.8px}
.header .mb-l:nth-child(2){top:20.8px; width:13px}
.header .mb-l:nth-child(3){top:26.8px}
.header .menu-btn[aria-expanded="true"] .mb-l:nth-child(1){transform:translateY(6px) rotate(45deg)}
.header .menu-btn[aria-expanded="true"] .mb-l:nth-child(2){opacity:0; transform:translateX(-6px)}
.header .menu-btn[aria-expanded="true"] .mb-l:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (hover:hover) and (pointer:fine){ .header .menu-btn[aria-expanded="false"]:hover{background:#E8EDF3} .header .menu-btn[aria-expanded="false"]:hover .mb-l:nth-child(2){transform:scaleX(1.38); transform-origin:0 50%} }

/* ── 01 · Mobil menü paneli ───────────────────────────────────────── */
#drawer{position:fixed; left:0; right:0; top:var(--dr-top,64px); bottom:0; z-index:65; display:flex; flex-direction:column; background:var(--bg); border-top:1px solid var(--line); overflow-y:auto; overscroll-behavior:contain; opacity:0; transform:translateY(-8px); transition:opacity 160ms var(--ease-out), transform 160ms var(--ease-out)}
#drawer.is-open{opacity:1; transform:none; transition-duration:var(--dur)}
#drawer .dr-in{flex:1 0 auto; padding:18px clamp(16px,3vw,40px) 22px}
#drawer .dr-wrap{max-width:640px; margin-inline:auto}
#drawer .dr-hello{display:flex; align-items:center; gap:12px; margin-bottom:14px}
#drawer .dr-mascot{display:flex; flex:none}
#drawer .dr-hello p{display:grid; line-height:1.25}
#drawer .dr-hi{font-family:var(--fun); font-weight:400; font-size:19px; color:var(--ink)}
#drawer .dr-hello span{font-size:14.5px; color:var(--ink-2)}
#drawer .dr-ages{display:grid; grid-template-columns:1fr 1fr; gap:10px}
#drawer .dr-age{display:flex; flex-direction:column; gap:2px; min-height:72px; justify-content:center; padding:10px 16px; border-radius:18px; background:var(--c50); box-shadow:inset 0 0 0 1.5px transparent; color:var(--ink); text-decoration:none; transition:transform var(--dur) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out)}
#drawer .dr-ages li:nth-child(1) .dr-age{--c:var(--orange); --c50:var(--orange-50)}
#drawer .dr-ages li:nth-child(2) .dr-age{--c:var(--cyan); --c50:var(--cyan-50)}
#drawer .dr-ages li:nth-child(3) .dr-age{--c:var(--lilac); --c50:var(--lilac-50)}
#drawer .dr-ages li:nth-child(4) .dr-age{--c:var(--green); --c50:var(--green-50)}
#drawer .dr-age small{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums}
#drawer .dr-age small::before{content:""; width:9px; height:9px; flex:none; border-radius:50%; background:var(--c)}
#drawer .dr-age b{font-family:var(--display); font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.2}
#drawer .dr-list{margin-top:12px}
#drawer .dr-list a{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; border-bottom:1px solid var(--line); font-family:var(--display); font-size:21px; font-weight:700; letter-spacing:-.015em; color:var(--ink); text-decoration:none}
#drawer .dr-list a span{position:relative}
#drawer .dr-list a span::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:6px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3Q4 .2 8 3T16 3' fill='none' stroke='%23FC6961' stroke-width='2.2'/%3E%3C/svg%3E") repeat-x 0 50% / 16px 6px; clip-path:inset(0 100% 0 0); transition:clip-path 420ms var(--ease-out)}
#drawer .dr-list a.is-active span::after{clip-path:inset(0 0 0 0)}
#drawer .dr-list a .icon{width:19px; height:19px; stroke-width:2.2; color:var(--ink-2); transition:transform var(--dur) var(--ease-spring), color var(--dur-fast) var(--ease-out)}
#drawer .dr-list a:focus-visible{outline-offset:2px}
#drawer .dr-sub{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px}
#drawer .dr-sub-links{display:flex; gap:2px; margin-left:-10px}
#drawer .dr-sub-links a{padding:8px 10px; border-radius:999px; font-size:15.5px; font-weight:600; color:var(--ink-2); text-decoration:none; transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)}
#drawer .dr-langs{display:flex; gap:6px}
#drawer .dr-langs a{min-width:42px; height:34px; display:grid; place-items:center; padding:0 10px; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--line); font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--ink-2); text-decoration:none; transition:box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring)}
#drawer .dr-langs a[aria-current]{background:var(--ink); color:#fff; box-shadow:none}
#drawer .dr-foot{position:sticky; bottom:0; padding:14px clamp(16px,3vw,40px) calc(14px + env(safe-area-inset-bottom,0px)); background:var(--bg); border-top:1px solid var(--line); box-shadow:0 -12px 24px -20px rgba(8,45,86,.25)}
#drawer .dr-foot .dr-wrap{display:grid; justify-items:center; gap:10px}
#drawer .dr-cta{width:100%}
#drawer .dr-wa{display:inline-flex; align-items:center; gap:8px; padding:4px 8px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--ink-2); text-decoration:none}
#drawer .dr-wa .icon{width:19px; height:19px; color:#0B7A3E}
#drawer .dr-wa .num{color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
#drawer .dr-age:active{transform:scale(.97)}
#drawer .dr-langs a:active{transform:scale(.97)}
#drawer .dr-age:focus-visible{outline-offset:3px; border-radius:18px; box-shadow:inset 0 0 0 1.5px var(--c)}
@media (hover:hover) and (pointer:fine){
  #drawer .dr-age:hover{box-shadow:inset 0 0 0 1.5px var(--c)}
  #drawer .dr-ages li:nth-child(odd) .dr-age:hover{transform:translateY(-3px) rotate(-1.5deg)}
  #drawer .dr-ages li:nth-child(even) .dr-age:hover{transform:translateY(-3px) rotate(1.5deg)}
  #drawer .dr-list a:hover span::after{clip-path:inset(0 0 0 0)}
  #drawer .dr-list a:hover .icon{color:var(--ink)}
  #drawer .dr-sub-links a:hover{color:var(--ink); background:var(--bg-2)}
  #drawer .dr-langs a:not([aria-current]):hover{box-shadow:inset 0 0 0 1.5px var(--ink); color:var(--ink); transform:translateY(-2px)}
}
/* açılışta kademeli giriş (yalnızca açılırken; kapanışta panel bütün olarak söner) */
@keyframes hd-rise{from{opacity:0; transform:translateY(10px)}}
@keyframes hd-pop{from{opacity:0; transform:scale(.5) rotate(-12deg)}}
#drawer.is-open .dr-st{animation:hd-rise 300ms var(--ease-out) both; animation-delay:calc(30ms + var(--i,0) * 28ms)}
#drawer.is-open .dr-mascot{animation:hd-pop 520ms var(--ease-spring) 60ms both}

@media (max-width:1180px){
  .header .nav{display:none}
  .header .menu-btn{display:inline-block}
}
@media (min-width:1181px){ #drawer{display:none!important} }
@media (min-width:1181px) and (max-width:1339px){
  .header .bar{gap:16px}
  .header .brand img{height:38px}
  .header .nav-a{padding:0 8px}
  .header .nav .nav-a::after{left:8px; right:8px}
  .header .nav .nav-a.has-caret::after{right:26px}
  .header .nav-blog{display:none}
  .header .hd-cta{margin-left:6px}
}
@media (max-width:960px){
  .announce .an-lg{display:none}
  .announce .an-sm{display:flex}
}
@media (max-width:720px){
  .announce{min-height:40px; padding:7px 44px 7px 16px; font-size:13.5px}
  .announce .an-msg{gap:9px}
  .announce .stamp{font-size:12.5px; padding:3px 9px 4px}
  .announce .an-x{right:4px}
  .header{--hd-h:64px; --hd-shrink:6px}
  .header .brand img{height:38px}
  .header .login, .header .lang-dd, .header .hd-cta{display:none}
  #drawer .dr-list a{font-size:20px; min-height:52px}
}
@media (max-width:400px){
  .announce{padding-left:12px; font-size:13px}
  .announce .an-dot{display:none}
  .announce .an-msg{gap:7px}
}


/* ============ HERO (kök: .hero) ============ */
.hero, .proof{
  --h-sun:#FFC94A; --h-sun-50:#FFF3D1;
  --h-orange:var(--orange, #FB991E); --h-lilac:var(--lilac, #C997CB); --h-green:var(--green, #98C33F);
  --h-live:#12B76A;
}
.hero{--pad:clamp(16px,3vw,40px); position:relative; isolation:isolate; overflow:clip; margin-inline:calc(-1 * var(--pad)); padding:clamp(24px,2.8vw,40px) var(--pad) clamp(64px,7vw,100px); background:var(--h-sun-50)}
.hero .hero-in{max-width:var(--wrap); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(28px,4vw,56px); align-items:center}
.hero .hero-copy{min-width:0}
.hero .hero-edge{position:absolute; left:0; bottom:-1px; width:100%; height:clamp(26px,4vw,56px); color:var(--bg); z-index:3; pointer-events:none}

/* Etiket satırı + canlı nokta (sayfadaki tek sonsuz animasyon: nabız) */
.hero .hero-tag{display:inline-flex; align-items:center; gap:10px; background:#fff; border-radius:999px; padding:7px 16px 7px 12px; font-size:14.5px; font-weight:700; color:var(--ink); box-shadow:0 0 0 1.5px rgba(8,45,86,.07); margin-bottom:clamp(14px,1.6vw,20px)}
.hero .hero-tag i{font-style:normal; color:var(--muted); font-weight:500; margin-inline:2px}
.hero .hero-dot{position:relative; width:9px; height:9px; border-radius:50%; background:var(--h-live); flex:none}
.hero .hero-dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--h-live); opacity:0; animation:hero-pulse 2.4s var(--ease-out) infinite}
@keyframes hero-pulse{0%{transform:scale(1); opacity:.5} 70%,100%{transform:scale(2.8); opacity:0}}

/* H1 + çizilerek beliren gülümseme (logodaki amblemden) */
.hero h1{font-family:var(--display); font-weight:800; font-size:clamp(42px,5.3vw,76px); line-height:.98; letter-spacing:-.038em; color:var(--ink); margin-left:-.035em; text-wrap:initial}
.hero .hero-smile{position:relative; white-space:nowrap}
.hero .hero-smile svg{position:absolute; left:-.04em; top:.9em; width:calc(100% + .1em); height:.36em; overflow:visible; pointer-events:none}
.hero .hero-smile path{fill:none; stroke:var(--coral); stroke-width:11; stroke-linecap:round; animation:hero-draw 760ms var(--ease-out) 380ms backwards}
@keyframes hero-draw{from{stroke-dasharray:1 2; stroke-dashoffset:1.06} to{stroke-dasharray:1 2; stroke-dashoffset:0}}

.hero .hero-sub{font-size:clamp(17px,1.4vw,19px); line-height:1.55; color:var(--ink-2); max-width:47ch; margin-top:clamp(18px,2vw,26px)}
.hero .hero-sub .hs-short{display:none}

/* ---- Tanışma dersi kartı (#lead) ---- */
.hero .hero-card{position:relative; margin-top:clamp(20px,2vw,26px); max-width:560px; background:#fff; border-radius:var(--r-l); padding:20px 22px 16px; box-shadow:0 1px 2px rgba(8,45,86,.06), 0 22px 44px -26px rgba(8,45,86,.32)}
.hero .hero-card h2{font-family:var(--display); font-weight:800; font-size:21px; line-height:1.15; letter-spacing:-.015em; padding-right:96px}
.hero .hc-stamp{position:absolute; top:-15px; right:22px; font-family:'Poetsen One', var(--display); font-size:16px; line-height:1; color:var(--ink); background:var(--coral); padding:9px 14px 10px; border-radius:999px; transform:rotate(-6deg); box-shadow:0 6px 14px -8px rgba(194,52,43,.7); animation:hero-stamp 520ms var(--ease-spring) 520ms backwards}
@keyframes hero-stamp{from{opacity:0; transform:rotate(-18deg) scale(.4)}}

.hero .who{margin-top:12px}
.hero .hc-label{font-size:13.5px; font-weight:700; color:var(--ink-2); margin-bottom:8px}
.hero .who-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.hero .who-o{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:56px; padding:8px 4px; border-radius:16px; background:var(--bg-2); text-align:center; line-height:1.15}
/* Static age-group labels. */
.hero .who-o b{font-family:var(--display); font-weight:800; font-size:18px; white-space:nowrap; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink)}
.hero .who-o small{font-size:12.5px; font-weight:600; color:var(--ink-2)}

.hero .hc-row{display:flex; margin-top:12px}
.hero .hc-languages{margin-top:14px}
.hero .hc-badges{display:flex; flex-wrap:wrap; gap:6px}
.hero .hc-badges li{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--bg-2); font-size:13px; font-weight:700}
.hero .hc-badges li::before{content:""; width:8px; height:8px; flex:none; border-radius:50%; background:var(--c)}
.hero .hc-go{height:56px; padding-inline:24px 22px; border-radius:16px}

.hero .hc-notes{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:13px; padding-top:12px; border-top:1.5px dashed var(--line); font-size:14px; font-weight:500; color:var(--ink-2)}
.hero .hc-notes li{display:inline-flex; align-items:center; gap:7px}
.hero .hc-notes .ck{width:18px; height:18px; border-radius:50%; background:var(--green-50); color:#3E6B0F; display:grid; place-items:center; flex:none}
.hero .hc-notes .ck svg{width:12px; height:12px; stroke-width:3}

/* ---- Medya ---- */
.hero .hero-media{position:relative; min-width:0; padding:48px 34px 4px}
.hero .hm-stage{position:relative; max-width:460px; margin-inline:auto; animation:hero-rise 760ms var(--ease-out) backwards}
@keyframes hero-rise{from{transform:translateY(18px) scale(.97)}}
.hero .hm-frame{position:relative; z-index:1; aspect-ratio:4/5; border-radius:32px; overflow:hidden; background:#E9DFC9; border:6px solid #fff; box-shadow:0 30px 60px -34px rgba(8,45,86,.45)}
.hero .hm-frame video{width:100%; height:100%; object-fit:cover; object-position:50% 50%}
.hero .hm-glass{color:var(--ink); background:rgba(255,255,255,.84); -webkit-backdrop-filter:blur(12px) saturate(1.5); backdrop-filter:blur(12px) saturate(1.5); box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 6px 16px -10px rgba(8,45,86,.5)}
.hero .hm-live{position:absolute; left:14px; top:14px; display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 11px; border-radius:999px; font-size:13.5px; font-weight:700; animation:hero-fade 500ms var(--ease-out) 300ms backwards}
.hero .hm-live > span{width:8px; height:8px; border-radius:50%; background:var(--h-live)}
.hero .hm-pause{position:absolute; right:14px; top:14px; width:40px; height:40px; border:0; border-radius:50%; display:grid; place-items:center; transition:transform var(--dur) var(--ease-spring), background-color var(--dur-fast) linear}
.hero .hm-pause svg{width:16px; height:16px}
.hero .hm-pause .i-play{display:none; fill:currentColor; stroke:currentColor; stroke-width:1.5; margin-left:2px}
.hero .hm-pause.is-paused .i-play{display:block}
.hero .hm-pause.is-paused .i-pause{display:none}
.hero .hm-pause:active{transform:scale(.92)}
.hero .hm-pause:focus-visible{outline:3px solid var(--cyan-ink); outline-offset:3px; border-radius:50%}

/* Veli alıntısı (cam kart) */
.hero .hm-quote{position:absolute; z-index:2; left:16px; bottom:16px; max-width:calc(100% - 32px); margin:0; padding:14px 18px 13px 16px; border-radius:22px; background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5); box-shadow:0 0 0 1px rgba(255,255,255,.7), 0 14px 30px -18px rgba(8,45,86,.55); animation:hero-up 560ms var(--ease-out) 420ms backwards}
.hero .hm-quote blockquote{margin:0; position:relative; padding-left:30px}
.hero .hm-quote blockquote::before{content:"“"; position:absolute; left:-1px; top:-7px; font-family:'Poetsen One', var(--display); font-size:46px; line-height:1; color:var(--coral)}
.hero .hm-quote p{font-family:var(--display); font-weight:800; font-size:clamp(18px,1.55vw,21px); line-height:1.2; letter-spacing:-.015em; color:var(--ink)}
.hero .hm-quote figcaption{display:flex; align-items:center; gap:8px; margin-top:9px; padding-left:30px; font-size:13.5px; color:var(--ink-2)}
.hero .hm-quote figcaption b{color:var(--ink); font-weight:700}
.hero .hm-ini{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--coral-50); color:var(--coral-ink); font-weight:800; font-size:12.5px; flex:none}
@keyframes hero-up{from{opacity:0; transform:translateY(14px)}}
@keyframes hero-fade{from{opacity:0}}

/* Dekor: marka şekilleri (düz, el çizimi hissi) */
.hero .hm-deco{position:absolute; z-index:0; pointer-events:none; overflow:visible}
.hero .hm-spark{left:-40px; top:-42px; width:56px; color:var(--coral)}
.hero .hm-spark path{animation:hero-draw 380ms var(--ease-out) backwards}
.hero .hm-spark path:nth-child(1){animation-delay:1100ms}
.hero .hm-spark path:nth-child(2){animation-delay:1180ms}
.hero .hm-spark path:nth-child(3){animation-delay:1260ms}

/* Maskot: çerçevenin üst kenarından bakar, arada bir göz kırpar */
.hero .hm-mascot{position:absolute; z-index:0; right:15%; bottom:calc(100% - 36px); width:92px; animation:hero-peek 640ms var(--ease-spring) 1000ms backwards}
.hero .hm-mascot img{width:100%; height:auto; transform:rotate(8deg); transform-origin:50% 90%; transition:transform var(--dur) var(--ease-spring)}
.hero .hm-mascot .m-wink{position:absolute; inset:0; opacity:0; animation:hero-wink 6.5s linear 1.6s infinite}
.hero .hm-mascot .m-happy{animation:hero-wink-off 6.5s linear 1.6s infinite}
@keyframes hero-peek{from{transform:translateY(62%)}}
@keyframes hero-wink{0%,11%{opacity:0} 12%,17%{opacity:1} 18%,100%{opacity:0}}
@keyframes hero-wink-off{0%,11%{opacity:1} 12%,17%{opacity:0} 18%,100%{opacity:1}}

/* Farklı dillerde "Merhaba" balonları: yüklemede sırayla pop (bir kez) */
.hero .hm-hi{position:absolute; inset:0; z-index:2; pointer-events:none}
.hero .hm-hi li{position:absolute; pointer-events:auto; font-family:'Poetsen One', var(--display); font-size:18px; line-height:1; color:var(--ink); background:var(--c); padding:10px 15px 11px; border-radius:18px; white-space:nowrap; transform:rotate(var(--r)); transform-origin:var(--o); box-shadow:0 8px 18px -10px rgba(8,45,86,.45); transition:transform var(--dur) var(--ease-spring); animation:hero-pop 520ms var(--ease-spring) var(--d) backwards}
.hero .hm-hi li::after{content:""; position:absolute; bottom:-5px; width:14px; height:14px; background:inherit; border-radius:3px; transform:rotate(45deg)}
.hero .hm-hi .t-r::after{right:20px}
.hero .hm-hi .t-l::after{left:20px}
.hero .hm-hi .hi-en{--c:var(--cyan); --r:-7deg; --o:90% 100%; --d:640ms; left:-38px; top:15%}
.hero .hm-hi .hi-fr{--c:#fff; --r:6deg; --o:10% 100%; --d:760ms; right:-42px; top:29%}
.hero .hm-hi .hi-es{--c:#fff; --r:5deg; --o:90% 100%; --d:880ms; left:-30px; top:47%}
.hero .hm-hi .hi-de{--c:var(--cyan); --r:-5deg; --o:10% 100%; --d:1000ms; right:-30px; top:55%}
@keyframes hero-pop{from{opacity:0; transform:rotate(calc(var(--r) * 2.5)) scale(.35)}}

@media (hover:hover) and (pointer:fine){
  .hero .hm-pause:hover{transform:scale(1.08); background:#fff}
  .hero .hm-mascot:hover img{transform:rotate(-4deg) translateY(-4px)}
  .hero .hm-mascot:hover .m-wink{opacity:1; animation:none}
  .hero .hm-mascot:hover .m-happy{opacity:0; animation:none}
  .hero .hm-hi li:hover{transform:rotate(calc(var(--r) * -1.4)) scale(1.08)}
}

/* ============ GÜVEN ŞERİDİ (kök: .proof) ============ */
.proof{
  --pf-gap:16px;
  position:relative; z-index:2; list-style:none;
  max-width:var(--wrap); margin:-44px auto 0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--pf-gap);
}
.proof > li{
  --c:var(--cyan); --c50:var(--cyan-50); --cink:var(--cyan-ink, #00718A); --rot:-.8deg;
  position:relative; min-width:0; display:flex; flex-direction:column; gap:10px;
  padding:18px 18px 16px; border-radius:26px; background:#fff;
  box-shadow:0 1px 0 rgb(8 45 86 / .04), 0 14px 32px -18px rgb(8 45 86 / .35), inset 0 0 0 1.5px var(--line);
  transform:rotate(var(--rot));
  transition:transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.proof > li:nth-child(2){--rot:.7deg}
.proof > li:nth-child(3){--rot:-.5deg}
.proof > li:nth-child(4){--rot:.9deg}
.proof > li:nth-child(5){--rot:-.6deg}

.proof .pf-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px}
.proof .pf-ic{
  width:46px; height:46px; flex:none; display:grid; place-items:center; color:var(--cink);
  background:var(--c50); border-radius:46% 54% 50% 50% / 52% 46% 54% 48%;
  transition:transform var(--dur) var(--ease-spring), border-radius var(--dur-slow) var(--ease-out);
}
.proof .pf-ic svg{width:22px; height:22px; stroke-width:1.9}
.proof .pf-tag{--stamp-bg:var(--coral-50); --stamp-fg:var(--coral-ink); --stamp-rot:3deg; font-size:13.5px; padding:6px 11px 7px; transition:transform var(--dur) var(--ease-spring)}

.proof .pf-t{margin:4px 0 0; font-family:var(--display); font-weight:800; font-size:clamp(22px,1.9vw,27px); line-height:1.05; letter-spacing:-.025em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.proof .pf-t small{font-size:.62em; font-weight:700; letter-spacing:-.01em; margin-left:.1em}
.proof .pf-team{white-space:normal; overflow-wrap:break-word}
.proof .pf-d{margin:0; font-size:14.5px; line-height:1.42; color:var(--ink-2); text-wrap:pretty}
.proof .pf-d strong{color:var(--ink); font-weight:700}

/* alt görseller */
.proof .pf-foot{margin-top:auto; padding-top:10px; border-top:1.5px dashed var(--line); display:flex; align-items:center; gap:8px; min-height:44px}
.proof .pf-av{display:flex}
.proof .pf-av img{width:30px; height:30px; border-radius:50%; object-fit:cover; background:var(--c50); mix-blend-mode:multiply; box-shadow:0 0 0 2px #fff; margin-left:-8px; transition:transform var(--dur) var(--ease-spring)}
.proof .pf-av img:first-child{margin-left:0}
.proof .pf-more{font-weight:700; font-size:13px; color:var(--cink); background:var(--c50); padding:4px 9px; border-radius:999px}
.proof .pf-langs{display:grid; grid-template-columns:repeat(auto-fit,minmax(28px,1fr)); gap:4px; width:100%}
.proof .pf-langs span{display:grid; place-items:center; height:26px; border-radius:9px; font-weight:800; font-size:11.5px; letter-spacing:.04em; color:var(--ink); transition:transform var(--dur) var(--ease-spring)}
.proof .pf-langs .l-en{background:var(--cyan)} .proof .pf-langs .l-de{background:var(--orange, #FB991E)} .proof .pf-langs .l-fr{background:var(--lilac, #C997CB)}
.proof .pf-langs .l-es{background:var(--sun, #FFC94A)} .proof .pf-langs .l-ru{background:var(--green, #98C33F)} .proof .pf-langs .l-zh{background:var(--orange)} .proof .pf-langs .l-tr{background:var(--coral)}
.proof .pf-laurel{width:30px; height:30px; flex:none; color:var(--cink)}
.proof .pf-note{font-size:13px; line-height:1.3; color:var(--ink-2)}
.proof .pf-note b{color:var(--ink)}
.proof .pf-steps{display:grid; grid-template-columns:repeat(6,1fr); align-items:end; gap:3px; width:100%; height:34px}
.proof .pf-steps i{display:block; border-radius:5px 5px 3px 3px; background:var(--c); opacity:.35; transition:transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease-out)}
.proof .pf-steps i:nth-child(1){height:30%} .proof .pf-steps i:nth-child(2){height:42%} .proof .pf-steps i:nth-child(3){height:55%}
.proof .pf-steps i:nth-child(4){height:68%} .proof .pf-steps i:nth-child(5){height:82%} .proof .pf-steps i:nth-child(6){height:100%; opacity:1}
.proof .pf-steps-l{display:flex; justify-content:space-between; width:100%; font-size:11.5px; font-weight:700; color:var(--cink); margin-top:4px}
.proof .pf-foot.col{flex-direction:column; align-items:stretch; gap:0}

@media (hover:hover) and (pointer:fine){
  .proof > li:hover{transform:rotate(0deg) translateY(-6px); box-shadow:0 1px 0 rgb(8 45 86 / .04), 0 26px 44px -22px rgb(8 45 86 / .45), inset 0 0 0 1.5px var(--c)}
  .proof > li:hover .pf-ic{transform:rotate(-10deg) scale(1.08); border-radius:54% 46% 48% 52% / 46% 54% 46% 54%}
  .proof > li:hover .pf-tag{transform:rotate(-4deg) scale(1.06)}
  .proof > li:hover .pf-av img{transform:translateY(-3px)}
  .proof > li:hover .pf-av img:nth-child(2){transition-delay:40ms} .proof > li:hover .pf-av img:nth-child(3){transition-delay:80ms} .proof > li:hover .pf-av img:nth-child(4){transition-delay:120ms}
  .proof > li:hover .pf-langs span{transform:translateY(-3px)}
  .proof > li:hover .pf-langs span:nth-child(2){transition-delay:30ms} .proof > li:hover .pf-langs span:nth-child(3){transition-delay:60ms}
  .proof > li:hover .pf-langs span:nth-child(4){transition-delay:90ms} .proof > li:hover .pf-langs span:nth-child(5){transition-delay:120ms} .proof > li:hover .pf-langs span:nth-child(6){transition-delay:150ms}
  .proof > li:hover .pf-steps i{opacity:1; transform:scaleY(1.06); transform-origin:bottom}
  .proof > li:hover .pf-laurel{animation:pf-wig .5s var(--ease-spring) 1}
}
@keyframes pf-wig{0%,100%{rotate:0} 30%{rotate:-12deg} 65%{rotate:8deg}}
@media (prefers-reduced-motion:reduce){ .proof > li{transform:none} }

/* ============ Kırılımlar ============ */
@media (max-width:1180px){
  .proof{
    margin:-40px calc(-1 * var(--gutter, 16px)) 0; padding:10px var(--gutter, 16px) 18px;
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(260px, 30%);
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter, 16px); scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .proof::-webkit-scrollbar{display:none}
  .proof > li{scroll-snap-align:start}
}
@media (max-width:960px){
  .hero .hero-in{grid-template-columns:1fr}
  .hero h1{font-size:clamp(42px,8vw,64px)}
  .hero .hero-media{padding:48px 34px 0; max-width:600px; width:100%; margin-inline:auto}
  .hero .hm-stage{max-width:none}
  .hero .hm-frame{aspect-ratio:4/3}
  .hero .hm-frame video{object-position:50% 58%}
}
@media (max-width:720px){
  .hero{padding-top:14px; padding-bottom:52px}
  .hero .hero-tag{font-size:13px; padding:5px 13px 5px 10px; margin-bottom:12px}
  .hero .hero-sub{font-size:16px; line-height:1.5; margin-top:14px}
  .hero .hero-sub .hs-long{display:none}
  .hero .hero-sub .hs-short{display:inline}
  .hero .hero-card{margin-top:20px; padding:16px 14px 13px; border-radius:24px}
  .hero .hero-card h2{font-size:19px; padding-right:0}
  .hero .hc-stamp{font-size:14px; top:-17px; right:12px; padding:8px 12px 9px}
  .hero .who{margin-top:10px}
  .hero .who legend{margin-bottom:6px}
  .hero .who-grid{gap:6px}
  .hero .who-o{min-height:54px; border-radius:14px}
  .hero .who-o b{font-size:16.5px}
  .hero .who-o small{font-size:12px}
  .hero .hc-row{gap:8px; margin-top:10px}
  .hero .hc-go{padding-inline:18px 16px; font-size:16px; gap:8px}
  .hero .hc-notes{margin-top:11px; padding-top:10px; font-size:13px; gap:6px 14px}

  .hero .hero-media{padding:40px 0 0}
  .hero .hm-frame{aspect-ratio:4/3; border-width:5px; border-radius:26px}
  .hero .hm-frame video{object-position:50% 58%}
  .hero .hm-live{left:10px; top:10px; font-size:12.5px; padding:6px 11px 6px 9px}
  .hero .hm-pause{right:10px; top:10px; width:44px; height:44px}
  .hero .hm-quote{position:relative; left:auto; bottom:auto; max-width:none; margin:-30px 12px 0; padding:13px 16px 12px 14px}
  .hero .hm-quote p{font-size:18px}
  .hero .hm-spark{display:none}
  .hero .hm-mascot{width:70px; right:9%; bottom:auto; top:-40px}
  .hero .hm-hi li{font-size:15px; padding:8px 12px 9px; border-radius:15px}
  .hero .hm-hi .hi-en{left:7%; top:-26px}
  .hero .hm-hi .hi-fr{right:auto; left:37%; top:-31px}
  .hero .hm-hi .hi-es, .hero .hm-hi .hi-de{display:none}

  .proof{grid-auto-columns:76%; margin-top:-34px; --pf-gap:12px}
}

.campaign-banner{max-width:var(--wrap); margin:clamp(28px,4vw,48px) auto 0}
.campaign-banner a{display:block; border-radius:var(--r-m); overflow:hidden}
.campaign-banner a:focus-visible{outline:3px solid var(--ink); outline-offset:6px}
.campaign-banner picture, .campaign-banner img{display:block}
.campaign-banner img{width:100%; height:auto}
@media (max-width:720px){
  .campaign-banner a{max-width:360px; margin-inline:auto}
}


/* ===== 03 · Neden Hurra Türkiye — tüm kurallar #neden altında ===== */
#neden{
  --nd-cyan:var(--cyan,#00AED0); --nd-coral:var(--coral,#FC6961); --nd-orange:var(--orange,#FB991E);
  --nd-lilac:var(--lilac,#C997CB); --nd-green:var(--green,#98C33F); --nd-sun:var(--sun,#FFC94A);
  --nd-poet:'Poetsen One', var(--display);
  --nd-lift:0 24px 44px -26px rgba(8,45,86,.45), 0 2px 6px -2px rgba(8,45,86,.08);
  --nd-line:inset 0 0 0 1.5px var(--line);
}
/* Başlık: el çizimi dalga */
#neden .nd-mark{position:relative; display:inline-block; white-space:nowrap; view-timeline:--nd-h block}
#neden .nd-wave{position:absolute; left:-2%; bottom:-.12em; width:104%; height:.3em; overflow:visible; pointer-events:none}
#neden .nd-wave path{fill:none; stroke:var(--nd-coral); stroke-width:5; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:0}
#neden .lead{max-width:56ch}
#neden .nd-nw{white-space:nowrap}

/* Izgara */
#neden .nd-bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
#neden .nd-tile{position:relative; isolation:isolate; min-width:0; border-radius:var(--r-l); padding:28px; display:flex; flex-direction:column; gap:12px; background:var(--bg-2); color:var(--ink); box-shadow:var(--nd-edge, 0 0 #0000);
  transition:transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur) var(--ease-out)}
#neden .nd-tile h3{font-family:var(--display); font-weight:800; font-size:clamp(22px,1.9vw,26px); line-height:1.12; letter-spacing:-.02em}
#neden .nd-tile p{font-size:16px; line-height:1.5}
#neden .nd-tag{display:inline-flex; align-items:center; font-size:12px; font-weight:700; letter-spacing:.02em; line-height:1; padding:5px 8px; border-radius:999px; background:var(--bg-2); color:var(--ink-2); white-space:nowrap}

/* Küçük bağlantı: altı çizili, ok kayar */
#neden .nd-link{display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:2px 0; font:inherit; font-weight:700; font-size:15.5px; line-height:1.3; color:var(--ink); cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--nd-coral); text-decoration-thickness:2px; text-underline-offset:5px; transition:color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
#neden .nd-link .icon{transition:transform var(--dur) var(--ease-out)}
#neden .nd-link:active{transform:scale(.98)}
#neden .nd-link:focus-visible .icon{transform:translateX(4px)}

/* 1 · Öğretmen fotoğrafı */
#neden .nd-photo{grid-column:span 2; grid-row:span 2; padding:0; gap:0; overflow:hidden; justify-content:flex-end; min-height:560px; background:#0B2440}
#neden .nd-photo-img{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; object-position:50% 12%; transition:transform var(--dur-slow) var(--ease-out)}
#neden .nd-cap{position:relative; margin:16px; background:#fff; border-radius:var(--r-m); padding:22px 24px; display:grid; gap:8px;
  box-shadow:0 12px 30px -24px rgba(8,45,86,.6); transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)}
#neden .nd-cap p{color:var(--ink-2); max-width:48ch}
#neden .nd-cap-foot{display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin-top:6px}
#neden .nd-faces{display:flex; align-items:center}
#neden .nd-faces span{width:38px; height:38px; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 0 0 2.5px #fff, 0 0 0 4px var(--line); margin-left:-9px; transition:transform var(--dur) var(--ease-spring)}
#neden .nd-faces span:first-child{margin-left:0}
#neden .nd-faces img{width:100%; height:100%; object-fit:cover; transform:scale(1.9); transform-origin:50% 21%}
#neden .nd-faces em{font-style:normal; font-size:13.5px; font-weight:700; color:var(--ink-2); margin-left:10px; font-variant-numeric:tabular-nums}

/* 2 · Yedi dil */
#neden .nd-lang{grid-column:span 2; background:var(--cyan-50); --tilt:-1deg}
#neden .nd-lang-h{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
#neden .nd-num{position:relative; font-size:clamp(80px,7.6vw,112px); line-height:.8; letter-spacing:-.05em; color:var(--cyan-ink)}
#neden .nd-spark{position:absolute; right:-24px; top:-10px; width:26px; height:26px; overflow:visible; transform-origin:0 100%; transition:transform var(--dur-slow) var(--ease-spring)}
#neden .nd-spark path{fill:none; stroke:var(--nd-coral); stroke-width:2.6; stroke-linecap:round}
#neden .nd-lang p{color:var(--ink-2); max-width:42ch}
#neden .nd-chips{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-top:auto; padding-top:14px}
#neden .nd-chip{position:relative; width:100%; display:flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:999px; padding:12px 16px; background:#fff; color:var(--ink); font-weight:700; font-size:16.5px; line-height:1.2;
  box-shadow:inset 0 0 0 1.5px var(--line); transition:transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out)}
#neden .nd-chip::before{content:""; width:10px; height:10px; flex:none; border-radius:50%; background:var(--c); transition:transform var(--dur) var(--ease-spring)}

/* 3 · Fiyat */
#neden .nd-price{background:var(--coral-50); --tilt:1.5deg}
#neden .nd-price > p{color:var(--ink-2)}
#neden .nd-plist{margin-top:auto; display:grid}
#neden .nd-plist li{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; margin-inline:-12px; border-radius:14px; transition:background-color var(--dur-fast) var(--ease-out)}
#neden .nd-plist li::before{content:""; position:absolute; left:12px; right:12px; top:0; height:1.5px; background:rgba(8,45,86,.1); transition:opacity var(--dur-fast) var(--ease-out)}
#neden .nd-pn{display:grid; justify-items:start; gap:2px; font-weight:700; font-size:16px; line-height:1.25}
#neden .nd-pn small{font-size:13px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
#neden .nd-pn .nd-fav{font-family:var(--nd-poet); font-weight:400; font-size:12.5px; line-height:1; padding:4px 8px 5px; border-radius:999px; background:var(--nd-sun); color:var(--ink); margin-top:3px}
#neden .nd-pv{position:relative; white-space:nowrap; font-size:14px; font-weight:600; color:var(--ink-2); view-timeline:--nd-pv block}
#neden .nd-pv b{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; transition:color var(--dur-fast) var(--ease-out)}
#neden .nd-circ{position:absolute; left:-15px; top:-11px; width:calc(100% + 30px); height:calc(100% + 21px); overflow:visible; pointer-events:none}
#neden .nd-circ path{fill:none; stroke:var(--nd-coral); stroke-width:2.4; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:0}
#neden .nd-foot{display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; font-size:13px; color:var(--ink-2)}

/* 4 · Uygulama */
#neden .nd-app{background:#fff; --nd-edge:var(--nd-line); --tilt:-1.5deg}
#neden .nd-app > p{color:var(--ink-2)}
#neden .nd-quiz-wrap{position:relative; margin-top:auto; padding-top:40px}
#neden .nd-m{position:absolute; top:0; right:4px; z-index:2; width:66px; height:auto; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-slow) var(--ease-spring)}
#neden .nd-m-b{opacity:0}
#neden .nd-quiz{position:relative; background:#fff; border-radius:18px; padding:14px 16px 16px; display:grid; gap:8px; box-shadow:0 0 0 1.5px var(--line), 0 16px 28px -20px rgba(8,45,86,.5)}
#neden .nd-qtop{display:flex; align-items:center; gap:8px; width:64%}
#neden .nd-qprog{flex:1; display:flex; gap:3px}
#neden .nd-qprog i{position:relative; flex:1; height:6px; border-radius:3px; background:#E9EDF2; overflow:hidden}
#neden .nd-qprog i.on{background:var(--nd-cyan)}
#neden .nd-qprog i.nx::after{content:""; position:absolute; inset:0; background:var(--nd-cyan); transform:scaleX(0); transform-origin:left center; transition:transform var(--dur-slow) var(--ease-out) 80ms}
#neden .nd-qlabel{font-size:13px; font-weight:600; color:var(--ink-2); margin-top:4px}
#neden .nd-qword{font-family:var(--nd-poet); font-size:28px; line-height:1; letter-spacing:.01em}
#neden .nd-qopts{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
#neden .nd-qopts > span{position:relative; border:1.5px solid var(--line); border-radius:12px; padding:5px 12px; font-weight:700; font-size:15px; line-height:1.3;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)}
#neden .nd-ok .icon{position:absolute; top:-9px; right:-9px; width:21px; height:21px; padding:4px; border-radius:50%; background:var(--ink); color:#fff; stroke-width:3.2;
  opacity:0; transform:scale(.4); transition:transform var(--dur) var(--ease-spring), opacity var(--dur-fast) var(--ease-out)}

/* 5 · Veli paneli */
#neden .nd-panel{grid-column:span 2; background:var(--bg-2); --tilt:1deg; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px; align-items:start}
#neden .nd-panel-txt{display:grid; gap:12px}
#neden .nd-panel-txt p{color:var(--ink-2)}
#neden .nd-dash{background:#fff; border-radius:var(--r-m); padding:16px 18px 14px; display:grid; gap:11px; box-shadow:0 0 0 1px rgba(8,45,86,.04), 0 16px 30px -22px rgba(8,45,86,.45); view-timeline:--nd-dash block}
#neden .nd-dash-top{display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:700; font-size:14px}
#neden .nd-skill{display:grid; grid-template-columns:72px minmax(0,1fr) 24px; align-items:center; gap:10px; font-size:14px; font-weight:600}
#neden .nd-skill b{font-weight:800; text-align:right; font-variant-numeric:tabular-nums}
#neden .nd-track{height:8px; border-radius:999px; background:#EEF1F5; overflow:hidden}
#neden .nd-track i{display:block; height:100%; width:var(--v); border-radius:inherit; background:var(--nd-cyan); transform-origin:left center}
#neden .nd-dash-row{display:flex; align-items:center; gap:10px; padding-top:11px; border-top:1.5px solid var(--line); font-size:13.5px; line-height:1.35; color:var(--ink-2)}
#neden .nd-dash-row + .nd-dash-row{padding-top:0; border-top:0}
#neden .nd-dash-row b{color:var(--ink)}
#neden .nd-ic{width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--cyan-50); color:var(--cyan-ink)}
#neden .nd-ic .icon{width:14px; height:14px}
#neden .nd-ic.nd-ic-play .icon{fill:currentColor; stroke:none; margin-left:2px}
#neden .nd-ic.nd-ic-note{background:var(--coral-50); color:var(--coral-ink); font-family:var(--nd-poet); font-size:15px}

/* 6 · Sertifika */
#neden .nd-cert{grid-column:span 2; background:#fff; --nd-edge:var(--nd-line); --tilt:-1deg}
#neden .nd-cert-txt{display:grid; gap:10px; justify-items:start}
#neden .nd-cert-txt p{color:var(--ink-2); max-width:50ch}
#neden .nd-steps-wrap{position:relative; margin-top:auto; padding-top:30px}
#neden .nd-steps{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; align-items:end}
#neden .nd-steps li{height:calc(44px + var(--i) * 15px); display:flex; justify-content:center; padding-top:11px; border-radius:14px 14px 8px 8px; background:var(--c); color:var(--ink);
  font-family:var(--display); font-weight:800; font-size:18.5px; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums;
  transition:transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease-out)}
#neden .nd-star{position:absolute; top:0; right:calc((100% - 40px) / 12 - 13px); width:26px; height:26px; overflow:visible; transition:transform var(--dur-slow) var(--ease-spring)}
#neden .nd-star path{fill:var(--nd-sun); stroke:var(--ink); stroke-width:1.6; stroke-linejoin:round}

/* ===== Hover (yalnızca gerçek imleç) ===== */
@media (hover:hover) and (pointer:fine){
  #neden .nd-tile:not(.nd-photo):hover{transform:translateY(-5px) rotate(var(--tilt)); box-shadow:var(--nd-lift), var(--nd-edge, 0 0 #0000)}
  #neden .nd-photo:hover .nd-photo-img{transform:scale(1.04)}
  #neden .nd-photo:hover .nd-cap{transform:translateY(-4px); box-shadow:var(--nd-lift)}
  #neden .nd-photo:hover .nd-faces span:nth-child(odd){transform:translateY(-3px)}
  #neden .nd-link:hover{color:var(--coral-ink)}
  #neden .nd-link:hover .icon{transform:translateX(4px)}

  #neden .nd-lang:hover .nd-spark{transform:rotate(-12deg) scale(1.15)}

  #neden .nd-plist li:hover{background:#fff}
  #neden .nd-plist li:hover::before, #neden .nd-plist li:hover + li::before{opacity:0}
  #neden .nd-plist li:hover b{color:var(--coral-ink)}

  #neden .nd-app:hover .nd-m-a{opacity:0}
  #neden .nd-app:hover .nd-m-b{opacity:1}
  #neden .nd-app:hover .nd-m{transform:translateY(-6px) rotate(-7deg)}
  #neden .nd-app:hover .nd-ok{background:var(--cyan-50); border-color:var(--nd-cyan)}
  #neden .nd-app:hover .nd-ok .icon{opacity:1; transform:none}
  #neden .nd-app:hover .nd-qprog i.nx::after{transform:none}

  #neden .nd-steps:hover li:not(:hover){opacity:.55}
  #neden .nd-steps li:hover{transform:translateY(-7px)}
  #neden .nd-cert:hover .nd-star{transform:rotate(18deg) scale(1.2)}
}
/* Klavye karşılıkları */
#neden .nd-tile:not(.nd-photo):focus-within{transform:translateY(-5px) rotate(var(--tilt)); box-shadow:var(--nd-lift), var(--nd-edge, 0 0 #0000)}
#neden .nd-photo:focus-within .nd-photo-img{transform:scale(1.04)}
#neden .nd-photo:focus-within .nd-cap{transform:translateY(-4px); box-shadow:var(--nd-lift)}
#neden .nd-cert:focus-within .nd-star{transform:rotate(18deg) scale(1.2)}

/* ===== Kaydırmayla giriş + çizilerek belirme (yalnızca destekleyen tarayıcıda) ===== */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    #neden .nd-tile{animation:nd-rise var(--ease-out) both; animation-timeline:view(); animation-range:entry 0% entry 35%}
    #neden .nd-lang, #neden .nd-cert{animation-range:entry 6% entry 41%}
    #neden .nd-app{animation-range:entry 10% entry 45%}
    #neden .nd-wave path{animation:nd-draw var(--ease-out) both; animation-timeline:--nd-h; animation-range:entry 100% cover 45%}
    #neden .nd-circ path{animation:nd-draw var(--ease-out) both; animation-timeline:--nd-pv; animation-range:entry 100% cover 55%}
    #neden .nd-track i{animation:nd-fill var(--ease-out) both; animation-timeline:--nd-dash; animation-range:entry 70% cover 50%}
    #neden .nd-skill:nth-of-type(3) .nd-track i{animation-range:entry 80% cover 54%}
    #neden .nd-skill:nth-of-type(4) .nd-track i{animation-range:entry 90% cover 58%}
    #neden .nd-skill:nth-of-type(5) .nd-track i{animation-range:entry 100% cover 62%}
  }
}
@keyframes nd-rise{from{opacity:0; translate:0 16px}}
@keyframes nd-draw{from{stroke-dashoffset:1}}
@keyframes nd-fill{from{transform:scaleX(0)}}

/* ===== Kırılımlar ===== */
@media (max-width:1180px){
  #neden .nd-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  #neden .nd-photo{grid-column:span 1; grid-row:span 2}
  #neden .nd-lang, #neden .nd-panel{grid-column:span 1}
  #neden .nd-panel{display:flex}
  #neden .nd-dash{margin-top:auto}
  #neden .nd-quiz-wrap{margin-block:auto}
  #neden .nd-cert{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:32px; align-items:end}
}
@media (max-width:960px){
  #neden .nd-cert{display:flex; align-items:stretch; gap:12px}
}
@media (max-width:720px){
  #neden .nd-bento{grid-template-columns:minmax(0,1fr); gap:12px}
  #neden .nd-tile{grid-column:auto; grid-row:auto; padding:22px; border-radius:24px}
  #neden .nd-photo{min-height:520px; padding:0}
  #neden .nd-cap{margin:12px; padding:18px 18px 16px}
  #neden .nd-num{font-size:84px}
  #neden .nd-chips{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  #neden .nd-chip{padding:11px 12px; font-size:15.5px}
  #neden .nd-steps-wrap{padding-top:24px}
  #neden .nd-steps{gap:5px}
  #neden .nd-steps li{height:calc(34px + var(--i) * 11px); padding-top:9px; font-size:13px; letter-spacing:-.01em; border-radius:10px 10px 6px 6px}
  #neden .nd-star{width:22px; height:22px; right:calc((100% - 25px) / 12 - 11px)}
}


/* ===== 04 · Veli soruları — öğretmenlerimiz yanıtlıyor (kök: #sorular) ===== */
@property --sq-fl{syntax:'<length>'; inherits:false; initial-value:0px}
@property --sq-fr{syntax:'<length>'; inherits:false; initial-value:0px}

#sorular{
  --gut:var(--gutter,clamp(16px,3vw,40px));   /* body padding-inline ile aynı */
  --gap:24px; --n:3.5; --gaps:3;       /* görünür kart sayısı / kart arası boşluk sayısı */
  --sq-sun:var(--sun,#FFC94A); --sq-coral:var(--coral,#FC6961);   /* bölümün vurguları: güneş sarısı + mercan (+ maskotun cyan'ı) */
  --sq-soft:#D2DEEB;                    /* lacivert üstünde ikincil metin (~11:1) */
  position:relative; isolation:isolate; overflow:hidden;
  margin-inline:calc(-1 * var(--gut)); margin-top:clamp(56px,8vw,112px);
  padding-block:clamp(72px,8vw,120px) clamp(64px,7vw,104px);
  background:var(--ink); color:#fff;
  border-radius:50% / clamp(20px,3.2vw,48px);   /* yumuşak kubbe üst kenar + gülümseyen alt kenar */
}
#sorular :focus-visible{outline-color:var(--sq-sun)}

/* Arka plan: marka şekilleri (düz vektör) */
#sorular .sq-bg{position:absolute; inset:0; z-index:-1; pointer-events:none}
#sorular .sq-bg svg{position:absolute; overflow:visible; fill:none; stroke-linecap:round}
#sorular .sq-bg-eye{top:clamp(-40px,-2vw,-16px); right:clamp(-70px,-3vw,-24px); width:clamp(150px,22vw,330px); stroke:rgba(255,255,255,.07)}   /* tonal, renksiz göz yayı */
#sorular .sq-bg-smile{bottom:clamp(-34px,-1.6vw,-14px); left:50%; translate:-50% 0; width:clamp(150px,17vw,250px); stroke:var(--sq-sun)}

/* Başlık alanı */
#sorular .sq-in{max-width:calc(var(--wrap) + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut)}
#sorular .sq-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 40px; flex-wrap:wrap; margin-bottom:clamp(16px,2.4vw,28px)}
#sorular .sq-intro{max-width:780px}
#sorular h2{color:#fff}
#sorular .lead{color:var(--sq-soft); max-width:50ch}
#sorular .sq-last{display:inline-flex; align-items:center; vertical-align:middle; padding:.55em .45em 0 0; white-space:nowrap}
#sorular .sq-mark{position:relative; display:inline-block}
#sorular .sq-mark svg{position:absolute; left:-3%; bottom:-.2em; width:106%; height:.3em; overflow:visible; fill:none; stroke:var(--sq-coral); stroke-width:5px; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:0}

/* Soru soran maskot (inline SVG, göz kırpar) */
#sorular .sq-mascot{position:relative; display:inline-block; width:1.34em; height:1.38em; margin-left:.22em; vertical-align:-.2em; margin-top:0; transform:rotate(-7deg); transform-origin:40% 90%; transition:transform var(--dur) var(--ease-spring)}
#sorular .sq-mascot svg{display:block; width:100%; height:100%; overflow:visible}
#sorular .sq-eye{transform-box:fill-box; transform-origin:center}
#sorular .sq-ask{position:absolute; right:-.72em; top:-.86em; width:1.5em; height:1.5em; display:grid; place-items:center; border-radius:50% 50% 50% 18%; background:var(--sq-sun); color:var(--ink); font:400 .42em/1 var(--fun,'Poetsen One'), var(--display); letter-spacing:0; transform:rotate(10deg); transition:transform var(--dur) var(--ease-spring)}

/* Kaydırıcı kontrolleri */
#sorular .sq-ctrl{display:flex; align-items:center; gap:20px}
#sorular:not([data-js]) .sq-ctrl{visibility:hidden}
#sorular .sq-segs{display:flex; gap:6px}
#sorular .sq-seg{width:18px; height:5px; border-radius:3px; background:rgba(255,255,255,.2); transition:background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring)}
#sorular .sq-seg.on{background:var(--sq-sun); transform:scaleY(1.25)}
#sorular .sq-arrows{display:flex; gap:10px}
#sorular .sq-arrow{width:48px; height:48px; border:0; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; padding:0; transition:transform var(--dur) var(--ease-spring), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)}
#sorular .sq-arrow:focus-visible{border-radius:50%}
#sorular .sq-arrow .icon{width:20px; height:20px; stroke-width:2.4; transition:transform var(--dur) var(--ease-out)}
#sorular .sq-arrow[data-dir="prev"] .icon{scale:-1 1}
#sorular .sq-arrow[aria-disabled="true"]{background:rgba(255,255,255,.1); color:rgba(255,255,255,.4); cursor:default}
#sorular .sq-arrow:not([aria-disabled="true"]):active{transform:scale(.94)}

/* Yatay kaydırıcı */
#sorular .reels{
  --pad:max(var(--gut), (100% - var(--wrap)) / 2);
  --fade:clamp(24px,6vw,96px);
  --sq-fl:0px; --sq-fr:var(--fade);
  position:relative; display:grid; grid-auto-flow:column; gap:var(--gap);
  grid-auto-columns:calc((100% - var(--gaps) * var(--gap)) / var(--n));
  padding:18px var(--pad) 22px; scroll-padding-inline:var(--pad);
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--sq-fl), #000 calc(100% - var(--sq-fr)), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 var(--sq-fl), #000 calc(100% - var(--sq-fr)), transparent 100%);
  transition:--sq-fl var(--dur) var(--ease-out), --sq-fr var(--dur) var(--ease-out);
}
#sorular .reels::-webkit-scrollbar{display:none}
#sorular .reels[data-scrolled]{--sq-fl:var(--fade)}
#sorular .reels[data-end]{--sq-fr:0px}

/* Kart */
#sorular .reel{position:relative; scroll-snap-align:start; min-width:0; --tilt:-1.5deg}
#sorular .reel:nth-child(even){--tilt:1.5deg}
#sorular .reel-card{display:grid; gap:14px; transition:transform var(--dur-slow) var(--ease-spring)}
#sorular .reel-media{position:relative; aspect-ratio:9/16; border-radius:var(--r-m); overflow:hidden; isolation:isolate; background:#0E3563; transition:scale var(--dur-fast) var(--ease-out)}
#sorular .reel-media::after{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); background:linear-gradient(to top, rgba(8,45,86,.5), rgba(8,45,86,0) 34%)}
#sorular .reel-zoom{position:absolute; inset:0; transition:transform var(--dur-slow) var(--ease-out)}
#sorular .reel-zoom img, #sorular .reel-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
#sorular .reel-vid{opacity:0; transition:opacity var(--dur) var(--ease-out)}
#sorular .reel.is-live .reel-vid{opacity:1}
#sorular .reel-cat{position:absolute; left:12px; top:12px; z-index:2; font:400 14px/1 var(--fun,'Poetsen One'), var(--display); padding:6px 11px 7px; border-radius:999px; background:var(--sq-sun); color:var(--ink-deep,#05213F); rotate:-4deg; transition:rotate var(--dur) var(--ease-spring)}
#sorular .reel-dur{position:absolute; right:12px; top:12px; z-index:2; font-size:12.5px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; padding:6px 9px; border-radius:999px; color:#fff; background:rgba(8,45,86,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
#sorular .reel-play{position:absolute; left:14px; bottom:14px; z-index:2; width:52px; height:52px; border-radius:50%; background:var(--coral); color:var(--ink); display:grid; place-items:center; box-shadow:0 0 0 0 rgba(252,105,97,.4); transition:transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out)}
#sorular .reel-play .icon{width:22px; height:22px; translate:1.5px 0}
#sorular .reel-hint{position:absolute; left:78px; bottom:27px; z-index:2; font-size:13px; font-weight:700; line-height:1; padding:6px 10px; border-radius:999px; color:#fff; background:rgba(8,45,86,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transform:translateX(-8px); transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out)}
#sorular .reel-q{font-family:var(--display); font-size:clamp(18px,1.45vw,21px); font-weight:700; line-height:1.25; letter-spacing:-.01em; color:#fff; padding-right:6px}
#sorular .reel-btn{border:0; background:none; padding:0; margin:0; color:inherit; font:inherit; text-align:left; cursor:pointer}
#sorular .reel-btn::after{content:""; position:absolute; inset:0; z-index:3; border-radius:var(--r-m)}

/* Hover (yalnızca fare) ve klavye odağı: aynı görsel durum */
@media (hover:hover) and (pointer:fine){
  #sorular .reel:hover .reel-card{transform:translateY(-6px) rotate(var(--tilt))}
  #sorular .reel:hover .reel-zoom{transform:scale(1.04)}
  #sorular .reel:hover .reel-play{transform:scale(1.14); box-shadow:0 0 0 8px rgba(252,105,97,.28)}
  #sorular .reel:hover .reel-hint{opacity:1; transform:none; transition-delay:60ms}
  #sorular .reel:hover .reel-cat{rotate:3deg}
  #sorular .sq-arrow:not([aria-disabled="true"]):hover{background:var(--sq-sun); transform:scale(1.06)}
  #sorular .sq-arrow:not([aria-disabled="true"]):hover .icon{transform:translateX(3px)}
  #sorular h2:hover .sq-mascot{transform:rotate(5deg) translateY(-2px)}
  #sorular h2:hover .sq-ask{transform:rotate(-8deg) scale(1.12)}
  #sorular .sq-wa:hover{transform:translateY(-2px)}
  #sorular .sq-wa:hover .sq-wa-arrow{transform:translateX(3px)}
}
#sorular .reel:has(.reel-btn:focus-visible) .reel-card{transform:translateY(-6px) rotate(var(--tilt))}
#sorular .reel:has(.reel-btn:focus-visible) .reel-zoom{transform:scale(1.04)}
#sorular .reel:has(.reel-btn:focus-visible) .reel-play{transform:scale(1.14); box-shadow:0 0 0 8px rgba(252,105,97,.28)}
#sorular .reel:has(.reel-btn:focus-visible) .reel-hint{opacity:1; transform:none}
#sorular .reel:has(.reel-btn:focus-visible) .reel-cat{rotate:3deg}
#sorular .reel:has(.reel-btn:focus-visible) .reel-media{outline:3px solid var(--sq-sun); outline-offset:3px}
@supports selector(:has(*)){ #sorular .reel-btn:focus-visible{outline:none} }
#sorular .sq-arrow:focus-visible{outline-offset:3px}
#sorular .reel:active .reel-media{scale:.98}

/* Bölüm sonu: Telefon ile soru */
#sorular .sq-foot{margin-top:clamp(24px,3.2vw,40px); padding-top:clamp(24px,3vw,32px); border-top:1.5px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap}
#sorular .sq-foot-q{font-family:var(--display); font-weight:800; font-size:clamp(22px,2.2vw,28px); line-height:1.15; letter-spacing:-.015em}
#sorular .sq-foot-sub{margin-top:6px; color:var(--sq-soft); font-size:16px}
#sorular .sq-num{color:#fff; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
#sorular .sq-wa{display:inline-flex; align-items:center; gap:12px; padding:7px 22px 7px 7px; border-radius:999px; background:#fff; color:var(--ink); font-weight:700; font-size:16.5px; text-decoration:none; white-space:nowrap; transition:transform var(--dur) var(--ease-spring), background-color var(--dur-fast) var(--ease-out)}
#sorular .sq-wa:focus-visible{border-radius:999px}
#sorular .sq-wa:active{transform:scale(.97)}
#sorular .sq-wa-ic{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#E3F8EC; color:#0B7A3E}
#sorular .sq-wa-ic .icon{width:21px; height:21px}
#sorular .sq-wa-arrow{width:18px; height:18px; stroke-width:2.4; transition:transform var(--dur) var(--ease-out)}

/* Kırılımlar */
@media (max-width:1180px){
  #sorular{--n:3.3; --gaps:3; --gap:20px}
  #sorular .sq-ctrl{width:100%; justify-content:space-between}
}
@media (max-width:960px){ #sorular{--n:2.4; --gaps:2; --gap:16px} }
@media (max-width:720px){
  #sorular{--n:1.9; --gaps:1; --gap:14px}
  #sorular .sq-arrow{width:44px; height:44px}
  #sorular .sq-foot-act{width:100%}
  #sorular .sq-wa{width:100%; justify-content:flex-start}
  #sorular .sq-wa-arrow{margin-left:auto}
}
@media (max-width:560px){
  #sorular{--n:1.3; --gaps:1; --gap:12px}
  #sorular .sq-mascot{width:1.2em; height:1.24em; vertical-align:-.42em; margin-top:0; margin-left:.16em}
  #sorular .sq-ask{right:-1.3em; top:.05em}
  #sorular .reel-q{font-size:17px}
}

/* Hareket: yalnızca hareket tercihi açıksa */
@keyframes sq-blink{0%,93%,100%{transform:none} 96.5%{transform:scaleY(.1)}}
@keyframes sq-wink{0%,100%{transform:none} 30%,62%{transform:scaleY(.1)}}
@keyframes sq-wiggle{0%,100%{transform:none} 25%{transform:rotate(-12deg)} 60%{transform:rotate(9deg)}}
@media (prefers-reduced-motion:no-preference){
  #sorular .sq-eye{animation:sq-blink 6.5s var(--ease-in-out) 1.5s infinite}
  #sorular:has(.reel-btn:focus-visible) .sq-eye-l{animation:sq-wink .52s var(--ease-out)}
  @media (hover:hover) and (pointer:fine){
    #sorular:has(.reel:hover) .sq-eye-l, #sorular h2:hover .sq-eye-l{animation:sq-wink .52s var(--ease-out)}
    #sorular .sq-wa:hover .sq-wa-ic .icon{animation:sq-wiggle .5s var(--ease-out)}
  }
}
@keyframes sq-rise{from{opacity:0; translate:0 16px} to{opacity:1; translate:0 0}}
@keyframes sq-draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
@keyframes sq-pop{0%{opacity:0; scale:.2} 65%{opacity:1; scale:1.18} 100%{opacity:1; scale:1}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    #sorular .sq-intro{animation:sq-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 35%}
    #sorular .sq-mark svg{animation:sq-draw linear both; animation-timeline:view(); animation-range:entry 60% cover 42%}
    #sorular .sq-ask{animation:sq-pop linear both; animation-timeline:view(); animation-range:entry 70% cover 40%}
    #sorular .reels{view-timeline-name:--sq-rail}
    #sorular .reel{animation:sq-rise linear both; animation-timeline:--sq-rail; animation-range:entry calc(var(--i) * 5%) entry calc(38% + var(--i) * 5%)}
  }
}

/* entegrasyon: dekoratif şekillerin mobilde yatay taşmasını kes */
#sorular{overflow-x:clip}


/* ===== Programlar (#programlar) — yaş × seviye ===== */
#programlar{
  --p-or:var(--orange,#FB991E); --p-or-50:var(--orange-50,#FFF3E2);
  --p-cy:var(--cyan,#00AED0);   --p-cy-50:var(--cyan-50,#E7F6FA);
  --p-li:var(--lilac,#C997CB);  --p-li-50:var(--lilac-50,#F5EEF6);
  --p-gr:var(--green,#98C33F);  --p-gr-50:var(--green-50,#EEF6E2);
  --p-sun:var(--sun,#FFC94A);
}
#programlar .vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Başlık: el çizimi dalga alt çizgi */
#programlar .p-mark{position:relative; display:inline-block; white-space:nowrap}
#programlar .p-mark svg{position:absolute; left:-3%; bottom:-.2em; width:106%; height:.34em; overflow:visible; pointer-events:none}
#programlar .p-mark path{fill:none; stroke:var(--p-sun); stroke-width:6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}
#programlar .p-head-link{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--coral); padding-bottom:2px; transition:color var(--dur-fast) var(--ease-out)}
#programlar .p-head-link .icon{transition:transform var(--dur) var(--ease-out)}

/* Tablo: semantik tablo, görsel olarak beyaz şeritler; yaş rengi yalnızca ikon, rozet ve dolu taşlarda (veri kodlaması) */
#programlar .ptable{display:block; width:100%; border-collapse:separate}
#programlar .ptable tbody{display:grid; gap:12px}
#programlar .p-row{
  --pc:var(--p-cy); --pc-50:var(--p-cy-50);
  position:relative; display:grid; align-items:center;
  grid-template-columns:minmax(170px,200px) minmax(0,1fr) auto auto;
  grid-template-areas:"name focus lvl go" "age focus lvl go";
  column-gap:32px; row-gap:6px;
  padding:22px 22px 22px 100px; background:#fff; border-radius:var(--r-l); box-shadow:inset 0 0 0 1.5px var(--line);
  transition:transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
#programlar .p-or{--pc:var(--p-or); --pc-50:var(--p-or-50)}
#programlar .p-cy{--pc:var(--p-cy); --pc-50:var(--p-cy-50)}
#programlar .p-li{--pc:var(--p-li); --pc-50:var(--p-li-50)}
#programlar .p-gr{--pc:var(--p-gr); --pc-50:var(--p-gr-50)}
#programlar .p-row > *{padding:0; text-align:left; font-weight:inherit}

#programlar .p-ico{position:absolute; left:24px; top:50%; translate:0 -50%; width:56px; height:56px; border-radius:50% 46% 52% 48% / 52% 50% 48% 50%; background:var(--pc); color:var(--ink); display:grid; place-items:center}
#programlar .p-ico svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
#programlar .p-name{grid-area:name; align-self:end; font-family:var(--display); font-weight:800; font-size:24px; line-height:1.1; letter-spacing:-.015em}
#programlar .p-age{grid-area:age; align-self:start}
#programlar .p-age span{display:inline-block; font-family:'Poetsen One', var(--display); font-size:15px; line-height:1; padding:6px 12px 7px; background:var(--pc-50); border-radius:999px; rotate:-2deg; font-variant-numeric:tabular-nums}
#programlar .p-focus{grid-area:focus; color:var(--ink-2); font-size:16.5px; line-height:1.45; max-width:30ch}
#programlar .p-lvl{grid-area:lvl}
#programlar .p-cta{grid-area:go; justify-self:end}

/* Seviye ölçeği: yükselen yuvarlak taşlar */
#programlar .p-stones{display:flex; gap:6px; padding-top:15px}
#programlar .p-stones i{
  --k:0; flex:0 0 48px; height:34px; display:grid; place-items:center;
  font-style:normal; font-size:12.5px; font-weight:700; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums;
  color:var(--muted); background:#fff; border:1.5px dashed var(--line-2,#C9D3DF);
  border-radius:52% 48% 50% 50% / 58% 56% 44% 42%;
  translate:0 calc(var(--k) * -3px);
  transition:transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
#programlar .p-stones i:nth-child(2){--k:1; border-radius:48% 52% 46% 54% / 52% 60% 40% 48%}
#programlar .p-stones i:nth-child(3){--k:2; border-radius:54% 46% 52% 48% / 46% 52% 48% 54%}
#programlar .p-stones i:nth-child(4){--k:3; border-radius:46% 54% 48% 52% / 58% 46% 54% 42%}
#programlar .p-stones i:nth-child(5){--k:4; border-radius:52% 48% 56% 44% / 50% 58% 42% 50%}
#programlar .p-stones i:nth-child(6){--k:5; border-radius:50% 50% 46% 54% / 56% 48% 52% 44%}
#programlar .p-stones i.on{background:var(--pc); border:1.5px solid var(--pc); color:var(--ink); font-weight:800}

/* Bağlantı: satırın tamamı tıklanır (tek odak durağı = bu bağlantı) */
#programlar .p-go{display:inline-flex; align-items:center; gap:10px; background:var(--bg-2); color:var(--ink); text-decoration:none; font-weight:700; font-size:15.5px; white-space:nowrap; padding:8px 8px 8px 18px; border-radius:999px; transition:box-shadow var(--dur) var(--ease-out)}
#programlar .p-go::before{content:""; position:absolute; inset:0; z-index:1; border-radius:var(--r-l)}
#programlar .p-go:focus-visible{outline:none}
#programlar .p-go:focus-visible::before{outline:3px solid var(--cyan-ink); outline-offset:3px}
#programlar .p-arr{width:30px; height:30px; border-radius:50%; background:#fff; display:grid; place-items:center; transition:background-color var(--dur-fast) var(--ease-out)}
#programlar .p-arr .icon{width:16px; height:16px; transition:transform var(--dur) var(--ease-out)}

/* Not: konuşma balonu */
#programlar .p-note{position:relative; margin-top:24px; display:flex; align-items:flex-start; gap:12px; width:fit-content; max-width:min(100%, 62ch); background:var(--bg-2); border-radius:var(--r-m); padding:14px 20px 14px 16px; font-size:16px; line-height:1.5; color:var(--ink)}
#programlar .p-note::before{content:""; position:absolute; left:34px; top:-7px; width:16px; height:16px; background:inherit; border-radius:3px; rotate:45deg}
#programlar .p-note svg{flex:none; width:24px; height:24px; margin-top:-1px; fill:none; stroke:#D98A00; stroke-width:2.2; stroke-linecap:round}
#programlar .p-note b{font-weight:700}

/* Etkileşim: kalkma (yay), ikon kıpırdaması, taşların sırayla zıplaması, ok kayması */
@keyframes p-wiggle{0%{rotate:0deg} 25%{rotate:-14deg} 55%{rotate:9deg} 80%{rotate:-4deg} 100%{rotate:0deg}}
#programlar .p-row:focus-within{transform:translateY(-4px); box-shadow:inset 0 0 0 1.5px var(--pc), 0 18px 30px -22px rgb(8 45 86 / .45)}
#programlar .p-row:focus-within .p-arr{background:var(--coral)}
#programlar .p-row:focus-within .p-arr .icon{transform:translateX(4px)}
@media (hover:hover) and (pointer:fine){
  #programlar .p-head-link:hover{color:var(--coral-ink)}
  #programlar .p-head-link:hover .icon{transform:translateX(4px)}
  #programlar .p-row{cursor:pointer}
  #programlar .p-row:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1.5px var(--pc), 0 18px 30px -22px rgb(8 45 86 / .45)}
  #programlar .p-row:hover .p-arr{background:var(--coral)}
  #programlar .p-row:hover .p-ico{animation:p-wiggle 560ms var(--ease-out)}
  #programlar .p-row:hover .p-arr .icon{transform:translateX(4px)}
  #programlar .p-row:hover .p-go{box-shadow:0 0 0 1.5px var(--ink)}
  #programlar .p-row:hover .p-stones i.on{transform:translateY(-4px); box-shadow:0 6px 10px -6px color-mix(in srgb, var(--pc) 70%, var(--ink))}
  #programlar .p-row:hover .p-stones i:nth-child(2){transition-delay:40ms}
  #programlar .p-row:hover .p-stones i:nth-child(3){transition-delay:80ms}
  #programlar .p-row:hover .p-stones i:nth-child(4){transition-delay:120ms}
  #programlar .p-row:hover .p-stones i:nth-child(5){transition-delay:160ms}
  #programlar .p-row:hover .p-stones i:nth-child(6){transition-delay:200ms}
}
#programlar .p-row:active{transform:translateY(-2px) scale(.99); transition-duration:var(--dur-fast)}
#programlar .p-head-link:focus-visible .icon{transform:translateX(4px)}

/* Kaydırmayla: satırlar hafifçe yükselir, dolu taşlar sırayla yerine oturur, alt çizgi çizilir */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes p-rise{from{opacity:0; translate:0 14px} to{opacity:1; translate:0 0}}
    @keyframes p-pop{0%{opacity:0; scale:.5} 70%{opacity:1; scale:1.12} 100%{opacity:1; scale:1}}
    @keyframes p-draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
    #programlar .sec-head{view-timeline:--p-head block}
    #programlar .p-mark path{animation:p-draw linear both; animation-timeline:--p-head; animation-range:entry 60% cover 42%}
    #programlar .p-row{view-timeline:--p-row block; animation:p-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 35%}
    #programlar .p-stones i.on{animation:p-pop linear both; animation-timeline:--p-row}
    #programlar .p-stones i.on:nth-child(1){animation-range:entry 20% entry 55%}
    #programlar .p-stones i.on:nth-child(2){animation-range:entry 28% entry 63%}
    #programlar .p-stones i.on:nth-child(3){animation-range:entry 36% entry 71%}
    #programlar .p-stones i.on:nth-child(4){animation-range:entry 44% entry 79%}
    #programlar .p-stones i.on:nth-child(5){animation-range:entry 52% entry 87%}
    #programlar .p-stones i.on:nth-child(6){animation-range:entry 60% entry 95%}
  }
}

/* Dar masaüstü: odak metni adın altına */
@media (max-width:1180px){
  #programlar .p-row{grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"name lvl go" "age lvl go" "focus lvl go"; column-gap:24px}
  #programlar .p-focus{margin-top:4px}
}
/* Tablet ve mobil: her program bir kart */
@media (max-width:960px){
  #programlar .ptable tbody{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  #programlar .p-row{grid-template-columns:minmax(0,1fr); grid-template-areas:"name" "age" "focus" "lvl" "go"; align-items:start; row-gap:6px; padding:20px}
  #programlar .p-ico{left:20px; top:20px; translate:none; width:52px; height:52px}
  #programlar .p-name, #programlar .p-age{padding-left:68px}
  #programlar .p-name{align-self:start; font-size:22px; padding-top:2px}
  #programlar .p-focus{margin-top:10px; max-width:none}
  #programlar .p-lvl{margin-top:4px}
  #programlar .p-stones i{flex:1 1 0; min-width:0}
  #programlar .p-cta{justify-self:start; margin-top:12px}
  #programlar .p-row:focus-within{transform:translateY(-4px) rotate(-.6deg)}
}
@media (max-width:960px) and (hover:hover) and (pointer:fine){
  #programlar .p-row:hover{transform:translateY(-4px) rotate(-.8deg)}
  #programlar .p-row:nth-child(even):hover{transform:translateY(-4px) rotate(.8deg)}
}
@media (max-width:720px){
  #programlar .ptable tbody{grid-template-columns:minmax(0,1fr)}
  #programlar .p-stones{gap:5px}
  #programlar .p-stones i{font-size:12px}
}


/* ===== Fiyatlar (#fiyatlar) — tüm seçiciler bölüm köküne kapsanmıştır =====
   Renk dozu (sadeleştirme turu): kartlar beyaz + nötr çerçeve; tek vurgu Özel ders (cyan-50).
   Renk yalnızca küçük öğelerde: sınıf figürleri, damga (güneş), çubuklar (cyan / lacivert + mercan fark). */
#fiyatlar{--fy-pesin-w:89.989889%; /* 85.440 / 94.944 */ position:relative}
#fiyatlar .num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- Plan kartları ---------- */
#fiyatlar .plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(5,auto); column-gap:20px; row-gap:0; padding-top:14px}
#fiyatlar .plan{
  --tilt:-1.25deg; --band:var(--bg-2); --chip:var(--bg-2); --ck:var(--cyan-50); --hover-line:var(--ink);
  grid-row:span 5; display:grid; grid-template-rows:subgrid; row-gap:0;
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-l); padding-bottom:28px;
  translate:0 0; rotate:0deg;
  transition:translate var(--dur-slow) var(--ease-spring), rotate var(--dur-slow) var(--ease-spring), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
#fiyatlar .plan--mini{--tilt:1.25deg}
#fiyatlar .plan--ozel{--band:#fff; --chip:#fff; --ck:#fff; --hover-line:var(--cyan); background:var(--cyan-50); border-color:var(--cyan-50)}
#fiyatlar .plan > :is(.plan-top,.plan-price,.plan-cta){padding-inline:28px}

/* Üst bant — alt kenarı gülümseme yayı; renk yalnızca figürlerde */
#fiyatlar .plan-band{position:relative; display:grid; place-items:center; height:120px; background:var(--band);
  border-radius:calc(var(--r-l) - 1.5px) calc(var(--r-l) - 1.5px) 50% 50% / calc(var(--r-l) - 1.5px) calc(var(--r-l) - 1.5px) 28px 28px}
#fiyatlar .fy-crowd{height:46px; width:auto; max-width:calc(100% - 40px); overflow:visible}
#fiyatlar .fy-crowd .kid{transform-box:fill-box; transform-origin:50% 100%}
#fiyatlar .fy-crowd .seat{fill:none; stroke:var(--ink); stroke-width:1.6; stroke-dasharray:3 2.6; opacity:.5}

/* Damga (base .stamp üstüne konum + hover) */
#fiyatlar .fy-stamp{position:absolute; top:-14px; right:18px; z-index:2; --stamp-rot:-5deg; box-shadow:0 6px 14px -8px rgb(8 45 86 / .45);
  transition:transform var(--dur) var(--ease-spring), scale var(--dur) var(--ease-spring)}
#fiyatlar .fy-stamp svg{position:absolute; left:-20px; top:-10px; width:22px; height:22px; overflow:visible}
#fiyatlar .fy-stamp svg path{fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round}

#fiyatlar .plan-top{padding-top:24px; display:grid; gap:8px; align-content:start}
#fiyatlar .plan h3{font-family:var(--display); font-weight:800; font-size:24px; line-height:1.15; letter-spacing:-.02em}
#fiyatlar .plan-meta{display:flex; flex-wrap:wrap; gap:6px 8px}
#fiyatlar .plan-meta span{display:inline-flex; align-items:center; gap:6px; background:var(--chip); border-radius:999px; padding:5px 11px 5px 9px; font-size:14px; font-weight:700; color:var(--ink)}
#fiyatlar .plan-meta .icon{width:16px; height:16px; color:var(--ink-2)}

/* Fiyat tipografisi: ₺ büyük harf üst çizgisine, ek taban çizgisine hizalı */
#fiyatlar .plan-price{padding-top:22px}
#fiyatlar .price{display:flex; align-items:baseline; font-family:var(--display); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums lining-nums}
#fiyatlar .price .cur{align-self:flex-start; font-size:30px; font-weight:700; margin:2px 4px 0 0; letter-spacing:0}
#fiyatlar .price .amt{font-size:clamp(54px,4.6vw,66px); font-weight:800; letter-spacing:-.045em}
#fiyatlar .price .suf{font-size:24px; font-weight:700; letter-spacing:-.01em; margin-left:3px; color:var(--ink-2)}
#fiyatlar .price-note{margin-top:10px; font-size:15px; color:var(--ink-2)}

#fiyatlar .feat{margin-top:22px; margin-inline:28px; padding-top:20px; border-top:1.5px dashed var(--line-2, #C9D3DF); display:grid; gap:12px; align-content:start; font-size:15.5px; line-height:1.45}
#fiyatlar .feat li{display:flex; gap:10px; align-items:flex-start}
#fiyatlar .feat .ck{flex:none; width:22px; height:22px; border-radius:50%; background:var(--ck); display:grid; place-items:center; margin-top:-1px}
#fiyatlar .feat .ck .icon{width:14px; height:14px; stroke-width:3; color:var(--cyan-ink)}
#fiyatlar .feat li.shared{color:var(--ink-2)}
#fiyatlar .feat li.shared .ck{background:transparent; box-shadow:inset 0 0 0 1.5px var(--line-2, #C9D3DF)}
#fiyatlar .feat li.shared .ck .icon{color:var(--ink-2)}

#fiyatlar .plan-cta{padding-top:28px; align-self:end}

/* ---------- Örnek hesap ---------- */
#fiyatlar .calc{position:relative; margin-top:56px; background:var(--bg-2); border-radius:var(--r-l); padding:36px;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px 48px; align-items:start}
#fiyatlar .calc-k{--stamp-rot:-2deg}
#fiyatlar .calc-t{margin-top:14px; font-family:var(--display); font-weight:800; font-size:clamp(24px,2.3vw,30px); line-height:1.12; letter-spacing:-.02em}
#fiyatlar .calc-s{margin-top:10px; font-size:16px; color:var(--ink-2); max-width:40ch}
#fiyatlar .fy-mascot{position:absolute; top:-44px; right:36px; width:88px; height:91px; pointer-events:none}
#fiyatlar .fy-mascot img{position:absolute; inset:0; width:100%; height:100%; opacity:0; transform:scale(.86) rotate(-4deg);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-slow) var(--ease-spring)}
#fiyatlar .calc[data-state="pesin"] .fy-mascot .m-pesin,
#fiyatlar .calc[data-state="taksit"] .fy-mascot .m-taksit{opacity:1; transform:none}

/* Segment kontrolü: yuvarlak, tek renkli (lacivert) kayan gösterge */
#fiyatlar .fy-seg{position:relative; margin-top:24px; display:grid; grid-template-columns:1fr 1fr; width:100%; max-width:340px; padding:5px; background:#fff; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--line)}
#fiyatlar .fy-thumb{position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px; background:var(--ink);
  box-shadow:0 6px 12px -8px rgb(8 45 86 / .6);
  transition:transform var(--dur) var(--ease-out)}
#fiyatlar .fy-seg[data-state="taksit"] .fy-thumb{transform:translateX(100%)}
#fiyatlar .fy-seg button{position:relative; z-index:1; border:0; background:none; border-radius:999px; min-height:48px; padding:10px 18px; font-weight:700; font-size:16px; color:var(--ink-2); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
#fiyatlar .fy-seg button[aria-pressed="true"]{color:#fff}
#fiyatlar .fy-seg button:active{transform:scale(.97)}
#fiyatlar .fy-seg button:focus-visible{outline-offset:2px; border-radius:999px}

#fiyatlar .calc-out{display:grid; gap:22px; min-width:0}
#fiyatlar .calc-m{display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; margin:0}
#fiyatlar .calc-m > div{min-width:0}
#fiyatlar .calc-m dt{font-size:14.5px; font-weight:700; color:var(--ink-2)}
#fiyatlar .calc-m dd{margin:6px 0 0}
#fiyatlar .fy-roll{display:grid; overflow:hidden}
#fiyatlar .fy-roll > .fy-v{grid-area:1 / 1}
#fiyatlar .big{font-family:var(--display); font-weight:800; font-size:clamp(34px,3.3vw,46px); line-height:1.1; letter-spacing:-.035em; font-variant-numeric:tabular-nums lining-nums}
#fiyatlar .big .fy-v{white-space:nowrap}
#fiyatlar .cap{margin-top:4px; font-size:15px; line-height:1.45; color:var(--ink-2)}

#fiyatlar .calc-diff{display:flex; align-items:center; gap:10px; width:fit-content; max-width:100%; background:#fff; border-radius:999px; padding:8px 16px 8px 8px; font-weight:700; font-size:15.5px; line-height:1.35}
#fiyatlar .calc-diff .dot{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--cyan-50); color:var(--cyan-ink); transition:background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out)}
#fiyatlar .calc-diff .dot .icon{width:15px; height:15px; stroke-width:3}
#fiyatlar .calc-diff .ic-t{display:none}
#fiyatlar .calc[data-state="taksit"] .calc-diff .dot{background:var(--coral-50); color:var(--coral-ink)}
#fiyatlar .calc[data-state="taksit"] .calc-diff .ic-p{display:none}
#fiyatlar .calc[data-state="taksit"] .calc-diff .ic-t{display:block}

/* Karşılaştırma çubukları: peşin cyan, taksitli lacivert + mercan fark */
#fiyatlar .fy-bars{display:grid; gap:12px; padding-top:22px; border-top:1.5px dashed var(--line-2, #C9D3DF); margin:0}
#fiyatlar .fy-bar{display:grid; grid-template-columns:70px minmax(0,1fr) 76px; align-items:center; gap:12px; font-size:14.5px}
#fiyatlar .fy-bl{font-weight:700; color:var(--ink-2)}
#fiyatlar .fy-bv{text-align:right; font-weight:700; font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
#fiyatlar .fy-tr{position:relative; height:12px; border-radius:999px; background:rgb(8 45 86 / .07)}
#fiyatlar .fy-f, #fiyatlar .fy-x{position:absolute; top:0; bottom:0; border-radius:999px; opacity:.32; transition:opacity var(--dur) var(--ease-out)}
#fiyatlar .fy-f{left:0; width:var(--fy-pesin-w)}
#fiyatlar .is-pesin .fy-f{background:var(--cyan)}
#fiyatlar .is-taksit .fy-f{background:var(--ink); border-radius:999px 0 0 999px}
#fiyatlar .fy-x{left:calc(var(--fy-pesin-w) + 3px); right:0; border-radius:0 999px 999px 0;
  background:repeating-linear-gradient(-45deg, var(--coral) 0 5px, #FD8B84 5px 9px)}
#fiyatlar .calc[data-state="pesin"] .is-pesin .fy-f,
#fiyatlar .calc[data-state="taksit"] .is-taksit .fy-f,
#fiyatlar .calc[data-state="taksit"] .is-taksit .fy-x{opacity:1}
#fiyatlar .calc[data-state="pesin"] .is-pesin :is(.fy-bl,.fy-bv),
#fiyatlar .calc[data-state="taksit"] .is-taksit :is(.fy-bl,.fy-bv){color:var(--ink)}
#fiyatlar .fy-leg{margin-left:82px; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2)}
#fiyatlar .fy-leg i{flex:none; width:18px; height:10px; border-radius:999px; background:repeating-linear-gradient(-45deg, var(--coral) 0 4px, #FD8B84 4px 7px)}

/* ---------- Konuşma dersi satırı (sade) ---------- */

/* ---------- Güven satırı ---------- */

/* ---------- Hover (yalnızca ince imleç) + odak karşılıkları ---------- */
@keyframes fy-hop{0%{transform:translateY(0)} 38%{transform:translateY(-5px)} 72%{transform:translateY(.6px)} 100%{transform:translateY(0)}}
@media (hover:hover) and (pointer:fine){
  #fiyatlar .plan:hover{translate:0 -4px; rotate:var(--tilt); border-color:var(--hover-line); box-shadow:var(--shadow-m)}
  #fiyatlar .plan:hover .fy-crowd .kid{animation:fy-hop 520ms var(--ease-out) both; animation-delay:calc(var(--i,0) * 45ms)}
  #fiyatlar .plan:hover .fy-stamp{--stamp-rot:-8deg; scale:1.06}
  #fiyatlar .fy-seg button[aria-pressed="false"]:hover{color:var(--ink)}
}
#fiyatlar .plan:has(.btn:focus-visible){translate:0 -4px; rotate:var(--tilt); border-color:var(--hover-line); box-shadow:var(--shadow-m)}

/* ---------- Kırılımlar ---------- */
@media (max-width:1180px){
  #fiyatlar .plan > :is(.plan-top,.plan-price,.plan-cta){padding-inline:24px}
  #fiyatlar .feat{margin-inline:24px}
  #fiyatlar .calc{grid-template-columns:1fr; gap:28px}
}
@media (max-width:960px){
  #fiyatlar .plans{grid-template-columns:1fr; grid-template-rows:none; row-gap:28px; max-width:560px; margin-inline:auto}
  #fiyatlar .plan{grid-row:auto; grid-template-rows:auto}
  #fiyatlar .plan--ozel{order:-1} /* öne çıkan kart üstte; DOM sırası (ucuzdan pahalıya) korunur */
}
@media (max-width:720px){
  #fiyatlar .plan > :is(.plan-top,.plan-price,.plan-cta){padding-inline:20px}
  #fiyatlar .feat{margin-inline:20px}
  #fiyatlar .plan-band{height:104px}
  #fiyatlar .fy-crowd{height:40px}
  #fiyatlar .calc{margin-top:64px; padding:28px 20px 20px}
  #fiyatlar .fy-mascot{top:-46px; right:16px; width:72px; height:75px}
  #fiyatlar .calc-t{padding-right:64px}
  #fiyatlar .fy-seg{max-width:none}
  #fiyatlar .calc-m{gap:16px 20px}
  #fiyatlar .big{font-size:32px}
  #fiyatlar .fy-bar{grid-template-columns:58px minmax(0,1fr) 66px; gap:10px; font-size:14px}
  #fiyatlar .fy-leg{margin-left:68px}
}


/* ================= Öğretmenler ================= */
/* Dil rengi yalnızca küçük veri kodlamasında (filtre ve etiket noktası). Fotoğraf yüzeyleri tek aile: açık cyan. */
#ogretmenler{
  --l-en:var(--cyan,#00AED0); --l-de:var(--orange,#FB991E); --l-fr:var(--lilac,#C997CB); --l-es:var(--sun,#FFC94A); --l-ru:var(--green,#98C33F); --l-tr:var(--coral,#FC6961);
  --ph-bg:var(--cyan-50);                                         /* fotoğraf zemini */
  --ph-back:color-mix(in srgb, var(--cyan) 22%, #fff);            /* arkadaki şekil */
  --stamp:var(--sun,#FFC94A);                                     /* selam balonu (Poetsen damga) */
}
#ogretmenler [data-tone="en"]{--tone:var(--l-en)}
#ogretmenler [data-tone="de"]{--tone:var(--l-de)}
#ogretmenler [data-tone="fr"]{--tone:var(--l-fr)}
#ogretmenler [data-tone="es"]{--tone:var(--l-es)}
#ogretmenler [data-tone="ru"]{--tone:var(--l-ru)}
#ogretmenler [data-tone="zh"]{--tone:var(--orange)}
#ogretmenler [data-tone="tr"]{--tone:var(--l-tr)}

/* Başlıktaki el çizimi dalga */
#ogretmenler .o7-mark{position:relative; display:inline-block; white-space:nowrap}
#ogretmenler .o7-mark svg{position:absolute; left:-3%; bottom:-.2em; width:106%; height:.3em; overflow:visible; pointer-events:none}
#ogretmenler .o7-mark path{fill:none; stroke:var(--coral); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 900ms var(--ease-out) 120ms}
#ogretmenler .o7-mark.is-pending path{stroke-dashoffset:1; transition:none}

/* Filtre araç çubuğu */
#ogretmenler .sec-head{margin-bottom:28px}
#ogretmenler .t-tools{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; margin-bottom:clamp(32px,4vw,48px)}
#ogretmenler .t-filters{display:flex; flex-wrap:wrap; gap:8px}
#ogretmenler .chip{display:inline-flex; align-items:center; gap:8px; transition:transform var(--dur) var(--ease-spring), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)}
#ogretmenler .c-dot{width:10px; height:10px; border-radius:50%; background:var(--tone); flex:none; transition:transform var(--dur) var(--ease-spring)}
#ogretmenler .chip[aria-pressed="true"] .c-dot{transform:scale(1.2)}

/* Öğretmen ızgarası */
#ogretmenler .t-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px 28px}
#ogretmenler .teacher{min-width:0;
  --rf:47% 53% 44% 56% / 55% 47% 53% 45%;   /* fotoğraf çerçevesi */
  --rb:58% 42% 53% 47% / 45% 56% 44% 55%;   /* arkadaki renkli şekil */
  --tilt:-1deg}
#ogretmenler .teacher:nth-child(3n+2){--rf:53% 47% 52% 48% / 46% 54% 46% 54%; --rb:44% 56% 42% 58% / 57% 43% 57% 43%}
#ogretmenler .teacher:nth-child(3n){--rf:50% 50% 56% 44% / 52% 44% 56% 48%; --rb:52% 48% 60% 40% / 48% 60% 40% 52%}
#ogretmenler .teacher:nth-child(even){--tilt:1deg}
#ogretmenler .t-in{height:100%; display:flex; flex-direction:column; position:relative; transform-origin:50% 85%; transition:transform var(--dur-slow) var(--ease-spring)}
#ogretmenler .t-media{flex:none; width:100%; position:relative; aspect-ratio:1/1; margin-bottom:18px}
#ogretmenler .t-back{position:absolute; inset:11% 0 0 11%; background:#CCEFF6; background:var(--ph-back); border-radius:var(--rb); transition:transform var(--dur-slow) var(--ease-spring)}
#ogretmenler .t-ph{position:absolute; inset:0 8% 8% 0; overflow:hidden; isolation:isolate; border-radius:var(--rf); background:var(--ph-bg)}
#ogretmenler .teacher:nth-child(even) .t-back{inset:11% 11% 0 0}
#ogretmenler .teacher:nth-child(even) .t-ph{inset:0 0 8% 8%}
#ogretmenler .t-ph img{position:absolute; left:0; top:var(--oy,6%); width:100%; height:100%; max-width:none; object-fit:cover; mix-blend-mode:multiply; transform-origin:50% 100%; transition:transform var(--dur-slow) var(--ease-out)}

/* "Merhaba" balonu (o dilde) */
#ogretmenler .t-hi{position:absolute; z-index:2; top:-5%; right:-2%; padding:8px 14px 10px; border-radius:18px; background:var(--stamp); color:var(--ink); font-family:'Poetsen One', var(--display); font-weight:400; font-size:17px; line-height:1; white-space:nowrap; pointer-events:none;
  opacity:0; transform:translate(-6px,10px) scale(.72) rotate(-8deg); transform-origin:12px 120%;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out)}
#ogretmenler .t-hi[lang="ru"]{font-family:system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight:800; letter-spacing:-.01em}
#ogretmenler .teacher:nth-child(even) .t-hi{right:auto; left:-2%; transform-origin:calc(100% - 12px) 120%; transform:translate(6px,10px) scale(.72) rotate(8deg)}
#ogretmenler .t-hi svg{position:absolute; left:8px; top:calc(100% - 9px); width:22px; height:19px; fill:var(--stamp)}
#ogretmenler .teacher:nth-child(even) .t-hi svg{left:auto; right:8px; transform:scaleX(-1)}

/* Ad, dil, eylem */
#ogretmenler .t-name{font-family:var(--display); font-size:21px; font-weight:700; letter-spacing:-.012em; line-height:1.2}
#ogretmenler .t-lang{align-self:flex-start; margin-bottom:14px; display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:3px 11px 3px 9px; border-radius:999px; font-size:13.5px; font-weight:700; line-height:1.5; color:var(--ink); background:var(--bg-2)}
#ogretmenler .t-lang i{width:8px; height:8px; border-radius:50%; background:var(--tone); flex:none}
#ogretmenler .t-cta{text-decoration:none; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:auto; padding:0; border:0; background:none; font-weight:700; font-size:15px; line-height:1.4; color:var(--coral-ink); text-align:left}
#ogretmenler .t-roll{display:block; height:1.4em; overflow:hidden; min-width:0}
#ogretmenler .t-roll > span{display:block; white-space:nowrap; transition:transform var(--dur) var(--ease-out)}
#ogretmenler .t-arrow{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--coral-50); color:var(--coral-ink); transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring)}
#ogretmenler .t-arrow .icon{width:17px; height:17px; stroke-width:2.4; transition:transform var(--dur) var(--ease-out)}

/* Boş sonuç ve alt bağlantı */
#ogretmenler .t-empty{display:flex; align-items:center; gap:16px; padding:28px; border-radius:var(--r-l); background:var(--bg-2)}
#ogretmenler .t-empty img{width:56px; height:auto; flex:none}
#ogretmenler .t-more{margin-top:48px}
#ogretmenler .link .icon, #yorumlar .link .icon{transition:transform var(--dur) var(--ease-out)}
#ogretmenler .link, #yorumlar .link{transition:color var(--dur-fast) var(--ease-out)}

/* Hover ve klavye odağı: kart 1° eğilip kalkar, arkadaki şekil büyür, foto yakınlaşır, balon açılır, eylem metni kayar */
@media (hover:hover) and (pointer:fine){
  #ogretmenler .chip:hover{transform:translateY(-2px)}
  #ogretmenler .chip:hover .c-dot{transform:scale(1.3)}
  #ogretmenler .t-in:hover{transform:translateY(-6px) rotate(var(--tilt))}
  #ogretmenler .t-in:hover .t-back{transform:scale(1.07) rotate(5deg)}
  #ogretmenler .t-in:hover .t-ph img{transform:scale(1.04)}
  #ogretmenler .t-in:hover .t-hi{opacity:1; transform:none; transition:opacity var(--dur-fast) var(--ease-out) 60ms, transform var(--dur-slow) var(--ease-spring) 60ms}
  #ogretmenler .t-in:hover .t-roll > span{transform:translateY(-100%)}
  #ogretmenler .t-in:hover .t-arrow{background:var(--coral); color:var(--ink); transform:scale(1.08)}
  #ogretmenler .t-in:hover .t-arrow .icon{transform:translateX(3px)}
  #ogretmenler .link:hover .icon, #yorumlar .link:hover .icon{transform:translateX(4px)}
}
#ogretmenler .chip:focus-visible{transform:translateY(-2px)}
#ogretmenler .t-in:has(.t-cta:focus-visible){transform:translateY(-6px) rotate(var(--tilt))}
#ogretmenler .t-in:has(.t-cta:focus-visible) .t-back{transform:scale(1.07) rotate(5deg)}
#ogretmenler .t-in:has(.t-cta:focus-visible) .t-ph img{transform:scale(1.04)}
#ogretmenler .t-in:has(.t-cta:focus-visible) .t-hi{opacity:1; transform:none; transition:opacity var(--dur-fast) var(--ease-out) 60ms, transform var(--dur-slow) var(--ease-spring) 60ms}
#ogretmenler .t-in:has(.t-cta:focus-visible) .t-roll > span{transform:translateY(-100%)}
#ogretmenler .t-in:has(.t-cta:focus-visible) .t-arrow{background:var(--coral); color:var(--ink)}
#ogretmenler .t-in:has(.t-cta:focus-visible) .t-arrow .icon{transform:translateX(3px)}
#ogretmenler .link:focus-visible .icon, #yorumlar .link:focus-visible .icon{transform:translateX(4px)}
@supports selector(:has(a)){
  #ogretmenler .t-cta:focus-visible{outline:none}
  #ogretmenler .t-in:has(.t-cta:focus-visible){outline:3px solid var(--cyan-ink); outline-offset:12px; border-radius:26px}
}
/* Basma */
#ogretmenler .chip:active{transform:scale(.96)}
#ogretmenler .t-in:active{transform:translateY(-3px) rotate(var(--tilt)) scale(.98); transition-duration:var(--dur-fast)}

@media (max-width:1180px){ #ogretmenler .t-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:960px){
  #ogretmenler .t-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 24px}
}
@media (max-width:720px){
  #ogretmenler .t-grid{gap:32px 14px}
  #ogretmenler .t-filters{gap:6px}
  #ogretmenler .chip{padding:7px 13px; font-size:14.5px; gap:7px}
  #ogretmenler .c-dot{width:9px; height:9px}
  #ogretmenler .t-media{margin-bottom:14px}
  #ogretmenler .t-name{font-size:17.5px}
  #ogretmenler .t-lang{font-size:12.5px; padding:2px 9px 2px 7px; margin-top:6px}
  #ogretmenler .t-cta{font-size:14px; margin-top:auto}
  #ogretmenler .t-roll{height:2.28em}
  #ogretmenler .t-roll > span{height:100%; line-height:1.14; white-space:normal; align-content:center}
  #ogretmenler .t-arrow{width:30px; height:30px}
  #ogretmenler .t-more{margin-top:36px}
}

/* ================= Veli yorumları ================= */
#yorumlar{--av-bg:color-mix(in srgb, var(--cyan) 22%, #fff)}
#yorumlar .rv-grid{display:grid; grid-template-columns:1.22fr 1fr; gap:24px 32px; align-items:stretch}
#yorumlar .rv-col{display:grid; gap:24px}
#yorumlar .rv{margin:0; display:flex; flex-direction:column; min-width:0}
#yorumlar .rv-main{--bub:var(--sun-50,#FFF8E1)}
#yorumlar .rv-a, #yorumlar .rv-b{--bub:var(--bg-2)}
#yorumlar .rv-bub{position:relative; flex:1; background:var(--bub); border-radius:36px; padding:26px 32px 30px; transform-origin:64px 100%; transition:transform var(--dur-slow) var(--ease-spring)}
#yorumlar .rv-main .rv-bub{padding:40px 48px 48px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; min-height:340px}
#yorumlar .rv-mascot{position:absolute; top:30px; right:36px; width:112px; aspect-ratio:120/124; transform:rotate(7deg); transform-origin:30% 90%; transition:transform var(--dur-slow) var(--ease-spring)}
#yorumlar .rv-mascot img{position:absolute; inset:0; width:100%; height:100%; transition:opacity var(--dur-fast) var(--ease-out)}
#yorumlar .rv-mascot .wink{opacity:0}
#yorumlar .rv-q{display:block; width:max-content; font-family:var(--display); font-weight:800; color:var(--coral); font-size:84px; line-height:1; height:44px; margin:-6px 0 6px -3px; transform-origin:50% 60%}
#yorumlar .rv-main .rv-q{font-size:150px; height:74px; margin:-14px 0 0 -6px}
#yorumlar blockquote{margin:0}
#yorumlar blockquote p{font-family:var(--display); font-weight:600; font-size:20px; line-height:1.4; letter-spacing:-.01em; color:var(--ink); max-width:36ch; text-wrap:pretty}
#yorumlar .rv-main blockquote p{font-weight:700; font-size:clamp(30px,3.1vw,44px); line-height:1.12; letter-spacing:-.022em; max-width:17ch; text-wrap:balance}
#yorumlar .rv-tail{position:absolute; left:40px; top:calc(100% - 20px); width:56px; height:49px; fill:var(--bub)}
#yorumlar .rv-by{display:flex; align-items:center; gap:12px; margin-top:34px; padding-left:16px}
#yorumlar .rv-av{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; flex:none; background:#D0F0F6; background:var(--av-bg); color:var(--ink); font-family:var(--display); font-weight:800; font-size:21px; line-height:1; transition:transform var(--dur) var(--ease-spring)}
#yorumlar .rv-by strong{display:block; font-size:16px; line-height:1.3}
#yorumlar .rv-by small{display:block; font-size:14.5px; color:var(--muted); line-height:1.35; margin-top:2px}
@keyframes o7-wiggle{0%{transform:none}30%{transform:rotate(-10deg) scale(1.06)}62%{transform:rotate(5deg)}100%{transform:none}}
@media (hover:hover) and (pointer:fine){
  #yorumlar .rv:hover .rv-bub{transform:translateY(-4px) rotate(-1deg)}
  #yorumlar .rv:hover .rv-av{transform:scale(1.08) rotate(-6deg)}
  #yorumlar .rv:hover .rv-q{animation:o7-wiggle 560ms var(--ease-out)}
  #yorumlar .rv-main:hover .rv-mascot{transform:rotate(-4deg) scale(1.06)}
  #yorumlar .rv-main:hover .rv-mascot .wink{opacity:1}
  #yorumlar .rv-main:hover .rv-mascot .happy{opacity:0}
}
@media (max-width:960px){
  #yorumlar .rv-grid{grid-template-columns:1fr}
  #yorumlar .rv-main blockquote p{max-width:20ch}
}
@media (max-width:720px){
  #yorumlar .rv-bub{border-radius:30px; padding:22px 22px 26px}
  #yorumlar .rv-main .rv-bub{padding:28px 24px 32px; gap:12px; min-height:0}
  #yorumlar .rv-mascot{top:24px; right:20px; width:58px}
  #yorumlar .rv-main .rv-q{font-size:110px; height:54px; margin:-10px 0 0 -4px}
  #yorumlar .rv-main blockquote p{font-size:28px}
  #yorumlar blockquote p{font-size:18.5px}
  #yorumlar .rv-tail{left:30px}
  #yorumlar .rv-by{padding-left:6px}
}


/* ===== Nasıl başlanır (#baslangic) — noktalı patika üzerinde üç adım ===== */
#baslangic{
  --bs-1:var(--coral,#FC6961);    --bs-1-50:var(--coral-50,#FFF0EE);
  --bs-2:var(--orange,#FB991E);   --bs-2-50:var(--orange-50,#FFF3E2);
  --bs-3:var(--green,#98C33F);    --bs-3-50:var(--green-50,#EEF6E2);
  --bs-sun:var(--sun,#FFC94A);
  --bs-dot:#C9D3DF;
}
#baslangic .vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
#baslangic .bs-mark{position:relative; display:inline-block; white-space:nowrap}
#baslangic .bs-mark svg{position:absolute; left:-3%; bottom:-.2em; width:106%; height:.34em; overflow:visible; pointer-events:none}
#baslangic .bs-mark path{fill:none; stroke:var(--bs-3); stroke-width:6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}

/* Patika */
#baslangic .bs-track{position:relative}
#baslangic .bs-path{position:absolute; left:0; top:0; width:100%; height:64px; overflow:visible; pointer-events:none; z-index:0}
#baslangic .bs-path path{fill:none; stroke-width:5; stroke-linecap:round; stroke-dasharray:0 13; vector-effect:non-scaling-stroke}
#baslangic .bs-path.t path{stroke:var(--bs-dot)}
#baslangic .bs-path.k path{stroke:url(#bs-grad)}
#baslangic .bs-seg{display:none}

/* Adımlar */
#baslangic .bs-steps{position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
#baslangic .bs-step{--sc:var(--bs-1); --sc-50:var(--bs-1-50); position:relative; display:flex; flex-direction:column; align-items:center; gap:20px}
#baslangic .bs-step:nth-child(2){--sc:var(--bs-2); --sc-50:var(--bs-2-50)}
#baslangic .bs-step:nth-child(3){--sc:var(--bs-3); --sc-50:var(--bs-3-50)}
#baslangic .bs-num{position:relative; z-index:1; flex:none; width:64px; height:64px; border-radius:50% 47% 52% 48% / 50% 52% 48% 50%; display:grid; place-items:center; background:var(--sc); color:var(--ink); font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; box-shadow:0 0 0 6px var(--bg)}

#baslangic .bs-card{align-self:stretch; flex:1; display:flex; flex-direction:column; gap:8px; background:var(--bg-2); border-radius:var(--r-l); padding:12px 12px 24px; transition:transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur) var(--ease-out)}
#baslangic .bs-card h3{font-family:var(--display); font-weight:800; font-size:24px; line-height:1.15; letter-spacing:-.02em; padding:14px 12px 0}
#baslangic .bs-card p{color:var(--ink-2); font-size:16px; line-height:1.55; padding:0 12px; max-width:40ch}

/* Mini görseller (örnek görünüm) */
#baslangic .bs-mini{position:relative; overflow:hidden; min-height:164px; border-radius:var(--r-m); background:#fff; padding:16px; display:flex; flex-direction:column; gap:10px}
#baslangic .bs-lbl{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
#baslangic .bs-chips{display:flex; flex-wrap:wrap; gap:8px}
#baslangic .bs-chip{display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--line); border-radius:999px; padding:6px 12px; font-size:13.5px; font-weight:700; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums; transition:transform var(--dur-slow) var(--ease-spring)}
#baslangic .bs-chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
#baslangic .bs-chip .icon{width:14px; height:14px; stroke-width:2.6; transition:transform var(--dur-slow) var(--ease-spring)}

#baslangic .bs-foot{margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-2)}
#baslangic .bs-foot .icon{width:14px; height:14px; stroke-width:2.6; color:var(--ink-2)}
#baslangic .bs-opts{display:grid; gap:4px}
#baslangic .bs-opt{display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:12px; font-size:14.5px; font-weight:700; line-height:1.2}
#baslangic .bs-opt em{margin-left:auto; font-style:normal; font-weight:500; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
#baslangic .bs-opt i{flex:none; width:16px; height:16px; border-radius:50%; border:1.5px solid #B7C3D1; display:grid; place-items:center}
#baslangic .bs-opt.on{background:var(--bg-2)}
#baslangic .bs-opt.on em{color:var(--ink-2)}
#baslangic .bs-opt.on i{background:var(--ink); border-color:var(--ink)}
#baslangic .bs-opt.on i::after{content:""; width:6px; height:6px; border-radius:50%; background:#fff; transition:transform var(--dur-slow) var(--ease-spring)}

#baslangic .bs-m3{background:var(--cyan-50,#E7F6FA); padding:0; height:164px}
#baslangic .bs-m3 img{position:absolute; left:50%; bottom:-22px; width:190px; max-width:none; translate:-50% 0; mix-blend-mode:multiply; transition:transform var(--dur-slow) var(--ease-out); transform-origin:50% 100%}
#baslangic .bs-live{position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:6px; background:#fff; border-radius:999px; padding:5px 10px 6px; font-family:'Poetsen One', var(--display); font-size:13px; line-height:1}
#baslangic .bs-live i{width:8px; height:8px; border-radius:50%; background:#E0453C; box-shadow:0 0 0 3px rgba(224,69,60,.18)}
#baslangic .bs-who{position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,.94); border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:700; line-height:1.2}
#baslangic .bs-ctrl{position:absolute; right:12px; bottom:12px; display:flex; gap:6px}
#baslangic .bs-ctrl span{width:26px; height:26px; border-radius:50%; background:#fff; display:grid; place-items:center}
#baslangic .bs-ctrl svg{width:14px; height:14px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* Kutlayan maskot (son adım) */
#baslangic .bs-cheer{position:absolute; right:-6px; top:-46px; width:84px; z-index:2; pointer-events:none}
#baslangic .bs-cheer img{width:84px; height:auto; rotate:8deg; transition:transform var(--dur-slow) var(--ease-spring)}
#baslangic .bs-cheer svg{position:absolute; left:-22px; top:-6px; width:30px; height:30px; fill:none; stroke-width:2.4; stroke-linecap:round}
#baslangic .bs-cheer svg + svg{left:-12px; top:46px; width:20px; height:20px; rotate:-70deg}

/* Çağrı */
#baslangic .bs-cta{margin-top:clamp(40px,5vw,56px); display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center}
#baslangic .bs-cta p{font-size:15.5px; color:var(--ink-2)}
#baslangic .bs-btn{transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-slow) var(--ease-spring)}
#baslangic .bs-btn .icon{transition:transform var(--dur) var(--ease-out)}

/* Hover ve odak */
#baslangic .bs-btn:focus-visible .icon{transform:translateX(4px)}
@media (hover:hover) and (pointer:fine){
  #baslangic .bs-step:nth-child(1) .bs-card:hover{transform:translateY(-6px) rotate(-1.2deg)}
  #baslangic .bs-step:nth-child(2) .bs-card:hover{transform:translateY(-6px) rotate(1.2deg)}
  #baslangic .bs-step:nth-child(3) .bs-card:hover{transform:translateY(-6px) rotate(-1deg)}
  #baslangic .bs-card:hover{box-shadow:inset 0 0 0 1.5px var(--sc), 0 22px 36px -24px rgb(8 45 86 / .45)}
  #baslangic .bs-card:hover .bs-chip.on{transform:translateY(-3px) scale(1.05)}
  #baslangic .bs-card:hover .bs-chip.on .icon{transform:rotate(-12deg) scale(1.2)}
  #baslangic .bs-card:hover .bs-opt.on i::after{transform:scale(1.6)}
  #baslangic .bs-card:hover .bs-m3 img{transform:scale(1.04)}
  #baslangic .bs-step:nth-child(3):hover .bs-cheer img{transform:translateY(-8px) rotate(-10deg)}
  #baslangic .bs-btn:hover{transform:translateY(-2px)}
  #baslangic .bs-btn:hover .icon{transform:translateX(4px)}
}
#baslangic .bs-btn:active{transform:scale(.98); transition-duration:var(--dur-fast)}

/* Kaydırmayla: patika soldan sağa dolar, adım numaraları sırayla renklenir, maskot en sonda zıplar */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes bs-draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
    @keyframes bs-fill-x{from{clip-path:inset(-20px 84% -20px 0)} to{clip-path:inset(-20px -20px -20px 0)}}
    @keyframes bs-fill-y{from{clip-path:inset(0 -10px 100% -10px)} to{clip-path:inset(0 -10px 0 -10px)}}
    @keyframes bs-on2{0%,36%{background:var(--bg); color:var(--muted); box-shadow:0 0 0 6px var(--bg), inset 0 0 0 2px var(--bs-dot); transform:scale(.9)} 42%{background:var(--sc); color:var(--ink); box-shadow:0 0 0 6px var(--bg), inset 0 0 0 2px transparent; transform:scale(1.14)} 48%,100%{background:var(--sc); color:var(--ink); box-shadow:0 0 0 6px var(--bg), inset 0 0 0 2px transparent; transform:scale(1)}}
    @keyframes bs-on3{0%,76%{background:var(--bg); color:var(--muted); box-shadow:0 0 0 6px var(--bg), inset 0 0 0 2px var(--bs-dot); transform:scale(.9)} 82%{background:var(--sc); color:var(--ink); box-shadow:0 0 0 6px var(--bg), inset 0 0 0 2px transparent; transform:scale(1.14)} 88%,100%{background:var(--sc); color:var(--ink); box-shadow:0 0 0 6px var(--bg), inset 0 0 0 2px transparent; transform:scale(1)}}
    @keyframes bs-cheer{0%,90%{opacity:0; transform:translateY(14px) scale(.7) rotate(-10deg)} 96%{opacity:1; transform:translateY(-6px) scale(1.06) rotate(4deg)} 100%{opacity:1; transform:none}}
    @keyframes bs-pop{0%{background:var(--bg); color:var(--muted); box-shadow:0 0 0 6px var(--bg), inset 0 0 0 2px var(--bs-dot); transform:scale(.9)} 60%{background:var(--sc); color:var(--ink); box-shadow:0 0 0 6px var(--bg), inset 0 0 0 2px transparent; transform:scale(1.12)} 100%{background:var(--sc); color:var(--ink); box-shadow:0 0 0 6px var(--bg), inset 0 0 0 2px transparent; transform:scale(1)}}
    #baslangic .sec-head{view-timeline:--bs-head block}
    #baslangic .bs-mark path{animation:bs-draw linear both; animation-timeline:--bs-head; animation-range:entry 60% cover 42%}
    #baslangic .bs-track{view-timeline:--bs-tl block}
    @media (min-width:961px){
      #baslangic .bs-path.k{animation:bs-fill-x linear both; animation-timeline:--bs-tl; animation-range:entry 30% cover 48%}
      #baslangic .bs-step:nth-child(2) .bs-num{animation:bs-on2 linear both; animation-timeline:--bs-tl; animation-range:entry 30% cover 48%}
      #baslangic .bs-step:nth-child(3) .bs-num{animation:bs-on3 linear both; animation-timeline:--bs-tl; animation-range:entry 30% cover 48%}
      #baslangic .bs-cheer{animation:bs-cheer linear both; animation-timeline:--bs-tl; animation-range:entry 30% cover 48%}
    }
    @media (max-width:960px){
      #baslangic .bs-step{view-timeline:--bs-li block}
      #baslangic .bs-seg.k{animation:bs-fill-y linear both; animation-timeline:--bs-li; animation-range:cover 22% cover 50%}
      #baslangic .bs-step:not(:first-child) .bs-num{animation:bs-pop linear both; animation-timeline:--bs-li; animation-range:entry 30% entry 80%}
      #baslangic .bs-cheer{animation:bs-cheer linear both; animation-timeline:--bs-li; animation-range:entry 10% cover 40%}
    }
  }
}

/* Tablet ve mobil: dikey zaman çizgisi */
@media (max-width:960px){
  #baslangic .bs-path{display:none}
  #baslangic .bs-steps{grid-template-columns:minmax(0,1fr); gap:28px}
  #baslangic .bs-step{display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:16px; align-items:start}
  #baslangic .bs-num{width:52px; height:52px; font-size:18px}
  #baslangic .bs-step{max-width:640px}
  #baslangic .bs-mini{min-height:0}
  #baslangic .bs-m3{height:168px}
  #baslangic .bs-seg{display:block; position:absolute; left:14px; top:62px; width:24px; height:calc(100% - 36px); overflow:visible; pointer-events:none}
  #baslangic .bs-seg path{fill:none; stroke-width:5; stroke-linecap:round; stroke-dasharray:0 13; vector-effect:non-scaling-stroke}
  #baslangic .bs-seg.t path{stroke:var(--bs-dot)}
  #baslangic .bs-seg.k path{stroke:var(--sc)}
  #baslangic .bs-cheer{right:-4px; top:-30px; width:64px}
  #baslangic .bs-cheer img{width:64px}
}
@media (max-width:720px){
  #baslangic .bs-steps{gap:24px}
  #baslangic .bs-step{grid-template-columns:44px minmax(0,1fr); column-gap:12px}
  #baslangic .bs-num{width:44px; height:44px; font-size:16px; box-shadow:0 0 0 5px var(--bg)}
  #baslangic .bs-seg{left:10px; top:52px; height:calc(100% - 30px)}
  #baslangic .bs-chip:nth-child(4){display:none}
  #baslangic .bs-card{padding:10px 10px 20px}
  #baslangic .bs-card h3{font-size:22px; padding:12px 8px 0}
  #baslangic .bs-card p{padding:0 8px}
  #baslangic .bs-mini{padding:14px}
  #baslangic .bs-cheer{right:-2px; top:-26px; width:56px}
  #baslangic .bs-cheer img{width:56px}
  #baslangic .bs-cheer svg{left:-16px; width:24px; height:24px}
  #baslangic .bs-cta .btn{width:100%}
}

/* entegrasyon: kutlayan maskotun mobilde yatay taşmasını kes */
#baslangic{overflow-x:clip}


/* ---------- Ortak (yalnızca bu bölümün kökleri) ---------- */
#kurumlar, #sss, #son, .footer{
  --k-sun:var(--sun,#FFC94A); --k-cyan:var(--cyan,#00AED0);
}

/* ---------- Kurumlar ---------- */
#kurumlar{max-width:var(--wrap); margin:clamp(56px,8vw,112px) auto 0; background:var(--coral-50); border-radius:40px; padding:clamp(28px,5vw,64px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,72px); align-items:center}
#kurumlar .lead{max-width:46ch}
#kurumlar .kap-items{margin-top:28px}
#kurumlar .kap-items li + li{border-top:1.5px solid rgba(194,52,43,.14)}
#kurumlar .kap-item{display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:16px; width:calc(100% + 32px); margin-inline:-16px; padding:16px; border:0; border-radius:18px; background:transparent; color:var(--ink); text-align:left; transition:background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
#kurumlar .kap-tile{width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:#fff; color:var(--c-ink); box-shadow:inset 0 0 0 1.5px rgba(8,45,86,.06); transition:background-color var(--dur) var(--ease-out), color var(--dur-fast), rotate var(--dur-slow) var(--ease-spring), scale var(--dur-slow) var(--ease-spring)}
#kurumlar .kap-tile .icon{width:26px; height:26px; stroke-width:1.8}
#kurumlar .kap-items{--c:var(--coral); --c-ink:var(--coral-ink)}
#kurumlar .kap-item strong{display:block; font-family:var(--display); font-weight:700; font-size:18px; line-height:1.25; letter-spacing:-.01em}
#kurumlar .kap-item .kap-d{display:block; margin-top:2px; color:var(--ink-2); font-size:15.5px; line-height:1.45}
#kurumlar .kap-cta{margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px}
#kurumlar .kap-cta .btn .icon{transition:transform var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  #kurumlar .kap-cta .btn:hover .icon{transform:translateX(3px)}
}

#kurumlar .kap-plan{background:#fff; border-radius:28px; padding:clamp(22px,3vw,32px); box-shadow:0 1px 2px rgba(8,45,86,.05), 0 28px 56px -32px rgba(194,52,43,.38)}
#kurumlar .kap-plan h3{font-family:var(--display); font-weight:800; font-size:clamp(20px,1.8vw,23px); line-height:1.15; letter-spacing:-.015em}
#kurumlar .kap-plan > p{margin-top:6px; font-size:15px; color:var(--ink-2)}
#kurumlar .kap-steps{position:relative; margin-top:24px; display:grid; gap:22px}
#kurumlar .kap-steps::before{content:""; position:absolute; left:19px; top:24px; bottom:24px; border-left:2px dashed rgba(8,45,86,.2)}
#kurumlar .kap-steps li{position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; align-items:start}
#kurumlar .kap-n{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-family:var(--display); font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; box-shadow:0 0 0 5px #fff}
#kurumlar .kap-steps strong{display:block; font-family:var(--display); font-weight:700; font-size:17px; line-height:1.3; padding-top:2px}
#kurumlar .kap-steps div > span{display:block; margin-top:2px; font-size:15px; line-height:1.45; color:var(--ink-2)}
#kurumlar .kap-cert{margin-top:24px; padding-top:18px; border-top:1.5px solid var(--line); display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; align-items:center; font-size:14.5px; line-height:1.4; color:var(--ink-2)}
#kurumlar .kap-cert b{display:block; color:var(--ink); font-size:15px}
#kurumlar .kap-cert .kap-n{background:var(--coral-50); color:var(--coral-ink); box-shadow:none}
#kurumlar .kap-cert .icon{width:22px; height:22px}

/* ---------- SSS ---------- */
#sss .kap-faq-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,5vw,80px); align-items:start}
#sss .kap-side{position:sticky; top:104px}
#sss .kap-side .lead{max-width:34ch}
#sss .kap-help{position:relative; margin-top:32px; max-width:420px; background:var(--cyan-50); border-radius:28px; padding:24px 24px 22px}
#sss .kap-tail{position:absolute; left:38px; top:100%; width:34px; height:26px; margin-top:-1px; fill:var(--cyan-50)}
#sss .kap-help-t{font-family:var(--display); font-weight:800; font-size:22px; line-height:1.15; letter-spacing:-.015em}
#sss .kap-help-t + p{margin-top:4px; color:var(--ink-2); font-size:15.5px}
#sss .kap-num-row{margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px}
#sss .kap-num{font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap}
#sss .kap-copy{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px 0 11px; border:0; border-radius:999px; background:#fff; color:var(--ink); font-weight:700; font-size:14.5px; box-shadow:inset 0 0 0 1.5px rgba(8,45,86,.12); transition:box-shadow var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out)}
#sss .kap-copy:active{transform:scale(.96)}
#sss .kap-copy-ic{position:relative; width:18px; height:18px}
#sss .kap-copy-ic .icon{position:absolute; inset:0; width:18px; height:18px; transition:opacity var(--dur) var(--ease-out), scale var(--dur) var(--ease-spring), filter var(--dur)}
#sss .kap-copy-ic .kap-ok{opacity:0; scale:.5; filter:blur(2px)}
#sss .kap-copy[data-state="ok"]{background:var(--green-50); color:#3D6310; box-shadow:inset 0 0 0 1.5px rgba(74,114,18,.35)}
#sss .kap-copy[data-state="ok"] .kap-cp{opacity:0; scale:.5; filter:blur(2px)}
#sss .kap-copy[data-state="ok"] .kap-ok{opacity:1; scale:1; filter:none}
#sss .kap-copy[data-state="sel"]{box-shadow:inset 0 0 0 1.5px var(--cyan-ink)}
#sss .kap-mail{margin-top:6px; font-size:15px; color:var(--ink-2)}
#sss .kap-mail b{color:var(--ink); font-weight:600}
#sss .kap-help .btn{margin-top:18px}
#sss .kap-help .btn .icon{transition:rotate var(--dur) var(--ease-spring)}
#sss .kap-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

#sss .kap-mascot{position:relative; width:84px; height:87px; margin:20px 0 0 14px}
#sss .kap-mascot img{position:absolute; inset:0; width:100%; height:100%; transition:opacity var(--dur-fast)}
#sss .kap-mascot .kap-m2{opacity:0}
#sss .kap-mascot-b{width:100%; height:100%; transform-origin:30% 90%}
#sss .kap-qm{position:absolute; left:92px; top:-10px; font-family:'Poetsen One', var(--display); font-size:34px; line-height:1; color:var(--coral-ink); opacity:0; pointer-events:none}
#sss .kap-mascot.is-asking .kap-mascot-b{animation:kap-tilt 900ms var(--ease-out)}
#sss .kap-mascot.is-asking .kap-qm{animation:kap-qpop 1300ms var(--ease-out)}
@keyframes kap-tilt{0%{transform:none} 22%{transform:translateY(-8px) rotate(-10deg)} 48%{transform:translateY(0) rotate(4deg)} 70%{transform:rotate(-2deg)} 100%{transform:none}}
@keyframes kap-qpop{0%{opacity:0; transform:translateY(6px) scale(.5) rotate(-20deg)} 18%{opacity:1; transform:translateY(-4px) scale(1.12) rotate(8deg)} 30%{transform:translateY(0) scale(1) rotate(0)} 78%{opacity:1} 100%{opacity:0; transform:translateY(-6px)}}

#sss .kap-faq{display:grid; gap:10px}
#sss .kap-faq details{--c:var(--coral); border-radius:22px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); transition:background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)}
#sss .kap-faq details[open]:not(.kap-closing){background:var(--bg-2); box-shadow:inset 0 0 0 1.5px transparent}
#sss .kap-faq summary{list-style:none; display:grid; grid-template-columns:minmax(0,1fr) 36px; align-items:center; gap:16px; padding:18px 18px 18px 24px; border-radius:22px; cursor:pointer; font-family:var(--display); font-weight:700; font-size:clamp(17px,1.35vw,19px); line-height:1.3; letter-spacing:-.01em; transition:color var(--dur-fast)}
#sss .kap-faq summary::-webkit-details-marker{display:none}
#sss .kap-faq summary::marker{content:""}
#sss .kap-faq summary:focus-visible{outline-offset:-3px; border-radius:22px}
#sss .kap-pm{position:relative; width:36px; height:36px; border-radius:50%; background:var(--coral-50); color:var(--coral-ink); transition:rotate var(--dur-slow) var(--ease-spring), scale var(--dur) var(--ease-spring), background-color var(--dur-fast), color var(--dur-fast)}
#sss .kap-pm i{position:absolute; left:50%; top:50%; width:14px; height:2.5px; margin:-1.25px 0 0 -7px; border-radius:2px; background:currentColor; transition:transform var(--dur) var(--ease-out)}
#sss .kap-pm i + i{transform:rotate(90deg)}
#sss .kap-faq details[open]:not(.kap-closing) .kap-pm{rotate:180deg; background:var(--coral); color:var(--ink)}
#sss .kap-faq details[open]:not(.kap-closing) .kap-pm i + i{transform:rotate(90deg) scaleX(0)}
#sss .kap-a-in{padding:0 72px 22px 24px; color:var(--ink-2); max-width:calc(62ch + 96px)}
#sss .kap-a-in a{color:var(--ink); font-weight:700; text-underline-offset:3px; text-decoration-color:var(--coral)}
#sss .kap-a{opacity:1; translate:0 0; transition:opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out)}
#sss .kap-faq details:not([open]) .kap-a, #sss .kap-faq details.kap-closing .kap-a{opacity:0; translate:0 -6px}
@starting-style{ #sss .kap-faq details[open] .kap-a{opacity:0; translate:0 -6px} }
@media (hover:hover) and (pointer:fine){
  #sss .kap-faq details:not([open]):hover{box-shadow:inset 0 0 0 1.5px var(--c)}
  #sss .kap-faq summary:hover{color:var(--coral-ink)}
  #sss .kap-faq summary:hover .kap-pm{scale:1.1; background:var(--coral); color:var(--ink)}
  #sss .kap-copy:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
  #sss .kap-help:hover + .kap-mascot .kap-m1, #sss .kap-mascot:hover .kap-m1{opacity:0}
  #sss .kap-help:hover + .kap-mascot .kap-m2, #sss .kap-mascot:hover .kap-m2{opacity:1}
  #sss .kap-help .btn:hover .icon{rotate:-12deg}
}
#sss .kap-faq summary:focus-visible .kap-pm{scale:1.1; background:var(--coral); color:var(--ink)}
#sss .kap-copy:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ink)}
/* Akıcı yükseklik: destekleyen tarayıcıda yalnızca CSS; diğerlerinde küçük JS (aşağıda) */
@supports (interpolate-size:allow-keywords){
  #sss .kap-faq{interpolate-size:allow-keywords}
  #sss .kap-faq details::details-content{block-size:0; overflow-y:clip; transition:block-size 220ms var(--ease-out), content-visibility 220ms allow-discrete}
  #sss .kap-faq details[open]::details-content{block-size:auto; transition-duration:320ms}
}

/* ---------- Kapanış CTA ---------- */
#son{max-width:var(--wrap); margin:clamp(56px,8vw,112px) auto 0; background:var(--k-sun); color:var(--ink); border-radius:40px; padding:clamp(28px,5vw,72px); display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(20px,4vw,48px); align-items:center; overflow:hidden}
#son .kap-stamp{display:inline-block; font-family:'Poetsen One', var(--display); font-size:17px; line-height:1; padding:9px 14px 8px; border-radius:999px; background:#fff; rotate:-4deg; margin-bottom:18px}
#son h2{font-size:clamp(38px,5.2vw,68px); letter-spacing:-.03em}
#son .kap-u{position:relative; display:inline-block; white-space:nowrap}
#son .kap-u svg{position:absolute; left:-2%; width:104%; bottom:-.16em; height:.34em; overflow:visible}
#son .kap-u path{fill:none; stroke:var(--coral-ink); stroke-width:4.2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}
#son .kap-f-copy > p{margin-top:20px; max-width:44ch; font-size:clamp(17px,1.5vw,19px); font-weight:500}
#son .kap-ctas{margin-top:28px; display:flex; flex-wrap:wrap; gap:12px}
#son .kap-ctas .btn{transition:background-color var(--dur-fast), box-shadow var(--dur-fast), translate var(--dur) var(--ease-spring), transform var(--dur-fast) var(--ease-out)}
#son .kap-ctas .btn:active{transform:scale(.98)}
#son .kap-ctas .btn .icon{transition:transform var(--dur) var(--ease-out), rotate var(--dur) var(--ease-spring)}
#son .kap-btn-light{background:#fff; color:var(--ink); box-shadow:0 1px 0 rgba(8,45,86,.08)}
#son .kap-team{margin-top:32px; display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); border-radius:999px; padding:4px 12px 4px 4px; margin-left:-4px}
#son .kap-ava{display:flex; flex:none}
#son .kap-ava img{width:44px; height:44px; border-radius:50%; background:#fff; object-fit:cover; box-shadow:0 0 0 3px var(--k-sun); transition:translate var(--dur) var(--ease-spring)}
#son .kap-ava img + img{margin-left:-12px}
#son .kap-team-t{font-size:15px; line-height:1.35}
#son .kap-team-t b{display:block; font-family:var(--display); font-size:17px; white-space:nowrap}
#son .kap-team-t span{display:inline-flex; align-items:center; gap:4px; font-weight:600; border-bottom:2px solid rgba(8,45,86,.25); transition:border-color var(--dur-fast)}
#son .kap-team-t .icon{width:16px; height:16px; transition:transform var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  #son .kap-ctas .btn:hover{translate:0 -2px}
  #son .kap-ctas .btn:hover .kap-arr{transform:translateX(3px)}
  #son .kap-ctas .btn:hover .kap-wa{rotate:-12deg}
  #son .kap-btn-light:hover{box-shadow:0 6px 16px -8px rgba(8,45,86,.35)}
  #son .kap-team:hover .kap-ava img{translate:calc(var(--i) * 5px) -3px}
  #son .kap-team:hover .kap-ava img:nth-child(odd){translate:calc(var(--i) * 5px) -5px}
  #son .kap-team:hover .kap-team-t span{border-color:var(--ink)}
  #son .kap-team:hover .kap-team-t .icon{transform:translateX(3px)}
}
#son .kap-team:focus-visible .kap-team-t span{border-color:var(--ink)}
#son .kap-art{position:relative; height:clamp(300px,30vw,400px)}
#son .kap-f-m{position:absolute; left:50%; top:50%; width:clamp(170px,17vw,224px); aspect-ratio:120/124; translate:-50% -46%; transition:translate var(--dur-slow) var(--ease-spring)}
#son .kap-f-m img{position:absolute; inset:0; width:100%; height:100%; transition:opacity var(--dur-fast)}
#son .kap-f-m .kap-m2{opacity:0}
#son .kap-spark{position:absolute; left:calc(50% + clamp(70px,7vw,96px)); top:calc(50% - clamp(118px,11vw,150px)); width:44px; height:44px; fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round}
#son .kap-hi{position:absolute; left:var(--x); top:var(--y); padding:9px 15px 8px; border-radius:16px; background:var(--bg-c); color:var(--fg-c,var(--ink)); font-family:'Poetsen One', var(--display); font-size:clamp(15px,1.4vw,19px); line-height:1.1; white-space:nowrap; rotate:var(--r); box-shadow:0 2px 0 rgba(8,45,86,.08); transition:rotate var(--dur-slow) var(--ease-spring), scale var(--dur) var(--ease-spring)}
#son .kap-hi::after{content:""; position:absolute; bottom:-5px; width:13px; height:13px; background:var(--bg-c); border-radius:0 0 4px 0; transform:rotate(45deg)}
#son .kap-hi.tl::after{left:16px}
#son .kap-hi.tr::after{right:16px}
#son .kap-hi[lang="zh"], #son .kap-hi[lang="ru"]{font-family:var(--display); font-weight:800; letter-spacing:-.01em}
#son .kap-hi:nth-of-type(1){--x:2%;  --y:12%; --r:-7deg; --bg-c:#fff}
#son .kap-hi:nth-of-type(2){--x:66%; --y:2%;  --r:6deg;  --bg-c:var(--ink); --fg-c:#fff}
#son .kap-hi:nth-of-type(3){--x:0%;  --y:50%; --r:5deg;  --bg-c:#fff}
#son .kap-hi:nth-of-type(4){--x:74%; --y:44%; --r:-6deg; --bg-c:#fff}
#son .kap-hi:nth-of-type(5){--x:12%; --y:82%; --r:-4deg; --bg-c:var(--ink); --fg-c:#fff}
#son .kap-hi:nth-of-type(6){--x:62%; --y:84%; --r:7deg;  --bg-c:#fff}
#son .kap-hi:nth-of-type(7){--x:36%; --y:0%; --r:-5deg; --bg-c:#fff}
@media (hover:hover) and (pointer:fine){
  #son .kap-art:hover .kap-f-m{translate:-50% -52%}
  #son .kap-art:hover .kap-f-m .kap-m1{opacity:0}
  #son .kap-art:hover .kap-f-m .kap-m2{opacity:1}
  #son .kap-hi:hover{rotate:calc(var(--r) * -1); scale:1.08}
}

/* ---------- Footer ---------- */
.footer{margin:clamp(56px,8vw,112px) calc(-1 * var(--gutter,clamp(16px,3vw,40px))) -110px; color:#CFDBE8; font-size:15px}
.footer .kap-wave{display:block; width:100%; height:clamp(24px,3.4vw,48px); margin-bottom:-1px; fill:var(--ink)}
.footer .kap-f-in{background:var(--ink); padding:clamp(28px,4vw,48px) var(--gutter,clamp(16px,3vw,40px)) 36px}
.footer .kap-f-wrap{max-width:var(--wrap); margin-inline:auto}
.footer .kap-f-top{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) minmax(0,1.35fr); gap:32px}
.footer .kap-brand img{height:52px; width:auto}
.footer .kap-brand p{margin-top:16px; max-width:30ch; line-height:1.55}
.footer .kap-social{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.footer .kap-social a{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14); transition:translate var(--dur-slow) var(--ease-spring), rotate var(--dur-slow) var(--ease-spring), transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast)}
.footer .kap-social a:active{transform:scale(.94)}
.footer .kap-social .icon{width:21px; height:21px; stroke-width:1.9}
.footer .kap-social li{--c:var(--coral)}
.footer .kap-social li:nth-child(even){--c:var(--k-cyan)}
.footer .kap-social a:focus-visible{outline-color:#fff; border-radius:50%}
.footer .kap-fh{font-family:var(--display); font-size:15px; font-weight:700; line-height:1.3; letter-spacing:0; color:var(--k-sun); margin-bottom:14px}
.footer .kap-links{display:grid; gap:9px}
.footer .kap-links a{position:relative; color:#CFDBE8; text-decoration:none; transition:color var(--dur-fast)}
.footer .kap-links a::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px; background:var(--k-sun); transform:scaleX(0); transform-origin:right center; transition:transform var(--dur) var(--ease-out)}
.footer .kap-links a:focus-visible{outline-color:#fff; color:#fff}
.footer .kap-links a:focus-visible::after{transform:scaleX(1)}
.footer .kap-contact{display:grid; min-width:0; overflow-wrap:anywhere; gap:10px; line-height:1.45}
.footer .kap-contact b{display:block; color:#fff; font-weight:600; font-variant-numeric:tabular-nums}
.footer .kap-contact span{display:block; font-size:14px; color:#A9BCD2}
.footer .kap-sister{margin-top:40px; display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:16px; padding:16px 22px 16px 16px; border-radius:22px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1); color:#fff; text-decoration:none; transition:background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
.footer .kap-sister:active{transform:scale(.99)}
.footer .kap-sister:focus-visible{outline-color:#fff; border-radius:22px}
.footer .kap-s-ic{width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--coral); color:var(--ink); transition:rotate var(--dur-slow) var(--ease-spring)}
.footer .kap-s-ic .icon{width:24px; height:24px}
.footer .kap-s-tag{display:block; font-family:'Poetsen One', var(--display); font-size:14px; line-height:1.2; color:var(--k-sun)}
.footer .kap-s-t{display:block; margin-top:2px; line-height:1.4; color:#CFDBE8}
.footer .kap-s-t b{color:#fff; font-family:var(--display); font-size:17px; font-weight:700; margin-right:6px}
.footer .kap-s-go{display:inline-flex; align-items:center; gap:6px; font-weight:700; white-space:nowrap}
.footer .kap-s-go .icon{width:18px; height:18px; transition:transform var(--dur) var(--ease-out)}
.footer .kap-legal{margin-top:28px; padding-top:20px; border-top:1.5px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; font-size:13.5px; line-height:1.5; color:#A9BCD2}
.footer .kap-legal p:nth-child(2){flex:1 1 280px}
.footer .kap-top{display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:9px 16px; border-radius:999px; color:#fff; font-weight:700; font-size:14.5px; text-decoration:none; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25); transition:background-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out)}
.footer .kap-top:active{transform:scale(.97)}
.footer .kap-top:focus-visible{outline-color:#fff}
.footer .kap-top .icon{width:17px; height:17px; transition:transform var(--dur) var(--ease-spring)}
@media (hover:hover) and (pointer:fine){
  .footer .kap-social a:hover{translate:0 -5px; rotate:-8deg; background:var(--c); color:var(--ink); box-shadow:inset 0 0 0 1.5px transparent}
  .footer .kap-social li:nth-child(even) a:hover{rotate:8deg}
  .footer .kap-links a:hover{color:#fff}
  .footer .kap-links a:hover::after{transform:scaleX(1); transform-origin:left center}
  .footer .kap-sister:hover{background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
  .footer .kap-sister:hover .kap-s-ic{rotate:-10deg}
  .footer .kap-sister:hover .kap-s-go .icon{transform:translate(3px,-3px)}
  .footer .kap-top:hover{background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
  .footer .kap-top:hover .icon{transform:translateY(-3px)}
}
.footer .kap-social a:focus-visible{translate:0 -5px; background:var(--c); color:var(--ink)}
.footer .kap-sister:focus-visible .kap-s-go .icon{transform:translate(3px,-3px)}

/* ---------- Kaydırmayla giriş (yalnızca destekleyen tarayıcı + hareket izni) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    #kurumlar .kap-steps li, #kurumlar .kap-items li{animation:kap-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 35%}
    #kurumlar .kap-steps li:nth-child(2), #kurumlar .kap-items li:nth-child(2){animation-range:entry 5% entry 40%}
    #kurumlar .kap-steps li:nth-child(3), #kurumlar .kap-items li:nth-child(3){animation-range:entry 10% entry 45%}
    #kurumlar .kap-steps li:nth-child(4){animation-range:entry 15% entry 50%}
    #son .kap-hi{animation:kap-pop linear both; animation-timeline:view(); animation-range:entry 20% entry 60%}
    #son .kap-hi:nth-of-type(2){animation-range:entry 26% entry 66%}
    #son .kap-hi:nth-of-type(3){animation-range:entry 32% entry 72%}
    #son .kap-hi:nth-of-type(4){animation-range:entry 38% entry 78%}
    #son .kap-hi:nth-of-type(5){animation-range:entry 44% entry 84%}
    #son .kap-hi:nth-of-type(6){animation-range:entry 50% entry 90%}
    #son .kap-u path{animation:kap-draw linear both; animation-timeline:view(); animation-range:entry 40% cover 45%}
  }
}
@keyframes kap-rise{from{opacity:0; translate:0 14px} to{opacity:1; translate:0 0}}
@keyframes kap-pop{0%{opacity:0; scale:.6} 70%{opacity:1; scale:1.06} 100%{opacity:1; scale:1}}
@keyframes kap-draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}

/* ---------- Kırılımlar ---------- */
@media (max-width:1180px){
  .footer .kap-f-top{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer .kap-brand{grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 40px}
  .footer .kap-brand p{margin-top:0}
  .footer .kap-brand .kap-social{margin-top:0; grid-column:1 / -1}
}
@media (max-width:960px){
  #kurumlar, #son{grid-template-columns:minmax(0,1fr)}
  #sss .kap-faq-grid{grid-template-columns:minmax(0,1fr)}
  #sss .kap-side{position:static}
  #son .kap-art{order:-1; height:clamp(240px,48vw,320px)}
}
@media (max-width:720px){
  #kurumlar{border-radius:32px}
  #kurumlar .kap-cta .btn{max-width:100%; white-space:normal; text-align:center; padding-inline:18px}
  #kurumlar .kap-item{grid-template-columns:44px minmax(0,1fr); gap:14px; width:calc(100% + 24px); margin-inline:-12px; padding:14px 12px}
  #kurumlar .kap-tile{width:44px; height:44px; border-radius:14px}
  #kurumlar .kap-plan{border-radius:24px}
  #sss .kap-help{padding:22px 20px 20px}
  #sss .kap-num{font-size:20px}
  #sss .kap-num-row{gap:8px 10px}
  #sss .kap-copy{padding:0 12px 0 10px; gap:6px; font-size:14px}
  #sss .kap-faq summary{padding:16px 14px 16px 18px; gap:12px}
  #sss .kap-a-in{padding:0 18px 20px 18px}
  #son{border-radius:32px}
  #son .kap-art{height:250px; margin-inline:-8px}
  #son .kap-f-m{width:140px}
  #son .kap-hi{font-size:14px; padding:7px 11px 6px; border-radius:13px}
  #son .kap-hi::after{width:10px; height:10px; bottom:-4px}
  #son .kap-hi:nth-of-type(1){--x:0%;  --y:10%}
  #son .kap-hi:nth-of-type(2){--x:64%; --y:2%}
  #son .kap-hi:nth-of-type(3){--x:0%;  --y:46%}
  #son .kap-hi:nth-of-type(4){--x:72%; --y:40%}
  #son .kap-hi:nth-of-type(5){--x:6%;  --y:82%}
  #son .kap-hi:nth-of-type(6){--x:64%; --y:84%}
  #son .kap-spark{left:calc(50% + 58px); top:calc(50% - 100px); width:34px; height:34px}
  #son .kap-ctas .btn{flex:1 1 100%}
  #son .kap-team{gap:12px}
  #son .kap-ava img{width:38px; height:38px}
  #son .kap-ava img + img{margin-left:-11px}
  #son .kap-team-t span{white-space:nowrap}
  #son .kap-ava img:nth-child(5){display:none}
  .footer .kap-f-top{grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px}
  .footer .kap-brand{display:block}
  .footer .kap-brand p{margin-top:14px}
  .footer .kap-brand .kap-social{margin-top:20px}
  .footer .kap-sister{grid-template-columns:44px minmax(0,1fr); padding:16px}
  .footer .kap-s-ic{width:44px; height:44px}
  .footer .kap-s-go{grid-column:2}
  .footer .kap-f-in{padding-bottom:calc(36px + 84px)}
  .footer .kap-top{margin-left:0}
}


.hero .hm-frame .ht-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.header .brand img,.footer .kap-brand img{width:auto;object-fit:contain}
#neden .nd-num{font-size:clamp(64px,7vw,100px)}
#neden .nd-pv b{font-size:23px;white-space:nowrap}
#neden .nd-photo-img{object-fit:cover;object-position:center top}
#fiyatlar .calc-m .big{font-size:clamp(24px,3vw,36px)}
#fiyatlar .big .fy-v{white-space:normal}
.ht-package-link{margin-top:20px}
#yorumlar .ht-review-summary p{font-family:var(--display);font-size:20px;line-height:1.5}
#yorumlar .rv-main .ht-review-summary p{font-size:clamp(27px,2.5vw,38px);line-height:1.25}
#sorular .reel-zoom img{object-fit:contain;background:#fff}
#vdlg iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ht-package-link .link{display:inline-flex;align-items:center;gap:8px}
#fiyatlar .price .suf{margin-left:6px}
@media(max-width:360px){.header .brand img{height:30px}}
@media(max-width:720px){#fiyatlar .calc-m{grid-template-columns:minmax(0,1fr)}#neden .nd-pv b{font-size:20px}#yorumlar .rv-main .ht-review-summary p{font-size:28px}}