/* ==========================================================================
   Asist Saha — temel.css (TASARIM-SPEC §2, §4.0). Sahibi: P1b.
   Reset · tipografi · düzen · bileşenler (§2.8) · üst çubuk · dock · yükleme ·
   footer · JS'siz durumlar. Bölüme özel stiller bölüm paketlerinin CSS'inde.

   Kurallar (değiştirmeden önce oku):
   - Yalnız transform ve opacity ANİMASYONU. Renk/opaklık küçük durum geçişleri
     (200ms) serbest (§2.6). Gölge animasyonu, blur animasyonu YOK.
   - Başlangıçtaki gizli durumlar CSS'te DEĞİL, JS'te (gsap.set) verilir.
   - Azalt modu = html.hareket-azalt (head betiği ekler) + JS'siz durum için
     @media (prefers-reduced-motion: reduce). İkisi de dosyanın sonunda.
   - Renk anlamları §2.2: yeşil yalnız monitör + doğru, altın yalnız premium +
     sezon, mavi (--siren-mavi) arayüzde yok (tek istisna: telefon kenar ışığı,
     §2.8 açıkça istiyor).
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--zemin);
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol[class], ul[class] { list-style: none; padding: 0; }
img, picture, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }
::selection { background: rgba(255, 23, 68, .38); color: #fff; }

/* ---------- 2. Gövde ve zemin (§2.1) ---------- */
body {
  min-height: 100vh; min-height: 100svh;
  font: 400 var(--t-govde) / 1.55 var(--font-govde);
  font-synthesis-weight: none; font-synthesis-style: none;
  color: var(--yazi);
  background:
    radial-gradient(120% 70% at 8% 0%, rgba(58,15,22,.9), transparent 60%),
    radial-gradient(80% 50% at 50% 38%, rgba(139,0,0,.10), transparent 70%),
    var(--zemin);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: hidden;
}
@supports (overflow-x: clip) { body { overflow-x: clip; } }

/* Gren (§2.5): statik 96px gürültü, 4 gri düzey, 2,3 KB PNG. Animasyonsuz.
   C kademesinde ve prefers-reduced-data'da kapalı. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-icerik);
  pointer-events: none; opacity: .04;
  background-image: url("data:image/png;base64,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");
  background-size: 96px 96px;
}
html.kademe-c body::after { display: none; }
@media (prefers-reduced-data: reduce) { body::after { display: none; } }

/* Katmanlar (§2.7) */
main, .alt { position: relative; z-index: var(--z-icerik); }
main { display: block; }
.sahne {                              /* #sahne canvas (§5.6); çizimi sahne.js yapar */
  position: fixed; inset: 0; z-index: var(--z-sahne);
  width: 100vw; height: 100vh; height: 100lvh;
  pointer-events: none;
}
html.hareket-azalt .sahne { display: none; }

/* Odak (§7.2) */
:focus-visible { outline: 3px solid var(--odak); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- 3. Tipografi (§2.3) ---------- */
.baslik-dev, .baslik-2, .dev-sayi {
  font-family: var(--font-baslik); font-weight: 900; font-stretch: 75%;
  font-style: normal; font-variant-numeric: lining-nums;
  text-wrap: balance;
}
.baslik-dev { font-size: var(--t-dev);      line-height: .86; letter-spacing: -.02em; }
.baslik-2   { font-size: var(--t-2);        line-height: .9;  letter-spacing: -.015em; }
.dev-sayi   { font-size: var(--t-dev-sayi); line-height: .8;  letter-spacing: -.03em; }
.satir { display: block; }

/* Serif vurgu: başlığın 900 ağırlığını MİRAS ALMAZ (Instrument Serif'in
   yalnız 400 italiği var; sahte kalınlık üretilmesin). Küçük harf kalır. */
.serif-vurgu {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-stretch: 100%; letter-spacing: -.01em; text-transform: none;
  font-synthesis: none;
}

.baslik-3 {
  font-family: var(--font-govde); font-weight: 700; font-stretch: 100%;
  font-size: var(--t-3); line-height: 1.2; letter-spacing: -.01em;
  text-wrap: balance;
}
.giris-metni {
  font-size: var(--t-giris); line-height: 1.5; color: var(--yazi-2);
  max-width: var(--olcu); text-wrap: pretty;
}
.giris-metni strong, .giris-metni b { color: var(--yazi); font-weight: 600; }
p { text-wrap: pretty; }

/* Uzun mono notlar (dipnot, künye cümlesi) büyük harfle okunmuyor: cümle düzeninde kalır. */
.mono.mono--cumle { text-transform: none; letter-spacing: .02em; line-height: 1.5; }
.mono {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--t-mono); line-height: 1.4; letter-spacing: .14em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
/* HUD rakamları: monitör satırı ve üst çubuk nabzı */
.monitor__hud, .ust__nabiz b {
  font-family: var(--font-mono); font-weight: 700;
  font-size: var(--t-mono-hud); letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

/* ---------- 4. Düzen (§2.4) ---------- */
.kapsayici { width: min(100% - 2 * var(--kenar), var(--genislik)); margin-inline: auto; }
.bolum { position: relative; padding-block: var(--bolum-dikey); }
.bolum, .capa, main [id] { scroll-margin-top: calc(var(--ust-yukseklik) + 8px); }
.capa { display: block; height: 0; }

/* ---------- 5. Simgeler ---------- */
.ikon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: currentColor; vertical-align: -.2em; display: inline-block;
}

/* ---------- 6. Düğmeler (§2.8) ---------- */
.dugme {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: var(--r-hap);
  border: 1px solid transparent;
  font: 700 1rem/1 var(--font-govde); font-stretch: 100%; letter-spacing: .005em;
  color: var(--yazi); text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition:
    transform var(--s-bas) var(--e-standart),
    background-color var(--s-kisa) var(--e-standart),
    border-color var(--s-kisa) var(--e-standart),
    color var(--s-kisa) var(--e-standart);
}
.dugme .ikon { width: 20px; height: 20px; vertical-align: 0; }
.dugme:active { transform: scale(.97); }
.dugme:disabled, .dugme[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Birincil: kırmızı dolgu + üstten ışık + kırmızı parıltı (§2.5: parıltı
   yalnız burada ve monitörde). Üst ışık bir gradyan katmanıdır; zemin rengi
   değişince (hover/basılı) o da doğal olarak koyulaşır. */
.dugme--ana {
  background-color: var(--kirmizi-dolgu);
  background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 52%);
  color: #fff;
  border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18), var(--parilti-kirmizi);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
@media (hover: hover) { .dugme--ana:hover { background-color: #E01E26; } }
.dugme--ana:active { background-color: var(--kirmizi-basili); }

.dugme--ikincil {
  background-color: rgba(255,255,255,.015);
  border-color: rgba(255,255,255,.18);
  color: var(--yazi);
  box-shadow: var(--kenar-isik);
}
@media (hover: hover) {
  .dugme--ikincil:hover { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.30); }
}
.dugme--ikincil:active { background-color: rgba(255,255,255,.09); }

.dugme--metin {
  min-height: 44px; padding: 0 4px;
  background: none; color: var(--yazi-2);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(169,177,191,.45);
  transition: transform var(--s-bas) var(--e-standart), color var(--s-kisa) var(--e-standart),
    text-decoration-color var(--s-kisa) var(--e-standart);
}
@media (hover: hover) { .dugme--metin:hover { color: var(--yazi); text-decoration-color: currentColor; } }
.dugme--metin .ikon { width: 18px; height: 18px; }

.dugme--kucuk { min-height: 40px; padding: 0 16px; font-size: .9375rem; gap: 8px; }
.dugme--kucuk .ikon { width: 18px; height: 18px; }

@media (max-width: 767.98px) {
  .dugme--ana:not(.dugme--kucuk) { min-height: 56px; width: min(100%, 360px); }
}

/* ---------- 7. Mağaza grubu (§2.8, §6.8) ---------- */
.magaza-grup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
/* JS gelmeden (ve masaüstünde): iki mağaza düğmesi görünür, "ana" ve "diğer" gizli */
.magaza-grup .magaza-ana, .magaza-grup .magaza-diger { display: none; }
html.ios .magaza-grup .magaza-ana, html.android .magaza-grup .magaza-ana,
html.ios .magaza-grup .magaza-diger, html.android .magaza-grup .magaza-diger { display: inline-flex; }
html.ios .magaza-grup .magaza-play, html.ios .magaza-grup .magaza-appstore,
html.android .magaza-grup .magaza-play, html.android .magaza-grup .magaza-appstore { display: none; }
/* Renkli Play işareti kırmızı zeminde kaybolmasın: koyu bir yuvaya oturur */
.magaza-play .ikon {
  width: 28px; height: 28px; padding: 5px; margin-left: -8px;
  border-radius: 50%; background: rgba(6,7,10,.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.magaza-appstore .ikon { margin-left: -2px; }
@media (max-width: 767.98px) {
  .magaza-grup { flex-direction: column; align-items: flex-start; gap: 10px; }
  .magaza-grup .magaza-diger { width: min(100%, 360px); justify-content: center; }
}
.magaza-grup--buyuk .dugme--ana { min-height: 60px; padding-inline: 28px; font-size: 1.0625rem; }
@media (max-width: 767.98px) { .magaza-grup--buyuk .dugme--ana { min-height: 60px; } }

/* ---------- 8. Hap, çip, rozet (§2.8) ---------- */
.hap {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--r-hap);
  background-color: var(--kirmizi-dolgu);
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(255,23,68,.35);
  color: #fff; font: 700 .8125rem/1 var(--font-govde); font-stretch: 100%;
  letter-spacing: .06em; white-space: nowrap;
}
.hap__nokta {
  width: 6px; height: 6px; border-radius: 50%; background: #fff; flex: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
  animation: hapNabiz 1.2s ease-in-out infinite alternate;
}
@keyframes hapNabiz { from { opacity: 1; } to { opacity: .4; } }

.cip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--cizgi); border-radius: var(--r-hap);
  background: rgba(255,255,255,.02);
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-mono);
  line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--yazi-2); white-space: nowrap;
}
.cip .ikon { width: 14px; height: 14px; vertical-align: 0; }
.cip--skkm { color: var(--kirmizi); border-color: rgba(255,23,68,.45); background: rgba(255,23,68,.06); }
.cip--ek2  { color: var(--yazi-2); border-color: var(--cizgi); }
.cip-satir { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }

.rozet {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  padding: 5px 9px; border-radius: 6px; border: 1px solid transparent;
  font: 700 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
.rozet--premium {
  color: var(--altin); border-color: rgba(255,197,61,.5); background: rgba(255,197,61,.08);
  box-shadow: inset 0 1px 0 rgba(255,197,61,.12);
}
.rozet--ucretsiz { color: var(--yazi-2); border-color: var(--cizgi); }
.rozet--kismen { color: var(--altin); border: 1px dashed rgba(255,197,61,.5); }
/* PREMIUM damgası (§2.6): 450ms, back.out(1.6) karşılığı, BİR KEZ.
   Tetik: JS rozete .rozet--damga ekler (görünüme girince). */
.rozet--damga { animation: damga 450ms cubic-bezier(.3, 1.6, .55, 1) both; }
@keyframes damga {
  from { transform: rotate(-7deg) scale(1.4); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: rotate(0) scale(1); opacity: 1; }
}

/* ---------- 9. Kart (§2.8, §2.5) ---------- */
.kart {
  position: relative;
  background:
    radial-gradient(70% 56px at 50% 0, rgba(255,23,68,.07), transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 40%),
    var(--yuzey);
  border: 1px solid var(--cizgi-yumusak); border-radius: var(--r-3);
  padding: clamp(20px, 4vw, 32px);
  box-shadow: var(--kenar-isik);
}
/* Kırmızı yansıma: "tek ışık kaynağı iz". Kart başına bir tane. */
.kart::before {
  content: ""; position: absolute; top: -1px; left: var(--r-3); right: var(--r-3); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,23,68,.5), transparent);
  pointer-events: none;
}

/* ---------- 10. Bölüm etiketi ---------- */
.bolum-etiket {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-mono);
  line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: var(--yazi-3);
  margin-bottom: var(--b-5);
}
.bolum-etiket::before { content: ""; width: 24px; height: 1px; flex: none; background: var(--kirmizi); }

/* ---------- 11. Telefon (§2.8) ---------- */
.telefon {
  position: relative; margin: 0;
  width: clamp(220px, 62vw, 300px); aspect-ratio: 9 / 20;
  padding: 10px; border-radius: var(--r-telefon); background: #0B0D12;
  box-shadow: inset 0 0 0 1.5px #2A2F3A, var(--golge-telefon), 0 0 0 1px rgba(255,255,255,.04);
  transform-style: preserve-3d; transition: transform var(--s-uzun) var(--e-cikis);
}
/* Statik kenar ışığı: kırmızı + mavi, animasyonsuz, 1,5px halka */
.telefon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 200deg at 50% 50%,
    transparent 0turn, rgba(255,23,68,.08) .06turn, rgba(255,23,68,.55) .12turn,
    rgba(255,23,68,.08) .2turn, transparent .3turn,
    transparent .55turn, rgba(47,107,255,.06) .6turn, rgba(47,107,255,.38) .66turn,
    rgba(47,107,255,.06) .74turn, transparent .82turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.telefon__ekran {
  position: relative; border-radius: var(--r-ekran); overflow: hidden;
  height: 100%; background: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,.9);
}
.telefon__ekran img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Cam parlaması: statik, çok hafif */
.telefon__ekran::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%);
}
/* Görsel yüklenmedi: telefon çekilir, kart tipografik varyanta düşer (§4.6) */
.telefon--yok { display: none; }

/* ---------- 12. Monitör çerçevesi (§2.8) ---------- */
.monitor {
  position: relative; overflow: hidden;
  background: var(--monitor-zemin);
  border: 1px solid var(--monitor-cerceve); border-radius: var(--r-2);
  box-shadow: var(--parilti-monitor), inset 0 1px 0 rgba(0,230,118,.08);
}
.monitor__izgara, .monitor__iz {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.monitor__hud {
  position: absolute; top: 10px; left: 14px; right: 14px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
  color: var(--monitor); opacity: .85; line-height: 1.3;
  pointer-events: none;
}
/* Tüp kenarı: statik vinyet (canvas'ların üstünde, etkileşimsiz) */
.monitor::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 18%),
    radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(0,0,0,.45) 100%);
}

/* ---------- 13. Cevap düğmesi (§2.8, §2.6) ---------- */
.secenek {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 56px; padding: 14px 16px;
  text-align: left; border-radius: var(--r-2);
  background: var(--yuzey-2); border: 1px solid var(--cizgi);
  box-shadow: var(--kenar-isik);
  font: 500 1.0625rem/1.4 var(--font-govde); font-stretch: 100%; color: var(--yazi);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition:
    transform var(--s-bas) var(--e-standart),
    background-color var(--s-kisa) var(--e-standart),
    border-color var(--s-kisa) var(--e-standart),
    opacity var(--s-kisa) var(--e-standart);
}
/* Doğru dolgusu: dokunulan noktadan yayılan daire (280ms, clip-path).
   JS dokunma noktasını --dokun-x / --dokun-y (px ya da %) olarak verebilir;
   verilmezse merkezden yayılır. */
.secenek::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(0,230,118,.12);
  clip-path: circle(0 at var(--dokun-x, 50%) var(--dokun-y, 50%));
  transition: clip-path 280ms var(--e-cikis);
}
.secenek__harf {
  flex: none; display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--cizgi); background: rgba(255,255,255,.03);
  font: 700 .8125rem/1 var(--font-mono); letter-spacing: 0; color: var(--yazi-2);
  transition: background-color var(--s-kisa) var(--e-standart), color var(--s-kisa) var(--e-standart),
    border-color var(--s-kisa) var(--e-standart);
}
.secenek__metin { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.secenek__ikon {
  flex: none; width: 22px; height: 22px; vertical-align: 0;
  opacity: 0; transform: scale(.6);
  transition: opacity var(--s-kisa) var(--e-standart), transform var(--s-orta) var(--e-cikis);
}
@media (hover: hover) {
  .secenek:not(:disabled):hover { background-color: var(--yuzey-3); border-color: rgba(255,255,255,.16); }
  .secenek:not(:disabled):hover .secenek__harf { color: var(--yazi); border-color: rgba(255,255,255,.2); }
}
.secenek:not(:disabled):active { transform: scale(.985); }
.secenek:disabled { cursor: default; }

.secenek--dogru { border-color: var(--monitor); }
.secenek--dogru::before { clip-path: circle(150% at var(--dokun-x, 50%) var(--dokun-y, 50%)); }
.secenek--dogru .secenek__harf { background: var(--monitor); border-color: var(--monitor); color: #03130A; }
.secenek--dogru .secenek__ikon { opacity: 1; transform: none; color: var(--monitor); }

.secenek--yanlis { border-color: var(--yanlis); background-color: rgba(255,107,107,.10); animation: sarsinti 240ms linear; }
.secenek--yanlis .secenek__harf { background: var(--yanlis); border-color: var(--yanlis); color: #1A0507; }
.secenek--yanlis .secenek__ikon { opacity: 1; transform: none; color: var(--yanlis); }
@keyframes sarsinti {
  0%, 100% { transform: translateX(0); }
  16% { transform: translateX(-3px); } 33% { transform: translateX(3px); }
  50% { transform: translateX(-3px); } 66% { transform: translateX(3px); }
  83% { transform: translateX(-2px); }
}
.secenek--soluk { opacity: .5; }

/* ---------- 14. Toast (§2.8) ----------
   Boşken görünmez; metin yazılınca kendiliğinden girer. Çıkışı yumuşatmak
   için JS önce .bildirim--cikis ekleyip ~200ms sonra metni boşaltabilir. */
.bildirim {
  position: fixed; z-index: var(--z-bildirim);
  left: 50%; bottom: calc(var(--dock-yukseklik) + 24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(92vw, 440px); width: max-content;
  padding: 10px 16px; border-radius: var(--r-hap);
  background: var(--yuzey-3); border: 1px solid var(--cizgi);
  box-shadow: var(--kenar-isik), 0 16px 40px -16px rgba(0,0,0,.9);
  color: var(--yazi); font-size: .9375rem; line-height: 1.35; font-weight: 500;
  text-align: center; pointer-events: none;
  animation: bildirimGir var(--s-orta) var(--e-cikis) both;
}
.bildirim:empty { visibility: hidden; opacity: 0; animation: none; }
.bildirim--cikis { animation: bildirimCik var(--s-kisa) var(--e-standart) both; }
@keyframes bildirimGir { from { opacity: 0; transform: translate(-50%, 10px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes bildirimCik { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, 6px); } }

/* ---------- 15. Yardımcılar ---------- */
.gizli {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 16. İçeriğe geç ---------- */
.atla {
  position: fixed; z-index: var(--z-atla);
  top: calc(8px + env(safe-area-inset-top)); left: 8px;
  padding: 12px 18px; border-radius: var(--r-hap);
  background: var(--yazi); color: var(--zemin);
  font-weight: 700; text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--s-kisa) var(--e-cikis);
}
.atla:focus, .atla:focus-visible { transform: none; }

/* ---------- 17. Üst çubuk (§4.0) ----------
   Zemin bir ::before katmanıdır; geçişi yalnız opaklıkla yapılır.
   Varsayılan OPAK (JS'siz ve hero sonrası). Hero'nun ilk %60'ında JS
   .ust--seffaf ekler. Blur yalnız A kademesinde (§2.5). */
.ust {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-ust);
  height: calc(var(--ust-yukseklik) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--kenar), env(safe-area-inset-right)) 0 max(var(--kenar), env(safe-area-inset-left));
  display: flex; align-items: center; gap: 14px;
}
.ust::before, .ust::after { content: ""; position: absolute; pointer-events: none; transition: opacity var(--s-orta) var(--e-standart); }
.ust::before { inset: 0; z-index: -1; background: rgba(6,7,10,.92); border-bottom: 1px solid var(--cizgi-yumusak); }
.ust::after { left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 8%, rgba(255,23,68,.32) 50%, transparent 92%); }
.ust--seffaf::before, .ust--seffaf::after { opacity: 0; }
html.kademe-a .ust::before {
  background: rgba(6,7,10,.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}

.ust__marka {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  min-height: 44px; text-decoration: none; color: var(--yazi);
  font: 900 1.0625rem/1 var(--font-baslik); font-stretch: 75%; letter-spacing: .05em;
}
.ust__marka img { width: 28px; height: 28px; border-radius: 8px; }
.ust__bolum {
  flex: 1 1 auto; min-width: 0; display: block;
  color: var(--yazi-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .1em;
  transition: opacity var(--s-kisa) var(--e-standart);
}
.ust__bolum::before { content: ""; display: inline-block; vertical-align: -2px; width: 1px; height: 14px; margin-right: 12px; background: var(--cizgi); }
.ust__nabiz {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  margin-left: auto; color: var(--yazi-2); letter-spacing: .06em;
}
.ust__nabiz .ikon {
  width: 15px; height: 15px; color: var(--kirmizi); vertical-align: 0;
  transform-origin: 50% 55%;
  animation: kalpAtim var(--nabiz-sure, .8s) var(--e-standart) infinite;
}
.ust__nabiz b { color: var(--yazi); min-width: 3ch; text-align: right; }
@keyframes kalpAtim { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } }
.ust__indir { display: none; flex: none; }
@media (min-width: 1024px) { .ust__indir { display: inline-flex; } .ust { gap: 20px; } }
/* JS'siz: bölüm etiketi hiç güncellenmez, yerine İndir düğmesi görünür (dock da yok) */
html.no-js .ust__bolum { visibility: hidden; }
html.no-js .ust__indir { display: inline-flex; }
@media (max-width: 379.98px) {
  .ust { gap: 10px; }
  .ust__marka { font-size: .9375rem; gap: 8px; }
  .ust__bolum::before { display: none; }
}
/* Sade üst çubuk (gizlilik sayfası, §3.4): yalnız marka + İndir */
.ust--sade { justify-content: space-between; }

/* ---------- 18. Dock (§4.0) ----------
   Mobil/tablet (<1024): tam genişlik alt çubuk. Masaüstü: ortada yüzen hap.
   Görünürlük: JS `hidden`'ı kaldırır → 320ms yukarı kayarak girer.
   Oyun/#indir sırasında JS ya `hidden` verir ya da .dock--gizli ekler
   (kayarak çıkar). Etkin segment: .dock__seg--etkin; geçilenler: .dock__seg--gecti. */
.dock {
  position: fixed; z-index: var(--z-dock);
  left: 0; right: 0; bottom: 0;
  height: calc(var(--dock-yukseklik) + env(safe-area-inset-bottom));
  padding: 0 max(var(--kenar), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(calc(var(--kenar) - 6px), env(safe-area-inset-left));
  display: flex; align-items: center; gap: 12px;
  background: rgba(10,12,16,.94); border-top: 1px solid var(--cizgi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  animation: dockGir var(--s-orta) var(--e-cikis) backwards;
  transition: transform var(--s-orta) var(--e-cikis), opacity var(--s-kisa) var(--e-standart), visibility 0s;
}
@keyframes dockGir { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
.dock--gizli {
  transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform var(--s-orta) var(--e-gecis), opacity var(--s-orta) var(--e-standart), visibility 0s var(--s-orta);
}
.dock__harita {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 6px; border-radius: 12px;
  color: var(--yazi-3);
  transition: background-color var(--s-kisa) var(--e-standart);
}
@media (hover: hover) { .dock__harita:hover { background-color: rgba(255,255,255,.04); } }
.dock__harita[aria-expanded="true"] { background-color: rgba(255,255,255,.05); }
/* Açılır olduğunu söyleyen küçük ok */
.dock__harita::after {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px;
  border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: translateY(2px) rotate(45deg);
  transition: transform var(--s-orta) var(--e-cikis);
}
.dock__harita[aria-expanded="true"]::after { transform: translateY(-2px) rotate(225deg); }
.dock__iz { flex: 0 1 auto; min-width: 0; width: auto; height: 28px; aspect-ratio: 234 / 28; overflow: visible; }
.dock__harita { justify-content: space-between; }
.dock__iz path, .dock__seg {
  fill: none; stroke: var(--yazi-3); stroke-width: 1.5; opacity: .5;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  transition: stroke var(--s-kisa) var(--e-standart), opacity var(--s-kisa) var(--e-standart);
}
.dock__iz .dock__seg--gecti { opacity: .8; }
.dock__iz .dock__seg--etkin { stroke: var(--kirmizi); stroke-width: 2; opacity: 1; }
.dock__imlec { fill: var(--kirmizi-sicak); stroke: none; }
.dock > .dugme { flex: none; }

@media (min-width: 1024px) {
  .dock {
    left: 0; right: 0; bottom: 20px; margin-inline: auto;
    width: min(520px, 100% - 2 * var(--kenar)); height: var(--dock-yukseklik);
    padding: 0 7px 0 12px;
    border: 1px solid var(--cizgi); border-radius: var(--r-hap);
    background: rgba(12,14,19,.94);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 44px -18px rgba(0,0,0,.85);
  }
  .dock__harita { border-radius: var(--r-hap); padding: 0 14px 0 16px; }
  .dock__iz { height: 30px; }
  .bildirim { bottom: calc(20px + var(--dock-yukseklik) + 20px); }
  .dock__liste a { min-height: 40px; }
}

/* Bölüm listesi: dock'un üstünde açılan panel */
.dock__liste {
  position: absolute; bottom: calc(100% + 10px);
  left: var(--kenar); right: var(--kenar);
  max-height: min(70svh, 560px); overflow: auto; overscroll-behavior: contain;
  padding: 8px; border-radius: var(--r-3);
  background: var(--yuzey-2); border: 1px solid var(--cizgi);
  box-shadow: var(--kenar-isik), 0 24px 60px -20px rgba(0,0,0,.9);
  transform-origin: 50% 100%;
  animation: listeGir var(--s-orta) var(--e-cikis) both;
}
@keyframes listeGir { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) { .dock__liste { left: 0; right: 0; } }
.dock__liste ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dock__liste a {
  display: flex; align-items: center; gap: 14px;
  min-height: 46px; padding: 0 14px; border-radius: 10px;
  color: var(--yazi-2); text-decoration: none; font-weight: 500;
  transition: background-color var(--s-kisa) var(--e-standart), color var(--s-kisa) var(--e-standart);
}
.dock__liste a .mono { color: var(--yazi-3); min-width: 2ch; transition: color var(--s-kisa) var(--e-standart); }
@media (hover: hover) { .dock__liste a:hover { background: var(--yuzey-3); color: var(--yazi); } }
.dock__liste a:focus-visible { outline-offset: -2px; }
.dock__liste a[aria-current] { color: var(--yazi); background: rgba(255,23,68,.07); box-shadow: inset 2px 0 0 var(--kirmizi); }
.dock__liste a[aria-current] .mono { color: var(--kirmizi); }

/* ---------- 19. Yükleme ekranı (§4.0) ----------
   display'e DOKUNULMAZ: head'deki kritik CSS yönetir (.yukleme-var .yukleme).
   Çıkışı P6'nın JS'i yapar (translateY -100%, 500ms). */
.yukleme {
  position: fixed; inset: 0; z-index: var(--z-yukleme);
  place-items: center; align-content: center; gap: 22px;
  background:
    radial-gradient(60% 40% at 50% 46%, rgba(58,15,22,.55), transparent 70%),
    #000;
  pointer-events: none;
}
.yukleme__iz { width: min(320px, 76vw); height: auto; overflow: visible; }
.yukleme__iz path {
  fill: none; stroke: var(--kirmizi); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;   /* path uzunluğu < 1000 birim; pathLength VERİLMEZ */
  filter: drop-shadow(0 0 5px rgba(255,23,68,.55));
  animation: ykCiz 1s var(--e-gecis) .08s forwards;
}
@keyframes ykCiz { to { stroke-dashoffset: 0; } }
.yukleme__yazi { color: var(--yazi-3); letter-spacing: .28em; animation: ykYazi 600ms var(--e-standart) .25s both; }
@keyframes ykYazi { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 20. Footer (§4.0) ---------- */
.alt {
  padding-top: var(--b-8);
  padding-bottom: calc(var(--b-7) + var(--dock-yukseklik) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cizgi-yumusak);
  background: linear-gradient(180deg, rgba(14,17,22,.55), rgba(6,7,10,0) 70%);
  font-size: .9375rem;
}
.alt::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: min(560px, 80%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,23,68,.45), transparent);
}
@media (min-width: 1024px) { .alt { padding-bottom: calc(var(--b-7) + var(--dock-yukseklik) + 20px); } }
html.no-js .alt { padding-bottom: calc(var(--b-7) + env(safe-area-inset-bottom)); }
.alt__ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-5) var(--b-6); }
.alt__marka {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--yazi); text-decoration: none;
  font: 900 1.375rem/1 var(--font-baslik); font-stretch: 75%; letter-spacing: .02em;
}
.alt__marka img { width: 32px; height: 32px; border-radius: 9px; }
.alt__linkler { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; }
.alt__linkler a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--yazi-2); text-decoration: none;
  transition: color var(--s-kisa) var(--e-standart);
}
.alt__linkler a .ikon { width: 18px; height: 18px; vertical-align: 0; }
@media (hover: hover) { .alt__linkler a:hover { color: var(--yazi); } }
.alt__uyari { margin-top: var(--b-6); max-width: var(--olcu); color: var(--yazi-2); line-height: 1.6; }
.alt__uyari strong { color: var(--yazi); }
.alt__kunye { margin-top: var(--b-5); color: var(--yazi-3); text-transform: none; letter-spacing: .06em; } /* e-posta büyütülmesin (İ) */
.alt__marka-notu { margin-top: var(--b-2); color: var(--yazi-2); font-size: .8125rem; opacity: .8; }

/* ---------- 21. Giriş sayıları: statik liste (§4.1, yalnız temel davranış) ----------
   JS'siz, azalt modunda ve GSAP yokken metnin altında 3 sütunlu (mobilde alt
   alta) liste. Özgüllük düşük tutuldu — giris.css (sonra yüklenir) pin
   koreografisinde bunları aynı ya da daha yüksek özgüllükle ezer. */
.giris__sayilar {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-5);
  list-style: none; padding: 0; margin-top: var(--b-7);
}
.giris__sayi {
  display: grid; gap: var(--b-2); align-content: start; min-width: 0;
  padding-top: var(--b-4); border-top: 1px solid var(--cizgi);
}
.giris__sayilar .giris__deger {
  font-size: clamp(3.5rem, 17vw, 6.5rem); line-height: .82; color: var(--yazi);
}
.giris__aciklama { color: var(--yazi-2); font-size: var(--t-kucuk); line-height: 1.45; max-width: 34ch; }
.giris__aciklama b { display: block; margin-bottom: 2px; color: var(--yazi); font-size: var(--t-govde); font-weight: 700; }
@media (min-width: 768px) {
  .giris__sayilar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b-6); }
  .giris__sayilar .giris__deger { font-size: clamp(3.5rem, 7.2vw, 6.5rem); }
}

/* ---------- 22. Azalt modu (§2.6) ----------
   html.hareket-azalt: head betiği sistem ayarında da ekler.
   @media bloğu JS kapalıyken aynı şeyi yapar. Oyunlar çalışır; 900ms bekleme
   JS'tedir, burada dokunulmaz. Sarsıntı ve dolgu animasyonu yok. */
html.hareket-azalt .hap__nokta,
html.hareket-azalt .ust__nabiz .ikon,
html.hareket-azalt .rozet--damga,
html.hareket-azalt .secenek--yanlis,
html.hareket-azalt .yukleme__iz path,
html.hareket-azalt .yukleme__yazi { animation: none; }
html.hareket-azalt .yukleme__iz path { stroke-dashoffset: 0; }
html.hareket-azalt .dock,
html.hareket-azalt .dock__liste,
html.hareket-azalt .bildirim:not(:empty) { animation: fadeAzalt 150ms linear both; }
html.hareket-azalt .bildirim--cikis { animation: fadeAzaltCik 150ms linear both; }
html.hareket-azalt .dock--gizli { transform: none; transition: opacity 150ms linear, visibility 0s 150ms; }
html.hareket-azalt .secenek::before { transition: none; }
html.hareket-azalt .dugme:active,
html.hareket-azalt .secenek:active { transform: none; }
html.hareket-azalt .telefon { transition: none; }
html.hareket-azalt .atla { transition: none; }
@keyframes fadeAzalt { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeAzaltCik { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hap__nokta, .ust__nabiz .ikon, .rozet--damga, .secenek--yanlis,
  .yukleme__iz path, .yukleme__yazi { animation: none; }
  .yukleme__iz path { stroke-dashoffset: 0; }
  .dock, .dock__liste, .bildirim:not(:empty) { animation: fadeAzalt 150ms linear both; }
  .bildirim--cikis { animation: fadeAzaltCik 150ms linear both; }
  .dock--gizli { transform: none; transition: opacity 150ms linear, visibility 0s 150ms; }
  .secenek::before, .telefon, .atla { transition: none; }
  .dugme:active, .secenek:active { transform: none; }
}

/* JS'siz görünüm (entegrasyon): yalnız JS ile çalışan düğmeler gizlenir; yerlerinde <noscript>
   notu durur. Ölü bir kırmızı düğme "bozuk" görünür. */
html.no-js [data-tur-basla],
html.no-js [data-rt-basla],
html.no-js [data-alg-tumu] { display: none; }