/*
  Yapay zekâ bunu yapabilir mi? · ertanyeni.com/yapayzeka (v2)
  Aydınlık editoryal quiz: sıcak kâğıt zemin, mürekkep tipografi, tek enerji rengi (sinyal sarısı),
  damga gibi düşen cevaplar ve dev skor rakamı. Görsel yok; zenginlik tipografiden ve renk bloklarından gelir.
  v2.1 paketler: üç deste (arkadaki yaprak sayısı = paket büyüklüğü), ilerleme ızgarası 8–25 tura ölçeklenir.

  Hareket kuralı: yalnız transform ve opacity canlandırılır (transition ve @keyframes). Sürekli çalışan
  animasyon, filtre ve bulanıklık yok. scripts/yapayzeka-test.cjs bu kuralı denetler.
  Renkler OKLCH'ten hesaplanmış hex değerleridir (eski uygulama içi tarayıcılar için).
*/

@font-face{font-family:"YZ Geist";src:url(/fonts/geist-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"YZ Mono";src:url(/fonts/geistmono-var.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"YZ Omuz";src:url(/fonts/bigshoulders-black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  /* oklch(.975 .010 85) · (.948 .014 85) · (.992 .005 85) */
  --kagit:#faf6ef;
  --kagit-2:#f2ede4;
  --kart:#fefcf9;
  /* mürekkep oklch(.205 .012 70) · (.42 .012 70) · (.53 .010 70) · çizgi (.875 .012 80) */
  --murekkep:#1b1611;
  --m2:#514c46;
  --m3:#706b66;
  --cizgi:#dad5cd;
  /* enerji: sinyal sarısı oklch(.885 .175 96) */
  --sari:#fcd726;
  --sari-acik:#fdf1b8;
  /* doğru oklch(.52 .14 152) · yanlış oklch(.54 .19 27) */
  --dogru:#007f3d;
  --dogru-acik:#d6f4dd;
  --yanlis:#c52c2a;
  --yanlis-acik:#ffe5e0;

  --geist:"YZ Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"YZ Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --omuz:"YZ Omuz","YZ Geist",Impact,"Arial Narrow",sans-serif;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --kenar:clamp(16px,5vw,56px);
  --genis:1180px;
  --dar:800px;
  --r:10px;
  --cikis:cubic-bezier(.25,1,.5,1);
  --cikis-hizli:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;
  background:var(--kagit);color:var(--murekkep);
  font:400 18px/1.5 var(--geist);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
h1,h2,h3,p,ol,ul,figure{margin:0}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-appearance:none;appearance:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--murekkep);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.gorunmez{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.noscript{padding:var(--s-6) var(--kenar);font-size:18px}

/* ---------------------------------------------------------------- Ortak */

.im{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--murekkep)}
.im svg{flex:none}
.etiket,.ust-satir{font:500 13px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m2)}

.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 26px;border-radius:999px;border:2px solid var(--murekkep);
  font:600 18px/1.1 var(--geist);letter-spacing:-.005em;text-decoration:none;text-align:center;
  transition:transform .18s var(--cikis);
}
.dugme svg{flex:none;transition:transform .2s var(--cikis)}
.dugme:active{transform:scale(.975)}
.birincil{background:var(--murekkep);color:var(--kart)}
.ikincil{background:transparent;color:var(--murekkep)}
.dugme:disabled{opacity:.38;cursor:default;transform:none}
.metin-dugme{
  display:inline-flex;align-items:center;min-height:48px;padding:0 6px;border:0;background:none;
  font:600 17px var(--geist);color:var(--murekkep);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;
}
@media (hover:hover){
  .dugme:hover svg{transform:translateX(3px)}
  .ikincil:hover{background:var(--kagit-2)}
}

/* ----------------------------------------------------------------- Kapı */

.kapi{
  max-width:var(--genis);margin:0 auto;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;padding:var(--s-5) var(--kenar) var(--s-4);
}
.kapi-ust{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.kapi-govde{flex:1;display:grid;align-content:center;gap:var(--s-7);padding:clamp(32px,8svh,96px) 0 var(--s-7)}
.kapi-metin{animation:yuksel .5s var(--cikis) backwards}
.baslik{
  margin-top:var(--s-4);isolation:isolate;
  font-weight:700;font-size:clamp(38px,11.4vw,96px);line-height:.98;letter-spacing:-.045em;
  max-width:12ch;
}
.vurgu{position:relative;display:inline-block;white-space:nowrap}
.vurgu::before{
  content:"";position:absolute;left:-.06em;right:-.08em;bottom:.04em;height:.44em;z-index:-1;
  background:var(--sari);transform-origin:0 50%;animation:fosfor .55s .35s var(--cikis-hizli) backwards;
}
.giris{margin-top:var(--s-5);max-width:30ch;font-size:clamp(19px,2.3vw,24px);line-height:1.4;color:var(--m2)}
.kapi-eylem{margin-top:var(--s-6);display:grid;justify-items:start;gap:var(--s-4)}
.buyuk{min-height:64px;padding:0 10px 0 28px;gap:18px;font-size:19px}
.buyuk .ok{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sari);color:var(--murekkep);transition:transform .2s var(--cikis)}
.buyuk[aria-busy="true"]{opacity:.6}
@media (hover:hover){.buyuk:hover .ok{transform:translateX(3px)}}
.kucuk{font-size:16px;color:var(--m2)}
.hata{font-size:17px;color:var(--yanlis);font-weight:500}
.hata .metin-dugme{color:var(--yanlis)}
.canli{display:inline-flex;align-items:center;gap:10px;font-size:16px;color:var(--m2)}
.canli b{color:var(--murekkep);font-weight:700}
.canli-nokta{width:9px;height:9px;border-radius:50%;background:var(--dogru)}

/* Kapıdaki örnek kart: ilk tur, sarı blok. Arkadaki deste kartı sarmalayıcıda durur (kart döndürülse de altta kalır). */
.on-deste{
  position:relative;isolation:isolate;width:calc(100% - 14px);max-width:520px;
  animation:kart-gir .6s .12s var(--cikis) backwards;
}
.on-deste::before{
  content:"";position:absolute;inset:0;z-index:-1;border:2px solid var(--murekkep);border-radius:var(--r);
  background:var(--kart);transform:rotate(3deg) translate(8px,10px);
}
.onizleme{
  position:relative;display:grid;gap:var(--s-5);align-content:start;width:100%;
  padding:clamp(22px,5vw,36px);padding-bottom:clamp(26px,5vw,40px);
  background:var(--sari);border:2px solid var(--murekkep);border-radius:var(--r);
  text-align:left;color:var(--murekkep);transition:transform .2s var(--cikis);
}
.onizleme:active{transform:scale(.985)}
.on-ust{display:flex;justify-content:space-between;font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.on-soru{font-weight:700;font-size:clamp(24px,6.2vw,36px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.on-cevaplar{display:flex;gap:10px}
.on-cevaplar span{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border:2px solid var(--murekkep);border-radius:999px;font-weight:600;font-size:16px;background:var(--kart)}
.on-damga{
  position:absolute;top:-22px;right:-12px;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--murekkep);color:var(--sari);font:900 40px/1 var(--omuz);transform:rotate(10deg);
  outline:2px solid var(--sari);outline-offset:-7px;
}
@media (hover:hover){.onizleme:hover{transform:rotate(1deg) translateY(-4px)}}

.kunye{padding:var(--s-4) 0 var(--s-2);font-size:15px;color:var(--m2)}
.kunye a{display:inline-flex;align-items:center;min-height:44px;color:var(--murekkep);font-weight:600;text-underline-offset:4px}

@media (min-width:900px){
  .kapi-govde{gap:var(--s-8)}
  .kapi.onizlemeli .kapi-govde{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
  .onizlemeli .on-deste{justify-self:end;max-width:540px;transform:rotate(-2deg)}
  .onizlemeli .on-soru{font-size:40px}
  .onizlemeli .baslik{font-size:clamp(64px,7vw,96px)}
}

/* ---------------------------------------------------------- Akış üst şeridi */

.ust{
  max-width:var(--dar);margin:0 auto;padding:var(--s-3) var(--kenar) 0;
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);
}
.geri{display:grid;place-items:center;width:44px;height:44px;margin-left:-10px;border:0;border-radius:50%;background:none;color:var(--murekkep)}
@media (hover:hover){.geri:hover{background:var(--kagit-2)}}
/* Tur ızgarası: 12 tura kadar tek sıra, üstü iki sıra (--sutun JS'ten). Kareler sütuna sığacak kadar küçülür, 14 px'i geçmez. */
.noktalar{
  list-style:none;padding:0;display:grid;grid-template-columns:repeat(var(--sutun,8),minmax(0,14px));
  gap:6px;justify-content:center;align-content:center;
}
.noktalar.sik{gap:4px 3px}
.noktalar li{width:100%;aspect-ratio:1/1;border-radius:3px;background:var(--kagit-2);box-shadow:inset 0 0 0 1.5px var(--cizgi)}
.noktalar.sik li{border-radius:2px}
.noktalar .simdi{background:var(--sari);box-shadow:inset 0 0 0 2px var(--murekkep)}
.noktalar .dogru{background:var(--dogru);box-shadow:none}
.noktalar .yanlis{background:var(--yanlis);box-shadow:none}
.noktalar .yeni{animation:pop .34s var(--cikis) backwards}
.skor{display:flex;align-items:baseline;gap:8px;font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m2)}
#skor-n{display:inline-block;min-width:1ch;overflow:hidden;font:900 30px/1 var(--omuz);letter-spacing:0;color:var(--murekkep)}
#skor-n b{display:inline-block;font-weight:900}
#skor-n .tik{animation:tik .36s var(--cikis-hizli) backwards}
body[data-adim="paket"] .noktalar,body[data-adim="paket"] .skor{visibility:hidden}
@media (max-width:359px){.skor>span:first-child{display:none}}

/* ---------------------------------------------------------------- Ekranlar */

.akis{max-width:var(--dar);margin:0 auto;padding:0 var(--kenar)}
.ekran{padding-top:var(--s-5);animation:gir .34s var(--cikis) backwards}
.ekran.geri-yon{animation-name:gir-geri}
.ekran.cikis{animation:cik .15s ease-in both}
.ekran-bas{margin-bottom:var(--s-6)}
.ekran-bas h2{margin-top:var(--s-3);font-weight:700;font-size:clamp(34px,8.6vw,56px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.ekran-alt{margin-top:var(--s-3);font-size:18px;color:var(--m2)}
.eylemler{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);margin-top:var(--s-6);padding-bottom:var(--s-7)}

/* Paket: üç deste. Arkadaki yaprak sayısı paketin büyüklüğü; zemin küçükten büyüğe sarıya doyar.
   Seçilen deste mürekkebe döner (damga basılmış gibi), rakam sarı kalır. */
.paketler{list-style:none;padding:0 0 var(--s-7);display:grid;gap:30px}
.paket-yer{position:relative;isolation:isolate;margin-right:18px}
.yaprak{
  position:absolute;inset:0;z-index:-1;border:2px solid var(--murekkep);border-radius:var(--r);background:var(--kart);
  transition:transform .22s var(--cikis);
}
.y1{transform:translate(5px,6px) rotate(.7deg)}
.y2{transform:translate(10px,12px) rotate(1.4deg)}
.y3{transform:translate(15px,18px) rotate(2.1deg)}
.paket{
  position:relative;width:100%;min-height:100px;
  display:grid;grid-template-columns:66px minmax(0,1fr) 44px;grid-template-areas:"sayi ad ok" "sayi alt ok";
  align-items:center;column-gap:14px;row-gap:4px;
  padding:14px 16px 14px 18px;border:2px solid var(--murekkep);border-radius:var(--r);
  background:var(--kart);color:var(--murekkep);text-align:left;
  transition:transform .18s var(--cikis);
}
.paket-orta{background:var(--sari-acik)}
.paket-buyuk{background:var(--sari)}
.pk-sayi{grid-area:sayi;font:900 60px/.8 var(--omuz);letter-spacing:-.01em;padding-top:.06em}
.pk-ad{grid-area:ad;align-self:end;font-weight:700;font-size:21px;line-height:1.15;letter-spacing:-.02em}
.pk-alt{grid-area:alt;align-self:start;font:500 13px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--m2)}
.pk-alt i{font-style:normal}
.pk-ok{grid-area:ok;display:grid;place-items:center;width:44px;height:44px;border:2px solid currentColor;border-radius:50%;transition:transform .2s var(--cikis)}
.pk-damga{
  position:absolute;top:-15px;right:22px;padding:7px 10px 5px;border-radius:4px;
  background:var(--murekkep);color:var(--kart);outline:1.5px solid var(--kart);outline-offset:-5px;
  font:900 17px/1 var(--omuz);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transform:rotate(3deg);
}
.paket:active{transform:scale(.985)}
.paket[aria-pressed="true"]{background:var(--murekkep);color:var(--kart)}
.paket[aria-pressed="true"] .pk-sayi{color:var(--sari)}
.paket[aria-pressed="true"] .pk-alt{color:var(--cizgi)}
.paket[aria-pressed="true"] .pk-ok{transform:translateX(4px)}
.paket.basildi{animation:darbe .3s var(--cikis)}
@media (hover:hover){
  .paket-yer:hover .paket{transform:translate(-2px,-3px)}
  .paket-yer:hover .pk-ok{transform:translateX(4px)}
  .paket-yer:hover .y2{transform:translate(12px,13px) rotate(2deg)}
  .paket-yer:hover .y3{transform:translate(19px,19px) rotate(3.2deg)}
}
@media (max-width:359px){
  .paket{grid-template-columns:52px minmax(0,1fr) 44px;column-gap:12px;padding-left:14px}
  .pk-sayi{font-size:52px}
  .pk-ad{font-size:19px}
  .pk-alt{font-size:12px;letter-spacing:.06em}
}
@media (min-width:720px){
  .paketler{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
  /* Dikey deste: ad üstte, dev rakam ortada, künye (soru · süre iki satır) ve ok altta */
  .paket{
    height:100%;min-height:clamp(290px,34vw,330px);
    grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto 1fr auto;grid-template-areas:"ad ad" "sayi sayi" "alt ok";
    align-items:end;row-gap:0;padding:20px 16px 16px 20px;
  }
  .pk-ad{align-self:start;font-size:22px}
  .pk-sayi{margin:0 0 16px -.02em;font-size:clamp(112px,13vw,150px);line-height:.78}
  .pk-alt span{display:block}
  .pk-alt i{display:none}
  .pk-damga{top:-19px;right:14px}
}

/* Unvan */
.secenekler{list-style:none;padding:0;display:grid;gap:10px;padding-bottom:var(--s-7)}
.secenek{
  width:100%;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:0 22px;border:2px solid var(--murekkep);border-radius:var(--r);background:var(--kart);
  font-weight:600;font-size:20px;text-align:left;transition:transform .18s var(--cikis);
}
.secenek svg{transition:transform .2s var(--cikis)}
.secenek:active{transform:scale(.985)}
.secenek[aria-pressed="true"]{background:var(--sari)}
.secenek[aria-pressed="true"] svg{transform:translateX(4px)}
@media (hover:hover){.secenek:hover svg{transform:translateX(4px)}}

/* Soru */
.soru-ekran{display:flex;flex-direction:column;min-height:calc(100svh - 64px)}
.soru-no{margin-bottom:var(--s-4)}
.deste{position:relative;isolation:isolate;margin-right:10px}
.deste::before{
  content:"";position:absolute;inset:0;z-index:-1;border:2px solid var(--murekkep);border-radius:var(--r);
  background:var(--kart);transform:rotate(2deg) translate(7px,9px);
}
.soru-kart{
  position:relative;display:flex;align-items:flex-end;min-height:clamp(240px,42svh,400px);
  padding:clamp(22px,6vw,44px);padding-bottom:clamp(52px,9vw,72px);
  background:var(--sari);border:2px solid var(--murekkep);border-radius:var(--r);
  animation:kart-gir .42s .04s var(--cikis) backwards;
}
.soru-kart h2{font-weight:700;font-size:clamp(27px,7.2vw,50px);line-height:1.07;letter-spacing:-.035em;text-wrap:balance}
.damga-yer{position:absolute;right:-8px;bottom:-24px;display:none;z-index:2}
.acik .damga-yer{display:block}
.damga{
  display:inline-block;padding:12px 16px 9px;border-radius:5px;
  background:var(--murekkep);color:var(--kart);outline:2px solid var(--kart);outline-offset:-7px;
  font:900 clamp(24px,6.4vw,34px)/1 var(--omuz);letter-spacing:.04em;white-space:nowrap;
  transform:rotate(-5deg);animation:damga .4s var(--cikis) backwards;
}
.acik:not(.onceden) .soru-kart{animation:darbe .34s .14s var(--cikis) backwards}

.acilim{display:grid;gap:var(--s-3);margin-top:calc(var(--s-6) + 8px);scroll-margin-bottom:120px}
.acilim:empty{display:none}
.acilim>*{animation:yuksel .42s var(--cikis) backwards}
.acilim>:nth-child(1){animation-delay:.16s}
.acilim>:nth-child(2){animation-delay:.24s}
.acilim>:nth-child(3){animation-delay:.3s}
.acilim>:nth-child(4){animation-delay:.36s}
.hukum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-weight:700;font-size:clamp(23px,5.6vw,30px);line-height:1.15;letter-spacing:-.025em}
.hukum svg{flex:none;width:36px;height:36px;padding:7px;border-radius:50%;color:var(--kart)}
.hukum.dogru{color:var(--dogru)}
.hukum.dogru svg{background:var(--dogru)}
.hukum.yanlis{color:var(--yanlis)}
.hukum.yanlis svg{background:var(--yanlis)}
.hukum small{flex-basis:100%;font:500 13px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m2)}
.gercek{max-width:58ch;font-size:clamp(18px,2.4vw,21px);line-height:1.5}
.kaynak{font-size:15px;color:var(--m2)}
.kaynak a{display:inline-flex;align-items:center;gap:5px;min-height:44px;color:var(--murekkep);font-weight:600;text-underline-offset:3px;text-decoration-thickness:1px}
.topluluk{display:grid;gap:8px;padding-top:var(--s-2)}
.topluluk p{font-weight:600;font-size:17px}
.oran-bar{display:block;height:10px;border-radius:99px;background:var(--kagit-2);box-shadow:inset 0 0 0 1px var(--cizgi);overflow:hidden}
.oran-bar i{display:block;height:100%;background:var(--murekkep);transform-origin:0 50%;animation:dol .9s .5s var(--cikis) backwards}

.cevap-bar{
  position:sticky;bottom:0;z-index:4;margin-top:auto;
  padding:var(--s-5) 0 calc(var(--s-4) + env(safe-area-inset-bottom,0px));
  background:var(--kagit);
}
.cevaplar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.cevap{
  min-height:64px;border:2px solid var(--murekkep);border-radius:999px;background:var(--murekkep);color:var(--kart);
  font-weight:700;font-size:22px;letter-spacing:-.01em;transition:transform .16s var(--cikis);
}
.cevap:active{transform:scale(.96)}
@media (hover:hover){.cevap:hover{transform:translateY(-2px)}}
.sonraki{display:none;width:100%;min-height:64px;font-size:19px}
.acik .cevaplar{display:none}
.acik .sonraki{display:flex;animation:yuksel .32s .3s var(--cikis) backwards}
.onceden .sonraki,.onceden .acilim>*{animation:none}

@media (min-width:900px){
  .soru-ekran{min-height:0}
  .cevap-bar{position:static;margin-top:var(--s-6);padding-top:var(--s-4)}
  .cevaplar{max-width:520px}
  .sonraki{width:auto;min-width:280px}
}

/* Podyum */
.modeller{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.model{
  position:relative;width:100%;min-height:92px;display:grid;align-content:end;gap:4px;
  padding:16px 16px 14px;border:2px solid var(--murekkep);border-radius:var(--r);background:var(--kart);text-align:left;
  transition:transform .18s var(--cikis);
}
.model:active{transform:scale(.97)}
.model[aria-pressed="true"]{background:var(--sari-acik)}
.model-ad{font-weight:700;font-size:20px;line-height:1.1;letter-spacing:-.015em}
.model-uretici{font:500 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--m2)}
.sira{position:absolute;top:10px;right:10px;width:34px;height:34px}
.sira b{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--sari);box-shadow:0 0 0 2px var(--murekkep);font:900 20px/1 var(--omuz);animation:pop .3s var(--cikis) backwards}
.say{display:inline-grid;place-items:center;min-width:44px;height:28px;padding:0 8px;border-radius:99px;background:var(--sari);color:var(--murekkep);font:600 13px/1 var(--mono)}
@media (min-width:600px){.modeller{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Şirket */
.oneri-kutu{position:relative}
#sirket{
  width:100%;min-height:62px;padding:0 20px;border:2px solid var(--murekkep);border-radius:var(--r);
  background:var(--kart);font-size:20px;font-weight:500;
}
#sirket::placeholder{color:var(--m3)}
#sirket:focus{outline:3px solid var(--sari);outline-offset:0}
.oneriler{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;list-style:none;padding:6px;
  background:var(--kart);border:2px solid var(--murekkep);border-radius:var(--r);
}
.oneriler li{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:6px;font-size:18px;cursor:pointer}
.oneriler li[aria-selected="true"],.oneriler li:hover{background:var(--sari-acik)}
.not{margin-top:var(--s-2);font-size:16px;color:var(--m2)}
.sirket-ekran .not:empty{display:none}

/* ------------------------------------------------------------------ Sonuç */

.sonuc{max-width:var(--genis);margin:0 auto;padding:var(--s-5) var(--kenar) var(--s-4);animation:gir .34s var(--cikis) backwards}
.sonuc-ust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:44px}
.uye-no{padding:9px 12px 8px;border:1.5px solid var(--murekkep);border-radius:5px;font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;animation:yuksel .4s var(--cikis) backwards}
.sonuc-izgara{display:grid;gap:var(--s-7);margin-top:var(--s-6)}
.dev-skor{
  position:relative;isolation:isolate;display:flex;align-items:baseline;width:max-content;max-width:100%;margin-top:var(--s-3);
  font:900 clamp(140px,44vw,280px)/.82 var(--omuz);letter-spacing:-.01em;
}
.dev-skor::before{
  content:"";position:absolute;left:-.05em;right:-.05em;bottom:.03em;height:.3em;z-index:-1;
  background:var(--sari);transform-origin:0 50%;animation:fosfor .7s .15s var(--cikis-hizli) backwards;
}
.dev-d{display:inline-block}
.dev-d.tik{animation:tik-dev .22s var(--cikis-hizli)}
.dev-n{color:var(--m3)}
/* "21/25" gibi uzun skor sütuna sığar: önce vw yedeği, destekleyen tarayıcıda sütun genişliğinden (cqi). */
.dev-skor.uzun{font-size:clamp(96px,30vw,210px)}
@supports (width:1cqi){
  .sonuc-sol{container-type:inline-size}
  .dev-skor,.dev-skor.uzun{font-size:min(clamp(140px,44vw,280px),calc(100cqi / (var(--hane,3) * .5 + .12)))}
}
.unvan{margin-top:var(--s-5)}
.unvan span{
  display:inline-block;padding:.14em .32em .08em;border-radius:5px;
  background:var(--murekkep);color:var(--kart);outline:2px solid var(--kart);outline-offset:-8px;
  font:900 clamp(42px,11vw,76px)/1 var(--omuz);letter-spacing:.03em;text-transform:uppercase;
  transform:rotate(-2.5deg);animation:damga-unvan .44s .5s var(--cikis) backwards;
}
.unvan-cumle{margin-top:var(--s-5);max-width:32ch;font-size:clamp(19px,2.4vw,23px);line-height:1.4;color:var(--m2)}
.serit{list-style:none;padding:0;margin-top:var(--s-5);display:grid;grid-template-columns:repeat(var(--sutun,8),minmax(0,38px));gap:6px}
.serit.sik{gap:5px 4px}
.serit li{display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:5px;color:var(--kart);animation:pop .32s calc(.7s + var(--i,0) * .03s) var(--cikis) backwards}
.serit.sik li{border-radius:3px}
.serit li svg{width:min(18px,62%);height:auto}
.serit .dogru{background:var(--dogru)}
.serit .yanlis{background:var(--yanlis)}
.satirlar{list-style:none;padding:0;margin-top:var(--s-6);border-top:2px solid var(--murekkep)}
.satirlar li{padding:14px 0;border-bottom:1px solid var(--cizgi);font-weight:500;font-size:18px;line-height:1.4;animation:yuksel .4s var(--cikis) backwards}
.satirlar .satir-sirket:first-child,.satirlar .satir-yuzdelik{font-weight:700}
.paylas{display:grid;gap:10px;margin-top:var(--s-6);max-width:440px}
.durum{font-size:16px;color:var(--m2)}
.durum:empty{display:none}
.ekip-turu{
  display:inline-flex;align-items:center;justify-self:start;gap:8px;min-height:48px;margin-top:var(--s-2);
  font-weight:600;font-size:17px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;
}
.ekip-turu svg{transition:transform .2s var(--cikis)}
@media (hover:hover){.ekip-turu:hover svg{transform:translateX(3px)}}
.sonuc-kart{max-width:460px}
.sonuc-kart img{display:block;width:100%;height:auto;aspect-ratio:1080/1350;border-radius:var(--r);background:var(--kagit-2);box-shadow:0 0 0 1px var(--cizgi);opacity:0;transition:opacity .35s var(--cikis)}
.sonuc-kart.hazir img{opacity:1}

.gozden{margin-top:var(--s-8);border-top:2px solid var(--murekkep)}
.gozden summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:68px;
  list-style:none;cursor:pointer;font-weight:700;font-size:clamp(20px,3vw,24px);letter-spacing:-.02em;
}
.gozden summary::-webkit-details-marker{display:none}
.gozden summary::after{content:"+";font:900 34px/1 var(--omuz);transition:transform .2s var(--cikis)}
.gozden[open] summary::after{transform:rotate(45deg)}
.gz-say{margin-left:auto;font:500 14px/1 var(--mono);letter-spacing:.1em;color:var(--m2)}
.gz-liste{list-style:none;padding:0 0 var(--s-4)}
.gz-liste li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s-3);padding:var(--s-4) 0;border-top:1px solid var(--cizgi)}
.gz-isaret{display:grid;place-items:center;width:30px;height:30px;border-radius:5px;color:var(--kart)}
.gz-liste .dogru .gz-isaret{background:var(--dogru)}
.gz-liste .yanlis .gz-isaret{background:var(--yanlis)}
.gz-soru{display:block;font-weight:600;font-size:18px;line-height:1.35}
.gz-cevap{display:block;margin-top:4px;font-size:15px;color:var(--m2)}
.gz-cevap b{font:900 17px/1 var(--omuz);letter-spacing:.04em;color:var(--murekkep)}
.gz-gercek{display:block;margin-top:6px;max-width:62ch;font-size:16px;line-height:1.5;color:var(--m2)}

.veri{margin-top:var(--s-7);padding-top:var(--s-4);border-top:2px solid var(--murekkep)}
.veri h3{font-weight:700;font-size:clamp(20px,3vw,24px);letter-spacing:-.02em}
.veri .not{margin-top:4px}
.sira-liste{list-style:none;padding:0;margin-top:var(--s-4);display:grid;gap:2px;max-width:640px}
.sira-liste li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:10px 0}
.sira-liste .kendi .sl-ad{text-decoration:underline;text-decoration-color:var(--sari);text-decoration-thickness:6px;text-underline-offset:-2px;text-decoration-skip-ink:none}
.sl-no{font:900 22px/1 var(--omuz)}
.sl-ad{font-weight:600;font-size:18px}
.sl-ad small{margin-left:8px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--m2)}
.sl-oran{font:600 16px var(--mono)}
.sl-bar{grid-column:2/4;display:block;height:6px;border-radius:99px;background:var(--kagit-2);overflow:hidden}
.sl-bar i{display:block;height:100%;background:var(--murekkep);transform-origin:0 50%}
.veri table{width:100%;max-width:640px;margin-top:var(--s-4);border-collapse:collapse;font-size:17px}
.veri th{text-align:left;padding:8px 0;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--m2);border-bottom:2px solid var(--murekkep)}
.veri td{padding:12px 0;border-bottom:1px solid var(--cizgi)}
.veri .sayi{text-align:right;font-variant-numeric:tabular-nums;padding-left:16px}
.sonuc .kunye{margin-top:var(--s-8)}

@media (min-width:960px){
  .sonuc-izgara{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;gap:var(--s-8)}
  .sonuc-kart{position:sticky;top:var(--s-5);justify-self:end;width:100%}
}

/* ---------------------------------------------------------------- Hareket */

@keyframes gir{from{opacity:0;transform:translateX(32px)}}
@keyframes gir-geri{from{opacity:0;transform:translateX(-32px)}}
@keyframes cik{to{opacity:0;transform:translateX(-36px)}}
@keyframes yuksel{from{opacity:0;transform:translateY(12px)}}
@keyframes kart-gir{from{opacity:0;transform:translateY(22px) rotate(1.5deg)}}
@keyframes fosfor{from{transform:scaleX(0)}}
@keyframes dol{from{transform:scaleX(0)}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes tik{0%{opacity:0;transform:translateY(70%) scale(1.3)}100%{opacity:1;transform:none}}
@keyframes tik-dev{0%{transform:translateY(6%) scale(1.04)}100%{transform:none}}
@keyframes damga{
  0%{opacity:0;transform:rotate(-13deg) scale(1.9)}
  60%{opacity:1;transform:rotate(-5deg) scale(.95)}
  100%{opacity:1;transform:rotate(-5deg) scale(1)}
}
@keyframes damga-unvan{
  0%{opacity:0;transform:rotate(-9deg) scale(1.7)}
  60%{opacity:1;transform:rotate(-2.5deg) scale(.96)}
  100%{opacity:1;transform:rotate(-2.5deg) scale(1)}
}
@keyframes darbe{0%{transform:none}40%{transform:scale(.982) rotate(-.5deg)}100%{transform:none}}

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