:root { --bg:#0e0f16; --text:#eef2ff; --muted:#a8b0c8; --card:#151824; --chip:#1d2132; --accent:#7cffc4; --accent2:#7bdcff; }
body.sunset{ --bg:#0f0a1f; --text:#ffeade; --muted:#eec4b3; --card:#1a1230; --chip:#23183f; --accent:#ff7a59; --accent2:#ffb703; }
body.mint{ --bg:#061616; --text:#eafffb; --muted:#b7e0d8; --card:#0c2222; --chip:#103030; --accent:#3ddc97; --accent2:#7bdcff; }
body.noir{ --bg:#0d0d0d; --text:#f3f3f3; --muted:#bdbdbd; --card:#151515; --chip:#1e1e1e; --accent:#9b9bff; --accent2:#6ee7ff; }
body.retro{ --bg:#0d0d0d; --text:#fffbf5; --muted:#ff9ed6; --card:#1a1a1a; --chip:#222; --accent:#ff4f92; --accent2:#00ff9c; }
body.cyber{ --bg:#070b17; --text:#e0f0ff; --muted:#a4b6c7; --card:#101520; --chip:#182030; --accent:#9b7bff; --accent2:#00f6ff; }
body.lava{ --bg:#1a0a0a; --text:#fff4e6; --muted:#ffb899; --card:#2a0f0f; --chip:#3a1515; --accent:#ff5c00; --accent2:#ffb703; }
body.forest{ --bg:#06120a; --text:#eafbee; --muted:#a6d3b3; --card:#0c2212; --chip:#12331c; --accent:#3ddc97; --accent2:#7cffc4; }
body.ocean{ --bg:#02141f; --text:#e6f8ff; --muted:#a4cbe3; --card:#062030; --chip:#0b3248; --accent:#00b4d8; --accent2:#90e0ef; }
body.golden{ --bg:#0a0a0a; --text:#fffbea; --muted:#d1c089; --card:#1a1a1a; --chip:#2a2a2a; --accent:#ffcc00; --accent2:#ffdd55; }

/* Reset & base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, "Heebo", "Rubik", "Noto Sans Hebrew", sans-serif;
}
/* RTL akış */
html[dir="rtl"] body{ direction: rtl; text-align: right; }
a{color:var(--accent);text-decoration:none}
a:focus,button:focus,input:focus{outline:2px solid color-mix(in oklab, var(--accent) 70%, transparent)}

/* Footer */
.footer .container { text-align: center; }
.footer .container a { margin-inline:10px; font-size:15px; text-decoration:none; }
.footer .container a:hover { text-decoration: underline; }

/* Layout */
.container{max-width:1080px;margin-inline:auto;padding:16px}

/* Header */
.header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));
  border-bottom:1px solid rgba(255,255,255,.06); backdrop-filter:blur(6px)
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 24px rgba(255,255,255,.15)}
.brand h1{font-size:18px;margin:0}

/* Nav – RTL için sağdan başlat */
.nav{display:flex;gap:8px;flex-wrap:wrap;margin-block-start:10px;flex-direction:row-reverse}
.nav a{padding:8px 10px;border:1px solid rgba(255,255,255,.1);background:var(--chip);border-radius:999px;color:var(--text)}
.nav a.active{outline:2px solid var(--accent)}

/* Search – RTL hizalama */
.search{display:flex;gap:8px;margin-block-start:12px;flex-direction:row-reverse}
.search input{
  flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:var(--chip);color:var(--text);text-align:right;direction:rtl
}
.search button{
  padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:var(--card);color:var(--text);cursor:pointer
}

/* RTL/LTR yardımcıları */
.ltr{ direction:ltr !important; unicode-bidi:plaintext !important; text-align:left !important; }
.rtl{ direction:rtl !important; unicode-bidi:embed !important; text-align:right !important; }

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:16px 0 24px}

/* Card */
.card{background:var(--card);border-radius:14px;border:1px solid rgba(255,255,255,.08);overflow:hidden}
.thumb{aspect-ratio:16/9;width:100%;display:block;object-fit:cover;background:#000}
.card .body{padding:10px}
.card h3{margin:0 0 6px;font-size:16px}
.badge{font-size:12px;color:var(--muted)}

/* Misc */
.cat-desc{margin:8px 0 16px;color:var(--muted)}
.game-frame{
  position:relative;width:100%;padding-top:56.25%;
  background:#000;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  margin:10px 0 16px
}
.game-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.footer{color:var(--muted);font-size:13px;padding-block:24px;border-top:1px solid rgba(255,255,255,.06);margin-block-start:24px}
.intro{background:var(--card);border:1px solid rgba(255,255,255,.08);padding:16px;border-radius:12px}
.pagination{display:flex;gap:8px;justify-content:center;margin-block:12px}
.pagination a{padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:var(--text);background:var(--chip)}

/* Mobil: 2 sütun */
@media (max-width: 768px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* Fullscreen controls (overlay) – mantıksal konum */
.fs-controls {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px; /* RTL/LTR'de doğru kenar */
  display: flex;
  gap: 8px;
  z-index: 5;
}
.fs-btn{
  appearance:none;border:0;border-radius:10px;padding:8px 10px;font-size:13px;font-weight:600;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px)
}
.fs-btn:hover{filter:brightness(1.08)}

/* Pseudo fullscreen fallback */
.pseudo-fullscreen{
  position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important;
  padding:0 !important; border-radius:0 !important; z-index:9998 !important;
}
body.no-scroll{overflow:hidden}

/* True fullscreen kontrol görünürlüğü */
:fullscreen .fs-controls,
:-webkit-full-screen .fs-controls{ z-index:2147483647 }