/* ==========================================================================
   OYNIVO — tema
   Rapor 10.4: nötr/karanlık oyun sahnesi, TEK güçlü vurgu rengi,
   8 px aralık sistemi, 12-16 px kart radius, 3 kart oranı (1:1, 4:3, 16:9),
   net loading/error/skeleton durumları, reklam için ayrı gri etiketli slot.
   Desen Poki'den, görsel kimlik Oynivo'nun.
   ========================================================================== */

:root{
  /* --- mor sahne (Eneba paletinden) --- */
  --bg:#1B0B45;
  --bg-2:#250F5C;
  --kart:#351183;
  --kart-2:#4618AC;
  --kart-3:#5825CC;
  --cizgi:rgba(197,177,241,.16);
  --cizgi-2:rgba(197,177,241,.30);

  --ink:#FFFFFF;
  --ink-2:#C5B1F1;
  --ink-3:#9C8FC4;

  /* --- vurgu: parlak sarı --- */
  --vurgu:#FAD318;
  --vurgu-2:#FFE04D;
  --vurgu-koyu:#33240A;
  --vurgu-sis:rgba(250,211,24,.16);

  /* --- yardımcı renkler: kategori ve rozetler --- */
  --nane:#23C299;
  --nane-2:#3DDCB3;
  --pembe:#E76A8C;
  --limon:#84E916;
  --turuncu:#F0A613;
  --gok:#5CC8FF;
  --mor:#A97BFF;
  --mercan:#FF6B4A;

  /* --- 8 px sistemi, çocuk teması için daha yuvarlak --- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --r:18px;  --r-s:12px;  --r-l:26px;

  --hiz:.2s; --hiz-2:.38s;
  --ease:cubic-bezier(.22,.61,.36,1);
  --zipla:cubic-bezier(.34,1.56,.64,1);   /* hafif yaylanma */

  --font:"Baloo 2","Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --govde:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --ust:62px;
  --ray:236px;
  --ray-dar:76px;
  --en:1560px;
}


/* ==========================================================================
   KAYDIRMA ÇUBUKLARI — tarayıcı varsayılanı değil, sitenin rengi
   Firefox scrollbar-color ile, WebKit/Blink ::-webkit-scrollbar ile.
   ========================================================================== */

:root{
  --cubuk:#4E2A9E;          /* çubuğun kendisi */
  --cubuk-ustu:#6B3FCB;     /* üstüne gelince */
  --cubuk-aktif:var(--vurgu);
  --oluk:#150733;           /* çubuğun oturduğu oluk */
}

/* Firefox */
html{scrollbar-color:var(--cubuk) var(--oluk);scrollbar-width:auto}
.serit-in,.ray,.tablo-sar,.ara-liste{scrollbar-color:var(--cubuk) transparent;scrollbar-width:thin}

/* WebKit ve Blink */
::-webkit-scrollbar{width:12px;height:12px;background:var(--oluk)}
::-webkit-scrollbar-track{background:var(--oluk)}
::-webkit-scrollbar-thumb{
  background:var(--cubuk);
  border-radius:99px;
  border:3px solid var(--oluk);   /* oluk içinde ince dursun */
  min-height:44px;
}
::-webkit-scrollbar-thumb:hover{background:var(--cubuk-ustu)}
::-webkit-scrollbar-thumb:active{background:var(--cubuk-aktif)}
::-webkit-scrollbar-corner{background:var(--oluk)}

/* Şerit ve tablo kaydırıcıları: çubuk yalnız üstüne gelince belirir.
   Raflarda çubuk tamamen gizli, gezinme oklarla ve sürükleyerek. */
.serit-in::-webkit-scrollbar,
.tablo-sar::-webkit-scrollbar{height:8px;background:transparent}
.serit-in::-webkit-scrollbar-track,
.tablo-sar::-webkit-scrollbar-track{background:transparent}
.serit-in::-webkit-scrollbar-thumb,
.tablo-sar::-webkit-scrollbar-thumb{
  background:transparent;border:2px solid transparent;background-clip:padding-box;
  transition:background var(--hiz) var(--ease);
}
.serit-in:hover::-webkit-scrollbar-thumb,
.tablo-sar:hover::-webkit-scrollbar-thumb{background:var(--cubuk);background-clip:padding-box}
@media (pointer:coarse){ .serit-in::-webkit-scrollbar{height:0} }

/* sol ray: yalnız üstüne gelince belli olsun, ince */
.ray-kaydir::-webkit-scrollbar{width:8px;background:transparent}
.ray-kaydir::-webkit-scrollbar-track{background:transparent}
.ray-kaydir::-webkit-scrollbar-thumb{background:transparent;border:2px solid transparent;background-clip:padding-box;border-radius:8px}
.ray:hover .ray-kaydir::-webkit-scrollbar-thumb,
.ray-kaydir:focus-within::-webkit-scrollbar-thumb{background:var(--cubuk);background-clip:padding-box}

/* arama listesi */
.ara-liste::-webkit-scrollbar{width:8px}
.ara-liste::-webkit-scrollbar-track{background:transparent}
.ara-liste::-webkit-scrollbar-thumb{background:var(--cubuk);border:2px solid transparent;background-clip:padding-box}

/* oyun çerçevesi içi: iframe kendi sayfasını yönetir, dokunmuyoruz */

*,*::before,*::after{box-sizing:border-box}

/* Tarayıcının kendi [hidden] kuralı yalnız `display:none` diyor ve sınıfımız
   `display` verdiği anda eziliyor: .mozaik grid, .bos-durum flex, .sayfalama
   flex... Bunlar JS'te `el.hidden = true` ile gizlenen ögeler olduğu için
   favori listesi boş kutuyla, arama sonucu bütün katalogla üst üste
   biniyordu. Öznitelik her yerde çalışsın diye tek kural: */
[hidden]{display:none !important}

html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--govde);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:var(--vurgu);text-underline-offset:3px}
a:hover{color:var(--vurgu-2)}
button{font:inherit}

:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px;border-radius:6px}
::selection{background:var(--vurgu-sis);color:var(--ink)}

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

.atla{position:absolute;left:-9999px;top:0;z-index:300;background:var(--vurgu);
  color:var(--vurgu-koyu);padding:12px 20px;border-radius:0 0 var(--r-s) 0;font-weight:700}
.atla:focus{left:0;color:var(--vurgu-koyu)}

h1,h2,h3,h4{margin:0;font-family:var(--font);font-weight:800;letter-spacing:-.012em;line-height:1.15}
h1{font-size:clamp(1.5rem,3vw,2.1rem)}
h2{font-size:clamp(1.1rem,2vw,1.4rem)}
h3{font-size:1.02rem;font-weight:700}
p{margin:0 0 var(--s2)}
p:last-child{margin-bottom:0}

/* ==========================================================================
   ÜST ÇUBUK
   ========================================================================== */

.ust{
  position:sticky;top:0;z-index:100;
  height:var(--ust);
  background:rgba(27,11,69,.9);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--cizgi);
}
.ust-in{
  height:100%;
  max-width:var(--en);margin-inline:auto;
  padding-inline:var(--s2);
  display:flex;align-items:center;gap:var(--s2);
}

/* --- maskotlu logo ---
   İki poz üst üste duruyor; üzerine gelince/dokununca bekleyen poz sönüp
   sevinçli poz beliriyor ve maskot zıplıyor. Tamamı CSS: JS inmeden de,
   JS kapalıyken de çalışıyor. Kutu ölçüsü sabit olduğu için poz değişimi
   yerleşimi oynatmıyor. */
.logo{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;color:var(--ink);
  font-weight:800;font-size:1.16rem;letter-spacing:-.035em;
  flex:0 0 auto;
}
.logo:hover{color:var(--ink)}
.logo .ad{white-space:nowrap}
.logo .mark{
  position:relative;flex:0 0 auto;
  width:34px;height:36px;
  display:grid;place-items:end center;
}
.logo .mark .mk{
  position:absolute;bottom:0;left:50%;
  transform:translateX(-50%);
  height:36px;width:auto;
  filter:drop-shadow(0 3px 10px rgba(250,211,24,.34));
  transition:opacity .18s var(--ease);
}
.logo .mark .mk-sevincli{opacity:0}
.logo:hover .mk-bekle,
.logo:focus-visible .mk-bekle,
.logo:active .mk-bekle{opacity:0}
.logo:hover .mk-sevincli,
.logo:focus-visible .mk-sevincli,
.logo:active .mk-sevincli{opacity:1}
.logo:hover .mark,
.logo:focus-visible .mark,
.logo:active .mark{animation:logoZipla .5s var(--zipla)}
@keyframes logoZipla{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-5px) scale(1.08)}
  70%{transform:translateY(0) scale(.98)}
  100%{transform:translateY(0) scale(1)}
}
/* Boştayken arada bir kıpırdıyor: sayfa canlı görünsün ama dikkat dağıtmasın. */
.logo .mark{animation:logoKipir 11s var(--ease) 4s infinite}
@keyframes logoKipir{
  0%,92%,100%{transform:rotate(0)}
  94%{transform:rotate(-7deg)}
  96%{transform:rotate(6deg)}
  98%{transform:rotate(-3deg)}
}
@media (prefers-reduced-motion:reduce){
  .logo .mark,.logo:hover .mark,.logo:focus-visible .mark,.logo:active .mark{animation:none}
}

/* arama */
.ara{position:relative;flex:1 1 auto;min-width:0;max-width:460px;margin-inline:var(--s1)}
.ara .kutu{
  display:flex;align-items:center;gap:9px;
  background:var(--kart);
  border:1px solid var(--cizgi);
  border-radius:999px;
  padding:0 14px;height:40px;
  transition:border-color var(--hiz) var(--ease),background var(--hiz) var(--ease);
}
.ara .kutu:focus-within{border-color:var(--vurgu);background:var(--kart-2)}
.ara .kutu svg{width:16px;height:16px;color:var(--ink-3);flex:0 0 auto}
.ara input{
  flex:1 1 auto;min-width:0;
  background:none;border:0;outline:none;
  color:var(--ink);font-size:.92rem;font-family:inherit;
}
.ara input::placeholder{color:var(--ink-3)}
.ara input::-webkit-search-cancel-button{filter:invert(.6)}

.ara-liste{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  background:var(--kart);border:1px solid var(--cizgi-2);
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  display:none;z-index:5;
}
.ara-liste.acik{display:block}
.ara-liste a{
  display:flex;align-items:center;gap:11px;padding:8px 12px;
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem;
  border-bottom:1px solid var(--cizgi);
}
.ara-liste a:last-child{border-bottom:0}
.ara-liste a:hover,.ara-liste a:focus-visible{background:var(--kart-2);color:var(--ink)}
.ara-liste img{width:34px;height:34px;border-radius:8px;object-fit:cover;background:var(--bg-2);flex:0 0 auto}
.ara-liste em{display:block;font-style:normal;font-size:.76rem;color:var(--ink-2);font-weight:500}
.ara-liste .bos{padding:14px 13px;color:var(--ink-2);font-size:.9rem}

.ust-sag{display:flex;align-items:center;gap:var(--s1);margin-left:auto;flex:0 0 auto}

.dg{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 18px;
  border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:.9rem;text-decoration:none;cursor:pointer;
  white-space:nowrap;
  transition:background var(--hiz) var(--ease),color var(--hiz) var(--ease),
             border-color var(--hiz) var(--ease),transform var(--hiz) var(--ease);
}
.dg-ana{background:var(--vurgu);color:var(--vurgu-koyu)}
.dg-ana:hover{background:var(--vurgu-2);color:var(--vurgu-koyu);transform:translateY(-1px)}
.dg-hayalet{background:var(--kart);color:var(--ink);border-color:var(--cizgi-2)}
.dg-hayalet:hover{background:var(--kart-2);color:var(--ink);border-color:var(--vurgu)}
.dg-ikon{width:40px;padding:0;flex:0 0 auto}
.dg-ikon svg{width:18px;height:18px}
@media (pointer:coarse){ .dg{min-height:44px} .dg-ikon{width:44px} }

.dg svg{width:17px;height:17px;flex:0 0 auto}

/* --- hamburger ---
   Yalnız sol ray gizliyken (<=1080px) görünüyor: iki ayrı gezinme aynı
   anda durmasın. Kendisi bir bağlantı, düğme değil — JS inmeden de
   çekmeceyi #menu hedefiyle açabilsin diye. */
.cek-ac{
  display:none;
  width:44px;height:44px;flex:0 0 auto;
  border-radius:14px;border:1px solid var(--cizgi-2);
  background:var(--kart);
  place-items:center;
  transition:background var(--hiz) var(--ease),border-color var(--hiz) var(--ease);
}
.cek-ac:hover{background:var(--kart-2);border-color:var(--vurgu)}
.cek-cizgiler{display:grid;gap:4px;width:19px}
.cek-cizgiler i{
  display:block;height:2.6px;border-radius:99px;background:var(--ink);
  transition:transform var(--hiz) var(--ease),opacity var(--hiz) var(--ease);
}
.cek-cizgiler i:nth-child(2){width:74%}
.cek-ac:hover .cek-cizgiler i:nth-child(2){width:100%}
@media (max-width:1080px){ .cek-ac{display:grid} }

@media (max-width:820px){
  .ust-in{padding-inline:12px;gap:10px}
  .ust-sag .gizle-s{display:none}
}
@media (max-width:620px){
  /* Rastgele oyna çekmecede tam etiketiyle duruyor; başlıkta etiketsiz bir
     ikon çocuğa hiçbir şey anlatmadığı için buradan tamamen kalkıyor.
     Kelime markası da iniyor — maskot zaten tanınabilir bir logo. */
  .ust-in{gap:9px}
  .logo .ad{display:none}
  #rastgele{display:none}
}
@media (max-width:520px){
  /* Girişsizken hesap düğmesi de kalkıyor: giriş ve kayıt çekmecenin en
     üstünde, daha rahat okunur halde duruyor. Girişli kullanıcının avatarı
     ise başlıkta kalıyor, kendi köşesine tek dokunuşla gitsin. */
  #hesapBag:not(.girisli){display:none}
}
@media (max-width:360px){
  /* En dar telefonlarda her piksel aramaya gitsin: "Oyun ara" yazısı
     kesilmesin diye boşluklar daralıyor. */
  .ust-in{padding-inline:10px;gap:7px}
  .ara{margin-inline:0}
}

/* girişli kullanıcı: yazı yerine seçtiği arkadaşın yüzü */
#hesapBag.girisli{
  width:40px;padding:0;overflow:hidden;
  border-radius:999px;
}
#hesapBag.girisli img{width:100%;height:100%;object-fit:cover;object-position:top center}
@media (pointer:coarse){ #hesapBag.girisli{width:44px} }

/* ==========================================================================
   SOL RAY (masaüstü) + KATEGORİ ŞERİDİ (mobil)
   ========================================================================== */

.kabuk{
  max-width:var(--en);margin-inline:auto;
  display:grid;grid-template-columns:var(--ray) minmax(0,1fr);
  gap:0;
}
@media (max-width:1080px){ .kabuk{grid-template-columns:minmax(0,1fr)} }

/* --------------------------------------------------------------------------
   Sol ray. Üç bölüm: sabit üst blok, kendi içinde kayan kategoriler, sabit
   alt blok. Böylece 21 kategori arasında gezerken "Ana sayfa" ve "Ebeveynler"
   her zaman yerinde durur. Dar kalıpta yalnız ikonlar kalır, etiket ipucuna
   dönüşür; seçim localStorage'da saklanır.
   -------------------------------------------------------------------------- */
.ray{
  position:sticky;top:var(--ust);
  height:calc(100dvh - var(--ust));
  border-right:1px solid var(--cizgi);
  display:flex;flex-direction:column;
  min-height:0;
}
@media (max-width:1080px){ .ray{display:none} }

.ray-ust,.ray-alt{padding:10px 10px;flex:0 0 auto}
.ray-ust{border-bottom:1px solid var(--cizgi);position:relative}
.ray-alt{border-top:1px solid var(--cizgi)}
.ray-kaydir{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 10px 16px;
}
/* scrollbar-width tanımlanırsa Chrome ::-webkit-scrollbar kurallarını yok
   sayıp düğmeli klasik çubuğu çiziyor. Standart özellikleri bu yüzden yalnız
   webkit sözde öğesini tanımayan tarayıcılara veriyoruz. */
@supports (scrollbar-width:thin) and (not (selector(::-webkit-scrollbar))){
  .ray-kaydir{scrollbar-width:thin;scrollbar-color:transparent transparent}
  .ray:hover .ray-kaydir{scrollbar-color:var(--cubuk) transparent}
}

.ray-bas{
  margin:2px 0 8px;padding:0 8px;
  font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}

/* satır: ikon + etiket + sayı */
.ray-bag{
  position:relative;
  display:flex;align-items:center;gap:11px;
  width:100%;padding:7px 10px 7px 7px;margin-bottom:2px;
  border:0;border-radius:var(--r-s);background:transparent;
  text-align:left;text-decoration:none;cursor:pointer;
  color:var(--ink-2);font-family:inherit;
  font-size:.83rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;
  transition:background var(--hiz) var(--ease),color var(--hiz) var(--ease);
}
.ray-bag b{
  flex:1 1 auto;min-width:0;font-weight:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ray-bag .sayi{
  flex:0 0 auto;font-style:normal;
  font-family:var(--mono);
  font-size:.66rem;font-weight:500;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  transition:color var(--hiz) var(--ease);
}
.ray-bag .ik{
  flex:0 0 auto;
  width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  color:var(--kr,var(--ink-2));
  background:color-mix(in srgb,var(--kr,#6B3FCB) 15%,transparent);
  transition:background var(--hiz) var(--ease),transform var(--hiz) var(--zipla),
             color var(--hiz) var(--ease);
}
.ray-bag .ik svg{width:19px;height:19px}

.ray-bag:hover{background:var(--kart);color:var(--ink)}
.ray-bag:hover .sayi{color:var(--ink-2)}
.ray-bag:hover .ik{background:color-mix(in srgb,var(--kr,#6B3FCB) 26%,transparent);transform:scale(1.06)}
.ray-bag:focus-visible{outline:2px solid var(--vurgu);outline-offset:-2px}

.ray-bag[aria-current]{background:var(--kart);color:var(--ink)}
.ray-bag[aria-current]::before{        /* aktif satırı solda renk şeridi belli eder */
  content:"";position:absolute;left:-10px;top:50%;
  width:4px;height:22px;margin-top:-11px;
  border-radius:0 4px 4px 0;
  background:var(--kr,var(--vurgu));
}
.ray-bag[aria-current] .ik{
  background:var(--kr,var(--vurgu));
  color:var(--vurgu-koyu);
}

/* rastgele satırı: sarı düğme diliyle akraba ama daha sakin */
.ray-rast .ik{background:color-mix(in srgb,var(--vurgu) 18%,transparent);color:var(--vurgu)}
.ray-rast:hover{color:var(--ink)}
.ray-rast:hover .ik{background:var(--vurgu);color:var(--vurgu-koyu)}

/* daralt düğmesi */
/* Düğme eskiden mutlak konumluydu ve "Ana sayfa" satırının üstüne
   biniyordu. Artık kendi satırında, sağa yaslı duruyor. */
.ray-katla{
  position:relative;z-index:2;
  margin:0 2px 6px auto;
  width:28px;height:28px;border:0;border-radius:9px;
  display:grid;place-items:center;
  background:transparent;color:var(--ink-3);cursor:pointer;
  transition:background var(--hiz) var(--ease),color var(--hiz) var(--ease),
             transform var(--hiz) var(--ease);
}
.ray-katla svg{width:16px;height:16px}
.ray-katla:hover{background:var(--kart-2);color:var(--ink)}
.ray-katla:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}

/* ipucu balonu: yalnız dar kalıpta çıkar */
.ipucu{
  position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) scale(.94);
  padding:6px 10px;border-radius:9px;
  background:var(--kart-3);color:var(--ink);
  font-size:.74rem;font-weight:700;white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;z-index:60;
  transition:opacity var(--hiz) var(--ease),transform var(--hiz) var(--zipla);
}
.ipucu::before{
  content:"";position:absolute;right:100%;top:50%;margin-top:-5px;
  border:5px solid transparent;border-right-color:var(--kart-3);
}

/* ---------- dar kalıp ---------- */
.ray-dar .kabuk{grid-template-columns:var(--ray-dar) minmax(0,1fr)}
.ray-dar .ray-ust,.ray-dar .ray-alt,.ray-dar .ray-kaydir{padding-left:10px;padding-right:10px}
.ray-dar .ray-bag{justify-content:center;padding:7px 4px;gap:0}
.ray-dar .ray-bag b,
.ray-dar .ray-bag .sayi,
.ray-dar .ray-bas{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.ray-dar .ray-bas{display:block;margin:0;padding:0}
.ray-dar .ray-katla{position:static;margin:0 auto 8px}
.ray-dar .ray-katla svg{transform:rotate(180deg)}
.ray-dar .ray-bag[aria-current]::before{left:-6px}
.ray-katla:hover .ipucu,.ray-katla:focus-visible .ipucu{opacity:1;transform:translateY(-50%) scale(1)}

/* Dar kalıpta etiket balonu. Kategoriler kendi kutusunda kaydığı için o kutu
   yatayda da kırpıyor; bu yüzden balon gövdeye asılıp fixed konumlanıyor. */
.ray-balon{
  position:fixed;z-index:200;
  padding:6px 10px;border-radius:9px;
  background:var(--kart-3);color:var(--ink);
  font-size:.74rem;font-weight:700;white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;
  transform:translateY(-50%) scale(.94);transform-origin:left center;
  transition:opacity var(--hiz) var(--ease),transform var(--hiz) var(--zipla);
}
.ray-balon::before{
  content:"";position:absolute;right:100%;top:50%;margin-top:-5px;
  border:5px solid transparent;border-right-color:var(--kart-3);
}
.ray-balon.acik{opacity:1;transform:translateY(-50%) scale(1)}

/* orta genişlikte biraz daralt: içerik alanı ezilmesin */
@media (min-width:1081px) and (max-width:1240px){
  :root{--ray:206px}
}

/* ==========================================================================
   ÇEKMECE — mobil/tablet menüsü
   Soldan kayarak açılıyor. Kategorilerin ve kutuların tamamı, hesap köşesi
   ve ana eylemler burada. Yerinde eskiden yatay kayan 34 haplı bir şerit
   vardı; ekranda 2-3'ü görünüyor, gerisi ulaşılamıyordu.

   Açılma iki yoldan: :target (JS'siz) ve .acik sınıfı (JS varsa). İkisi de
   aynı stili tetikliyor, o yüzden davranış tek yerde tanımlı.
   ========================================================================== */
.cek{
  position:fixed;inset:0 auto 0 0;z-index:130;
  width:min(340px,86vw);
  display:flex;flex-direction:column;
  background:var(--bg-2);
  border-right:1px solid var(--cizgi-2);
  box-shadow:22px 0 60px rgba(0,0,0,.5);
  transform:translateX(-101%);
  /* Kapalıyken visibility:hidden — panelin bağlantıları sekme sırasına
     girmesin. Görünürlük AÇILIRKEN anında, KAPANIRKEN kayma bittikten
     sonra değişiyor: geçişe bağlanırsa panel açıldığı an hâlâ "hidden"
     sayılıyor ve odak içeri giremiyor. */
  visibility:hidden;
  transition:transform .3s var(--ease),visibility 0s linear .3s;
  overscroll-behavior:contain;
}
.cek:target,.cek.acik{
  transform:translateX(0);
  visibility:visible;
  transition:transform .3s var(--ease),visibility 0s linear 0s;
}

.cek-perde{
  position:fixed;inset:0;z-index:125;
  background:rgba(10,4,28,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s var(--ease);
}
.cek-perde.acik{opacity:1}
/* JS'siz yolda perde yalnız çekmece açıkken tıklanabilir olmalı; :target
   kardeş seçiciyle çalışmadığı için perdeyi JS açıyor. Bu yüzden hidden. */

.cek-bas{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:12px 14px 12px 16px;
  border-bottom:1px solid var(--cizgi);
  flex:0 0 auto;
}
/* Başlıkta dar ekranda kelime markası iniyor; çekmecede yer bol, marka
   burada tam haliyle duruyor. */
.cek .logo .ad{display:inline}
.cek-kapat{
  width:40px;height:40px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:999px;border:1px solid var(--cizgi-2);
  background:var(--kart);color:var(--ink);text-decoration:none;
}
.cek-kapat:hover{background:var(--kart-2);border-color:var(--vurgu);color:var(--ink)}
.cek-kapat svg{width:18px;height:18px}
@media (pointer:coarse){ .cek-kapat{width:44px;height:44px} }

/* --- hesap köşesi --- */
.cek-hesap{
  padding:14px 16px;
  border-bottom:1px solid var(--cizgi);
  background:linear-gradient(180deg,color-mix(in srgb,var(--mor) 16%,transparent),transparent);
  flex:0 0 auto;
}
.cek-selam{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
/* Girişliyken bu satırın kendisi hesabıma giden bağlantı oluyor */
a.cek-selam{
  padding:6px;margin:-6px;border-radius:16px;
  transition:background var(--hiz) var(--ease);
}
a.cek-selam:hover{background:color-mix(in srgb,var(--mor) 22%,transparent);color:var(--ink)}
.cek-av{
  width:46px;height:46px;flex:0 0 auto;
  border-radius:999px;overflow:hidden;
  background:var(--kart);border:2px solid var(--cizgi-2);
  display:grid;place-items:center;
}
.cek-av img{width:100%;height:100%;object-fit:cover;object-position:top center}
.cek-selam b{display:block;font-size:1.02rem;letter-spacing:-.01em}
.cek-selam span{display:block;margin-top:2px;font-size:.79rem;color:var(--ink-2);line-height:1.4}
.cek-hesap-dg{display:flex;gap:8px;margin-top:12px}
.cek-hesap-dg .dg{flex:1 1 0;padding:0 10px;font-size:.86rem}

/* --- gövde --- */
.cek-govde{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:12px 12px calc(var(--s4) + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;
}
.cek-bas-yazi{
  margin:18px 4px 8px;
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.cek-bag{
  display:flex;align-items:center;gap:11px;
  min-height:46px;padding:0 12px;border-radius:14px;
  color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;
  transition:background var(--hiz) var(--ease);
}
.cek-bag:hover{background:var(--kart);color:var(--ink)}
.cek-bag[aria-current]{background:var(--kart-2);color:var(--ink)}
.cek-bag .ik{width:22px;height:22px;flex:0 0 auto;color:var(--ink-2);display:grid;place-items:center}
.cek-bag .ik svg{width:100%;height:100%}
.cek-bag[aria-current] .ik{color:var(--vurgu)}
.cek-bag.vurgulu{background:var(--vurgu);color:var(--vurgu-koyu);margin-top:6px}
.cek-bag.vurgulu .ik{color:var(--vurgu-koyu)}
.cek-bag.vurgulu:hover{background:var(--vurgu-2);color:var(--vurgu-koyu)}

/* Kategoriler ve kutular iki sütunlu kart ızgarası: 31 bağlantı düz liste
   olsa çok uzun bir kaydırma oluyordu, çıkartmalar da tanımayı hızlandırıyor. */
.cek-izgara{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cek-kart{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-height:88px;padding:9px 10px;border-radius:16px;
  background:var(--kart);
  border:1.5px solid color-mix(in srgb,var(--kr,var(--cizgi)) 34%,transparent);
  color:var(--ink);text-decoration:none;
  transition:border-color var(--hiz) var(--ease),background var(--hiz) var(--ease);
}
.cek-kart:hover{background:var(--kart-2);border-color:var(--kr,var(--vurgu));color:var(--ink)}
.cek-kart[aria-current]{background:var(--kart-2);border-color:var(--kr,var(--vurgu))}
.cek-kart img{width:auto;height:30px;margin-bottom:2px}
.cek-kart b{font-size:.82rem;font-weight:700;line-height:1.2}
.cek-kart i{font-style:normal;font-size:.7rem;color:var(--ink-3);font-family:var(--mono)}
.cek-tumu{
  display:block;margin-top:8px;padding:11px;border-radius:14px;
  text-align:center;font-weight:700;font-size:.87rem;
  background:var(--kart);color:var(--ink-2);text-decoration:none;
  border:1px dashed var(--cizgi-2);
}
.cek-tumu:hover{color:var(--ink);border-color:var(--vurgu)}

/* Çekmece açıkken arkadaki sayfa kaymasın. Sabit konumlamak yerine
   overflow kapatıyoruz: position:fixed hilesi kaydırma yerini kaybettiriyor,
   menü kapanınca çocuk sayfanın başına fırlıyordu. */
html.cek-kilit,html.cek-kilit body{overflow:hidden}

/* Masaüstünde sol ray var, çekmece hiç yok. */
@media (min-width:1081px){ .cek,.cek-perde{display:none} }
@media (prefers-reduced-motion:reduce){
  .cek{transition:none}
  .cek-perde{transition:none}
}

/* ==========================================================================
   İÇERİK
   ========================================================================== */

.icerik{padding:var(--s3) var(--s2) var(--s6)}
@media (max-width:700px){ .icerik{padding:var(--s2) 12px var(--s5)} }

.blok{margin-bottom:var(--s6)}
.blok-bas{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.blok-bas h2{
  flex:0 0 auto;
  font-size:clamp(1.2rem,2.2vw,1.55rem);
  letter-spacing:-.03em;
}
.blok-bas .nicin{
  font-size:.83rem;color:var(--ink-3);margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.blok-bas .hepsi{
  margin-left:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:5px;
  font-size:.82rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--cizgi);background:var(--kart);
  transition:color var(--hiz) var(--ease),border-color var(--hiz) var(--ease),
             background var(--hiz) var(--ease);
}
.blok-bas .hepsi::after{content:"›";font-size:1.05rem;line-height:1;margin-top:-2px}
.blok-bas .hepsi:hover{color:var(--vurgu);border-color:var(--vurgu);background:var(--kart-2)}
@media (max-width:640px){ .blok-bas .nicin{display:none} }

/* ==========================================================================
   MOZAİK IZGARA — raporun 10.1 deseni
   Sabit oran, dense akış, düzen değişiminde CLS yok.
   ========================================================================== */

.mozaik{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
  grid-auto-flow:dense;
  gap:12px;
}
@media (max-width:520px){ .mozaik{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px} }

/* Rafta kolon genişliği SABİT aralıkta kalır. minmax(...,1fr) verilirse
   az sayıda oyunda kartlar ekranı doldurup devleşiyor.

   ÖNEMLİ: overflow-x kullanan bir kutu dikeyde de kırpar. Kartlar hover'da
   yukarı kalkıp hafifçe büyüdüğü için üst kenarları kesiliyordu. Çözüm,
   kaydırıcının içine büyüme payı kadar boşluk koyup aynı miktarda negatif
   dış boşlukla düzeni yerinde tutmak. Böylece hiçbir şey kırpılmıyor ve
   raf yine tam olarak eskisi kadar yer kaplıyor. */
.raf{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(124px,13.5vw,176px);
  justify-content:start;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;

  /* hover büyümesi için pay */
  padding:14px 10px 16px;
  margin:-14px -10px -16px;
  /* pay olmasaydı ilk kart 0'a oturmaz, raf durduğu halde 10px kaymış
     görünür ve sol ok boşuna belirirdi */
  scroll-padding-inline:10px;

  /* karusel: çubuk gizli, gezinme oklarla ve sürükleyerek */
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.raf::-webkit-scrollbar{display:none;width:0;height:0}
.raf.suruklu{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.raf.suruklu a{pointer-events:none}
.raf > *{scroll-snap-align:start}
@media (max-width:520px){ .raf{grid-auto-columns:clamp(108px,31vw,150px);gap:10px} }
@media (prefers-reduced-motion:reduce){ .raf{scroll-behavior:auto} }

/* --- oyun karosu ---
   Başlık artık görselin üstünde değil. Oyun kapakları renkli ve kalabalık;
   metni onların üstüne bindirmek okumayı zorlaştırıyordu. Kart kare kalır,
   görsel üst kısmı doldurur, ad ve etiket kendi şeridinde durur. Böylece
   ızgara matematiği değişmez ve 2x2 karolar aynı şekilde çalışır. */
.karo{
  position:relative;display:grid;
  grid-template-rows:1fr auto;
  aspect-ratio:1/1;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--kart);
  text-decoration:none;color:var(--ink);
  isolation:isolate;
  transition:transform var(--hiz-2) var(--ease),
             box-shadow var(--hiz-2) var(--ease),
             background var(--hiz-2) var(--ease);
}
.karo:hover,.karo:focus-visible{
  transform:translateY(-5px);
  background:var(--kart-2);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  color:var(--ink);
}
.karo::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:var(--r);
  border:1.5px solid transparent;
  transition:border-color var(--hiz-2) var(--ease);
}
.karo:hover::after,.karo:focus-visible::after{border-color:var(--kr,var(--vurgu))}

.karo .gorsel{
  position:relative;overflow:hidden;
  background:var(--bg-2);
  min-height:0;                 /* grid içinde küçülebilsin */
}
.karo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--hiz-2) var(--ease);
}
.karo:hover img{transform:scale(1.07)}

.karo .bant{
  padding:8px 10px 9px;
  background:var(--kart);
  transition:background var(--hiz-2) var(--ease);
  min-width:0;
  display:block;text-decoration:none;color:inherit;
}
/* bağlantıyı kartın tamamına ger: metin bantta kalır, tıklama alanı kart */
.karo .bant::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit}
.karo:has(.bant:focus-visible){
  transform:translateY(-5px);background:var(--kart-2);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.karo:has(.bant:focus-visible)::after{border-color:var(--kr,var(--vurgu))}
.karo .bant:focus-visible{outline:none}
.karo:has(.bant:focus-visible) .oyna{opacity:1}

/* kalp: gerilmiş bağlantının da üstünde durmalı */
.kalp{
  position:absolute;top:8px;right:8px;z-index:5;
  width:32px;height:32px;border:0;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(21,7,51,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--ink-2);cursor:pointer;
  opacity:0;transform:scale(.8);
  transition:opacity var(--hiz) var(--ease),transform var(--hiz) var(--zipla),
             background var(--hiz) var(--ease),color var(--hiz) var(--ease);
}
.kalp svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.karo:hover .kalp,.kalp:focus-visible,.kalp[aria-pressed="true"]{opacity:1;transform:scale(1)}
.kalp:hover{background:var(--pembe);color:#2A0713}
.kalp[aria-pressed="true"]{color:var(--pembe)}
.kalp[aria-pressed="true"] svg{fill:var(--pembe)}
.kalp[aria-pressed="true"]:hover{background:var(--pembe);color:#2A0713}
.kalp[aria-pressed="true"]:hover svg{fill:#2A0713}
.kalp:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
.kalp.atti{animation:kalpAt .42s var(--zipla)}
@keyframes kalpAt{40%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@media (pointer:coarse){ .kalp{opacity:1;transform:scale(1);width:34px;height:34px} }
@media (prefers-reduced-motion:reduce){ .kalp.atti{animation:none} }
.karo.b2 .kalp{top:11px;right:11px;width:38px;height:38px}
.karo.b2 .kalp svg{width:20px;height:20px}
.karo:hover .bant{background:var(--kart-2)}
.karo .bant b{
  display:block;font-size:.84rem;font-weight:800;letter-spacing:-.015em;
  line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.karo .bant i{
  display:block;font-style:normal;margin-top:2px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.karo .oyna{
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;
  background:radial-gradient(58% 58% at 50% 46%,rgba(21,7,51,.34),rgba(21,7,51,.66));
  opacity:0;transition:opacity var(--hiz-2) var(--ease);
}
.karo:hover .oyna,.karo:focus-visible .oyna{opacity:1}
.karo .oyna span{
  width:46px;height:46px;border-radius:50%;
  background:var(--vurgu);color:var(--vurgu-koyu);
  display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(250,211,24,.5);
  transform:scale(.82);
  transition:transform var(--hiz-2) var(--ease);
}
.karo:hover .oyna span{transform:scale(1)}
.karo .oyna svg{width:20px;height:20px;margin-left:2px}

.karo .rozet{
  position:absolute;top:7px;left:7px;z-index:3;
  font-family:var(--mono);font-size:.56rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--vurgu);color:var(--vurgu-koyu);
  border-radius:5px;padding:3px 6px;
}
.karo .rozet.sade{
  background:rgba(21,7,51,.82);color:var(--ink);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* mozaik boyutları */
.karo.b2{grid-column:span 2;grid-row:span 2}
.karo.b2 .bant{padding:12px 15px 14px}
.karo.b2 .bant b{font-size:1.14rem}
.karo.b2 .bant i{font-size:.66rem;margin-top:4px}
.karo.b2 .oyna span{width:64px;height:64px;transform:scale(.86)}
.karo.b2:hover .oyna span{transform:scale(1)}
.karo.b2 .oyna svg{width:27px;height:27px}
.karo.b2 .rozet{top:11px;left:11px;font-size:.62rem;padding:4px 9px}

/* iskelet durumu */
.karo.iskelet{
  background:linear-gradient(100deg,var(--kart) 30%,var(--kart-2) 50%,var(--kart) 70%);
  background-size:220% 100%;
  animation:kayar 1.6s linear infinite;
  pointer-events:none;
}
@keyframes kayar{from{background-position:120% 0}to{background-position:-20% 0}}

/* ==========================================================================
   KATEGORİ KARTI
   ========================================================================== */

.kat-kart{
  position:relative;
  display:flex;align-items:center;gap:13px;
  padding:16px;border-radius:var(--r);
  background:var(--kart);border:1px solid var(--cizgi);
  text-decoration:none;color:var(--ink);
  overflow:hidden;
  transition:background var(--hiz) var(--ease),border-color var(--hiz) var(--ease),
             transform var(--hiz) var(--ease);
}
.kat-kart::before{     /* kategorinin kendi rengi, köşede sessiz bir ışık */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 130% at 8% 50%,
    color-mix(in srgb,var(--kr,var(--vurgu)) 20%,transparent),transparent 62%);
  opacity:.55;transition:opacity var(--hiz) var(--ease);
}
.kat-kart:hover{
  background:var(--kart-2);border-color:var(--kr,var(--vurgu));
  transform:translateY(-3px);color:var(--ink);
}
.kat-kart:hover::before{opacity:1}
.kat-kart .ik{
  position:relative;
  width:46px;height:46px;flex:0 0 auto;border-radius:13px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--kr,var(--vurgu)) 18%,var(--bg-2));
  color:var(--kr,var(--vurgu));
  border:1px solid color-mix(in srgb,var(--kr,var(--vurgu)) 34%,transparent);
}
.kat-kart .ik svg{width:23px;height:23px}
.kat-kart > span:last-child{position:relative;min-width:0}
.kat-kart b{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.kat-kart span span{display:block;font-size:.79rem;color:var(--ink-2);margin-top:2px}

/* ==========================================================================
   OYUN SAHNESİ (oyun.js iskeleti)
   ========================================================================== */

.oy{
  position:relative;
  background:#150733;
  border:1px solid var(--cizgi);
  border-radius:var(--r-l);
  overflow:hidden;isolation:isolate;
  /* Kutu JS çalışmadan ÖNCE de yerini tutar: yükleme sırasında düzen kaymaz.
     Tuval geldiğinde aynı oranı alır, yani CLS sıfır kalır. */
  aspect-ratio:16/10;
}
.oy-cv{display:block;width:100%;aspect-ratio:16/10;touch-action:none;cursor:pointer;outline:none}
.oy-cv:focus-visible{outline:2px solid var(--vurgu);outline-offset:-2px}
@media (max-width:760px){ .oy,.oy-cv{aspect-ratio:1/1} }

/* JS kapalıysa ya da oyun yüklenemezse boş siyah kutu bırakma (rapor 10.2) */
.oy:empty::after{
  content:"Oyun yükleniyor. Açılmazsa sayfayı yenilemeyi dene.";
  position:absolute;inset:0;display:grid;place-items:center;
  padding:var(--s3);text-align:center;
  color:var(--ink-3);font-size:.88rem;
}

.oy-hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;
  padding:11px 12px;pointer-events:none;z-index:2}
.oy-chip{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(21,7,51,.62);
  border:1px solid var(--cizgi);border-radius:8px;padding:4px 9px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.oy-chip b{color:var(--vurgu);font-weight:600;font-size:.82rem;letter-spacing:0;
  font-variant-numeric:tabular-nums;margin-left:3px}
.oy-chip em{font-style:normal}
.oy-can{margin-left:auto;display:inline-flex;gap:5px;align-items:center}
.oy-can i{width:7px;height:7px;border-radius:50%;background:var(--vurgu);
  transition:background var(--hiz) var(--ease),transform var(--hiz) var(--ease)}
.oy-can i.off{background:var(--ink-3);transform:scale(.66)}

.oy-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:var(--s2);
  padding:14px 12px 13px;
  background:linear-gradient(180deg,rgba(21,7,51,0),rgba(21,7,51,.9) 48%);
}
/* Kaplama açıkken alt çubuk görünmez: sönük düğme kirli duruyor */
.oy:not(.is-play) .oy-bar{opacity:0;pointer-events:none}
.oy-msg{margin:0;flex:1 1 auto;min-width:0;font-size:.85rem;color:var(--ink-2)}
.oy-act{
  flex:0 0 auto;height:38px;padding:0 18px;border-radius:999px;border:0;
  background:var(--vurgu);color:var(--vurgu-koyu);font-weight:700;font-size:.86rem;cursor:pointer;
  transition:background var(--hiz) var(--ease);
}
.oy-act:hover{background:var(--vurgu-2)}
@media (pointer:coarse){ .oy-act{min-height:44px} }

.oy-veil{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(66% 66% at 50% 44%,rgba(8,10,13,.5),rgba(8,10,13,.9));
  transition:opacity var(--hiz-2) var(--ease);
}
.oy-veil.gone{opacity:0;pointer-events:none}
.oy-play{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  background:none;border:0;cursor:pointer;padding:6px;
  color:var(--ink);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;
}
.oy-play svg{width:76px;height:76px;transition:transform var(--hiz-2) var(--ease)}
.oy-play .ring{fill:var(--vurgu);stroke:none}
.oy-play .tri{fill:var(--vurgu-koyu)}
.oy-play:hover svg{transform:scale(1.08)}
.oy-hint{margin:0;max-width:34ch;text-align:center;font-size:.83rem;color:var(--ink-2);padding:0 var(--s3)}

/* ==========================================================================
   OYUN SAYFASI
   ========================================================================== */

.oyun-duzen{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:var(--s3);align-items:start}
@media (max-width:1180px){ .oyun-duzen{grid-template-columns:minmax(0,1fr)} }

.oyun-ust{display:flex;align-items:center;gap:12px;margin-bottom:var(--s2);flex-wrap:wrap}
.oyun-ust h1{font-size:clamp(1.35rem,2.6vw,1.9rem)}
.oyun-ust .rozetler{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.mini{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--kart);border:1px solid var(--cizgi);border-radius:7px;
  padding:4px 9px;color:var(--ink-2);
}

.yan{display:grid;gap:10px}
.yan h2{font-size:.94rem;margin-bottom:2px}
.yan-oyun{
  display:flex;align-items:center;gap:11px;padding:7px;
  border-radius:var(--r-s);background:var(--kart);border:1px solid var(--cizgi);
  text-decoration:none;color:var(--ink);
  transition:background var(--hiz) var(--ease),transform var(--hiz) var(--ease);
}
.yan-oyun:hover{background:var(--kart-2);transform:translateX(3px);color:var(--ink)}
.yan-oyun img{width:48px;height:48px;border-radius:9px;object-fit:cover;background:var(--bg-2);flex:0 0 auto}
.yan-oyun b{display:block;font-size:.88rem;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.yan-oyun i{display:block;font-style:normal;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}

/* ==========================================================================
   REKLAM SLOTU — tasarım token'ından ayrı, gri, etiketli (rapor 13.2)
   ========================================================================== */

.reklam{
  border:1px dashed var(--cizgi-2);
  border-radius:var(--r-s);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.016) 0 9px,transparent 9px 18px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:104px;padding:var(--s2);text-align:center;
  margin-block:var(--s4);
}
.reklam .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.reklam .not{font-size:.8rem;color:var(--ink-3);max-width:52ch;margin:0}

/* ==========================================================================
   METİN BLOKLARI, TABLO, SSS
   ========================================================================== */

.yazi{max-width:70ch}
.yazi h2{margin:var(--s5) 0 var(--s1)}
.yazi h3{margin:var(--s3) 0 var(--s1)}
.yazi p,.yazi li{color:var(--ink-2)}
.yazi ul,.yazi ol{margin:0 0 var(--s2);padding-left:1.15em}
.yazi li{margin-bottom:7px}
.yazi li::marker{color:var(--vurgu)}
.yazi strong{color:var(--ink);font-weight:700}
.yazi a{font-weight:600}

.kucuk{font-size:.82rem;color:var(--ink-3);line-height:1.5}

.tablo-sar{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablo{width:100%;border-collapse:collapse;font-size:.9rem}
.tablo th,.tablo td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--cizgi);vertical-align:top}
.tablo th{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500}
.tablo td{color:var(--ink-2)}
.tablo td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}

.sss{max-width:860px}
.sss details{border-bottom:1px solid var(--cizgi)}
.sss summary{
  cursor:pointer;list-style:none;padding:16px 40px 16px 0;
  font-weight:700;font-size:1rem;position:relative;
  transition:color var(--hiz) var(--ease);
}
.sss summary::-webkit-details-marker{display:none}
.sss summary:hover{color:var(--vurgu)}
.sss summary::after{
  content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--vurgu);border-bottom:2px solid var(--vurgu);
  transform:rotate(45deg);transition:transform var(--hiz-2) var(--ease);
}
.sss details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.sss .cvp{padding:0 0 16px;color:var(--ink-2);max-width:68ch}

/* ==========================================================================
   KIRINTI YOLU
   ========================================================================== */

/* Kısayol: .icerik'in yatay dolgusu korunmalı. Burada "padding" kısayolu
   kullanılırsa sol dolgu sıfırlanıyor ve yol çizgisi başlıktan daha sola
   kayıyordu — sadece dikey ekseni ayarlıyoruz. */
.yol{font-size:.82rem;color:var(--ink-3);padding-block:var(--s2) 0}
.yol ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.yol li{display:flex;align-items:center;gap:6px;min-width:0}
.yol li+li::before{content:"";width:4px;height:4px;flex:0 0 auto;
  border-right:1.4px solid var(--ink-3);border-bottom:1.4px solid var(--ink-3);transform:rotate(-45deg)}
.yol a{color:var(--ink-3);text-decoration:none}
.yol a:hover{color:var(--vurgu)}
.yol [aria-current]{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:24ch}

/* ==========================================================================
   ALT BİLGİ — zengin, süslü, çocuk temasına uygun
   ========================================================================== */

/* ==========================================================================
   ALT BİLGİ — "SAHNE"
   Eskiden footer'ın üstünde tek parça geniş bir çizim vardı. Kendi mor
   dikdörtgeni footer'ın renginden başkaydı, üstten ve alttan maskeyle
   kesiliyor, karakterler yarım kalıyordu: yapıştırılmış duruyordu.

   Yenisi bir sahne kuruyor. Gökyüzü sayfanın kendi arka planı, yani içerik
   biterken hiçbir dikiş yok. Altta iki katman tepe var; arkadaki daha açık,
   öndeki footer gövdesiyle birebir aynı renk, dolayısıyla tepe çizgisi
   footer'ın kendi üst kenarı oluyor. Karakterler bu iki tepenin arasında
   duruyor, ayakları ön tepenin arkasında kalıyor — kesilmiş değil, arkasında.
   ========================================================================== */

/* Tepe renkleri tek yerde: ön tepe ile gövdenin üstü ayrışırsa
   birleşme yerinde çizgi belirir. */
/* Uzaktaki tepe daha açık: gece manzarasında hava perspektifi böyle okunur.
   Öndeki tepe footer gövdesiyle birebir aynı renk olmak zorunda. */
:root{ --tepe-on:#250F5C; --tepe-arka:#3B1B85; --tepe-uzak:#2C1266; }

.alt{
  position:relative;
  margin-top:var(--s6);
  background:transparent;
}

.alt-sahne{
  position:relative;
  height:clamp(132px,17vw,232px);
  /* figür ölçeği: tek değişkenden türüyor ki oranlar her ekranda korunsun */
  --f:clamp(34px,4.6vw,62px);
  overflow:hidden;
  /* gökyüzündeki serpinti: DOM'a düğüm eklemeden, boyanan tek katman */
  background-image:
    radial-gradient(2px 2px at 12% 26%,rgba(250,211,24,.5),transparent),
    radial-gradient(2px 2px at 31% 14%,rgba(92,200,255,.45),transparent),
    radial-gradient(3px 3px at 48% 30%,rgba(231,106,140,.4),transparent),
    radial-gradient(2px 2px at 63% 12%,rgba(132,233,22,.4),transparent),
    radial-gradient(2px 2px at 79% 28%,rgba(169,123,255,.5),transparent),
    radial-gradient(3px 3px at 91% 16%,rgba(250,211,24,.4),transparent);
}

/* tepenin ardından vuran yumuşak ışık: sahneye derinlik verir */
.alt-isik{
  position:absolute;left:50%;bottom:-49%;
  width:min(900px,86%);height:150%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(250,211,24,.16),rgba(169,123,255,.09) 42%,transparent 70%);
  pointer-events:none;
}

/* Tepeler tam genişlik (zemin ekranı boydan boya geçer) ama figürler
   içerik sütunuyla aynı hizada dursun: footer'ın sütunlarıyla ilişkili
   görünmelerini sağlayan şey bu. */
.alt-figurler{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100%, calc(var(--en) + 2 * var(--s2)));
}
.af{
  position:absolute;
  height:calc(var(--f) * var(--o,1));
  width:auto;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
/* --o: figürün ölçek çarpanı, --x: yatay yer, --y: tepeye göre yükseklik.
   Yerdekilerin --y değeri ön tepenin O NOKTADAKİ yüksekliğinden yaklaşık
   0,14f çıkarılarak seçildi: figürün altı tepe çizgisinin biraz altında
   kalıyor, yani ayakları görünmüyor ama gövdesi kesilmiş de olmuyor.
   Tepe eğrisi değişirse bu değerler de yeniden hesaplanmalı. */
.af{ left:var(--x); bottom:calc(var(--f) * var(--y)); }
.a1{--o:1.55;--x:3%;  --y:.36}   /* canavar   — yerde (tepe ~.50) */
.a2{--o:.95; --x:15%; --y:1.55}  /* yıldız    — havada */
.a3{--o:2.42;--x:21%; --y:.41}   /* maskot    — başrol, yerde (~.55) */
.a4{--o:1.12;--x:36%; --y:1.75}  /* roket     — havada */
.a5{--o:1.36;--x:46%; --y:.41}   /* kumanda   — yerde (~.55) */
.a6{--o:1.68;--x:60%; --y:1.35}  /* balon     — havada */
.a7{--o:1.16;--x:73%; --y:.50}   /* gezegen   — yerde (~.64) */
.a8{--o:1.52;--x:85%; --y:.49}   /* araba     — yerde (~.63) */

/* havadakiler usulca süzülsün; yerdekiler dursun ki sahne kalabalıklaşmasın */
.a2,.a4,.a6{animation:suzul 7s var(--ease) infinite}
.a4{animation-duration:8.5s;animation-delay:-2s}
.a6{animation-duration:9.5s;animation-delay:-4s}
@keyframes suzul{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-10px) rotate(4deg)}
}
@media (prefers-reduced-motion:reduce){ .a2,.a4,.a6{animation:none} }

/* tepeler: preserveAspectRatio="none" ile her genişliğe yayılır */
.tepe{
  position:absolute;left:0;width:100%;display:block;
  pointer-events:none;
}
.tepe.uzak{bottom:0;height:calc(var(--f) * 2.05);fill:var(--tepe-uzak)}
.tepe.arka{bottom:0;height:calc(var(--f) * 1.5);fill:var(--tepe-arka);opacity:.95}
.tepe.on{bottom:-1px;height:calc(var(--f) * 1.12);overflow:visible}
.tepe.on .dolgu{fill:var(--tepe-on)}
/* tepenin sırtında ince bir ışık: kenar tanımlı olsun, düz yamaç durmasın.
   vector-effect sayesinde SVG yatayda esnetilse de çizgi kalınlaşmıyor. */
.tepe.on .cizgi{
  fill:none;stroke:rgba(255,255,255,.14);stroke-width:2;
  vector-effect:non-scaling-stroke;
}

/* footer gövdesi ön tepeyle aynı renkten başlıyor: birleşme görünmüyor */
.alt-govde{
  background:linear-gradient(180deg,var(--tepe-on),#12062F);
  padding:0 var(--s2) var(--s4);
}

/* dar ekranda sahne kalabalıklaşmasın: figürler sırayla çekilir */
@media (max-width:1100px){ .a4,.a7{display:none} }
@media (max-width:820px){
  .a2,.a6{display:none}
  .a1{--x:4%}  .a3{--x:26%} .a5{--x:54%} .a8{--x:78%}
}
@media (max-width:560px){
  .a1{display:none}
  .alt-sahne{height:clamp(112px,26vw,150px);--f:clamp(30px,7.4vw,46px)}
  .a3{--x:6%} .a5{--x:44%} .a8{--x:72%}
}

.alt-in{
  position:relative;
  max-width:var(--en);margin-inline:auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:var(--s4);
  padding-top:var(--s2);
}
@media (max-width:1180px){ .alt-in{grid-template-columns:1.4fr 1fr 1fr 1fr} }
@media (max-width:900px){ .alt-in{grid-template-columns:1fr 1fr;gap:var(--s3)} }
@media (max-width:520px){ .alt-in{grid-template-columns:1fr} }

.alt h4{
  font-family:var(--font);
  font-size:.98rem;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:12px;
  display:flex;align-items:center;gap:7px;
}
.alt h4::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--nokta,var(--vurgu));flex:0 0 auto;
}
.alt ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.alt a{color:var(--ink-2);text-decoration:none;font-size:.9rem;
  transition:color var(--hiz) var(--ease),transform var(--hiz) var(--ease);
  display:inline-block}
.alt a:hover{color:var(--vurgu);transform:translateX(3px)}
.alt .aciklama{max-width:36ch;color:var(--ink-2);font-size:.92rem;margin-top:12px;line-height:1.6}

/* güven rozetleri */
.alt-rozet{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.alt-rozet span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:700;
  background:rgba(255,255,255,.07);
  border:1px solid var(--cizgi);
  border-radius:999px;padding:7px 13px;color:var(--ink-2);
}
.alt-rozet svg{width:14px;height:14px;color:var(--nane-2);flex:0 0 auto}

/* kategori bulutu */
.alt-bulut{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.alt-bulut a{
  font-size:.78rem;font-weight:700;
  background:rgba(255,255,255,.06);
  border:1px solid var(--cizgi);
  border-radius:999px;padding:6px 12px;color:var(--ink-2);
}
.alt-bulut a:hover{background:var(--vurgu);border-color:var(--vurgu);color:var(--vurgu-koyu);transform:none}

.alt-not{
  max-width:var(--en);margin:var(--s5) auto 0;
  padding-top:var(--s3);border-top:1px solid var(--cizgi);
  font-size:.8rem;color:var(--ink-3);line-height:1.65;
}
.alt-alt{
  max-width:var(--en);margin:var(--s2) auto 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-size:.8rem;color:var(--ink-3);
}
.alt-alt .sag{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap}
.dil-secici{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--cizgi);border-radius:999px;background:rgba(255,255,255,.05)}
.alt .dil-secici a{min-width:34px;padding:4px 9px;border-radius:999px;text-align:center;font:700 .72rem/1.2 "IBM Plex Mono",monospace;color:var(--ink-2)}
.alt .dil-secici a:hover{transform:none;background:rgba(255,255,255,.08);color:var(--ink)}
.alt .dil-secici a[aria-current="page"]{background:var(--vurgu);color:var(--vurgu-koyu)}

/* ==========================================================================
   HAREKET
   ========================================================================== */

.gir{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.gir.ic{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;
  }
  .gir{opacity:1;transform:none}
  .karo.iskelet{animation:none}
}
body.durdu *,body.durdu *::before,body.durdu *::after{animation-play-state:paused!important}

/* ==========================================================================
   GÖMÜLÜ OYUN (dış sağlayıcı) — rapor 10.2 / 14.1
   ========================================================================== */

.gm{
  position:relative;
  background:#120630;
  border:1px solid var(--cizgi);
  border-radius:var(--r-l);
  overflow:hidden;
  isolation:isolate;
  aspect-ratio:var(--oran,4/3);   /* oran ÖNCEDEN ayrılır: sıfır CLS */
}
@media (max-width:760px){
  .gm{aspect-ratio:var(--oran-mob,var(--oran,4/3))}
}
.gm:fullscreen{aspect-ratio:auto;width:100%;height:100%;border-radius:0}

.gm-cerceve{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;background:#120630;
  opacity:0;transition:opacity .4s var(--ease);
}
.gm.gm-hazir .gm-cerceve{opacity:1}

/* --- perde: kapak + oyna --- */
.gm-perde{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:var(--s3);text-align:center;
  transition:opacity .35s var(--ease);
}
.gm-perde::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--kapak);background-size:cover;background-position:center;
  filter:blur(18px) saturate(.7) brightness(.42);
  transform:scale(1.12);
}
.gm-perde::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(62% 62% at 50% 46%,rgba(18,6,48,.44),rgba(18,6,48,.86));
}
.gm-perde.gm-gitti{opacity:0;pointer-events:none}

.gm-kapak{
  width:clamp(84px,15vw,124px);aspect-ratio:1;
  border-radius:var(--r);object-fit:cover;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.1);
}
.gm-perde h2{font-size:clamp(1.05rem,2.4vw,1.4rem);max-width:24ch}

.gm-oyna{
  display:inline-flex;align-items:center;gap:9px;
  height:46px;padding:0 26px;border:0;border-radius:999px;
  background:var(--vurgu);color:var(--vurgu-koyu);
  font-weight:800;font-size:1rem;cursor:pointer;
  box-shadow:0 6px 24px rgba(250,211,24,.4);
  transition:background var(--hiz) var(--ease),transform var(--hiz) var(--ease);
}
.gm-oyna:hover{background:var(--vurgu-2);transform:translateY(-2px)}
.gm-oyna svg{width:18px;height:18px}
@media (pointer:coarse){ .gm-oyna{min-height:48px} }

/* --- durum satırı --- */
.gm-durum{
  font-size:.86rem;color:var(--ink-2);max-width:46ch;margin:0;
  display:flex;align-items:center;gap:9px;justify-content:center;
}
.gm-durum.kotu{color:#FFB4A0}
.gm.gm-yukleniyor .gm-durum::before{
  content:"";width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--cizgi-2);border-top-color:var(--vurgu);
  animation:gmDon .8s linear infinite;
}
@keyframes gmDon{to{transform:rotate(360deg)}}

.gm-yonelim{
  font-size:.8rem;color:var(--ink-2);
  background:rgba(255,255,255,.06);
  border:1px solid var(--cizgi);
  border-radius:var(--r-s);padding:8px 13px;margin:0;max-width:34ch;
}

/* --- araç çubuğu --- */
.gm-arac{
  display:flex;align-items:center;gap:8px;
  margin-top:10px;flex-wrap:wrap;
}
.gm-arac button{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 14px;border-radius:999px;
  background:var(--kart);border:1px solid var(--cizgi);
  color:var(--ink-2);font-size:.84rem;font-weight:600;cursor:pointer;
  transition:border-color var(--hiz) var(--ease),color var(--hiz) var(--ease),
             background var(--hiz) var(--ease);
}
.gm-arac button:hover{border-color:var(--vurgu);color:var(--ink);background:var(--kart-2)}
.gm-arac button svg{width:15px;height:15px}
.gm-arac .saglayici{
  margin-left:auto;font-size:.76rem;color:var(--ink-3);
  display:flex;align-items:center;gap:6px;
}
@media (pointer:coarse){ .gm-arac button{min-height:44px} }

.gm-bildir-kutu{
  margin-top:12px;padding:14px;
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  max-width:560px;
}
.gm-bildir-kutu h3{font-size:.94rem;margin-bottom:9px}
.gm-bildir-kutu .pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px;list-style:none;padding:0}
.gm-bildir-kutu .pills li{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--bg-2);border:1px solid var(--cizgi);border-radius:999px;
  padding:5px 11px;color:var(--ink-2);
}

/* --- editör kapısı rozeti --- */
.kapi{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.8rem;color:var(--ink-2);
  background:rgba(255,197,61,.09);
  border:1px solid rgba(255,197,61,.28);
  border-radius:var(--r-s);padding:8px 13px;
}
.kapi svg{width:15px;height:15px;color:#FFC53D;flex:0 0 auto}

/* --- sağlayıcı metni: bizim editoryal metnimiz değil, açıkça ayrılır --- */
.saglayici-metin{
  border-left:2px solid var(--cizgi-2);
  padding:2px 0 2px 16px;
  color:var(--ink-2);
  max-width:68ch;
}
.saglayici-metin .kim{
  display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}

/* ==========================================================================
   SAYFALAMA — her sayfa kendine canonical, gerçek bağlantı (rapor 4.3)
   ========================================================================== */
.sayfalama{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:var(--s4);
}
.sayfa-no{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  border-radius:var(--r-s);
  background:var(--kart);border:1px solid var(--cizgi);
  color:var(--ink-2);text-decoration:none;font-weight:700;font-size:.9rem;
  transition:background var(--hiz) var(--ease),color var(--hiz) var(--ease),
             border-color var(--hiz) var(--ease);
}
a.sayfa-no:hover{background:var(--kart-2);color:var(--ink);border-color:var(--vurgu)}
.sayfa-no.simdi{background:var(--vurgu);border-color:var(--vurgu);color:var(--vurgu-koyu)}
.sayfa-no.ok{padding:0 16px;gap:6px}
.sayfa-ara{
  display:inline-flex;align-items:flex-end;justify-content:center;
  min-width:22px;height:40px;padding-bottom:8px;
  color:var(--ink-3);font-weight:800;letter-spacing:.05em;
}
.sayfa-bilgi{
  margin:0 0 0 auto;padding-left:12px;
  font-family:var(--mono);font-size:.72rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
@media (max-width:560px){ .sayfa-bilgi{margin:6px 0 0;width:100%;padding-left:0} }
@media (pointer:coarse){ .sayfa-no{min-height:44px} }

/* ==========================================================================
   RAF OKLARI — karusel gezinmesi
   Çubuk gizlendiği için gezinme buradan: oklar, sürükleme ve klavye.
   Oklar sessizce görünür durur, üstüne gelince "Rastgele oyna" düğmesiyle
   aynı sarı, kalın, gölgeli dile geçer.
   ========================================================================== */

.raf-sar{position:relative}
.raf-ok{
  position:absolute;top:50%;z-index:6;
  width:44px;height:44px;margin-top:-30px;
  display:none;place-items:center;
  border:0;border-radius:50%;
  background:var(--kart-2);
  color:var(--ink);cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.28),0 8px 22px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;
  transition:opacity var(--hiz) var(--ease),background var(--hiz) var(--ease),
             color var(--hiz) var(--ease),transform var(--hiz) var(--zipla);
}
.raf-ok svg{width:20px;height:20px}
.raf-ok.sol{left:-16px}
.raf-ok.sag{right:-16px}
.raf-ok.var{opacity:.92;pointer-events:auto}
.raf-ok:hover{
  background:var(--vurgu);color:var(--vurgu-koyu);
  transform:scale(1.1);
  box-shadow:0 3px 0 #C9A400,0 10px 26px rgba(250,211,24,.42);
}
.raf-ok:active{transform:scale(1.02) translateY(2px);box-shadow:0 1px 0 #C9A400}
.raf-ok:focus-visible{opacity:1;pointer-events:auto;outline:2px solid var(--vurgu);outline-offset:3px}

@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .raf-ok{display:grid}
}
@media (pointer:coarse){ .raf-ok{display:none} }

/* kenarlarda soluma: devamı olduğu belli olsun */
.raf-sar::before,.raf-sar::after{
  content:"";position:absolute;top:0;bottom:0;width:52px;z-index:5;
  pointer-events:none;opacity:0;transition:opacity var(--hiz) var(--ease);
}
.raf-sar::before{left:-10px;background:linear-gradient(90deg,var(--bg) 20%,transparent)}
.raf-sar::after{right:-10px;background:linear-gradient(270deg,var(--bg) 20%,transparent)}
.raf-sar.sol-var::before{opacity:1}
.raf-sar.sag-var::after{opacity:1}

/* ==========================================================================
   KARŞILAMA ŞERİDİ — ana sayfanın üstü, çocuk temasının yüzü
   ========================================================================== */

.karsilama{
  position:relative;
  border-radius:var(--r-l);
  overflow:hidden;
  margin-bottom:var(--s5);
  background:var(--kart);
  isolation:isolate;
}
.karsilama .gorsel{
  position:absolute;inset:0;z-index:0;
  background-image:image-set(url('/assets/susleme/karsilama.webp') 1x);
  background-image:url('/assets/susleme/karsilama.webp');
  background-size:cover;background-position:center 46%;
}
.karsilama .perde{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    rgba(27,11,69,.94) 0%,rgba(27,11,69,.86) 34%,
    rgba(27,11,69,.42) 62%,rgba(27,11,69,.18) 100%);
}
.karsilama .ic{
  position:relative;z-index:2;
  padding:clamp(var(--s4),4.5vw,var(--s6)) clamp(var(--s3),4vw,var(--s6));
  max-width:640px;
}
.karsilama h1{
  font-size:clamp(1.7rem,4.2vw,3rem);
  line-height:1.06;letter-spacing:-.015em;
  text-shadow:0 3px 0 rgba(0,0,0,.18);
}
.karsilama h1 em{font-style:normal;color:var(--vurgu)}
.karsilama p{
  margin:14px 0 0;font-size:clamp(.95rem,1.7vw,1.14rem);
  color:var(--ink-2);max-width:38ch;line-height:1.55;
}
.karsilama .dugmeler{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s3)}
.karsilama .dg-hayalet{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.karsilama .dg-hayalet:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}

@media (max-width:760px){
  .karsilama .gorsel{background-image:url('/assets/susleme/karsilama-dar.webp');background-position:center 30%}
  .karsilama .perde{background:linear-gradient(180deg,rgba(27,11,69,.28) 0%,rgba(27,11,69,.86) 46%,rgba(27,11,69,.97) 100%)}
  .karsilama .ic{padding-top:clamp(120px,34vw,190px);max-width:none}
  .karsilama p{max-width:none}
}

/* ==========================================================================
   ÇOCUK TEMASI DOKUNUŞLARI
   ========================================================================== */

/* karo: hafif yaylanan hover, çocuklara daha canlı gelir */
.karo{transition:transform var(--hiz-2) var(--zipla),
                box-shadow var(--hiz-2) var(--ease),
                background var(--hiz-2) var(--ease)}
.karo:hover,.karo:focus-visible{transform:translateY(-6px) scale(1.02)}

/* rozet: sarı, koyu yazı */
.karo .rozet{box-shadow:0 2px 0 rgba(0,0,0,.22)}

/* düğmeler: kalın ve yuvarlak, altında ince gölge şeridi */
.dg-ana{box-shadow:0 3px 0 #C9A400,0 8px 20px rgba(250,211,24,.28)}
.dg-ana:hover{box-shadow:0 4px 0 #C9A400,0 12px 26px rgba(250,211,24,.36)}
.dg-ana:active{transform:translateY(2px);box-shadow:0 1px 0 #C9A400}

/* bölüm başlıklarında küçük renkli nokta */
.blok-bas h2{position:relative;padding-left:0}

/* oynat düğmesi: sarı daire, koyu üçgen */
.karo .oyna span{box-shadow:0 4px 0 rgba(0,0,0,.22),0 8px 24px rgba(250,211,24,.5)}
.oy-play .ring{fill:var(--vurgu)}
.oy-play .tri{fill:var(--vurgu-koyu)}

/* ==========================================================================
   DÜĞME DİLİ — "Rastgele oyna" düğmesinin tarzı her yerde
   Kalın, yuvarlak, altında ince renkli gölge şeridi, basınca gölge iner.
   ========================================================================== */

.dg-ana,
.oy-act,
.gm-oyna,
.sayfa-no.simdi{
  background:var(--vurgu);
  color:var(--vurgu-koyu);
  border:0;
  font-weight:800;
  box-shadow:0 3px 0 #C9A400,0 8px 20px rgba(250,211,24,.28);
  transition:background var(--hiz) var(--ease),
             transform var(--hiz) var(--zipla),
             box-shadow var(--hiz) var(--ease);
}
.dg-ana:hover,.oy-act:hover,.gm-oyna:hover{
  background:var(--vurgu-2);color:var(--vurgu-koyu);
  transform:translateY(-2px);
  box-shadow:0 5px 0 #C9A400,0 14px 28px rgba(250,211,24,.38);
}
.dg-ana:active,.oy-act:active,.gm-oyna:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 #C9A400,0 4px 12px rgba(250,211,24,.3);
}

/* ikincil düğmeler: aynı kalınlık, mor gövde */
.dg-hayalet,
.blok-bas .hepsi,
.gm-arac button,
a.sayfa-no{
  box-shadow:0 3px 0 rgba(0,0,0,.24);
  transition:background var(--hiz) var(--ease),color var(--hiz) var(--ease),
             border-color var(--hiz) var(--ease),
             transform var(--hiz) var(--zipla),box-shadow var(--hiz) var(--ease);
}
.dg-hayalet:hover,.blok-bas .hepsi:hover,.gm-arac button:hover,a.sayfa-no:hover{
  transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,.24);
}
.dg-hayalet:active,.blok-bas .hepsi:active,.gm-arac button:active,a.sayfa-no:active{
  transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.24);
}

/* kart oynat düğmesi de aynı dil */
.karo .oyna span{box-shadow:0 4px 0 #C9A400,0 10px 26px rgba(250,211,24,.5)}

/* ==========================================================================
   MOZAİKTE DE KIRPILMA OLMASIN
   Izgaranın kendisi kırpmıyor ama kartlar hover'da büyüdüğü için
   komşularının üstüne binmeli, altına değil.
   ========================================================================== */
.mozaik{isolation:isolate}
.karo{z-index:1}
.karo:hover,.karo:focus-visible{z-index:3}
.raf .karo:hover,.raf .karo:focus-visible{z-index:3}

/* ==========================================================================
   ÇOCUK TEMASI — ÇIKARTMALAR VE MASKOT
   Görseller özgün üretim: dokuz çıkartma ve üç maskot pozu. Hepsi saydam
   WebP; hiçbiri başka bir markanın karakterine benzemiyor. Dekoratif
   oldukları için alt="" ile erişilebilirlik ağacından çıkarılıyorlar.
   ========================================================================== */

.karsilama .cs-katman{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.karsilama .cs{position:absolute;filter:drop-shadow(0 8px 18px rgba(0,0,0,.42))}
.karsilama .cs-a{top:12%;right:31%;width:66px;animation:sallan 6.5s var(--ease) infinite}
.karsilama .cs-b{bottom:14%;right:19%;width:58px;animation:sallan 8s var(--ease) infinite .7s}
.karsilama .cs-c{top:15%;right:7%;width:52px;animation:sallan 7.2s var(--ease) infinite 1.4s}
.karsilama .cs-d{bottom:30%;right:41%;width:60px;animation:sallan 9s var(--ease) infinite 2.1s}
@keyframes sallan{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-12px) rotate(5deg)}
}
@media (prefers-reduced-motion:reduce){ .karsilama .cs{animation:none} }

.karsilama .maskot{
  position:absolute;right:clamp(12px,3vw,44px);bottom:0;z-index:2;
  width:clamp(120px,15vw,188px);height:auto;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));
  pointer-events:none;
}
@media (max-width:900px){ .karsilama .maskot{display:none} }
@media (max-width:760px){ .karsilama .cs-a,.karsilama .cs-d{display:none} }

/* ==========================================================================
   BUGÜNÜN OYUNU
   ========================================================================== */
.gunun{
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(14px,2.4vw,28px);
  padding:clamp(16px,2.4vw,26px) clamp(16px,2.6vw,30px);
  margin-bottom:var(--s5);
  border-radius:var(--r-l);
  background:linear-gradient(115deg,var(--kart-2),var(--kart-3) 62%,#6B34E0);
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  overflow:hidden;
}
.gunun::before{
  content:"";position:absolute;top:-40%;right:18%;width:340px;height:340px;
  background:radial-gradient(circle,rgba(250,211,24,.22),transparent 68%);
  pointer-events:none;
}
.gunun-maskot{
  width:clamp(88px,9vw,130px);height:auto;position:relative;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.42));
}
.gunun-ic{position:relative;min-width:0}
.gunun-ust{
  display:flex;align-items:center;gap:8px;margin:0 0 6px;
  font-family:var(--mono);font-size:.64rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--vurgu);
}
.gunun-ust .nokta{
  width:8px;height:8px;border-radius:50%;background:var(--vurgu);
  box-shadow:0 0 0 4px rgba(250,211,24,.22);
  animation:nabiz 2.4s var(--ease) infinite;
}
@keyframes nabiz{50%{box-shadow:0 0 0 8px rgba(250,211,24,0)}}
@media (prefers-reduced-motion:reduce){ .gunun-ust .nokta{animation:none} }
.gunun h2{
  font-size:clamp(1.3rem,2.7vw,2.1rem);line-height:1.1;letter-spacing:-.018em;
  overflow:hidden;text-overflow:ellipsis;
}
.gunun-ozet{
  margin:8px 0 0;color:var(--ink-2);max-width:52ch;line-height:1.5;
  font-size:.95rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gunun .dugmeler{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.gunun-kapak{
  position:relative;flex:0 0 auto;
  width:clamp(96px,12vw,152px);border-radius:var(--r);
  overflow:hidden;display:block;
  box-shadow:0 14px 30px rgba(0,0,0,.46);
  transition:transform var(--hiz-2) var(--zipla);
}
.gunun-kapak img{width:100%;height:auto;display:block}
.gunun-kapak:hover{transform:translateY(-5px) rotate(-2deg)}
.gunun-kapak:focus-visible{outline:3px solid var(--vurgu);outline-offset:3px}
@media (max-width:820px){
  .gunun{grid-template-columns:minmax(0,1fr) auto}
  .gunun-maskot{display:none}
}
@media (max-width:520px){
  .gunun{grid-template-columns:minmax(0,1fr)}
  .gunun-kapak{width:118px}
}

/* ==========================================================================
   OYUN KUTULARI (koleksiyonlar)
   ========================================================================== */
.kutu-izgara{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}
.kutu-izgara.buyuk{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.kutu-kart{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;padding:16px 15px 15px;
  border-radius:var(--r);
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--kr) 26%,var(--kart)) 0%,
    var(--kart) 74%);
  text-decoration:none;color:var(--ink);
  overflow:hidden;isolation:isolate;
  box-shadow:0 3px 0 rgba(0,0,0,.22);
  transition:transform var(--hiz-2) var(--zipla),box-shadow var(--hiz-2) var(--ease);
}
.kutu-kart::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1.5px solid transparent;transition:border-color var(--hiz) var(--ease);
}
.kutu-kart:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(0,0,0,.46)}
.kutu-kart:hover::after{border-color:var(--kr)}
.kutu-kart:focus-visible{outline:3px solid var(--vurgu);outline-offset:2px}
/* İkonların en-boy oranı değişiyor (telefon dik, top yuvarlak). Genişliği
   değil yüksekliği sabitliyoruz ki kartların dikey ritmi bozulmasın. */
.kutu-cs{
  height:56px;width:auto;max-width:100%;margin-bottom:8px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));
  transition:transform var(--hiz-2) var(--zipla);
}
.kutu-izgara.buyuk .kutu-cs{height:70px}
.kutu-kart:hover .kutu-cs{transform:scale(1.12) rotate(-6deg)}
.kutu-ad{font-weight:800;font-size:.98rem;letter-spacing:-.015em;line-height:1.2}
.kutu-sayi{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  color:var(--ink-3);margin-top:3px;
}

.kutu-bas{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,24px);
  padding:clamp(16px,2.4vw,26px) clamp(16px,2.6vw,28px);
  margin-bottom:var(--s3);
  border-radius:var(--r-l);
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--kr) 30%,var(--kart)) 0%,
    var(--kart) 78%);
  box-shadow:0 3px 0 rgba(0,0,0,.22);
}
.kutu-bas img{
  height:clamp(64px,8vw,104px);width:auto;flex:0 0 auto;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));
}
.kutu-bas h1{font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.08;letter-spacing:-.02em}
.kutu-ust{
  margin:0 0 4px;font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--kr,var(--vurgu));
}
.kutu-ozet{margin:8px 0 0;color:var(--ink-2);max-width:62ch;line-height:1.5;font-size:.95rem}

.blok-cs{
  width:34px;height:auto;flex:0 0 auto;margin-right:2px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
}

/* ==========================================================================
   BOŞ DURUM VE SAYFA BAŞLIĞI
   ========================================================================== */
.bos-durum{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:clamp(28px,5vw,56px) var(--s3);
  border-radius:var(--r-l);
  background:var(--kart);
  border:1.5px dashed var(--cizgi);
}
.bos-durum.genis{background:transparent;border:0;padding-top:clamp(16px,3vw,32px)}
.bos-durum img{width:clamp(120px,16vw,190px);height:auto;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}
.bos-durum h1,.bos-durum h2{margin-top:10px;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.018em}
.bos-durum p{margin:8px 0 0;color:var(--ink-2);max-width:52ch;line-height:1.55}
.bos-durum .dugmeler{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.bos-durum .kutu-ust{margin-top:12px}

.sayfa-bas{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3);
}
.sayfa-bas .kucuk{margin-top:8px;max-width:60ch}
.sayfa-bas-sag{display:flex;align-items:center;gap:10px}
.etiket-sayi{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-3);
}

/* ==========================================================================
   ARŞİVDE ARAMA
   ========================================================================== */
.arsiv-ara{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:var(--s3);
}
.arsiv-ara label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}
.arsiv-ara-in{position:relative;flex:1 1 260px;display:flex;align-items:center}
.arsiv-ara-in svg{
  position:absolute;left:14px;width:18px;height:18px;color:var(--ink-3);pointer-events:none;
}
.arsiv-ara input{
  width:100%;height:46px;padding:0 14px 0 42px;
  border-radius:999px;border:1.5px solid var(--cizgi);
  background:var(--kart);color:var(--ink);
  font-family:var(--govde);font-size:.92rem;font-weight:600;
  transition:border-color var(--hiz) var(--ease),background var(--hiz) var(--ease);
}
.arsiv-ara input::placeholder{color:var(--ink-3);font-weight:500}
.arsiv-ara input:focus{outline:none;border-color:var(--vurgu);background:var(--kart-2)}
.arsiv-ara .dg-ana{height:46px}
.arsiv-sayi{margin:0 0 var(--s2);color:var(--ink-2);font-weight:700;font-size:.9rem}

/* ==========================================================================
   SOL RAYDA KUTU SATIRLARI
   ========================================================================== */
.ray-bag.kutu .ik{background:color-mix(in srgb,var(--kr) 16%,transparent);padding:3px}
.ray-bag.kutu .ik img{width:100%;height:100%;object-fit:contain}
.ray-bag.kutu[aria-current] .ik{background:color-mix(in srgb,var(--kr) 34%,transparent)}
.ray-bas.ust{margin-top:16px;padding-top:14px;border-top:1px solid var(--cizgi)}
/* dar kalıpta başlık metni gizli ama iki bölümü ayıran çizgi kalsın */
.ray-dar .ray-kaydir > .ray-bas.ust{
  position:static;width:auto;height:1px;padding:0;
  clip:auto;clip-path:none;text-indent:-999px;
  margin:12px 8px;background:var(--cizgi);overflow:hidden;
}

/* katalog inerken düğme beklediğini belli etsin */
.dg.bekliyor{opacity:.72;pointer-events:none}
.dg.bekliyor::after{content:"";width:14px;height:14px;margin-left:8px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:donuyor .7s linear infinite}
@keyframes donuyor{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dg.bekliyor::after{animation:none}}

/* mobil şeritteki kutu etiketleri: küçük çıkartma + ad */
.serit .etiket.kutu{display:inline-flex;align-items:center;gap:6px;padding-left:7px;border-color:color-mix(in srgb,var(--kr) 42%,transparent)}
.serit .etiket.kutu img{width:20px;height:20px;object-fit:contain}

/* ==========================================================================
   MOBİL DÜZELTMELER
   Telefonda bölüm araları masaüstü ritmiyle aynıydı; ekran küçüldükçe
   boşluk oransal olarak büyüyüp sayfayı seyreltiyordu.
   ========================================================================== */
@media (max-width:760px){
  .blok{margin-bottom:var(--s4)}
  .karsilama{margin-bottom:var(--s3)}
  .gunun{margin-bottom:var(--s4)}
  /* roket düğmenin üstüne biniyordu */
  .karsilama .cs-b{display:none}
  .karsilama .cs-c{top:8%;right:6%;width:46px}
}

/* dar ekranda bugünün oyunu: önce kapak, sonra metin */
@media (max-width:520px){
  .gunun-kapak{order:-1;width:100%;max-width:190px}
  .gunun-ic{order:0}
  .gunun-ozet{-webkit-line-clamp:3}
}

/* dokunmatikte kalp biraz daha sakin dursun: kapağı örtmesin */
@media (pointer:coarse){
  .kalp{background:rgba(21,7,51,.5);opacity:.9}
}

/* ==========================================================================
   HESABIM
   Sitenin normal kabuğunda duruyor; kendi kutuları var ama dili ana
   sayfayla aynı. Arkadaş seçici çocuk için kart boyunda: yönetim
   panelindeki küçük ikon şeridi elle seçmesi zordu.
   ========================================================================== */
.hs-bas{
  display:flex;align-items:center;gap:var(--s2);
  margin-bottom:var(--s3);
}
.hs-buyuk{
  height:96px;width:auto;flex:0 0 auto;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.45));
}
.hs-bas h1{font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.05;letter-spacing:-.025em;margin:2px 0 0}
.hs-bas .kucuk{margin-top:5px}

.hs-tamam{
  display:flex;align-items:center;gap:9px;
  margin:0 0 var(--s2);padding:12px 15px;border-radius:var(--r);
  background:color-mix(in srgb,var(--nane) 18%,transparent);
  border:1.5px solid color-mix(in srgb,var(--nane) 46%,transparent);
  color:var(--ink);font-weight:700;font-size:.92rem;
}

.hs-kutu{
  background:var(--kart);border:1px solid var(--cizgi);
  border-radius:var(--r-l);padding:clamp(16px,3vw,24px);
  margin-bottom:var(--s3);
}
.hs-kutu h2{font-size:1.14rem;letter-spacing:-.015em;margin:0}
.hs-kutu .kucuk{margin:6px 0 0}

/* --- arkadaş seçici --- */
.hs-ar-sira{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;margin:var(--s2) 0;
}
.hs-ar{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 6px 10px;border-radius:18px;cursor:pointer;
  background:var(--bg-2);
  border:2px solid var(--cizgi);
  transition:border-color var(--hiz) var(--ease),background var(--hiz) var(--ease),
             transform var(--hiz) var(--ease);
}
.hs-ar:hover{border-color:var(--ar);transform:translateY(-2px)}
.hs-ar img{height:54px;width:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.hs-ar b{font-size:.82rem;font-weight:700}
/* Radyo düğmesi görünmüyor ama klavyeyle seçilebiliyor; odak halkası
   etiketin kendisinde gösteriliyor. */
.hs-ar input{position:absolute;opacity:0;width:1px;height:1px}
.hs-ar:has(input:checked){
  border-color:var(--ar);
  background:color-mix(in srgb,var(--ar) 17%,var(--bg-2));
}
.hs-ar:has(input:focus-visible){outline:3px solid var(--vurgu);outline-offset:2px}

.hs-liste{margin:var(--s2) 0 0;display:grid;gap:1px;background:var(--cizgi);border-radius:var(--r);overflow:hidden}
.hs-liste>div{display:flex;justify-content:space-between;gap:var(--s2);padding:11px 14px;background:var(--kart)}
.hs-liste dt{color:var(--ink-2);font-size:.88rem}
.hs-liste dd{margin:0;font-weight:700;font-size:.88rem;text-align:right;word-break:break-word}

.hs-dg{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s3)}
@media (max-width:520px){
  .hs-bas{gap:12px}
  .hs-buyuk{height:74px}
  .hs-dg .dg{flex:1 1 100%}
}