/* =====================================================================
   RexOS · ortak ziyaretçi arayüzü (temadan bağımsız parçalar)
   Giriş / kayıt, durum sayfaları (404, bakım, kayıt kapalı), boş sepet,
   ödeme seçenekleri, site bildirimleri (flash) ve kısa bildirim (toast).
   Sade ve nötr: renk, köşe ve yazı tipi her zaman temanın değişkenlerinden
   gelir (--accent, --surface, --fg, --muted, --line, --good, --bad, --gold,
   --pr-r, --font-display). style.css'den sonra, tema stilinden ÖNCE yüklenir;
   böylece temanın kendi kuralları her zaman son sözü söyler.
   Seçiciler su-* sınıflarıyla kapsanır; temaların tasarımına sızmaz.
   ===================================================================== */

:root{
  --su-r:min(var(--pr-r,16px),14px);          /* alan / uyarı köşesi */
  --su-ring:color-mix(in srgb,var(--accent) 38%,transparent);
  --su-hover:color-mix(in srgb,var(--fg) 28%,var(--line));
}

/* ---------- Satır içi simge (bc_icon): yazı boyutunda, yazı renginde ---------- */
.bi{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.14em;stroke-width:2}
:is(h1,h2,h3,h4) .bi{vertical-align:-.1em}
.bi-l{margin-right:.4em}
.bi-r{margin-left:.35em}
:focus-visible{outline-offset:2px}

/* ---------- Ortak sayfa iskeleti ---------- */
.su-page{gap:24px}
.su-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

/* ---------- Durum bloğu (404, bakım, kayıt kapalı, boş sepet) ---------- */
.su-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;max-width:440px;margin-inline:auto;padding-block:40px 24px}
.su-state-ic{display:grid;place-items:center;width:56px;height:56px;margin-bottom:8px;border-radius:50%;color:inherit;background:color-mix(in srgb,currentColor 7%,transparent);border:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.su-state-ic svg{width:24px;height:24px}
.su-state .su-state-t{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:inherit;margin:0;text-transform:none}
.su-state-p{color:var(--muted);max-width:42ch;margin:0}
.su-state .su-actions{margin-top:16px}
.su-page>.su-state{padding-block:clamp(16px,6vw,72px) clamp(16px,4vw,48px)}
/* Boş sepet: panel içinde, daha sıkı */
.su-empty{align-items:center}
.su-empty .su-state{padding-block:24px 16px}
.su-empty .su-state-t{font-family:var(--font-body,inherit);font-size:1.05rem;font-weight:600;letter-spacing:0}

/* ---------- Giriş / kayıt kartı ---------- */
.su-auth{align-items:center}
.su-auth .su-card{width:100%;max-width:440px;margin-inline:auto;padding:clamp(24px,4vw,40px);gap:24px}
.su-head{display:flex;flex-direction:column;gap:8px}
.su-kicker{font-size:.875rem;font-weight:600;color:var(--muted);letter-spacing:0;text-transform:none}
.su-auth .su-head h2{font-size:clamp(1.6rem,3.2vw,2rem);line-height:1.15;text-transform:none;letter-spacing:-.01em;margin:0}
.su-auth .su-head p{font-size:.95rem;line-height:1.55}
.su-form{display:flex;flex-direction:column;gap:16px}
.su-form .field{margin:0;gap:8px}
.su-form .btn{margin-top:8px;min-height:48px}
.su-alt{margin:0;padding-top:16px;border-top:1px solid var(--line);font-size:.95rem;text-align:center}
.su-alt a{font-weight:600}

/* Form alanları (yalnızca ortak ekranlarda) */
:is(.su-form,.su-cart) .field label:not(.check),.su-cart .ck-to label{font-size:.875rem;font-weight:600;color:var(--fg);letter-spacing:0;text-transform:none}
:is(.su-form,.su-cart) :is(.field input:not([type=checkbox]):not([type=radio]),.input){min-height:48px;padding:12px 14px;border-radius:var(--su-r);border:1px solid var(--line);background:var(--surface);color:var(--fg);font-size:1rem;transition:border-color .15s,box-shadow .15s}
:is(.su-form,.su-cart) :is(.field input,.input)::placeholder{color:var(--muted);opacity:.8}
:is(.su-form,.su-cart) :is(.field input,.input):hover{border-color:var(--su-hover)}
:is(.su-form,.su-cart) :is(.field input,.input):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--su-ring)}
:is(.su-form,.su-cart) :is(.field input,.input):focus-visible{outline:none}
.su-form .field input[aria-invalid="true"],.su-form .field input:user-invalid{border-color:var(--bad)}
.su-form .field input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 30%,transparent)}
.su-form .field label.check{gap:12px;font-size:.95rem;font-weight:500;line-height:1.5;color:var(--fg);cursor:pointer}
.su-form .field label.check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent);cursor:pointer}
.su-form .field label.check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Uyarılar: giriş/kayıt hatası, site bildirimleri (flash), şablon hatası ---------- */
:is(.su-form,.flashes,.su-msg) .alert{position:relative;padding:12px 16px 12px 44px;border-radius:var(--su-r);font-weight:500;font-size:.95rem;line-height:1.5;color:var(--fg);border:1px solid var(--line);background:var(--surface)}
:is(.su-form,.flashes,.su-msg) .alert::before{content:"";position:absolute;left:14px;top:14px;width:18px;height:18px;background:var(--muted);
  -webkit-mask:var(--su-ico) center/contain no-repeat;mask:var(--su-ico) center/contain no-repeat;
  --su-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E")}
:is(.su-form,.flashes,.su-msg) .alert.ok{border-color:color-mix(in srgb,var(--good) 45%,var(--line));background:color-mix(in srgb,var(--good) 9%,var(--surface))}
:is(.su-form,.flashes,.su-msg) .alert.ok::before{background:var(--good);
  --su-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 9.8'/%3E%3C/svg%3E")}
:is(.su-form,.flashes,.su-msg) .alert.err{border-color:color-mix(in srgb,var(--bad) 50%,var(--line));background:color-mix(in srgb,var(--bad) 9%,var(--surface))}
:is(.su-form,.flashes,.su-msg) .alert.err::before{background:var(--bad);
  --su-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E")}
:is(.su-form,.flashes,.su-msg) .alert.warn{border-color:color-mix(in srgb,var(--gold) 50%,var(--line));background:color-mix(in srgb,var(--gold) 10%,var(--surface))}
:is(.su-form,.flashes,.su-msg) .alert.warn::before{background:var(--gold);
  --su-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4L2.6 17.5A2 2 0 004.3 20.5h15.4a2 2 0 001.7-3L13.7 4a2 2 0 00-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E")}
:is(.su-form,.flashes,.su-msg) .alert a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.flashes{gap:8px;padding-top:24px}
.su-msg{padding-block:40px}

/* ---------- Sepet ---------- */
.su-cart .sum-line{font-weight:600}
.su-cart .sum-line.total{border-top-color:var(--line);font-weight:700}
.su-cart .qty button{display:grid;place-items:center;min-width:36px;min-height:36px;color:var(--fg);transition:border-color .15s,background .15s}
.su-cart .qty button:hover{border-color:var(--su-hover)}
.su-cart .qty button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.su-cart .cart-row form[style*="justify-self"] .linkbtn{padding:8px 0;font-weight:600;text-decoration-thickness:1px}
.su-cart aside .field>div{flex-wrap:wrap}
.su-cart aside .field>div>.input{flex:1 1 160px;min-width:0}
/* Kime? seçenekleri: sade radyo kartları */
.su-cart .ck-who{gap:8px}
.su-cart .ck-opt span{position:relative;gap:2px;padding:12px 48px 12px 16px;border-radius:var(--su-r);background:var(--surface);border-color:var(--line);transition:border-color .15s,background .15s}
.su-cart .ck-opt span::after{content:"";position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:2px solid var(--su-hover);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.su-cart .ck-opt:hover span{transform:none;border-color:var(--su-hover)}
.su-cart .ck-opt input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface));box-shadow:none}
.su-cart .ck-opt input:checked+span::after{border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 9px var(--accent)}
.su-cart .ck-opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.su-cart .ck-opt b{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--fg)}
.su-cart .ck-opt small{font-size:.825rem;line-height:1.45;padding-left:26px}
.ck-ic{display:inline-grid;place-items:center;flex:none;font-style:normal;color:var(--muted)}
.ck-ic svg{width:18px;height:18px}
.su-cart .ck-opt input:checked+span .ck-ic{color:var(--accent)}
.su-cart .ck-sub{display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:var(--su-r);font-size:.85rem;color:var(--fg);background:var(--surface-2,var(--surface));border:1px solid var(--line)}
.su-cart .ck-sub .ck-ic{margin-top:1px}

/* ---------- Kısa bildirim (toast) ---------- */
.toast{padding:12px 18px;border-radius:var(--su-r);font-weight:600;font-size:.95rem;line-height:1.45;max-width:min(420px,calc(100% - 32px));box-shadow:0 12px 32px -12px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--bg) 20%,transparent)}

/* ---------- Küçük ekran ---------- */
@media (max-width:520px){
  .su-auth .su-card{padding:24px 16px}
  .su-page{padding-block:32px 64px}
  .su-actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .su-cart .ck-opt span,.su-cart .ck-opt span::after,:is(.su-form,.su-cart) :is(.field input,.input),.toast{transition:none}
}

/* ---------- CMS sayfa parçaları: sade etiketler, hizalı simgeler, tek vurgu ----------
   Market, kredi, hesap, sezon bileti, destek ve benzeri sayfaların ortak parçaları.
   Temalar kendi tasarımlarını style.css'den sonra yükler; bu kurallar onları ezmez. */
.cr-k,.cr-sum-h small,.pd-cat,.ac-k,.ac-wallet small,.cr-bal small,.hp-k,.pbx-cdn small,.bp-lv small,.bp-rl{text-transform:none;letter-spacing:0}
.cr-k{font-size:.85rem;font-weight:600}
/* Simge + yazı ikilileri (hap etiketler, düğmeler, meta satırları) */
:is(.cr-trust span,.mk-bstats>*,.mk-qa button,.mk-back,.ac-badges>*,.mk-d-l,.mk-d-c,.nw-meta span,.nw-back,.nw-pn small,.tkc-back,.pn-meta span,.pn-type,.pg-boards a,.sx-filter a,.pd-trust span,.pd-sub>span,.bp-chip,.bp-meta span,.bp-btn,.bp-pok span,.dlp-safe,.pg-chips span,.mk-t-sub){display:inline-flex;align-items:center;gap:6px}
:is(.cr-night,.vt2-warn,.ac-note,.pd-giftnote)>.bi{margin-right:6px;vertical-align:-.15em}
:is(.cr-trust,.mk-bstats,.ac-badges,.nw-meta,.pn-meta,.pd-trust,.bp-meta,.bp-chips) .bi{width:15px;height:15px;opacity:.85}
.pd-crumb .bi{width:14px;height:14px;opacity:.6;vertical-align:-2px}
:is(.ac-stats span,.ac-ti,.ac-li-ic,.ac-empty span,.sx-empty>span,.pg-tki,.pg-login>span,.pg-dc>span,.vt2-ic,.bp-qi,.dlp-feats span,.pg-boards a span,.ne-ic,.nw-img i,.tkc-ic,.tkc-closed>span,.bp-empty>span,.dlp-orb,.dlp-bi,.wh-hub,.wh-wi,.rk-medal,.pd-sub>span) .bi{width:1em;height:1em}
.ac-ti,.ac-stats span,.bp-qi,.pg-tki,.vt2-ic{color:var(--accent)}
.ac-stats span{display:inline-grid;width:36px;height:36px;place-items:center;border-radius:10px;font-size:1.05rem;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ac-ok .bi,.ac-mc-ok span .bi,.vt2-n .bi,.bp-st .bi,.cr-ck .bi,.cr-m em .bi{width:.85em;height:.85em;stroke-width:3}
.ck .bi{width:12px;height:12px;stroke-width:3}
.rk-medal{color:var(--gold,var(--accent))}
.rk-p.p2 .rk-medal,.rk-p.p3 .rk-medal{color:var(--muted)}
.vt2-medal{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.75rem;font-weight:700;color:var(--accent-fg,#fff);background:var(--accent)}
.vt2-p:not(.p1) .vt2-medal{color:var(--fg);background:var(--surface-2,var(--surface));border:1px solid var(--line)}
.bp-rk.top{display:inline-grid;place-items:center;width:24px;height:24px;margin-inline:auto;border-radius:50%;font-size:.8rem;color:var(--accent-fg,#fff);background:var(--accent)}
.bp-rk.top.t2,.bp-rk.top.t3{color:var(--fg);background:var(--surface-2,var(--surface));border:1px solid var(--line)}
.bp-pi{display:inline-flex;vertical-align:-2px;color:var(--gold,var(--accent))}.bp-pi .bi{width:13px;height:13px}
.bp-qgo{display:inline-flex;vertical-align:-2px;color:var(--accent)}.bp-qgo .bi{width:14px;height:14px}
.pg-pos label b .bi{width:1.2em;height:1.2em}
/* Sezon bileti Premium sırası: mor/pembe degrade ve parlama yerine temanın altın tonu */
.bp-btn.prem{background:var(--gold,#d4a017)!important;color:#1a1400!important;box-shadow:none;animation:none}
.bp-rl.prem{color:var(--fg);background:color-mix(in srgb,var(--gold,#d4a017) 16%,var(--surface-2,var(--surface)));border:1px solid color-mix(in srgb,var(--gold,#d4a017) 40%,var(--line))}
.bp-cell.premium{background:var(--surface-2,var(--surface))}
.bp-cell.premium::before{background:var(--gold,#d4a017)}
.bp-cell.premium .bp-ic{background:none}
.bp-cell.premium.can{border-color:var(--gold,#d4a017);box-shadow:none}
.bp-cell.premium button{color:#1a1400;background:var(--gold,#d4a017)}
.night-bar.live{animation:none}
.pd-giftnote{background:color-mix(in srgb,var(--accent) 7%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
/* Klavye odağı: her temada görünür */
:is(.btn,.mk-qa button,.bp-btn,.bp-sbtn,.wh-btn,.ac-tc,.mk-srv,.mk-cat,.vt2-site,.pg-tkr,.nw-card,.mk-tile):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.bp-btn.prem{animation:none}}
/* Uzun oyuncu adları podyumu taşırmasın */
.rk-pod>*,.vt2-pod>*{min-width:0}
.rk-p b,.vt2-p b{max-width:100%;overflow-wrap:anywhere}