/* ==========================================================================
   GYS Kurs — Tanıtım sayfası
   Palet : logo laciverti #042641 · Arctic Teal #0E7490 · Saffron #F4A620
           Cloud Pearl #F2F5F7
   Font  : Manrope (arayüz) · Instrument Serif (zarif başlık) · Archivo (ağır başlık)

   Kritik kural: Saffron zeminin üstüne BEYAZ yazı gelmez (kontrast 2.03).
   Saffron üstünde yazı her zaman lacivert #042641 (7.46).
   ========================================================================== */

:root{
  /* Marka */
  --navy-950:#02131F; --navy-900:#042641; --navy-800:#083350; --navy-700:#0C4364;
  --teal-800:#073F4F; --teal-700:#0A5B72; --teal-600:#0E7490; --teal-500:#1391B3;
  --teal-400:#22A5C7; --teal-100:#D7EFF6; --teal-50:#EFF9FC;
  --saf-700:#AA7208; --saf-600:#D68F0A; --saf-500:#F4A620; --saf-400:#F6B741;
  --saf-200:#F9D99F; --saf-50:#FEF7EC;

  /* Yüzey */
  --pearl:#F2F5F7; --white:#FFFFFF; --line:#E2E8F0; --line-soft:#EDF1F4;

  /* Metin */
  --ink:#042641; --body:#334155; --muted:#5B6B7F;
  --on-dark:#E8EDF3; --on-dark-muted:#9DB0C4;

  /* Durum */
  --ok:#059669; --no:#DC2626;

  /* Tipografi */
  --f-ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-display:'Bricolage Grotesque',var(--f-ui);
  --f-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  /* Bricolage degisken bir font: genislik ekseni hafif daraltiliyor.
     Turkce basliklar uzun ("OLCULEBILIR", "DEGISIKLIGI") ve bu daralma
     satira sigmalarini sagliyor, okunurlugu bozmadan. */
  --display-var:'wdth' 88,'opsz' 96;

  /* Ölçü */
  --wrap:1200px; --pad:clamp(1.25rem,5vw,2.5rem);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
  --sect:clamp(4.5rem,9vw,8rem);

  /* Gölge */
  --sh-sm:0 1px 2px rgba(4,38,65,.06),0 1px 3px rgba(4,38,65,.05);
  --sh:0 4px 6px -1px rgba(4,38,65,.07),0 2px 4px -2px rgba(4,38,65,.05);
  --sh-lg:0 20px 25px -5px rgba(4,38,65,.09),0 8px 10px -6px rgba(4,38,65,.05);
  --sh-xl:0 32px 64px -12px rgba(4,38,65,.20);

  /* Hareket — dönerci sitesindeki expo-out eğrisi */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--pearl);color:var(--body);
  font-family:var(--f-ui);font-size:1.0625rem;line-height:1.65;
  font-weight:450;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.18;letter-spacing:-.03em;font-weight:800}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--saf-500);outline-offset:3px;border-radius:4px}

/* Rakamlar sütunda zıplamasın — sayfa baştan sona istatistik dolu */
.num,.price__n{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- yapı --- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sect)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section--white{background:var(--white)}
.section--dark{background:var(--navy-900);color:var(--on-dark)}
.section--dark h2,.section--dark h3{color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--saf-500);color:var(--navy-900);
  padding:.75rem 1.25rem;border-radius:var(--r-sm);font-weight:800}

/* ------------------------------------------------------------- başlık --- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-600);margin-bottom:1.25rem;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--saf-500)}
.section--dark .eyebrow{color:var(--saf-400)}

.h-display{
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-variation-settings:var(--display-var);
  font-size:clamp(2rem,5.4vw,3.9rem);line-height:1.12;letter-spacing:-.03em;
}
.h-display .line2{display:block;color:var(--teal-600)}
.section--dark .h-display .line2{color:var(--saf-500)}
.h-serif{font-family:var(--f-serif);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(2.25rem,5.5vw,4rem);line-height:1.14}
.lead{font-size:clamp(1.0625rem,1.6vw,1.1875rem);color:var(--muted);
  max-width:62ch;margin-top:1.25rem;line-height:1.7}
.section--dark .lead{color:var(--on-dark-muted)}

/* --------------------------------------------------------------- rozet --- */
.pill{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem 1rem .5rem .8rem;border-radius:var(--r-pill);
  border:1px solid rgba(244,166,32,.35);background:rgba(244,166,32,.08);
  color:var(--saf-400);font-size:.75rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}
.pill--light{border-color:var(--line);background:var(--white);
  color:var(--teal-700);box-shadow:var(--sh-sm)}
.pill__dot{width:7px;height:7px;border-radius:50%;background:var(--saf-500);flex:none;
  box-shadow:0 0 0 4px rgba(244,166,32,.2)}

/* -------------------------------------------------------------- buton --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.75rem;border-radius:var(--r-pill);border:1px solid transparent;
  font-weight:800;font-size:.9375rem;letter-spacing:-.01em;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s,background .18s,border-color .18s,color .18s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none;transition:transform .18s}
.btn:hover svg{transform:translateX(3px)}

.btn--gold{background:var(--saf-500);color:var(--navy-900);
  box-shadow:0 8px 24px -8px rgba(244,166,32,.6)}
.btn--gold:hover{background:var(--saf-400);box-shadow:0 14px 32px -10px rgba(244,166,32,.7)}
.btn--teal{background:var(--teal-600);color:#fff;box-shadow:0 8px 24px -8px rgba(14,116,144,.55)}
.btn--teal:hover{background:var(--teal-700)}
.btn--ghost{background:transparent;color:var(--on-dark);border-color:rgba(232,237,243,.28)}
.btn--ghost:hover{border-color:rgba(244,166,32,.6);background:rgba(244,166,32,.07)}
.btn--outline{background:var(--white);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-sm)}
.btn--outline:hover{border-color:var(--teal-600);color:var(--teal-700)}
.btn--lg{padding:1.125rem 2rem;font-size:1rem}

/* ------------------------------------------------------------ marquee --- */
.ticker{
  background:var(--navy-950);color:var(--on-dark-muted);
  border-bottom:1px solid rgba(232,237,243,.08);
  overflow:hidden;position:relative;z-index:60;
}
.ticker__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__group{display:flex;flex:none}
.ticker__item{
  display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.5rem;
  font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
.ticker__item::after{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--saf-500);margin-left:1rem;opacity:.65}
.ticker__item b{color:var(--saf-400);font-weight:800}
@keyframes slide{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------- header --- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(2,19,31,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(232,237,243,.09);transition:background .25s}
.hdr.is-stuck{background:rgba(2,19,31,.95)}
.hdr__in{display:flex;align-items:center;gap:2rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.75rem;flex:none}
/* Logo iki renkli ve laciverti koyu header'da kayboluyor. Giris ekranindaki
   gibi acik bir madalyona oturtuluyor: marka renkleri hic bozulmadan okunuyor. */
.brand__mark{width:56px;height:56px;border-radius:50%;flex:none;
  background:#FFFFFF;display:grid;place-items:center;padding:8px;
  box-shadow:0 2px 10px rgba(2,19,31,.35);
  color:var(--navy-900);font-family:var(--f-display);font-weight:800;
  font-size:.75rem;letter-spacing:-.02em;
  transition:transform .35s var(--ease),box-shadow .35s}
.brand__mark img{width:100%;height:100%;object-fit:contain}
.brand:hover .brand__mark{transform:scale(1.06);box-shadow:0 4px 16px rgba(244,166,32,.4)}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-variation-settings:var(--display-var);font-family:var(--f-display);font-weight:800;font-size:1.1875rem;
  letter-spacing:-.02em;color:#fff}
.brand__sub{font-size:.6rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--saf-400)}
.nav{display:flex;align-items:center;gap:.25rem;margin-inline:auto}
/* Yedi baglanti oldu; "Nasil Calisir" ve "Meydan Okuma" iki satira dusuyordu.
   Dolgu ve punto biraz kisildi, satir kirilmasi kapatildi. "Iletisim" sekizinci
   baglanti olarak eklenince dolgu bir tik daha kisildi. */
.nav a{padding:.6rem .5625rem;border-radius:var(--r-pill);font-size:.875rem;font-weight:600;
  white-space:nowrap;color:var(--on-dark-muted);transition:color .18s,background .18s}
.nav a:hover{color:#fff;background:rgba(232,237,243,.07)}
.hdr__cta{display:flex;align-items:center;gap:.75rem;flex:none}
.hdr__login{font-size:.9rem;font-weight:700;color:var(--on-dark-muted);padding:.6rem .5rem}
.hdr__login:hover{color:#fff}
/* Giris yapmis uyenin profil kisayolu. Tanitim sayfasi herkese acik oldugu
   icin uye de buraya gelebiliyor; "Giris Yap" yerine kendini goruyor ve
   tiklayinca panele donuyor. */
.hdr__me{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem .25rem .25rem;
  border:1px solid rgba(232,237,243,.16);border-radius:var(--r-pill);
  background:rgba(232,237,243,.06);transition:background .18s,border-color .18s}
.hdr__me:hover{background:rgba(232,237,243,.12);border-color:rgba(244,166,32,.5)}
.hdr__me-pic{width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;background:var(--saf-400);color:var(--navy-900);
  font-family:var(--f-display);font-weight:800;font-size:.8125rem;letter-spacing:-.02em}
.hdr__me-pic img{width:100%;height:100%;object-fit:cover}
.hdr__me-txt{font-size:.875rem;font-weight:700;color:#fff;white-space:nowrap;
  max-width:9rem;overflow:hidden;text-overflow:ellipsis}
.burger{display:none;width:44px;height:44px;border:1px solid rgba(232,237,243,.2);
  background:transparent;border-radius:11px;cursor:pointer;place-items:center}
.burger span{display:block;width:18px;height:2px;background:var(--on-dark);
  border-radius:2px;transition:transform .22s,opacity .22s}
.burger span+span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --------------------------------------------------------------- hero --- */
.hero{position:relative;background:var(--navy-900);color:var(--on-dark);overflow:hidden;
  padding-block:clamp(3.5rem,7vw,6rem) clamp(4rem,8vw,7rem)}
.hero__bg{position:absolute;inset:0;pointer-events:none}
/* Kare grid yerine yalnizca dikey cizgiler: yatay cizgiler basligin altini
   cizer gibi duruyordu, tek eksen daha sakin ve derin duruyor. */
.hero__grid{position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,
    transparent 0 118px,rgba(232,237,243,.11) 118px 119px)}
/* Solda nefes alan isik: sayfa acikken de yavasca parlayip soner. */
.hero__ember{position:absolute;left:-9rem;top:34%;width:30rem;height:30rem;
  transform:translateY(-50%);border-radius:50%;filter:blur(80px);
  background:radial-gradient(circle,rgba(244,166,32,.30),rgba(244,166,32,.07) 45%,transparent 70%);
  animation:ember 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ember{
  0%,100%{opacity:.45;transform:translateY(-50%) scale(.92)}
  50%    {opacity:1;  transform:translateY(-50%) scale(1.08)}
}
.hero__glow{position:absolute;border-radius:50%;filter:blur(90px)}
.hero__glow--teal{width:640px;height:640px;top:-280px;left:-160px;
  background:radial-gradient(circle,rgba(19,145,179,.28),transparent 68%)}
.hero__glow--gold{width:520px;height:520px;bottom:-260px;right:-100px;
  background:radial-gradient(circle,rgba(244,166,32,.20),transparent 68%)}
/* kaydirma gostergesi */
.kaydir{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  display:grid;justify-items:center;gap:.6875rem;pointer-events:none;z-index:2}
.kaydir__y{font-size:.5625rem;font-weight:800;letter-spacing:.3em;
  text-transform:uppercase;color:var(--on-dark-muted);opacity:.7}
.kaydir__c{position:relative;display:block;width:1px;height:58px;
  background:linear-gradient(180deg,rgba(232,237,243,.3),rgba(232,237,243,0))}
.kaydir__c i{position:absolute;left:50%;top:0;width:6px;height:6px;border-radius:50%;
  background:var(--saf-500);box-shadow:0 0 10px rgba(244,166,32,.8);
  animation:kaydir 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes kaydir{
  0%  {transform:translate(-50%,0);opacity:0}
  18% {opacity:1}
  80% {opacity:1}
  100%{transform:translate(-50%,52px);opacity:0}
}

.hero__in{position:relative;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.hero h1,.hero .hs__s h2{color:#fff;margin-top:1.5rem;
  /* Hero'daki iki satir sayfanin en uzun basligi. Genislik ekseni daraltilip
     punto bir tik dusuruluyor ki her iki satir da kirilmadan sigsin. */
  font-variation-settings:'wdth' 79,'opsz' 96;
  font-size:clamp(1.875rem,4.6vw,3.375rem)}
.hero .lead{margin-top:1.5rem;max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:2.25rem}
.hero__notes{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.75rem}
.hero__note{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;
  font-weight:600;color:var(--on-dark-muted)}
.hero__note svg{color:var(--ok);flex:none}

/* Tam ekran hero slayt gosterisi.

   Slaytlar ayni izgara gozunde ust uste duruyor: hero'nun boyu en uzun
   slayta gore sabit kaliyor, gecişte sayfa ziplamiyor. Pasif slaytlar
   tiklamayi da yutmasin diye pointer-events kapatiliyor. */
.hs{position:relative}
.hs__ray{display:grid}
.hs__s{grid-area:1/1;opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.hs__s.is-on{opacity:1;pointer-events:auto;transform:none}
/* Noktalar sayfanin ortasindaki "Kaydir" yazisinin uzerine biniyordu:
   metin sutunuyla ayni hizaya alindi. */
.hs__nok{display:flex;justify-content:flex-start;gap:.4375rem;
  width:100%;max-width:var(--wrap);margin:2.25rem auto 0;
  padding-inline:var(--pad);cursor:pointer}
.nok{width:7px;height:7px;border-radius:50%;background:rgba(232,237,243,.25);
  transition:background .3s,width .3s var(--ease)}
.nok.is-on{width:24px;border-radius:4px;background:var(--saf-500)}

/* hero görseli — panelin sadeleştirilmiş önizlemesi */
.shot{position:relative}
/* 3. slaytta telefon sag sutunun ortasinda dursun. */
.shot--tel{display:flex;justify-content:center}
.shot--tel .phone{width:min(280px,86%)}
.shot__card{background:linear-gradient(165deg,#0A3252,#052134);
  border:1px solid rgba(232,237,243,.13);border-radius:var(--r-lg);
  padding:1.375rem;box-shadow:var(--sh-xl)}
.shot__meta{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.shot__no{margin-left:auto;flex:none;font-size:.6875rem;font-weight:700;
  color:var(--on-dark-muted);font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;padding:.25rem .625rem;border-radius:var(--r-pill);
  font-size:.625rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tag--teal{background:rgba(34,165,199,.16);color:var(--teal-400)}
.tag--gold{background:rgba(244,166,32,.16);color:var(--saf-400)}

/* ---------------------------------------------- hero slayt kartlari --- */
/* 1. slayt — soru bankasi sayaci. Sayilarin hepsi veritabanindan geliyor:
   soru yuklendikce kendiliginden artar. */
.sb{display:flex;align-items:baseline;gap:.5rem;margin-bottom:1.125rem}
.sb__n{font-family:var(--f-display);font-variation-settings:var(--display-var);
  font-weight:800;font-size:clamp(2.25rem,4vw,3rem);line-height:1;
  letter-spacing:-.03em;color:var(--saf-500);font-variant-numeric:tabular-nums}
.sb__l{font-size:.9375rem;font-weight:700;color:var(--on-dark-muted)}

/* 1. ve 2. slaytin satirlari */
.sira{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;
  border-radius:11px;border:1px solid rgba(232,237,243,.11);
  background:rgba(232,237,243,.03);margin-bottom:.5rem}
.sira:last-of-type{margin-bottom:0}
.sira--sen{border-color:rgba(244,166,32,.42);background:rgba(244,166,32,.1)}
.sira__n{width:20px;flex:none;text-align:center;font-size:.75rem;font-weight:800;
  color:var(--on-dark-muted);font-variant-numeric:tabular-nums}
.sira__av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:rgba(19,145,179,.22);color:var(--teal-400);
  font-size:.625rem;font-weight:800}
.sira--sen .sira__av{background:var(--saf-500);color:var(--navy-900)}
.sira__av--k{background:rgba(232,237,243,.07);color:var(--on-dark-muted)}
/* "N konu basligi daha" satiri: listenin bittigi degil kesildigi anlasilsin. */
.sira--daha{background:transparent;border-style:dashed;
  border-color:rgba(232,237,243,.16)}
.sira--daha .sira__ad{color:var(--on-dark-muted);font-weight:600}
.sira--daha .sira__av--k{font-size:.875rem;font-weight:800;color:var(--teal-400)}
.sira--daha .sira__p{color:var(--on-dark-muted);display:grid;place-items:center}
.sira__ad{flex:1;min-width:0;font-size:.875rem;font-weight:700;color:var(--on-dark);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sira--sen .sira__ad{color:#fff}
.sira__p{flex:none;font-size:.8125rem;font-weight:800;color:var(--saf-500);
  font-variant-numeric:tabular-nums}

/* Kart altindaki aciklama kutusu */
.coz{margin-top:1rem;border-radius:12px;padding:.75rem .875rem;
  background:rgba(19,145,179,.12);border:1px solid rgba(34,165,199,.24)}
.coz__b{display:inline-flex;align-items:center;gap:.375rem;font-size:.625rem;
  font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-400)}
.coz p{margin-top:.375rem;font-size:.75rem;line-height:1.6;color:var(--on-dark)}
.coz b{color:var(--saf-400);font-weight:800}

/* 4. slayt — 1v1 mac karti */
.duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:.75rem;padding:1.125rem .5rem;margin-bottom:.875rem}
.duel__y{display:grid;justify-items:center;gap:.5rem;min-width:0}
.duel__av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(19,145,179,.22);color:var(--teal-400);
  font-family:var(--f-display);font-variation-settings:var(--display-var);
  font-weight:800;font-size:1.125rem;border:2px solid transparent}
.duel__y--sen .duel__av{background:var(--saf-500);color:var(--navy-900);
  border-color:rgba(244,166,32,.45)}
.duel__ad{font-size:.8125rem;font-weight:700;color:var(--on-dark);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duel__s{display:flex;align-items:center;gap:.5rem;
  font-family:var(--f-display);font-variation-settings:var(--display-var);
  font-weight:800;font-size:2rem;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums}
.duel__s em{font-style:normal;font-size:1rem;color:var(--on-dark-muted)}
/* Soru izleri */
.duel__iz{display:flex;gap:.3125rem;justify-content:center;margin-bottom:.25rem}
.duel__iz span{width:100%;height:5px;border-radius:3px;background:rgba(232,237,243,.12)}
.duel__iz span.is-on{background:linear-gradient(90deg,var(--teal-500),var(--saf-500))}

/* Gold kartindaki kurum/sinav fiyat secicisi */
.fiy{margin:0 0 1.5rem;border-top:1px solid var(--line);padding-top:1.125rem}
.fiy [hidden]{display:none!important}
.fiy__b{font-size:.625rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.75rem}
.fiy__s{display:grid;gap:.625rem;margin-bottom:.75rem}
.fiy__l{display:grid;gap:.3125rem}
.fiy__l > span{font-size:.6875rem;font-weight:700;color:var(--muted)}
/* Yazi 16px'in altina inerse iOS odaklaninca sayfayi yakinlastiriyor. */
.fiy__l select{width:100%;min-width:0;appearance:none;-webkit-appearance:none;
  font:inherit;font-size:1rem;font-weight:700;color:var(--ink);
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6B7F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .875rem center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.625rem 2.5rem .625rem .875rem;cursor:pointer;
  text-overflow:ellipsis;transition:border-color .2s,box-shadow .2s}
.fiy__l select:hover{border-color:var(--saf-400)}
.fiy__l select:focus-visible{outline:0;border-color:var(--saf-500);
  box-shadow:0 0 0 3px rgba(244,166,32,.25)}
.fiy__o{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  background:var(--saf-50);border:1px solid rgba(244,166,32,.35);border-radius:var(--r);
  padding:.75rem 1rem}
.fiy__k{display:flex;flex-direction:column;align-items:flex-start;gap:.3125rem;
  font-size:.75rem;font-weight:700;color:var(--muted)}
.fiy__rozet{background:#047857;color:#fff;border-radius:var(--r-pill);
  padding:.1875rem .5rem;font-size:.625rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
.fiy__t{display:flex;flex-direction:column;align-items:flex-end;gap:.125rem;text-align:right}
.fiy__eski{font-size:.8125rem;font-weight:700;color:var(--muted);
  text-decoration-color:var(--no);font-variant-numeric:tabular-nums}
.fiy__f{flex:none;font-family:var(--f-display);font-variation-settings:var(--display-var);
  font-weight:800;font-size:1.75rem;line-height:1;color:var(--saf-700);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fiy__f small{font-size:.875rem;font-weight:800}


/* ==========================================================================
   Kurum slaytlari (hero)
   landing-sayfasi calismasindan tasindi. Yukaridaki eski hero kurallarindan
   sonra geldigi icin giris bolumunu bunlar belirliyor; eski bloktaki
   .duel, .fiy, .tag gibi siniflar diger bolumlerde kullanildigi icin
   silinmedi.
   ========================================================================== */
/* --------------------------------------------------------------- hero --- */
.hero{position:relative;background:var(--navy-900);color:var(--on-dark);overflow:hidden;
  padding-block:clamp(2.5rem,5vw,4rem) clamp(2rem,4vw,3.25rem)}
.hero__bg{position:absolute;inset:0;pointer-events:none}
/* Kare grid yerine yalnizca dikey cizgiler: yatay cizgiler basligin altini
   cizer gibi duruyordu, tek eksen daha sakin ve derin duruyor. */
.hero__grid{position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,
    transparent 0 118px,rgba(232,237,243,.11) 118px 119px)}
/* Solda nefes alan isik: sayfa acikken de yavasca parlayip soner. */
.hero__ember{position:absolute;left:-9rem;top:34%;width:30rem;height:30rem;
  transform:translateY(-50%);border-radius:50%;filter:blur(80px);
  background:radial-gradient(circle,rgba(244,166,32,.30),rgba(244,166,32,.07) 45%,transparent 70%);
  animation:ember 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ember{
  0%,100%{opacity:.45;transform:translateY(-50%) scale(.92)}
  50%    {opacity:1;  transform:translateY(-50%) scale(1.08)}
}
.hero__glow{position:absolute;border-radius:50%;filter:blur(90px)}
.hero__glow--teal{width:640px;height:640px;top:-280px;left:-160px;
  background:radial-gradient(circle,rgba(19,145,179,.28),transparent 68%)}
.hero__glow--gold{width:520px;height:520px;bottom:-260px;right:-100px;
  background:radial-gradient(circle,rgba(244,166,32,.20),transparent 68%)}

/* Yalnizca ekran okuyucu ve arama motoru icin */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------ hero kurum slaytlari ---
   Her kurum bir slayt. Slaytlar ayni izgara gozunde ust uste: hero'nun boyu
   en uzun slayta gore sabit, geciste sayfa ziplamiyor.

   Giris sirasi: ust satir -> baslik kelime kelime (bulaniktan netlesir) ->
   aciklama -> unvanlar -> butonlar; sagda disk buyuyerek, cam kartlar
   ardindan. Alttaki kartin cubugu dolunca (animationend) siradaki kuruma
   gecilir; imlec seridin uzerindeyken cubuk ve slayt bekler.

   Derinlik: JS imlecin konumunu --px/--py (-1..1) olarak yaziyor; katmanlar
   bunu `translate` ile farkli oranlarda kullaniyor. Suzulme animasyonlari
   `transform` kullandigi icin ikisi birbirini ezmiyor. */
.hk{position:relative;--hk-sure:5.5s;--px:0;--py:0}
.hk__sahne{display:grid}
.hk__s{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;min-height:clamp(24rem,36vw,29rem);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s var(--ease),visibility .7s}
.hk__s.is-on{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.hk__metin{min-width:0}
.hk__g{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hk__s.is-on .hk__g{opacity:1;transform:none}
.hk__s.is-on .hk__g:nth-child(1){transition-delay:.05s}
.hk__s.is-on .hk__g:nth-child(3){transition-delay:.38s}
.hk__s.is-on .hk__g:nth-child(4){transition-delay:.46s}
.hk__s.is-on .hk__g:nth-child(5){transition-delay:.54s}

.hk__ust{display:flex;align-items:center;gap:.875rem;font-size:.6875rem;
  font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--saf-400)}
.hk__no{font-family:var(--f-display);font-variation-settings:var(--display-var);
  font-size:.9375rem;letter-spacing:.04em;color:#fff;font-variant-numeric:tabular-nums}
.hk__no i{font-style:normal;margin-left:.3rem;color:var(--on-dark-muted);font-size:.75rem}
.hk__cizgi{width:40px;height:1px;background:linear-gradient(90deg,var(--saf-500),transparent)}

.hk__baslik{margin-top:1.25rem;color:#fff;font-family:var(--f-display);
  font-variation-settings:'wdth' 79,'opsz' 96;font-weight:800;
  font-size:clamp(2.125rem,4.6vw,3.75rem);line-height:1.02;letter-spacing:-.02em}
.hk__k{display:inline-block;opacity:0;filter:blur(10px);
  transform:translateY(.45em) rotate(2deg);
  transition:opacity .8s var(--ease),filter .8s var(--ease),transform .8s var(--ease)}
.hk__s.is-on .hk__k{opacity:1;filter:blur(0);transform:none;
  transition-delay:calc(.14s + var(--k,0) * .08s)}
.hk__k--vurgu{background:linear-gradient(95deg,var(--saf-400) 0%,#FFE2A3 45%,var(--saf-500) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.hk__acik{margin-top:1.375rem;max-width:50ch;font-size:1.0625rem;line-height:1.7;
  color:var(--on-dark-muted)}
.hk__cipler{list-style:none;margin:1.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.625rem}
.hk__cip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9375rem;
  border-radius:var(--r-pill);border:1px solid rgba(232,237,243,.14);
  background:linear-gradient(180deg,rgba(232,237,243,.08),rgba(232,237,243,.03));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.8125rem;font-weight:600;color:var(--on-dark)}
.hk__cip span{width:6px;height:6px;border-radius:50%;background:var(--saf-500);flex:none;
  box-shadow:0 0 8px rgba(244,166,32,.8)}
.hk__cta{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:2rem}

/* ---- sag: logo diski, isik halkasi, yorungeler, cam kartlar ---- */
.hk__gorsel{position:relative;display:grid;place-items:center;min-width:0;
  opacity:0;transform:scale(.9) translateY(20px);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.hk__s.is-on .hk__gorsel{opacity:1;transform:none;transition-delay:.1s}
.hk__uzay{position:relative;width:min(430px,100%);aspect-ratio:1;display:grid;place-items:center}
.hk__uzay::before{content:"";position:absolute;inset:14%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(244,166,32,.28),rgba(19,145,179,.14) 45%,transparent 70%);
  filter:blur(34px)}

.hk__yorunge{position:absolute;border-radius:50%;border:1px dashed rgba(232,237,243,.13);
  translate:calc(var(--px) * -6px) calc(var(--py) * -6px);transition:translate .6s var(--ease)}
.hk__yorunge--ic{inset:12%;animation:hkDon 26s linear infinite}
.hk__yorunge--dis{inset:0;border-style:solid;border-color:rgba(232,237,243,.07);
  animation:hkDon 44s linear infinite reverse}
.hk__yorunge i{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;
  border-radius:50%;background:var(--saf-500);box-shadow:0 0 14px 2px rgba(244,166,32,.7)}
.hk__yorunge--dis i{background:var(--teal-400);box-shadow:0 0 14px 2px rgba(34,165,199,.7)}
.hk__yorunge--dis i+i{top:auto;bottom:-4px;width:6px;height:6px;margin-left:-3px;
  background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
@keyframes hkDon{to{transform:rotate(360deg)}}

.hk__orb{position:relative;width:64%;aspect-ratio:1;
  translate:calc(var(--px) * 12px) calc(var(--py) * 12px);transition:translate .6s var(--ease)}
/* Diskin etrafinda donen isik: konik gecis yalnizca ince bir halka olarak
   gorunsun diye ortasi maskeleniyor. */
.hk__halka{position:absolute;inset:-9px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 40%,rgba(34,165,199,.9) 62%,var(--saf-500) 80%,transparent 92%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:hkDon 7s linear infinite}
.hk__disk{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 32%,#0E4B72,#042641 72%);
  border:1px solid rgba(244,166,32,.35);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08)}
/* Resmi logolar beyaz zemin icin cizilmis; lacivertte kirmizi yazi okunmuyordu. */
.hk__disk--acik{background:radial-gradient(circle at 50% 30%,#FFFFFF 0%,#F4F6F9 55%,#DDE4EB 100%);
  border-color:rgba(255,255,255,.6);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 10px rgba(255,255,255,.04),
    inset 0 -10px 30px rgba(4,38,65,.14),inset 0 2px 0 #fff}
.hk__logo{width:80%;height:auto;object-fit:contain}
.muhur{width:92%;height:auto;overflow:visible}
.muhur__cizgi{fill:none;stroke:rgba(244,166,32,.4);stroke-width:1}
.muhur__halka{transform-origin:160px 160px;animation:hkDon 70s linear infinite}
.muhur__yazi{font-family:var(--f-display);font-variation-settings:var(--display-var);
  font-weight:800;font-size:17px;fill:var(--saf-400)}
.muhur__harf{font-family:var(--f-display);font-variation-settings:var(--display-var);
  font-weight:800;fill:#fff;letter-spacing:.01em}
.muhur__harf--1,.muhur__harf--2{font-size:88px}
.muhur__harf--3{font-size:72px}
.muhur__harf--4{font-size:58px}

/* cam kartlar */
.hk__rozet{position:absolute;display:flex;align-items:center;gap:.625rem;
  padding:.625rem .9375rem .625rem .625rem;border-radius:14px;white-space:nowrap;
  background:linear-gradient(160deg,rgba(14,75,114,.6),rgba(4,38,65,.55));
  border:1px solid rgba(232,237,243,.16);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  opacity:0;scale:.85;
  translate:calc(var(--px) * var(--d) * 1px) calc(var(--py) * var(--d) * 1px);
  transition:opacity .6s var(--ease),scale .6s var(--ease),translate .6s var(--ease);
  animation:hkSuz 6s ease-in-out infinite}
.hk__s.is-on .hk__rozet{opacity:1;scale:1}
.hk__rozet--1{--d:22;top:9%;left:-2%;animation-delay:-1s}
.hk__rozet--2{--d:30;top:46%;right:-6%;animation-delay:-3s}
.hk__rozet--3{--d:18;bottom:7%;left:6%;animation-delay:-5s}
.hk__s.is-on .hk__rozet--1{transition-delay:.5s,.5s,0s}
.hk__s.is-on .hk__rozet--2{transition-delay:.62s,.62s,0s}
.hk__s.is-on .hk__rozet--3{transition-delay:.74s,.74s,0s}
.hk__rozet-i{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  color:var(--navy-900);background:linear-gradient(135deg,var(--saf-400),var(--saf-600))}
.hk__rozet--2 .hk__rozet-i{color:#fff;background:linear-gradient(135deg,var(--teal-400),var(--teal-700))}
.hk__rozet b{display:block;font-size:.8125rem;font-weight:800;color:#fff;line-height:1.2}
.hk__rozet small{display:block;font-size:.6875rem;color:var(--on-dark-muted);line-height:1.3}
@keyframes hkSuz{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- alt serit: kurum kartlari ---- */
.hk__alt{display:flex;align-items:center;gap:1rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.hk__serit{position:relative;flex:1;min-width:0;display:flex;gap:.85rem;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;
  padding:.35rem .25rem 1rem}
.hk__serit::-webkit-scrollbar{display:none}
/* Az kurum varken kartlar seridi dolduruyor; cogalinca 19rem'de kalip
   yana kayiyor. */
.hk__kart{position:relative;flex:1 0 19rem;min-width:0;display:flex;align-items:center;gap:.875rem;
  padding:.875rem 1rem 1.375rem;border-radius:1.1rem;text-align:left;
  font:inherit;color:inherit;cursor:pointer;scroll-snap-align:start;
  background:linear-gradient(160deg,rgba(232,237,243,.07),rgba(232,237,243,.02));
  border:1px solid rgba(232,237,243,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .4s,border-color .4s,transform .4s var(--ease),box-shadow .4s}
.hk__kart:hover{border-color:rgba(244,166,32,.4);transform:translateY(-3px)}
.hk__kart:focus-visible{outline:2px solid var(--saf-500);outline-offset:2px}
.hk__kart[data-aktif]{border-color:rgba(244,166,32,.6);
  background:linear-gradient(135deg,rgba(244,166,32,.14),rgba(34,165,199,.06) 60%,rgba(232,237,243,.03));
  box-shadow:0 22px 44px -26px rgba(244,166,32,.55),inset 0 1px 0 rgba(255,255,255,.06)}
.hk__kart-m{flex:1;min-width:0}
.hk__kart-m b,.hk__kart-m small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk__kart-m b{font-size:.875rem;font-weight:800;color:#fff}
.hk__kart-m small{margin-top:.25rem;font-size:.75rem;color:var(--on-dark-muted)}
.hk__kart-i{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(244,166,32,.4);color:var(--saf-400);
  font-family:var(--f-display);font-variation-settings:var(--display-var);
  font-weight:800;font-size:.6875rem;opacity:.6;transition:opacity .4s,transform .4s var(--ease)}
.hk__kart-i--logo{background:#fff;border-color:rgba(255,255,255,.7)}
.hk__kart-i img{width:34px;height:34px;object-fit:contain}
.hk__kart[data-aktif] .hk__kart-i,.hk__kart:hover .hk__kart-i{opacity:1}
.hk__kart[data-aktif] .hk__kart-i{transform:scale(1.06)}
.hk__cubuk{position:absolute;left:1rem;right:1rem;bottom:.6rem;height:3px;
  border-radius:var(--r-pill);overflow:hidden;background:rgba(232,237,243,.12);
  opacity:0;transform:scaleY(.4);transition:opacity .4s,transform .4s var(--ease)}
.hk__kart[data-aktif] .hk__cubuk{opacity:1;transform:none}
.hk__cubuk i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--teal-400),var(--saf-500));
  box-shadow:0 0 10px rgba(244,166,32,.6)}
.hk__kart.is-dolu .hk__cubuk i{animation:hkDol var(--hk-sure) linear forwards}
.hk__alt:hover .hk__kart.is-dolu .hk__cubuk i{animation-play-state:paused}
@keyframes hkDol{to{transform:scaleX(1)}}

/* imleci takip eden isik */
.hero__isik{position:absolute;inset:0;opacity:.9;
  background:radial-gradient(520px circle at var(--sx,72%) var(--sy,42%),rgba(34,165,199,.13),transparent 62%);
  transition:background .2s}

@media (max-width:860px){
  .hk__s{grid-template-columns:minmax(0,1fr);gap:1.25rem;min-height:0;align-content:start}
  .hk__gorsel{order:-1}
  .hk__uzay{width:min(300px,84%)}
  .hk__rozet{padding:.5rem .75rem .5rem .5rem;gap:.5rem}
  .hk__rozet-i{width:26px;height:26px;border-radius:8px}
  .hk__rozet-i svg{width:13px;height:13px}
  .hk__rozet small{display:none}
  .hk__rozet--1{left:-6%}
  .hk__rozet--2{top:auto;bottom:6%;right:-4%}
  .hk__rozet--3{display:none}
  .hk__baslik{font-size:clamp(1.875rem,8.4vw,2.5rem)}
  .hk__acik{font-size:1rem}
  .hk__kart{flex:0 0 15.5rem}
}
@media (prefers-reduced-motion:reduce){
  .hk__s,.hk__g,.hk__gorsel,.hk__k,.hk__rozet{transition:none!important}
  .hk__k{filter:none}
  .muhur__halka,.hk__halka,.hk__yorunge,.hk__rozet{animation:none}
  .hk__serit{scroll-behavior:auto}
}

/* ------------------------------------------------ ucretsiz kitap --- */
/* Kitap gercek bir cilt gibi: on kapak, sag tarafta yaprak kenari, hafif
   egik durur ve suzulur; imlec ustune gelince okura doner. Egim `transform`,
   suzulme `translate` ile; ikisi birbirini ezmiyor. */
.kt{position:relative;overflow:hidden}
.kt__zemin{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(42% 52% at 16% 32%,rgba(244,122,32,.20),transparent 70%),
    radial-gradient(36% 42% at 88% 84%,rgba(34,165,199,.12),transparent 70%)}
.kt .wrap{position:relative}
.kt__ust{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:center}

.kt__sahne{position:relative;display:grid;place-items:center;padding:2.5rem 0 3.5rem;
  perspective:1800px}
.kt__kitap{position:relative;width:min(330px,72%);aspect-ratio:900/1273;
  transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(5deg);
  transition:transform .9s var(--ease);animation:ktSuz 7s ease-in-out infinite}
.kt__sahne:hover .kt__kitap{transform:rotateY(-7deg) rotateX(2deg)}
@keyframes ktSuz{0%,100%{translate:0 0}50%{translate:0 -12px}}
.kt__govde{position:absolute;inset:0;border-radius:3px 9px 9px 3px;overflow:hidden;
  transform:translateZ(13px);
  box-shadow:0 34px 70px -22px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.kt__kapak{display:block;width:100%;height:100%;object-fit:cover}
/* Cilt kirimi + kapak parlamasi */
.kt__parlama{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.45) 0,rgba(255,255,255,.10) 2.6%,rgba(0,0,0,.18) 4.2%,transparent 7%),
    linear-gradient(110deg,transparent 35%,rgba(255,255,255,.13) 48%,transparent 62%)}
/* Sag kenar: yaprak katlari. Sayfanin sag kenarindan 90 derece donuyor. */
.kt__yaprak{position:absolute;right:0;top:4px;bottom:4px;width:26px;
  transform-origin:right center;transform:translateZ(13px) rotateY(-90deg);
  background:repeating-linear-gradient(90deg,#F5F1E8 0 1px,#D8D2C4 1px 2px);
  box-shadow:inset 0 0 8px rgba(0,0,0,.25)}
.kt__sirt{position:absolute;left:0;top:0;bottom:0;width:26px;
  transform-origin:left center;transform:translateZ(13px) rotateY(90deg);
  background:linear-gradient(90deg,#0E0D0B,#26221E)}
.kt__golge{position:absolute;left:50%;bottom:1.25rem;width:58%;height:28px;
  translate:-50% 0;border-radius:50%;filter:blur(14px);
  background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);
  animation:ktGolge 7s ease-in-out infinite}
@keyframes ktGolge{0%,100%{scale:1;opacity:.9}50%{scale:.86;opacity:.6}}

/* Doner "ucretsiz" etiketi */
/* Kapagin sag ust kosesine yapisik; kitapla ayni 3B duzlemde, biraz onunde. */
.kt__etiket{position:absolute;top:-7%;right:5%;width:118px;height:118px;
  display:grid;place-items:center;border-radius:50%;transform:translateZ(30px) rotate(-10deg);
  background:radial-gradient(circle at 40% 35%,var(--saf-400),var(--saf-600));
  color:var(--navy-900);box-shadow:0 16px 36px -12px rgba(244,166,32,.65),inset 0 1px 0 rgba(255,255,255,.4)}
.kt__etiket svg{position:absolute;inset:0;width:100%;height:100%;animation:hkDon 22s linear infinite}
.kt__etiket text{font-family:var(--f-display);font-variation-settings:var(--display-var);
  font-weight:800;font-size:10.5px;fill:var(--navy-900)}
.kt__etiket b{display:grid;justify-items:center;font-family:var(--f-display);
  font-variation-settings:var(--display-var);font-weight:800;font-size:1.625rem;line-height:1}
.kt__etiket small{font-size:.625rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-top:.125rem}

/* metin */
.kt__metin{min-width:0}
/* Bolum yazilari sitenin genel basligindan bir kademe kucuk: kitap gorselin
   yaninda ikincil kalmali, baslik iki satiri gecmemeli. */
.kt .h-display{font-size:clamp(1.75rem,3.1vw,2.625rem);line-height:1.04}
.kt__metin .lead{max-width:54ch;font-size:clamp(.9375rem,1.1vw,1rem);line-height:1.65;margin-top:1rem}
.kt__ozellik{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:1.5rem 0 0}
.kt__ozellik div{padding:.6875rem .875rem;border-radius:12px;min-width:0;
  border:1px solid rgba(232,237,243,.12);
  background:linear-gradient(160deg,rgba(232,237,243,.07),rgba(232,237,243,.02))}
.kt__ozellik dt{font-family:var(--f-display);font-variation-settings:var(--display-var);
  font-weight:800;font-size:1.125rem;line-height:1.1;color:#fff;letter-spacing:-.01em}
.kt__ozellik dd{margin:.1875rem 0 0;font-size:.6875rem;color:var(--on-dark-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt__kutular{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.kt__kutu{display:inline-flex;align-items:center;gap:.5rem;padding:.3125rem .75rem .3125rem .3125rem;
  border-radius:var(--r-pill);border:1px solid rgba(232,237,243,.1);background:rgba(232,237,243,.04)}
.kt__kutu b{padding:.25rem .5625rem;border-radius:var(--r-pill);font-size:.625rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase}
.kt__kutu span{font-size:.75rem;color:var(--on-dark-muted)}
.kt__kutu--saf b{background:rgba(244,166,32,.18);color:var(--saf-400)}
.kt__kutu--teal b{background:rgba(34,165,199,.18);color:var(--teal-400)}
.kt__kutu--kirmizi b{background:rgba(239,90,90,.18);color:#FF8A8A}
.kt__kutu--yesil b{background:rgba(52,199,120,.18);color:#5FD99A}
.kt__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.kt__cta .btn{padding-block:.875rem;font-size:.9375rem}
.kt__boyut{font-size:.75rem;font-weight:700;opacity:.7;margin-left:.125rem}
.kt__not{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.kt__not li{display:inline-flex;align-items:center;gap:.4375rem;font-size:.75rem;font-weight:600;
  color:var(--on-dark-muted)}
.kt__not svg{color:#3DD68C;flex:none}

/* ic sayfalar ve icindekiler basliklari */
.kt__baslik-k{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:1.25rem;padding-bottom:.875rem;border-bottom:1px solid rgba(232,237,243,.1)}
.kt__baslik-k h3{margin:0;font-size:1.125rem;font-weight:800;color:#fff}
.kt__baslik-k span{font-size:.8125rem;color:var(--on-dark-muted)}
.kt__sayfalar{margin-top:clamp(3rem,6vw,4.5rem)}
.kt__onizle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.kt__sayfa{position:relative;display:block;min-width:0;padding:0;margin:0;cursor:zoom-in;
  text-align:left;font:inherit;color:inherit;border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid rgba(232,237,243,.14);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .3s}
.kt__sayfa img{display:block;width:100%;height:auto;aspect-ratio:620/640;
  object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.kt__sayfa:hover{transform:translateY(-6px);border-color:rgba(244,166,32,.5);
  box-shadow:0 34px 60px -30px rgba(0,0,0,.95)}
.kt__sayfa:hover img{transform:scale(1.04)}
.kt__sayfa:focus-visible{outline:2px solid var(--saf-500);outline-offset:3px}
.kt__sayfa-y{position:absolute;left:0;right:0;bottom:0;padding:2.75rem 1.125rem 1rem;
  background:linear-gradient(180deg,transparent,rgba(4,38,65,.82) 45%,rgba(4,38,65,.96))}
.kt__sayfa-y b{display:block;font-size:.9375rem;font-weight:800;color:#fff}
.kt__sayfa-y small{display:block;margin-top:.125rem;font-size:.75rem;color:var(--on-dark-muted)}
.kt__buyutec{position:absolute;top:.75rem;right:.75rem;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--saf-500);color:var(--navy-900);
  opacity:0;scale:.8;transition:opacity .3s,scale .3s var(--ease)}
.kt__sayfa:hover .kt__buyutec,.kt__sayfa:focus-visible .kt__buyutec{opacity:1;scale:1}

.kt__icerik{margin-top:clamp(2.5rem,5vw,3.5rem)}
.kt__gruplar{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1.25rem;align-items:start}
.kt__grup{min-width:0;border:1px solid rgba(232,237,243,.12);border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(232,237,243,.06),rgba(232,237,243,.015))}
.kt__grup summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem 1.25rem;cursor:pointer;color:var(--on-dark-muted)}
.kt__grup summary::-webkit-details-marker{display:none}
.kt__grup summary b{display:block;font-size:.9375rem;font-weight:800;color:#fff}
.kt__grup summary small{display:block;margin-top:.125rem;font-size:.75rem}
.kt__grup summary svg{flex:none;transition:rotate .3s var(--ease)}
.kt__grup[open] summary svg{rotate:180deg}
.kt__liste{list-style:none;margin:0;padding:0 .5rem .5rem}
.kt__liste li{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.75rem;
  align-items:baseline;padding:.625rem .75rem;border-top:1px solid rgba(232,237,243,.07);
  border-radius:10px;transition:background .2s}
.kt__liste li:hover{background:rgba(232,237,243,.05)}
.kt__no{font-family:var(--f-display);font-variation-settings:var(--display-var);font-weight:800;
  font-size:.8125rem;color:var(--saf-400);font-variant-numeric:tabular-nums}
.kt__ad{min-width:0;font-size:.875rem;font-weight:600;color:var(--on-dark);line-height:1.4}
.kt__s{font-size:.75rem;color:var(--on-dark-muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* buyutme penceresi */
.kt__pencere{border:0;padding:0;background:transparent;max-width:min(92vw,700px);
  max-height:94vh;overflow:visible;color:var(--on-dark)}
.kt__pencere::backdrop{background:rgba(2,19,31,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kt__pencere[open]{animation:ktAc .35s var(--ease)}
@keyframes ktAc{from{opacity:0;scale:.94}}
.kt__pencere img{display:block;width:auto;max-width:100%;max-height:86vh;height:auto;
  margin-inline:auto;border-radius:10px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.kt__pencere p{margin:.75rem 0 0;text-align:center;font-size:.8125rem;color:var(--on-dark-muted)}
.kt__kapat-f{position:absolute;top:-16px;right:-16px;z-index:2;margin:0}
.kt__kapat{width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;
  cursor:pointer;background:var(--saf-500);color:var(--navy-900);box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}

@media (max-width:860px){
  .kt__ust{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .kt__sahne{padding:1.5rem 0 2.75rem}
  .kt__kitap{width:min(230px,58%)}
  .kt__etiket{width:88px;height:88px}
  .kt__etiket b{font-size:1.25rem}
  .kt__etiket text{font-size:10px}
  .kt__gruplar{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .kt__ozellik{gap:.5rem}
  .kt__ozellik div{padding:.75rem .75rem}
  .kt__ozellik dt{font-size:1rem}
  .kt__ozellik dd{font-size:.6875rem}
  .kt__kutu span{display:none}
  /* Ic sayfalar yana kayan serit: ucuncusu kenardan gorunur, kaydirilacagi belli olur. */
  .kt__onizle{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:.875rem;
    margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) .75rem;
    /* Yapisma noktasi dolgunun icinde olsun; yoksa ilk sayfa ekran kenarina yapisiyor. */
    scroll-padding-inline:var(--pad)}
  .kt__onizle::-webkit-scrollbar{display:none}
  .kt__sayfa{scroll-snap-align:start}
  .kt__buyutec{opacity:1;scale:1;width:32px;height:32px}
  .kt__liste li{grid-template-columns:1.75rem minmax(0,1fr);row-gap:.125rem}
  .kt__s{grid-column:2}
  .kt__kapat-f{top:-12px;right:-6px}
}
@media (prefers-reduced-motion:reduce){
  .kt__kitap,.kt__golge,.kt__etiket svg{animation:none}
  .kt__kitap,.kt__sayfa,.kt__sayfa img{transition:none}
  .kt__pencere[open]{animation:none}
}


/* ---------------------------------------------------------- meydan okuma --- */
.mey{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
  align-items:center}
.mey>*{min-width:0}
/* <ol> tarayici varsayilani olarak 40px sola dolgu aliyor; list-style
   kaldirilinca da duruyor ve dar ekranda satiri disari itiyordu. */
.mey__a{list-style:none;display:grid;gap:1.25rem;margin:0;padding:0}
/* Izgara/esnek ogeler varsayilan olarak min-content'ten dar olamiyor;
   360px'de uzun kelimeler satiri ekran disina tasiriyordu. */
.mey__s{display:flex;gap:1rem;min-width:0}
.mey__s>span:last-child{min-width:0;overflow-wrap:anywhere}
.mey__n{width:34px;height:34px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:var(--navy-900);color:var(--saf-500);
  font-family:var(--f-display);font-variation-settings:var(--display-var);
  font-weight:800;font-size:.9375rem}
.mey__s b{display:block;font-size:1rem;font-weight:800;color:var(--ink);
  margin-bottom:.25rem}
.mey__s span span{display:block;font-size:.9375rem;line-height:1.6;color:var(--muted)}
.mey__cta{margin-top:.5rem}
@media (max-width:860px){
  .mey{grid-template-columns:1fr}
  .mey__k{order:2}
}

/* ------------------------------------------------- fiyatin gerekcesi --- */
.ned{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
  margin-bottom:clamp(2rem,4vw,3rem)}
.ned__k{background:var(--pearl);border:1px solid var(--line);border-radius:var(--r);
  padding:1.25rem}
.ned__i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--line);color:var(--teal-600);
  margin-bottom:.875rem}
.ned__k b{display:block;font-size:1rem;font-weight:800;color:var(--ink);
  margin-bottom:.375rem}
.ned__k p{font-size:.875rem;line-height:1.6;color:var(--muted)}
@media (max-width:860px){.ned{grid-template-columns:1fr}}

/* --------------------------------------------------------------- podcast --- */
.pod{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
  align-items:center}
/* Izgara ogeleri varsayilan olarak min-content'ten dar olamiyor: uzun bir
   kelime ("Kulakligini") sutunu ekrandan tasiracak kadar genisletiyordu. */
.pod>*{min-width:0}
.pod__k{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.375rem;box-shadow:var(--sh-lg)}
.pod__now{display:flex;align-items:center;gap:.875rem}
.pod__play{width:48px;height:48px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:var(--saf-500);color:var(--navy-900);
  box-shadow:0 8px 20px -8px rgba(244,166,32,.8)}
.pod__nowT{min-width:0}
.pod__nowT b{display:block;font-size:.9375rem;font-weight:800;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod__nowT small{display:block;margin-top:.125rem;font-size:.75rem;color:var(--muted)}
.pod__bar{height:5px;border-radius:3px;background:var(--pearl);margin:1.125rem 0;
  overflow:hidden}
.pod__bar i{display:block;width:38%;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--teal-600),var(--saf-500))}
.pod__list{display:grid;gap:.5rem}
.pod__row{display:flex;align-items:center;gap:.625rem;padding:.625rem .75rem;
  border-radius:11px;border:1px solid var(--line);background:var(--pearl);
  /* Izgara ogesi varsayilan olarak min-content'ten dar olamiyor; uzun kanun
     adlari satiri ekran disina tasiriyordu. */
  min-width:0}
.pod__ic{width:26px;height:26px;border-radius:8px;flex:none;display:grid;
  place-items:center;background:var(--teal-50);color:var(--teal-600)}
.pod__rt{flex:1;min-width:0;font-size:.8125rem;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod__daha{margin-top:.75rem;text-align:center;font-size:.8125rem;font-weight:700;
  color:var(--teal-600)}
@media (max-width:860px){.pod{grid-template-columns:1fr}}

/* ------------------------------------------------------------ kurumlar --- */
.orgs{background:var(--white);border-block:1px solid var(--line);
  padding-block:1.5rem 1.75rem;overflow:hidden}
.orgs__ust{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.orgs__l{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);flex:none}
.org{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--pearl);font-size:.8125rem;font-weight:700;
  color:var(--ink);white-space:nowrap;flex:none}
.org svg{color:var(--teal-600);flex:none}
/* Dokunma hedefi 32px'in altinda kaliyordu; hizasi bozulmasin diye satir
   yuksekligiyle degil dolguyla buyutuluyor. */
.orgs__more{margin-left:auto;font-size:.8125rem;font-weight:700;color:var(--teal-600);
  display:inline-flex;align-items:center;min-height:36px}
.orgs__more:hover{color:var(--teal-700);text-decoration:underline}
/* Kurum listesi de konular gibi surekli akiyor. Kenarlarda maske: pilller
   ekranin disinda birden kesilmiyor, soluyarak giriyor. */
.orgs__mq{--dur:44s}
.orgs__mq .mq__group{gap:.625rem}
.orgs__mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.orgs__mq:hover .mq__track{animation-play-state:paused}

/* --------------------------------------------------------- bölüm başı --- */
.head{max-width:64ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.head--wide{max-width:78ch}
.head--center{margin-inline:auto;text-align:center}
.head--center .eyebrow{justify-content:center}
.head--center .lead{margin-inline:auto}

/* -------------------------------------------------------------- kartlar --- */
.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.75rem;position:relative;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.card::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--teal-600),var(--saf-500));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card__ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--teal-50);color:var(--teal-600);margin-bottom:1.25rem}
.card__ico--gold{background:var(--saf-50);color:var(--saf-700)}
.card h3{font-size:1.125rem;font-weight:800;margin-bottom:.625rem;letter-spacing:-.02em}
.card p{font-size:.9375rem;color:var(--muted);line-height:1.65}
.card__badge{position:absolute;top:1.25rem;right:1.25rem;padding:.25rem .625rem;
  border-radius:var(--r-pill);background:var(--saf-50);color:var(--saf-700);
  font-size:.625rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* -------------------------------------------------------------- adımlar --- */
.steps{display:grid;gap:1.25rem;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:s}
.step{position:relative;padding-top:2.75rem}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:0;left:0;font-family:var(--f-display);font-weight:800;
  font-size:2.25rem;line-height:1;color:var(--line);letter-spacing:-.04em;transition:color .25s}
.step:hover::before{color:var(--saf-500)}
.step__bar{height:3px;border-radius:2px;background:var(--line);margin-bottom:1.25rem;overflow:hidden}
.step__bar i{display:block;height:100%;width:100%;background:var(--teal-600);
  transition:width .7s var(--ease)}
.has-js .step__bar i{width:0}
.has-js .step.is-in .step__bar i{width:100%}
.step h3{font-size:1.0625rem;margin-bottom:.5rem}
.step p{font-size:.9rem;color:var(--muted)}

/* -------------------------------------------------------------- konular --- */
/* Uc sira halinde, ters yonlerde kayan serit. Kanun adlari cok uzun oldugu
   icin haplar bir genislikte kesiliyor; tam metin title'da duruyor. */
.mqs{display:flex;flex-direction:column;gap:.75rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq{overflow:hidden}
.mq__track{display:flex;width:max-content;gap:.75rem;
  animation:mqLeft var(--dur,56s) linear infinite}
.mq--rev .mq__track{animation-name:mqRight}
.mqs:hover .mq__track{animation-play-state:paused}
.mq__group{display:flex;gap:.75rem;flex:none}
@keyframes mqLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.topic{display:inline-flex;align-items:center;gap:.625rem;flex:none;max-width:30ch;
  padding:.75rem 1.25rem;border-radius:var(--r-pill);
  border:1px solid rgba(232,237,243,.16);background:rgba(232,237,243,.045);
  font-size:.9375rem;font-weight:600;color:var(--on-dark);white-space:nowrap;
  transition:border-color .3s,background .3s,color .3s}
.topic:hover{border-color:rgba(244,166,32,.5);background:rgba(244,166,32,.09);color:#fff}
.topic__s{flex:none;color:var(--saf-500);font-size:.75rem;line-height:1}
.topic__t{overflow:hidden;text-overflow:ellipsis}
.topics__more{margin-top:2.5rem;text-align:center;font-size:.9375rem;
  color:var(--on-dark-muted)}
.topics__more b{color:var(--saf-500);font-weight:800}
@media (prefers-reduced-motion:reduce){
  .mq{overflow-x:auto}
  .mq__track{animation:none}
}
@media (max-width:640px){
  .topic{max-width:22ch;font-size:.875rem;padding:.625rem 1rem}
  .mqs{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
       mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
}

/* ------------------------------------------------------------- fiyatlar --- */
.plans{display:grid;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:880px;margin-inline:auto}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem;display:flex;flex-direction:column}
.plan--gold{border-color:var(--saf-500);position:relative;
  box-shadow:0 24px 48px -20px rgba(244,166,32,.4)}
.plan--gold::before{content:"EN ÇOK TERCİH EDİLEN";position:absolute;top:0;left:50%;
  transform:translate(-50%,-50%);background:var(--saf-500);color:var(--navy-900);
  padding:.375rem 1rem;border-radius:var(--r-pill);font-size:.625rem;font-weight:800;
  letter-spacing:.1em;white-space:nowrap}
.plan__n{font-size:.75rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1rem}
.plan--gold .plan__n{color:var(--saf-700)}
.price{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.5rem}
.price__n{font-variation-settings:var(--display-var);font-family:var(--f-display);font-weight:800;font-size:2.5rem;
  color:var(--ink);letter-spacing:-.04em;line-height:1}
/* "₺" sembolu Archivo'nun agir kesiminde "Ł" gibi okunuyordu; para birimi
   yazi olarak veriliyor. */
.price__cur{font-family:var(--f-display);font-weight:800;font-size:1.25rem;
  color:var(--muted);letter-spacing:-.02em;line-height:1;margin-left:-.125rem}
.plan--gold .price__cur{color:var(--saf-700)}
.price__p{font-size:.875rem;color:var(--muted);font-weight:600}
.plan__d{font-size:.9375rem;color:var(--muted);margin-bottom:1.75rem;
  padding-bottom:1.75rem;border-bottom:1px solid var(--line-soft)}
.feats{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem;flex:1}
.feat{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem}
.feat svg{flex:none;margin-top:.25rem}
.feat--y svg{color:var(--ok)}
.feat--n{color:#94A3B8}
.feat--n svg{color:#CBD5E1}

/* -------------------------------------------------------------- rakamlar --- */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.fact{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.75rem;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.fact::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--teal-600),var(--saf-500));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.fact:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:transparent}
.fact:hover::after{transform:scaleX(1)}
.fact__i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:1rem;color:var(--teal-600);background:var(--teal-50);
  border:1px solid rgba(14,116,144,.16);transition:background .25s,color .25s}
.fact:hover .fact__i{background:var(--teal-600);color:#fff}
.fact__l{font-size:.75rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--saf-700);margin-bottom:.75rem}
.fact p{font-size:.9rem;color:var(--muted);line-height:1.65}
@media (max-width:1024px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.facts{grid-template-columns:1fr}}

/* --------------------------------------------------------------- acilis --- */
/* Sayfa hazir olana kadar gorunen marka ekrani. Yalnizca .has-js altinda
   cizilir: script calismazsa perde hic olusmaz ve iceriğin onunu kapatmaz. */
.splash{display:none}
.has-js .splash{
  display:grid;place-items:center;position:fixed;inset:0;z-index:200;
  background:var(--navy-900);
  transition:opacity .55s var(--ease),visibility .55s;
}
.has-js .splash::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle 460px at 50% 38%,rgba(19,145,179,.30),transparent 70%),
    radial-gradient(circle 380px at 50% 76%,rgba(244,166,32,.18),transparent 70%);
}
.has-js .splash.is-done{opacity:0;visibility:hidden;pointer-events:none}
.splash__in{position:relative;display:grid;place-items:center;gap:1.75rem;padding:2rem}
.splash__logo{width:104px;height:104px;border-radius:50%;background:#fff;padding:16px;
  display:grid;place-items:center;box-shadow:0 18px 48px -14px rgba(0,0,0,.6);
  animation:splashIn .8s var(--ease) both}
.splash__logo img{width:100%;height:100%;object-fit:contain}
.splash__name{font-variation-settings:var(--display-var);font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:1.125rem;letter-spacing:.22em;color:#fff;
  animation:splashIn .8s var(--ease) .1s both}
.splash__name em{font-style:normal;color:var(--saf-500)}
.splash__bar{width:180px;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(232,237,243,.16);animation:splashIn .8s var(--ease) .18s both}
.splash__bar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--teal-500),var(--saf-500));
  transition:width .35s var(--ease)}
@keyframes splashIn{from{opacity:0;transform:translateY(14px) scale(.96)}
                    to{opacity:1;transform:none}}
.has-js body.is-loading{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .has-js .splash{transition:none}
  .splash__logo,.splash__name,.splash__bar{animation:none}
}

/* ------------------------------------------------------------- yorumlar --- */
.quotes{display:grid;gap:1.25rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.quote{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem}
.stars{display:flex;gap:.1875rem;margin-bottom:1rem;color:var(--saf-500)}
.quote p{font-family:var(--f-serif);font-size:1.1875rem;line-height:1.5;color:var(--ink);
  margin-bottom:1.5rem;letter-spacing:-.01em}
.who{display:flex;align-items:center;gap:.75rem;padding-top:1.25rem;border-top:1px solid var(--line-soft)}
.who__av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--navy-900);color:var(--saf-500);font-weight:800;font-size:.8125rem}
.who__n{font-size:.875rem;font-weight:800;color:var(--ink);line-height:1.3}
.who__r{font-size:.75rem;color:var(--muted)}

/* ----------------------------------------------------------------- sss --- */
.faq{max-width:800px;margin-inline:auto;display:flex;flex-direction:column;gap:.75rem}
.qa{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.qa[open]{border-color:var(--teal-600);box-shadow:var(--sh)}
.qa summary{padding:1.25rem 1.5rem;cursor:pointer;font-weight:700;font-size:1rem;
  color:var(--ink);display:flex;align-items:center;gap:1rem;list-style:none;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";margin-left:auto;flex:none;width:11px;height:11px;
  border-right:2px solid var(--teal-600);border-bottom:2px solid var(--teal-600);
  transform:rotate(45deg) translateY(-3px);transition:transform .22s}
.qa[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.qa__a{padding:0 1.5rem 1.5rem;font-size:.9375rem;color:var(--muted);line-height:1.7}

/* ------------------------------------------------------------- son cta --- */
.cta{position:relative;overflow:hidden;background:var(--navy-900);border-radius:var(--r-lg);
  padding:clamp(2.75rem,6vw,4.5rem);text-align:center;color:var(--on-dark)}
.cta__glow{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(100px);
  top:-320px;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(244,166,32,.26),transparent 66%)}
.cta__in{position:relative}
.cta h2{color:#fff}
.cta .lead{margin-inline:auto}
.cta__btns{display:flex;flex-wrap:wrap;gap:.875rem;justify-content:center;margin-top:2.25rem}

/* --------------------------------------------------------------- footer --- */
/* Dönerci sitesindeki yırtık kâğıt kenarı: koyu gövdeden açık "kâğıt" panele
   geçiş. Kenar SVG maskeyle kesiliyor, görsel dosyası yok. */
.ftr{position:relative;background:#EFEAE1;color:#57534E;
  padding-block:clamp(4.5rem,8vw,6rem) 2rem;margin-top:-2px}
.ftr::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:34px;background:inherit;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V12l24-4 22 6 26-9 20 7 28-5 24 8 22-10 26 6 24-3 20 9 28-8 22 5 26-7 24 10 20-6 28 4 22-9 26 8 24-5 20 7 28-3 22 6 26-9 20 5 28 4 22-8 26 7 24-4 20 8 28-6 22 3 26 5 24-9 20 6 28-4 22 8 26-7 24 5 20 3v22z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V12l24-4 22 6 26-9 20 7 28-5 24 8 22-10 26 6 24-3 20 9 28-8 22 5 26-7 24 10 20-6 28 4 22-9 26 8 24-5 20 7 28-3 22 6 26-9 20 5 28 4 22-8 26 7 24-4 20 8 28-6 22 3 26 5 24-9 20 6 28-4 22 8 26-7 24 5 20 3v22z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transform:translateY(-33px);pointer-events:none;
}
.ftr__top{display:grid;grid-template-columns:1.5fr .8fr 1fr 1.2fr;gap:2.5rem;
  padding-bottom:2.5rem;border-bottom:1px solid rgba(4,38,65,.14)}
.ftr__brand{font-variation-settings:var(--display-var);font-family:var(--f-display);font-weight:800;font-size:1.375rem;
  letter-spacing:-.02em;color:var(--navy-900)}
.ftr__brand em{font-style:normal;color:var(--saf-600)}
/* Footer krem zeminde, logonun kendi lacivert/altin renkleri dogrudan calisiyor. */
.ftr__logo{display:block;width:154px;height:auto}
.ftr__tag{font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#8A8378;margin-top:.25rem}
.ftr__about{font-size:.875rem;line-height:1.75;margin-top:1.25rem;max-width:34ch}
.ftr__rate{display:flex;align-items:center;gap:.625rem;margin-top:1.25rem;font-size:.875rem}
.ftr__rate .stars{margin:0}
.ftr__rate b{color:var(--navy-900);font-weight:800}
.ftr__soc{display:flex;gap:.625rem;margin-top:1.5rem}
.soc{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(4,38,65,.2);color:#57534E;
  transition:border-color .3s,color .3s,transform .3s var(--ease),background .3s}
.soc:hover{border-color:var(--saf-600);color:var(--saf-700);
  background:rgba(244,166,32,.1);transform:translateY(-3px)}
.ftr h4{font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--saf-700);margin-bottom:1.25rem}
.ftr__links{display:flex;flex-direction:column;gap:.8125rem}
.ftr__links a{font-size:.9375rem;transition:color .25s;padding-block:.25rem}
.ftr__links a:hover{color:var(--navy-900)}
.ftr__blk{margin-bottom:1.25rem}
.ftr__blk strong{display:block;font-size:.9375rem;font-weight:800;color:var(--navy-900);
  margin-bottom:.25rem;letter-spacing:-.01em}
.ftr__blk span{font-size:.875rem;line-height:1.65;display:block}
.ftr__row{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem;font-size:.9375rem}
.ftr__row svg{flex:none;color:var(--saf-600);margin-top:.1875rem}
.ftr__row small{display:block;font-size:.75rem;color:#8A8378;margin-top:.125rem}
.ftr__row a{display:inline-flex;align-items:center;min-height:32px}
.ftr__row a:hover{color:var(--navy-900)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
  padding-top:2rem;font-size:.8125rem}
.ftr__slogan{font-size:.8125rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy-900)}
.ftr__copy{margin-top:.375rem;color:#8A8378}
.ftr__bot nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:1.5rem}
.ftr__bot nav a{padding-block:.375rem}
@media (max-width:640px){
  .ftr__bot nav{margin-left:0;gap:1rem 1.25rem}
  .nav a{min-height:44px;display:flex;align-items:center}
}
.ftr__bot nav a:hover{color:var(--navy-900);text-decoration:underline}

/* ------------------------------------------------------------------ wa --- */
.wa{position:fixed;right:1.25rem;bottom:1.25rem;z-index:70;width:56px;height:56px;
  border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.6);transition:transform .2s}
.wa:hover{transform:scale(1.08)}

/* ------------------------------------------------------------ animasyon --- */

/* Scroll ilerleme çubuğu — dönerci sitesindeki .scroll-progress */
.progress{position:fixed;top:0;left:0;height:2px;z-index:99;width:0;
  background:linear-gradient(90deg,var(--teal-500),var(--saf-500));
  box-shadow:0 0 12px rgba(244,166,32,.55);transition:width .1s linear}

/* Görünüre girince belirme. Süre bilerek uzun (.9s) — referans sitelerdeki
   yavaş, ağırbaşlı giriş hissi bu süreden geliyor. */
/* Başlangıç durumu YALNIZCA .has-js altında gizli. Bu sınıfı head'deki satır
   içi script ekliyor; script çalışmazsa (JS kapalı, hata, eski tarayıcı)
   içerik olduğu gibi görünür kalır. Aksi hâlde tek bir JS hatası sayfayı
   boş gösterirdi. */
.has-js .rise{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.has-js .rise.is-in{opacity:1;transform:none}

/* Yanlardan giriş — bölüm başlıkları ve iki sütunlu yerleşimler için */
/* Yandan gelen bloklar gorunmeden once kaydirilmis bekliyor; dar ekranda
   sayfayi yatayda kaydiriyordu. clip kaydirma alani acmaz, sticky bozulmaz. */
main{overflow-x:clip}
.has-js .rise-l{opacity:0;transform:translateX(-28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.has-js .rise-r{opacity:0;transform:translateX(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.has-js .rise-l.is-in,.has-js .rise-r.is-in{opacity:1;transform:none}

/* Ölçek + belirme — hero görseli gibi tek büyük öğeler için */
.has-js .rise-s{opacity:0;transform:scale(.965) translateY(20px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.has-js .rise-s.is-in{opacity:1;transform:none}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes sway{0%,100%{transform:translateY(0) rotate(-.4deg)}
                50%{transform:translateY(-10px) rotate(.4deg)}}
@keyframes pulseGold{0%,100%{box-shadow:0 0 0 0 rgba(244,166,32,.45)}
                     50%{box-shadow:0 0 0 12px rgba(244,166,32,0)}}
@keyframes shimmer{0%{background-position:200% 50%}100%{background-position:-200% 50%}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes scrollHint{0%,100%{transform:translateY(0);opacity:.45}
                      50%{transform:translateY(7px);opacity:1}}

.anim-float{animation:float 6s ease-in-out infinite}
.anim-sway{animation:sway 7.5s ease-in-out infinite;animation-delay:-2s}
.pill__dot{animation:pulseGold 2.6s ease-in-out infinite}

/* Altın gradient kayan başlık vurgusu — Gelinlik Pro'daki .gold-text-animated */
.shine{
  background:linear-gradient(100deg,var(--saf-600) 0%,var(--saf-500) 18%,#FFE9B0 34%,
            var(--saf-500) 50%,var(--saf-600) 70%,var(--saf-500) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shimmer 6s linear infinite;
  padding-bottom:.08em;
}

/* Görsel hover'da yavaşça yaklaşsın (1.1s) */
.zoom{overflow:hidden}
.zoom img{transition:transform 1.1s var(--ease),filter .5s ease}
.zoom:hover img{transform:scale(1.06)}

.hint{display:grid;place-items:center;gap:.4rem;animation:scrollHint 2.4s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .has-js .rise,.has-js .rise-l,.has-js .rise-r,.has-js .rise-s{opacity:1;transform:none}
  .anim-float,.anim-sway,.pill__dot,.shine,.hint,.ticker__track{animation:none}
  .hero__ember,.kaydir__c i{animation:none}
  .hero__ember{opacity:.7}
  /* Telefonlar duruyor ama egik durusu korunuyor: rotate animasyonun
     icinde oldugu icin ayrica yaziliyor. */
  /* Telefonlar durur; sira degistirme de kapali (landing.js kontrol ediyor).
     Dizilis baslangic sinifiyla korunuyor. */
  .ph .phone{animation:none}
  .ph{transition:none}
  .shine{-webkit-text-fill-color:var(--saf-500);color:var(--saf-500)}
  .progress{display:none}
}

/* --------------------------------------------------------- mobil uygulama --- */
.app{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:center}
.app__badges{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.store{display:inline-flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;
  border-radius:14px;border:1px solid rgba(232,237,243,.2);background:rgba(232,237,243,.05);
  transition:border-color .3s,background .3s}
.store:hover{border-color:rgba(244,166,32,.5);background:rgba(244,166,32,.07)}
.store svg{flex:none;color:#fff}
.store__t{display:flex;flex-direction:column;line-height:1.2}
.store__s{font-size:.625rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--saf-400)}
.store__n{font-size:.9375rem;font-weight:800;color:#fff}

/* telefon cercevesi — uygulama ekraninin sadelestirilmis bir kesiti */
/* Uc telefonluk kume. Olculer referans tasarimdan alindi: govde orani 2.10,
   yandakiler ortadakinin %77'si. DOM genisligi ucunde de ayni; kucultme
   scale ile yapiliyor ki ekran icindeki oranlar (yazi, bosluk, ikon)
   telefondan telefona degismesin.

   Iki ayri surekli hareket ust uste biniyor: sarmalayici .ph asagi yukari
   suzuluyor (float), icindeki .phone hafifce saga sola donuyor (sway).
   Sureler birbirinin kati degil, boylece uclu blok halinde oynamiyor. */
/* Uc telefonluk karusel. Olculer referans tasarimdan alindi: govde orani
   2.10, arkadakiler ondekinin %77'si.

   Konumlar CSS animasyonuyla degil `data-yer` ozniteligiyle veriliyor;
   sirayi landing.js dondururyor. Boylece hem tiklamayla ilerletilebiliyor
   hem de sagdan sola donen telefon ondekinin uzerinden gecmiyor: o adimda
   yol almadan sonup yeni yerinde beliriyor.

   Ust uste iki hareket: .ph konumu degistiriyor, icindeki .phone ayrica
   asagi yukari suzuluyor. */
/* Karusel donerken yana yatik telefon bir anlik ekranin disina tasip
   sayfayi yatayda kaydiriyordu. clip kaydirma alani acmaz. */
#mobil{overflow-x:clip}
.phones{position:relative;display:block;cursor:pointer}
/* Telefonlar mutlak konumlu oldugu icin kapsayicinin yuksekligi kalmiyor;
   gorunmez bir olcu kutusu belirliyor. */
.ph-olcu{display:block;width:min(300px,48%);aspect-ratio:1/2.1;
  margin-inline:auto;visibility:hidden}
.ph{position:absolute;left:50%;top:0;width:min(300px,48%);display:flex;
  transition:transform .85s var(--ease),opacity .3s linear}
.ph .phone{width:100%;margin-inline:0;display:flex;flex-direction:column;
  animation:phSuz 6s ease-in-out infinite}
.ph--l .phone{animation-duration:8s}
.ph--r .phone{animation-duration:7s}
@keyframes phSuz{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Baslangic dizilisi. Script calismazsa da telefonlar dogru yerde durur. */
.ph--l{transform:translateX(-50%) translateX(-62%) scale(.77) rotate(-6deg);z-index:1}
.ph--m{transform:translateX(-50%) scale(1);z-index:3}
.ph--r{transform:translateX(-50%) translateX(62%) scale(.77) rotate(6deg);z-index:1}

/* Script devraldiktan sonra konumu bu oznitelik belirliyor. */
.ph[data-yer="sol"]{transform:translateX(-50%) translateX(-62%) scale(.77) rotate(-6deg);z-index:1}
.ph[data-yer="on"] {transform:translateX(-50%) scale(1) rotate(0deg);z-index:3}
.ph[data-yer="sag"]{transform:translateX(-50%) translateX(62%) scale(.77) rotate(6deg);z-index:1}

/* Sagdan sola donen telefon: yol almadan sonup yeni yerinde beliriyor.
   Yoksa ondekinin tam ustunden gecip carpisiyormus gibi duruyordu. */
.ph.is-atlar{transition:opacity .26s linear;opacity:0}

/* Arkadakiler bir tik koyu: goz hep ondekine gitsin. */
.phone__veil{position:absolute;inset:0;border-radius:44px;z-index:5;
  pointer-events:none;background:rgba(2,19,31,.3);
  transition:opacity .85s var(--ease)}
.ph--m .phone__veil,.ph[data-yer="on"] .phone__veil{opacity:0}
.ph[data-yer="sol"] .phone__veil,.ph[data-yer="sag"] .phone__veil{opacity:1}

.phone{position:relative;width:min(310px,80%);margin-inline:auto;
  border-radius:44px;padding:12px;background:linear-gradient(160deg,#14374F,#061B2C);
  border:1px solid rgba(232,237,243,.18);box-shadow:var(--sh-xl)}
.phone__scr{position:relative;border-radius:34px;overflow:hidden;
  background:linear-gradient(180deg,#062134,#041A29);padding:.75rem .8125rem 0;
  display:flex;flex-direction:column;gap:.625rem;
  /* Govde orani 2.10 (referanstaki olcu). Cerceve dolgusu ve kenarligi
     cikinca ekranin orani 2.215 kaliyor. Icerik esnek kutuyla esitlense
     ekranlar iceriklerinin uzunlugu kadar uzuyor ve telefonlar ince uzun
     goruunuyordu. */
  aspect-ratio:1/2.215}
/* centik */
.phone__notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:98px;height:24px;border-radius:14px;background:#02131F;z-index:3}
.phone__status{display:flex;align-items:center;gap:.375rem;padding:.25rem .375rem .125rem;
  font-size:.625rem;font-weight:800;color:var(--on-dark);letter-spacing:.02em}
.phone__status .sp{margin-left:auto;display:flex;gap:3px;align-items:flex-end}
.phone__status .sp i{display:block;width:3px;background:var(--on-dark);border-radius:1px;opacity:.85}
.phone__status .sp i:nth-child(1){height:4px}
.phone__status .sp i:nth-child(2){height:6px}
.phone__status .sp i:nth-child(3){height:8px}
.phone__batt{width:18px;height:9px;border:1px solid rgba(232,237,243,.6);border-radius:2px;
  padding:1px;display:flex}
.phone__batt span{flex:1;background:var(--saf-500);border-radius:1px}

.phone__hi{display:flex;align-items:center;gap:.5rem;padding:.25rem .125rem}
.phone__av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--saf-500);color:var(--navy-900);font-size:.625rem;font-weight:800}
.phone__hi b{font-size:.75rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.phone__hi small{display:block;font-size:.5625rem;color:var(--on-dark-muted);font-weight:600}
.phone__bell{margin-left:auto;position:relative;color:var(--on-dark-muted)}
.phone__bell::after{content:"";position:absolute;top:-1px;right:-1px;width:6px;height:6px;
  border-radius:50%;background:var(--saf-500);border:1.5px solid #062134}

/* ozet karti */
.phone__sum{border-radius:16px;padding:.8125rem;display:flex;align-items:center;gap:.75rem;
  background:linear-gradient(135deg,rgba(244,166,32,.16),rgba(19,145,179,.14));
  border:1px solid rgba(244,166,32,.28)}
.ring{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--saf-500) 0turn .72turn,rgba(232,237,243,.14) .72turn 1turn);
  position:relative}
.ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#08283D}
.ring b{position:relative;font-size:.75rem;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums}
.phone__sumT{min-width:0}
.phone__sumT b{display:block;font-size:.75rem;font-weight:800;color:#fff;margin-bottom:.125rem}
.phone__sumT span{font-size:.625rem;color:var(--on-dark-muted);font-weight:600;
  white-space:nowrap}

/* konu satirlari */
.phone__row{display:flex;align-items:center;gap:.5625rem;padding:.5625rem .625rem;
  border-radius:13px;background:rgba(232,237,243,.05);
  border:1px solid rgba(232,237,243,.09)}
.phone__ico{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:rgba(244,166,32,.16);color:var(--saf-400)}
.phone__rt{flex:1;min-width:0}
.phone__l{display:block;font-size:.6875rem;font-weight:700;color:var(--on-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone__pb{height:3px;border-radius:2px;background:rgba(232,237,243,.14);margin-top:.3125rem;
  overflow:hidden}
.phone__pb i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--teal-400),var(--saf-500))}
.phone__v{flex:none;font-size:.6875rem;font-weight:800;color:var(--saf-500);
  font-variant-numeric:tabular-nums}

/* alt sekmeler */
.phone__tabs{margin-top:auto;display:flex;justify-content:space-between;
  padding:.625rem .375rem calc(.625rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(232,237,243,.1);background:rgba(2,19,31,.5)}
.phone__tab{display:grid;place-items:center;gap:.1875rem;color:var(--on-dark-muted);flex:1}
.phone__tab span{font-size:.5rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.phone__tab.is-on{color:var(--saf-500)}
/* ---- yan ekranlar ---- */
/* baslik satiri */
.phone__hd{display:flex;align-items:center;padding:.25rem .125rem .0625rem}
.phone__hd b{font-size:.8125rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.phone__hdi{margin-left:auto;color:var(--on-dark-muted)}

/* arama kutusu */
.phone__srch{display:flex;align-items:center;gap:.4375rem;padding:.5rem .625rem;
  border-radius:11px;background:rgba(232,237,243,.06);
  border:1px solid rgba(232,237,243,.09);color:var(--on-dark-muted)}
.phone__srch span{font-size:.6875rem;font-weight:600}

/* kurum/pozisyon rozetleri */
.phone__chips{display:flex;gap:.375rem;overflow:hidden}
.phone__chip{flex:none;font-size:.5625rem;font-weight:700;padding:.3125rem .5625rem;
  border-radius:999px;color:var(--on-dark-muted);
  border:1px solid rgba(232,237,243,.14);background:rgba(232,237,243,.04)}
.phone__chip.is-on{color:var(--navy-900);background:var(--saf-500);border-color:transparent}

/* konu satiri */
.phone__row--k{align-items:center}
.phone__sub{display:block;font-size:.5625rem;font-weight:600;
  color:var(--on-dark-muted);margin-top:.125rem}
.phone__ok{flex:none;width:17px;height:17px;border-radius:50%;display:grid;
  place-items:center;background:rgba(34,165,199,.18);color:var(--teal-400)}
.phone__ch{flex:none;color:var(--on-dark-muted);opacity:.6;display:grid;place-items:center}

/* deneme sonucu */
.phone__net{border-radius:16px;padding:.8125rem;text-align:center;
  background:linear-gradient(150deg,rgba(244,166,32,.16),rgba(14,116,144,.14));
  border:1px solid rgba(232,237,243,.1)}
.phone__netN{display:block;font-family:var(--f-display);font-weight:800;
  font-variation-settings:var(--display-var);font-size:1.75rem;line-height:1;
  color:var(--saf-500);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.phone__netN em{font-style:normal;font-size:.95rem}
.phone__netL{display:block;margin-top:.25rem;font-size:.5625rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted)}
.phone__netB{display:flex;gap:.3125rem;justify-content:center;margin-top:.625rem}
.phone__netI{font-size:.5625rem;font-weight:800;padding:.25rem .4375rem;
  border-radius:7px;background:rgba(232,237,243,.07);color:var(--on-dark)}
.phone__netI--d{color:#5BD6A8}
.phone__netI--y{color:#FF8B7B}
.phone__netI--b{color:var(--on-dark-muted)}

/* konu bazli sutun grafigi */
.phone__bt{font-size:.5625rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-muted);padding-left:.125rem}
.phone__bars{display:flex;align-items:flex-end;gap:.3125rem;height:70px;flex:none}
.phone__bar{flex:1;min-width:0;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;height:100%;gap:.25rem}
.phone__bar i{display:block;width:100%;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,var(--saf-500),rgba(14,116,144,.85))}
.phone__bar em{font-style:normal;font-size:.4375rem;font-weight:700;
  color:var(--on-dark-muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}

/* alt not */
.phone__note{display:flex;align-items:center;gap:.375rem;padding:.5rem .5625rem;
  border-radius:10px;background:rgba(244,166,32,.1);
  border:1px solid rgba(244,166,32,.22);color:var(--saf-400)}
.phone__note span{font-size:.5625rem;font-weight:600;color:var(--on-dark)}
.phone__note b{font-weight:800;color:var(--saf-400)}

  0%,16%   {opacity:0;transform:scale(.4)}
  24%      {opacity:1;transform:scale(1.25)}
  30%,88%  {opacity:1;transform:scale(1)}

.phone__glow{position:absolute;inset:auto 0 -60px 0;height:180px;filter:blur(60px);
  background:radial-gradient(ellipse at center,rgba(244,166,32,.35),transparent 70%);
  pointer-events:none}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  /* Dar ekranda uc telefon okunacak boyutta kalmiyor: ortadaki tek basina
     kalsin, yandakiler cizilmesin. Karusel de durur, telefon ortada sabit. */
  .ph--l,.ph--r{display:none}
  .ph-olcu,.ph{width:min(280px,78%)}
  .phones{cursor:default}
  /* Dar ekranda karusel durur: hangi sirada olursa olsun ortadaki tek
     telefon ortalanmis ve tam boy kalir. */
  .ph--m,.ph--m[data-yer]{transform:translateX(-50%) scale(1) rotate(0deg);z-index:3}
  .ph--m .phone__veil{opacity:0}
}

/* ------------------------------------------------------------------ rwd --- */
@media (max-width:1024px){
  .hero__in{grid-template-columns:1fr}
  .shot{margin-top:1rem}
  .float--tl{left:-8px}
  .float--br{right:-4px}
  .cards,.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__top{grid-template-columns:1fr 1fr;gap:2rem}
}
/* Menu icindeki CTA yalnizca mobilde gorunur. */
.nav__cta{display:none}

/* Sekiz baglanti + giris + buton ~1180px istiyor; 860'ta gecildiginde
   900-1179px arasinda satir tasip sayfayi yana kaydiriyordu. Bu bloktaki
   kurallarin hepsi header'a ait, birlikte 1200'de geciyor. */
@media (max-width:1200px){
  /* Dar ekranda gosterge yer kapliyor, zaten parmakla kaydiriliyor. */
  .kaydir{display:none}
  .nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--navy-950);padding:1rem var(--pad) 1.75rem;gap:.25rem;margin:0;
    border-bottom:1px solid rgba(232,237,243,.1);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.22s}
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:.875rem 1rem;font-size:1rem}
  .burger{display:grid}
  .hdr__login{display:none}
  /* Isim satiri dar ekranda header'i tasitiyor; madalyon yeterli. */
  .hdr__me-txt{display:none}
  .hdr__me{padding:.25rem}
  .nav__cta{display:flex}
  .nav .btn{width:100%}
}
@media (max-width:640px){
  body{font-size:1rem}
  .cards,.quotes,.plans,.steps{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr}
  .btn{width:100%}
  /* Tam genislik kurali hero ve CTA butonlari icin. Header'daki buton da
     %100 olunca satir tasiyordu. */
  .hdr__cta .btn{width:auto}

  /* Mobil header: marka + buton + hamburger tek satirda sikismadan dursun.
     Uc parca da kucultulup aralari esitleniyor; ayni eylem menude de var. */
  .hdr__in{gap:.625rem;min-height:64px}
  .brand{gap:.5rem}
  /* Alt yazi gizlenince marka tek kelime kaliyor ve butonun yaninda cilis
     duruyordu; kucultulup birakildi, iki satir marka blogu dengeliyor. */
  .brand__sub{font-size:.5rem;letter-spacing:.13em}
  .brand__txt{line-height:1.15}
  .brand__mark{width:42px;height:42px;padding:5px;box-shadow:0 2px 8px rgba(2,19,31,.4)}
  .brand__name{font-size:.9375rem}
  .hdr__cta{gap:.5rem;margin-left:auto}
  .hdr__cta .btn{padding:.5625rem .875rem;font-size:.75rem;letter-spacing:-.01em;
    border-radius:var(--r-pill)}
  .hdr__cta .btn svg{display:none}
  .burger{width:38px;height:38px;border-radius:10px;
    background:rgba(232,237,243,.06);border-color:rgba(232,237,243,.16)}
  .burger span{width:16px}
  .nav{inset:64px 0 auto 0}
  .nav__cta{display:flex!important;margin-top:.75rem}
  .hero__cta,.cta__btns{flex-direction:column}
  .float{display:none}
  .orgs__more{margin-left:0}
}

/* 380px alti: buton daha da daraliyor ama header'da kaliyor — birincil
   eylemi tamamen gizlemek kayitla sonuclanan ziyareti dusuruyordu. */
@media (max-width:380px){
  .hdr__in{gap:.5rem}
  .hdr__cta .btn{padding:.5rem .6875rem;font-size:.6875rem}
  .brand__name{font-size:.875rem}
  .brand__sub{display:none}
}

/* Dar ekranda yanlardan giris kapatildi: gecis suresince olusan yatay kayma
   sayfayi birkac piksel saga kaydiriyordu. Duzen zaten tek sutuna dustugu
   icin dikey giris ayni etkiyi veriyor. */
@media (max-width:860px){
  .has-js .rise-l,.has-js .rise-r{transform:translateY(26px)}
  .has-js .rise-l.is-in,.has-js .rise-r.is-in{transform:none}
}

/* ==========================================================================
   Modern katman
   Mevcut tasarimin ve belirme sisteminin (.rise / is-in) ustune eklenen
   hareketler. Renkler degismedi. Hareket azaltilmissa JS hicbirini
   baslatmiyor; asagidaki gizleme kurallari da yalnizca JS'in koydugu
   siniflara bagli oldugu icin icerik her durumda gorunur kaliyor.
   ========================================================================== */

/* --- bolum basliklari kelime kelime ------------------------------------ */
.kl{display:inline-block}
.kl-hazir .kl{opacity:0;filter:blur(8px);transform:translateY(.45em);
  transition:opacity .6s var(--ease),filter .6s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--i) * 55ms)}
.kl-hazir.kl-in .kl{opacity:1;filter:none;transform:none}

/* --- sayaclar: sayarken genislik oynamasin ----------------------------- */
.sayac{font-variant-numeric:tabular-nums;display:inline-block;text-align:inherit}

/* --- imleci takip eden isik ve hafif egim (yalnizca fare ile) ---------- */
.isikli{isolation:isolate}
.isikli::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(244,166,32,.13),transparent 62%)}
.isikli:hover::before{opacity:1}
.section--dark .isikli::before,.hero .isikli::before{
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(244,166,32,.18),transparent 62%)}
.has-js .egik.is-in:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
  transition:transform .15s ease-out,box-shadow .3s,border-color .3s}

/* --- altin dugmede parlama --------------------------------------------- */
.btn--gold{position:relative;overflow:hidden;isolation:isolate}
.btn--gold::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-120%)}
.btn--gold:hover::after{transform:translateX(120%);transition:transform .75s var(--ease)}
/* Giris bolumundeki ana dugme ara ara kendiliginden parlasin */
.hk__s.is-on .hk__cta .btn--gold::after{animation:parilti 4.5s var(--ease) 1.4s infinite}
@keyframes parilti{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* --- telefonda kart yiginlari yerine kaydirilan seritler --------------- */
.kaydirma-noktalari{display:none}
@media (max-width:640px){
  .cards,.facts,.plans,.ned{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:.875rem;margin-inline:calc(var(--pad) * -1);
    padding:1.25rem var(--pad) 1rem;scroll-padding-inline:var(--pad);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cards::-webkit-scrollbar,.facts::-webkit-scrollbar,.plans::-webkit-scrollbar,.ned::-webkit-scrollbar{display:none}
  .cards>*,.facts>*,.ned>*{flex:0 0 82%;scroll-snap-align:start}
  .plans>*{flex:0 0 88%;scroll-snap-align:center}

  .kaydirma-noktalari{display:flex;justify-content:center;gap:.4rem;margin-top:.25rem}
  .kaydirma-noktalari i{width:7px;height:7px;border-radius:999px;background:currentColor;opacity:.22;
    transition:width .3s var(--ease),opacity .3s}
  .kaydirma-noktalari i.is-on{width:22px;opacity:.9;color:var(--saf-500)}
}

@media (prefers-reduced-motion:reduce){
  .btn--gold::after,.hk__s.is-on .hk__cta .btn--gold::after{animation:none;transition:none}
}