/* ===========================================================================
   Ema Play — tasarım sistemi (28 Eylül 2026, tuval: claude.ai/artifact/7KuybbftXcueha24xrENWF)
   Tek dosya: belirteçler, bileşenler, site kabuğu, uyumluluk katmanı, duyarlılık.
   Kaynak: tuvaldeki project/ds/emaplay/emaplay.css; burada gerçek siteye uyarlandı.
   =========================================================================== */

/* --- Yazı tipi: Inter (değişken ağırlık 100–900), latin + latin-ext ------------ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/v/font/inter-var-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/v/font/inter-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Belirteçler ------------------------------------------------------------ */
[hidden] { display: none !important; }
:root {
  --bg: #0b1117; --bg2: #0f1720; --sur: #141d28; --sur2: #1b2735;
  --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.13);
  --tx: #e8eef4; --tx2: #a7b4c1; --tx3: #6d7f90;
  --acc: #4cc2ff; --teal: #3de0d5; --ok: #4ade80; --warn: #fbbf24; --bad: #f87171;
  --r: 14px; --rs: 10px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --wrap: 1200px; --gutter: 16px;

  /* Eski şablonların kullandığı adlar (uyumluluk) — yeni palete bağlı. */
  --bg-sunken: #070c11; --bg-base: var(--bg); --bg-body: var(--bg); --bg-elevated: var(--sur);
  --bg-raised: var(--sur2); --bg-input: rgba(255,255,255,.05); --bg-bar: rgba(15,23,32,.94);
  --glass-bg: rgba(20,29,40,.7);
  --stroke: var(--line); --stroke-strong: var(--line2);
  --text-primary: var(--tx); --text-bright: #ffffff; --text-secondary: var(--tx2);
  --text-tertiary: var(--tx2); --text-muted: var(--tx2); --text-dim: var(--tx3);
  --text-faint: var(--tx3); --text-ghost: #55667a;
  --accent: var(--acc); --accent-hover: #7ed3ff; --accent-press: #2ea8e6;
  --accent-glow: rgba(76,194,255,.4); --accent-dim: rgba(76,194,255,.12); --accent-line: rgba(76,194,255,.35);
  --success: var(--ok); --warning: var(--warn); --danger: var(--bad);
  --font-display: var(--font); --font-body: var(--font);
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px;
  --ic: 16px; --genislik: 1200px; --ease: cubic-bezier(.22,.61,.36,1); --hizli: 120ms; --normal: 220ms;
}

/* --- Sıfırlama --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }   /* koyu tema: tarayıcının kaydırma çubukları ve denetimleri de koyu (telefonda tablo altında beyaz şerit vardı) */
body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* Tuvaldeki .root gibi: kısa sayfada altbilgi pencerenin dibinde, uzun sayfada içerikten sonra. */
  min-height: 100vh; display: flex; flex-direction: column; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acc); text-decoration: none; transition: color var(--hizli) var(--ease); }
a:hover { color: #fff; }
h1, h2, h3, h4, p, dl, ul, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }
.atla { position: absolute; left: -9999px; top: 8px; background: var(--acc); color: #03131d; padding: 8px 12px; border-radius: 8px; z-index: 1000; }
.atla:focus { left: 8px; }
main { display: block; }

/* --- Yerleşim ------------------------------------------------------------------ */
/* Tuvalde içerik sütunu tam 1200 px (.wrap{width:1200px}); kenar boşluğu yalnız dar ekranda devreye girer. */
.wrap, .kap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
/* Tuvaldeki gibi içerik sütunu süs katmanlarının (.bgfx, bulanık arka planlar; z-index 0) üstünde.
   Mağaza şeridinin açılır menüleri sonraki içerik sütununun üstünde kalsın diye şerit bir kat yukarıda. */
.wrap.serit-kap { z-index: 5; }
.wrap .wrap, .kap .kap { padding: 0; }
.cols { display: flex; gap: 24px; align-items: flex-start; }
.main { flex: 1 1 auto; min-width: 0; }
.side { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.side-s { width: 300px; } .side-xs { width: 240px; }
.grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.flex { display: flex; align-items: center; }
.stack { display: flex; flex-direction: column; }
.grow, .esne { flex: 1 1 auto; min-width: 0; }
.ml { margin-left: auto; }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; } .g16 { gap: 16px; } .g24 { gap: 24px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.center, .orta { text-align: center; } .sag { text-align: right; }
.divider, .cizgi { height: 1px; background: var(--line); }
.sayfa { padding-bottom: 56px; }

/* --- Tipografi ------------------------------------------------------------------- */
.t1 { font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: #fff; }
.t2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.t3 { font-size: 16px; font-weight: 600; color: #fff; }
.muted, .metin { color: var(--tx2); } .faint, .soluk, .not { color: var(--tx3); }
.sm, .metin--kucuk { font-size: 12px; } .md { font-size: 13px; } .white { color: #fff; } .bold { font-weight: 600; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dsp { font-weight: 700; letter-spacing: -.01em; }
.tt, .etiket { font-size: 11px; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: .08em; }
.sec, .bolum-basi, .bolumbas { display: flex; align-items: baseline; gap: 12px; row-gap: 4px; flex-wrap: wrap; margin: 40px 0 16px; }
.sec h2, .bolum-basi h2, .bolumbas h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; flex-shrink: 0; }   /* sığmazsa açıklama alt satıra geçer, başlık iki satıra bölünmez */
.sec .more { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--tx2); }
.bolum, .osbolum { margin-top: 40px; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); } .teal { color: var(--teal); }
.num { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1.1; }
.bag { color: var(--acc); font-weight: 500; }
.kirinti { font-size: 13px; color: var(--tx3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kirinti a { color: var(--tx3); }

/* --- Düğmeler --------------------------------------------------------------------- */
.btn, .dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px;
  border-radius: var(--rs); font-weight: 600; font-size: 14px; border: 1px solid var(--line2); white-space: nowrap; color: var(--tx);
  cursor: pointer; font-family: inherit; line-height: 1; background: rgba(255,255,255,.06); text-decoration: none;
  transition: background var(--hizli) var(--ease), border-color var(--hizli) var(--ease), color var(--hizli) var(--ease), transform var(--hizli) var(--ease); }
.btn:hover, .dugme:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn:active, .dugme:active { transform: translateY(1px); }
.btn-pri, .dugme--ana { background: var(--ok); color: #06210f; border-color: transparent; }
.btn-pri:hover, .dugme--ana:hover { background: #6ee7a0; color: #06210f; }
.btn-acc { background: var(--acc); color: #03131d; border-color: transparent; }
.btn-acc:hover { background: #7ed3ff; color: #03131d; }
.btn-teal { background: var(--teal); color: #042523; border-color: transparent; }
.btn-teal:hover { background: #6fe9e0; color: #042523; }
.btn-ghost { background: rgba(255,255,255,.06); border-color: var(--line2); color: var(--tx); }
.btn-line, .dugme--cizgi { background: transparent; border-color: var(--line2); color: var(--tx2); }
.btn-bad, .dugme--tehlike { background: transparent; border-color: rgba(248,113,113,.5); color: var(--bad); }
.btn-bad:hover, .dugme--tehlike:hover { background: rgba(248,113,113,.12); color: var(--bad); }
.btn-sm, .dugme--kucuk { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-lg, .dugme--buyuk { height: 50px; padding: 0 26px; font-size: 15px; border-radius: 12px; }
.btn-full, .dugme--tam { width: 100%; }
.btn.dis, .dugme--pasif, .btn[disabled], .dugme[disabled] { opacity: .4; pointer-events: none; }
.dugme--sol { align-self: flex-start; } .dugme--ust { margin-top: auto; }
.baglantidugme { background: none; border: 0; padding: 0; color: var(--acc); font-weight: 500; cursor: pointer; }
.baglantidugme:hover { color: #fff; text-decoration: underline; }

/* --- Kartlar, çipler, fiyat ---------------------------------------------------- */
.card { background: var(--sur); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.card2 { background: var(--sur2); }
.pad { padding: 18px; } .pad-s { padding: 14px; } .pad-l { padding: 24px; }
.kart { background: var(--sur); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.kart--vurgu { border-color: rgba(76,194,255,.35); }
.kart--vurgu-hafif { border-color: rgba(61,224,213,.3); background: linear-gradient(180deg, rgba(61,224,213,.04), var(--sur)); }
.kart--sutun { display: flex; flex-direction: column; gap: 12px; }
.kart--ic { padding: 16px; } .kart--ic-b { padding: 20px; } .kart--ic-c { padding: 24px; }
.chip, .cip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(76,194,255,.12);
  color: #8fd5ff; font-size: 12px; font-weight: 500; white-space: nowrap; border: 0; line-height: 1; }
.chip-teal, .cip--vurgu { background: rgba(61,224,213,.14); color: var(--teal); }
.chip-ok, .cip--iyi { background: rgba(74,222,128,.14); color: var(--ok); }
.chip-warn, .cip--uyari { background: rgba(251,191,36,.14); color: var(--warn); }
.chip-bad, .cip--hata { background: rgba(248,113,113,.14); color: var(--bad); }
.chip-gray { background: rgba(255,255,255,.07); color: var(--tx2); }
.chip-xs { height: 20px; padding: 0 8px; font-size: 11px; }
.cip--dugme { cursor: pointer; } .cip--sol { align-self: flex-start; }
.tagz, .cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.price { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--line); font-weight: 600; color: #fff; white-space: nowrap; }
.pbox { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.pbox .price { background: none; border: 0; height: 34px; }
.disc { display: inline-flex; align-items: center; gap: 8px; }
.disc b, .indirim { background: rgba(74,222,128,.15); color: var(--ok); padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: 13px; display: inline-block; }
.disc s, .fiyat__eski { color: var(--tx3); font-size: 12px; text-decoration: line-through; }
.fiyat { display: inline-flex; align-items: center; gap: 8px; } .fiyat__son { color: #fff; font-weight: 600; } .fiyat__bedava { color: var(--ok); font-weight: 600; }

/* --- Formlar ------------------------------------------------------------------------ */
.input, input.alan, .metinalan, select.alan { height: 42px; background: rgba(255,255,255,.05); border: 1px solid var(--line2); border-radius: 10px; color: var(--tx);
  padding: 0 14px; font: inherit; font-size: 14px; width: 100%; outline: 0; transition: border-color var(--hizli) var(--ease); }
.input:focus, .alan:focus-within, .metinalan:focus { border-color: var(--acc); }
.input::placeholder, .alan input::placeholder, .metinalan::placeholder { color: var(--tx3); }
textarea.input, .metinalan { height: auto; padding: 12px 14px; resize: none; }
/* Tuvaldeki gibi satır içi yükseklik (style="height: 72px") geçerli; yüksekliği verilmemiş alan en az 90 px. */
textarea.input:not([style*="height"]), .metinalan { min-height: 90px; }
select.input, select.alan { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a7b4c1' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
select.input option, select.alan option { background: var(--sur2); color: var(--tx); }
.input-sm { height: 36px; font-size: 13px; border-radius: 8px; }
label.alan, div.alan { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line2); border-radius: 10px; }
label.alan input, div.alan input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: inherit; height: 100%; padding: 0; }
.alan--tam { width: 100%; }
.field, .f { display: flex; flex-direction: column; gap: 6px; }
.field label, .f label { font-size: 12px; font-weight: 500; color: var(--tx2); }
.form2, .ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.span2, .tam { grid-column: 1 / -1; }
.chk, .onaykutu, .osonay { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--tx2); line-height: 1.5; cursor: pointer; }
.chk input, .onaykutu input, .osonay input { accent-color: var(--acc); margin: 3px 0 0; width: 15px; height: 15px; flex-shrink: 0; }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px; font-size: 14px; cursor: pointer; }
.opt input { accent-color: var(--acc); margin: 0; }
.opt.on { border-color: var(--acc); background: rgba(76,194,255,.06); }
.opt .r { margin-left: auto; font-size: 12px; color: var(--tx2); }
.alanNot, .fnot { font-size: 12px; color: var(--tx3); }
.toggle { width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.12); position: relative; flex-shrink: 0; margin-left: auto; border: 0; padding: 0; }
.toggle i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left var(--hizli) var(--ease); }
.toggle.on { background: var(--teal); } .toggle.on i { left: 21px; background: #062a28; }

/* --- Bildirim, boş durum, not ------------------------------------------------------- */
.note, .bildirim { background: rgba(61,224,213,.06); border: 1px solid rgba(61,224,213,.25); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
.note b { color: var(--teal); font-weight: 600; }
.note-blue, .bildirim--bilgi { background: rgba(76,194,255,.06); border-color: rgba(76,194,255,.25); }
.note-blue b { color: var(--acc); }
.bildirim--iyi { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.3); color: #d6f7e1; }
.bildirim--uyari { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.35); color: #fdf1cf; }
.bildirim--hata { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.35); color: #ffd9d9; }
.bos { text-align: center; padding: 40px 20px; background: var(--sur); border: 1px solid var(--line); border-radius: var(--r); }
.bos__baslik { font-size: 16px; font-weight: 600; color: #fff; }
.bos__alt { color: var(--tx2); font-size: 13px; margin-top: 6px; }

/* --- Sekmeler, listeler, tablolar ---------------------------------------------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 12px 14px; font-weight: 500; color: var(--tx2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.tab.on, .tab[aria-current] { color: #fff; border-color: var(--acc); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; color: var(--tx2); font-weight: 500; white-space: nowrap; font-size: 14px; border: 0; background: transparent; }
.pill:hover { color: #fff; background: rgba(255,255,255,.05); }
.pill.on, .pill[aria-current] { background: rgba(255,255,255,.09); color: #fff; }
.pill-s { height: 30px; padding: 0 12px; font-size: 13px; }
.list > * + * { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.row .r { margin-left: auto; text-align: right; white-space: nowrap; }
.li { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 14px; }
.li .d { font-size: 12px; color: var(--tx3); margin-top: 2px; }
.tg { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 14px; }
.tg .d { font-size: 12px; color: var(--tx3); margin-top: 2px; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; font-size: 13px; }
.kv dt { color: var(--tx2); } .kv dd { margin: 0; color: #fff; }
.bilgisatir { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; color: var(--tx2); border-top: 1px solid var(--line); }
.ozetsat, .ozetsatir { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.ozetsat--toplam, .ozetsatir--toplam { font-size: 18px; font-weight: 700; color: #fff; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-weight: 500; color: var(--tx3); font-size: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table .r { text-align: right; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.mx { width: 100%; border-collapse: collapse; font-size: 12px; }
.mx th { font-weight: 500; color: var(--tx3); padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.mx th:first-child { text-align: left; }
.mx td:first-child { text-align: left; color: var(--tx); }
.mx td { padding: 7px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.mx input { accent-color: var(--acc); width: 15px; height: 15px; margin: 0; }
.tl div { display: flex; gap: 12px; font-size: 13px; padding: 6px 0; }
.tl i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); margin-top: 5px; flex-shrink: 0; }
.tl i.w { background: var(--warn); } .tl i.g { background: var(--tx3); } .tl i.b { background: var(--bad); }
.hbar { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 5px 0; }
.hbar .lb { width: 150px; color: var(--tx2); flex-shrink: 0; } .hbar i { height: 10px; border-radius: 5px; background: var(--acc); display: block; } .hbar .v { width: 70px; text-align: right; color: #fff; }
.pages { display: flex; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.pages a, .pages span { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); color: var(--tx2); font-size: 13px; }
.pages span.on, .pages a[aria-current] { background: var(--acc); color: #03131d; font-weight: 600; }

/* --- Görsel parçalar --------------------------------------------------------------- */
.ph, .levha { background: linear-gradient(135deg, #1b2735, #0f1720); display: flex; align-items: center; justify-content: center; color: var(--tx3); font-size: 12px; text-align: center; overflow: hidden; position: relative; }
.levha img, .thumb img { width: 100%; height: 100%; object-fit: cover; }
.levha__ad { font-size: 28px; font-weight: 700; color: var(--tx2); } .levha__not, .levha__yer { font-size: 11px; color: var(--tx3); padding: 6px; }
.av { background: linear-gradient(135deg, #2b4a63, #111a24); border: 1px solid var(--line2); border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av-sq { border-radius: 10px; }
.thumb { border-radius: 10px; overflow: hidden; background: var(--sur2); flex-shrink: 0; }
.hero { position: relative; border-radius: 18px; overflow: hidden; background: var(--sur); }
.hero > img, .hero > picture img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero .ov { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,17,23,.94) 0%, rgba(11,17,23,.6) 45%, rgba(11,17,23,.05) 100%); }
.hero .ov-b { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,17,23,0) 30%, rgba(11,17,23,.92) 100%); }
.hero .in { position: relative; z-index: 1; }
.bgfx { position: absolute; left: 0; right: 0; top: 0; height: 900px; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 500px at 20% 0%, rgba(76,194,255,.14), transparent 60%), radial-gradient(700px 400px at 90% 10%, rgba(61,224,213,.10), transparent 60%); }
.bar, .cubuk { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; display: block; }
.bar i, .cubuk span { display: block; height: 100%; background: var(--acc); border-radius: 3px; }
.dots { display: flex; gap: 6px; } .dots i, .dots button { width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); border: 0; padding: 0; }
.dots i.on, .dots button.on { background: #fff; }
.ico { width: 18px; height: 18px; flex-shrink: 0; } .ico-s { width: 14px; height: 14px; }
.tile { height: 110px; border-radius: 14px; display: flex; align-items: flex-end; padding: 14px; font-weight: 600; color: #fff; position: relative; overflow: hidden; }
.tile:hover { color: #fff; filter: brightness(1.12); }
.rar { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.step { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.04); color: var(--tx2); font-weight: 500; font-size: 13px; flex: 1; }
.step b { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.step.on { background: rgba(76,194,255,.1); color: #fff; } .step.on b { background: var(--acc); color: #03131d; }
.step.ok b { background: var(--ok); color: #06210f; }
.cell { aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-bottom-width: 3px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--tx3); text-align: center; padding: 6px; position: relative; }
.cell.c { border-bottom-color: #b0c3d9; } .cell.r { border-bottom-color: #4b69ff; } .cell.e { border-bottom-color: #d32ce6; } .cell.l { border-bottom-color: #eb4b4b; }
.cell.on { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(76,194,255,.25); }
.cell .q { position: absolute; right: 6px; bottom: 4px; font-size: 11px; color: #fff; font-weight: 600; }
.cell .lk { position: absolute; left: 6px; top: 4px; font-size: 10px; color: var(--teal); }
.romen { font-family: var(--font-mono); font-weight: 700; color: var(--acc); }
.tutar { display: flex; align-items: baseline; gap: 4px; font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.tutar__b { font-size: 16px; color: var(--tx2); } .tutar__eski { font-size: 14px; color: var(--tx3); text-decoration: line-through; margin-right: 6px; }
.kapsam { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tx2); }
.kapsam li::before { content: "✓ "; color: var(--ok); }
.cap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- Site kabuğu: üst çubuk --------------------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(15,23,32,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hdr__in { height: 72px; display: flex; align-items: center; gap: 20px; }
.wordmark { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.wordmark:hover { color: #fff; }
.nav { display: flex; gap: 2px; }
.hs { display: flex; align-items: center; gap: 8px; height: 38px; width: 320px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--tx3); font-size: 13px; }
.hs input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--tx); font-size: 13px; padding: 0; }
.hs input::placeholder { color: var(--tx3); }
.hs:focus-within { border-color: var(--acc); }
.hdr__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 4px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--tx); font-weight: 500; font-size: 13px; }
.user:hover { color: #fff; background: rgba(255,255,255,.09); }
.user .av { width: 32px; height: 32px; font-size: 13px; }
.bell { position: relative; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--tx2); }
.bell:hover { color: #fff; }
.bell i { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); border: 2px solid #0f1720; }
.ham { display: none; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); align-items: center; justify-content: center; color: var(--tx); padding: 0; }
.mobilmenu { display: flex; flex-direction: column; gap: 2px; padding: 10px var(--gutter) 16px; border-top: 1px solid var(--line); background: var(--bg2); }
.mobilmenu a { padding: 11px 12px; border-radius: 10px; color: var(--tx); font-weight: 500; }
.mobilmenu a.on { background: rgba(255,255,255,.08); color: #fff; }
.mobilmenu[hidden] { display: none; }
.mobilmenu .dilsatir { display: flex; gap: 8px; padding: 10px 12px 0; }

/* --- Mağaza şeridi ------------------------------------------------------------------- */
.strip { height: 56px; display: flex; align-items: center; gap: 4px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip .btn b { font-weight: 700; background: rgba(0,0,0,.25); border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; font-size: 11px; }
.strip .btn-acc b { background: rgba(0,0,0,.18); }
.strip__right { margin-left: auto; display: flex; gap: 8px; padding-left: 12px; }

/* --- Altbilgi -------------------------------------------------------------------------- */
.ftr { background: var(--bg2); border-top: 1px solid var(--line); }
.ftr__in { padding-top: 34px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 24px; }
.ftr h4 { font-size: 12px; font-weight: 600; color: var(--tx2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.ftr .ls a { display: block; color: var(--tx2); font-size: 13px; line-height: 1.9; }
.ftr .ls a:hover { color: #fff; }
.ftr__bot { margin-top: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--tx3); border-top: 1px solid var(--line); padding: 16px 0 24px; }
.ftr__kunye { font-size: 11px; color: var(--tx3); margin-top: 14px; }
/* Kabul edilen kartlar: resmî logolar aynı boyutta beyaz rozetlerde (koyu zeminde Visa mavisi ancak beyazda okunur). */
.kartlar { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kartlar li { display: flex; align-items: center; justify-content: center; width: 50px; height: 32px; background: #fff; border-radius: 6px; }
.kartlar img { display: block; }
.mfoot .kartlar { margin-bottom: 12px; }
/* Altbilgi dil/sosyal hapları. Yalnız a/summary: oyun sayfasındaki dil tablosu da tuvalde .lang (table.lang) — genel kural onu 30 px'lik hapa çeviriyordu. */
a.lang, summary.lang { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); color: var(--tx2); font-size: 12px; font-weight: 500; }
a.lang.on { background: rgba(255,255,255,.08); color: #fff; }

/* --- Sayfa başlığı ve ortak sayfa parçaları ------------------------------------------- */
.sayfabas { display: flex; align-items: flex-end; gap: 14px; margin: 26px 0 16px; flex-wrap: wrap; }
.sayfabas h1 { font-size: 34px; font-weight: 800; letter-spacing: -.025em; color: #fff; }
.ozel { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(61,224,213,.14); color: var(--teal); font-size: 12px; font-weight: 500; }

/* --- Uyumluluk: eski şablon sınıfları ---------------------------------------------------- */
.izgara { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .izgara--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.izgara--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.izgara--anahaber { grid-template-columns: 2fr 1fr; } .izgara--ikili { grid-template-columns: 1fr 1fr; } .izgara--yanpanel { grid-template-columns: 1fr 340px; }
.satir { display: flex; align-items: center; gap: 10px; }
.bosluk { flex: 1 1 auto; }
.tarih { font-size: 12px; color: var(--tx3); }
.ayrac { width: 1px; height: 18px; background: var(--line2); display: inline-block; }
.nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: 6px; } .nokta--sari { background: var(--warn); }
.durum { font-size: 12px; color: var(--tx2); display: inline-flex; align-items: center; }
.isaret { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: rgba(74,222,128,.2); position: relative; }
.isaret::after { content: "✓"; position: absolute; inset: 0; font-size: 11px; color: var(--ok); display: flex; align-items: center; justify-content: center; }
.isaret--yok { background: rgba(255,255,255,.06); } .isaret--yok::after { content: "—"; color: var(--tx3); }
.kaydir { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.haberler3, .siniflar3, .ospaketler--uc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ospaketler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dsp-17 { font-size: 17px; } .dsp-18 { font-size: 18px; } .dsp-22 { font-size: 22px; } .h1--40 { font-size: 40px; }
.yaskutu { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.yasrozet { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 6px; background: rgba(255,255,255,.08); font-weight: 700; color: #fff; font-size: 12px; }
.yasrozet--buyuk { min-width: 44px; height: 34px; font-size: 14px; }
.serit__im { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(61,224,213,.14); color: var(--teal); font-weight: 800; }
.marka { display: inline-flex; align-items: center; gap: 8px; }
.marka__im { display: none; } .marka__ad { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: #fff; text-transform: none; }

/* --- Duyarlılık ---------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .grid-4, .grid-5, .grid-6, .izgara--4, .izgara--5, .izgara--6, .ospaketler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hs { width: 220px; }
  .ftr__in { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .cols { flex-direction: column; } .side, .side-s, .side-xs { width: 100%; }
  .hdr__nav, .hs, .hdr__indir { display: none; }
  .ham { display: inline-flex; }
  .grid-3, .grid-4, .grid-5, .grid-6, .izgara, .izgara--3, .izgara--4, .izgara--5, .izgara--6, .uclu, .haberler3, .siniflar3, .ospaketler, .ospaketler--uc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .izgara--anahaber, .izgara--yanpanel, .form2, .ikili { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 120px 1fr; }
  .t1, .sayfabas h1 { font-size: 28px; }
  .ftr__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .izgara, .izgara--2, .izgara--3, .izgara--4, .izgara--5, .izgara--6, .uclu, .haberler3, .siniflar3, .ospaketler, .ospaketler--uc { grid-template-columns: 1fr; }
  .hdr__in { height: 60px; gap: 10px; }
  .user span.ad { display: none; }
  .t1, .sayfabas h1 { font-size: 24px; }
  .btn-lg { height: 46px; padding: 0 18px; }
  .ftr__in { grid-template-columns: 1fr; gap: 16px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dt { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .hdr, .ftr, .strip, .bgfx { display: none !important; } body { background: #fff; color: #000; } }

/* --- Ana sayfa (Main) ------------------------------------------------------------------ */
.anahero { height: 460px; }
/* Hero slaytları (yönetim: Ana sayfa vitrini): etkin slayt akışta, ötekiler üstüne biner */
.anahero__slayt { position: relative; height: 100%; transition: opacity .5s ease; }
.anahero__slayt:not(.on) { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.anahero__slayt > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) { .anahero__slayt { transition: none; } }
.kampanyabant { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-color: rgba(61,224,213,.35); background: linear-gradient(90deg, rgba(61,224,213,.10), rgba(61,224,213,0) 70%), var(--sur); }
a.kampanyabant:hover { border-color: var(--teal); }
.anahero__in { height: 100%; padding: 48px 52px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; max-width: 680px; }
.anahero__ad { font-size: 46px; }
.anahero__alt { font-size: 16px; max-width: 540px; }
.anahero__eylem { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.anahero__form { display: flex; gap: 8px; align-items: center; }
.anahero__form .input { width: 240px; height: 50px; border-radius: 12px; }
.anahero__kucuk { position: absolute; right: 22px; bottom: 22px; display: flex; gap: 8px; }
.anahero__kucuk .thumb { width: 124px; height: 70px; }
.pkc { display: flex; flex-direction: column; color: inherit; }
.pkc:hover { border-color: var(--line2); color: inherit; }
.pkc > img, .pkc > .ph { width: 100%; height: 162px; object-fit: cover; }
.pkc__g { display: block; } .pkc__g img, .pkc__g .ph { width: 100%; height: 162px; object-fit: cover; display: block; }
.pkc a.t3 { color: #fff; } .pkc a.t3:hover { color: var(--acc); }
.paketform { display: inline-flex; margin: 0; }
.pkc__b { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pkc__f { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; gap: 8px; }
.pkc--one { border-color: rgba(61,224,213,.45); }
.spot { position: relative; height: 300px; border-radius: 14px; overflow: hidden; color: inherit; display: block; background: var(--sur); }
.spot > img { width: 100%; height: 100%; object-fit: cover; }
.spot__in { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; background: linear-gradient(180deg, rgba(11,17,23,0), rgba(11,17,23,.95)); }
.teklif-sira { height: 300px; justify-content: space-between; padding: 6px; }
.deal { display: flex; gap: 12px; align-items: center; padding: 10px; color: inherit; border-radius: 10px; }
.deal:hover { background: rgba(255,255,255,.04); color: inherit; }
.deal > img, .deal > .ph { width: 132px; height: 74px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.trendsekme { border: 0; margin-left: 8px; }
.trendliste { padding: 6px; }
.tl { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: inherit; }
.tl:hover { background: rgba(255,255,255,.04); color: inherit; }
.tl > img, .tl > .ph { width: 200px; height: 75px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.tl.on { background: rgba(76,194,255,.1); outline: 1px solid rgba(76,194,255,.35); }
.trendonizleme { width: 380px; }
.trendonizleme__ss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.trendonizleme__ss img { width: 100%; height: 92px; object-fit: cover; border-radius: 8px; }
.com { display: block; color: inherit; }
.com > img { width: 100%; height: 210px; object-fit: cover; }
.strip2 { display: flex; align-items: center; gap: 24px; padding: 26px 30px; border-radius: 16px; background: linear-gradient(90deg, #0f1a26, #14202c 60%, #122a2e); border: 1px solid var(--line2); }
.strip2__not { text-align: right; line-height: 1.6; }
@media (max-width: 900px) {
  .anahero { height: auto; min-height: 420px; }
  .anahero__in { padding: 28px 22px; max-width: none; }
  .anahero__ad { font-size: 32px; }
  .anahero__kucuk { display: none; }
  .trendonizleme { width: 100%; }
  .strip2 { flex-wrap: wrap; gap: 14px; padding: 20px; }
  .strip2__not { text-align: left; margin-left: 0; }
  .teklif-sira { height: auto; }
}
@media (max-width: 560px) {
  .anahero__form { flex-direction: column; align-items: stretch; width: 100%; }
  .anahero__form .input { width: 100%; }
  .tl > img, .tl > .ph { width: 120px; height: 45px; }
}

/* --- Oyun sayfası (Oyun) ------------------------------------------------------------- */
.ossekme { height: 48px; display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.ossekme::-webkit-scrollbar { display: none; }
.ossekme-kap--seritsiz .ossekme { margin-top: 24px; }
.ossekme__marka { display: flex; align-items: center; gap: 8px; margin-right: 10px; color: #fff; font-weight: 600; white-space: nowrap; }
.ossekme__ic { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
.ossekme__pills { display: flex; gap: 2px; }
.ossekme__sag { white-space: nowrap; padding: 0 10px; }
.oyunarka { position: absolute; left: 0; right: 0; top: 0; height: 1000px; overflow: hidden; z-index: 0; pointer-events: none; }
.oyunarka img { width: 100%; height: 100%; object-fit: cover; filter: blur(24px) saturate(.8); opacity: .22; transform: scale(1.05); }
.oyunarka__perde { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,17,23,.2) 0%, rgba(11,17,23,.85) 60%, var(--bg) 100%); }
.oyunbas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.oyunbas__eylem form { display: inline; }
.oyunoynatici { width: 100%; height: 428px; object-fit: cover; border-radius: 14px; transition: opacity var(--normal) var(--ease); }
.oyunoynatici--geciste { opacity: .35; }
/* overflow-x kaydırma dikeyde de kırpar: seçili karenin 2 px çerçevesi görünsün diye 2 px iç boşluk, konum tuvaldeki gibi kalsın diye eksi dış boşluk. */
.oyunserit { display: flex; gap: 8px; margin: 6px -2px 0; padding: 2px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.oyunserit .thumb { width: 141px; height: 80px; opacity: .7; cursor: pointer; transition: opacity var(--hizli) var(--ease); } .oyunserit .thumb:hover { opacity: .9; } .oyunserit .thumb.on { opacity: 1; outline: 2px solid #fff; }
.glr { display: flex; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--line); flex-wrap: wrap; } .glr .k { width: 130px; color: var(--tx3); flex-shrink: 0; }
.buy { display: flex; align-items: center; gap: 20px; padding: 20px 22px; flex-wrap: wrap; }
.buy__ic { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.buy .pbox form { display: inline; }
.dlc { display: flex; align-items: center; gap: 14px; padding: 12px 0; flex-wrap: wrap; } .dlc__nm { flex: 1; min-width: 200px; }
.desc { font-size: 15px; color: var(--tx2); line-height: 1.65; }
.desc p { margin: 0 0 14px; } .desc h3 { font-size: 17px; font-weight: 600; color: #fff; margin: 22px 0 8px; }
.desc img { width: 100%; border-radius: 12px; margin: 6px 0 18px; }
.ev { display: flex; gap: 14px; padding: 12px; color: inherit; } .ev:hover { color: inherit; border-color: var(--line2); }
.ev > img { width: 200px; height: 112px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
/* Oyun sayfası "Son etkinlikler ve duyurular" (Ekrem, 28 Eyl: solda küçük görsel + sağda aşağı uzayan dar metin kötü):
   Steam'deki gibi görsel üstte kartın tam genişliğinde, altında başlık, tarih ve en çok 3 satır özet; kartlar eş yükseklikte.
   Telefonda (≤900 px) OyunMobil'in kısa satır listesi kalır. */
@media (min-width: 901px) {
  .bol-haber .ev { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
  .bol-haber .ev > img, .bol-haber .ev > .ph { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; border-radius: 0; }
  .bol-haber .ev > div { padding: 14px 16px 16px; }
  .bol-haber .ev p { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .bol-haber .ev:hover > img { opacity: .92; }
}
.feat { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; }
.feat i { width: 26px; height: 26px; border-radius: 7px; background: rgba(76,194,255,.14); display: inline-block; flex-shrink: 0; }
.lang td, .lang th { padding: 6px 8px; } .lang td.c { text-align: center; color: var(--acc); }
.sys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; font-size: 13px; color: var(--tx2); line-height: 1.7; }
.sys b { color: #fff; font-weight: 500; }
.rbox { display: flex; gap: 16px; padding: 16px; flex-wrap: wrap; }
.rbox__l { width: 180px; flex-shrink: 0; display: flex; gap: 10px; align-items: flex-start; }
.rth { width: 40px; height: 40px; border-radius: 10px; background: var(--acc); display: flex; align-items: center; justify-content: center; color: #03131d; font-size: 18px; flex-shrink: 0; }
.rth--no { background: rgba(248,113,113,.3); }
.pill input[type="radio"] { accent-color: var(--acc); margin: 0 4px 0 0; }
@media (max-width: 900px) {
  .oyunoynatici { height: auto; aspect-ratio: 16 / 9; }
  .sys { grid-template-columns: 1fr; }
  .oyunbas__eylem { margin-left: 0; }
  .rbox__l { width: 100%; }
  .ev > img { width: 120px; height: 68px; }
}

/* --- Arama (Arama) ve sepet (Sepet) --------------------------------------------------- */
.aramabar { flex-wrap: wrap; }
.fbox h3 { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 8px; display: flex; }
.frow { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; color: var(--tx); }
.frow:hover { color: #fff; } .frow--bos { opacity: .5; }
.frow .n { margin-left: auto; color: var(--tx3); font-size: 12px; }
.ck { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--line2); background: rgba(255,255,255,.05); flex-shrink: 0; position: relative; }
.ck.on { background: var(--acc); border-color: var(--acc); }
.ck.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #03131d; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hit { display: flex; align-items: center; gap: 14px; padding: 10px 12px; color: inherit; border-radius: 10px; flex-wrap: wrap; }
.hit:hover { background: rgba(255,255,255,.04); color: inherit; }
.hit > img, .hit > .ph { width: 160px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.hit.on { background: rgba(76,194,255,.1); outline: 1px solid rgba(76,194,255,.35); }
.hit__d { width: 110px; font-size: 12px; color: var(--tx3); } .hit__rv { width: 110px; font-size: 12px; color: var(--acc); }
.ci { display: flex; align-items: center; gap: 16px; padding: 14px; flex-wrap: wrap; }
.ci > img, .ci > .ph { width: 140px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.ci__act { margin-left: 16px; font-size: 12px; white-space: nowrap; }
.sum__l { display: flex; font-size: 13px; padding: 5px 0; gap: 12px; } .sum__l span:last-child { margin-left: auto; color: #fff; }
.sum__tot { font-size: 20px; font-weight: 700; color: #fff; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
@media (max-width: 900px) { .hit__d, .hit__rv { display: none; } .hit > img, .hit > .ph { width: 120px; height: 45px; } }
.hero .anahero__kucuk { position: absolute; }
.buy > div:not(.pbox) { flex: 1 1 320px; min-width: 0; }
.hit { flex-wrap: nowrap; } .hit > .grow { flex: 1 1 0; min-width: 0; }
.hit .faint.sm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit__d { white-space: nowrap; } .aramabar .input { flex: 1 1 260px; }

/* ---------- Oyun alt sayfaları: Dünya / Sınıflar / Hikâye (tuval panoları) ---------- */
.map { position: relative; height: 560px; border-radius: 18px; overflow: hidden; background: var(--sur); }
.map img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.map__lejant { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.pin { position: absolute; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(11,17,23,.85); border: 1px solid var(--line2); color: #fff; font-size: 12px; font-weight: 600; backdrop-filter: blur(6px); }
.pin i { width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #042523; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-style: normal; }
.pin.b i { background: var(--bad); color: #fff; }
.pin small { font-weight: 400; color: var(--tx2); }
.rg { display: flex; flex-direction: column; color: inherit; scroll-margin-top: 90px; }
.rg img { width: 100%; height: 150px; object-fit: cover; }
.rg .b { padding: 14px; }
.lv { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(255,255,255,.07); font-size: 11px; color: var(--tx2); white-space: nowrap; }
.cl { display: flex; flex-direction: column; color: inherit; }
.cl.on { outline: 1px solid var(--acc); }
.cl img, .cl .ph { width: 100%; height: 260px; object-fit: cover; }
.cl .b { padding: 18px; }
.stat { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 4px 0; }
.stat span { width: 90px; color: var(--tx3); }
.stat .bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.stat .bar i { display: block; height: 100%; border-radius: 3px; background: var(--acc); }
.sk { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; align-items: flex-start; }
.sk i { width: 30px; height: 30px; border-radius: 8px; background: rgba(76,194,255,.14); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--acc); font-style: normal; }
.story { font-size: 17px; line-height: 1.75; color: var(--tx2); max-width: 760px; }
.story p { margin: 0 0 18px; }
.story ul { margin: 0 0 18px 20px; }
.story h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 34px 0 12px; scroll-margin-top: 90px; }
.story .lead { font-size: 20px; color: var(--tx); line-height: 1.6; }
.story img { width: 100%; border-radius: 14px; margin: 8px 0 22px; display: block; }
.tlx { display: flex; flex-direction: column; }
.tlx div { display: flex; gap: 12px; padding: 8px 0; font-size: 13px; }
.tlx b { width: 64px; color: var(--teal); font-weight: 600; flex-shrink: 0; }
.toc a { display: block; padding: 6px 0; font-size: 13px; color: var(--tx2); }
.toc a.on { color: #fff; }
.hikayearka { position: absolute; left: 0; right: 0; top: 0; height: 520px; overflow: hidden; z-index: 0; pointer-events: none; }
.hikayearka img { width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(.7); opacity: .22; }
.hikayearka__perde { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,17,23,.2), var(--bg)); }
/* Makale gövdesinin öteki blokları (metinIsle: alıntı, tablo, alt başlık, liste, bağlantı). */
.story h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 26px 0 10px; }
.story ol { margin: 0 0 18px 22px; }
.story li { margin: 0 0 6px; }
.story a:not(.btn):not(.chip) { color: var(--acc); }
.story blockquote { margin: 0 0 18px; padding: 10px 16px; border-left: 3px solid var(--teal); background: rgba(61,224,213,.05); border-radius: 0 10px 10px 0; color: var(--tx); }
.story table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.story td, .story th { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
/* --- Haber ayrıntısı (oyun sitesi /haber/…; yama notları, duyuru): hikâye düzeni + sağ sütun --- */
.haberd h1.t1 { font-size: 40px; letter-spacing: -.02em; }
.story img.haberd__kapak { aspect-ratio: 16 / 9; object-fit: cover; margin: 24px 0 26px; }
.haberd .note { margin: 4px 0 18px; font-size: 14px; }
.haberd__paylas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.haberd__son { display: flex; gap: 12px; align-items: center; color: inherit; }
.haberd__son img, .haberd__son .ph { width: 84px; height: 48px; object-fit: cover; border-radius: 8px; flex-shrink: 0; font-size: 14px; }
.haberd__son > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.haberd__son:hover .white { color: var(--teal); }
main.sayfa { position: relative; flex: 1 0 auto; }
@media (max-width: 900px) { .map { height: 380px; } .pin small { display: none; } .story { font-size: 16px; } .story h1.t1 { font-size: 30px !important; } .haberd h1.t1 { font-size: 28px; } }

/* ---------- Giriş / Hesap oluştur / Giriş yapamıyorum (tuval panoları) ---------- */
.box { max-width: 960px; margin: 70px auto 0; display: grid; grid-template-columns: 1fr 1px 320px; gap: 40px; padding: 40px; }
.qr { width: 180px; height: 180px; background: #fff; border-radius: 12px; padding: 12px; margin: 0 auto; box-sizing: border-box; }
.qr svg { width: 100%; height: 100%; display: block; }
.qr--bitti .qr { opacity: .3; }
.stp { padding: 22px; }
.stp h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 14px; }
.stp h2 b { width: 24px; height: 24px; border-radius: 50%; background: var(--acc); color: #03131d; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.stp.ok h2 b { background: var(--ok); color: #06210f; }
.stp.off { opacity: .45; }
.robotk { min-height: 64px; border: 1px dashed var(--line2); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--tx3); font-size: 13px; padding: 8px 12px; flex-wrap: wrap; }
.robotk img { height: 48px; border-radius: 6px; }
.robotk .input { width: 140px; text-transform: uppercase; letter-spacing: .2em; font-weight: 600; }
.st { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.st .h { display: flex; align-items: center; gap: 10px; }
.st .h b { width: 26px; height: 26px; border-radius: 50%; background: var(--acc); color: #03131d; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.st.on { border-color: rgba(76,194,255,.35); }
.st.off { opacity: .55; }
.code6 { display: flex; gap: 8px; }
.code6 input { width: 52px; height: 56px; text-align: center; font-size: 22px; font-weight: 600; padding: 0; }
.guc { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.guc i { display: block; height: 100%; width: 0; background: var(--warn); transition: width .2s; }
.qr-onay { max-width: 520px; margin: 40px auto 0; }
@media (max-width: 900px) { .box { grid-template-columns: 1fr; margin-top: 24px; padding: 24px; } .divider { display: none; } .code6 input { width: 44px; height: 50px; } }

/* ---------- Ödeme / Makbuz / Ödeme hatası (tuval panoları) ---------- */
.kartlogo { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; background: #fff; color: #0b1117; font-size: 10px; font-weight: 800; margin-left: 4px; }
.si { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.si img, .si .ph { width: 90px; height: 34px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.si--buyuk { gap: 14px; padding: 12px 0; }
.si--buyuk img, .si--buyuk .ph { width: 120px; height: 45px; border-radius: 8px; }
.okc, .bad-ic { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.okc { background: rgba(74,222,128,.15); color: var(--ok); }
.bad-ic { background: rgba(248,113,113,.15); color: var(--bad); }
.opt.dis { opacity: .55; cursor: not-allowed; }
.chk.span2 { grid-column: 1 / -1; }
@media print { .hdr, .strip, .ftr, .side, .bgfx, .mobilmenu, .bildirim { display: none !important; } body { background: #fff !important; color: #000 !important; } .card { border-color: #ccc !important; background: #fff !important; } .white, .t1, .t3, .kv dd { color: #000 !important; } .cols { grid-template-columns: 1fr !important; } }

/* ---------- Hesap / Ayarlar / Cüzdan / Satın alma / Kütüphane / İstek listesi (tuval panoları) ---------- */
.li .v, .tg .v { margin-left: auto; font-size: 12px; color: var(--tx3); white-space: nowrap; }
/* Tuval Hesap: .li .v (0,2,0) .ok'u (0,1,0) ezer — durum değerleri gri görünür; renk yalnız .tg satırlarında. */
.tg .v.ok { color: var(--ok); }
.ic { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #3e6b8f, #16202d); flex-shrink: 0; }
.ni { display: flex; align-items: center; padding: 10px 14px; border-radius: 10px; color: var(--tx2); font-size: 14px; }
.ni.on, .ni:hover { background: rgba(76,194,255,.12); color: #fff; }
.ayarnav { position: sticky; top: 90px; display: flex; flex-direction: column; }
.sel { margin-left: auto; font-size: 13px; color: var(--tx); background: rgba(255,255,255,.05); border: 1px solid var(--line2); padding: 5px 10px; border-radius: 8px; white-space: nowrap; font-family: inherit; }
select.sel option { background: var(--sur2); }
.toggle { cursor: pointer; display: inline-block; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle:has(input:checked) { background: var(--teal); }
.toggle:has(input:checked) i { left: 21px; background: #062a28; }
.toggle:has(input:focus-visible), button.toggle:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.tg.alt { padding: 6px 0 6px 16px; }
details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }
details.ml { margin-left: auto; text-align: right; }
details.ml form { text-align: left; }
.guardkur { display: flex; gap: 20px; align-items: flex-start; padding: 14px 0; }
.guardkur .qr { margin: 0; width: 160px; height: 160px; }
.yedekler { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 12px; margin-top: 10px; font-size: 13px; color: #fff; }
.input.onek { width: auto; border-right: 0; border-radius: var(--rs) 0 0 var(--rs); padding-right: 0; color: var(--tx2); white-space: nowrap; display: inline-flex; align-items: center; }
/* Tuval Ayarlar: özel bağlantı tek kutu görünür ("emaplay.tr/id/ekrem"); önek aynı kutunun içinde. */
.input.onek + .input { border-radius: 0 var(--rs) var(--rs) 0; border-left: 0; padding-left: 0; }
.flex:focus-within > .input.onek { border-color: var(--acc); }
.tg > form { margin-left: auto; }
.pk { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.pk .amt { font-size: 22px; font-weight: 700; color: #fff; width: 160px; letter-spacing: -.02em; flex-shrink: 0; }
.pk .bon { font-size: 13px; color: var(--ok); } .pk .bon.z { color: var(--tx3); }
.pk.on { border-color: rgba(61,224,213,.5); }
.gi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--tx2); font-size: 14px; }
.gi img, .gi .ph { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.gi.on, a.gi:hover { background: rgba(76,194,255,.12); color: #fff; }
.hero3 { height: 300px; }
.hero3 .in { padding: 32px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.kstat { padding: 14px 16px; } .kstat b { display: block; font-size: 22px; font-weight: 700; color: #fff; } .kstat span { font-size: 12px; color: var(--tx3); }
.wl { display: flex; gap: 18px; padding: 14px; position: relative; }
.wl img, .wl > .ph { width: 300px; height: 140px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.wl .pos { position: absolute; left: -30px; top: 14px; width: 22px; text-align: center; color: var(--tx3); font-size: 13px; }
.wl .r { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.wl .r .pbox form { display: contents; }
.wl[draggable="true"] { cursor: grab; } .wl.surukleniyor { opacity: .45; } .wl.hedef { outline: 1px dashed var(--acc); }
.wlfiltre select.pill { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; font-family: inherit; }
.table .d { font-size: 12px; color: var(--tx3); margin-top: 2px; }
.js [data-otomatik-dugme] { display: none; }
@media (max-width: 900px) {
  .wl { flex-wrap: wrap; } .wl img, .wl > .ph { width: 100%; height: 160px; } .wl .pos { display: none; } .wl .r { margin-left: 0; align-items: flex-start; }
  .pk { flex-wrap: wrap; } .pk .amt { width: auto; } .ayarnav { position: static; } .guardkur { flex-direction: column; } .yedekler { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Haberler (tuval panosu) ---------- */
.big { position: relative; height: 380px; border-radius: 16px; overflow: hidden; display: block; color: inherit; }
.big img { width: 100%; height: 100%; object-fit: cover; }
.big .in { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 26px 24px; background: linear-gradient(180deg, rgba(11,17,23,0), rgba(11,17,23,.96)); }
.nc { display: flex; gap: 16px; padding: 14px; color: inherit; }
.nc:hover { color: inherit; border-color: var(--line2); }
.nc img, .nc > .ph { width: 220px; height: 124px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.srow { display: block; padding: 8px 12px; border-radius: 8px; color: var(--tx2); font-size: 13px; }
.srow.on, .srow:hover { background: rgba(76,194,255,.12); color: #fff; }
.hev { display: flex; gap: 12px; padding: 10px 0; font-size: 13px; color: inherit; }
.hev .d { width: 44px; text-align: center; background: rgba(255,255,255,.06); border-radius: 8px; padding: 4px 0; color: #fff; font-size: 11px; line-height: 1.2; flex-shrink: 0; }
@media (max-width: 900px) { .big { height: 260px; } .nc { flex-direction: column; } .nc img, .nc > .ph { width: 100%; height: 160px; } }

/* ---------- Kod kullan / Puan dükkânı (tuval panoları) ---------- */
.pad-l { padding: 24px; }
.kodbuyuk { height: 56px; font-size: 20px; letter-spacing: .12em; text-align: center; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }
.pts { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(61,224,213,.1); border: 1px solid rgba(61,224,213,.3); color: #fff; font-weight: 600; white-space: nowrap; }
.pt { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8ff3ec, #1b8f88); display: inline-block; flex-shrink: 0; }
.it { display: flex; flex-direction: column; color: inherit; }
.it img, .it > .ph { width: 100%; height: 150px; object-fit: cover; }
.it .b { padding: 12px 14px; display: flex; flex-direction: column; flex: 1; }
.it .pr { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #fff; font-weight: 600; }
.ring { width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--teal); box-shadow: 0 0 18px rgba(61,224,213,.5); }

/* --- Topluluk (tuval: ToplulukAna, Topluluk, Tartismalar, Tartisma, Atolye) — yerel sınıflar .tp altında --- */
select.pill { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; font-family: inherit; }
select.pill option { background: var(--sur2); color: var(--tx); }
.tp select.bare, .tp button.bare { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--tx2); font: inherit; cursor: pointer; padding: 0; }
.tp .ft button.bare { color: var(--tx3); font-size: 12px; }
.tp .ft button.bare:hover, .tp .ft a:hover { color: #fff; }
.tp .hubh { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.tp .hubh > img, .tp .hubh > .ph { width: 72px; height: 72px; object-fit: cover; border-radius: 14px; flex-shrink: 0; }
.tp .hubh.k { gap: 14px; padding: 14px 18px; }
.tp .hubh.k > img, .tp .hubh.k > .ph { width: 52px; height: 52px; border-radius: 12px; }
.tp .c, .tp .wi { display: flex; flex-direction: column; color: inherit; }
.tp .c > img, .tp .c > .ph, .tp .wi > img, .tp .wi > .ph { width: 100%; height: 150px; object-fit: cover; }
.tp .c .b, .tp .wi .b { padding: 12px 14px; font-size: 13px; }
.tp .c .m, .tp .wi .m { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--tx3); }
.tp .fi a:not(.white) { color: inherit; }
.tp .kv dd.teal { color: var(--teal); } .tp .kv dd.faint { color: var(--tx3); }
select.pill { field-sizing: content; }
.tp .fi { display: flex; gap: 12px; padding: 12px 0; font-size: 13px; align-items: flex-start; }
.tp .fi > img { width: 120px; height: 45px; object-fit: cover; border-radius: 6px; margin-left: auto; flex-shrink: 0; }
.tp .hub { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; color: inherit; }
.tp .hub > img, .tp .hub > .ph { width: 40px; height: 40px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.tp .fr { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.tp .st { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex-direction: row; }
.tp .st span { font-size: 12px; color: var(--tx3); }
.tp .st b { display: block; font-size: 20px; font-weight: 700; color: #fff; }
/* Tuval Topluluk/Tartışmalar: .li yalnız boşluk ve yazı boyunu değiştirir; ds'deki flex satır kalır (tarih başlığın yanında). */
.tp .li { padding: 8px 0; font-size: 13px; }
.tp .dsc { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; align-items: center; }
.tp .tr { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 56px; }
.tp .tr .c2 { width: 80px; text-align: right; color: var(--tx2); font-size: 13px; flex-shrink: 0; }
.tp .tr .c3 { width: 160px; text-align: right; font-size: 12px; color: var(--tx3); line-height: 1.4; flex-shrink: 0; }
.tp .tr.sabit { background: rgba(76,194,255,.05); }
.tp .post { display: flex; gap: 14px; padding: 16px; }
.tp .post.dev { border-color: rgba(61,224,213,.4); background: rgba(61,224,213,.04); }
.tp .post .hd { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.tp .post .hd .t { margin-left: auto; color: var(--tx3); font-size: 12px; }
.tp .txt { font-size: 14px; color: var(--tx2); line-height: 1.6; overflow-wrap: anywhere; }
.tp .txt p { margin: 0 0 10px; } .tp .txt ul { margin: 0 0 10px; padding-left: 18px; }
.tp .quote { border-left: 3px solid var(--acc); padding: 6px 12px; margin: 0 0 10px; color: var(--tx3); font-size: 13px; background: rgba(255,255,255,.03); border-radius: 0 8px 8px 0; }
.tp .ft { display: flex; gap: 14px; font-size: 12px; color: var(--tx3); margin-top: 8px; }
.tp .ft a { color: var(--tx3); }
.tp .stars { color: var(--warn); letter-spacing: 1px; font-size: 12px; }
.tp .frow input { width: 15px; height: 15px; accent-color: var(--acc); margin: 0; }
.tp .row { color: inherit; }
.tp details.dd { position: relative; }
.tp details.dd > summary { cursor: pointer; }
.tp .dd__menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 280px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.tparka { height: 520px; }
.tparka img { filter: blur(20px) saturate(.7); opacity: .25; transform: none; }
.tparka .oyunarka__perde { background: linear-gradient(180deg, rgba(11,17,23,.2) 0%, var(--bg) 100%); }
@media (max-width: 900px) {
  .tp .hubh { flex-wrap: wrap; } .tp .hubh .ml { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .tp .tr .c3 { display: none; } .tp .fi > img { display: none; }
  .tp .cols img[style*="420px"], .tp .cols .ph[style*="420px"] { width: 100% !important; height: auto !important; }
}

/* --- Başarımlar (tuval: Basarimlar) --- */
.bsr .ac { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.bsr .ac .ic { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, #2b4a63, #111a24); border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--tx3); text-align: center; flex-shrink: 0; overflow: hidden; }
.bsr .ac .ic img { width: 100%; height: 100%; object-fit: cover; }
.bsr .ac.lk .ic { filter: grayscale(1); opacity: .5; }
.bsr .ac .r { margin-left: auto; text-align: right; font-size: 12px; color: var(--tx3); white-space: nowrap; }
.bsr .ac .kr { margin-left: auto; text-align: right; font-size: 12px; color: var(--tx2); white-space: nowrap; min-width: 90px; }
.bsr .ac .kr + .r { margin-left: 16px; }
.bsr .ac .pct { font-size: 13px; color: #fff; }
.bsr .row .ic.ph { display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; overflow: hidden; }
.bsr details.dd { position: relative; }
.bsr details.dd > summary { cursor: pointer; }
.bsr .dd__menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: 240px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.bsr select.bare { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--tx2); font: inherit; cursor: pointer; padding: 0; }

/* --- ortak küçük bileşenler (açılır menü, çıplak düğme/seçim) --- */
details.dd { position: relative; }
details.dd > summary { cursor: pointer; }
.dd__menu { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 260px; box-shadow: 0 12px 40px rgba(0,0,0,.45); text-align: left; }
button.bare, select.bare { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; text-align: left; }
.dd__menu a, .dd__menu button.bare { color: var(--tx2); }
/* `button.bare`'in `font: inherit`'i `.md`yi eziyordu: menüde form düğmesi (Takip et, Engelle) bağlantılardan büyük çıkıyordu. */
.dd__menu button.bare.md { font-size: 13px; }
.dd__menu a:hover, .dd__menu button.bare:hover { color: #fff; }

/* --- Profil (tuval: Profil) --- */
.prarka { height: 640px; }
.prarka img { filter: blur(16px) saturate(.7); opacity: .22; transform: none; }
.prarka .oyunarka__perde { background: linear-gradient(180deg, rgba(11,17,23,.1) 0%, var(--bg) 100%); }
.pr .ph2 { display: flex; gap: 24px; align-items: flex-start; padding: 24px; }
.pr .pav { position: relative; width: 152px; height: 152px; border-radius: 20px; background: linear-gradient(135deg, #2b4a63, #111a24); border: 2px solid var(--ok); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 700; color: #fff; overflow: hidden; }
.pr .pav > img { width: 100%; height: 100%; object-fit: cover; }
.pr .pav .pav__cerceve { position: absolute; inset: 0; object-fit: contain; pointer-events: none; }
.pr .lvl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx2); }
.pr .lvl b { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #a78bfa; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
.pr .g { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
.pr .g > img, .pr .g > .ph { width: 200px; height: 75px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.pr .ss { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pr .ss img { width: 100%; height: 96px; object-fit: cover; border-radius: 8px; display: block; }
.pr .ach { display: flex; gap: 8px; flex-wrap: wrap; }
.pr .ach span { width: 66px; height: 66px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--tx2); text-align: center; padding: 4px; overflow: hidden; line-height: 1.2; }
.pr .ach span img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.pr .cm { display: flex; gap: 12px; padding: 10px 0; font-size: 13px; }
.pr .st { display: flex; flex-direction: row; gap: 0; justify-content: space-between; font-size: 13px; padding: 7px 0; }
.pr .st > span:last-child, .pr .st > a:last-child { color: #fff; }
.pr .st > a:last-child { color: var(--acc); }
.pr .st .ok { color: var(--ok) !important; } .pr .st .acc { color: var(--acc) !important; } .pr .st .faint { color: var(--tx3) !important; }
.pr .fr6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pr .fr6 .av { aspect-ratio: 1; width: 100%; height: auto; font-size: 13px; }
.pr .ch { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 13px; color: inherit; }
.pr .ch .ic { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #3e6b8f, #16202d); flex-shrink: 0; }
@media (max-width: 900px) { .pr .ph2 { flex-wrap: wrap; } .pr .pav { width: 96px; height: 96px; font-size: 36px; } .pr .ss { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr .g > img, .pr .g > .ph { width: 120px; height: 45px; } }

/* --- Arkadaşlar (tuval: Arkadaslar) --- */
.ark .ni span { margin-left: auto; color: var(--tx3); font-size: 12px; }
.ark .ni span.chip { margin-left: 6px; color: inherit; }
.ark .gh { font-size: 12px; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 8px; }
.ark .fk { display: flex; align-items: center; gap: 12px; padding: 12px; color: inherit; }
.ark .fk .av { width: 48px; height: 48px; }
.ark .fk .nm { font-weight: 600; color: #fff; }
.ark .fk .stt { font-size: 12px; color: var(--tx3); margin-top: 2px; }
.ark .ing .av { border-color: var(--ok); } .ark .ing .nm, .ark .ing .stt { color: var(--ok); }
.ark .on2 .av { border-color: var(--acc); } .ark .on2 .nm, .ark .on2 .stt { color: var(--acc); }
.ark .off .nm { color: var(--tx3); }
.ark .fk .act { margin-left: auto; font-size: 12px; color: var(--tx3); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.ark .fk .act button.bare { color: var(--acc); font-size: 12px; }
.ark .code { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid var(--line); color: #fff; font-weight: 600; letter-spacing: .1em; }
@media (max-width: 900px) { .ark .grid-2 { grid-template-columns: 1fr; } }

/* --- Mesajlar (tuval: Mesajlar) --- */
.msj .chat { display: flex; height: 860px; padding: 0; overflow: hidden; }
.msj .cl { width: 300px; border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; }
.msj .cl .kaydir { flex: 1; overflow-y: auto; min-height: 0; }
.msj .cv { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; color: var(--tx2); }
.msj .cv:hover { background: rgba(255,255,255,.03); }
.msj .cv.on { background: rgba(76,194,255,.1); color: #fff; }
.msj .cv > div { min-width: 0; }
.msj .cv .nm { color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.msj .cv .lm { font-size: 12px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.msj .cv .t { margin-left: auto; font-size: 11px; color: var(--tx3); white-space: nowrap; }
.msj .cv .dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.msj .cm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.msj .cm.bos { align-items: center; justify-content: center; }
.msj .ch { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.msj .ms { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.msj .m { display: flex; gap: 10px; max-width: 70%; }
.msj .m .b { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.msj .m.me { align-self: flex-end; flex-direction: row-reverse; }
.msj .m.me .b { background: rgba(76,194,255,.16); }
.msj .m.me .t { text-align: right; }
.msj .m .t { font-size: 11px; color: var(--tx3); margin-top: 4px; }
.msj .m img.gor { max-width: 260px; max-height: 220px; border-radius: 10px; display: block; }
.msj .sys { display: block; align-self: center; font-size: 11px; color: var(--tx3); background: rgba(255,255,255,.04); padding: 4px 10px; border-radius: 999px; line-height: 1.4; }
.msj .in { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: center; }
.msj .in > input.input { flex: 1; }
.msj .in label.btn { cursor: pointer; }
.msj .cr { width: 260px; border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.msj .cr .center .av { margin: 0 auto; }
.msj .st2 { font-size: 12px; color: var(--tx3); }
.msj .st2 b { display: block; color: #fff; font-weight: 600; }
.msj details.yukari .dd__menu { top: auto; bottom: calc(100% + 6px); }
.msj .emoji .dd__menu { width: 232px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; right: 0; }
.msj .emoji .dd__menu button { font-size: 20px; padding: 4px; border-radius: 6px; text-align: center; }
.msj .emoji .dd__menu button:hover { background: rgba(255,255,255,.08); }
.msj .gorizgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.msj .gorizgara img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; display: block; }
@media (max-width: 1100px) { .msj .cr { display: none; } }
@media (max-width: 760px) { .msj .chat { flex-direction: column; height: auto; } .msj .cl { width: 100%; max-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); } .msj .ms { max-height: 60vh; } .msj .m { max-width: 90%; } }

/* --- Grup (tuval: Grup) --- */
.grp .gh { display: flex; align-items: flex-end; gap: 20px; padding: 24px; height: 260px; position: relative; }
.grp .gh .in { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 20px; width: 100%; }
.grp .gav { width: 110px; height: 110px; border-radius: 24px; background: radial-gradient(circle at 40% 35%, #2b4a63, #111a24); border: 2px solid var(--teal); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: #fff; overflow: hidden; }
.grp .gav img { width: 100%; height: 100%; object-fit: cover; }
.grp .mem { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.grp .mem .av { width: 100% !important; height: auto !important; aspect-ratio: 1; border-radius: 12px; }
.grp .an { padding: 14px 0; }
.grp .an .txt { font-size: 14px; }
.grp .ev { display: flex; gap: 12px; padding: 10px 0; font-size: 13px; }
.grp .ev .d { width: 46px; text-align: center; background: rgba(255,255,255,.06); border-radius: 8px; padding: 5px 0; color: #fff; font-size: 11px; line-height: 1.2; flex-shrink: 0; }
.grp .ev button.bare { color: var(--acc); font-size: 12px; }
.grp details.card > summary { list-style: none; }
@media (max-width: 900px) { .grp .gh { height: auto; min-height: 220px; } .grp .gh .in { flex-wrap: wrap; } .grp .gav { width: 72px; height: 72px; } .grp .mem { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.grp .an button.bare { color: var(--tx3); font-size: 12px; margin-left: 8px; }
.grp .an button.bare:hover { color: var(--bad); }

/* --- Topluluk Pazarı (tuval: Pazar) --- */
.pz .rar { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.pz .frow input[type="radio"], .pz .frow input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--acc); margin: 0; }
.pz .it { display: flex; flex-direction: column; color: inherit; }
.pz .it .im { width: 100%; height: 120px; object-fit: cover; border-bottom: 3px solid #b0c3d9; display: flex; }
.pz .it .b { padding: 10px 12px; font-size: 12px; }
.pz .it .nm { color: #fff; font-weight: 600; font-size: 13px; min-height: 36px; }
.pz .rw { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 13px; color: inherit; }
.pz .rw .im { width: 64px; height: 44px; border-radius: 6px; border-bottom: 3px solid #b0c3d9; flex-shrink: 0; object-fit: cover; }
.pz .rw form { margin-left: 8px; }
.pz .esyagorsel { width: 220px; height: 150px; border-radius: 12px; object-fit: cover; border-bottom: 4px solid #b0c3d9; flex-shrink: 0; }
.pz .st2 { font-size: 12px; color: var(--tx3); } .pz .st2 b { display: block; color: #fff; font-size: 18px; font-weight: 700; }
.pz svg.grafik { width: 100%; height: 160px; display: block; }
.pz svg.grafik rect { fill: var(--acc); opacity: .85; } .pz svg.grafik rect:hover { opacity: 1; }
.pz svg.grafik line { stroke: var(--line2); stroke-width: 1; }
.pz .price.ok { color: var(--ok); }
@media (max-width: 1100px) { .pz .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pz .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pz .esyagorsel { width: 120px; height: 90px; } }
.pz svg.grafik line.kilavuz { stroke: var(--line); stroke-dasharray: 3 4; }

/* --- Envanter (tuval: Envanter) --- */
.env .gridc { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.env .cell { color: var(--tx2); overflow: hidden; line-height: 1.25; }
.env .cell img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.env a.cell:hover { border-color: var(--line2); color: #fff; }
.env .big { width: 100%; height: 220px; border-radius: 12px; border-bottom: 4px solid #eb4b4b; object-fit: cover; display: flex; }
.env .tab img { width: 22px; height: 22px; object-fit: cover; border-radius: 6px; }
.env .tab { display: inline-flex; align-items: center; gap: 8px; }
.env .btn.dis { opacity: .45; pointer-events: none; }
@media (max-width: 900px) { .env .gridc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Takas (tuval: Takas) --- */
.tk .inv { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tk .offer { display: flex; gap: 8px; min-height: 96px; padding: 8px; border: 1px dashed var(--line2); border-radius: 12px; align-items: center; flex-wrap: wrap; }
.tk .offer .cell { width: 80px; flex-shrink: 0; cursor: pointer; }
.tk .of { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 13px; }
.tk .cell { color: var(--tx2); overflow: hidden; line-height: 1.25; }
.tk .cell img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.tk label.sec { cursor: pointer; }
.tk label.sec:hover { border-color: var(--line2); color: #fff; }
.tk select.bare option { background: var(--sur2); color: var(--tx); }

/* --- Rozetler (tuval: Rozetler) --- */
.rzs .ksl { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rzs .ksl .im { width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); position: relative; background: var(--sur2); }
.rzs .ksl .im img { width: 100%; height: 100%; object-fit: cover; }
.rzs .ksl.lk .im img, .rzs .ksl.lk .im .ph { filter: grayscale(1) brightness(.5); }
.rzs .ksl .im .q { position: absolute; right: 6px; top: 6px; }
.rzs .ksl .nm { font-size: 12px; color: var(--tx2); text-align: center; }
.rzs .rz { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; text-align: center; }
.rzs .rz .ic { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--teal); background: radial-gradient(circle at 40% 35%, #2b4a63, #111a24); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; overflow: hidden; padding: 4px; }
.rzs .rz .ic img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rzs .rz.g .ic { border-color: var(--tx3); opacity: .5; }
.rzs .btn.dis { opacity: .45; pointer-events: none; }
@media (max-width: 900px) { .rzs .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rzs .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Bildirimler (tuval: Bildirimler) --- */
.bld .nt { display: flex; gap: 14px; padding: 14px 16px; align-items: flex-start; }
.bld .nt.un { background: rgba(76,194,255,.05); }
.bld .nt .ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: rgba(255,255,255,.06); }
.bld .nt .ic.g { background: rgba(74,222,128,.15); } .bld .nt .ic.t { background: rgba(61,224,213,.15); } .bld .nt .ic.w { background: rgba(251,191,36,.15); } .bld .nt .ic.b { background: rgba(76,194,255,.15); }
.bld .nt .t { margin-left: auto; font-size: 11px; color: var(--tx3); white-space: nowrap; }
.bld .nt > img { width: 96px; height: 36px; object-fit: cover; border-radius: 6px; margin-top: 4px; flex-shrink: 0; }
.bld .nt a.white:hover { color: var(--acc); }

/* --- Hakkında / İndir (tuval: Hakkinda) --- */
.hkarka { height: 560px; }
.hkarka img { filter: blur(14px) saturate(.8); opacity: .25; transform: none; }
.hkarka .oyunarka__perde { background: linear-gradient(180deg, rgba(11,17,23,.2) 0%, var(--bg) 100%); }
.hk .hero2 { padding: 70px 0 40px; display: flex; align-items: center; gap: 40px; }
.hk .stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.hk .stat { padding: 16px 18px; display: block; }
.hk .stat b { display: block; font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.hk .stat span { font-size: 12px; color: var(--tx3); }
.hk .feat { display: flex; gap: 32px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); }
.hk .feat img { width: 460px; height: 259px; object-fit: cover; border-radius: 16px; flex-shrink: 0; }
.hk .feat h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: #fff; margin-bottom: 10px; }
.hk .feat p { font-size: 15px; color: var(--tx2); line-height: 1.6; }
.hk .links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 30px 0 10px; font-size: 14px; line-height: 2; }
.hk .links h3 { font-size: 12px; font-weight: 600; color: var(--tx2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.hk .btn.dis { opacity: .5; pointer-events: none; }
@media (max-width: 900px) { .hk .hero2 { flex-direction: column; padding-top: 32px; } .hk .hero2 > img { width: 100% !important; height: auto !important; } .hk .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hk .feat { flex-direction: column; } .hk .feat img { width: 100%; height: auto; } .hk .links { grid-template-columns: 1fr; } }
.hk .stat span { width: auto; display: block; }

/* ---------- Destek / Destek talebi (tuval: Destek, DestekTalebi) ---------- */
.dst .c { display: flex; gap: 14px; padding: 16px; color: inherit; }
.dst .c > img, .dst .c > .ph { width: 52px; height: 52px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.dst .c a.t3 { color: #fff; }
.dst .c .ls a { display: block; font-size: 13px; line-height: 1.9; }
.dst .rw { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-size: 14px; color: inherit; }
.dst .rw img { width: 100px; height: 38px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.dst .list > .rw + .rw { border-top: 1px solid var(--line); }
.dst .drop { height: 64px; border: 1px dashed var(--line2); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--tx3); font-size: 13px; text-align: center; padding: 14px; cursor: pointer; }
.dst .drop.uzerinde { border-color: var(--acc); color: var(--tx2); }
.dst .si { display: flex; gap: 12px; align-items: center; padding: 0; }
.dst .si img, .dst .si .ph { width: 120px; height: 45px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.dst .dm { padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.dst .dm.ekip { background: rgba(76,194,255,.06); border-color: rgba(76,194,255,.3); }
.dst .dm.sis { background: rgba(61,224,213,.05); border-color: rgba(61,224,213,.25); border-style: dashed; }
.dst .txt { font-size: 14px; color: var(--tx2); line-height: 1.6; overflow-wrap: anywhere; }
.dst .txt p { margin: 0 0 10px; } .dst .txt p:last-child { margin-bottom: 0; }
.dst .makale { font-size: 15px; line-height: 1.75; }
.dst .makale h2, .dst .makale h3 { color: #fff; margin: 18px 0 8px; }
.dst .makale h2 { font-size: 19px; } .dst .makale h3 { font-size: 16px; } .dst .makale > :first-child { margin-top: 0; }
.dst .makale ul, .dst .makale ol { margin: 0 0 10px; padding-left: 22px; } .dst .makale li { margin: 2px 0; }
.dst .makale blockquote { border-left: 3px solid var(--acc); padding: 6px 12px; margin: 0 0 10px; color: var(--tx3); background: rgba(255,255,255,.03); border-radius: 0 8px 8px 0; }
@media (max-width: 900px) { .dst .rw { flex-wrap: wrap; } .dst .rw .ml { margin-left: 0; } }

/* ---------- Hata: 404 + planlı bakım (tuval: Hata) ---------- */
.hata .tek { max-width: 588px; margin-left: auto; margin-right: auto; }
.hata .dev { font-size: 96px; font-weight: 800; letter-spacing: -.05em; color: rgba(255,255,255,.08); line-height: 1; }
.hata .bakim { border-color: rgba(251,191,36,.35); }
.hata .gs { display: flex; gap: 10px; }
.hata .gs span { width: 64px; padding: 10px 0; text-align: center; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.hata .gs b { display: block; font-size: 24px; color: #fff; }
.hata .gs small { font-size: 11px; color: var(--tx3); }

/* ---------- Yasal belgeler (tuval: Yasal) ---------- */
.ysl .doc { gap: 0; }
.ysl .doc a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--tx2); }
.ysl .doc a.on { background: rgba(76,194,255,.12); color: #fff; }
.ysl .legal { font-size: 14px; line-height: 1.75; color: var(--tx2); overflow-wrap: anywhere; }
.ysl .legal h2 { font-size: 15px; font-weight: 600; color: #fff; margin: 22px 0 8px; }
.ysl .legal p { margin: 0 0 12px; }
.ysl .legal table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 14px; }
.ysl .legal td, .ysl .legal th { padding: 8px 10px; border: 1px solid var(--line); text-align: left; }
.ysl .dg { display: inline-flex; gap: 4px; }
.ysl .dg a, .ysl .dg span { padding: 3px 8px; border-radius: 6px; font-size: 11px; background: rgba(255,255,255,.06); color: var(--tx2); }
.ysl .dg .on { background: var(--acc); color: #03131d; }
.ykabul { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ykabul .btn { margin-left: auto; }
@media print { .ysl .dg, .ysl [data-yazdir], .ykabul { display: none !important; } .ysl .main { border: 0 !important; padding: 0 !important; } .ysl .legal, .ysl .legal h2 { color: #000 !important; } }

/* ---------- Telefon (tuval: AnaMobil, OyunMobil — 390 px) ---------- */
.hs-ikon, .mfoot, .tabbar, .tel-yalniz { display: none; }
.mm-ara { height: 1px; background: var(--line); margin: 6px 0; }
@media (max-width: 600px) {
  :root { --gutter: 14px; }
  .tel-gizle { display: none !important; }
  .tel-yalniz { display: block; }
  span.tel-yalniz, a.tel-yalniz.btn { display: inline-flex; }
  /* backdrop-filter sabit konumlu içeriği başlığın kutusuna hapseder: hamburger menüsü 56 px'lik başlığın içinde ince boş bir
     şeride sıkışıyordu (Ekrem 29 Eylül: "mobilde ana sayfadaki menüde sorun var"). Telefonda başlık zaten neredeyse opak. */
  .hdr { background: rgba(15,23,32,.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hdr__in { height: 56px; gap: 14px; }
  .hdr .wordmark { font-size: 18px; }
  .ham { order: -1; display: inline-flex; width: 20px; height: 20px; background: none; border: 0; border-radius: 0; color: var(--tx2); }
  .hdr__right { gap: 10px; }
  .hs-ikon { display: inline-flex; color: var(--tx2); }
  .bell, .hdr__kayit { display: none; }
  .user { height: auto; padding: 0; background: none; border: 0; }
  .user .av { width: 30px; height: 30px; }
  /* Menü açıkken arka perde: sayfayı karartır, dokunuşu yakalar (dışına dokunmak menüyü kapatır, alttaki bağlantıya basmaz). */
  body.menu-acik::before { content: ""; position: fixed; left: 0; right: 0; top: 56px; bottom: 0; z-index: 55; background: rgba(0,0,0,.5); }
  .mobilmenu { position: fixed; left: 0; top: 56px; bottom: 0; width: 280px; z-index: 60; background: rgba(15,23,32,.98); border-top: 0; border-right: 1px solid var(--line); padding: 16px; overflow-y: auto; }
  .ftr { display: none; }
  .mfoot { display: block; margin-top: 24px; background: var(--bg2); border-top: 1px solid var(--line); padding: 18px 14px 24px; font-size: 12px; color: var(--tx3); line-height: 1.8; }
  .mfoot a { color: var(--tx2); }
  .mfoot--sekme { padding-bottom: 90px; }
  .mdil { display: inline-block; position: relative; }
  .mdil summary { list-style: none; cursor: pointer; color: var(--tx2); }
  .mdil summary::-webkit-details-marker { display: none; }
  .mdil a { position: absolute; bottom: 100%; left: 0; background: var(--sur); border: 1px solid var(--line2); border-radius: 8px; padding: 4px 12px; white-space: nowrap; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 64px; z-index: 40; background: rgba(15,23,32,.98); border-top: 1px solid var(--line); justify-content: space-around; align-items: center; font-size: 10px; }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--tx3); }
  .tabbar a i { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
  .tabbar a i svg { width: 15px; height: 15px; }
  .tabbar a.on { color: var(--acc); }
  .tabbar a.on i { background: rgba(76,194,255,.25); }
}
/* Ana sayfa — telefon (tuval AnaMobil) */
@media (max-width: 600px) {
  .sayfa-ana .strip { display: none; }
  .anahero { margin: 0 calc(-1 * var(--gutter)); height: 300px; min-height: 0; border-radius: 0; }
  .anahero.mt16 { margin-top: 0; }
  .anahero .ov { display: none; }
  .anahero__in { position: absolute; left: 14px; right: 14px; bottom: 16px; height: auto; padding: 0; display: block; max-width: none; }
  .anahero__in .tagz { margin-bottom: 8px; }
  .anahero__ad { font-size: 30px; }
  .anahero__alt { font-size: 13px; margin-top: 8px; }
  .anahero__tel { display: flex; gap: 8px; margin-top: 12px; }
  .anahero__tel form { margin: 0; }
  .kahraman-nokta { display: flex; justify-content: center; }
  .hs2 { display: flex; gap: 8px; overflow-x: auto; margin-top: 16px; scrollbar-width: none; }
  .hs2::-webkit-scrollbar { display: none; }
  .hs2 .pill { flex-shrink: 0; }
  .sayfa-ana .sec { margin: 22px 0 10px; align-items: baseline; }
  .sayfa-ana .sec h2 { font-size: 16px; }
  .sayfa-ana .sec .more { font-size: 12px; color: var(--tx2); }
  .paketvitrin { display: flex; flex-direction: column; gap: 8px; }
  .paketvitrin > .pkc:nth-child(n+3) { display: none; }
  .paketvitrin > .pkc--one { order: -1; }   /* tuval AnaMobil: öne çıkan paket üstte */
  .paketvitrin .pkc { flex-direction: row; gap: 10px; padding: 10px; }
  .paketvitrin .pkc__g img, .paketvitrin .pkc__g .ph { width: 110px; height: 62px; border-radius: 8px; }
  .paketvitrin .pkc__b { padding: 0; gap: 2px; min-width: 0; }
  .paketvitrin .pkc a.t3 { font-size: 13px; }
  .paketvitrin .pkc__b > .muted { font-size: 12px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .paketvitrin .pkc__f { padding-top: 8px; margin-top: 0; }
  .paketvitrin .price { height: 30px; font-size: 13px; }
  .teklifler { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .teklifler::-webkit-scrollbar { display: none; }
  .teklifler .spot { width: 200px; height: auto; flex-shrink: 0; border: 1px solid var(--line); }
  .teklifler .spot > img, .teklifler .spot > .ph { height: 112px; }
  .teklifler .spot__in { position: static; background: none; padding: 10px; }
  .teklifler .spot__in .t3 { font-size: 13px; font-weight: 400; }
  .teklif-sira { display: contents; }
  .teklif-sira .deal { width: 200px; flex-shrink: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--line); background: var(--sur); border-radius: 14px; overflow: hidden; }
  .teklif-sira .deal > img, .teklif-sira .deal > .ph { width: 100%; height: 112px; border-radius: 0; }
  .teklif-sira .deal > div { padding: 10px; }
  .oneriler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .oneriler > :nth-child(n+3) { display: none; }
  .oneriler .pkc > img, .oneriler .pkc > .ph { height: 80px; }
  .oneriler .pkc__b { padding: 10px; gap: 2px; }
  .oneriler .t3 { font-size: 12px; }
  .gozat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .gozat .tile { height: 64px; padding: 8px; font-size: 12px; }
  .trendliste { padding: 0 12px; }
  .trendliste .tl { padding: 12px 0; border-radius: 0; gap: 14px; }
  .trendliste .tl + .tl { border-top: 1px solid var(--line); }
  .trendliste .tl.on { background: none; outline: 0; }
  .trendliste .tl > img, .trendliste .tl > .ph { width: 96px; height: 36px; border-radius: 6px; }
  .trendliste .t3 { font-size: 13px; font-weight: 400; }
  .trendliste .price { background: none; border: 0; padding: 0; height: auto; font-size: 13px; font-weight: 400; }
  .toplulukvitrin { grid-template-columns: 1fr; }
  .toplulukvitrin > :nth-child(n+2) { display: none; }
  .toplulukvitrin .com > img { height: 160px; }
  .istemcikart { background: linear-gradient(90deg, #0f1a26, #122a2e); }
}
@media (max-width: 600px) {
  .anahero .anahero__in { position: absolute; left: 14px; right: 14px; bottom: 16px; }
  .oneriler .pkc > .ph { height: 80px !important; }
  .trendliste .tl > div, .trendliste .tl > div > div { display: block; padding: 0; gap: 0; }
}
@media (max-width: 900px) { .cols { align-items: stretch; } }
/* Oyun sayfası katlanır bölümleri (masaüstünde düz başlık, telefonda ▾/▸) */
.bol > summary { list-style: none; cursor: default; }
.bol > summary::-webkit-details-marker { display: none; }
.bol .acilir::after { content: "▾"; }
.bol:not([open]) .acilir::after { content: "▸"; }
/* Oyun sayfası — telefon (tuval OyunMobil) */
@media (max-width: 600px) {
  .oyunarka { display: none; }
  .oyunhero4 { display: block; margin: 0 calc(-1 * var(--gutter)); height: 220px; border-radius: 0; }
  .oyunhero4 > img { width: 100%; height: 100%; object-fit: cover; }
  .oyunhero4 .in { position: absolute; left: 14px; right: 14px; bottom: 14px; }
  .oyunhero4 .t1 { font-size: 28px; }
  .sayfa-oyunsitesi .cols.mt16 { margin-top: 0; }
  .oyunserit { gap: 6px; margin-top: 6px; }
  .oyunserit .thumb { width: 88px; height: 50px; }
  .oyunbilgi { background: none; border: 0; border-radius: 0; overflow: visible; }
  .oyunbilgi > .pad { padding: 0; }
  .oyunbilgi .md.muted { margin-top: 4px; }
  .glr .k { width: 120px; }
  #onkayit .flex { flex-direction: column; align-items: stretch; }
  #onkayit .btn { width: 100%; }
  .buy { flex-direction: column; align-items: stretch; gap: 0; padding: 16px; }
  .buy__ic { display: none; }
  .buy .t2 { font-size: 16px !important; }
  .buy .pbox { margin: 12px 0 0; display: flex; justify-content: space-between; background: none; border: 0; padding: 0; }
  .buy .pbox .price { background: rgba(0,0,0,.35); border: 1px solid var(--line); height: 38px; }
  .oyunpaketler { padding: 2px 14px; }
  .oyunpaketler .list { margin-top: 0; }
  .oyunpaketler .dlc { gap: 10px; padding: 10px 0; flex-wrap: nowrap; }
  .oyunpaketler .dlc__nm { min-width: 0; line-height: 1.3; font-size: 13px; }
  .oyunpaketler .dlc__nm .white { font-weight: 400; }
  .oyunpaketler .dlc__nm .faint { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .oyunpaketler .price { background: none; border: 0; padding: 0; height: auto !important; font-size: 13px; }
  .oyunpaketler s { display: none; }
  .sayfa-oyunsitesi .sec { margin: 22px 0 10px; align-items: center; }
  .sayfa-oyunsitesi .sec h2 { font-size: 16px; }
  .sayfa-oyunsitesi .sec .more { font-size: 12px; }
  .oyunalt { margin-top: 0; }
  .oyunalt .main { display: flex; flex-direction: column; }
  .bol-hakkinda { order: 1; } .bol-haber { order: 2; } .bol-gereksinim { order: 3; }
  .bol > summary.sec { display: flex; }
  .bol > summary { cursor: pointer; }
  .acilir { margin-left: auto; color: var(--tx3); font-size: 12px; font-weight: 400; }
  .bol-hakkinda .desc > * { display: none; }
  .bol-hakkinda .desc > p:first-child { display: block; font-size: 13px; }
  .bol-haber .grid-2 { grid-template-columns: 1fr; gap: 8px; }
  .bol-haber .ev { gap: 10px; padding: 8px; }
  .bol-haber .ev > img, .bol-haber .ev > .ph { width: 100px !important; height: 56px !important; border-radius: 8px; }
  .bol-haber .ev .t3 { font-size: 13px; font-weight: 400; }
  .bol-haber .ev p { display: none; }
  .incelemeler:not(.acik) > :nth-child(n+3) { display: none; }
  .rbox { flex-direction: column; gap: 8px; padding: 12px; }
  .rbox__l { width: auto; }
}
.mm-baslik { padding: 8px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); }
@media (max-width: 600px) {
  .sayfa-oyunsitesi .strip, .ossekme { display: none; }
  .sec.tel-yalniz { display: flex; }
  .buy > div:not(.pbox) { flex: 0 0 auto; }
}
/* Ortak bileşen açılır menüleri (tuval Ustbar "ad ▾", MagazaSeridi "Yeni ve dikkat çekici ▾ / Kategoriler ▾", Altbilgi "Türkçe ▾") */
details.dd > summary { list-style: none; }
details.dd > summary::-webkit-details-marker { display: none; }
.kullanicidd .dd__menu { width: 220px; }
.kullanicidd .dd__menu a, .kullanicidd .dd__menu button.bare { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.kullanicidd .dd__menu a:hover, .kullanicidd .dd__menu button.bare:hover { background: rgba(255,255,255,.06); }
.kullanicidd .ok-asagi { font-size: 11px; }
@media (min-width: 901px) { .strip { overflow: visible; } }
.seritdd .dd__menu { left: 0; right: auto; width: 220px; }
.seritdd .dd__menu a, .dildd .dd__menu a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.seritdd .dd__menu a:hover, .dildd .dd__menu a:hover { background: rgba(255,255,255,.06); }
.dildd .dd__menu { top: auto; bottom: calc(100% + 6px); width: 160px; }
.ftr__bot .lang { text-decoration: none; }
@media (max-width: 600px) { .kullanicidd .ad, .kullanicidd .ok-asagi { display: none; } }

/* ---------- Erken satış paketleri (modül; tuval Oyun panosunun paket diliyle) ---------- */
.pkt__liste { gap: 16px; }
.pkt__kart { display: flex; flex-direction: column; }
.pkt__g { width: 100%; height: 150px; object-fit: cover; display: block; }
.pkt__b { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pkt__fiyat { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.pkt__kapsam { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tx2); }
.pkt__kapsam li { padding-left: 20px; position: relative; }
.pkt__kapsam li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); }
.pkt__f { margin-top: auto; padding-top: 6px; }
.pkt__f .paketform, .pkt__f .btn { width: 100%; }
.pkt__mx { min-width: 760px; }
.pkt__mx th { vertical-align: bottom; line-height: 1.35; color: var(--tx2); font-size: 12px; }
.pkt__mx td:first-child { white-space: nowrap; }
.pkt__mxfiyat td { border-bottom: 0; padding-top: 12px; }
/* Karşılaştırma tablosu telefonda: özellik sütunu sabit (satır kırar), paket sütunları yana kayar — önce yalnız özellik
   sütunu görünüyordu, paketler ekran dışındaydı (Ekrem 29 Eylül: "mobilde paketlerde sorun var"). */
@media (max-width: 760px) {   /* temel .pkt__mx kurallarından SONRA: aynı özgüllükte sonraki kazanır */
  .pkt__mx { table-layout: fixed; width: 600px; min-width: 600px; }   /* otomatik düzen hücre genişliğini yok sayıyordu */
  .pkt__mx th:first-child, .pkt__mx td:first-child { position: sticky; left: 0; z-index: 1; background: var(--sur); width: 136px; white-space: normal; overflow-wrap: anywhere; box-shadow: 1px 0 0 var(--line); }
  .pkt__mx th, .pkt__mx td { overflow-wrap: anywhere; }
  .kaydir:has(> .pkt__mx) { padding-left: 0; padding-right: 0; }   /* kayan sütun kartın iç boşluğunda görünmesin */
  .pkt__mx th:first-child, .pkt__mx td:first-child { padding-left: 16px; }
}
.pkt__adim { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(76,194,255,.14); color: var(--acc); font-weight: 700; }
.pkt__sss details { padding: 14px 16px; }
.pkt__sss details + details { border-top: 1px solid var(--line); }
.pkt__sss summary { cursor: pointer; color: #fff; font-weight: 600; font-size: 14px; list-style: none; display: flex; gap: 12px; }
.pkt__sss summary::-webkit-details-marker { display: none; }
.pkt__sss summary::after { content: "▾"; margin-left: auto; color: var(--tx3); }
.pkt__sss details[open] summary::after { content: "▴"; }
.pkt__sss p { margin-top: 8px; }
.pkt__ayrbag { display: inline-block; margin-top: 2px; }
/* Hesap › Referans sistemi kartı */
.ref-kod { font-size: 20px; letter-spacing: .12em; font-weight: 600; }
.ref-baglanti { word-break: break-all; }
.pkt__ayrintilar .desc { margin-top: 10px; font-size: 14px; }
.pkt__ayrintilar .desc h3 { font-size: 14px; margin: 18px 0 6px; letter-spacing: .02em; }
.pkt__ayrintilar .desc h3:first-child { margin-top: 4px; }
.pkt__ayrintilar .desc ul { margin: 0 0 12px; padding-left: 20px; }
.pkt__ayrintilar .desc p { margin: 0 0 10px; }
@media (max-width: 600px) { .pkt__liste { grid-template-columns: 1fr; } }
.kahraman-nokta { display: flex; justify-content: center; margin-top: 14px; }
@media (max-width: 600px) { .kahraman-nokta { margin-top: 12px; } }
/* Oyun sayfası (tuval Oyun): ekmek kırıntısı sekme çubuğunun üstünde, inceleme düğmeleri */
.oyunkirinti { margin: 14px 0 2px; }
.sbtn { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--tx2); font-size: 12px; border: 0; cursor: pointer; font-family: inherit; }
.sbtn:hover { color: #fff; }
.sbtn.on, .sbtn:has(input:checked) { background: rgba(76,194,255,.2); color: #fff; }
.isiradd .dd__menu { width: 180px; }
.isiradd .dd__menu a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.incelemealan .rbox form { display: inline-flex; margin: 0; }
/* Mağaza araması (tuval Arama): fiyat kaydırıcısı, "Sırala" açılır seçimi, etiket başlığı */
.aralik { position: relative; height: 18px; margin: 14px 8px 8px; }
.aralik::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); }
.aralik input[type=range] { position: absolute; left: -8px; top: 0; width: calc(100% + 16px); height: 18px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.aralik input[type=range]::-webkit-slider-runnable-track { background: transparent; }
.aralik input[type=range]::-moz-range-track { background: transparent; }
.aralik input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--acc); border: 3px solid #141d28; cursor: pointer; }
.aralik input[type=range]::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: var(--acc); border: 3px solid #141d28; cursor: pointer; }
.siraladd .dd__menu { width: 200px; }
.siraladd .dd__menu a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.siraladd .dd__menu a.on { color: #fff; background: rgba(76,194,255,.12); }
.fbox h3 { display: flex; }
.fbox h3 span { margin-left: auto; font-weight: 400; color: var(--tx3); font-size: 12px; }
.fbox h3 span a { color: var(--tx3); }


/* =====================================================================================================
   Yönetim paneli — tuval YonetimMenu bileşeni + Yonetim* panoları. .ash/.atb/.act/.kpi/.drop/.dr tuvalin
   tasarım sisteminde (ds/emaplay.css) tanımlı; menü (.sb) bileşenin kendi stili. Sayfaya özel kurallar
   `.yon-<sayfa>` (kabukta .act'in sınıfı) altında.
   ===================================================================================================== */
.ash { display: flex; min-height: 100vh; }
.atb { height: 60px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 28px; background: rgba(15,23,32,.6); flex-shrink: 0; }
.act { padding: 24px 28px; flex: 1; }
.kpi { padding: 16px 18px; }
.kpi b { display: block; font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-top: 4px; }
.kpi span { font-size: 12px; color: var(--tx3); }
.kpi .dl { font-size: 12px; margin-top: 4px; }
.drop { border: 1px dashed var(--line2); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--tx3); font-size: 13px; text-align: center; padding: 14px; }
.dr { width: 14px; color: var(--tx3); font-size: 14px; cursor: grab; flex-shrink: 0; }
div.lang { display: inline-flex; gap: 4px; }
div.lang > span, div.lang > a, div.lang > button { padding: 3px 8px; border-radius: 6px; font-size: 11px; background: rgba(255,255,255,.06); color: var(--tx2); border: 0; font-family: inherit; cursor: pointer; }
div.lang > .on { background: var(--acc); color: #03131d; }
body.yonetim > .ash { flex: 1 0 auto; }
.yonetim .sb { width: 250px; flex-shrink: 0; background: var(--bg2); border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 1px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.yonetim .sb .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 16px; }
.yonetim .sb .grp { font-size: 11px; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: .08em; padding: 14px 10px 6px; }
.yonetim .sb a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--tx2); font-size: 13px; line-height: 1.3; }
.yonetim .sb a:hover { background: rgba(255,255,255,.04); color: #fff; }
.yonetim .sb a.on { background: rgba(76,194,255,.12); color: #fff; }
.yonetim .sb a.sub { padding-left: 22px; font-size: 12.5px; }
.yonetim .sb a small { margin-left: auto; font-size: 11px; color: var(--tx3); }
.yonetim .sb a small.warn { color: var(--warn); }
.yonetim .sb .ft { margin-top: auto; padding: 12px 10px 0; font-size: 11px; color: var(--tx3); line-height: 1.6; border-top: 1px solid var(--line); }
.yon-ana { min-width: 0; }
/* Pano (tuval YonetimPano) */
.yon-pano .chart { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding: 0 4px; }
.yon-pano .chart .gun { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.yon-pano .chart i { flex: 1; background: linear-gradient(180deg, var(--acc), rgba(76,194,255,.3)); border-radius: 6px 6px 2px 2px; display: block; min-height: 0; }
.yon-pano .chart i.t { background: linear-gradient(180deg, var(--teal), rgba(61,224,213,.3)); }
.yon-pano .qa { display: flex; flex-direction: column; gap: 8px; }
.yonetim a.row { color: inherit; }
.yonetim a.row:hover .md { color: #fff; }
.yonetim .table td a:not(.btn):not(.chip) { color: inherit; }
.yonetim .table td a.eylem:not(.btn):not(.chip) { color: var(--acc); } .yonetim .table td a.eylem:not(.btn):not(.chip):hover { color: #fff; }
.yonetim .table td a:not(.btn):not(.chip):hover { color: #fff; text-decoration: underline; }
/* Oyunlar (tuval YonetimOyunlar) */
.yon-oyunlar .g { display: flex; gap: 16px; padding: 16px; align-items: center; }
.yon-oyunlar .g > img, .yon-oyunlar .g > .ph { width: 120px; height: 68px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.yon-oyunlar .g .st { display: flex; flex-direction: row; gap: 18px; padding: 0; font-size: 12px; color: var(--tx3); margin-top: 6px; flex-wrap: wrap; }
.yon-oyunlar .g .st b { color: #fff; font-weight: 600; }
.yon-oyunlar .g .st b.ok { color: var(--ok); } .yon-oyunlar .g .st b.warn { color: var(--warn); } .yon-oyunlar .g .st b.bad { color: var(--bad); }
.yon-oyunlar .stp { display: flex; gap: 12px; padding: 12px 0; align-items: flex-start; }
.yon-oyunlar .stp b { width: 24px; height: 24px; border-radius: 50%; background: var(--acc); color: #03131d; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.yon-oyunlar .stp.off b { background: rgba(255,255,255,.1); color: var(--tx2); }
.yon-oyunlar .stp.off { opacity: 1; }   /* sitedeki .stp.off (ödeme adımları) soluklaştırıyor; tuval YonetimOyunlar'da yalnız numara gri */
/* Yönetim formları ve listeleri (içerik motoru; tuval YonetimIcerik) */
.yonetim .stabs { display: flex; flex-wrap: wrap; gap: 6px; }
.yonetim .im { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; display: block; }
.yonetim .ph.im { display: block; }
.yonetim td.dr { width: 14px; padding-right: 0; user-select: none; }
.yonetim td.dr:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; border-radius: 4px; }
.yonetim tr.surukleniyor { opacity: .45; }
.yonetim tr.secili > td { background: rgba(76,194,255,.06); }
.yonetim table.kaydediliyor { opacity: .7; }
.yonetim table.kayit-hatasi { outline: 1px solid var(--bad); }
.yonetim .dil-cift { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yonetim .dil-etiket { display: block; font-size: 10px; color: var(--tx3); margin-bottom: 2px; letter-spacing: .04em; }
.yonetim .hd .dil-cift { display: block; }
.yonetim .hd .dil-etiket { display: none; }
.yonetim .hd:not([data-dil="en"]) .d-en { display: none; }
.yonetim .hd[data-dil="en"] .d-tr { display: none; }
.yonetim .ygorsel { display: flex; flex-direction: column; gap: 6px; }
.yonetim .ygorsel .drop { cursor: pointer; }
.yonetim .ygorsel .drop:hover { border-color: var(--acc); color: var(--tx2); }
.yonetim details.yetenekler > summary { cursor: pointer; list-style: none; line-height: 1.7; }
.yonetim details.yetenekler > summary::-webkit-details-marker { display: none; }
.yonetim .ayar-izgara { align-items: start; }
.yonetim .field > label { display: block; }
.yonetim div.lang button.on, .yonetim span.lang button.on { background: var(--acc); color: #03131d; }
.yonetim span.lang { display: inline-flex; gap: 4px; }
.yonetim span.lang > button { padding: 3px 8px; border-radius: 6px; font-size: 11px; background: rgba(255,255,255,.06); color: var(--tx2); border: 0; font-family: inherit; cursor: pointer; }
.yonetim details.diger-alanlar > summary { cursor: pointer; color: var(--acc); list-style: none; }
.yonetim details.diger-alanlar > summary::-webkit-details-marker { display: none; }
.yonetim details.diger-alanlar > summary::after { content: " ▾"; }
.yonetim details.diger-alanlar[open] > summary::after { content: " ▴"; }
.yonetim .hd .yalan > .faint.sm, .yonetim .hd .ygorsel > .im { display: none; }   /* tuval Hızlı düzenle: notsuz, önizlemesiz (not etiketin ipucunda) */
/* Haber editörü (tuval YonetimHaber) */
.yonetim .tbar { display: flex; gap: 4px; padding: 6px; border: 1px solid var(--line2); border-bottom: 0; border-radius: 10px 10px 0 0; background: rgba(255,255,255,.03); flex-wrap: wrap; }
.yonetim .tbar button { padding: 4px 8px; border-radius: 6px; font-size: 12px; color: var(--tx2); background: rgba(255,255,255,.05); border: 0; font-family: inherit; cursor: pointer; }
.yonetim .tbar button:hover, .yonetim .tbar button.on { color: #fff; background: rgba(76,194,255,.18); }
.yonetim .ed { border-radius: 0 0 10px 10px; height: 260px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.6; }
.yonetim .pv img, .yonetim .pv > .ph { width: 100%; height: 140px; object-fit: cover; display: block; }
.yonetim .md-onizleme .desc { font-size: 14px; line-height: 1.7; color: var(--tx2); }
.yonetim .md-onizleme .desc img { max-width: 100%; border-radius: 10px; margin: 8px 0; }
.yonetim .md-onizleme .desc blockquote { border-left: 3px solid var(--line2); margin: 8px 0; padding-left: 12px; color: var(--tx3); }
/* Paketler (tuval YonetimPaketler) */
.yon-paketler .table .im { width: 56px; height: 32px; }
.yon-paketler .mx td { position: relative; }
.yon-paketler .mx .hc { width: 100%; height: auto; margin: 0; padding: 2px 4px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; text-align: center; }
.yon-paketler .mx th:first-child, .yon-paketler .mx td:first-child { width: 31%; }
.yon-paketler .mx td:not(:first-child), .yon-paketler .mx th:not(:first-child) { padding-left: 2px; padding-right: 2px; }
.yon-paketler .mx td:not(:first-child) .hc { padding-left: 0; padding-right: 0; }
.yon-paketler .mx td:first-child .hc { text-align: left; padding-left: 0; }
.yon-paketler .mx textarea.hc { display: block; resize: none; overflow: hidden; line-height: 1.45; min-height: 0; }
.yon-paketler .mx .hc:hover { background: rgba(255,255,255,.03); }
.yon-paketler .mx .hc:focus { outline: 1px solid var(--acc); background: rgba(255,255,255,.05); }
.yon-paketler .mx .hc::placeholder { color: var(--tx3); }
.yon-paketler .mx .tutamak { position: absolute; left: -12px; top: 50%; transform: translateY(-50%); font-size: 10px; letter-spacing: -1px; color: var(--tx3); cursor: grab; opacity: 0; user-select: none; }
.yon-paketler .mx tr:hover .tutamak { opacity: .8; }
.yon-paketler .toplu > details > summary.btn { display: flex; width: 100%; cursor: pointer; }
.yon-paketler .toplu > details[open] > summary.btn { border-color: var(--acc); color: #fff; }
/* Paket düzenle (tuval YonetimPaket). .ic burada içerik satırı: sitedeki .ic (ikon kutusu) kuralı sıfırlanır. */
.yon-paket .ic { display: flex; align-items: center; gap: 8px; padding: 8px 0; width: auto; height: auto; border-radius: 0; background: none; flex-shrink: 1; }
.yon-paket .ic .input { height: 34px; }
.yon-paket .ic .icad { display: flex; flex-direction: column; justify-content: center; min-height: 34px; flex-shrink: 0; }
.yon-paket .ic .icad .hc { width: 100%; border: 0; background: transparent; color: var(--tx2); font: inherit; font-size: 13px; line-height: 1.4; padding: 0; resize: none; overflow: hidden; border-radius: 4px; }
.yon-paket .ic .icad .hc::placeholder { color: var(--tx3); }
.yon-paket .ic .icad .hc:hover { background: rgba(255,255,255,.03); }
.yon-paket .ic .icad .hc:focus { outline: 1px solid var(--acc); background: rgba(255,255,255,.05); }
.yon-paket .ic .icad > .faint, .yon-paket .ic .icad > .bad { font-size: 11px; line-height: 1.3; }
.yon-paket .ic .icad select { margin-top: 4px; height: 28px; }
.yon-paket .ic .icad .oran { width: 38px; height: 18px; padding: 0 4px; border: 1px solid var(--line2); border-radius: 4px; background: transparent; color: var(--tx); font: inherit; font-size: 11px; text-align: right; }
.yon-paket .ic .icad .oran-yeni { width: 76px; margin-top: 4px; height: 28px; }
.yon-paket .kaldir { cursor: pointer; white-space: nowrap; }
.yon-paket .kaldir input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.yon-paket .kaldir .k2 { display: none; }
.yon-paket .kaldir:has(input:checked) .k1 { display: none; }
.yon-paket .kaldir:has(input:checked) .k2 { display: inline; color: var(--acc); }
.yon-paket .kaldir:has(input:focus-visible) { outline: 2px solid var(--acc); border-radius: 4px; }
.yon-paket .ic:has(.kaldir input:checked) > :not(.kaldir) { opacity: .4; text-decoration: line-through; }
.yon-paket .pv img, .yon-paket .pv > .ph { height: 150px; }
.yon-paket textarea.input { resize: vertical; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.yon-paket input[type="datetime-local"] { color-scheme: dark; }
.yon-paket .drop { height: 150px; cursor: pointer; }
.yon-paket .drop:hover { border-color: var(--acc); color: var(--tx2); }
.yon-paket details.gsec { display: inline; }
.yon-paket details.gsec > summary { display: inline; cursor: pointer; }
.yon-paket details.gsec[open] > summary { color: #fff; }
/* Ana sayfa vitrini (tuval YonetimVitrin) */
.yon-vitrin .sec-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.yon-vitrin .sec-row .toggle { margin-left: 0; }
.yon-vitrin .sec-row .toggle.ml { margin-left: auto; }
.yon-vitrin .dr { cursor: grab; color: var(--tx3); user-select: none; font-size: 12px; letter-spacing: -1px; }
.yon-vitrin .dr:focus-visible { outline: 2px solid var(--acc); border-radius: 4px; }
.yon-vitrin .surukleniyor { opacity: .45; }
.yon-vitrin .sl { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.yon-vitrin .sl img { width: 120px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.yon-vitrin .sl.secili { background: rgba(76,194,255,.05); border-radius: 10px; }
.yon-vitrin .gozat-satir { padding-left: 10px; }
.yon-vitrin details.gsec { display: inline; }
.yon-vitrin details.gsec > summary { display: inline; cursor: pointer; }
.yon-vitrin input[type="datetime-local"] { color-scheme: dark; }
/* Metinler ve görseller (tuval YonetimMetinler) */
.yonetim .metin-tablo td.k { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--acc); word-break: break-all; }
.yonetim .metin-tablo tr.chg > td { background: rgba(61,224,213,.04); }
.yonetim .gg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.yonetim .gg .gi { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; color: inherit; }
.yonetim .gg .gi img, .yonetim .gg .gi .ph { width: 100%; height: 100px; object-fit: cover; border-radius: 0; }
.yonetim .gg .gi .b { padding: 8px 10px; font-size: 12px; }


/* Yönetim · Başarımlar ve kartlar (tuval YonetimBasarimlar; panonun kendi .ic/.k/.kart kuralları, çakışmasın diye bsr- önekli) */
.yon-basarimlar .bsr-ic { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, #2b4a63, #111a24); border: 1px solid var(--line2); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: var(--tx3); overflow: hidden; }
.yon-basarimlar .bsr-ic img { width: 100%; height: 100%; object-fit: cover; }
.yon-basarimlar .bsr-k { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--acc); }
.yon-basarimlar .bsr-kart { width: 100%; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; }
.yon-basarimlar .bsr-kart img { width: 100%; height: 100%; object-fit: cover; }
.yon-basarimlar a.bsr-kartk { display: block; color: inherit; }
.yon-basarimlar a.bsr-kartk:hover .bsr-kart { border-color: var(--acc); }
.yon-basarimlar tr.secili td { background: rgba(76,194,255,.05); }
.yon-basarimlar .bsr-sv .input { margin: 0; }
.yon-basarimlar .bsr-odul summary { cursor: pointer; list-style: none; }
.yon-basarimlar .bsr-grafik { display: flex; align-items: flex-end; gap: 3px; height: 120px; border-bottom: 1px solid var(--line); }
.yon-basarimlar .bsr-grafik span { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.yon-basarimlar .bsr-grafik span:hover i { background: var(--teal); }
.yon-basarimlar .bsr-grafik i { display: block; width: 100%; background: var(--acc); border-radius: 3px 3px 0 0; }

/* Yönetim · Kategoriler ve etiketler (tuval YonetimEtiketler) */
.yon-etiketler .kt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.yon-etiketler .kt .sw { width: 56px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.yon-etiketler .kt .dr { cursor: grab; }
.yon-etiketler .kt form { margin: 0; }

/* Oyun sayfası etiket önerisi ("+" açılır kutusu) */
.etiketoner { position: relative; display: inline-block; }
.etiketoner > summary { list-style: none; cursor: pointer; }
.etiketoner > summary::-webkit-details-marker { display: none; }
.etiketoner__kutu { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 320px; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.etiketoner__kutu form { margin: 0; }
.etiketoner__kutu button.chip { cursor: pointer; border: 0; font: inherit; }
.toggle.dis { opacity: .5; cursor: not-allowed; }

/* Yönetim · Kuponlar ve kodlar (tuval YonetimKuponlar) */
.yon-kuponlar .code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #fff; letter-spacing: .04em; }

/* Yönetim · Puan dükkânı (tuval YonetimPuan) */
.yon-puan .im { width: 56px; height: 32px; object-fit: cover; border-radius: 6px; display: inline-block; }

/* Yönetim · Siparişler (tuval YonetimSiparis) */
.yon-siparisler .zc { display: flex; flex-direction: column; gap: 0; }
.yon-siparisler .zc div { display: flex; gap: 12px; font-size: 13px; padding: 6px 0; }
.yon-siparisler .zc i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); margin-top: 5px; flex-shrink: 0; }
.yon-siparisler .zc i.w { background: var(--warn); } .yon-siparisler .zc i.g { background: var(--tx3); } .yon-siparisler .zc i.b { background: var(--bad); }
.yon-siparisler .tr.on td { background: rgba(76,194,255,.08); }
.yon-siparisler details > summary { list-style: none; } .yon-siparisler details > summary::-webkit-details-marker { display: none; }

/* Yönetim · İadeler (tuval YonetimIadeler) */
.yon-iadeler .tr.on td { background: rgba(76,194,255,.08); }
.yon-iadeler .kk { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; }
.yon-iadeler .kk i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-style: normal; flex-shrink: 0; }
.yon-iadeler .kk i.y { background: rgba(74,222,128,.18); color: var(--ok); } .yon-iadeler .kk i.n { background: rgba(248,113,113,.18); color: var(--bad); }
.yon-iadeler .kk i.u { background: rgba(251,191,36,.18); color: var(--warn); } .yon-iadeler .kk i.g { background: rgba(255,255,255,.06); color: var(--tx3); }
.yon-iadeler .kararlar .btn { width: 100%; justify-content: center; }
.yon-iadeler .kararlar details > summary { list-style: none; } .yon-iadeler .kararlar details > summary::-webkit-details-marker { display: none; }

/* Yönetim · Faturalar (tuval YonetimFaturalar): on sütun gerçek veriyle karta sığsın */
.yon-faturalar .table th, .yon-faturalar .table td { padding-left: 8px; padding-right: 8px; }
.yon-faturalar .table th:first-child, .yon-faturalar .table td:first-child { padding-left: 12px; }

/* Yönetim · Ön kayıtlar (tuval YonetimOnKayit): dönüşüm hunisi */
.yon-onkayit .fun { display: flex; flex-direction: column; gap: 6px; }
.yon-onkayit .fun div { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.yon-onkayit .fun em { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.yon-onkayit .fun i { height: 22px; border-radius: 6px; background: linear-gradient(90deg, var(--teal), rgba(61,224,213,.3)); display: block; }
.yon-onkayit .fun span { width: 110px; flex-shrink: 0; color: var(--tx2); }
.yon-onkayit .fun b { width: 44px; flex-shrink: 0; text-align: right; color: #fff; font-weight: 600; }

/* Yönetim · Kullanıcı ayrıntısı (tuval YonetimKullanici) */
.yon-kullanici .kararlar .btn, .yon-kullanici .kararlar summary.btn { width: 100%; justify-content: center; }
.yon-kullanici details > summary { list-style: none; cursor: pointer; } .yon-kullanici details > summary::-webkit-details-marker { display: none; }
.yon-kullanici summary.baglanti { display: inline; color: var(--acc); } .yon-kullanici summary.baglanti:hover { color: #fff; }
.yon-kullanici details.ml { position: relative; }
.yon-kullanici .li .ic { width: 38px; height: 38px; border-radius: 8px; background: linear-gradient(135deg, #2a4a6e, #1a2a3e); flex-shrink: 0; }

/* Yönetim · Destek talepleri (tuval YonetimDestek) */
.yon-destek .tk { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; font-size: 13px; color: var(--tx); text-decoration: none; }
.yon-destek .tk:hover { background: rgba(255,255,255,.03); }
.yon-destek .tk.on { background: rgba(76,194,255,.1); outline: 1px solid rgba(76,194,255,.35); }
.yon-destek .tk .h { display: flex; gap: 8px; align-items: center; } .yon-destek .tk .h b { color: #fff; font-weight: 600; }
.yon-destek .tk .h span:last-child { margin-left: auto; color: var(--tx3); font-size: 11px; }
.yon-destek .msg { display: flex; gap: 12px; padding: 12px 0; }
.yon-destek .msg .b { flex: 1; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.yon-destek .msg.me .b { background: rgba(76,194,255,.1); }
.yon-destek .msg.int .b { background: rgba(251,191,36,.08); border: 1px dashed rgba(251,191,36,.35); }
.yon-destek .msg.sis .b { background: transparent; border: 1px solid var(--line); color: var(--tx2); }
.yon-destek .msg .m { font-size: 11px; color: var(--tx3); margin-bottom: 4px; }
.yon-destek label.secim { cursor: pointer; }
.yon-destek .kararlar .btn, .yon-destek .kararlar summary.btn { width: 100%; justify-content: center; }
.yon-destek details > summary { list-style: none; cursor: pointer; } .yon-destek details > summary::-webkit-details-marker { display: none; }

/* Yönetim · Topluluk moderasyonu (tuval YonetimModerasyon) */
.yon-moderasyon .rp { display: flex; gap: 12px; padding: 12px 0; font-size: 13px; align-items: flex-start; border-bottom: 1px solid var(--line); }
.yon-moderasyon .rp:last-child { border-bottom: 0; }
.yon-moderasyon .rp .pv { width: 120px; height: 56px; border-radius: 8px; flex-shrink: 0; object-fit: cover; }
.yon-moderasyon .rp .q { color: var(--tx2); font-style: italic; }
.yon-moderasyon details > summary { list-style: none; cursor: pointer; } .yon-moderasyon details > summary::-webkit-details-marker { display: none; }
.yon-moderasyon summary.baglanti { color: var(--acc); }

/* Yönetim · Yardım makaleleri (tuval YonetimYardim) */
.yon-yardim .tree a { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--tx2); }
.yon-yardim .tree a.on { background: rgba(76,194,255,.12); color: #fff; }
.yon-yardim .tree a small { margin-left: auto; color: var(--tx3); font-size: 11px; }
.yon-yardim .tree .sub { padding-left: 22px; font-size: 12.5px; }
.yon-yardim .ed { border-radius: 10px; height: 220px; font-size: 12.5px; }
.yon-yardim select.konu { display: inline-block; width: auto; height: 26px; padding: 0 24px 0 8px; font-size: 12px; margin: 0 2px; vertical-align: middle; }
.yon-yardim .list .row .dr { cursor: grab; user-select: none; letter-spacing: -1px; font-size: 12px; }
.yon-yardim .list .row .dr:focus-visible { outline: 2px solid var(--acc); border-radius: 4px; }
.yon-yardim .list .row.surukleniyor { opacity: .45; }
.yon-yardim .list.kaydediliyor { opacity: .7; } .yon-yardim .list.kayit-hatasi { outline: 1px solid var(--bad); }
.yon-yardim .list .row a.md { color: inherit; }
.yon-yardim .md-onizleme .makale { font-size: 14px; }

/* Uyarı bandı (Yönetim · Ayarlar "Bakım ve uyarı bandı"): bilgi mavi, uyarı sarı, kritik kırmızı */
.ubant { font-size: 13px; line-height: 1.5; padding: 8px 0; text-align: center; border-bottom: 1px solid var(--line); }
.ubant--info { background: rgba(76,194,255,.12); color: #cfeeff; }
.ubant--warn { background: rgba(251,191,36,.14); color: #fde7a8; }
.ubant--critical { background: rgba(248,113,113,.16); color: #ffd0d0; }

/* Yönetim · Ayarlar (tuval YonetimAyarlar) */
.yon-ayarlar .sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.yon-ayarlar .sec-h .t3 { font-size: 15px; }
.yon-ayarlar .field > .kdv { display: flex; align-items: center; gap: 0; cursor: text; }
.yon-ayarlar .kdv input { width: 2.2ch; background: transparent; border: 0; color: inherit; font: inherit; padding: 0; text-align: left; -moz-appearance: textfield; }
.yon-ayarlar .kdv input::-webkit-inner-spin-button, .yon-ayarlar .kdv input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.yon-ayarlar .kdv input:focus { outline: none; } .yon-ayarlar .kdv:focus-within { border-color: var(--acc); }
.yon-ayarlar details.satici > summary { list-style: none; cursor: pointer; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yon-ayarlar details.satici > summary::-webkit-details-marker { display: none; }
.yon-ayarlar details.satici > summary.yer { color: var(--tx3); }
.yon-ayarlar .aralik { display: flex; align-items: center; gap: 6px; } .yon-ayarlar .aralik input { flex: 1; min-width: 0; }
.yon-ayarlar .aralik span { color: var(--tx3); }
.yon-ayarlar select.chipsec { margin-left: auto; border: 0; font-family: inherit; cursor: pointer; }
.yon-ayarlar .opt:has(input:disabled) { cursor: default; }
.toggle:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* Yönetim · Yasal metinler ve e-posta şablonları (tuval YonetimYasal) */
.yon-yasal .tt { font-size: 11px; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: .08em; }
.yon-yasal .doc { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--tx2); }
.yon-yasal .doc.on { background: rgba(76,194,255,.12); color: #fff; }
.yon-yasal .doc small { margin-left: auto; font-size: 11px; color: var(--tx3); white-space: nowrap; }
.yon-yasal .ed { border-radius: 10px; height: 300px; font-size: 12.5px; resize: vertical; }
.yon-yasal .var { display: inline-block; padding: 1px 6px; border-radius: 5px; background: rgba(61,224,213,.14); color: var(--teal); font-family: ui-monospace, Menlo, monospace; font-size: 11px; margin: 2px; border: 0; cursor: pointer; }
.yon-yasal .var:hover { background: rgba(61,224,213,.24); }
.yon-yasal .fark { font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.55; max-height: 420px; overflow: auto; }
.yon-yasal .fark > div { white-space: pre-wrap; padding: 0 6px; color: var(--tx3); }
.yon-yasal .fark > .ek { background: rgba(61,224,213,.12); color: #b6fff8; }
.yon-yasal .fark > .sil { background: rgba(248,113,113,.12); color: #ffc9c9; }
.yon-yasal iframe.posta { width: 100%; height: 540px; border: 0; border-radius: 10px; background: #0b1117; display: block; }
.yon-yasal .md-onizleme .ysl .legal { max-height: 520px; overflow: auto; }
.yonetim .atb > .ml > .lang { display: inline-flex; gap: 4px; align-items: center; }
.yonetim .atb > .ml > .lang > button { padding: 3px 8px; border-radius: 6px; font-size: 11px; background: rgba(255,255,255,.06); color: var(--tx2); border: 0; font-family: inherit; cursor: pointer; }
.yonetim .atb > .ml > .lang > button.on { background: var(--acc); color: #03131d; }

/* Yönetim · Roller ve yetkiler (tuval YonetimRoller) */
.yon-roller .mx input[type="checkbox"] { accent-color: var(--acc); width: 15px; height: 15px; }
.yon-roller .mx th .sil { border: 0; background: none; color: var(--tx3); cursor: pointer; font-size: 13px; padding: 0 2px; }
.yon-roller .mx th .sil:hover:not(:disabled) { color: var(--bad); } .yon-roller .mx th .sil:disabled { opacity: .35; cursor: not-allowed; }
.yon-roller button.lnk { border: 0; background: none; padding: 0; color: var(--acc); font: inherit; font-size: 13px; cursor: pointer; }
.yon-roller button.lnk.faint { color: var(--tx3); }
.yon-roller select.chipsec { margin-left: auto; border: 0; font-family: inherit; cursor: pointer; }
.yon-roller .tg.ipler { padding-top: 0; }
.yon-roller .table td form select { height: 30px; font-size: 12px; }

/* Yönetim · Raporlar (tuval YonetimRaporlar) */
.yon-raporlar .chart { display: flex; align-items: flex-end; gap: 3px; height: 170px; padding: 0 4px; }
.yon-raporlar .chart i { flex: 1; min-width: 2px; background: linear-gradient(180deg, var(--acc), rgba(76,194,255,.3)); border-radius: 4px 4px 1px 1px; display: block; }
.yon-raporlar .chart i.t { background: linear-gradient(180deg, var(--teal), rgba(61,224,213,.3)); }
.yon-raporlar .chart i.z { min-height: 2px; opacity: .3; }   /* satışsız gün: taban çizgisi */
.yon-raporlar .line { height: 120px; position: relative; border-bottom: 1px solid var(--line); }
.yon-raporlar .line svg { width: 100%; height: 100%; display: block; }
.yon-raporlar .line .bos-cizgi { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; }
.yonetim .atb select.pill { appearance: none; border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.yonetim .atb select.pill.on { background: rgba(255,255,255,.09); color: #fff; }
.yonetim .atb select.pill option { background: var(--sur2); color: var(--tx); }
.yonetim .atb .btn.on { border-color: var(--acc); color: #fff; }
@media print {
  .yonetim .sb, .yonetim .atb .ml { display: none !important; }
  .yonetim .ash { display: block; } body.yonetim { background: #0b1117; }
}

/* Yönetim · Denetim günlüğü (tuval YonetimDenetim) */
.yon-denetim .k { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.yon-denetim .diff { font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.7; background: rgba(0,0,0,.3); border-radius: 10px; padding: 12px; overflow-wrap: anywhere; }
.yon-denetim .diff .m { color: var(--bad); } .yon-denetim .diff .p { color: var(--ok); }
.yon-denetim select.pill { appearance: none; border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.yon-denetim select.pill.on { background: rgba(255,255,255,.09); color: #fff; }
.yon-denetim select.pill option { background: var(--sur2); color: var(--tx); }
.yon-denetim .table { table-layout: fixed; width: 100%; }
.yon-denetim .table td { vertical-align: top; overflow-wrap: anywhere; }

/* Yönetim · Sistem sağlığı (tuval YonetimSistem) */
.yon-sistem .hc { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.yon-sistem .hc i { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); flex-shrink: 0; box-shadow: 0 0 8px rgba(74,222,128,.6); }
.yon-sistem .hc i.w { background: var(--warn); box-shadow: 0 0 8px rgba(251,191,36,.6); }
.yon-sistem .hc i.b { background: var(--bad); box-shadow: 0 0 8px rgba(248,113,113,.6); }
.yon-sistem .hc .n { color: #fff; font-weight: 600; }
.yon-sistem .hc .d { font-size: 12px; color: var(--tx3); }
.yon-sistem .k { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.yon-sistem tr.hatali { background: rgba(248,113,113,.05); }
.yon-sistem tr.ayr { display: none; }
.yon-sistem tr.ayr:target { display: table-row; background: rgba(255,255,255,.02); }
.yon-sistem .dugmeler form { display: contents; }
.yon-sistem details.geri > summary { display: flex; justify-content: center; cursor: pointer; }
.yon-sistem details.geri ol { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.yon-sistem details.gecmis > summary { cursor: pointer; text-align: center; }
.yon-sistem details.gecmis form { display: flex; }
.atb details.kanal { position: relative; }
.atb details.kanal > form { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 300px; text-align: left; }

/* Yönetim · Ema Play duyuruları */
.yon-duyurular .baglantidugme.sil { color: var(--bad); font-weight: 400; margin-left: 10px; }
.yon-duyurular .baglantidugme.sil:hover { color: #fff; }

/* Yönetim · Motor ve SDK sürümleri, oyun anahtarları */
.yon-araclar pre.komut { margin: 0; padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; line-height: 1.7; color: var(--tx2); white-space: pre-wrap; word-break: break-all; }
.yon-araclar .table .input-sm { width: 100%; }
.yon-araclar .k { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

/* Yönetim · Oyun kataloğu (/yonetim/oyun/<slug>) */
.yon-katalog .tabs { align-items: center; }
.yon-katalog .k { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.yon-katalog .turler { display: flex; flex-wrap: wrap; gap: 6px; }
.yon-katalog .turler .chip { cursor: pointer; user-select: none; position: relative; }
.yon-katalog .turler .chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.yon-katalog .turler .chip:has(input:checked) { background: rgba(76,194,255,.14); color: #fff; border-color: rgba(76,194,255,.4); }
.yon-katalog .turler .chip:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.yon-katalog .gorseller { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.yon-katalog .gorsel .kutu { aspect-ratio: 4 / 3; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.yon-katalog .gorsel .kutu img { width: 100%; height: 100%; object-fit: contain; }
.yon-katalog .gorsel .kutu.eksik { border-style: dashed; }
.yon-katalog .gorsel .tam { width: 100%; justify-content: center; }
.yon-katalog .gorsel details > summary { cursor: pointer; }
.yon-katalog .galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.yon-katalog .galeri img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.yon-katalog .fiyat { font-size: 24px; font-weight: 700; color: var(--acc); }
.yon-katalog .fiyat.ok { color: var(--ok); }
.yon-katalog .esyagorsel { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #0b1119; flex-shrink: 0; }
@media (max-width: 900px) { .yon-katalog .gorseller { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Altbilgi · satıcı künyesi (yönetimde şirket bilgisi girilince) */
.ftr__kunye { margin-top: 10px; font-size: 12px; color: var(--tx3); line-height: 1.6; }

/* Kart içindeki açılır menüler (details.dd, details.acilir > mutlak konumlu menü): kartın overflow: hidden'ı menüyü
   kırpıyordu — açılıyor ama görünmüyordu (Ekrem 29 Eylül: profilde "Daha fazla", yönetimde "paket tanımla"). Menü açıkken
   kart taşmaya izin verir. */
details.acilir { position: relative; }
.card:has(details.acilir[open]), .card:has(details.dd[open]) { overflow: visible; }

/* --- Canlı kanal (29 Eylül): kısa bildirim — yeni mesaj, grup mesajı, bildirim; 6 sn sonra kaybolur --- */
.canlibildirim { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; width: 320px; max-width: calc(100vw - 32px); pointer-events: none; }
.canlibildirim__k { display: block; padding: 12px 14px; color: inherit; box-shadow: 0 12px 40px rgba(0,0,0,.45); border-left: 3px solid var(--teal); pointer-events: auto; animation: canliGir .25s ease-out; transition: opacity .35s, transform .35s; }
a.canlibildirim__k:hover { color: inherit; border-color: var(--line2); border-left-color: var(--teal); }
.canlibildirim__k .muted { margin-top: 2px; overflow-wrap: anywhere; }
.canlibildirim__k.git { opacity: 0; transform: translateY(8px); }
@keyframes canliGir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Konuşma listesi: okunmamış yeni ileti işareti */
.cv.yeni .nm::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-left: 6px; vertical-align: middle; }
@media (max-width: 600px) { .canlibildirim { right: 16px; left: 16px; width: auto; bottom: 16px; } }

/* --- Telefon (29 Eylül, mobil gözden geçirme): sağa yaslı öğesi (.ml) olan satırlar sığmazsa alt satıra kırar. Sayfa başlığı
   satırlarında (başlık · alt yazı · sağda düğme/arama) sağdaki öğe sayfayı yana taşırıyordu: topluluk (arama), kütüphane,
   bildirimler, rozetler, puan dükkânı, topluluk merkezi. Başlık satırında alta inen öğe sola yaslanır. */
@media (max-width: 760px) {
  .flex:has(> .ml) { flex-wrap: wrap; row-gap: 10px; }
  .flex > .ml.flex { flex-wrap: wrap; }
  .flex.mt24:has(h1.t1) > .ml { margin-left: 0; }
  .flex.mt24:has(h1.t1) > input.ml { flex: 1 1 100%; width: auto; max-width: 100%; }
}
@media (max-width: 760px) {
  /* Başlık satırı: başlık ile açıklama sığmazsa açıklama alta iner (Haberler gibi). */
  .flex:has(> h1.t1) { flex-wrap: wrap; row-gap: 4px; }
  /* Başlık kartı [avatar][metin][düğmeler] (Başarımlar): düğmeler alta, yan yana; metin ezilmez. */
  .card.flex:has(> .grow):has(> .stack) { flex-wrap: wrap; }
  .card.flex:has(> .grow):has(> .stack) > .grow { flex: 1 1 0; min-width: 0; }
  .card.flex:has(> .grow):has(> .stack) > .stack { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  /* Başarım satırında yüzde sütunu metni ezmesin (yalnız "%" görünüyordu). */
  .bsr .ac > div:not(.r):not(.kr) { flex: 1 1 0; min-width: 0; } .bsr .ac .bar { width: auto !important; max-width: 100%; } .bsr .ac .kr { min-width: 0; }
  /* Harita: iğne etiketleri dar ekranda üst üste biniyordu; yalnız numaralı daire (listede ad ve seviye var). */
  .pin { font-size: 0; gap: 0; padding: 4px; }
  .pin i { font-size: 11px; }
  /* Girişte QR bloğu telefonda anlamsız (bilgisayardaki girişi telefonla okutmak için). */
  [data-qr-giris] { display: none; }
  /* Pazar: süzgeç sütunu solda (belgede önce) — telefonda eşyalar süzgeçlerin 1.400 px altında kalıyordu; önce eşyalar. */
  .pz .cols > form.side { order: 2; }
  /* Flex satırlarında sınıfsız metin sütunu daralabilsin, küçük düğme satırları kırılsın: Ayarlar'da avatar satırı kartın
     sağından taşıp kırpılıyordu ("Karakter portresi" düğmesi ve açıklama kesik). */
  .flex > div:not([class]) { min-width: 0; }
  .flex:has(> .btn), .flex:has(> form > .btn), .flex:has(> form > label.btn), .flex:has(> details > summary.btn) { flex-wrap: wrap; }
  /* Profil başlığı: sağdaki düğme sütunu telefonda tam genişlik, sola yaslı ("Daha fazla" kenarda kesiliyordu). */
  .pr .ph2 > .stack { width: 100%; align-items: flex-start !important; }
  /* Cüzdan paketleri: kırılma metin uzunluğuna göre değişiyordu (düğme kimi kartta sağda, kiminde sol altta); hepsi aynı:
     tutar · bonus · sağ altta fiyat + düğme. */
  .pk:has(> .amt) { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "amt amt amt" "bon bon bon" ". fiyat dugme"; gap: 8px 10px; }
  .pk:has(> .amt) > .amt { grid-area: amt; } .pk:has(> .amt) > div { grid-area: bon; }
  .pk:has(> .amt) > .price { grid-area: fiyat; margin-left: 0; } .pk:has(> .amt) > .btn { grid-area: dugme; }
  /* Mağaza listesi: küçük resim daralır, oyun adı üç satıra bölünmez ("Sınav / Oyunu / 3"). */
  .hit { gap: 12px; padding: 10px; } .hit > img, .hit > .ph { width: 76px; height: 43px; }
  .hit .t3, .hit .white { overflow-wrap: anywhere; }
  /* Sohbet yazma satırı: emoji / ek / Gönder dar, yazı kutusu geniş (≈110 px'e sıkışıyordu). */
  .msj .in { gap: 6px; } .msj .in .btn { padding: 0 10px; min-width: 0; } .msj .in > .input { min-width: 0; flex: 1 1 0; }
  /* Giriş kutusu + düğme satırı (Arkadaş ekle vb.): kutu daralır, düğme kartın dışına taşmaz. */
  .flex > input.input { min-width: 0; flex: 1 1 0; }
}

/* Launcher kipi (istemci_kipi.php): üst çubuk/altbilgi launcher'da yok; devir kartı (sayfa/istemci.php). */
.istemci-kart{max-width:560px;margin:80px auto;text-align:center}
body.istemci-kipi main.sayfa{padding-top:8px}
/* Launcher kipi: koyu ince kaydırma çubuğu (launcher'ın kendi ekranlarıyla aynı; tarayıcıda değişiklik yok). */
html:has(> body.istemci-kipi) { scrollbar-color: rgba(255,255,255,.16) transparent; }