/* ================= TEMA JETONLARI ================= */
:root{
  --violet:#8B5CF6; --indigo:#6366F1; --cyan:#22D3EE;
  --iyi:#4ADE80; --kotu:#FB7185;
  --r-s:10px; --r:14px; --r-l:20px;
  --golge-s:0 2px 8px rgba(0,0,0,.16);
  --golge:0 12px 32px rgba(0,0,0,.30);
  --golge-l:0 24px 64px rgba(0,0,0,.42);
  --gecis:.18s cubic-bezier(.4,0,.2,1);
  --alt-guvenli:env(safe-area-inset-bottom,0px);
}
/* koyu (varsayılan) */
:root[data-tema="koyu"]{
  --bg:#08080B; --bg-2:#0C0C11; --cam:rgba(12,12,17,.88);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --surface:rgba(255,255,255,.03); --surface-2:rgba(255,255,255,.07);
  --text:#F4F4F6; --text-2:#A3A3AE; --text-3:#6E6E7A;
  --deniz:#0B1A2E; --kara:#171B24; --kara-2:#212633;
  --kiyi:rgba(120,190,255,.28); --il-cizgi:rgba(255,255,255,.06);
  --kontur:rgba(8,8,11,.85);
  --su:#1D4E7A; --su-kenar:#2E7BB8; --akarsu:rgba(80,150,215,.55);
  --komsu:#0F141C; --komsu-cizgi:rgba(255,255,255,.05);
  --kb-1:rgba(190,155,100,.10); --kb-2:rgba(206,155,88,.15); --kb-3:rgba(235,180,105,.24);
  --isik:radial-gradient(120% 90% at 50% 0%,#0E1420 0%,#08080B 70%);
}
/* açık */
:root[data-tema="acik"]{
  --bg:#F6F7FB; --bg-2:#FFFFFF; --cam:rgba(255,255,255,.9);
  --line:rgba(16,20,34,.10); --line-2:rgba(16,20,34,.20);
  --surface:rgba(16,20,34,.026); --surface-2:rgba(16,20,34,.06);
  --text:#12141C; --text-2:#4C5361; --text-3:#7B8394;
  --violet:#7C3AED; --indigo:#4F46E5; --cyan:#0891B2;
  --iyi:#15A34A; --kotu:#E11D48;
  --deniz:#C9DFF2; --kara:#FAFAF6; --kara-2:#E9EEF6;
  --kiyi:rgba(30,90,160,.22); --il-cizgi:rgba(16,20,34,.13);
  --kontur:rgba(255,255,255,.9);
  --su:#7FB4DC; --su-kenar:#3E85BE; --akarsu:rgba(62,133,190,.6);
  --komsu:#E7E9E4; --komsu-cizgi:rgba(16,20,34,.10);
  --kb-1:rgba(150,122,72,.11); --kb-2:rgba(158,116,58,.17); --kb-3:rgba(146,94,42,.26);
  --isik:radial-gradient(120% 90% at 50% 0%,#EAF1F9 0%,#F6F7FB 70%);
  --golge-s:0 2px 8px rgba(16,20,34,.07);
  --golge:0 12px 32px rgba(16,20,34,.10);
  --golge-l:0 24px 60px rgba(16,20,34,.16);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:none;
  transition:background .25s,color .25s;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:8px}
.mono{font-family:'Fira Code',ui-monospace,monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}

/* ================= ÜST ŞERİT ================= */
header{
  display:flex;align-items:center;gap:10px;
  padding:10px max(14px,env(safe-area-inset-left)) 10px max(14px,env(safe-area-inset-right));
  border-bottom:1px solid var(--line);background:var(--cam);backdrop-filter:blur(14px);
  flex:0 0 auto;z-index:20;
}
.marka{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:15px}
.marka i{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:14px;
  background:linear-gradient(135deg,var(--violet),var(--cyan));color:#fff;font-weight:900;
  box-shadow:0 4px 14px color-mix(in srgb,var(--violet) 40%,transparent);
}
.marka small{display:block;font-size:9px;letter-spacing:.18em;color:var(--text-3);font-weight:600;text-transform:uppercase}
header .bosluk{flex:1}
.yuvarlak{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);transition:var(--gecis);
}
.yuvarlak:hover{background:var(--surface-2);color:var(--text)}
:root[data-tema="koyu"] .gunes{display:none}
:root[data-tema="acik"] .ay{display:none}

#hesap-alani{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
#hesap-alani .kul{display:flex;align-items:center;gap:7px;color:var(--text);font-weight:600;
  border:1px solid var(--line);background:var(--surface);padding:4px 10px 4px 4px;border-radius:99px}
#hesap-alani .kul img{width:24px;height:24px;border-radius:50%;object-fit:cover}
#hesap-alani .kul .harf{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--violet),var(--indigo));color:#fff;font-size:11px;font-weight:800}
.misafir{font-size:11px;color:var(--text-3);border:1px dashed var(--line-2);padding:3px 9px;border-radius:99px;cursor:help}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:var(--r-s);
  background:var(--surface-2);border:1px solid var(--line);font-size:14px;font-weight:600;
  transition:var(--gecis);white-space:nowrap;min-height:42px;
}
.btn:hover{background:color-mix(in srgb,var(--text) 8%,transparent);border-color:var(--line-2)}
.btn:active{transform:scale(.985)}
.btn.ince{padding:7px 12px;font-size:13px;min-height:36px}
.btn.birincil{background:linear-gradient(135deg,var(--violet),var(--indigo));border-color:transparent;color:#fff;
  box-shadow:0 8px 22px color-mix(in srgb,var(--violet) 32%,transparent)}
.btn.birincil:hover{filter:brightness(1.08)}
.btn.birincil:disabled{opacity:.6;cursor:progress;filter:none}

/* ================= EKRAN ANAHTARI ================= */
main{flex:1;min-height:0;position:relative;overflow:hidden}
#kapi,#menu,#oyun{position:absolute;inset:0;display:none}
body[data-ekran="acilis"] main::after{
  content:'';position:absolute;inset:0;background:var(--bg);
  background-image:radial-gradient(closest-side,color-mix(in srgb,var(--violet) 12%,transparent),transparent);
}
body[data-ekran="kapi"] #kapi{display:grid}
body[data-ekran="menu"] #menu{display:block;overflow-y:auto;overscroll-behavior:contain}
body[data-ekran="oyun"] #oyun{display:grid;grid-template-rows:auto 1fr}
body[data-ekran="kapi"] #hesap-alani,body[data-ekran="acilis"] #hesap-alani{display:none}
body[data-ekran="kapi"] footer,body[data-ekran="acilis"] footer{display:none}

/* ================= GİRİŞ KAPISI ================= */
#kapi{place-items:center;overflow-y:auto;background:var(--isik)}
.kapi-perde{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(38% 30% at 18% 12%,color-mix(in srgb,var(--violet) 40%,transparent),transparent 70%),
    radial-gradient(34% 28% at 84% 78%,color-mix(in srgb,var(--cyan) 34%,transparent),transparent 70%);
  filter:blur(30px);
}
.kapi-ic{
  position:relative;z-index:1;width:min(560px,92vw);
  padding:34px clamp(20px,5vw,38px) 30px;margin:26px 0;
  border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--cam);backdrop-filter:blur(18px);box-shadow:var(--golge-l);
}
.kapi-rozet{
  display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--violet);border:1px solid color-mix(in srgb,var(--violet) 35%,transparent);
  background:color-mix(in srgb,var(--violet) 12%,transparent);padding:5px 11px;border-radius:99px;
}
.kapi-ic h1{margin-top:16px;font-size:clamp(26px,6.4vw,40px);font-weight:900;letter-spacing:-.035em;line-height:1.12}
.kapi-ic h1 span{background:linear-gradient(120deg,var(--violet),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kapi-alt{color:var(--text-2);margin-top:12px;font-size:15px;line-height:1.6}
.kapi-liste{list-style:none;margin:20px 0 24px;display:flex;flex-direction:column;gap:9px}
.kapi-liste li{position:relative;padding-left:26px;font-size:14px;color:var(--text-2);line-height:1.5}
.kapi-liste li b{color:var(--text);font-weight:700}
.kapi-liste li::before{
  content:'';position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:color-mix(in srgb,var(--iyi) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--iyi) 55%,transparent);
}
.kapi-liste li::after{content:'';position:absolute;left:5.2px;top:10.5px;width:5px;height:2.5px;
  border-left:2px solid var(--iyi);border-bottom:2px solid var(--iyi);transform:rotate(-45deg)}
.btn.google{width:100%;padding:15px;font-size:15px;min-height:52px;border-radius:13px}
#giris-uyari{color:var(--kotu);font-size:13px;line-height:1.5;margin-top:11px;min-height:18px}
.kapi-not{color:var(--text-3);font-size:12px;margin-top:10px;line-height:1.5}

/* ================= MENÜ ================= */
.sarici{max-width:1180px;margin:0 auto;
  padding:30px max(16px,env(safe-area-inset-left)) calc(60px + var(--alt-guvenli)) max(16px,env(safe-area-inset-right))}
.hero-selam{font-size:clamp(22px,4.6vw,32px);font-weight:900;letter-spacing:-.03em;line-height:1.2}
.hero p{color:var(--text-2);margin-top:7px;max-width:58ch;font-size:14.5px}
#genel-ozet{margin-top:15px;font-size:13.5px;color:var(--text-2);
  border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 15px;display:inline-block}
#genel-ozet b{color:var(--text)}

.baslik-sat{display:flex;align-items:baseline;gap:11px;margin:32px 0 13px;flex-wrap:wrap}
.baslik-sat h3{font-size:16px;font-weight:800;letter-spacing:-.015em}
.baslik-sat span{color:var(--text-3);font-size:12.5px}

#kart-alani{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.kart{
  position:relative;text-align:left;padding:16px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg-2);overflow:hidden;transition:var(--gecis);
  box-shadow:var(--golge-s);
}
.kart::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 90% at 0% 0%,color-mix(in srgb,var(--k) 16%,transparent),transparent 62%)}
.kart:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--k) 50%,transparent);box-shadow:var(--golge)}
.kart-ikon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-size:16px;
  background:color-mix(in srgb,var(--k) 16%,transparent);color:var(--k);
  border:1px solid color-mix(in srgb,var(--k) 30%,transparent)}
.kart-ad{display:block;margin-top:12px;font-weight:800;font-size:16px;letter-spacing:-.015em}
.kart-alt{display:block;color:var(--text-3);font-size:12px;margin-top:2px}
.kart-bar{display:block;height:5px;border-radius:99px;background:color-mix(in srgb,var(--text) 9%,transparent);margin-top:14px;overflow:hidden}
.kart-bar i{display:block;height:100%;background:var(--k);border-radius:99px;transition:width .5s}
.kart-yuzde{position:absolute;top:15px;right:15px;font-size:12.5px;font-weight:800;color:var(--k)}

#zayif-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:9px}
.zayif{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;text-align:left;
  border:1px solid var(--line);background:var(--bg-2);transition:var(--gecis)}
.zayif:hover{border-color:var(--kotu);background:color-mix(in srgb,var(--kotu) 8%,var(--bg-2))}
.zayif b{font-size:13.5px;font-weight:700}
.zayif span{flex:1;font-size:11.5px;color:var(--text-3)}
.zayif em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--kotu)}
.bos{color:var(--text-3);font-size:13.5px}

/* ================= OYUN ÜST ÇUBUĞU ================= */
#oyun-ust{
  display:flex;align-items:center;gap:12px;
  padding:9px max(12px,env(safe-area-inset-left)) 9px max(12px,env(safe-area-inset-right));
  border-bottom:1px solid var(--line);background:var(--bg-2);
}
.ust-orta{min-width:0;flex:1;overflow:hidden}
#oyun-baslik{font-weight:800;font-size:14.5px;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#oyun-tanim{color:var(--text-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skorlar{display:flex;align-items:center;gap:8px;font-size:13px;flex:0 0 auto}
.rozet{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:12.5px}
.rozet.d{color:var(--iyi)} .rozet.y{color:var(--kotu)}
.hak{display:flex;align-items:center;gap:7px;color:var(--text-3);font-size:12px}
.hak-bar{width:74px;height:6px;border-radius:99px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.hak-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .5s}

/* ================= HARİTA ================= */
#harita-alani{position:relative;min-height:0;background:var(--isik);display:flex;align-items:center}
#harita{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#harita:active{cursor:grabbing}
.deniz{fill:var(--deniz)}
.komsu{fill:var(--komsu);stroke:var(--komsu-cizgi);stroke-width:.5;pointer-events:none}
.halo path{fill:none;stroke:var(--kiyi);stroke-width:7;stroke-linejoin:round}
.kara path,.k-zemin .il{fill:var(--kara);stroke:var(--il-cizgi);stroke-width:.6;transition:fill .15s}
#harita.il-gizli .kara path{stroke:transparent}
.k-zemin .il.aday{cursor:pointer}
.k-zemin .il.aday:hover{fill:var(--kara-2)}
.k-zemin .il.dogru{fill:color-mix(in srgb,var(--iyi) 42%,var(--kara))!important;stroke:var(--iyi)}
.k-zemin .il.yanlis{fill:color-mix(in srgb,var(--kotu) 40%,var(--kara))!important;stroke:var(--kotu)}

/* yükselti dokusu — gerçek zirvelerden */
.kabartma{stroke:none;pointer-events:none}
.kb-1{fill:var(--kb-1)} .kb-2{fill:var(--kb-2)} .kb-3{fill:var(--kb-3)}
#harita.kabartma-gizli .k-kabartma{display:none}

/* kalıcı su katmanı */
.su-govde{fill:var(--su);stroke:var(--su-kenar);stroke-width:.5;pointer-events:none}
.su-akarsu{fill:none;stroke:var(--akarsu);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.su-aday{
  fill:color-mix(in srgb,var(--kat-renk) 55%,var(--su));
  stroke:color-mix(in srgb,var(--kat-renk) 85%,transparent);stroke-width:1.2;
  cursor:pointer;transition:var(--gecis);
}
.su-aday:hover{fill:color-mix(in srgb,var(--kat-renk) 78%,var(--su))}
.su-aday.dogru{fill:var(--iyi);stroke:var(--iyi);stroke-width:2}
.su-aday.yanlis{fill:var(--kotu);stroke:var(--kotu);stroke-width:2;animation:sars .42s}

.k-alan .alan{
  fill:color-mix(in srgb,var(--kat-renk) 28%,transparent);
  stroke:color-mix(in srgb,var(--kat-renk) 78%,transparent);
  stroke-width:1.2;cursor:pointer;transition:var(--gecis);
}
.k-alan .alan:hover{fill:color-mix(in srgb,var(--kat-renk) 45%,transparent)}
.k-alan .alan.dogru{fill:color-mix(in srgb,var(--iyi) 48%,transparent);stroke:var(--iyi);stroke-width:2}
.k-alan .alan.yanlis{fill:color-mix(in srgb,var(--kotu) 42%,transparent);stroke:var(--kotu);stroke-width:2}

.k-cizgi .kusak{fill:none;stroke:color-mix(in srgb,var(--kat-renk) 60%,transparent);
  stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.k-cizgi .cizgi{cursor:pointer}
.cizgi-vurus{fill:none;stroke:transparent;stroke-width:16;stroke-linecap:round}
.cizgi-govde{fill:none;stroke:color-mix(in srgb,var(--kat-renk) 88%,transparent);
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transition:var(--gecis)}
.k-cizgi .cizgi:hover .cizgi-govde{stroke-width:3.6}
.k-cizgi .cizgi.dogru .cizgi-govde{stroke:var(--iyi);stroke-width:3.8}
.k-cizgi .cizgi.yanlis .cizgi-govde{stroke:var(--kotu);stroke-width:3.8}

.k-nokta .nokta{cursor:pointer}
.k-nokta .hale{fill:transparent}
.k-nokta .isaret{fill:color-mix(in srgb,var(--kat-renk) 90%,transparent);
  stroke:var(--kontur);stroke-width:2;transition:var(--gecis)}
.k-nokta .nokta:hover .isaret{fill:var(--text)}
.k-nokta .nokta:hover .hale{fill:color-mix(in srgb,var(--kat-renk) 20%,transparent)}
.k-nokta .nokta.dogru .isaret{fill:var(--iyi);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--iyi) 70%,transparent))}
.k-nokta .nokta.yanlis .isaret{fill:var(--kotu)}
.k-nokta .nokta.yanlis{animation:sars .42s}
/* gerçek gövdesi çizilen göllerde işaret küçülsün, asıl hedef gövde olsun */
.k-nokta .nokta.govdeli .isaret{opacity:.9;transform:scale(.62)}
.k-nokta .nokta.govdeli.dogru .isaret{opacity:1}

.k-etiket text{fill:var(--text-2);font-size:11px;font-weight:600;text-anchor:middle;
  paint-order:stroke;stroke:var(--kontur);stroke-width:3.5;pointer-events:none}

.dalga{fill:none;stroke:var(--iyi);stroke-width:2.5;animation:dalga 1.15s ease-out both}
@keyframes dalga{from{r:6;opacity:.95}to{r:52;opacity:0}}
@keyframes sars{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)}
  40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)}
}

/* yön oku — ilk yanlıştan sonra */
.ok path{fill:none;stroke:var(--kotu);stroke-width:2.4;stroke-linecap:round;opacity:.9;
  animation:okBelir .3s ease-out both}
.ok .ok-uc{fill:var(--kotu);stroke:none}
@keyframes okBelir{from{opacity:0;transform:scale(.85)}to{opacity:.9;transform:scale(1)}}

/* ipucu aşamasında doğru ilin belirmesi */
.k-zemin .il.ipucu{fill:color-mix(in srgb,var(--violet) 30%,var(--kara))!important;
  stroke:var(--violet);stroke-width:1.1;animation:ipucuNabiz 1.6s ease-in-out infinite}
@keyframes ipucuNabiz{0%,100%{opacity:1}50%{opacity:.62}}

/* ================= SORU KUTUSU ================= */
#soru-kutu{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:14px;
  background:var(--cam);border:1px solid var(--line-2);backdrop-filter:blur(16px);
  box-shadow:var(--golge);max-width:min(94vw,700px);
}
#soru-kutu.zayif{border-color:color-mix(in srgb,var(--kotu) 55%,transparent)}
.soru-govde{min-width:0;flex:1}
#soru-metin{font-size:15px;line-height:1.35}
#soru-metin b{font-weight:800;letter-spacing:-.015em}
.soru-etiket{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:800}
#soru-rozet{font-size:11px;color:var(--text-3);border:1px solid var(--line);padding:3px 9px;border-radius:99px;white-space:nowrap;flex:0 0 auto}

/* kalan hak noktaları */
.haklar{display:flex;gap:5px;flex:0 0 auto}
.hak-nokta{width:9px;height:9px;border-radius:50%;background:var(--iyi);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--iyi) 40%,transparent);transition:var(--gecis)}
.hak-nokta.bitti{background:transparent;box-shadow:0 0 0 1px var(--line-2);transform:scale(.8)}

/* kademeli ipucu satırı */
.ipucu{display:none;margin-top:5px;font-size:12.5px;font-weight:600;color:var(--kotu);line-height:1.35}
.ipucu.goster{display:block;animation:ipucuGir .22s ease-out both}
.ipucu.yakin{color:#F59E0B}
.ipucu.son{color:var(--violet)}
@keyframes ipucuGir{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.rozet.puan{color:var(--violet)}
.rozet.seri{color:var(--text-3)}
.rozet.seri.ates{color:#F59E0B;border-color:color-mix(in srgb,#F59E0B 45%,transparent);
  background:color-mix(in srgb,#F59E0B 12%,transparent)}
.gb-puan{float:right;color:var(--iyi);font-weight:800;letter-spacing:0}
.gb-tekrar{font-size:11.5px;color:var(--text-3);margin-top:8px}
.kisayol{opacity:.6;font-size:11px;border:1px solid currentColor;border-radius:5px;padding:0 5px;margin-left:6px}

/* ================= ARAÇ ÇUBUĞU ================= */
#arac{position:absolute;top:12px;right:12px;z-index:6;display:flex;flex-direction:column;gap:6px}
#arac button{
  width:40px;height:40px;display:grid;place-items:center;border-radius:11px;font-size:15px;font-weight:600;
  background:var(--cam);border:1px solid var(--line);backdrop-filter:blur(10px);transition:var(--gecis);
  color:var(--text-2);
}
#arac button:hover{background:var(--surface-2);color:var(--text)}
#arac button.acik{border-color:var(--violet);color:var(--violet)}

#alt-arac{position:absolute;left:12px;bottom:calc(12px + var(--alt-guvenli));z-index:6;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.anahtar{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);cursor:pointer;
  background:var(--cam);border:1px solid var(--line);padding:8px 12px;border-radius:var(--r-s);
  backdrop-filter:blur(10px);min-height:36px}
.anahtar input{accent-color:var(--violet);width:16px;height:16px}

/* ================= GERİ BİLDİRİM ================= */
.geri-bildirim{
  position:absolute;left:50%;bottom:calc(14px + var(--alt-guvenli));transform:translate(-50%,16px);z-index:8;
  width:min(94vw,470px);padding:16px 18px;border-radius:16px;
  background:var(--cam);border:1px solid var(--line-2);backdrop-filter:blur(16px);
  box-shadow:var(--golge-l);opacity:0;pointer-events:none;transition:var(--gecis);
}
.geri-bildirim.goster{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.geri-bildirim.iyi{border-color:color-mix(in srgb,var(--iyi) 50%,transparent)}
.geri-bildirim.kotu{border-color:color-mix(in srgb,var(--kotu) 50%,transparent)}
.gb-bas{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.iyi .gb-bas{color:var(--iyi)} .kotu .gb-bas{color:var(--kotu)}
.gb-ad{font-size:20px;font-weight:800;letter-spacing:-.025em;margin-top:3px;line-height:1.2}
.gb-satir{font-size:12.5px;color:var(--text-3);margin-top:2px}
.gb-not{font-size:13px;color:var(--text-2);margin-top:10px;padding-top:10px;border-top:1px solid var(--line);line-height:1.5}
.geri-bildirim .btn{margin-top:13px;width:100%}

/* ================= PENCERELER ================= */
dialog{
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);border-radius:18px;
  padding:0;max-width:min(94vw,620px);width:100%;box-shadow:var(--golge-l);
}
dialog::backdrop{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(4px)}
.pen-ust{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg-2);border-radius:18px 18px 0 0;z-index:2}
.pen-ust h3{font-size:16px;font-weight:800;letter-spacing:-.015em;flex:1}
.pen-ic{padding:14px 18px calc(20px + var(--alt-guvenli));max-height:min(72vh,600px);overflow-y:auto;overscroll-behavior:contain}
.kapat{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--text-3);flex:0 0 auto}
.kapat:hover{background:var(--surface-2);color:var(--text)}

#alt-liste{display:flex;flex-direction:column;gap:7px}
.alt-sat{text-align:left;padding:13px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);transition:var(--gecis);display:block}
.alt-sat:hover{border-color:var(--k);background:var(--surface-2);transform:translateX(3px)}
.as-ad{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px}
.as-ad em{font-style:normal;font-size:11px;color:var(--text-3);border:1px solid var(--line);
  padding:1px 8px;border-radius:99px;margin-left:auto}
.as-tanim{display:block;font-size:12.5px;color:var(--text-3);margin-top:4px;line-height:1.45}
.as-bar{display:block;height:4px;border-radius:99px;background:color-mix(in srgb,var(--text) 9%,transparent);margin-top:10px;overflow:hidden}
.as-bar i{display:block;height:100%;background:var(--k)}

.ayrim-blok{margin-bottom:20px}
.ayrim-blok h4{font-size:13px;font-weight:800;color:var(--k);margin-bottom:8px}
.ayrim-sat{padding:10px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:170px 1fr;gap:14px}
.ayrim-sat b{font-size:13.5px}
.ayrim-sat span{font-size:13px;color:var(--text-2)}

footer{padding:9px max(16px,env(safe-area-inset-left)) calc(9px + var(--alt-guvenli));
  border-top:1px solid var(--line);color:var(--text-3);font-size:11.5px;
  display:flex;gap:14px;align-items:center;flex:0 0 auto}
footer .bosluk{flex:1}

/* ================= MOBİL ================= */
@media (max-width:860px){
  .ayrim-sat{grid-template-columns:1fr;gap:3px}
}
@media (max-width:720px){
  body{font-size:14.5px}
  header{padding-top:max(8px,env(safe-area-inset-top))}
  .marka small{display:none}
  #oyun-tanim{display:none}
  .hak,.rozet.d,.rozet.y{display:none}   /* dar ekranda yalnız puan ve seri kalsın */
  .geri-yazi{display:none}
  #oyun-ust{gap:8px}
  .skorlar{gap:6px}
  .rozet{padding:4px 8px;font-size:12px}
  #soru-rozet{display:none}
  .btn.ince.geri{padding:7px 9px}
  .sarici{padding-top:22px}
  #kart-alani{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .kart{padding:13px}
  .kart-ad{font-size:14.5px;margin-top:10px}
  .kart-ikon{width:32px;height:32px}
  #zayif-liste{grid-template-columns:1fr}

  /* harita üstte dursun ki alttan açılan geri bildirim kartı üstünü örtmesin */
  #harita-alani{align-items:flex-start;padding-top:74px}
  #harita{height:auto;max-height:100%}
  #soru-kutu{top:10px;left:10px;right:10px;transform:none;max-width:none;padding:11px 13px}
  #soru-metin{font-size:14.5px}
  #arac{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;
    top:auto;bottom:calc(60px + var(--alt-guvenli));left:10px;right:10px}
  #arac button{width:44px;height:44px}
  #alt-arac{left:10px;right:10px;bottom:calc(10px + var(--alt-guvenli));justify-content:space-between;flex-wrap:nowrap}
  #alt-arac .btn{flex:1 1 auto;min-width:0}
  .anahtar{flex:0 0 auto}
  #alt-arac .btn,.anahtar{min-height:42px}

  /* geri bildirim: alt sayfa (bottom sheet) */
  .geri-bildirim{left:0;right:0;bottom:0;width:auto;transform:translateY(16px);
    border-radius:20px 20px 0 0;border-bottom:none;
    padding:18px 18px calc(18px + var(--alt-guvenli))}
  .geri-bildirim.goster{transform:translateY(0)}
  .gb-ad{font-size:19px}

  dialog{max-width:100%;border-radius:20px 20px 0 0;margin:auto auto 0;max-height:88vh}
  .pen-ust{border-radius:20px 20px 0 0}
  .kapi-ic{margin:14px 0;padding:26px 20px 24px;border-radius:18px}
}
@media (max-width:380px){
  #kart-alani{grid-template-columns:1fr 1fr}
  .kart-yuzde{top:12px;right:12px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}