:root{
color-scheme:dark;
/* Sag ok maskesi - bkz. .git::before. Maskede cizgi rengi onemsiz (yalniz
alfa kanali okunur), o yuzden siyah birakildi. */
--ok-sag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
--zemin:#06070d; --zemin2:#0c0e1a; --kart:rgba(255,255,255,.045); --kart2:rgba(255,255,255,.08);
--cizgi:rgba(255,255,255,.09); --cizgi2:rgba(255,255,255,.18);
/* Yazi renkleri WCAG 2.2 AA'ya gore secildi (kart zemini #0f111c uzerinde olculdu,
7 Eylul 2026): --yazi 16,5:1 · --soluk 7,4:1 · --soluk2 5,0:1.
--soluk2 onceden #6b7488 idi ve 4,01:1 veriyordu; tablo basliklarinda 12 px
yaziyla kullanildigi icin AA esigini (4,5) gecmiyordu. Bu uc rengi
degistirirken araclar/oyunkuru_kontrast.py ile yeniden olcun. */
--yazi:#eef0f8; --soluk:#9aa3b8; --soluk2:#7b8498;
--marka:#8b5cf6; --marka2:#22d3ee; --pembe:#f472b6; --altin:#f5c542;
--ucuz:#34f5a3; --pahali:#ff5c7c;
--bag:#c4b5fd; /* metin icindeki baglanti - kart uzerinde 10,1:1 */
--mor2:#a78bfa; /* ikincil mor: rozet, ikon */
--odak:#ffe27a; /* klavye odak halkasi - her zemin uzerinde gorunur */
--golge:0 10px 40px rgba(0,0,0,.45);
--parilti:0 0 0 1px rgba(139,92,246,.45),0 14px 48px rgba(139,92,246,.28);
--gradyan:linear-gradient(135deg,#8b5cf6 0%,#22d3ee 100%);
--gradyan3:linear-gradient(135deg,#8b5cf6,#22d3ee,#f472b6);
--yumusak:cubic-bezier(.2,.8,.2,1);
}
@view-transition{navigation:auto}
*{box-sizing:border-box}
/* ---- erisilebilirlik cekirdegi (5. masa) ----
Klavyeyle gezen herkes nerede oldugunu gormeli. Fare tiklamasinda halka cikmaz
(:focus-visible), klavyede her zaman cikar. Kontrast icin cift halka: koyu zeminde
acik ic halka + koyu dis halka, hangi renk ustunde olursa olsun gorunur. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
outline:3px solid var(--odak);
outline-offset:2px;
border-radius:6px;
box-shadow:0 0 0 6px rgba(0,0,0,.55);
}
/* Gizli radyo/onay kutusu ile calisan sekmelerde halka etikete tasinir. */
.hesap .sekmeler input:focus-visible+label,
input.gizli-giris:focus-visible+label{
outline:3px solid var(--odak);outline-offset:2px;box-shadow:0 0 0 6px rgba(0,0,0,.55)}
/* Yalnizca ekran okuyucunun gordugu metin: tablo basliklari, gizli sutun adlari.
display:none KULLANILMAZ - o metni okuyucudan da gizler. */
.sr{position:absolute;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}
/* "Icerige atla": klavyeyle Tab'a basildiginda gorunur olur. */
.atla{position:absolute;left:12px;top:-64px;z-index:200;padding:12px 18px;border-radius:0 0 12px 12px;
background:var(--odak);color:#0b0b12;font-weight:800;font-size:15px;text-decoration:none;
transition:top .16s var(--yumusak)}
.atla:focus{top:0}
main:focus{outline:none}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--zemin);color:var(--yazi);
font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;min-height:100vh}
/* Zemin: renk sisleri + perspektif izgara. Kutuphane yok, tek katman. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
background:radial-gradient(60% 50% at 12% 8%,rgba(139,92,246,.22),transparent 62%),
radial-gradient(45% 40% at 88% 18%,rgba(34,211,238,.14),transparent 62%),
radial-gradient(40% 40% at 55% 95%,rgba(244,114,182,.10),transparent 60%),
var(--zemin)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:46px 46px;
-webkit-mask-image:radial-gradient(70% 55% at 50% 0%,#000 0%,transparent 100%);
mask-image:radial-gradient(70% 55% at 50% 0%,#000 0%,transparent 100%)}
.sar{max-width:1140px;margin:0 auto;padding:0 18px}
/* overflow-wrap: metin icinde ciplak URL bagi cok yerde geciyor
("Yayincinin resmi adresi: https://store.steampowered.com/app/2203070/...").
Kirilma noktasi olmayan bu adresler 390 px ekranda 5-135 px yatay kaydirma
aciyordu (9 Eylul 2026, 9 oyun sayfasi). break-word secildi, anywhere degil:
anywhere min-content genisligini sifirlar ve flex/grid ogelerini beklenmedik
sekilde daraltir. */
a{color:inherit;text-decoration:none;overflow-wrap:break-word}
img{max-width:100%}
::selection{background:rgba(139,92,246,.45)}
h1,h2,h3{text-wrap:balance}
/* ---- ust bar (cam) ---- */
.ustbar{position:sticky;top:0;z-index:70;
background:rgba(6,7,13,.62);backdrop-filter:blur(16px) saturate(1.4);
-webkit-backdrop-filter:blur(16px) saturate(1.4);
border-bottom:1px solid var(--cizgi)}
.ustbar .sar{display:flex;align-items:center;gap:12px;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;
letter-spacing:-.4px;min-height:44px;flex:0 0 auto}
.logo .im{width:34px;height:34px;border-radius:11px;flex:0 0 auto;background:var(--gradyan);
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 18px rgba(139,92,246,.45)}
.logo .im svg{width:20px;height:20px}
.logo b{background:linear-gradient(135deg,#fff,var(--bag) 60%,#67e8f9);
-webkit-background-clip:text;background-clip:text;color:transparent}
.menu{display:flex;gap:2px;margin-left:auto;flex:0 0 auto}
.menu a{padding:8px 12px;border-radius:10px;color:var(--soluk);font-weight:600;
font-size:14px;min-height:44px;display:flex;align-items:center;transition:.2s}
.menu a:hover,.menu a[aria-current]{background:var(--kart2);color:var(--yazi)}
/* ---- arama ---- */
.arama{position:relative;flex:1 1 auto;max-width:520px}
.arama input{width:100%;min-height:44px;padding:11px 14px 11px 42px;border-radius:12px;
border:1px solid var(--cizgi2);background:rgba(255,255,255,.06);color:var(--yazi);
font-size:16px;outline:none;transition:.2s}
.arama input:focus{border-color:var(--marka);box-shadow:0 0 0 4px rgba(139,92,246,.22);
background:rgba(255,255,255,.09)}
.arama input::placeholder{color:var(--soluk2)}
.arama .bs{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;
opacity:.6;pointer-events:none;z-index:1}
.buyukarama{max-width:640px;margin:0 auto}
.buyukarama input{min-height:58px;font-size:17px;padding:15px 16px 15px 50px;border-radius:16px;
background:rgba(10,12,22,.7);backdrop-filter:blur(10px)}
.buyukarama .bs{left:18px;width:20px;height:20px}
body.ana .ustbar .arama{display:none}
/* ---- kahraman (ana sayfa, 3B sahne) ---- */
.kahraman{position:relative;text-align:center;padding:64px 0 34px;overflow:visible;isolation:isolate}
.kahraman.ana{min-height:min(78vh,640px);display:flex;align-items:center;justify-content:center;
padding:40px 24px 30px;overflow:hidden;border-radius:28px;margin-top:14px;
border:1px solid var(--cizgi);background:rgba(255,255,255,.015)}
.sahne{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.sahne canvas{width:100%;height:100%;display:block}
.orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;z-index:-1;pointer-events:none;
will-change:transform}
.orb.o1{width:440px;height:440px;left:-120px;top:-80px;background:#7c3aed;animation:yuz 14s ease-in-out infinite}
.orb.o2{width:380px;height:380px;right:-100px;top:10px;background:#0891b2;animation:yuz 18s ease-in-out infinite reverse}
.orb.o3{width:300px;height:300px;left:40%;bottom:-140px;background:#db2777;opacity:.35;animation:yuz 22s ease-in-out infinite}
@keyframes yuz{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-26px,0) scale(1.08)}}
.kh-ic{position:relative;max-width:820px;margin:0 auto;padding:10px 20px;border-radius:40px;
background:radial-gradient(55% 60% at 50% 50%,rgba(6,7,13,.66),rgba(6,7,13,.25) 70%,transparent 100%)}
.ustyazi{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
font-size:14px;font-weight:600;letter-spacing:.3px;color:var(--bag);
background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.35);margin-bottom:18px}
.ustyazi i{width:8px;height:8px;border-radius:50%;background:var(--ucuz);
box-shadow:0 0 0 0 rgba(52,245,163,.6);animation:nabiz 2s infinite}
@keyframes nabiz{0%{box-shadow:0 0 0 0 rgba(52,245,163,.55)}70%{box-shadow:0 0 0 9px rgba(52,245,163,0)}100%{box-shadow:0 0 0 0 rgba(52,245,163,0)}}
.kahraman h1{font-size:clamp(34px,6vw,64px);line-height:1.04;margin:0 0 16px;letter-spacing:-1.6px;
font-weight:800}
.kahraman h1 em{font-style:normal;background:var(--gradyan3);-webkit-background-clip:text;
background-clip:text;color:transparent;background-size:200% 200%;animation:gradkay 8s ease infinite}
@keyframes gradkay{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.kahraman p{color:var(--soluk);margin:0 auto 26px;max-width:600px;font-size:18px;line-height:1.6}
.kahraman p a{color:var(--bag);text-decoration:underline;text-underline-offset:3px}
.sayaclar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:28px}
.sayac{display:flex;flex-direction:column;align-items:center;min-width:120px;padding:12px 18px;
border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--cizgi);
backdrop-filter:blur(8px)}
.sayac b{font-size:26px;color:var(--yazi);font-weight:800;letter-spacing:-.8px;
font-variant-numeric:tabular-nums;line-height:1.1}
.sayac span{font-size:14px;color:var(--soluk);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
a.sayac{text-decoration:none;transition:border-color .18s,transform .18s}
a.sayac:hover{border-color:var(--cizgi2);transform:translateY(-2px)}
/* ---- kanit seridi: ilk ekranda somut kazanc (1. masa) ---- */
.kanit{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
margin:22px auto 0;padding:12px 18px;border-radius:14px;text-decoration:none;
background:linear-gradient(135deg,rgba(52,245,163,.10),rgba(139,92,246,.10));
border:1px solid rgba(52,245,163,.30);min-height:44px;
transition:border-color .18s,transform .18s}
.kanit:hover{border-color:rgba(52,245,163,.6);transform:translateY(-2px)}
.kanit .kn-et{font-size:14px;color:var(--soluk);text-transform:uppercase;letter-spacing:.6px}
.kanit b{font-size:15px;color:var(--yazi);font-weight:700}
.kanit .kn-yuzde{font-size:15px;font-weight:800;color:var(--ucuz);font-variant-numeric:tabular-nums}
.kanit .kn-tl{font-size:14px;color:var(--ucuz);font-variant-numeric:tabular-nums;
padding:2px 9px;border-radius:999px;background:rgba(52,245,163,.12)}
.kanit .kn-ok{color:var(--ucuz);font-size:16px}
/* ---- bagimsizlik beyani (1. masa) ---- */
.bagimsiz{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;list-style:none;
margin:22px 0 0;padding:0}
.bagimsiz li{font-size:14px;color:var(--soluk2);display:inline-flex;align-items:center;gap:6px}
.bagimsiz li::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;
background:rgba(52,245,163,.16);
box-shadow:inset 0 0 0 1px rgba(52,245,163,.5)}
.kahraman.daralt{min-height:0;padding:14px 0 6px}
.kahraman.daralt h1,.kahraman.daralt p,.kahraman.daralt .sayaclar,.kahraman.daralt .ustyazi,.kahraman.daralt .sahne,.kahraman.daralt .orb,.kahraman.daralt .kanit,.kahraman.daralt .bagimsiz{display:none}
/* ---- canli serit (ticker) ---- */
.akis-sar{position:relative;overflow:hidden;border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);
background:rgba(255,255,255,.025);margin:6px 0 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.akis-sar{display:flex}
.akis{display:flex;gap:0;width:max-content;flex:none;animation:kay 70s linear infinite}
.akis-sar:hover .akis,.akis-sar.durdu .akis{animation-play-state:paused}
@keyframes kay{to{transform:translateX(-100%)}}
/* WCAG 2.2.2 duraklatma dugmesi: klavye ve dokunmatikte de durdurulabilir olmali. */
.akis-dur{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:3;
width:44px;height:44px;min-height:44px;border-radius:11px;cursor:pointer;
border:1px solid var(--cizgi2);background:rgba(10,12,22,.86);color:var(--soluk);
font-size:14px;font-weight:800;letter-spacing:1px;line-height:1;
display:inline-flex;align-items:center;justify-content:center}
.akis-dur:hover{color:var(--yazi);border-color:var(--marka)}
@media (prefers-reduced-motion:reduce){.akis-dur{display:none}}
.akis a{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;font-size:14px;white-space:nowrap;
color:var(--soluk);border-right:1px solid var(--cizgi);min-height:44px}
.akis a b{color:var(--yazi);font-weight:700}
.akis a .fy{font-variant-numeric:tabular-nums;color:var(--bag);font-weight:700}
.akis a .yukari{color:var(--pahali)} .akis a .asagi{color:var(--ucuz)}
.akis img,.akis .rozet{width:22px;height:22px;border-radius:6px;font-size:8px}
@media (prefers-reduced-motion:reduce){
.akis{animation:none;flex-wrap:wrap;width:auto}
.akis a:nth-child(n+9){display:none}
.akis-kopya{display:none}}
/* ---- bolum basliklari ---- */
h2{font-size:28px;margin:44px 0 6px;letter-spacing:-.7px;font-weight:800;line-height:1.15}
h3{font-size:19px;letter-spacing:-.3px}
/* Anlamca h2 ama gorsel olarak kucuk kalmasi gereken baslik. */
.kucuk-baslik{font-size:19px;letter-spacing:-.3px;margin:0 0 10px;font-weight:700}
/* Olcum bayatladiginda cikan uyari serit (12. masa). Sarı-kehribar:
hata degil ama dikkat isteyen durum; kirmizi "bozuk" izlenimi verirdi. */
.bayat{background:#3a2c07;border-bottom:1px solid #6b5209;color:#ffe9a8;
padding:11px 20px;font-size:14.5px;line-height:1.55;text-align:center}
.bayat p{margin:0}
.bayat b{color:#fff5d1}
.bayat a{color:var(--odak);text-decoration:underline;text-underline-offset:3px}
/* Kod ornegi: uzun satir sayfayi tasirmasin, kendi icinde kaysin (14. masa).
Olculdu: /veri/ sayfasindaki curl ornegi 390 px ekranda 65 px tasiyordu. */
.kod{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#0a0c14;
border:1px solid var(--cizgi);border-radius:12px;padding:14px 16px;margin:14px 0;
font-size:14px;line-height:1.65;max-width:100%}
/* SECICI pre.kod code OLMALI, .kod code YETMEZ (8 Eylul 2026'da olculdu):
asagida `.yazi code,.rehber code{font-size:.92em}` var ve ozgullugu esit
oldugu icin DAHA SONRA geldiginden ustune yaziyordu. Kod blogu 14px yerine
12,88 px (14 x 0,92) ciziliyordu - mobilde okunmaz esigin altinda. */
pre.kod code{white-space:pre;color:#d5d9e6;font-size:14px;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* Yazi sonu kunyesi: kim yazdi, neye dayaniyor, nasil dogrulandi (7. masa) */
.kunye{margin:40px 0 0;padding:22px;border-radius:18px;background:var(--kart);
border:1px solid var(--cizgi)}
.kunye h3{font-size:15px;margin:18px 0 8px;color:var(--soluk)}
.kunye-tarih{font-size:14px;color:var(--soluk2);margin:0 0 14px;
font-variant-numeric:tabular-nums}
.kunye-liste{margin:0;padding-left:18px;color:var(--soluk);font-size:14.5px;line-height:1.75}
.kunye-liste b{color:var(--yazi);font-weight:650}
.kunye-liste a{color:var(--bag)}
.h2alt{color:var(--soluk);margin:0 0 18px;font-size:16px;max-width:760px}
/* Olgu cumlesi (GEO): sayfanin tek cumlelik, tarihli cevabi. Uretken arama
motorlari cevabin icine bunu aliyor, okuyucu da ilk saniyede sayiyi
goruyor. Kutu degil, akan metin - alintilandiginda bicim tasinmasin. */
.olgu{margin:0 0 18px;padding:12px 16px;font-size:16px;line-height:1.65;
max-width:820px;color:var(--yazi);border-left:3px solid var(--mor2);
background:rgba(255,255,255,.03);border-radius:0 10px 10px 0}
.olgu b{font-weight:680}
/* Kutu icindeki olgu: cerceve zaten kutuda, ikinci kez cizilmesin. */
.olgu.ic,.kutu .olgu{margin:0;padding:0;background:none;border-left:0;
border-radius:0;max-width:none}
.bolum-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bolum-bas .h2alt{margin-bottom:12px}
.hepsi{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--bag);font-weight:600;font-size:14px}
.hepsi:hover{color:#fff}
.gradyan-yazi{background:var(--gradyan3);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---- kart temeli ---- */
.kart-cam,.oyunkart,.firsat,.yazikart,.paket,.ozet .kart,.populer a,.adim,.guven div,.satici-kart,.hesap,
.sss details,.sorunlar details,.endeks-kutu,.kutu,.yazar,.kunye,.grafik,.kaydir,.cubuklar,.oh-fiyat,.karsi-kart{
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
border:1px solid var(--cizgi);border-radius:18px}
.onecikan{position:relative}
.onecikan::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
background:var(--gradyan3);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.9}
/* ---- oyun seridi ---- */
.serit{display:flex;gap:12px;overflow-x:auto;padding:4px 0 14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.serit::-webkit-scrollbar{height:6px}
.serit::-webkit-scrollbar-thumb{background:var(--cizgi2);border-radius:3px}
.serit .oy{flex:0 0 auto;width:96px;text-align:center;transition:transform .25s var(--yumusak)}
.serit .oy:hover{transform:translateY(-4px)}
.serit .rozet,.serit .gorsel{margin:0 auto 7px}
.serit .ad{font-size:14px;color:var(--soluk);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden}
/* ---- gorsel / rozet ---- */
.gorsel{border-radius:16px;object-fit:cover;background:var(--kart2);box-shadow:var(--golge);flex:0 0 auto;display:block}
.gorsel.k{width:46px;height:46px;border-radius:14px}
.gorsel.n{width:60px;height:60px}
.gorsel.b{width:76px;height:76px;border-radius:20px}
.rozet{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;
font-weight:800;color:#fff;font-size:17px;letter-spacing:-.5px;box-shadow:var(--golge);flex:0 0 auto}
.rozet.kucuk{width:46px;height:46px;border-radius:14px;font-size:15px}
.rozet.buyuk{width:76px;height:76px;border-radius:22px;font-size:21px}
/* ---- populer oyun kartlari (ana sayfa) ---- */
.populer{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.populer a{display:block;overflow:hidden;position:relative;transition:transform .35s var(--yumusak),box-shadow .35s;
transform-style:preserve-3d}
.populer .kapak{aspect-ratio:16/10;overflow:hidden;background:var(--zemin2);position:relative}
.populer .kapak img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--yumusak)}
.populer .kapak .rozet{width:100%;height:100%;border-radius:0;font-size:34px}
.populer .kapak::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,7,13,.92))}
.populer a:hover .kapak img{transform:scale(1.07)}
.populer .alt{padding:12px 14px 14px}
.populer b{display:block;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.populer .fy{display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin-top:4px;font-variant-numeric:tabular-nums}
.populer .fy strong{font-size:18px;color:var(--ucuz);font-weight:800;letter-spacing:-.3px}
.populer .fy span{color:var(--soluk);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.populer .etk{position:absolute;top:10px;left:10px;z-index:2;background:rgba(6,7,13,.82);border-color:rgba(52,245,163,.55);backdrop-filter:blur(6px)}
.populer a:hover{box-shadow:var(--parilti);border-color:rgba(139,92,246,.5)}
/* ---- oyun izgarasi ---- */
.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.oyunkart{padding:14px;display:flex;align-items:center;gap:13px;min-height:44px;
transition:border-color .25s,transform .3s var(--yumusak),box-shadow .3s}
.oyunkart:hover{border-color:rgba(139,92,246,.55);transform:translateY(-3px);box-shadow:var(--parilti)}
.oyunkart .bilgi{min-width:0}
.oyunkart b{display:block;font-size:16px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oyunkart span{color:var(--soluk);font-size:14px}
.oyunkart .yesil{color:var(--ucuz);font-weight:600}
/* ---- kategoriler ---- */
.katlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0 8px}
.katlar a{padding:16px 14px;border-radius:16px;background:var(--kart);border:1px solid var(--cizgi);
font-weight:700;min-height:44px;display:flex;flex-direction:column;gap:8px;transition:.25s}
.katlar a svg{width:26px;height:26px;color:var(--bag)}
.katlar a span{color:var(--soluk);font-weight:400;font-size:14px}
.katlar a:hover{border-color:rgba(34,211,238,.6);transform:translateY(-3px);box-shadow:0 12px 36px rgba(34,211,238,.18)}
/* ---- nasil calisir ---- */
.adimlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:8px 0}
.adim{padding:22px 20px;position:relative;overflow:hidden}
.adim i{font-style:normal;font-size:44px;font-weight:900;letter-spacing:-2px;line-height:1;display:block;
background:var(--gradyan3);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}
.adim b{display:block;margin:10px 0 6px;font-size:17px}
.adim p{margin:0;color:var(--soluk);font-size:15px}
/* ---- guven / neden ---- */
.guven{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:8px 0}
.guven div{padding:18px}
.guven b{display:flex;align-items:center;gap:9px;font-size:16px;margin-bottom:6px}
.guven b svg{width:20px;height:20px;color:var(--ucuz);flex:0 0 auto}
.guven p{margin:0;color:var(--soluk);font-size:14px;line-height:1.55}
/* ---- satici kartlari ---- */
.satici-serit{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:8px 0}
.satici-kart{padding:14px 16px;display:flex;flex-direction:column;gap:3px;transition:.25s}
.satici-kart b{font-size:16px}
.satici-kart span{color:var(--soluk);font-size:14px}
.satici-kart em{font-style:normal;color:var(--ucuz);font-size:14px;font-weight:600}
.satici-kart:hover{border-color:rgba(139,92,246,.5);transform:translateY(-2px)}
/* ---- paket karti ---- */
.paket{padding:16px;margin:12px 0}
.paket .ust{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.paket .miktar{font-size:19px;font-weight:800;letter-spacing:-.4px}
.etiket{font-size:14px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--kart2);
color:var(--soluk);white-space:nowrap;border:1px solid var(--cizgi)}
.etiket.kazanc{background:rgba(52,245,163,.14);color:var(--ucuz);border-color:rgba(52,245,163,.3)}
.enucuz{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:rgba(52,245,163,.06);
border:1px solid rgba(52,245,163,.18);border-radius:14px;padding:14px;margin-bottom:10px}
.enucuz .fiyat{font-size:30px;font-weight:800;letter-spacing:-1.2px;line-height:1.1;font-variant-numeric:tabular-nums}
.enucuz .fiyat .kurus{font-size:18px;font-weight:700}
.enucuz .fiyat .pb{font-size:17px;font-weight:600;color:var(--soluk)}
.enucuz .kim{flex:1 1 130px;min-width:0}
.enucuz .kim .rol{font-size:14px;color:var(--ucuz);font-weight:700;display:block;text-transform:uppercase;letter-spacing:.4px}
.enucuz .kim .sat{font-size:17px;font-weight:600}
.enucuz .kim .brm{font-size:14px;color:var(--soluk);display:block;margin-top:2px}
.git{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:11px 20px;
border-radius:12px;font-size:16px;font-weight:700;color:#fff;white-space:nowrap;background:var(--gradyan);
box-shadow:0 6px 22px rgba(139,92,246,.4);transition:transform .2s,box-shadow .2s,filter .2s;position:relative;overflow:hidden}
.git::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
transform:translateX(-120%);transition:transform .6s}
.git:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(139,92,246,.55)}
.git:hover::after{transform:translateX(120%)}
/* Dugmenin sagindaki ok. Once satir ici SVG'ydi; 9 Eylul 2026'da olculdu:
tek oyun sayfasinda 72 kez tekrar ediyordu = 15,3 KB HTML ve 144 DOM
dugumu, hepsi ayni yedi kelimelik cizim. Maske currentColor'la boyandigi
icin dugme metniyle ayni renkte kalir; CSS bir kez inip onbellege girer. */
.git::before{content:"";order:2;width:15px;height:15px;flex:0 0 15px;background:currentColor;
-webkit-mask:var(--ok-sag) center/15px 15px no-repeat;mask:var(--ok-sag) center/15px 15px no-repeat}
.git.sade::before{content:none}
.git.sade{background:rgba(255,255,255,.05);color:var(--yazi);border:1px solid var(--cizgi2);box-shadow:none;padding:10px 14px}
.git.sade:hover{border-color:var(--marka);background:rgba(139,92,246,.15)}
.digerler{display:flex;flex-direction:column;gap:2px}
.satir{display:flex;align-items:center;gap:10px;padding:9px 4px;border-top:1px solid var(--cizgi);min-height:44px;flex-wrap:wrap}
.satir .sat{flex:1 1 100px;font-size:15px;font-weight:600;min-width:0}
.satir .fiy{font-size:16px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.satir .fark{font-size:14px;color:var(--pahali);white-space:nowrap;min-width:72px;text-align:right}
.satir .brm{font-size:14px;color:var(--soluk2);white-space:nowrap}
/* ---- kutular ---- */
.kutu{padding:14px 16px;margin:16px 0;font-size:16px;color:var(--soluk)}
.kod-blok{padding:12px 14px;margin:12px 0;font-size:14px;line-height:1.6;
background:var(--kart);border:1px solid var(--cizgi);border-radius:8px;
overflow-x:auto;white-space:pre;color:var(--metin)}
.kutu b{color:var(--yazi)}
.kutu.dikkat{background:rgba(255,92,124,.08);border-color:rgba(255,92,124,.4);color:#ffb3c1}
.kutu.dikkat b{color:var(--pahali)}
.kutu.iyi{background:rgba(52,245,163,.07);border-color:rgba(52,245,163,.35);color:#b9ffe0}
.kutu.iyi b{color:var(--ucuz)}
.kutu.ipucu{background:rgba(139,92,246,.10);border-color:rgba(139,92,246,.4);color:#ddd6fe}
.kutu.ipucu b{color:var(--bag)}
/* ---- satici tablosu ---- */
.siralama{margin:22px 0 8px}
/* position:relative SART. Tablonun icinde ekran okuyucu metinleri var
(`.sr`, position:absolute). Kaydirma kutusu static kalirsa o span'lar
kutuya degil DISARIDAKI en yakin konumlanmis ataya tutunur - burada
`section.rv`, cunku acilis animasyonu ona transform veriyor ve transform
containing block uretir. Span'in statik konumu tablonun 1001 px'lik
genisliginin sag ucunda oldugu icin section'in kaydirma tasmasina 933 px
olarak katiliyordu: 768 px tablette belge 933 px'e geriliyor, QA "117 px
yatay tasma" diyordu ve tasan oge gorunmuyordu (kutular hep 732 px'ti).
9 Eylul 2026, gizle-olc yontemiyle bulundu. `overflow:hidden` bunu
duzeltmez - absolute oge static ataya bagli degildir. */
.kaydir{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.tbl th{text-align:left;font-weight:600;font-size:14px;color:var(--soluk2);padding:12px 12px;
border-bottom:1px solid var(--cizgi);white-space:nowrap;letter-spacing:.6px;text-transform:uppercase}
.tbl td{padding:12px;border-bottom:1px solid var(--cizgi);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.ucuz{background:rgba(52,245,163,.07)}
.tbl tr.ucuz .sat{color:var(--ucuz);font-weight:700}
.tbl .sira{color:var(--soluk2);width:34px;font-variant-numeric:tabular-nums}
.tbl .sat{font-weight:600;color:var(--yazi);white-space:nowrap}
.tbl .brf{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl .ark{color:var(--pahali);white-space:nowrap}
.tbl tr.ucuz .ark{color:var(--ucuz)}
.tbl .pkt{color:var(--soluk);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Satici kunyesi sutunlari (8 Eylul 2026): puan saticinin kendi sitesinden,
teslimat saticinin vaadi. Fiyat kadar one cikmamali - fiyat karari
adet fiyatı verir, bunlar destekleyici bilgidir. */
.tbl .pun{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--yazi)}
.tbl .tsl{white-space:nowrap;color:var(--soluk)}
.kaynak{font-size:14px;text-decoration:underline}
/* Bolge rozeti: paket kartinda hangi bolgenin fiyati oldugunu soyler.
Fiyat kadar one cikmaz ama gorunmezse ziyaretci kendi bolgesinde olmayan
bir fiyati "en ucuz" sanar (8 Eylul 2026 olcumu: bolgeler arasi fark %100). */
.paket .bolge{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
border:1px solid var(--cizgi);color:var(--soluk);font-size:14px;white-space:nowrap}
.digerbolge{margin:10px 0 4px;border:1px solid var(--cizgi);border-radius:12px;padding:10px 13px;
background:var(--kart)}
.digerbolge>summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.tbl .yok{color:var(--soluk2)}
.tbl td.enucuz{color:var(--ucuz);font-weight:700;white-space:nowrap}
.tbl td small{display:block;font-size:14px;color:var(--soluk2);font-weight:400}
.tbl .git{text-align:right;white-space:nowrap}
.kmp{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:999px;background:rgba(52,245,163,.14);
color:var(--ucuz);font-weight:700;white-space:nowrap;font-size:14px}
/* Tablo hucresindeki bag TEK BASINA duran bir dokunma hedefidir (cumle ici
bag degil), bu yuzden 44x44 kurali burada gecerli. Yukseklik zaten
verilmisti; kisa metinli baglar ("TL", "UC", "kod") 16-41 px GENISLIKTE
kaliyordu - 8 Eylul 2026'da /kategori/mobil/ uzerinde 10 adet olculdu. */
.tbl td a{display:inline-flex;align-items:center;justify-content:center;
min-height:44px;min-width:44px}
/* MOBIL KART KALIBI - YALNIZ .tbl.kart
560 px altinda tablo satiri bir karta doner ve hucreler grid-template-areas
ile yerlesir. Bu kalip, hucrelerinde alan sinifi (sira/sat/brf/ark/pkt/pun/
tsl/git) TASIYAN tablolar icindir. 9 Eylul 2026'da olculdu: kural once duz
`.tbl` uzerindeydi ve alan sinifi olmayan her tablo - oyun listeleri, sozluk,
butce, rehber tablolari, 1.461 sayfa - mobilde 26 px'lik sutuna sikisip
icerigini yandakinin ustune tasiriyordu. Kalip artik opt-in: sinifi olmayan
tablo mobilde normal tablo olarak, kaydirilabilir kutusunda kalir. */
@media (max-width:560px){
.kaydir:has(.tbl.kart){border:0;background:transparent;overflow-x:visible}
.tbl.kart{min-width:0;font-size:16px;display:block}
.tbl.kart thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tbl.kart tbody{display:block}
.tbl.kart tr{display:grid;grid-template-columns:26px auto 1fr auto;
grid-template-areas:"sira sat sat git" "sira brf ark git" "sira pkt pkt git" "sira pun tsl git";
gap:3px 9px;align-items:center;background:var(--kart);border:1px solid var(--cizgi);
border-radius:14px;padding:11px 13px;margin-bottom:9px}
.tbl.kart tr.ucuz{border-color:rgba(52,245,163,.45)}
.tbl.kart td{display:block;border:0;padding:0}
.tbl.kart .sira{grid-area:sira;align-self:start;padding-top:2px}
.tbl.kart .sat{grid-area:sat} .tbl.kart .brf{grid-area:brf} .tbl.kart .ark{grid-area:ark}
.tbl.kart .pkt{grid-area:pkt;color:var(--soluk2)}
.tbl.kart .pun{grid-area:pun;font-size:14px;color:var(--soluk2)}
.tbl.kart .tsl{grid-area:tsl;font-size:14px;color:var(--soluk2)}
.tbl.kart .kmp{display:block;margin:5px 0 0}
.tbl.kart .git{grid-area:git;text-align:right}
}
@media(max-width:900px){
.tbl.duz,.tbl.gecmis{display:table;min-width:0;width:100%}
.tbl.duz thead,.tbl.gecmis thead{position:static;width:auto;height:auto;overflow:visible;display:table-header-group}
.tbl.duz tbody,.tbl.gecmis tbody{display:table-row-group}
.tbl.duz tr,.tbl.gecmis tr{display:table-row;border:0;padding:0;background:none}
.tbl.duz td,.tbl.duz th,.tbl.gecmis td,.tbl.gecmis th{display:table-cell;padding:10px 8px;
border-bottom:1px solid var(--cizgi);font-size:16px;vertical-align:middle}
}
@media(max-width:560px){
.kaydir:has(.tbl.duz),.kaydir:has(.tbl.gecmis){overflow-x:auto;border:1px solid var(--cizgi);border-radius:14px}
.tbl.duz td,.tbl.duz th{white-space:normal}
.tbl.duz td.brf{white-space:nowrap}
}
/* ---- firsat kartlari ---- */
.firsatlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.firsat{padding:15px;display:flex;flex-direction:column;gap:11px;transition:border-color .25s,transform .3s var(--yumusak),box-shadow .3s}
.firsat:hover{border-color:rgba(52,245,163,.5);transform:translateY(-3px);box-shadow:0 14px 40px rgba(52,245,163,.14)}
.firsat .bas{display:flex;align-items:center;gap:11px}
.firsat .bas .bilgi{min-width:0;flex:1}
.firsat .bas b{display:block;font-size:17px;font-weight:700}
.firsat .bas span{font-size:14px;color:var(--soluk)}
.firsat .son{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
.firsat .fiyat{font-size:26px;font-weight:800;letter-spacing:-.9px;font-variant-numeric:tabular-nums}
.firsat .fiyat small{font-size:14px;font-weight:600;color:var(--soluk);display:block;letter-spacing:0}
/* ---- arama sonucu ---- */
#sonuc{display:none;padding-top:8px}
#sonuc.acik{display:block}
#anaicerik.gizli,.kahraman.gizli,.akis-sar.gizli{display:none}
#sonuc h2{margin-top:14px}
.bos{text-align:center;color:var(--soluk);padding:40px 16px;font-size:17px}
/* ---- sss ---- */
.sss,.sorun{margin-top:36px}
.sss details,.sorunlar details{padding:0;margin-bottom:9px;overflow:hidden}
.sss summary,.sorunlar summary{cursor:pointer;padding:15px 18px;font-weight:650;font-size:16px;list-style:none;min-height:44px;
display:flex;align-items:center;justify-content:space-between;gap:10px}
.sss summary::-webkit-details-marker,.sorunlar summary::-webkit-details-marker{display:none}
.sss summary::after,.sorunlar summary::after{content:"+";font-size:22px;color:var(--bag);font-weight:400;line-height:1;transition:transform .25s}
.sss details[open] summary::after,.sorunlar details[open] summary::after{transform:rotate(45deg)}
.sss p,.sorunlar p{margin:0;padding:0 18px 16px;color:var(--soluk)}
/* ---- alt ---- */
.geri{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:var(--soluk);font-size:16px}
footer{margin-top:64px;border-top:1px solid var(--cizgi);padding:26px 0 40px;color:var(--soluk2);font-size:14px;line-height:1.6;
background:linear-gradient(180deg,transparent,rgba(139,92,246,.06))}
footer a{color:var(--soluk);text-decoration:underline;text-underline-offset:3px}
footer .altbilgi{display:flex;flex-direction:column;gap:10px}
.altbilgi nav{line-height:2}
.altbilgi nav a{color:var(--yazi);font-weight:600;padding:4px 0;text-decoration:none}
/* Alt gezinme dort sutun: 25 sayfalik kurumsal katman tek satira sigmiyordu. */
.alt-gez{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px 24px;
line-height:1.7;margin:6px 0 4px}
.alt-gez div{display:flex;flex-direction:column;gap:2px}
.alt-gez b{color:var(--soluk);font-size:14px;text-transform:uppercase;letter-spacing:.7px;
font-weight:700;margin-bottom:6px}
.alt-gez a{color:var(--soluk);font-weight:500;font-size:14px;padding:11px 0;
display:flex;align-items:center;min-height:44px}
.alt-gez a:hover{color:var(--yazi)}
.altbilgi small{color:var(--soluk2);font-size:14px}
/* ---- kirinti ---- */
.kirinti{margin:14px 0 4px;font-size:14px;color:var(--soluk)}
.kirinti ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 0}
.kirinti li+li::before{content:"›";margin:0 7px;color:var(--soluk2)}
.kirinti a{color:var(--soluk);padding:11px 7px;margin-left:-7px;display:inline-flex;
align-items:center;min-height:44px;min-width:44px;justify-content:center}
/* Tek basina duran gezinme bagi («Butun karsilastirmalar ->» gibi):
satir ici gorunur ama dokunma hedefi 44 px'e tamamlanir. 8 Eylul 2026
mobil olcumunde 21 px yukseklikle yakalanmisti. */
.h2alt a,.soluk a{display:inline-flex;align-items:center;min-height:44px}
.kirinti a:hover{color:var(--yazi)}
.kirinti li[aria-current]{color:var(--yazi);padding:11px 0;display:inline-flex;align-items:center;min-height:44px}
/* ---- oyun sayfasi kahramani ---- */
.oyunhero{position:relative;margin:10px -18px 0;padding:22px 18px 26px;isolation:isolate;overflow:hidden;
border-bottom:1px solid var(--cizgi)}
.oyunhero .fon{position:absolute;inset:-40px;z-index:-1;background:var(--fon) center/cover no-repeat;
filter:blur(58px) saturate(1.5);opacity:.42;transform:scale(1.1)}
.oyunhero .fon::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,13,.2),rgba(6,7,13,.95))}
.oh-ic{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;max-width:1104px;margin:0 auto}
.oyunhero .kapak{width:150px;aspect-ratio:1;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12);
transform-style:preserve-3d;background:var(--zemin2);flex:0 0 auto}
.oyunhero .kapak img,.oyunhero .kapak .rozet{width:100%;height:100%;object-fit:cover;border-radius:0;font-size:36px;box-shadow:none}
.oh-metin{min-width:0}
.oh-metin h1{font-size:clamp(26px,3.4vw,40px);margin:4px 0 6px;line-height:1.12;letter-spacing:-1px}
.oh-metin .h2alt{margin:0 0 6px}
.rozetler{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rozetcik{font-size:14px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--soluk);border:1px solid var(--cizgi)}
.oh-fiyat{padding:18px 22px;min-width:250px;text-align:left;display:flex;flex-direction:column;gap:4px;
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.oh-fiyat small{font-size:14px;text-transform:uppercase;letter-spacing:.7px;color:var(--ucuz);font-weight:700}
.oh-fiyat b{font-size:34px;letter-spacing:-1.4px;line-height:1.05;font-variant-numeric:tabular-nums}
.oh-fiyat b i{font-style:normal;font-size:16px;color:var(--soluk);letter-spacing:0;font-weight:600;margin-left:4px}
.oh-fiyat span{color:var(--soluk);font-size:14px}
.oh-fiyat .git{margin-top:10px;align-self:flex-start}
.oh-fiyat em{font-style:normal;font-size:14px;color:var(--soluk2)}
@media(max-width:820px){
.oh-ic{grid-template-columns:auto 1fr}
.oh-fiyat{grid-column:1/-1;min-width:0}
.oyunhero .kapak{width:104px}
}
@media(max-width:480px){.oyunhero .kapak{width:84px;border-radius:16px}.oh-metin h1{font-size:24px}}
/* ---- ozet kutusu ---- */
.ozet{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.ozet .kart{padding:14px 16px;min-width:0}
.ozet small{display:block;color:var(--soluk);font-size:14px;text-transform:uppercase;letter-spacing:.6px}
.ozet b{display:block;font-size:22px;margin:5px 0 2px;letter-spacing:-.5px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ozet span{color:var(--soluk);font-size:14px;display:block}
.ucuz{color:var(--ucuz)} .pahali{color:var(--pahali)} .soluk{color:var(--soluk2)}
.ozet .kart.genis{grid-column:2/-1}
@media(max-width:720px){.ozet{grid-template-columns:repeat(2,1fr)}
.ozet .kart.genis{grid-column:1/-1}}
/* ---- karsilastirma cubuklari ---- */
.cubuklar{padding:18px 20px;margin:14px 0}
.cubuk{display:grid;grid-template-columns:150px 1fr auto auto;gap:12px;align-items:center;padding:9px 0;
border-bottom:1px solid var(--cizgi)}
.cubuk:last-child{border-bottom:0}
.cb-ad{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-ray{height:14px;border-radius:7px;background:rgba(255,255,255,.06);overflow:hidden}
.cb-ray i{display:block;height:100%;width:var(--w);border-radius:7px;background:linear-gradient(90deg,var(--marka),var(--pembe));
transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--yumusak)}
.cubuk.ucuz .cb-ray i{background:linear-gradient(90deg,#10b981,var(--ucuz))}
.in .cb-ray i,html:not(.js) .cb-ray i{transform:scaleX(1)}
.cb-deger{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.cb-fark{font-size:14px;color:var(--pahali);white-space:nowrap;min-width:64px;text-align:right}
.cubuk.ucuz .cb-fark{color:var(--ucuz)}
@media(max-width:560px){.cubuk{grid-template-columns:1fr auto;grid-template-areas:"ad deger" "ray ray" "fark fark";gap:6px 10px}
.cb-ad{grid-area:ad}.cb-ray{grid-area:ray}.cb-deger{grid-area:deger}.cb-fark{grid-area:fark;text-align:left}}
/* ---- hesaplayici ---- */
.hesap{padding:20px;margin:16px 0}
.hesap .sekmeler{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.hesap .sekmeler label{padding:9px 14px;border-radius:10px;border:1px solid var(--cizgi2);cursor:pointer;font-weight:600;
font-size:14px;min-height:44px;display:inline-flex;align-items:center;transition:.2s}
.hesap .sekmeler input{position:absolute;opacity:0;pointer-events:none}
.hesap .sekmeler input:checked+label{background:rgba(139,92,246,.25);border-color:var(--marka);color:#fff}
.hesap .giris{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hesap .giris input{flex:1 1 160px;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--cizgi2);
background:rgba(255,255,255,.06);color:var(--yazi);font-size:18px;font-weight:700;outline:none;
font-variant-numeric:tabular-nums}
.hesap .giris input:focus{border-color:var(--marka);box-shadow:0 0 0 4px rgba(139,92,246,.22)}
.hesap .giris span{color:var(--soluk);font-weight:600}
.hesap .sonuclar{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.hesap .hs{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;
background:rgba(255,255,255,.04);border:1px solid var(--cizgi)}
.hesap .hs:first-child{border-color:rgba(52,245,163,.45);background:rgba(52,245,163,.07)}
.hesap .hs b{font-size:15px}
.hesap .hs small{display:block;color:var(--soluk);font-size:14px}
.hesap .hs .hf{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.hesap .hs .hf small{color:var(--soluk2)}
.hesap .not{color:var(--soluk2);font-size:14px;margin:10px 0 0}
@media(max-width:480px){.hesap .hs{grid-template-columns:1fr auto}.hesap .hs .git{grid-column:1/-1;justify-self:start}}
/* ---- yapisik alt cubuk (mobil) ---- */
.yapisik{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:12px;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:rgba(6,7,13,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-top:1px solid var(--cizgi2);transform:translateY(110%);transition:transform .35s var(--yumusak)}
.yapisik.goster{transform:none}
.yapisik .yb{flex:1;min-width:0}
.yapisik .yb small{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.6px;color:var(--ucuz);font-weight:700}
.yapisik .yb b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-variant-numeric:tabular-nums}
.yapisik .git{padding:10px 16px;min-height:44px}
@media(max-width:720px){.yapisik{display:flex}body.oyun{padding-bottom:74px}}
/* ---- grafik (SVG, JS'siz) ---- */
.grafik{width:100%;height:auto;max-width:760px;display:block;margin:12px 0}
/* ---- rehber yazisindaki canli veri blogu (7 Eylul 2026) ----
Grafikler ayri .svg dosyasi olarak yazilir ve ![]()
ile gomulur: satir ici
SVG Google Gorseller'de indekslenmez, ayri dosya indekslenir. */
.veri-blok{margin:26px 0;padding:18px 18px 6px;border:1px solid var(--cizgi);
border-radius:18px;background:linear-gradient(180deg,rgba(124,92,255,.06),rgba(255,255,255,.02))}
.veri-blok h2{margin-top:0}
.yazi-kapak{margin:0 0 16px;padding:0;border:0;float:right;max-width:180px}
.yazi-kapak img{width:100%;height:auto;display:block;border-radius:14px;
box-shadow:0 2px 14px rgba(0,0,0,.12)}
@media(max-width:640px){.yazi-kapak{float:none;max-width:140px;margin:0 auto 14px}}
.veri-gorsel{margin:14px 0;padding:0;border:0;background:transparent}
.veri-gorsel img{width:100%;max-width:760px;height:auto;display:block;
border:1px solid var(--cizgi);border-radius:14px;background:var(--zemin2)}
.veri-gorsel figcaption{margin-top:6px;font-size:14px;color:var(--soluk)}
.kucuk{font-size:14px}
/* komsu sayfa baglari (anahtar katmani) */
.baglar{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.baglar li{margin:0}
/* 7px dolgu + 14px yazi = 40 px yukseklik; dokunma hedefi 44'un altinda
kaliyordu (8 Eylul 2026, /anahtar/abzu-steam/ uzerinde olculdu). */
.baglar a{display:inline-flex;align-items:center;min-height:44px;
padding:7px 12px;border:1px solid var(--cizgi);
border-radius:999px;font-size:14px;text-decoration:none}
.baglar a:hover{border-color:var(--mor2)}
.grafik .gk{stroke:var(--cizgi2);stroke-width:1}
.grafik .ge{fill:var(--soluk);font-size:11px;font-family:inherit}
.grafik .gx{fill:var(--soluk2)}
.grafik .gc{fill:none;stroke:var(--mor2);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(139,92,246,.7))}
.grafik .gc2{fill:none;stroke:var(--soluk2);stroke-width:1.5;stroke-dasharray:4 4}
.grafik .gn{fill:var(--mor2)} .grafik .gn-dusuk{fill:var(--ucuz)} .grafik .gn-son{fill:var(--yazi)}
.grafik .gson{fill:var(--yazi);font-weight:700;font-size:14px}
.tbl.gecmis td.brf{font-variant-numeric:tabular-nums;font-weight:700}
.tbl td.sat{color:var(--soluk)}
/* ---- rehber bolumu ve yazi govdesi ---- */
.rehber,.yazi{max-width:780px}
.rehber h2,.yazi h2{margin-top:38px;font-size:24px;letter-spacing:-.5px}
.rehber h3,.yazi h3{margin:24px 0 8px;font-size:18px}
.yazi h1{font-size:clamp(28px,4vw,40px);line-height:1.15;letter-spacing:-1px;margin:8px 0 8px}
.yazi p,.yazi li,.rehber p,.rehber li{font-size:17px;line-height:1.7;color:#d5d9e6}
.yazi ul,.yazi ol,.rehber ul,.rehber ol{padding-left:22px;margin:10px 0}
.yazi li,.rehber li{margin:6px 0}
.yazi code,.rehber code{background:var(--kart2);padding:1px 6px;border-radius:6px;font-size:.92em}
.yazi table,.rehber table{font-size:15px}
/* overflow-wrap: yazi govdesinde bag metni bazen ciplak URL oluyor; kirilma
noktasi olmayan uzun adres 390 px ekrani tasiriyordu (9 Eylul 2026). */
.yazi a,.rehber a{color:var(--bag);text-decoration:underline;text-underline-offset:3px;
overflow-wrap:anywhere}
.yazi strong{color:#fff}
/* Tek bagdan ibaret paragraf ("## Kaynak" bolumu): cevresinde metin olmadigi
icin WCAG 2.5.8'in cumle ici istisnasina girmez, bagimsiz dokunma hedefi
sayilir ve 22 px yuksekligiyle kaliyordu (9 Eylul 2026, 170 sayfa).
Kaynak dugmesine cevriliyor - anlami da bu. */
.yazi p.tekbag,.rehber p.tekbag{margin:12px 0}
/* max-width + anywhere: bag metni bazen URL'nin kendisi oluyor
(store.steampowered.com/digitalgiftcards/selectgiftcard) ve kirilma noktasi
olmadigi icin 390 px ekranda 76 px yatay kaydirma aciyordu - 9 Eylul 2026,
/steam-usd/ ve 8 kardes sayfa. */
.yazi p.tekbag a,.rehber p.tekbag a{display:inline-flex;align-items:center;
min-height:44px;max-width:100%;padding:10px 15px;border:1px solid var(--cizgi);
border-radius:12px;background:var(--kart2);text-decoration:none;font-weight:600;
line-height:1.35;overflow-wrap:anywhere}
.yazi p.tekbag a:hover,.rehber p.tekbag a:hover{border-color:var(--bag);text-decoration:underline}
.kunye{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin:18px 0;padding:16px 18px}
.kunye div{display:flex;flex-direction:column;min-width:0}
.kunye dt{font-size:14px;color:var(--soluk);text-transform:uppercase;letter-spacing:.6px}
.kunye dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.kunye dd a{color:var(--bag);text-decoration:underline;text-underline-offset:3px;
display:inline-flex;align-items:center;min-height:44px}
@media(max-width:560px){.kunye{grid-template-columns:1fr}}
/* ---- rehber cagrisi (oyun sayfasinda tam rehber kutusu) ---- */
.rehber-cagri{display:flex;align-items:center;gap:16px;padding:18px 20px;margin:18px 0;flex-wrap:wrap;
background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(34,211,238,.10));border:1px solid rgba(139,92,246,.4);border-radius:18px}
.rehber-cagri .rc-ic{flex:1 1 260px}
.rehber-cagri b{display:block;font-size:17px;margin-bottom:3px}
.rehber-cagri span{color:var(--soluk);font-size:14px}
/* Sorun cozum cagrisi: ayni kutu, uyari rengi. Sorun yasayan okuyucu
sayfada gezinmeden cozume ulassin diye rehber kutusundan ayrisir. */
.sorun-cagri{background:linear-gradient(135deg,rgba(251,146,60,.18),rgba(239,68,68,.10));
border-color:rgba(251,146,60,.45)}
/* ---- cipler ---- */
.cipler{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 22px}
.cip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;min-height:44px;border-radius:12px;
background:var(--kart);border:1px solid var(--cizgi);font-weight:600;font-size:14px;transition:.2s}
.cip small{color:var(--soluk);font-weight:400;font-size:14px}
.cip img,.cip .rozet{width:24px;height:24px;border-radius:7px;font-size:9px;box-shadow:none}
.cip:hover{border-color:var(--marka);background:rgba(139,92,246,.12)}
/* ---- rehber kartlari ---- */
.yazilar-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:12px 0 24px}
.yazikart{display:flex;flex-direction:column;gap:6px;padding:18px;transition:border-color .25s,transform .3s var(--yumusak),box-shadow .3s}
/* Kisa kart: aciklamasiz dizin karti (bkz. parcalar.yazi_karti kisa=True).
Daha dar sutun + daha az bosluk; 292 kartlik dizin boylece tek ekranda
goz gezdirilebilir kaliyor. */
.yazilar-izgara.kisalar{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.yazikart.kisa{padding:14px;gap:4px}
.yazikart.kisa b{font-size:15px}
.yazikart b{font-size:16px;line-height:1.35}
.yazikart span{color:var(--soluk);font-size:14px;line-height:1.45}
.yazikart small{color:var(--soluk2);font-size:14px;margin-top:auto;padding-top:6px}
.yazikart:hover{border-color:rgba(139,92,246,.55);transform:translateY(-3px);box-shadow:var(--parilti)}
.yazikart .etk{align-self:flex-start;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
color:var(--bag);background:rgba(139,92,246,.15);padding:3px 8px;border-radius:999px}
.rehber-filtre{max-width:520px;margin:6px 0 18px}
/* ---- yontem / yazar kutusu ---- */
.yazar{margin:32px 0;padding:20px 22px}
.yazar h2{margin-top:0;font-size:18px}
.yazar p{margin:8px 0;color:var(--soluk);font-size:15px}
.yazar p b{color:var(--yazi)}
.yazar a{color:var(--bag);text-decoration:underline;text-underline-offset:3px}
.h2alt a,.kutu a{text-decoration:underline;text-underline-offset:3px;color:var(--bag)}
/* ---- gösterge kutusu ---- */
.endeks-kutu{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 22px;margin:12px 0 26px;
background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(52,245,163,.10));transition:.25s}
.endeks-kutu b{font-size:36px;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.endeks-kutu .ad{font-weight:700}
.endeks-kutu .not{color:var(--soluk);font-size:14px;flex:1 1 220px}
.endeks-kutu:hover{border-color:var(--marka);box-shadow:var(--parilti)}
/* ---- sayfabas (sabit sayfalar) ---- */
.sayfabas{display:flex;align-items:flex-start;gap:15px;margin:6px 0 18px}
.sayfabas h1{font-size:clamp(26px,3.4vw,38px);margin:0;line-height:1.2;letter-spacing:-.8px}
/* ---- gorunum (scroll reveal) ---- */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--yumusak),transform .7s var(--yumusak)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html.js .rv{opacity:1;transform:none;transition:none}
.orb,.kahraman h1 em,.ustyazi i{animation:none}
*{scroll-behavior:auto!important}
}
[data-tilt]{transition:transform .25s var(--yumusak),box-shadow .25s;will-change:transform}
/* ---- karsilastirma sayfasi kartlari ---- */
.karsi-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:12px 0 24px}
.karsi-kart{padding:16px;display:flex;flex-direction:column;gap:4px;transition:.25s}
.karsi-kart b{font-size:16px}
.karsi-kart strong{font-size:22px;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--ucuz)}
.karsi-kart span{color:var(--soluk);font-size:14px}
.karsi-kart:hover{border-color:rgba(139,92,246,.55);transform:translateY(-3px)}
@media (max-width:640px){
.ustbar .sar{min-height:0;padding-top:8px;padding-bottom:6px;row-gap:4px}
.menu{flex:1 0 100%;margin-left:0;justify-content:space-between;order:3}
.menu a{padding:8px 6px;font-size:14px;min-height:40px}
.arama{max-width:none;flex:1 1 100%;order:2}
.kahraman{padding:34px 0 20px}
.kahraman.ana{min-height:0;margin:0 -18px;border-radius:0;border-left:0;border-right:0;padding:34px 18px 22px}
.kahraman p{font-size:16px}
.sayac{min-width:0;flex:1 1 40%;padding:10px 8px}
.sayac b{font-size:22px}
.enucuz .fiyat{font-size:26px}
h2{font-size:23px}
.oyunhero{margin:0 -18px;padding:16px 18px 20px}
}
/* ====================================================================
6 Eylul 2026, ucuncu tur - GEZINME VE KATLANABILIR ICERIK
Neden: ana sayfada 9 bolum alt alta duruyordu, ust barda 5 duz baglanti vardi.
Ilk kez giren "burada ne var" sorusuna kaydirmadan cevap alamiyordu.
==================================================================== */
/* --- Acilir mega menu (masaustu) --- */
.mm-dug{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:10px;
border:0;background:transparent;color:var(--soluk);font:inherit;font-weight:600;
font-size:14px;cursor:pointer;transition:.18s var(--yumusak)}
.mm-dug:hover,.mm-dug[aria-expanded="true"]{background:var(--kart2);color:var(--yazi)}
.mm-dug svg{transition:transform .2s var(--yumusak);opacity:.7}
.mm-dug[aria-expanded="true"] svg{transform:rotate(180deg)}
.mm-panel{position:absolute;left:0;right:0;top:100%;z-index:60;
background:#080a12;backdrop-filter:blur(18px);
border-bottom:1px solid var(--cizgi2);box-shadow:0 24px 60px rgba(0,0,0,.55);
animation:mm-ac .16s var(--yumusak)}
@keyframes mm-ac{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mm-panel>.sar{padding:22px 20px 26px}
.mm-izgara{display:grid;grid-template-columns:1.1fr 1.1fr .9fr;gap:26px}
/* Eskiden h3'tu; menu kolon adlari belge basligi degil, gezinme etiketidir
(9 Eylul 2026, bkz. oyunkuru_gezinme._kolon). Gorunum aynen korundu. */
.mm-kolon .mm-bas{margin:0 0 12px;font-size:14px;letter-spacing:1.4px;text-transform:uppercase;
color:var(--soluk2);font-weight:800}
.mm-sat{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;
text-decoration:none;color:var(--yazi);transition:.15s var(--yumusak)}
.mm-sat:hover{background:var(--kart2);transform:translateX(3px)}
.mm-sat .mm-im{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;
border-radius:10px;background:var(--kart2);border:1px solid var(--cizgi);font-size:16px}
.mm-sat b{display:block;font-size:14px;font-weight:650;line-height:1.3}
.mm-sat small{display:block;color:var(--soluk2);font-size:14px;margin-top:1px}
.mm-sat.sade{padding:7px 10px}
.mm-hepsi{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;
color:var(--marka2);text-decoration:none}
.mm-hepsi:hover{text-decoration:underline}
.mm-tanit{padding:16px;border-radius:16px;background:var(--kart);border:1px solid var(--cizgi)}
.mm-tanit p{margin:0;color:var(--soluk);font-size:14px;line-height:1.6}
.mm-tanit .mm-hepsi{display:block}
/* ORTU ILE UST BARIN SIRASI (9 Eylul 2026, kullanici bildirdi: "ust panel
calismiyor"). `.ustbar` sticky + z-index oldugu icin KENDI yigin baglamini
acar; icindeki `.mm-panel` z-index:60 yazsa bile disaridan bakildiginda
ustbar'in seviyesindedir. Ortu 55 iken panel 50'nin icinde kaliyordu:
menu aciliyor ama uzerine karartma biniyor, tiklamalar ortuye gidiyordu.
Sira artik: icerik < cekmece(58) < yapisik(60) < ortu(65) < ustbar(70). */
.mm-ortu{position:fixed;inset:0;z-index:65;background:rgba(2,3,8,.55);
animation:mm-ac .16s var(--yumusak)}
/* --- Mobil cekmece --- */
.cek-dug{display:none;align-items:center;justify-content:center;box-sizing:border-box;
min-width:44px;width:44px;height:44px;
border-radius:12px;border:1px solid var(--cizgi2);background:var(--kart);
color:var(--yazi);cursor:pointer;flex:0 0 42px}
.cek-dug span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;
position:relative;transition:.2s var(--yumusak)}
.cek-dug span::before,.cek-dug span::after{content:"";position:absolute;left:0;width:18px;height:2px;
background:currentColor;border-radius:2px;transition:.2s var(--yumusak)}
.cek-dug span::before{top:-6px}
.cek-dug span::after{top:6px}
.cek-dug[aria-expanded="true"] span{background:transparent}
.cek-dug[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.cek-dug[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.cekmece{position:fixed;inset:64px 0 0;z-index:58;overflow-y:auto;
background:rgba(6,7,13,.985);backdrop-filter:blur(20px);
animation:mm-ac .18s var(--yumusak);-webkit-overflow-scrolling:touch}
.cek-ic{padding:14px 16px 40px;max-width:760px;margin:0 auto}
.cek-grup{border-bottom:1px solid var(--cizgi)}
.cek-grup>summary{list-style:none;cursor:pointer;padding:16px 4px;font-size:17px;font-weight:700;
display:flex;align-items:center;justify-content:space-between}
.cek-grup>summary::-webkit-details-marker{display:none}
.cek-grup>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--soluk);
border-bottom:2px solid var(--soluk);transform:rotate(45deg);transition:.2s var(--yumusak);
margin-right:6px}
.cek-grup[open]>summary::after{transform:rotate(-135deg)}
.cek-grup .mm-izgara{grid-template-columns:1fr;gap:6px;padding:0 0 14px}
.cek-grup .mm-tanit{margin-top:8px}
.cek-alt{display:block;margin-top:20px;padding:14px;text-align:center;border-radius:14px;
background:var(--kart);border:1px solid var(--cizgi);color:var(--soluk);
text-decoration:none;font-weight:600}
body.kilitli{overflow:hidden}
/* --- Sekmeler (ana sayfa panelleri) --- */
.sek-bar{display:flex;gap:6px;overflow-x:auto;padding:5px;margin:0 0 20px;border-radius:16px;
background:var(--kart);border:1px solid var(--cizgi);scrollbar-width:none}
.sek-bar::-webkit-scrollbar{display:none}
.sek-dug{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:11px 16px;
border-radius:12px;border:0;background:transparent;color:var(--soluk);
font:inherit;font-weight:650;font-size:14.5px;cursor:pointer;white-space:nowrap;
transition:.18s var(--yumusak);min-height:44px}
.sek-dug:hover{color:var(--yazi);background:var(--kart2)}
.sek-dug[aria-selected="true"]{background:var(--gradyan);color:#fff;
box-shadow:0 8px 22px rgba(139,92,246,.32)}
.sek-dug .im{font-size:15px;opacity:.9}
.sek-dug .adet{font-size:14px;padding:2px 7px;border-radius:20px;background:rgba(255,255,255,.14);
font-weight:800;letter-spacing:.2px}
.sek-dug[aria-selected="true"] .adet{background:rgba(255,255,255,.24)}
.sek-govde>[role="tabpanel"]{animation:sek-gir .22s var(--yumusak)}
@keyframes sek-gir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html.js .sek-govde>[role="tabpanel"][hidden]{display:none}
.sek-basi{margin:0 0 16px;color:var(--soluk);font-size:15.5px;max-width:760px}
/* --- Akordeon (uzun bolumler) --- */
.kat{border:1px solid var(--cizgi);border-radius:18px;background:var(--kart);
margin:0 0 12px;overflow:hidden;transition:border-color .2s var(--yumusak)}
.kat[open]{border-color:var(--cizgi2);background:rgba(255,255,255,.055)}
.kat>summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;
gap:14px;min-height:44px}
.kat>summary::-webkit-details-marker{display:none}
.kat>summary:hover{background:var(--kart2)}
.kat .kat-im{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;
background:var(--kart2);border:1px solid var(--cizgi);font-size:17px}
.kat .kat-yazi{flex:1;min-width:0}
.kat .kat-yazi b{display:block;font-size:17px;font-weight:750;letter-spacing:-.2px}
.kat .kat-yazi small{display:block;color:var(--soluk);font-size:14px;margin-top:3px;line-height:1.5}
.kat>summary::after{content:"";flex:0 0 10px;width:10px;height:10px;margin-left:6px;
border-right:2px solid var(--soluk);border-bottom:2px solid var(--soluk);
transform:rotate(45deg);transition:transform .2s var(--yumusak)}
.kat[open]>summary::after{transform:rotate(-135deg)}
.kat-ic{padding:2px 20px 22px;animation:sek-gir .2s var(--yumusak)}
.kat-ic>h3:first-child{margin-top:0}
/* --- "Nasil okunur" ilk giris seridi --- */
.baslangic{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 28px}
.bas-adim{position:relative;padding:18px 18px 18px 56px;border-radius:16px;background:var(--kart);
border:1px solid var(--cizgi)}
.bas-adim i{position:absolute;left:16px;top:17px;width:28px;height:28px;border-radius:50%;
display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px;
background:var(--gradyan);color:#fff}
.bas-adim b{display:block;font-size:15.5px;font-weight:700;margin-bottom:4px}
.bas-adim p{margin:0;color:var(--soluk);font-size:14px;line-height:1.6}
.bas-adim .vurgu{color:var(--ucuz);font-weight:700}
/* --- Sozluk --- */
.sz-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.sz-kart{display:block;padding:16px 18px;border-radius:16px;background:var(--kart);
border:1px solid var(--cizgi);text-decoration:none;color:var(--yazi);
transition:.18s var(--yumusak)}
.sz-kart:hover{transform:translateY(-3px);border-color:var(--cizgi2);box-shadow:var(--golge)}
.sz-kart b{display:block;font-size:16px;font-weight:750;margin-bottom:5px}
.sz-kart small{display:block;color:var(--soluk);font-size:14px;line-height:1.55}
.sz-etiket{display:inline-block;margin-top:9px;font-size:14px;letter-spacing:.6px;
text-transform:uppercase;color:var(--marka2);font-weight:800}
.sz-harf{margin:26px 0 12px;font-size:14px;letter-spacing:1.6px;color:var(--soluk2);font-weight:800}
.sz-tanim{padding:18px 20px;border-radius:16px;background:rgba(139,92,246,.09);
border:1px solid rgba(139,92,246,.28);font-size:17px;line-height:1.6;margin:0 0 20px}
.sz-esanlam{color:var(--soluk);font-size:14px;margin:0 0 22px}
.sz-oyunlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
gap:10px;margin:14px 0 24px}
.sz-oyun{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;
border-radius:14px;background:var(--kart);border:1px solid var(--cizgi);
text-decoration:none;color:var(--yazi);text-align:center;
transition:.18s var(--yumusak)}
.sz-oyun:hover{transform:translateY(-3px);border-color:var(--cizgi2);box-shadow:var(--golge)}
.sz-oyun img,.sz-oyun .rozet{width:56px;height:56px;border-radius:12px;object-fit:cover}
.sz-oyun span{font-size:14px;line-height:1.35;color:var(--soluk)}
/* --- Kod rehberi dizini --- */
.kod-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
gap:12px;margin:16px 0 26px}
.kod-kart{display:flex;align-items:center;gap:12px;padding:14px;border-radius:15px;
background:var(--kart);border:1px solid var(--cizgi);text-decoration:none;
color:var(--yazi);transition:.18s var(--yumusak)}
.kod-kart:hover{transform:translateY(-3px);border-color:var(--cizgi2);box-shadow:var(--golge)}
.kod-kart img,.kod-kart .rozet{width:46px;height:46px;flex:0 0 46px;border-radius:11px;object-fit:cover}
.kod-kart b{display:block;font-size:14.5px;font-weight:700}
.kod-kart small{display:block;font-size:14px;color:var(--soluk);margin-top:2px}
/* --- Ingilizce sayfalar --- */
.en-bas{display:flex;align-items:center;gap:16px}
.en-bas img,.en-bas .rozet{width:76px;height:76px;flex:0 0 76px;border-radius:16px;object-fit:cover}
.en-satir{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.en-satir img,.en-satir .rozet{width:34px;height:34px;flex:0 0 34px;border-radius:9px;object-fit:cover}
@media (max-width:560px){.en-bas img,.en-bas .rozet{width:56px;height:56px;flex:0 0 56px}}
/* --- Populer kapak seridi (dizin sayfalari) --- */
.pop-serit{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
gap:11px;margin:14px 0 26px}
.pop-oyun{display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 8px;
border-radius:15px;background:var(--kart);border:1px solid var(--cizgi);
text-decoration:none;color:var(--yazi);text-align:center;
transition:.18s var(--yumusak)}
.pop-oyun:hover{transform:translateY(-3px);border-color:var(--cizgi2);box-shadow:var(--golge)}
.pop-oyun img,.pop-oyun .rozet{width:58px;height:58px;border-radius:13px;object-fit:cover}
.pop-oyun span{font-size:14px;line-height:1.35;color:var(--soluk)}
.yazikart.kapakli img,.yazikart.kapakli .rozet{width:44px;height:44px;border-radius:11px;
object-fit:cover;margin-bottom:9px;display:block}
/* Ad metni ile sarmalanmaz: flex kutusu cipe olmayan metni zaten
anonim ogeye alir ve gap ona da isler. 9 Eylul 2026'da olculdu - 205
satirlik anahtar/harf/r-t sayfasinda span basina 1 DOM dugumu, sayfada
205 dugum bosuna duruyordu. */
.an-satir{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.an-satir img,.an-satir .rozet{width:32px;height:32px;flex:0 0 32px;border-radius:8px;object-fit:cover}
.karsi-kart.kapakli img,.karsi-kart.kapakli .rozet{width:40px;height:40px;border-radius:10px;
object-fit:cover;margin-bottom:8px;display:block}
.kod-bas{display:flex;align-items:center;gap:15px;margin-bottom:6px}
.kod-bas h1{margin:0}
.kod-bas img,.kod-bas .rozet{width:68px;height:68px;flex:0 0 68px;border-radius:15px;object-fit:cover}
@media (max-width:560px){.kod-bas img,.kod-bas .rozet{width:52px;height:52px;flex:0 0 52px}}
/* --- Gomulebilir rozet tanitimi --- */
.rz-onizleme{display:flex;justify-content:center;padding:26px;border-radius:18px;
background:var(--zemin2);border:1px solid var(--cizgi);margin:0 0 18px}
.rz-kod{position:relative}
/* 16 px: form alani. iOS Safari 16 px'in ALTINDAKI alana odaklaninca sayfayi
zorla yakinlastirir ve geri cikmaz; 14 px'ti (9 Eylul 2026 olcumu). */
.rz-kod textarea{width:100%;min-height:104px;padding:16px;border-radius:14px;resize:vertical;
background:rgba(0,0,0,.35);border:1px solid var(--cizgi2);color:var(--yazi);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;line-height:1.6}
.rz-kopya{position:absolute;top:10px;right:10px;padding:8px 14px;border-radius:10px;
border:1px solid var(--cizgi2);background:var(--kart2);color:var(--yazi);
font:inherit;font-weight:700;font-size:14px;cursor:pointer;min-height:44px}
.rz-kopya:hover{background:var(--marka);border-color:var(--marka)}
/* --- Gomulen rozet ---
Seciciler `body.rozet .rz` degil duz `.rz`: rozet iki yerde gorunuyor, hem
kendi gomulen sayfasinda hem /rozet/ tanitim sayfasindaki onizlemede.
Onizlemede body sinifi yoktu, rozet oradaki 'u tarayici varsayilanina
(13,3 px) birakiyordu (9 Eylul 2026 olcumu). Tek secici iki yeri de tutar. */
body.rozet{background:transparent;margin:0}
.rz{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
background:#0c0e1a;border:1px solid rgba(255,255,255,.14);text-decoration:none;
color:#eef0f8;font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;max-width:340px}
.rz .im{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#8b5cf6,#22d3ee);
display:grid;place-items:center;font-size:18px;flex:0 0 38px}
.rz b{display:block;font-size:15px;font-weight:650;color:#a7b0c6}
.rz .fy{display:block;font-size:19px;font-weight:800;color:#34f5a3;letter-spacing:-.4px}
/* 11 px -> 14 px ve rengi acildi: #6b7488 zeminle 3,9:1 kontrast veriyordu,
WCAG AA normal metin icin 4,5:1 ister. */
.rz small{display:block;font-size:14px;color:#8b96ad;margin-top:2px}
/* --- Dil secici --- */
.dil{display:inline-flex;align-items:center;gap:4px;padding:7px 11px;border-radius:10px;
border:1px solid var(--cizgi);background:var(--kart);color:var(--soluk);
text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.4px}
.dil:hover{color:var(--yazi);border-color:var(--cizgi2)}
@media (max-width:980px){
.mm-izgara{grid-template-columns:1fr 1fr}
.mm-tanit{grid-column:1 / -1}
}
@media (max-width:860px){
.menu{display:none}
.cek-dug{display:flex}
.baslangic{grid-template-columns:1fr}
.sek-bar{border-radius:14px}
.sek-dug{padding:10px 13px;font-size:14px}
.kat>summary{padding:15px 16px;gap:11px}
.kat-ic{padding:2px 16px 18px}
}
/* ====================================================================
9 Eylul 2026 - SITE HARITASI (/harita/)
Neden: sitede insan icin bir dizin yoktu; 1.700 sayfanin bir kismina
yalnizca aramayla ulasiliyordu. Harita hem gezinme hem ic baglanti.
Listeler uzun (en buyugu 736 satir) - bu yuzden sutunlara boluniyor
ve satirlar kart degil, duz metin: 736 kart hem agir hem okunmaz.
==================================================================== */
.haritagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
gap:14px;margin:22px 0}
.haritakutu{background:var(--kart);border:1px solid var(--cizgi);border-radius:14px;
padding:16px 18px 14px}
.haritakutu h2{margin:0;font-size:17px}
.haritakutu h2 a{color:var(--yazi);text-decoration:none}
.haritakutu h2 a:hover{color:var(--vurgu)}
.haritakutu .say{margin:3px 0 8px;font-size:14px;color:var(--soluk2);
text-transform:uppercase;letter-spacing:.6px}
.haritakutu p{margin:0 0 10px;font-size:14px;color:var(--soluk)}
.haritakutu ul{list-style:none;margin:0 0 10px;padding:0;font-size:14px}
.haritakutu li{padding:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.haritakutu li a{color:var(--soluk);text-decoration:none}
.haritakutu li a:hover{color:var(--yazi);text-decoration:underline}
.haritakutu .not{margin:0;font-size:14px}
.haritalist{list-style:none;margin:16px 0;padding:0;
columns:2;column-gap:26px;font-size:14px}
.haritalist li{break-inside:avoid;padding:5px 0;display:flex;gap:8px;
align-items:baseline;justify-content:space-between}
.haritalist li a{color:var(--yazi);text-decoration:none;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.haritalist li a:hover{text-decoration:underline;color:var(--vurgu)}
/* 14 px, 12,5 degil: mobil olcumun okunabilirlik alt siniri 14 px
(araclar/mobil_olc.py - 16 px yalniz form alanlari icin gecerli).
9 Eylul 2026'da olculdu: harita listelerindeki tarih damgasi 12,5 px'ti. */
.haritalist time,.haritalist span{color:var(--soluk2);font-size:14px;
font-variant-numeric:tabular-nums;flex:0 0 auto}
@media (min-width:1100px){.haritalist{columns:3}}
/* Telefonda parmak boyu: harita kutusundaki her bag 44 px yuksekliginde bir
satir olur (WCAG 2.5.8). Masaustunde kutular yogun kalsin diye bu yalniz
720 px altinda uygulanir - 9 Eylul 2026 olcumu /harita/ sayfasinda
44x44 px altinda 20 dokunma hedefi buldu. */
@media (max-width:720px){
.haritalist{columns:1}
.haritakutu li{padding:0}
.haritakutu li a{display:block;padding:11px 0;line-height:22px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.haritakutu h2 a{display:inline-block;padding:11px 0;line-height:22px}
.haritakutu .not a{display:inline-block;padding:11px 10px;line-height:22px;
border-radius:10px;background:var(--kart2)}
}
/* Takip listesi (54. oturum) */
.takipdug{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
border:1px solid var(--cizgi);border-radius:12px;background:transparent;color:var(--soluk);
font-family:inherit;font-weight:600;font-size:15px;line-height:1;
cursor:pointer;transition:.15s}
.takipdug:hover{color:var(--yazi);border-color:var(--mor2)}
.takipdug[aria-pressed="true"]{color:var(--altin);border-color:var(--altin)}
.takipdug[aria-pressed="true"] svg path{fill:var(--altin)}
.takip-bos{padding:22px;text-align:center;color:var(--soluk)}
.takip-satir{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--cizgi)}
.takip-satir:last-child{border-bottom:0}
.takip-satir b{flex:1;min-width:0}
.takip-satir .bf{font-variant-numeric:tabular-nums;white-space:nowrap}
.takip-sil{min-height:44px;min-width:44px;background:none;border:0;color:var(--soluk2);cursor:pointer}
.takip-sil:hover{color:var(--pahali)}
/* /kesfet/ suzgeci (55. oturum) */
.kf-cubuk{position:sticky;top:0;z-index:20;background:var(--zemin);
padding:12px 0 10px;border-bottom:1px solid var(--cizgi);margin-bottom:4px}
.kf-ara{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--cizgi);
border-radius:12px;background:var(--zemin2);color:var(--yazi);font-family:inherit;font-weight:400;font-size:16px;line-height:1}
.kf-ara:focus{outline:2px solid var(--mor2);outline-offset:1px}
.kf-satir{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;align-items:center}
@media(max-width:700px){
/* Telefonda suzgec cubugu yapisik kalirsa ekranin %78'ini kapatiyor -
olculdu, 8 Eylul 2026. Yukari kaydirilinca sonuclara yer acilir. */
.kf-cubuk{position:static}
}
.kf-etiket{font-family:inherit;font-weight:600;font-size:14px;line-height:1;color:var(--soluk2);text-transform:uppercase;
letter-spacing:.04em;margin-right:2px}
.kf-cip{min-height:44px;padding:0 14px;border:1px solid var(--cizgi);border-radius:999px;
background:transparent;color:var(--soluk);font-family:inherit;font-weight:600;font-size:14px;line-height:1;cursor:pointer;
display:inline-flex;align-items:center;transition:.13s;white-space:nowrap}
.kf-cip:hover{color:var(--yazi);border-color:var(--mor2)}
.kf-cip[aria-pressed="true"]{background:var(--mor2);border-color:var(--mor2);color:#fff}
.kf-sec{min-height:44px;padding:0 30px 0 12px;border:1px solid var(--cizgi);
border-radius:999px;background:var(--zemin2);color:var(--yazi);font-family:inherit;font-weight:600;font-size:16px;line-height:1;
cursor:pointer;appearance:none;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.kf-sayac{margin:14px 0 6px;color:var(--soluk);font-size:14px}
.kf-sayac b{color:var(--yazi)}
.kf-sifirla{background:none;border:0;color:var(--mor2);font-family:inherit;font-weight:600;
font-size:14px;line-height:1;min-height:44px;display:inline-flex;align-items:center;
cursor:pointer;text-decoration:underline;padding:0 6px}
/* minmax(0,1fr): grid ogesinin varsayilan min-width'i AUTO'dur, yani icerigin
min-content genisligine gore buyur. Icerideki nowrap oyun adi bu yuzden 390px
ekranda satiri 446px'e cikariyordu (7 Eylul 2026'da olculdu). */
.kf-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.kf-oge{display:flex;align-items:center;gap:12px;padding:13px 2px;min-width:0;
border-bottom:1px solid var(--cizgi);text-decoration:none;color:inherit}
.kf-oge:hover{background:var(--zemin2)}
.kf-ad{flex:1;min-width:0}
.kf-ad b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kf-alt{display:block;font-size:14px;color:var(--soluk2);margin-top:3px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kf-sag{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.kf-fiyat{display:block;font-weight:700;font-size:14px}
.kf-yon{display:block;font-size:14px;margin-top:3px}
.kf-rozet{display:inline-block;min-width:22px;padding:2px 7px;border-radius:7px;
background:var(--zemin2);border:1px solid var(--cizgi);font-family:inherit;font-weight:700;font-size:14px;line-height:1.5;
color:var(--soluk);text-align:center}
.kf-rozet.cok{border-color:var(--altin);color:var(--altin)}
.kf-bos{padding:34px 18px;text-align:center;color:var(--soluk)}
@media(max-width:520px){
.kf-satir{gap:6px}
.kf-etiket{width:100%;margin:2px 0 0}
}
/* --- sesli arama --------------------------------------------------- */
.arama{position:relative}
.ses-dug{position:absolute;right:2px;top:50%;transform:translateY(-50%);
/* 44x44: Apple arayuz kilavuzunun dokunma hedefi alt siniri.
8 Eylul 2026'da mobil olcumde 34x34 olarak yakalandi. */
width:44px;height:44px;display:flex;align-items:center;justify-content:center;
border:0;border-radius:50%;background:transparent;color:var(--sol,#8b93a7);
cursor:pointer;transition:background .15s,color .15s}
.ses-dug:hover{background:rgba(120,130,160,.14);color:var(--metin,#e8ecf5)}
.ses-dug:focus-visible{outline:2px solid var(--vurgu,#5b8cff);outline-offset:2px}
.ses-dug[aria-pressed="true"]{color:#fff;background:#e2405a}
.ses-dug[aria-pressed="true"]::after{content:"";position:absolute;inset:-4px;
border-radius:50%;border:2px solid #e2405a;animation:sesNabiz 1.3s ease-out infinite}
@keyframes sesNabiz{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion: reduce){.ses-dug[aria-pressed="true"]::after{animation:none}}
.buyukarama .ses-dug{right:8px;width:46px;height:46px}
.arama input.q{padding-right:44px}
.ses-panel{display:none;margin:10px 0 0;padding:12px 14px;border-radius:14px;
background:var(--kart,#161a24);border:1px solid var(--cizgi,#252b38);text-align:left}
.ses-panel.acik{display:block}
.ses-panel .duy{font-size:14px;color:var(--sol,#8b93a7);margin:0 0 6px}
.ses-panel .yazi{font-size:17px;font-weight:600;color:var(--metin,#e8ecf5);
margin:0;min-height:22px}
.ses-panel .ornek{margin:8px 0 0;padding:0;list-style:none;display:flex;
flex-wrap:wrap;gap:6px}
.ses-panel .ornek li{font-size:12.5px;color:var(--sol,#8b93a7);
background:rgba(120,130,160,.12);padding:3px 9px;border-radius:99px}
.ses-panel .hata{color:#ffb4a2;font-size:13.5px;margin:6px 0 0}
.ses-cevap{display:none;margin:10px 0 0;padding:14px 16px;border-radius:14px;
background:linear-gradient(135deg,rgba(91,140,255,.16),rgba(91,140,255,.04));
border:1px solid rgba(91,140,255,.35);text-align:left}
.ses-cevap.acik{display:block}
.ses-cevap b{display:block;font-size:17px;color:var(--metin,#e8ecf5)}
.ses-cevap span{display:block;font-size:14px;color:var(--sol,#8b93a7);margin-top:3px}
.ses-cevap a{display:inline-block;margin-top:9px;font-weight:600;
color:var(--vurgu,#5b8cff);text-decoration:none}
.ses-cevap a:hover{text-decoration:underline}
.ses-oku{display:inline-flex;align-items:center;gap:6px;margin-top:9px;
font-size:12.5px;color:var(--sol,#8b93a7);cursor:pointer}