/* ════════════════════════════════════════════════════════════════════════════
   OCTA · AURORA SITE LAYER (1 Eyl 2026)
   Gen ekranının dili (mürekkep odası: gece zemini · cyan↔mor + bakır · cam
   yüzeyler · yay eğrileri · kelime-vurgusu · karadelik halka) tüm sayfalara.
   Fare bulutu YOK (yalnız gen'de). İçerik değişmez; yalnız yüzey ve hareket.
   aurora.css ile birlikte yüklenir; buradaki her şey onun tokenlarını taşır.
   ════════════════════════════════════════════════════════════════════════════ */

:root, #gen{
  --void:  oklch(11% 0.028 268);
  --ink:   oklch(97% 0.008 250);
  --ink2:  oklch(79% 0.020 255);
  --ink3:  oklch(58% 0.030 258);
  --ink4:  oklch(44% 0.035 262);
  --cyan:  oklch(87% 0.130 205);
  --blue:  oklch(65% 0.200 262);
  --mor:   oklch(63% 0.210 295);
  --amber: oklch(80% 0.130 72);
  --ember: oklch(68% 0.150 48);
  --spring: linear(0,.006,.026 2.4%,.104 5.5%,.223 8.6%,.552 15.6%,.717 19.2%,
            .842 22.9%,.929 26.8%,.983 31%,1.014 35.6%,1.027 40.9%,1.026 46.4%,
            1.015 55.2%,1.004 68.8%,1);
  --glide: cubic-bezier(.16,1,.3,1);
  --mono: ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace;
  --pad: clamp(20px,4vw,64px);
  --wrap: min(1180px, calc(100% - 2 * var(--pad)));
  --glass: oklch(16% .045 268 / .72);
  --glass2: oklch(20% .05 270 / .55);
  --hair: oklch(60% .10 275 / .13);
}

/* ─────────── SAYFA KABUĞU ─────────── */
body.aur{ min-height:100dvh; overflow-x:hidden; overflow-y:auto; background:var(--void); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased }
body.aur.lock{ overflow:hidden }
#bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none }
.page{ position:relative; z-index:2 }
.wrap{ width:var(--wrap); margin:0 auto }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
:focus-visible{ outline:2px solid oklch(80% .13 220 / .7); outline-offset:3px; border-radius:6px }
::selection{ background:oklch(63% .21 295 / .35); color:#fff }

/* ─────────── MAST — üst ada (içerik sayfaları) ─────────── */
.mast{
  position:fixed; top:clamp(14px,2.2vh,22px); left:50%; z-index:60; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; height:50px; padding:0 8px 0 10px;
  width:max-content; max-width:calc(100% - 28px); border-radius:999px;
  background:
    radial-gradient(120% 180% at 20% 0%, oklch(30% .10 280 / .5), transparent 60%),
    var(--glass);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 oklch(85% .08 260 / .16), inset 0 -1px 0 oklch(10% .02 260 / .6),
    0 0 0 1px var(--hair), 0 18px 50px -18px oklch(5% .02 270 / .9), 0 0 34px -6px oklch(63% .21 295 / .2);
  transition: box-shadow .5s var(--glide), transform .6s var(--spring);
}
.mast .brand{ display:flex; align-items:center; gap:10px; padding:0 12px 0 4px; text-decoration:none; color:var(--ink) }
.mast .brand .korb{
  width:24px; height:24px; border-radius:50%; flex:none;
  background: conic-gradient(from 205deg, var(--cyan), var(--blue) 40%, var(--mor) 76%, var(--cyan));
  mask: radial-gradient(circle at 56% 44%, transparent 39%, #000 47%);
  -webkit-mask: radial-gradient(circle at 56% 44%, transparent 39%, #000 47%);
  filter: drop-shadow(0 0 7px oklch(65% .20 262 / .55));
  animation: wickBreathe 4.5s ease-in-out infinite;
}
.mast .brand b{ font:600 11px/1 var(--mono); letter-spacing:.28em; text-transform:uppercase }
.mast .links{ display:flex; align-items:center; gap:2px }
.mast .links a{
  position:relative; padding:9px 12px; border-radius:999px; text-decoration:none;
  font:500 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink3);
  transition:color .35s var(--glide), background .35s var(--glide);
}
.mast .links a:hover{ color:var(--ink); background: oklch(60% .12 270 / .12) }
.mast .links a[aria-current]{ color:var(--cyan) }
.mast .cta{
  margin-left:6px; height:36px; padding:0 16px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font:600 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:oklch(16% .04 265);
  background: radial-gradient(110% 110% at 32% 22%, oklch(94% .07 220), transparent 58%),
              linear-gradient(140deg, var(--cyan), var(--blue) 52%, var(--mor));
  box-shadow: inset 0 1px 1px oklch(100% 0 0 / .5), 0 8px 22px -8px oklch(65% .20 262 / .7);
  transition: filter .4s var(--glide), transform .5s var(--spring);
}
.mast .cta:hover{ filter:brightness(1.07) saturate(1.1) }
.mast .cta:active{ transform:scale(.96) }
.mast .burger{ display:none; width:38px; height:38px; border:0; background:none; border-radius:12px; cursor:pointer;
  place-items:center; color:var(--ink2) }
.mast .burger i{ display:block; width:15px; height:1.5px; background:currentColor; border-radius:2px; margin:2.5px 0; transition:transform .4s var(--spring), opacity .3s }
body.menu .mast .burger i:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
body.menu .mast .burger i:nth-child(2){ opacity:0 }
body.menu .mast .burger i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }
.mmenu{ position:fixed; inset:0; z-index:58; display:none; flex-direction:column; justify-content:center; gap:4px; padding:0 28px;
  background: oklch(9% .03 268 / .86); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5) }
.mmenu a{ font:500 26px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif; letter-spacing:-.02em; padding:13px 0; color:var(--ink); text-decoration:none;
  border-bottom:1px solid oklch(60% .10 275 / .1); opacity:0; transform:translateY(10px) }
body.menu .mmenu{ display:flex }
body.menu .mmenu a{ animation: mmIn .6s var(--spring) both }
.mmenu a:nth-child(2){ animation-delay:.04s } .mmenu a:nth-child(3){ animation-delay:.08s }
.mmenu a:nth-child(4){ animation-delay:.12s } .mmenu a:nth-child(5){ animation-delay:.16s }
.mmenu a:nth-child(6){ animation-delay:.2s } .mmenu a:nth-child(7){ animation-delay:.24s }
@keyframes mmIn{ to{ opacity:1; transform:none } }

/* ─────────── DOCK — sayfa genelinde sabit (gen'deki absolute'un fixed kardeşi) ─────────── */
body.aur .dock{ position:fixed }

/* ─────────── TİPOGRAFİ REJİMLERİ ─────────── */
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font:500 8.5px/1 var(--mono); letter-spacing:.3em; text-transform:uppercase; color:var(--ink4) }
.eyebrow::before{ content:''; width:14px; height:1px; background:linear-gradient(90deg, currentColor, transparent) }
.eyebrow.c{ color:var(--cyan) } .eyebrow.m{ color:oklch(72% .16 295) } .eyebrow.a{ color:var(--amber) }
.h1{ font-size:clamp(34px,5.4vw,72px); line-height:1.02; letter-spacing:-.034em; font-weight:380; color:var(--ink); text-wrap:balance;
  text-shadow: 0 1px 3px oklch(6% .02 265 / .9), 0 10px 44px oklch(6% .02 265 / .7) }
.h2{ font-size:clamp(26px,3.4vw,44px); line-height:1.08; letter-spacing:-.028em; font-weight:380; color:var(--ink); text-wrap:balance }
.h3{ font-size:clamp(19px,2vw,26px); line-height:1.2; letter-spacing:-.02em; font-weight:450; color:var(--ink) }
.lead{ font-size:clamp(16px,1.35vw,19px); line-height:1.55; color:var(--ink2); max-width:60ch; text-wrap:pretty }
.glow{ color:var(--cyan); text-shadow:0 0 22px oklch(87% .13 205 / .45) }
.glow.m{ color:oklch(76% .17 295); text-shadow:0 0 22px oklch(63% .21 295 / .5) }
.prose{ max-width:70ch; color:var(--ink2); font-size:clamp(15.5px,1.15vw,17.5px); line-height:1.7 }
.prose h2{ margin:2.2em 0 .6em; font-size:clamp(22px,2.4vw,30px); font-weight:420; letter-spacing:-.022em; color:var(--ink) }
.prose h3{ margin:1.8em 0 .5em; font-size:clamp(17px,1.5vw,20px); font-weight:500; color:var(--ink) }
.prose p{ margin:0 0 1.1em }
.prose ul,.prose ol{ margin:0 0 1.2em 1.2em }
.prose li{ margin:.35em 0 }
.prose li::marker{ color:var(--cyan) }
.prose a{ color:var(--cyan); text-decoration:none; border-bottom:1px solid oklch(87% .13 205 / .3); transition:border-color .3s }
.prose a:hover{ border-color:var(--cyan) }
.prose strong{ color:var(--ink); font-weight:550 }
.prose code{ font:500 .92em var(--mono); color:var(--amber); background:oklch(20% .05 270 / .6); padding:.1em .4em; border-radius:6px }
.prose blockquote{ margin:1.4em 0; padding:.2em 0 .2em 1.2em; border-left:2px solid oklch(63% .21 295 / .6); color:var(--ink) }
.prose hr{ border:0; height:1px; margin:2.4em 0; background:linear-gradient(90deg, transparent, oklch(60% .10 275 / .35), transparent) }
.prose table{ width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.94em }
.prose th,.prose td{ text-align:left; padding:10px 12px; border-bottom:1px solid oklch(60% .10 275 / .14); vertical-align:top }
.prose th{ font:500 9px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--ink3) }
.mono{ font-family:var(--mono) }

/* ─────────── BÖLÜM RİTMİ ─────────── */
.hero{ position:relative; min-height:100dvh; display:grid; grid-template-columns:minmax(0,1fr); align-content:center; justify-items:start; gap:22px;
  padding:clamp(120px,16vh,180px) 0 clamp(60px,9vh,110px) }
.hero.center{ justify-items:center; text-align:center }
.hero .h1{ max-width:16ch }
.hero .lead{ max-width:54ch }
.sec{ position:relative; padding:clamp(64px,9vw,128px) 0 }
.sec-head{ max-width:760px; margin-bottom:clamp(30px,4vw,52px) }
.sec-head .h2{ margin-top:16px }
.sec-head .lead{ margin-top:16px }
.hairline{ height:1px; width:100%; border:0; margin:0;
  background:linear-gradient(90deg, transparent, oklch(70% .12 250 / .22) 14%, oklch(80% .13 230 / .42) 50%, oklch(65% .18 290 / .24) 86%, transparent);
  box-shadow:0 0 18px oklch(65% .18 275 / .22) }

/* ─────────── CAM YÜZEYLER ─────────── */
.slab{
  position:relative; border-radius:22px;
  background: linear-gradient(180deg, oklch(22% .05 268 / .30), oklch(15% .04 268 / .46));
  backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: inset 0 1px 0 oklch(85% .08 260 / .10), 0 0 0 1px var(--hair), 0 14px 40px -20px oklch(4% .02 270 / .9);
  transition: box-shadow .55s var(--glide), transform .55s var(--spring);
}
.slab.pad{ padding:clamp(18px,2.2vw,28px) }
.slab.hover:hover{ transform:translateY(-3px); box-shadow: inset 0 1px 0 oklch(85% .08 260 / .14), 0 0 0 1px oklch(70% .12 255 / .24), 0 22px 54px -22px oklch(4% .02 270 / .95), 0 0 40px -12px oklch(63% .21 295 / .3) }
.slab.lit{ background: linear-gradient(180deg, oklch(24% .07 275 / .42), oklch(16% .045 268 / .5)) }
.slab .rim{ position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, oklch(87% .13 205 / .12), transparent 32%, transparent 68%, oklch(63% .21 295 / .12)) }
.seep{ position:absolute; left:18px; right:18px; bottom:0; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, var(--cyan), var(--mor)); box-shadow:0 0 12px oklch(70% .16 250 / .6);
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--spring) }
.slab:hover .seep{ transform:scaleX(1) }

/* ─────────── DÜĞMELER ─────────── */
.abtn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 20px; border:0; border-radius:999px; cursor:pointer; text-decoration:none;
  font:500 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  transition: transform .5s var(--spring), filter .4s var(--glide), box-shadow .5s var(--glide), color .4s, background .4s }
.abtn:active{ transform:scale(.96) }
.abtn.pri{ color:oklch(16% .04 265);
  background: radial-gradient(110% 110% at 32% 22%, oklch(94% .07 220), transparent 58%),
              linear-gradient(140deg, var(--cyan), var(--blue) 52%, var(--mor));
  box-shadow: inset 0 1px 1px oklch(100% 0 0 / .5), inset 0 -2px 3px oklch(30% .12 280 / .5),
              0 10px 26px -8px oklch(65% .20 262 / .7), 0 0 30px -6px oklch(63% .21 295 / .5) }
.abtn.pri:hover{ filter:brightness(1.07) saturate(1.1) }
.abtn.ghost{ color:var(--ink2); background: oklch(60% .10 275 / .06); box-shadow: inset 0 0 0 1px oklch(60% .10 275 / .18) }
.abtn.ghost:hover{ color:var(--ink); background: oklch(60% .12 270 / .12); box-shadow: inset 0 0 0 1px oklch(70% .12 255 / .32) }
.abtn.amber{ color:oklch(16% .04 60); background:linear-gradient(135deg, oklch(86% .12 80), var(--amber)); box-shadow:0 10px 26px -10px oklch(80% .13 72 / .7) }
.abtn.danger{ color:oklch(90% .08 20); background:oklch(45% .16 25 / .18); box-shadow: inset 0 0 0 1px oklch(60% .18 25 / .35) }
.abtn.sm{ height:36px; padding:0 14px; font-size:10px }
.abtn.lg{ height:54px; padding:0 26px; font-size:12.5px }
.abtn svg{ width:15px; height:15px; flex:none }
.abtn[disabled]{ opacity:.45; pointer-events:none }
.link{ color:var(--cyan); text-decoration:none; font-weight:500; border-bottom:1px solid transparent; transition:border-color .3s }
.link:hover{ border-color:var(--cyan) }

/* ─────────── FORM ─────────── */
.afield{ display:flex; flex-direction:column; gap:8px }
.afield > span{ font:500 8.5px/1 var(--mono); letter-spacing:.28em; text-transform:uppercase; color:var(--ink4) }
.afield input,.afield textarea,.afield select{
  width:100%; border:0; outline:0; color:var(--ink); font:inherit; font-size:15px; padding:13px 16px; border-radius:14px;
  background: linear-gradient(180deg, oklch(22% .05 268 / .30), oklch(15% .04 268 / .46));
  box-shadow: inset 0 1px 0 oklch(85% .08 260 / .10), 0 0 0 1px var(--hair);
  transition: box-shadow .45s var(--glide), background .45s var(--glide) }
.afield textarea{ resize:vertical; min-height:110px; line-height:1.5 }
.afield input::placeholder,.afield textarea::placeholder{ color:oklch(55% .04 258) }
.afield input:focus,.afield textarea:focus{ box-shadow: inset 0 1px 0 oklch(88% .09 255 / .18), 0 0 0 1px oklch(78% .13 245 / .38), 0 0 40px -14px oklch(65% .20 262 / .5) }
.fmsg{ font:500 9.5px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); min-height:14px }
.fmsg.ok{ color:var(--cyan) } .fmsg.err{ color:oklch(78% .16 25) }
.tog{ width:44px; height:24px; border-radius:999px; border:0; cursor:pointer; position:relative; background:oklch(30% .05 268); box-shadow: inset 0 0 0 1px var(--hair); transition:background .4s }
.tog::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--ink3); transition:transform .5s var(--spring), background .4s }
.tog.on{ background: linear-gradient(140deg, var(--cyan), var(--mor)) }
.tog.on::after{ transform:translateX(20px); background:#fff }
.seg{ position:relative; display:inline-flex; gap:4px; padding:4px; border-radius:999px; background: oklch(16% .04 268 / .55); box-shadow: inset 0 0 0 1px var(--hair) }
.seg button{ position:relative; z-index:1; border:0; background:none; cursor:pointer; padding:8px 14px; border-radius:999px;
  font:500 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); transition:color .4s }
.seg button.on{ color:oklch(98% .01 250) }
.seg .puck{ position:absolute; top:4px; height:calc(100% - 8px); border-radius:999px; left:4px; width:0;
  background: radial-gradient(130% 170% at 24% 0%, oklch(72% .16 250 / .40), transparent 62%), linear-gradient(120deg, oklch(60% .19 262 / .34), oklch(60% .20 296 / .28));
  box-shadow: inset 0 1px 0 oklch(92% .06 250 / .30), 0 0 20px -4px oklch(64% .20 268 / .55);
  transition:left .55s var(--spring), width .55s var(--spring) }

/* ─────────── KART IZGARASI (kütüphane / listeler) ─────────── */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); gap:clamp(12px,1.4vw,18px) }
.card{ position:relative; border-radius:18px; overflow:hidden; cursor:pointer; aspect-ratio:1; isolation:isolate;
  background: linear-gradient(150deg, oklch(26% .09 285), oklch(13% .05 265));
  box-shadow: 0 0 0 1px var(--hair), 0 16px 40px -18px oklch(4% .02 270 / .9);
  transition: transform .6s var(--spring), box-shadow .5s var(--glide) }
.card:hover{ transform:translateY(-4px); box-shadow: 0 0 0 1px oklch(70% .12 255 / .3), 0 26px 60px -20px oklch(4% .02 270 / .95), 0 0 48px -12px oklch(63% .21 295 / .32) }
.card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--glide), filter .6s }
.card:hover img{ transform:scale(1.05) }
.card .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 42%, oklch(6% .02 265 / .88)) }
.card .info{ position:absolute; left:14px; right:14px; bottom:12px; z-index:2 }
.card .info b{ display:block; font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 8px oklch(6% .02 265 / .9) }
.card .info span{ display:block; margin-top:4px; font:500 7.5px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--ink3) }
.card .play{ position:absolute; left:50%; top:50%; z-index:2; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; display:grid; place-items:center;
  color:oklch(16% .04 265); background: radial-gradient(110% 110% at 32% 22%, oklch(94% .07 220), transparent 58%), linear-gradient(140deg, var(--cyan), var(--blue) 52%, var(--mor));
  box-shadow: 0 10px 26px -8px oklch(65% .20 262 / .8); opacity:0; transform:scale(.7); transition:opacity .4s var(--glide), transform .5s var(--spring) }
.card:hover .play,.card.playing .play{ opacity:1; transform:scale(1) }
.card.playing{ box-shadow: 0 0 0 1.5px oklch(87% .13 205 / .6), 0 0 40px -8px oklch(87% .13 205 / .5) }
.card .acts{ position:absolute; top:10px; right:10px; z-index:3; display:flex; gap:6px; opacity:0; transform:translateY(-4px); transition:opacity .35s, transform .45s var(--spring) }
.card:hover .acts{ opacity:1; transform:none }
.card .acts button{ width:30px; height:30px; border:0; border-radius:10px; cursor:pointer; display:grid; place-items:center; color:var(--ink);
  background: oklch(12% .03 268 / .7); backdrop-filter:blur(10px); box-shadow: inset 0 0 0 1px oklch(70% .1 260 / .2) }
.card .acts button:hover{ background: oklch(60% .12 270 / .3) }
.card .brew{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; background: radial-gradient(60% 60% at 50% 50%, oklch(30% .10 285 / .6), transparent 70%) }
.card .brew b{ font:500 8px/1 var(--mono); letter-spacing:.3em; text-transform:uppercase; color:var(--amber); animation: pulseTxt 1.8s ease-in-out infinite }
@keyframes pulseTxt{ 50%{ opacity:.45 } }
.sect{ grid-column:1 / -1; padding:18px 0 4px; font:500 8.5px/1 var(--mono); letter-spacing:.3em; text-transform:uppercase; color:var(--ink4); display:flex; align-items:center; gap:10px }
.sect::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, oklch(60% .10 275 / .3), transparent) }

/* ─────────── AKORDEON (SSS) ─────────── */
.acc{ border-top:1px solid oklch(60% .10 275 / .14) }
.acc details{ border-bottom:1px solid oklch(60% .10 275 / .14) }
.acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 4px;
  font-size:clamp(16px,1.35vw,19px); font-weight:450; color:var(--ink); letter-spacing:-.012em; transition:color .3s }
.acc summary::-webkit-details-marker{ display:none }
.acc summary .pl{ flex:none; width:26px; height:26px; border-radius:50%; position:relative; box-shadow: inset 0 0 0 1px oklch(60% .10 275 / .3); transition:transform .6s var(--spring), box-shadow .4s }
.acc summary .pl::before,.acc summary .pl::after{ content:''; position:absolute; left:50%; top:50%; width:10px; height:1.5px; background:var(--cyan); transform:translate(-50%,-50%); transition:transform .5s var(--spring) }
.acc summary .pl::after{ transform:translate(-50%,-50%) rotate(90deg) }
.acc details[open] summary .pl{ transform:rotate(45deg); box-shadow: inset 0 0 0 1px oklch(87% .13 205 / .5), 0 0 16px -4px oklch(87% .13 205 / .6) }
.acc summary:hover{ color:var(--cyan) }
.acc .body{ padding:0 4px 24px; color:var(--ink2); font-size:16px; line-height:1.65; max-width:70ch; animation: accIn .55s var(--spring) both }
@keyframes accIn{ from{ opacity:0; transform:translateY(-6px); filter:blur(6px) } to{ opacity:1; transform:none; filter:none } }

/* ─────────── FOOTER ─────────── */
.foot{ position:relative; padding:clamp(60px,8vw,110px) 0 40px; margin-top:clamp(40px,6vw,90px) }
.foot .cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px }
.foot h4{ font:500 8.5px/1 var(--mono); letter-spacing:.3em; text-transform:uppercase; color:var(--ink4); margin-bottom:18px }
.foot a{ display:block; color:var(--ink2); text-decoration:none; padding:5px 0; font-size:14.5px; transition:color .3s }
.foot a:hover{ color:var(--cyan) }
.foot p{ color:var(--ink3); font-size:14px; line-height:1.6; max-width:34ch }
.foot .bar{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid oklch(60% .10 275 / .12);
  font:500 9px/1.6 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink4) }
.foot .mega{ margin-top:clamp(30px,5vw,60px); text-align:center; line-height:.85; font-size:clamp(52px,12vw,180px); font-weight:600; letter-spacing:-.05em;
  background:linear-gradient(120deg, var(--cyan), var(--blue) 50%, var(--mor)); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.55; user-select:none }

/* ─────────── ORTAYA ÇIKIŞ (scroll) ─────────── */
.rv{ opacity:0; transform:translateY(22px); filter:blur(10px) saturate(.5); transition:opacity .9s var(--glide), transform 1s var(--spring), filter 1s var(--glide) }
.rv.in{ opacity:1; transform:none; filter:none }
.rv.d1{ transition-delay:.08s } .rv.d2{ transition-delay:.16s } .rv.d3{ transition-delay:.24s } .rv.d4{ transition-delay:.32s }

/* ─────────── ÖRTÜLER / SAYFALAR ─────────── */
.ov{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background: radial-gradient(120% 100% at 50% 40%, oklch(5% .01 270 / .72), oklch(3% .01 268 / .92));
  opacity:0; pointer-events:none; transition:opacity .45s var(--glide) }
.ov.on{ opacity:1; pointer-events:auto }
.ov .pane{ width:min(560px, 100%); max-height:min(88dvh, 900px); overflow:auto; scrollbar-width:none; border-radius:26px; padding:clamp(20px,3vw,32px);
  background: linear-gradient(180deg, oklch(20% .05 270 / .86), oklch(13% .035 266 / .92));
  backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: inset 0 1px 0 oklch(85% .08 260 / .16), 0 0 0 1px oklch(60% .10 275 / .18), 0 40px 100px -30px oklch(3% .01 268 / 1), 0 0 60px -20px oklch(63% .21 295 / .35);
  transform:translateY(18px) scale(.985); transition:transform .6s var(--spring) }
.ov.on .pane{ transform:none }
.ov .pane.wide{ width:min(980px, 100%) }
.ov .pane::-webkit-scrollbar{ width:0 }
.ov .x{ position:absolute; top:14px; right:14px; width:36px; height:36px; border:0; border-radius:12px; cursor:pointer; display:grid; place-items:center; color:var(--ink3); background:none; transition:background .3s, color .3s }
.ov .x:hover{ background: oklch(60% .12 270 / .14); color:var(--ink) }
.sheet{ display:flex; flex-direction:column; gap:2px }
.sheet .act{ display:flex; align-items:center; gap:14px; padding:13px 14px; border:0; border-radius:14px; background:none; cursor:pointer; text-align:left;
  font-size:14.5px; font-weight:450; color:var(--ink); transition:background .3s }
.sheet .act:hover{ background: oklch(60% .12 270 / .12) }
.sheet .act svg{ flex:none; width:18px; height:18px; color:var(--cyan) }
.sheet .act small{ margin-left:auto; font:500 8px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ink4) }
.sheet .act.danger{ color:oklch(82% .14 25) } .sheet .act.danger svg{ color:oklch(78% .16 25) }
.toast{ position:fixed; left:50%; bottom:28px; z-index:120; transform:translate(-50%, 16px); padding:11px 18px; border-radius:999px;
  font:500 10.5px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  background: oklch(16% .045 268 / .86); backdrop-filter:blur(18px); box-shadow: inset 0 1px 0 oklch(85% .08 260 / .16), 0 0 0 1px var(--hair), 0 18px 50px -18px oklch(5% .02 270 / .9);
  opacity:0; pointer-events:none; transition:opacity .4s var(--glide), transform .6s var(--spring); max-width:calc(100% - 40px); text-align:center }
.toast.on{ opacity:1; transform:translate(-50%, 0) }
.toast.err{ color:oklch(84% .14 25); box-shadow: inset 0 1px 0 oklch(85% .08 260 / .16), 0 0 0 1px oklch(60% .18 25 / .4) }

/* ─────────── AUTH VEIL ─────────── */
.auth .pane{ width:min(440px, 100%) }
.auth .kick{ margin-bottom:12px }
.auth .h2{ font-size:clamp(26px,3vw,34px) }
.auth .tabs{ margin:22px 0 18px }
.auth .g{ width:100%; height:48px; border-radius:999px; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:11px;
  font:500 13px/1 inherit; color:var(--ink); background: oklch(60% .10 275 / .08); box-shadow: inset 0 0 0 1px oklch(60% .10 275 / .2); transition:background .3s }
.auth .g:hover{ background: oklch(60% .12 270 / .14) }
.auth .or{ display:flex; align-items:center; gap:12px; margin:16px 0; font:500 8px/1 var(--mono); letter-spacing:.3em; color:var(--ink4) }
.auth .or::before,.auth .or::after{ content:''; flex:1; height:1px; background:oklch(60% .10 275 / .18) }
.auth .afield{ margin-bottom:12px }
.auth .foot{ margin:14px 0 0; padding:0; font-size:11.5px; color:var(--ink4); line-height:1.5 }
.auth .tiny{ border:0; background:none; cursor:pointer; padding:6px 0; font:500 9px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ink3) }
.auth .tiny:hover{ color:var(--cyan) }

/* ─────────── PLAYER (sayfa genelinde sabit alt bar) ─────────── */
body.aur .player{ position:fixed; left:0; right:0; bottom:0; z-index:70; height:0 }
body.aur .player[data-on="1"]{ height:72px }
body.aur.has-player .page{ padding-bottom:88px }

/* ─────────── KREDİ ÇİPİ ─────────── */
.chip{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px 0 10px; border-radius:999px; cursor:pointer; border:0;
  background: oklch(16% .045 268 / .7); box-shadow: inset 0 1px 0 oklch(85% .08 260 / .14), 0 0 0 1px var(--hair);
  font:500 10px/1 var(--mono); letter-spacing:.16em; color:var(--ink2); transition:box-shadow .4s }
.chip:hover{ box-shadow: inset 0 1px 0 oklch(85% .08 260 / .14), 0 0 0 1px oklch(80% .12 80 / .4) }
.chip b{ color:var(--amber); font-weight:600 }
.chip i{ width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 35% 30%, oklch(95% .1 80), var(--amber)); box-shadow:0 0 10px oklch(80% .13 72 / .8) }

/* ─────────── BOŞ DURUM ─────────── */
.empty{ display:grid; justify-items:center; text-align:center; gap:14px; padding:clamp(50px,8vh,90px) 20px }
.empty .h2{ max-width:20ch }
.empty .lead{ max-width:44ch; margin:0 auto }

/* ─────────── DAR EKRAN ─────────── */
@media (max-width:900px){
  :root{ --pad:18px }
  .mast{ left:14px; right:14px; transform:none; width:auto; max-width:none; justify-content:space-between }
  .mast .links,.mast .cta{ display:none }
  .mast .burger{ display:grid }
  .foot .cols{ grid-template-columns:1fr 1fr }
  .hero{ min-height:auto; padding-top:110px }
  body.aur.has-player .page{ padding-bottom:96px }
  /* ── DOCK · telefon: sol üstte tek düğüm, dokununca YATAY açılır (adanın yatay hali) ── */
  body.aur .dock{ display:flex; position:fixed; left:12px; top:calc(12px + env(safe-area-inset-top)); z-index:9; transform:none;
    flex-direction:row; align-items:center; gap:2px; width:auto; height:48px; padding:0 6px; border-radius:999px; overflow:hidden; max-width:calc(100% - 24px) }
  body.aur .dock[data-open="1"]{ width:auto }
  body.aur .dock .knob{ padding:4px; border-radius:50% }
  body.aur .dock .korb{ width:26px; height:26px }
  body.aur .dock .links{ flex-direction:row; gap:0; width:0; opacity:0; overflow:hidden; transition:width .6s var(--spring), opacity .35s var(--glide) }
  body.aur .dock[data-open="1"] .links{ width:276px; opacity:1 }
  body.aur .dock .links a{ width:46px; height:40px; flex:none; justify-content:center; padding:0; border-radius:12px }
  body.aur .dock .links a span{ display:none }
  body.aur .dock .links a svg{ margin:0 }
  body.aur .dock .links a.here::before{ left:30%; right:30%; top:auto; bottom:3px; width:auto; height:2px; background:linear-gradient(90deg, var(--cyan), var(--mor)) }
  body.aur .dock .vein{ display:none }
}
@media (max-width:560px){
  .foot .cols{ grid-template-columns:1fr }
  .grid{ grid-template-columns:repeat(2, 1fr) }
}
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; filter:none; transition:none }
}