:root{
  --red:#E8192C;--red-d:#b8101f;--red-bg:rgba(232,25,44,.12);
  --bg:#0e0e0e;--bg1:#161616;--bg2:#1e1e1e;--bg3:#272727;
  --text:#f0f0f0;--dim:#999;--faint:#666;
  /* Light theme overrides applied via body.light-theme */
  --border:rgba(255,255,255,0.09);
  --green:#3ecf6e;--amber:#f5a623;--blue:#4a9eff;--purple:#a78bfa;
  --r:10px;--rl:16px;
  --nav:56px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --font:'DM Sans',system-ui,sans-serif;
  --font-d:'Bebas Neue',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;overscroll-behavior:none}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;min-height:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{font-family:var(--font);cursor:pointer;border:none;outline:none}
input,textarea,select{font-family:var(--font);outline:none;border:none;background:transparent}
/* MARKA KİMLİĞİ — mevcut jenerik "koyu SaaS" hissini kırmak için ince,
   katmana eklenen (var olan hiçbir kuralı ezmeyen) marka dokunuşları */
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg1)}
::-webkit-scrollbar-thumb{background:rgba(232,25,44,.35);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(232,25,44,.55)}
*{scrollbar-color:rgba(232,25,44,.35) var(--bg1);scrollbar-width:thin}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
body.large-text{font-size:17px}
body.large-text .hint,body.large-text .lbl{font-size:13px}
body.high-contrast{--text:#fff;--dim:#e2e2e2;--faint:#c4c4c4;--border:rgba(255,255,255,.35);--bg1:#000;--bg2:#141414;--bg3:#1e1e1e}
body.high-contrast .btn-ghost{border-width:2px}
body{background-image:radial-gradient(circle at 12% -8%,rgba(232,25,44,.09),transparent 42%),radial-gradient(circle at 100% 0%,rgba(245,166,35,.05),transparent 38%)}
.page{display:none;min-height:100dvh}.page.active{display:block}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;height:calc(var(--nav) + var(--safe-t));padding-top:var(--safe-t);display:flex;align-items:center;justify-content:space-between;padding-left:16px;padding-right:16px;background:rgba(14,14,14,.98);border-bottom:1px solid var(--border)}
.nav-logo{font-family:var(--font-d);font-size:22px;letter-spacing:3px;color:var(--red);cursor:pointer;user-select:none}
.nav-logo em{color:var(--text);font-style:normal}
.nav-right{display:flex;gap:8px;align-items:center}
/* Nav bar'daki tüm ikon butonları (GB, ⚙️, 🌙, 🔔) tek boyut standardına sahip */
.nav-icon-btn{width:34px;height:34px;padding:0!important;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;flex-shrink:0}

/* BTNS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:var(--r);font-size:14px;font-weight:600;transition:opacity .1s,transform .1s;white-space:nowrap;touch-action:manipulation}
.btn:active{opacity:.72;transform:scale(.96)}
.btn-red{background:var(--red);color:#fff}
.btn-ghost{background:var(--bg2);color:var(--dim);border:1px solid var(--border)}
.btn-outline{background:transparent;color:var(--red);border:1.5px solid var(--red)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid rgba(232,25,44,.3)}
.btn-amber{background:rgba(245,166,35,.12);color:var(--amber);border:1px solid rgba(245,166,35,.3)}
.btn-blue{background:rgba(59,130,246,.14);color:#60a5fa;border:1px solid rgba(59,130,246,.35)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-xs{padding:5px 10px;font-size:11px;border-radius:7px;font-weight:700}
.btn-full{width:100%}

/* FORMS */
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;background:var(--bg2);border-radius:var(--r);padding:4px;margin-bottom:20px;border:1px solid var(--border)}
.mode-btn{padding:10px;border-radius:7px;font-size:14px;font-weight:700;background:transparent;color:var(--dim);transition:all .15s;border:none;cursor:pointer}
.mode-btn.active{background:var(--red);color:#fff}
.field{margin-bottom:16px}
.lbl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);margin-bottom:7px}
.inp{width:100%;background:var(--bg2);border:1.5px solid var(--border);color:var(--text);font-size:15px;padding:12px 14px;border-radius:var(--r);transition:border-color .15s;-webkit-appearance:none;appearance:none}
.inp:focus{border-color:var(--red);outline:none}
.inp::placeholder{color:var(--faint)}
.inp option{background:var(--bg2)}
.hint{font-size:11px;color:var(--faint);margin-top:5px;display:block}
.err-box{background:rgba(232,25,44,.1);border:1px solid rgba(232,25,44,.3);color:#ff7070;padding:10px 14px;border-radius:var(--r);font-size:13px;margin-bottom:14px;display:none}

/* HOME */
#pg-home{padding-top:0}
.hero{position:relative;min-height:0;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg);padding-top:calc(var(--nav) + var(--safe-t))}
.hero-body{position:relative;z-index:2;padding:24px 18px 20px;width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:6px;background:var(--red-bg);border:1px solid rgba(232,25,44,.25);color:var(--red);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:14px}
.hero-title{font-family:var(--font-d);font-size:clamp(52px,14vw,96px);line-height:.88;letter-spacing:1px;margin-bottom:12px;opacity:0;transform:translateY(18px);animation:up .55s .1s ease forwards}
.hero-title .r{color:var(--red)}
.hero-sub{font-size:14px;color:var(--dim);line-height:1.6;margin-bottom:24px;max-width:320px;opacity:0;transform:translateY(14px);animation:up .55s .22s ease forwards}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;opacity:0;transform:translateY(10px);animation:up .55s .34s ease forwards}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat{padding:14px 10px;text-align:center;border-right:1px solid var(--border)}
.stat:last-child{border-right:none}
.stat-n{font-family:var(--font-d);font-size:26px;color:var(--red);display:block;line-height:1}
.stat-l{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;display:block}
.section{padding:20px 16px}
.sec-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.sec-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.cpill{background:var(--red-bg);color:var(--red);border:1px solid rgba(232,25,44,.22);font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.rooms{display:flex;flex-direction:column;gap:8px}
.rcard{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;transition:background .12s}
.rcard:active{background:var(--bg2)}
.rcard-code{font-family:var(--font-d);font-size:20px;letter-spacing:2px;line-height:1}
.rcard-meta{font-size:12px;color:var(--dim);margin-top:3px}
.rcard-lead{font-size:11px;margin-top:5px;font-weight:600}
.rcard-right{flex-shrink:0;display:flex;align-items:center;gap:7px}
.pill{font-size:10px;font-weight:700;letter-spacing:.4px;padding:3px 8px;border-radius:20px}
.p-green{background:rgba(62,207,110,.13);color:var(--green);border:1px solid rgba(62,207,110,.22)}
.p-gray{background:rgba(255,255,255,.05);color:var(--faint);border:1px solid var(--border)}
.p-blue{background:rgba(74,158,255,.13);color:var(--blue);border:1px solid rgba(74,158,255,.22)}
.pips{display:flex;gap:3px;margin-top:6px}
.pip{width:8px;height:8px;border-radius:50%}
.empty{text-align:center;padding:28px 16px;color:var(--faint);font-size:13px}

/* CREATE & ROOM */
#pg-create, #pg-room{padding-top:calc(var(--nav) + var(--safe-t))}
.wrap{padding:22px 16px calc(80px + var(--safe-b));max-width:500px;margin:0 auto}
.pg-title{font-family:var(--font-d);font-size:34px;letter-spacing:2px;margin-bottom:4px}
.pg-sub{font-size:13px;color:var(--dim);margin-bottom:24px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pgrid-4{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pwrap{position:relative}
.pidx{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:var(--faint);pointer-events:none}
.pwrap .inp{padding-left:26px}
.team-divider{display:flex;align-items:center;gap:10px;margin:8px 0}
.team-divider-line{flex:1;border:none;border-top:1px dashed var(--border)}
.team-divider-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:3px 10px;border-radius:20px}
.td-a{background:rgba(232,25,44,.1);color:var(--red);border:1px solid rgba(232,25,44,.2)}
.td-b{background:rgba(74,158,255,.1);color:var(--blue);border:1px solid rgba(74,158,255,.2)}
.td-vs{background:var(--bg3);color:var(--dim)}

/* ROOM HEADER & SCORES */
.rhdr{padding:14px 16px;background:linear-gradient(180deg,rgba(232,25,44,.07) 0%,transparent 100%);border-bottom:1px solid var(--border)}
.rhdr-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.rcode{font-family:var(--font-d);font-size:36px;letter-spacing:4px;line-height:1}
.rmeta{font-size:12px;color:var(--dim);margin-bottom:8px}
.share-links-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.share-link-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border-radius:var(--r);font-size:11px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--bg2);color:var(--dim);transition:all .15s;text-align:center}
.share-link-btn:active{opacity:.7;transform:scale(.96)}
.share-link-btn.edit{border-color:rgba(232,25,44,.35);color:var(--red);background:var(--red-bg)}
.share-link-btn.view{border-color:rgba(62,207,110,.35);color:var(--green);background:rgba(62,207,110,.08)}
.rhdr-acts{display:flex;gap:8px;flex-wrap:wrap}
.pwd-badge{background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.25);color:var(--purple);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.mode-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.mb-solo{background:rgba(62,207,110,.12);color:var(--green);border:1px solid rgba(62,207,110,.22)}
.mb-team{background:rgba(74,158,255,.12);color:var(--blue);border:1px solid rgba(74,158,255,.22)}
.score-wrap{padding:12px 12px calc(100px + var(--safe-b))}
.winner-card{display:none;border-radius:var(--rl);padding:16px 18px;margin-bottom:12px;align-items:center;gap:14px}
.winner-card.show{display:flex}
.wc-solo{background:linear-gradient(135deg,rgba(62,207,110,.1),rgba(62,207,110,.03));border:1px solid rgba(62,207,110,.22)}
.wc-team{background:linear-gradient(135deg,rgba(74,158,255,.1),rgba(74,158,255,.03));border:1px solid rgba(74,158,255,.22)}
.wtrophy{font-size:28px}
.wlbl{font-size:10px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.wname{font-family:var(--font-d);font-size:24px;letter-spacing:2px}
.wname.solo{color:var(--green)}
.wname.team{color:var(--blue)}

/* SCORE TABLE */
.team-board{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-bottom:12px;align-items:center}
.team-col{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:14px 12px;text-align:center}
.team-col.winning{border-color:rgba(62,207,110,.4);background:rgba(62,207,110,.05)}
.team-col.losing{border-color:rgba(232,25,44,.3)}
.team-names{font-size:12px;color:var(--dim);margin-bottom:8px;line-height:1.4}
.team-total{font-family:var(--font-d);font-size:38px;letter-spacing:1px;line-height:1}
.team-total.low{color:var(--green)}
.team-total.high{color:var(--red)}
.vs-badge{font-family:var(--font-d);font-size:22px;color:var(--faint);text-align:center}
.tbox{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);overflow-x:auto;margin-bottom:12px;-webkit-overflow-scrolling:touch}
table.st{width:100%;border-collapse:collapse;min-width:280px}
.st thead tr{border-bottom:2px solid rgba(232,25,44,.18)}
.st th{padding:11px 8px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--dim);text-align:center;position:relative;white-space:nowrap}
.th-el{text-align:left!important;padding-left:12px!important;min-width:48px}
.th-del{width:30px;padding:0!important}
.cw{color:var(--green)!important}
.cl{color:var(--red)!important}
.st tbody tr{border-bottom:1px solid rgba(255,255,255,.04)}
.st td{padding:9px 8px;text-align:center;font-size:13px;color:var(--dim)}
.td-el{text-align:left!important;padding-left:12px!important;font-size:11px;color:var(--faint);white-space:nowrap}
.sv{font-weight:600;color:var(--text)}
.sv.neg{color:var(--red)}
.sv.zer{color:var(--faint)}
.delbtn{background:transparent;border:none;color:var(--faint);font-size:12px;padding:5px 7px;border-radius:4px;cursor:pointer}
.st tfoot tr{border-top:2px solid var(--border)}
.st tfoot td{padding:11px 8px}
.tlbl{text-align:left!important;padding-left:12px!important;font-size:11px;font-weight:700;color:var(--faint)}
.tv{font-family:var(--font-d);font-size:24px;letter-spacing:1px;color:var(--text)}
.tv.tw{color:var(--green)}
.tv.tl{color:var(--red)}
.add-card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:14px;margin-bottom:12px}
.add-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.add-num{font-weight:400;color:var(--faint)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:12px}
.sgrid-team{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.team-input-group{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:10px}
.team-input-label{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:10px;display:inline-block}
.til-a{background:rgba(232,25,44,.1);color:var(--red)}
.til-b{background:rgba(74,158,255,.1);color:var(--blue)}
.sblock{display:flex;flex-direction:column;gap:5px}
.sname{font-size:12px;font-weight:700}
.sinput-row{display:flex;align-items:center;gap:6px}
.sign-btn{flex-shrink:0;width:40px;height:42px;border-radius:8px;background:var(--bg3);border:1.5px solid var(--border);color:var(--text);font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sign-btn.neg{background:var(--red-bg);border-color:rgba(232,25,44,.4);color:var(--red)}
.sinp{flex:1;background:var(--bg3);border:1.5px solid var(--border);color:var(--text);font-size:18px;font-weight:700;padding:9px 6px;border-radius:8px;text-align:center;width:100%}
.qsection{margin-top:6px}
.qrow{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.qb{padding:5px 8px;font-size:11px;font-weight:700;border-radius:6px;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--text)}
.qb.pos{border-color:rgba(62,207,110,.35);color:var(--green);background:rgba(62,207,110,.08)}
.qb.neg{border-color:rgba(232,25,44,.35);color:var(--red);background:var(--red-bg)}
.note-ta{width:100%;background:var(--bg2);border:1.5px solid var(--border);color:var(--text);font-size:13px;padding:9px 12px;border-radius:var(--r);resize:none;margin-bottom:10px}
.add-footer{display:flex;gap:8px;justify-content:flex-end}

/* MODALS & OVERLAYS */
.loader{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;gap:14px;transition:opacity .3s}
.loader.hide{opacity:0;pointer-events:none}
.loader-logo{font-family:var(--font-d);font-size:36px;letter-spacing:4px;color:var(--red)}
.spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite;will-change:transform}
.overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl) var(--rl) 0 0;padding:20px 18px;padding-bottom:calc(20px + var(--safe-b));width:100%;max-width:520px;position:relative;transform:translateY(24px);transition:transform .25s cubic-bezier(.32,.72,0,1);max-height:90dvh;overflow-y:auto}
.overlay.open .modal{transform:translateY(0)}
.mhandle{width:34px;height:4px;border-radius:2px;background:var(--bg3);margin:0 auto 18px}
.mtitle{font-family:var(--font-d);font-size:26px;letter-spacing:2px;margin-bottom:4px}
.msub{font-size:13px;color:var(--dim);margin-bottom:20px}
.mclose{position:absolute;top:14px;right:14px;background:var(--bg3);border:none;color:var(--dim);width:28px;height:28px;border-radius:50%;font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mfooter{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.toast{position:fixed;bottom:calc(18px + var(--safe-b));left:50%;transform:translateX(-50%) translateY(12px);background:rgba(18,18,18,.97);border:1px solid rgba(255,255,255,.1);color:var(--text);padding:10px 20px;border-radius:30px;font-size:13px;font-weight:600;z-index:500;opacity:0;transition:all .2s;white-space:nowrap;text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:rgba(62,207,110,.4);color:var(--green)}
.toast.err{border-color:rgba(232,25,44,.4);color:var(--red)}
.skel{background:var(--bg2);border-radius:var(--r);position:relative;overflow:hidden}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--bg3) 50%,transparent 100%);animation:shimmer 1.4s infinite;will-change:transform}
.skel-row{height:72px;border-radius:var(--rl);margin-bottom:8px}

@keyframes up{to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* WINNER OVERLAY */
.winner-overlay{position:fixed;inset:0;z-index:500;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.97);overflow:hidden;}
.winner-overlay.show{display:flex;animation:woFadeIn .6s cubic-bezier(.22,1,.36,1) forwards}
.winner-overlay-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 40% at 50% 50%, rgba(62,207,110,.18) 0%, transparent 70%),radial-gradient(ellipse 100% 60% at 50% 100%, rgba(232,25,44,.12) 0%, transparent 60%);}
.winner-overlay-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:20px}
.winner-overlay-name{font-family:var(--font-d);font-size:clamp(44px,12vw,96px);letter-spacing:4px;color:#fff;text-align:center;background:linear-gradient(135deg,#fff 0%,#46d369 50%,#fff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.winner-overlay-close{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6);padding:12px 32px;border-radius:30px;font-size:14px;font-weight:700;cursor:pointer;}
#fw-canvas{position:fixed;inset:0;z-index:499;pointer-events:none;display:none}
#fw-canvas.show{display:block}
@keyframes woFadeIn{from{opacity:0}to{opacity:1}}

/* ADMIN & VENUE */
.admin-panel-card{background:var(--bg2);border:1px solid rgba(229,9,20,.3);border-radius:var(--rl);padding:16px;margin-bottom:16px}
.admin-panel-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--red);margin-bottom:14px}
.admin-room-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.admin-room-row:last-child{border-bottom:none}
.admin-room-code{font-family:var(--font-d);font-size:18px;letter-spacing:2px}
.admin-room-meta{font-size:11px;color:var(--dim);margin-top:2px}

/* ADISYON & MISC */
.game-timer{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--dim);font-family:monospace;background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:3px 10px;}
.timer-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 1.5s infinite;will-change:opacity,transform}
.undo-btn{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);color:var(--amber);padding:8px 14px;font-size:13px;font-weight:700;border-radius:var(--r);cursor:pointer;}
.undo-btn:disabled{opacity:.3;cursor:not-allowed;}
.pdf-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(74,158,255,.1);border:1px solid rgba(74,158,255,.3);color:var(--blue);padding:10px 18px;font-size:13px;font-weight:700;border-radius:var(--r);cursor:pointer;}
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px}
.qr-canvas{border-radius:var(--r);background:#fff;padding:12px}
.adisyon-tabs{display:flex;background:var(--bg3);border-radius:var(--r);padding:3px;gap:3px;margin-bottom:16px}
.adisyon-tab{flex:1;padding:8px;border-radius:6px;font-size:13px;font-weight:700;background:transparent;color:var(--dim);cursor:pointer;text-align:center;border:none;}
.adisyon-tab.act{background:var(--bg1);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.adisyon-person-tab{padding:8px 16px;border-radius:30px;font-size:13px;font-weight:700;border:1.5px solid var(--border);background:var(--bg3);color:var(--dim);cursor:pointer;white-space:nowrap;transition:all .15s}
.adisyon-person-tab.act{border-color:currentColor;background:rgba(255,255,255,.06)}
.adisyon-person-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:12px;margin-bottom:8px}
.adisyon-person-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.adisyon-person-name{font-size:13px;font-weight:700}
.adisyon-person-total{font-family:var(--font-d);font-size:20px;letter-spacing:1px;color:var(--green)}
.adisyon-item-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg3);border-radius:var(--r);margin-bottom:5px}
.adisyon-item-name{flex:1;font-size:13px}
.adisyon-item-price{font-family:var(--font-d);font-size:15px;color:var(--green)}
.adisyon-item-del{background:transparent;border:none;color:var(--faint);cursor:pointer;font-size:13px;padding:2px 6px}
.adisyon-item-del:active{color:var(--red)}
.adisyon-ortak-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg3);border-radius:var(--r);margin-bottom:5px}
.adisyon-ortak-badge{background:rgba(74,158,255,.15);border:1px solid rgba(74,158,255,.3);color:var(--blue);font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px}
.adisyon-total-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;text-align:center}
.adisyon-total-card-name{font-size:10px;color:var(--dim);font-weight:700;text-transform:uppercase;margin-bottom:3px}
.adisyon-total-card-val{font-family:var(--font-d);font-size:20px;color:var(--green)}
.iframe-wrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.iframe-wrap iframe{width:100%;height:340px;border:none;display:block}
.qr-links{width:100%;display:flex;flex-direction:column;gap:8px}
.qr-link-row{display:flex;align-items:center;gap:8px;background:var(--bg3);border-radius:var(--r);padding:10px 12px}
.qr-link-row span{font-size:11px;color:var(--dim);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace}
.cal-month-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-month-title{font-family:var(--font-d);font-size:20px;letter-spacing:1px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:16px}
.cal-header{font-size:10px;font-weight:700;text-align:center;color:var(--faint);text-transform:uppercase;padding:4px 0}
.cal-day{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;cursor:default;transition:all .15s;position:relative}
.cal-day.empty{background:transparent}
.cal-day.has-game{background:var(--red-bg);border:1px solid rgba(232,25,44,.3);color:var(--red);cursor:pointer}
.cal-day.has-game:active{background:var(--red);color:#fff}
.cal-day.today{border:1.5px solid var(--red)}
.cal-day.normal{background:var(--bg3);color:var(--faint)}
.cal-game-dot{width:5px;height:5px;border-radius:50%;background:var(--red);position:absolute;bottom:3px;left:50%;transform:translateX(-50%)}
.cal-day-detail{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:14px;margin-top:8px;display:none}
.cal-game-row{padding:10px;background:var(--bg3);border-radius:var(--r);margin-bottom:8px;cursor:pointer}
.cal-game-row:active{background:var(--bg2)}
.cal-game-code{font-family:var(--font-d);font-size:16px;letter-spacing:2px}
.cal-game-meta{font-size:11px;color:var(--dim);margin-top:2px}
.live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 1.5s infinite;will-change:opacity,transform}
.flash{animation:flash .35s ease}
@keyframes flash{0%,100%{}50%{opacity:.5}}
.nlbl{font-size:10px;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}
.ntext{font-size:14px;color:var(--text);line-height:1.6}
.viewer-notice{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;font-size:13px;color:var(--dim);margin-bottom:14px;display:none;align-items:center;gap:8px}
.viewer-notice.show{display:flex}
.admin-badge{background:rgba(229,9,20,.18);border:1px solid rgba(229,9,20,.4);color:var(--red);font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px}
.admin-actions{display:flex;gap:6px;flex-shrink:0}


@media(min-width:600px){
  .overlay{align-items:center;padding:20px}
  .modal{border-radius:var(--rl);max-height:88dvh}
  .hero-body{padding:48px 32px 56px}
  .section,.score-wrap,.wrap,.rhdr{padding-left:24px;padding-right:24px}
  .pgrid,.pgrid-4{grid-template-columns:repeat(4,1fr)}
  .sgrid{grid-template-columns:repeat(4,1fr)}
}

/* ── LOBİ ── */
.lobi-card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer;transition:background .12s}
.lobi-card:active{background:var(--bg2)}
.lobi-card:hover{border-color:rgba(74,158,255,.3);background:rgba(74,158,255,.04)}

/* ── LOBİ İLAN MODAL ── */
.ilan-form-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:16px;margin-bottom:12px}
.ilan-form-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);margin-bottom:12px}
.ilan-chat-bubble{padding:8px 12px;border-radius:12px;max-width:78%;font-size:13px;line-height:1.4;word-break:break-word;white-space:pre-wrap}
.ilan-chat-bubble.mine{background:var(--red);color:#fff;border-bottom-right-radius:3px}
.ilan-chat-bubble.theirs{background:var(--bg3);color:var(--text);border-bottom-left-radius:3px}
/* Tarih/saat her zaman ilgili mesajın sağında, küçük */
.ilan-chat-meta{font-size:9px;opacity:.55;white-space:nowrap;flex-shrink:0;align-self:flex-end;margin-bottom:2px}
.ilan-chat-wrap{display:flex;align-items:flex-end;gap:6px;margin-bottom:6px}
.ilan-chat-wrap.mine{justify-content:flex-end}
.ilan-chat-wrap.theirs{justify-content:flex-start}
.chat-box{height:260px;overflow-y:auto;padding:10px;background:var(--bg);border-radius:var(--r);border:1px solid var(--border);margin-bottom:8px;-webkit-overflow-scrolling:touch}
.dm-box{height:300px;overflow-y:auto;padding:10px;background:var(--bg);border-radius:var(--r);border:1px solid var(--border);margin-bottom:8px;-webkit-overflow-scrolling:touch}
.req-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.req-card .req-name{font-weight:700;flex:1}
.req-card .req-city{font-size:11px;color:var(--dim)}
.req-card .req-stats{font-size:11px;color:var(--faint)}
.req-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(245,166,35,.15);color:var(--amber);border:1px solid rgba(245,166,35,.3)}
.req-approve-btn{background:var(--green);color:#fff;padding:6px 14px;border-radius:var(--r);font-size:12px;font-weight:700;border:none;cursor:pointer}
.req-reject-btn{background:var(--red-bg);color:var(--red);border:1px solid rgba(232,25,44,.3);padding:6px 10px;border-radius:var(--r);font-size:12px;font-weight:700;cursor:pointer}
.lobi-btn-hero{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:var(--rl);background:linear-gradient(135deg,rgba(74,158,255,.15),rgba(74,158,255,.06));border:1.5px solid rgba(74,158,255,.35);color:var(--blue);font-size:15px;font-weight:700;cursor:pointer;transition:all .15s;margin-bottom:12px}
.lobi-btn-hero:active{opacity:.75;transform:scale(.97)}

/* ── TRIPTYCH DARK HOME ── */
#hp-mobile-nav{display:none;align-items:center;justify-content:space-between;padding:0 12px;height:38px;background:rgba(14,14,14,.97);border-bottom:1px solid var(--border);position:sticky;top:calc(var(--nav) + var(--safe-t));z-index:80}
#hp-mobile-nav .hp-dots{display:flex;gap:6px}
.hp-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);transition:background .2s,transform .2s,width .25s;cursor:pointer}
.hp-dot.active{background:var(--red);transform:scale(1.25);width:18px;border-radius:4px}
.hp-col-label{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--dim);text-transform:uppercase}
#homepage-triptych{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border)}
.hp-col{position:relative;padding:26px 20px 22px;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;min-height:calc(100dvh - var(--nav) - var(--safe-t))}
.hp-col:last-child{border-right:none}
.hp-col-glow{position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:400px;height:400px;border-radius:50%;pointer-events:none;transition:opacity .4s;opacity:1}
.hp-col:hover .hp-col-glow{opacity:1.4}
.hp-col-glow.red{background:radial-gradient(circle,rgba(232,25,44,.12) 0%,transparent 70%)}
.hp-col-glow.blue{background:radial-gradient(circle,rgba(74,158,255,.12) 0%,transparent 70%)}
.hp-col-glow.amber{background:radial-gradient(circle,rgba(245,166,35,.12) 0%,transparent 70%)}
.hp-col-num{font-size:10px;letter-spacing:3px;color:var(--faint);margin-bottom:18px;font-weight:700}
.hp-col-icon{font-size:30px;margin-bottom:10px;line-height:1}
.hp-col-title{font-family:var(--font-d);font-size:clamp(22px,3vw,34px);letter-spacing:2px;line-height:1;margin-bottom:10px}
.hp-col-title.red{color:var(--red)}
.hp-col-title.blue{color:var(--blue)}
.hp-col-title.amber{color:var(--amber)}
.hp-col-desc{font-size:12.5px;color:var(--dim);line-height:1.65;margin-bottom:18px;max-width:220px}
.hp-col-actions{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.hp-col-body{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column}
.hp-col-body::-webkit-scrollbar{width:3px}
.hp-col-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.hp-divider{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--faint);text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
/* Mini lobi kart */
.hp-lobi-mini{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:9px 11px;margin-bottom:7px;cursor:pointer;transition:background .12s,border-color .12s;display:flex;align-items:center;gap:8px}
.hp-lobi-mini:hover{background:var(--bg3);border-color:rgba(74,158,255,.3)}
/* Mini venue kart */
.hp-venue-mini{background:var(--bg2);border:1px solid rgba(245,166,35,.18);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;transition:border-color .2s}
.hp-venue-mini.hp-venue-highlighted{border-color:var(--amber);box-shadow:0 0 0 2px rgba(245,166,35,.18)}
.hp-venue-mini-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.hp-venue-mini-name{font-size:13px;font-weight:700;color:var(--amber)}
.hp-venue-capacity{font-size:11px;color:var(--faint);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.hp-fav-btn{background:transparent;border:none;padding:2px 4px;cursor:pointer;font-size:15px;line-height:1;opacity:.45;transition:opacity .15s;flex-shrink:0}
.hp-fav-btn.active{opacity:1}
.hp-venue-room-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-top:1px solid var(--border)}
/* Login CTA */
.hp-login-cta{background:rgba(74,158,255,.07);border:1px solid rgba(74,158,255,.18);border-radius:var(--rl);padding:18px;text-align:center}
/* Mekan sekme */
.hp-mekan-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:3px;margin-bottom:12px;flex-shrink:0}
.hp-mekan-tab{padding:7px;border-radius:7px;font-size:12px;font-weight:700;background:transparent;color:var(--dim);transition:all .15s;border:none;cursor:pointer}
.hp-mekan-tab.active{background:rgba(245,166,35,.9);color:#111}
/* Lobi filtre */
.hp-lobi-filters{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;flex-shrink:0}
.hp-lobi-filter-inp{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:12px;padding:7px 10px;border-radius:var(--r);transition:border-color .15s}
.hp-lobi-filter-inp:focus{border-color:var(--blue);outline:none}
.hp-lobi-filter-inp::placeholder{color:var(--faint)}
/* Venue oyuncu arama */
.hp-venue-search{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:12px;padding:8px 10px;border-radius:var(--r);margin-bottom:10px;flex-shrink:0}
.hp-venue-search::placeholder{color:var(--faint)}
/* Entry animations */
.hp-col{opacity:0;animation:hpColIn .5s ease forwards}
#hp-col-yazboz{animation-delay:.06s}
#hp-col-lobi{animation-delay:.14s}
#hp-col-mekan{animation-delay:.22s}
@keyframes hpColIn{to{opacity:1}}
/* Mobile */
@media(max-width:768px){
  #hp-mobile-nav{display:flex}
  #homepage-triptych{grid-template-columns:repeat(3,100%);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #homepage-triptych::-webkit-scrollbar{display:none}
  .hp-col{scroll-snap-align:start;border-right:none;border-bottom:1px solid var(--border);min-height:calc(100dvh - var(--nav) - var(--safe-t) - 38px)}
  .hp-col-desc{max-width:100%}
  .hp-lobi-filters{grid-template-columns:1fr 1fr 1fr}
}
/* ── Venue / Admin mod: sadece panel görünür ── */
body.mode-venue #homepage-triptych,
body.mode-venue #hp-mobile-nav,
body.mode-venue .stats,
body.mode-venue #lobi-section-wrapper,
body.mode-venue #panel-landing,
body.mode-venue #panel-mekan-choice,
body.mode-venue #panel-single-back,
body.mode-admin #homepage-triptych,
body.mode-admin #hp-mobile-nav,
body.mode-admin .stats,
body.mode-admin #lobi-section-wrapper,
body.mode-admin #panel-landing,
body.mode-admin #panel-mekan-choice,
body.mode-admin #panel-single-back{display:none!important}
body.mode-admin .hp-lobi-filter-inp {color: var(--text);}
body.mode-admin #venue-panel-section{display:none!important}
/* Kullanıcı yönetimi */
.user-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px;flex-wrap:wrap}
.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{font-size:10px;color:var(--dim)}
.user-actions{display:flex;gap:5px;flex-shrink:0}
.ban-badge{background:rgba(232,25,44,.15);border:1px solid rgba(232,25,44,.3);color:var(--red);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}

/* ═══════════════════════════════════════════════════
   LIGHT THEME
═══════════════════════════════════════════════════ */
body.light-theme{--bg:#ffffff;--bg1:#f7f7f7;--bg2:#efefef;--bg3:#e5e5e5;--text:#1a1a1a;--dim:#555;--faint:#888;--border:rgba(0,0,0,0.10)}
body.light-theme .nav{background:rgba(255,255,255,.97);border-bottom-color:rgba(0,0,0,.10)}
body.light-theme .nav-logo{color:#1a1a1a}
body.light-theme .loader{background:#f7f7f7}
body.light-theme .loader-logo{color:#1a1a1a}
body.light-theme #panel-single-back{background:rgba(248,248,248,.97);border-bottom-color:rgba(0,0,0,.10)}
body.light-theme .btn-ghost{border-color:rgba(0,0,0,.15);color:var(--text)}
body.light-theme .btn-ghost:hover{background:var(--bg3)}
body.light-theme .inp{background:var(--bg2);border-color:rgba(0,0,0,.15);color:var(--text)}
body.light-theme .inp::placeholder{color:var(--faint)}
body.light-theme .admin-panel-card{background:var(--bg2);border-color:var(--border)}
body.light-theme .admin-panel-title{color:var(--text);border-bottom-color:var(--border)}
body.light-theme .hp-col{background:var(--bg)}
body.light-theme .hp-col-glow{display:none}
body.light-theme .hp-col-num{color:var(--faint)}
body.light-theme .hp-col-desc{color:var(--dim)}
body.light-theme .skel{background:var(--bg3)}
body.light-theme .skel::after{display:none}
body.light-theme .sec-title{color:var(--text)}
body.light-theme .sec-head{border-bottom-color:var(--border)}

/* ═══════════════════════════════════════════════════
   PANEL LANDING — 3 dikey bölmeli ana sayfa girişi
═══════════════════════════════════════════════════ */
#panel-landing{position:fixed;top:calc(var(--nav) + var(--safe-t));left:0;right:0;bottom:0;z-index:15;display:flex;flex-direction:row;background:var(--bg1)}
.pl-panel{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 28px;position:relative;overflow:hidden;cursor:default;transition:flex .35s cubic-bezier(.4,0,.2,1),background .25s,transform .35s cubic-bezier(.4,0,.2,1);border-right:1px solid var(--border);background:var(--bg2);will-change:transform}
.pl-panel:last-child{border-right:none}
.pl-panel:hover{flex:1.2;background:var(--bg3);transform:translateY(-8px)}
/* İç ışıma (glow) katmanı — overflow:hidden nedeniyle inset shadow kullanılır, sadece opacity animasyonlanır (GPU-only) */
.pl-panel::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none;will-change:opacity}
#pl-p1::after{box-shadow:inset 0 0 0 1px rgba(232,25,44,.35),inset 0 0 50px -14px rgba(232,25,44,.65)}
#pl-p2::after{box-shadow:inset 0 0 0 1px rgba(59,130,246,.35),inset 0 0 50px -14px rgba(59,130,246,.65)}
#pl-p3::after{box-shadow:inset 0 0 0 1px rgba(245,166,35,.35),inset 0 0 50px -14px rgba(245,166,35,.65)}
#pl-p4::after{box-shadow:inset 0 0 0 1px rgba(62,207,110,.35),inset 0 0 50px -14px rgba(62,207,110,.65)}
.pl-panel:hover::after{opacity:1}
.pl-panel-content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:300px;width:100%;animation:plEnter .7s cubic-bezier(.16,1,.3,1) both}
#pl-p1 .pl-panel-content{animation-delay:.05s}
#pl-p2 .pl-panel-content{animation-delay:.18s}
#pl-p3 .pl-panel-content{animation-delay:.31s}
#pl-p4 .pl-panel-content{animation-delay:.44s}
@keyframes plEnter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.pl-accent{position:absolute;top:0;left:0;right:0;height:4px}
.pl-accent-red{background:linear-gradient(90deg,#e8192c,#ff6b6b)}
.pl-accent-blue{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.pl-accent-amber{background:linear-gradient(90deg,#f5a623,#fcd34d)}
.pl-accent-green{background:linear-gradient(90deg,#3ecf6e,#7ee8a8)}
.pl-num{font-family:var(--font-d);font-size:11px;letter-spacing:3px;color:var(--faint);margin-bottom:24px;align-self:flex-start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pl-icon{font-size:56px;margin-bottom:20px;line-height:1;display:inline-block;animation:plIconFloat 3.2s ease-in-out infinite;will-change:transform}
#pl-p2 .pl-icon{animation-delay:.3s}
#pl-p3 .pl-icon{animation-delay:.6s}
#pl-p4 .pl-icon{animation-delay:.9s}
@keyframes plIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes plIconWiggle{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(1.08) rotate(4deg)}100%{transform:scale(1.14) rotate(0)}}
.pl-panel:hover .pl-icon{animation:plIconWiggle .5s ease-in-out}
.pl-title{font-family:var(--font-d);font-size:clamp(24px,2.8vw,40px);color:var(--text);line-height:1.05;margin-bottom:14px;letter-spacing:-.5px;word-break:break-word;min-height:2.1em;display:flex;align-items:flex-end;justify-content:center}
.pl-desc{font-size:13px;color:var(--dim);line-height:1.7;margin-bottom:32px;max-width:240px;word-break:break-word;min-height:6.8em}
.pl-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:10px;font-size:14px;font-weight:700;border:none;cursor:pointer;letter-spacing:.2px;transition:transform .15s,box-shadow .15s;white-space:nowrap;max-width:100%}
.pl-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.32)}
.pl-btn:active{transform:translateY(0)}
.pl-btn-red{background:#e8192c;color:#fff}
.pl-btn-blue{background:#3b82f6;color:#fff}
.pl-btn-amber{background:#f5a623;color:#1a1a1a}
.pl-btn-green{background:#3ecf6e;color:#08210f}
.pl-arrow{display:inline-block;transition:transform .25s cubic-bezier(.4,0,.2,1);will-change:transform}
.pl-btn:hover .pl-arrow{transform:translateX(4px)}
/* Tablet (641–1024px) */
@media(min-width:641px) and (max-width:1024px){
  .pl-panel{padding:24px 16px}
  .pl-icon{font-size:38px;margin-bottom:14px}
  .pl-num{font-size:10px;margin-bottom:16px}
  .pl-title{font-size:clamp(18px,2.2vw,26px);margin-bottom:10px}
  .pl-desc{font-size:12px;margin-bottom:20px;max-width:180px}
  .pl-btn{padding:10px 16px;font-size:13px}
}
/* Mobil (≤640px) */
@media(max-width:640px){
  #panel-landing{position:relative;top:auto;bottom:auto;margin-top:calc(var(--nav) + var(--safe-t));height:auto;flex-direction:column;overflow-y:visible}
  .pl-panel{flex:none;min-height:auto;padding:28px 20px 32px;overflow:visible;justify-content:flex-start;border-right:none;border-bottom:1px solid var(--border)}
  .pl-panel:last-child{border-bottom:none}
  .pl-panel:hover{flex:none;background:var(--bg2)}
  .pl-panel-content{max-width:100%}
  .pl-icon{font-size:40px;margin-bottom:12px}
  .pl-num{font-size:10px;letter-spacing:2px;margin-bottom:14px}
  .pl-title{font-size:clamp(20px,5vw,28px);margin-bottom:10px}
  .pl-desc{max-width:100%;font-size:13px;margin-bottom:24px;min-height:0}
  .pl-btn{width:100%;justify-content:center}
}
/* Dokunmatik cihazlarda hover efekti kapatılır */
@media(hover:none){
  .pl-panel:hover{flex:1;background:var(--bg2);transform:none}
  .pl-panel:hover::after{opacity:0}
  .pl-panel:hover .pl-icon{animation:plIconFloat 3.2s ease-in-out infinite}
  .pl-btn:hover{transform:none;box-shadow:none}
  .pl-btn:hover .pl-arrow{transform:none}
  .pl-choice-card:hover{transform:none;box-shadow:none}
}
/* Hareket azaltma tercihi olan kullanıcılar için tüm dekoratif animasyonları kapat */
@media(prefers-reduced-motion:reduce){
  .pl-panel,.pl-panel-content,.pl-icon,.pl-arrow,.fab::before{animation:none!important;transition:none!important}
}
/* Light theme overrides */
body.light-theme #panel-landing{background:#f5f5f0}
body.light-theme .pl-panel{background:#faf9f6;border-right-color:#e0ddd8}
body.light-theme .pl-panel:hover{background:#fff}
body.light-theme .pl-num{color:#bbb}
body.light-theme .pl-title{color:#1a1a1a}
body.light-theme .pl-desc{color:#777}
@media(max-width:640px){body.light-theme .pl-panel{border-bottom-color:#e0ddd8}}
/* ─── Mekan rol seçimi ─── */
#panel-mekan-choice{margin-top:calc(var(--nav) + var(--safe-t));min-height:calc(100dvh - var(--nav) - var(--safe-t));flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;background:var(--bg);gap:28px}
.pl-choice-title{font-family:var(--font-d);font-size:clamp(20px,4vw,36px);color:var(--text);text-align:center;letter-spacing:-.3px;margin:0}
.pl-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:560px;width:100%}
@media(max-width:520px){.pl-choice-grid{grid-template-columns:1fr}}
.pl-choice-card{display:flex;flex-direction:column;align-items:center;padding:36px 24px;background:var(--bg2);border:2px solid var(--border);border-radius:16px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .15s;text-align:center;gap:10px}
.pl-choice-card:hover{border-color:#f5a623;box-shadow:0 8px 32px rgba(0,0,0,.3);transform:translateY(-3px)}
.pl-choice-icon{font-size:44px}
.pl-choice-label{font-size:17px;font-weight:800;color:var(--text)}
.pl-choice-desc{font-size:12px;color:var(--dim);line-height:1.6}
body.light-theme #panel-mekan-choice{background:#f5f5f0}
body.light-theme .pl-choice-card{background:#fff;border-color:#e8e4dd}
body.light-theme .pl-choice-label{color:#1a1a1a}
body.light-theme .pl-choice-desc{color:#888}
/* ─── Tek sütun geri butonu ─── */
#panel-single-back{margin-top:calc(var(--nav) + var(--safe-t));position:sticky;top:calc(var(--nav) + var(--safe-t));z-index:8;padding:10px 16px;background:rgba(14,14,14,.98);border-bottom:1px solid var(--border)}
body.light-theme #panel-single-back{background:rgba(250,250,250,.97);border-bottom-color:rgba(0,0,0,.1)}
.panel-back-btn{background:transparent;border:1px solid var(--border);color:var(--faint);font-size:13px;font-weight:700;cursor:pointer;padding:6px 14px;border-radius:8px;letter-spacing:.3px;transition:background .15s,color .15s}
.panel-back-btn:hover{background:var(--bg3);color:var(--text)}
/* Tek sütun modunda triptych tam genişlik, animasyon olmadan */
#homepage-triptych.single-col{grid-template-columns:1fr!important;overflow-x:visible!important}
#homepage-triptych.single-col .hp-col{max-width:800px;margin:0 auto;width:100%;border-right:none;animation:none;opacity:1}
/* ─── Admin / Venue panel nav offset fix ─── */
body.mode-admin #admin-panel-section{margin-top:calc(var(--nav) + var(--safe-t))}
body.mode-venue #venue-panel-section{margin-top:calc(var(--nav) + var(--safe-t))}

/* ═══════════════════════════════════════════════════
   04/OYNA — 101 OKEY MODÜLÜ
═══════════════════════════════════════════════════ */
#okey-module{position:fixed;top:calc(var(--nav) + var(--safe-t));left:0;right:0;bottom:0;z-index:16;background:var(--bg1);overflow-y:auto}
.okey-mode-card{flex:1;min-width:240px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:22px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:border-color .15s ease,transform .15s ease}
.okey-mode-card:hover{border-color:var(--red);transform:translateY(-2px)}
.okey-topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#241608,#150d05);flex-shrink:0}
/* Glassmorphism dokunuşu: fiziksel/skeuomorphic masanın aksine, üstte YÜZEN
   durum metni buzlu-cam bir kapsül içinde — "fiziksel masa + camsı UI katmanı"
   hibrit dilini kurar (istenen glassmorphism + skeuomorphism birlikteliği). */
#okey-status{
  padding:4px 12px; border-radius:20px; font-size:12px!important;
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14); box-shadow:0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
  color:#f3e6c4;
}
body.light-theme #okey-module{background:#f5f5f0}
body.light-theme .okey-mode-card{background:#fff;border-color:#e8e4dd}

/* Maç ayarları: El Sayısı / Puanlama / Yardım / Takım — segmentli seçim butonları */
.okey-match-settings{
  width:100%; max-width:520px; background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:10px;
}
.oms-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.oms-label{font-size:12.5px; font-weight:700; color:var(--dim); flex-shrink:0}
.oms-seg{display:flex; gap:4px; flex-wrap:wrap}
.oms-seg button{
  border:1px solid var(--border); background:var(--bg3); color:var(--dim);
  font-size:11.5px; font-weight:700; padding:6px 10px; border-radius:8px; cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.oms-seg button:hover{border-color:var(--red)}
.oms-seg button.active{background:var(--red); color:#fff; border-color:var(--red)}
.oms-number{width:80px; padding:6px 8px; text-align:center; font-weight:700}
body.light-theme .okey-match-settings{background:#fff;border-color:#e8e4dd}

/* Oda listesi (Odaya Katıl — filtrelenebilir açık oda kartları) */
.okey-room-card{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:12px 14px;
}
.okey-room-card-info{display:flex; flex-direction:column; gap:4px; text-align:left}
.okey-room-card-title{font-weight:800; font-size:13.5px}
.okey-room-card-badges{display:flex; gap:5px; flex-wrap:wrap}
.okey-room-badge{font-size:9.5px; font-weight:700; padding:3px 7px; border-radius:20px; background:var(--bg3); color:var(--dim); border:1px solid var(--border)}
.okey-room-empty{color:var(--dim); font-size:13px; text-align:center; padding:20px}
body.light-theme .okey-room-card{background:#fff;border-color:#e8e4dd}
body.light-theme .okey-room-badge{background:#f5f5f0}

/* ───────────────────────────────────────────────────
   KLASİK 101 OKEY — Hiper-gerçekçi ceviz/pirinç/fildişi masa konsepti
   (bkz. okey-hiper-gercekci-konsept.html — burada canlı oyuna entegre edilmiş hali)
─────────────────────────────────────────────────── */
/* NOT: kapsayıcı gerçek DOM'da id="okey-module" (class DEĞİL) — değişkenler
   :root'a da tanımlanır ki her ihtimalde (ör. modal/başka bağlam) erişilebilir olsun. */
:root, #okey-module{
  --ok-walnut-1:#8a5a2e; --ok-walnut-2:#5c3a1c; --ok-walnut-3:#3d2712; --ok-walnut-4:#241608;
  --ok-brass-1:#f6d98a; --ok-brass-2:#c99a3d; --ok-brass-3:#b8860b; --ok-brass-4:#7a5518; --ok-brass-5:#4a3410;
  --ok-ivory-1:#fffdf6; --ok-ivory-2:#f2e8cf; --ok-ivory-3:#e4d4a8;
  --ok-felt-1:#2f8a5a; --ok-felt-2:#1c6142; --ok-felt-3:#0c3521; --ok-felt-4:#041a10;
}
/* §3e: "Facebook oyunu" hissi veren düz mavi yerine, gerçek bir okey salonunda
   oturuyormuş hissi — loş/sıcak oda ambiyansı + tepeden vuran sıcak masa lambası. */
/* §Zero-Scroll: overflow:auto DEĞİL, KESİN overflow:hidden — hiçbir koşulda
   dikey/yatay kaydırma çubuğu belirmez (kompakt mobil düzen + 2.5D eğimin
   SADECE masaüstünde açılması bu garantiyi güvenle mümkün kılıyor). */
.oc-wallpaper{
  position:relative; flex:1; min-height:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:14px;
  background-color:#1a120c;
  background-image:
    radial-gradient(ellipse at 50% 12%, rgba(255,214,140,.14), transparent 55%),
    linear-gradient(160deg,#241a10,#140d08 60%,#0a0605);
}
/* §2.5D perspektif: SADECE masaüstü/tablet'te (bkz. altındaki min-width sorgusu) —
   mobilde dikey alan zaten kısıtlı, eğimin perspektif kısalması "sıfır kaydırma"
   garantisini riske atabileceği için mobilde masa tamamen düz kalır. */
@media(min-width:821px){
  .oc-wallpaper{ perspective:1900px; }
  .oc-layout{ transform:rotateX(6deg); transform-style:preserve-3d; }
}
/* Oyun masası: sabit 16:9 oranlı, en fazla 1200px genişliğinde, ekrana ortalanmış kutu.
   §BUG-FIX: çerçeve kalınlığı ARTIK 4 kenarda EŞİT (18px) — eskiden üst 26px,
   yanlar/alt 14px idi, bu da köşelerde "orantısız/birleşmeyen" bir çerçeve
   hissi veriyordu. Ayrıca diyagonal (115deg) dokulu grain deseni köşelerde
   kesilip dikiş/seam gibi görünüyordu — RADYAL bir doku ile değiştirildi
   (yönü olmadığı için hiçbir köşede kesilme/dikiş oluşmaz, tamamen kusursuz
   sarar). Zengin ceviz kenarlık (cila yansımalı çoklu gölge) + içte yeşil
   çuha, vignette'li. */
.oc-layout{
  position:relative; width:100%; max-width:1200px; aspect-ratio:16/9; flex-shrink:0;
  display:flex; flex-direction:column; gap:6px; margin:0 auto;
  border-radius:26px; padding:18px;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.06), transparent 40%),
    radial-gradient(circle at 80% 85%, rgba(0,0,0,.1), transparent 40%),
    linear-gradient(160deg, var(--ok-walnut-1), var(--ok-walnut-2) 45%, var(--ok-walnut-3) 100%);
  box-shadow:
    0 22px 50px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,224,170,.18),   /* çerçevenin İÇ kenarını sarıp köşelerde tam birleşen ince ışık çizgisi */
    inset 0 3px 3px rgba(255,224,170,.25),   /* cila yansıması — üst kenar */
    inset 0 -10px 18px rgba(0,0,0,.6),        /* ahşap kalınlığı — alt gölge */
    inset 0 0 0 2px rgba(0,0,0,.4);
}
.oc-layout::before{ /* içteki yeşil çuha + vignette (masa kenarlığından ayrı katman) */
  content:''; position:absolute; inset:18px; border-radius:14px; z-index:0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.03), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.025), transparent 45%),
    radial-gradient(ellipse at 50% 36%, transparent 30%, rgba(0,0,0,.5) 100%),
    radial-gradient(ellipse at 50% 36%, var(--ok-felt-1) 0%, var(--ok-felt-2) 42%, var(--ok-felt-3) 78%, var(--ok-felt-4) 100%);
  box-shadow:inset 0 0 4px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.35);
}
.oc-layout > *{ position:relative; z-index:1; } /* çuha katmanının ÜSTÜNDE kalsın */

/* Dekoratif Türk kahvesi fincanı — üst avatarın soluna (masanın boş çuha
   alanına), tamamen dekoratif (pointer-events:none, tıklanamaz). */
.coffee-corner{ position:absolute; z-index:3; top:14px; left:min(14%,150px); width:52px; height:52px; pointer-events:none; }
.coffee-corner .saucer{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:48px; height:11px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%, #fff, #d9cdb3 70%);
  box-shadow:0 3px 6px rgba(0,0,0,.5), inset 0 -2px 3px rgba(0,0,0,.15);
}
.coffee-corner .cup{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:26px; height:24px; border-radius:3px 3px 12px 12px;
  background:linear-gradient(160deg, var(--ok-ivory-1,#fffdf6), var(--ok-ivory-3,#e4d4a8));
  box-shadow:inset 0 -5px 6px rgba(0,0,0,.15), 0 2px 5px rgba(0,0,0,.4);
}
.coffee-corner .cup-handle{ position:absolute; right:-7px; top:4px; width:9px; height:11px; border:2.5px solid var(--ok-ivory-3,#e4d4a8); border-left:none; border-radius:0 7px 7px 0; }
.coffee-corner .coffee-surface{ position:absolute; top:1px; left:2px; right:2px; height:6px; border-radius:50%; background:radial-gradient(ellipse at 40% 30%, #6b4227, #2c1810 80%); }
.coffee-corner .steam{ position:absolute; top:-11px; width:2.5px; height:13px; border-radius:3px; background:linear-gradient(rgba(255,255,255,.5),transparent); animation:ocSteamRise 2.4s ease-in-out infinite; opacity:.65; }
.coffee-corner .steam.s1{ left:8px; animation-delay:0s; }
.coffee-corner .steam.s2{ left:16px; animation-delay:1.1s; }
@keyframes ocSteamRise{
  0%{ transform:translateY(0) scaleY(1); opacity:.55 }
  50%{ transform:translateY(-8px) scaleY(1.25); opacity:.85 }
  100%{ transform:translateY(-16px) scaleY(1); opacity:0 }
}
@media(max-width:820px){ .coffee-corner{ display:none; } } /* dar ekranda yer bırakmak için gizle */

/* 4 köşe avatar kutuları — fildişi kart + ince pirinç çerçeve */
.oc-avatar{
  position:absolute; z-index:5; width:88px; border-radius:12px;
  padding:6px 6px 5px; text-align:center;
  background:linear-gradient(160deg, var(--ok-ivory-1), var(--ok-ivory-2));
  box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.8);
  border:2px solid var(--ok-brass-3);
}
.oc-avatar-top{top:4px; left:50%; transform:translateX(-50%)}
.oc-avatar-left{top:50%; left:4px; transform:translateY(-50%)}
.oc-avatar-right{top:50%; right:4px; transform:translateY(-50%)}
/* Yerel oyuncu avatarı artık ıstakanın İÇİNDE/ÜSTÜNDE değil — rack'in sol dışında,
   diğer avatarlar gibi bağımsız bir kutu olarak durur (bkz. .oc-rack-outer). */
/* position:relative (static DEĞİL) — .oc-timer-ring'in absolute konumlanması için
   hâlâ bir "positioned ancestor" olmalı, sadece artık normal flex akışında bir kutu. */
.oc-avatar-me{position:relative; width:92px; flex-shrink:0; transform:none; display:flex; flex-direction:column; justify-content:center}
.oc-avatar-photo{
  width:40px; height:40px; margin:2px auto 3px; border-radius:50%;
  background:linear-gradient(160deg,#5a6b82,#2e3a4a); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:16px; position:relative; z-index:1;
}
/* §Bot avatarı — steampunk pirinç plaka: 4 köşe perçin (tek background-image
   katmanında) + döner dişli rozeti + neon "cam göz" hissi veren metin gölgesi. */
.oc-avatar.is-bot .oc-avatar-photo{
  color:#3a2604; text-shadow:0 0 5px rgba(90,220,255,.65);
  background-image:
    radial-gradient(circle at 7px 7px, #fff6da 0%, #8a621c 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 7px) 7px, #fff6da 0%, #8a621c 55%, transparent 58%),
    radial-gradient(circle at 7px calc(100% - 7px), #fff6da 0%, #8a621c 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #fff6da 0%, #8a621c 55%, transparent 58%),
    conic-gradient(from 200deg, var(--ok-brass-1), var(--ok-brass-3) 30%, var(--ok-brass-4) 55%, var(--ok-brass-1) 80%, var(--ok-brass-2));
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.5),
    inset 0 -3px 6px rgba(0,0,0,.55),
    0 3px 6px rgba(0,0,0,.5);
}
.oc-avatar.is-bot .oc-avatar-photo::after{ /* döner dişli rozeti */
  content:''; position:absolute; bottom:-3px; right:-3px; width:15px; height:15px; border-radius:50%;
  background:conic-gradient(var(--ok-brass-1) 0 10%, var(--ok-brass-4) 10% 20%, var(--ok-brass-1) 20% 30%, var(--ok-brass-4) 30% 40%, var(--ok-brass-1) 40% 50%, var(--ok-brass-4) 50% 60%, var(--ok-brass-1) 60% 70%, var(--ok-brass-4) 70% 80%, var(--ok-brass-1) 80% 90%, var(--ok-brass-4) 90% 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.55), inset 0 0 0 2px var(--ok-brass-5);
  animation:ocGearSpin 6s linear infinite;
}
@keyframes ocGearSpin{ to{ transform:rotate(360deg); } }
/* §3f: isimler kırpılmadan (ellipsis olmadan) TAM görünsün — gerekirse 2 satıra sarar. */
.oc-avatar-name{font-size:10.5px;font-weight:800;color:#1a2230;white-space:normal;word-break:break-word;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oc-avatar-stats{font-size:9.5px;color:#5a6472;font-weight:700}
/* 15 saniyelik sıra halkası: conic-gradient ile dolan/azalan yay */
.oc-timer-ring{
  position:absolute; top:-3px; left:50%; transform:translateX(-50%);
  width:48px; height:48px; border-radius:50%;
  background:conic-gradient(#e8192c 0deg, transparent 0deg);
  display:none; align-items:center; justify-content:center; z-index:0;
}
.oc-timer-ring.active{display:flex}
.oc-timer-inner{width:42px;height:42px;border-radius:50%;background:#fff}
.oc-avatar.turn{box-shadow:0 0 0 3px #f5c518,0 4px 10px rgba(0,0,0,.4)}

/* Orta gövde: per masası (sol) + yan panel (sağ).
   §BUG-FIX: üst köşedeki avatar position:absolute olduğu için normal akışta yer
   kaplamıyordu — bu da onun altındaki içerikle (per masasının üst kenarı)
   ÇAKIŞMASINA sebep oluyordu. padding-top, sol/sağ avatarlarla AYNI mantıkla
   üst avatarın yüksekliğini (yaklaşık) telafi eder. */
.oc-main{flex:1; min-height:0; display:flex; gap:6px; padding:94px 96px 0}
.oc-meld-area{
  flex:1; min-width:0; position:relative; border-radius:10px; overflow:hidden;
  background:rgba(8,35,22,.5);
  border:1px solid rgba(255,213,140,.18);
  box-shadow:inset 0 0 18px rgba(0,0,0,.35);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
}
.oc-watermark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:min(18vw,120px); font-weight:900; color:rgba(255,255,255,.05);
  letter-spacing:4px; pointer-events:none; user-select:none;
}
/* §3a: 4 oyuncunun açtığı per/çiftler AYNI ANDA, tek tek aşağı kaydırmaya
   gerek kalmadan görünsün diye per masası 2x2 çeyreklere bölünür — her
   çeyrek kendi oyuncusuna ait, kendi içinde (gerekirse) bağımsız kayar. */
.oc-meld-grid{
  position:relative; z-index:1; height:100%; padding:6px; box-sizing:border-box;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px;
}
.oc-meld-quad{
  display:flex; flex-direction:column; min-height:0; min-width:0;
  border-radius:8px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
}
.oc-meld-quad.active-turn{border-color:rgba(245,197,24,.65); box-shadow:0 0 0 1px rgba(245,197,24,.4) inset}
.oc-meld-quad-header{
  flex-shrink:0; font-size:9.5px; font-weight:800; color:rgba(255,255,255,.8);
  padding:3px 6px; background:rgba(0,0,0,.2); border-bottom:1px solid rgba(255,255,255,.1);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; line-height:1.15;
}
/* §5: "kaydırma olmasın" — taşlar küçültülüp boşluklar sıkılaştırılarak normal
   el büyüklüklerinde scroll'a hiç gerek kalmaz; ekstrem durumlarda (çok sayıda
   per) son çare olarak İNCE, tema ile uyumlu bir scrollbar'a düşer (varsayılan
   kalın Windows scrollbar'ı yerine). */
.oc-meld-quad-body{flex:1; min-height:0; overflow-y:auto; padding:4px; display:flex; flex-direction:column; gap:3px}
.oc-meld-quad-body::-webkit-scrollbar{width:5px}
.oc-meld-quad-body::-webkit-scrollbar-track{background:transparent}
.oc-meld-quad-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25); border-radius:3px}
.oc-meld-quad-empty{font-size:9px; color:rgba(255,255,255,.35); font-style:italic; padding:3px 2px}
.oc-meld-row{display:flex; flex-wrap:wrap; gap:2px; padding:2px; border-radius:5px; background:rgba(255,255,255,.05)}

/* overflow-y:auto: her şey ekrana sığmalı — çok kısa ekranlarda bile hiçbir
   buton erişilemez şekilde kesilip kaybolmasın, gerekirse panel içi kayar. */
.oc-side-panel{width:120px; flex-shrink:0; display:flex; flex-direction:column; gap:5px; overflow-y:auto; min-height:0}
/* Referans ("101 Okey Plus"): mod göstergeleri lacivert, dikey istiflenmiş dikdörtgen
   düğmeler gibi durur — aktif olan (Katlamalı) koyu kırmızıyla vurgulanır. */
.oc-mode-badges{display:flex; flex-direction:column; gap:3px}
.oc-badge{
  font-size:9.5px; font-weight:800; color:#dce8f5; padding:6px 4px; text-align:center;
  border-radius:5px; background:linear-gradient(180deg,#1c3f66,#122a48);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 2px 3px rgba(0,0,0,.35);
}
.oc-badge-blue{background:linear-gradient(180deg,#2d5d8f,#1c3f66)}
.oc-badge-green{background:linear-gradient(180deg,#2fa87a,#187a52); color:#fff; border-color:rgba(255,255,255,.25)}
.oc-badge-red{background:linear-gradient(180deg,#c0392b,#8c2a1f); color:#fff; border-color:rgba(255,255,255,.25)}

.oc-deck-zone{display:flex; flex-direction:column; align-items:center; gap:4px}
.oc-indicator{
  width:38px;height:52px;border-radius:6px;background:#fdf8ec;
  box-shadow:0 3px 6px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;
  border:1px solid rgba(0,0,0,.15);
}
.oc-deck{
  position:relative; width:44px; height:58px; border-radius:6px; cursor:pointer;
  background:linear-gradient(160deg,#3b4a5e,#1c2733);
  box-shadow:0 2px 0 #0f151c,0 5px 0 #0f151c,0 9px 14px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  transition:transform .1s ease;
}
.oc-deck::before,.oc-deck::after{
  content:''; position:absolute; inset:0; border-radius:6px;
  background:linear-gradient(160deg,#3b4a5e,#1c2733); z-index:-1;
}
.oc-deck::before{transform:translate(3px,3px)}
.oc-deck::after{transform:translate(6px,6px)}
.oc-deck:active{transform:translateY(2px)}
.oc-deck-count{color:#fff;font-weight:900;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* Her oyuncunun KENDİ SAĞINA attığı atık slotu — 4 köşede, saat yönünde.
   Sadece "pickable" (şu an çekilebilir — bir önceki oyuncunun taşı) olan
   slot altın çerçeveyle vurgulanır; diğerleri sadece bilgi amaçlı durur. */
.oc-discard-slot{
  position:absolute; z-index:4; width:38px; height:52px;
  border:2px dashed rgba(255,255,255,.3); border-radius:6px;
  background:rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:center;
}
.oc-discard-slot.pickable{border-color:#f5c518; border-style:solid; box-shadow:0 0 0 2px rgba(245,197,24,.35); cursor:pointer}
/* §BUG-FIX: .oc-rack-outer yüksekliği 28%→24% olarak güncellenmişti, bu
   offsetler eski değere göre kalmıştı (rack ile hafif hizasızlık) — düzeltildi. */
.oc-discard-slot-0{bottom:calc(24% + 10px); right:8px}
.oc-discard-slot-1{top:8px; right:8px}
.oc-discard-slot-2{top:8px; left:8px}
.oc-discard-slot-3{bottom:calc(24% + 10px); left:8px}

.oc-actions{display:flex; flex-direction:column; gap:7px; margin-top:auto}
/* Pirinç/emaye levha butonlar — 4 köşe perçin TEK background-image katmanında
   (ekstra DOM elemanı gerekmeden), fiziksel/ağır bir metale basma hissi veren
   çok katmanlı box-shadow + :active'de gerçek "basılma" (translateY + gölge çöküşü). */
.oc-actions button{
  border:none;border-radius:9px;padding:11px 4px;font-size:11.5px;font-weight:800;
  color:#3a2604;cursor:pointer; letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(255,255,255,.45), 0 -1px 0 rgba(0,0,0,.2);
  background-image:
    radial-gradient(circle at 6px 6px, #fff6da 0%, #8a621c 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) 6px, #fff6da 0%, #8a621c 55%, transparent 58%),
    radial-gradient(circle at 6px calc(100% - 6px), #fff6da 0%, #8a621c 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #fff6da 0%, #8a621c 55%, transparent 58%),
    linear-gradient(155deg, var(--ok-brass-1,#f6d98a), var(--ok-brass-3,#b8860b) 50%, var(--ok-brass-4,#7a5518) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -3px 5px rgba(60,40,5,.45),
    0 5px 0 var(--ok-brass-5,#4a3410),
    0 8px 12px rgba(0,0,0,.5);
  transition:transform .08s ease,box-shadow .08s ease,filter .08s ease;
  font-family:'DM Sans',Arial,sans-serif;
}
.oc-actions button:hover:not(:disabled){filter:brightness(1.08)}
.oc-actions button:active:not(:disabled){
  transform:translateY(4px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -2px 4px rgba(60,40,5,.55),
    0 1px 0 var(--ok-brass-5,#4a3410),
    0 3px 5px rgba(0,0,0,.45);
}
.oc-actions button:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.4)}
/* Aksiyona göre "emaye" renk katmanı — rivetler/malzeme hissi hep aynı kalır,
   sadece ana metal katmanının rengi değişir (fonksiyonel renk kodlaması korunur). */
#oc-btn-run{
  color:#053b28;
  background-image:
    radial-gradient(circle at 6px 6px, #eafff2 0%, #0f6b4d 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) 6px, #eafff2 0%, #0f6b4d 55%, transparent 58%),
    radial-gradient(circle at 6px calc(100% - 6px), #eafff2 0%, #0f6b4d 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #eafff2 0%, #0f6b4d 55%, transparent 58%),
    linear-gradient(155deg,#6be0bd,#1e9e73 55%,#0f6b4d);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 5px rgba(6,50,35,.4), 0 5px 0 #0a4530, 0 8px 12px rgba(0,0,0,.5);
}
#oc-btn-run:active:not(:disabled){box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(6,50,35,.5), 0 1px 0 #0a4530, 0 3px 5px rgba(0,0,0,.45)}
#oc-btn-pair{
  color:#fff;
  background-image:
    radial-gradient(circle at 6px 6px, #f3e6ff 0%, #5e1fa3 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) 6px, #f3e6ff 0%, #5e1fa3 55%, transparent 58%),
    radial-gradient(circle at 6px calc(100% - 6px), #f3e6ff 0%, #5e1fa3 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #f3e6ff 0%, #5e1fa3 55%, transparent 58%),
    linear-gradient(155deg,#c9a6ff,#8b3ce0 55%,#5e1fa3);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 5px rgba(45,10,70,.4), 0 5px 0 #3d1470, 0 8px 12px rgba(0,0,0,.5);
}
#oc-btn-pair:active:not(:disabled){box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(45,10,70,.5), 0 1px 0 #3d1470, 0 3px 5px rgba(0,0,0,.45)}
#oc-btn-discard{
  color:#fff;
  background-image:
    radial-gradient(circle at 6px 6px, #e6f4ff 0%, #1c5a80 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) 6px, #e6f4ff 0%, #1c5a80 55%, transparent 58%),
    radial-gradient(circle at 6px calc(100% - 6px), #e6f4ff 0%, #1c5a80 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #e6f4ff 0%, #1c5a80 55%, transparent 58%),
    linear-gradient(155deg,#8fc7ff,#2980b9 55%,#1c5a80);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 5px rgba(8,35,55,.4), 0 5px 0 #123c54, 0 8px 12px rgba(0,0,0,.5);
}
#oc-btn-discard:active:not(:disabled){box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(8,35,55,.5), 0 1px 0 #123c54, 0 3px 5px rgba(0,0,0,.45)}
#oc-btn-undo{
  color:#4a2c00;
  background-image:
    radial-gradient(circle at 6px 6px, #fff4dc 0%, #a06616 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) 6px, #fff4dc 0%, #a06616 55%, transparent 58%),
    radial-gradient(circle at 6px calc(100% - 6px), #fff4dc 0%, #a06616 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #fff4dc 0%, #a06616 55%, transparent 58%),
    linear-gradient(155deg,#ffcf7a,#e0972a 55%,#a06616);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 5px rgba(70,40,5,.4), 0 5px 0 #6b4410, 0 8px 12px rgba(0,0,0,.5);
}
#oc-btn-undo:active:not(:disabled){box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(70,40,5,.5), 0 1px 0 #6b4410, 0 3px 5px rgba(0,0,0,.45)}
#oc-btn-process{
  color:#04302e;
  background-image:
    radial-gradient(circle at 6px 6px, #e0fffc 0%, #106664 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) 6px, #e0fffc 0%, #106664 55%, transparent 58%),
    radial-gradient(circle at 6px calc(100% - 6px), #e0fffc 0%, #106664 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #e0fffc 0%, #106664 55%, transparent 58%),
    linear-gradient(155deg,#7de3e0,#1f9e9a 55%,#106664);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 5px rgba(5,45,45,.4), 0 5px 0 #0a4442, 0 8px 12px rgba(0,0,0,.5);
}
#oc-btn-process:active:not(:disabled){box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(5,45,45,.5), 0 1px 0 #0a4442, 0 3px 5px rgba(0,0,0,.45)}
.oc-btn-finish{
  color:#fff !important;
  background-image:
    radial-gradient(circle at 6px 6px, #ffe0e0 0%, #8c0e19 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) 6px, #ffe0e0 0%, #8c0e19 55%, transparent 58%),
    radial-gradient(circle at 6px calc(100% - 6px), #ffe0e0 0%, #8c0e19 55%, transparent 58%),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #ffe0e0 0%, #8c0e19 55%, transparent 58%),
    linear-gradient(155deg,#ff8a8a,#e8192c 55%,#8c0e19) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 5px rgba(60,5,10,.4), 0 5px 0 #5e0a12, 0 8px 12px rgba(0,0,0,.5) !important;
}
.oc-btn-finish:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 4px rgba(60,5,10,.5), 0 1px 0 #5e0a12, 0 3px 5px rgba(0,0,0,.45) !important}

/* §3: masaya GÖMÜLÜ, pirinç çerçeveli "analog skor paneli" şeridi — per
   masası ile ıstaka arasındaki kopukluğu gidermek için ikisini de görsel
   olarak birbirine bağlayan tek bir pirinç kenarlıklı oyuk/panel. */
.oc-score-strip{
  display:flex; gap:8px; justify-content:center; align-items:center;
  padding:4px 10px; border-radius:10px; flex-shrink:0;
  background:rgba(0,0,0,.28);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.55),           /* çuhaya OYULMUŞ panel hissi */
    inset 0 0 0 1px var(--ok-brass-4,#7a5518),
    inset 0 0 0 2px rgba(0,0,0,.3),
    0 1px 0 rgba(255,224,170,.12);
}
.oc-point-counter{
  align-self:center; font-size:11.5px; font-weight:800; letter-spacing:.3px;
  font-family:'DM Sans',Arial,sans-serif;
  color:var(--ok-brass-1,#f6d98a); background:#0c0c0c;
  padding:4px 14px; border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 5px rgba(0,0,0,.7), 0 0 6px rgba(246,217,138,.15);
  text-shadow:0 0 4px rgba(246,217,138,.5); /* hafif "gösterge ışığı" parıltısı */
}
.oc-point-counter.can-open{color:#8affb0; text-shadow:0 0 6px rgba(138,255,176,.55)}
/* Açılış sonrası: elde kalan taşların (berabere/kaybetme riskini gösteren) toplam değeri */
.oc-point-counter-remaining{color:#ffb066; text-shadow:0 0 5px rgba(255,176,102,.4)}

/* Alt satır: [bağımsız oyuncu avatarı] + [ıstaka bloğu] yan yana, avatar rack'in dışında */
.oc-rack-outer{flex-shrink:0; display:flex; align-items:stretch; gap:8px; height:24%; min-height:130px}
/* Alt: 2 katlı ahşap rack + kenar butonları */
.oc-rack-wrap{flex:1; min-width:0; display:flex; align-items:stretch; gap:0}
.oc-rack-btn{
  width:34px; flex-shrink:0; border:none; cursor:pointer;
  color:#3a2604; font-size:10px; font-weight:900; letter-spacing:.5px;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  background-image:linear-gradient(180deg, var(--ok-brass-1,#f6d98a), var(--ok-brass-3,#b8860b) 50%, var(--ok-brass-4,#7a5518) 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.4),inset 0 -3px 5px rgba(60,40,5,.5);
  transition:filter .1s ease;
}
.oc-rack-btn:hover{filter:brightness(1.25)}
.oc-rack-btn:active{filter:brightness(.85)}
.oc-rack-btn-left{border-radius:10px 0 0 10px}
.oc-rack-btn-right{border-radius:0 10px 10px 0}
/* Zengin ceviz ıstaka — masa kenarlığıyla AYNI malzeme dili (bkz. .oc-layout),
   ince dokulu çizgiler + cila yansıması + kalınlık hissi veren çoklu gölge. */
.oc-rack{
  flex:1; min-width:0; position:relative; touch-action:none; overflow:hidden;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, var(--ok-walnut-1,#8a5a2e), var(--ok-walnut-2,#5c3a1c) 45%, var(--ok-walnut-3,#3d2712) 100%);
  border-top:3px solid var(--ok-brass-2,#c99a3d); border-bottom:4px solid var(--ok-walnut-4,#241608);
  box-shadow:inset 0 3px 6px rgba(255,224,170,.3),inset 0 -8px 14px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.5);
  display:grid; grid-template-rows:1fr 1fr; gap:5px; padding:7px 8px;
}
/* Cilalı ahşap parlaklık şeridi (üstte ince) */
.oc-rack::before{
  content:''; position:absolute; top:0; left:0; right:0; height:35%;
  background:linear-gradient(180deg, rgba(255,224,170,.18), transparent);
  pointer-events:none;
}
/* Tepe lambası spot ışığı — sıra bendeyken ıstakanın üzerine sıcak bir ışık
   odaklanır (yumuşakça nabız gibi atan bir parlaklık), sırası gelmeyince
   tamamen görünmez olur. */
.oc-rack::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:radial-gradient(ellipse at 50% -25%, rgba(255,224,170,0) 0%, rgba(255,224,170,0) 70%);
  opacity:0; transition:opacity .5s ease;
}
.oc-rack.spotlight-turn::after{
  background:radial-gradient(ellipse at 50% -25%, rgba(255,224,170,.5) 0%, rgba(255,224,170,.08) 45%, rgba(255,224,170,0) 75%);
  opacity:1; animation:ocSpotlightPulse 2.6s ease-in-out infinite;
}
@keyframes ocSpotlightPulse{ 0%,100%{ opacity:.75 } 50%{ opacity:1 } }
.oc-rack-row{position:relative; z-index:1; display:flex; gap:5px}
.oc-rack-slot{
  flex:1; min-width:0; position:relative; border-radius:4px;
  background:rgba(0,0,0,.1);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
}

/* Taşlar — fildişi/polimer hissiyatı: hafif yuvarlak köşe, dışbükey (kabartma)
   his veren çoklu inset gölge (üst ışık/alt-yan gölge) + zemine düşen gerçek
   drop-shadow. Kalın "yastık" değil, tok/sert bir polimer taş hissi hedefi. */
/* §PERFORMANS: 5 katmanlı box-shadow (dört inset + bir drop) 3'e indirildi —
   taşlar HER hamlede (bot turları dahil) onlarca kez yeniden kurulduğu için
   katman sayısı doğrudan kasma maliyetine dönüşüyordu. Görsel fark ihmal
   edilebilir, stil-hesaplama/paint maliyeti belirgin şekilde azalır. */
.oc-tile{
  position:absolute; inset:2px; border-radius:5px;
  background:linear-gradient(155deg, var(--ok-ivory-1, #fffdf6) 0%, var(--ok-ivory-2, #f2e8cf) 55%, var(--ok-ivory-3, #e4d4a8) 100%);
  border:1px solid rgba(90,65,25,.35);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -3px 5px rgba(120,95,45,.3),
    0 3px 5px rgba(0,0,0,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:900; cursor:grab; user-select:none; transition:box-shadow .12s ease,transform .12s ease;
  perspective:300px; touch-action:none;
}
.oc-tile.dragging{box-shadow:inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 5px rgba(120,95,45,.3), 0 12px 18px rgba(0,0,0,.6);transform:translateY(-4px) scale(1.06);z-index:20;cursor:grabbing}
.oc-tile.selected{outline:3px solid #3ecf6e;outline-offset:-3px}
/* Yardımlı mod: rack'te şu an GEÇERLİ bir per/gruba ait taşlar sürekli
   altın bir parıltıyla vurgulanır — Seri Diz'e basmadan da fark edilir. */
.oc-tile.assist-valid{box-shadow:0 0 0 2px #f5c518, 0 4px 7px rgba(0,0,0,.45)}
/* §2c: Yardımlı mod — "işlek" (masadaki bir gruba işlenebilecek) taşın üstünde kırmızı yıldız */
.oc-tile-workable-star{
  position:absolute; top:-6px; right:-5px; z-index:5;
  width:15px; height:15px; border-radius:50%;
  background:#e8192c; color:#fff; font-size:10px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.6);
  pointer-events:none; animation:oc-workable-pulse 1.6s ease-in-out infinite;
}
@keyframes oc-workable-pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.18); }
}
.oc-tile-num{font-size:18px;line-height:1;font-weight:900}
.oc-tile-dot{width:6px;height:6px;border-radius:50%;margin-top:2px}
.oc-tile-star{color:#d4a017;font-size:18px}
.oc-tile.flipped .oc-tile-face{transform:rotateY(180deg)}
.oc-tile-face{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .35s ease;transform-style:preserve-3d}
/* §PERFORMANS: aşınmış boya/çizik dokusu ÖNCEKİ turda mix-blend-mode ile
   yapılmıştı — onlarca taş her hamlede (bot turları dahil) yeniden kurulduğu
   için, HER taşta izole bir compositing katmanı zorlayan mix-blend-mode
   belirgin kasmaya sebep oluyordu. Aynı "aşınma" hissi burada mix-blend-mode
   OLMADAN, düz (çok ucuz) yarı saydam gradyanlarla veriliyor. */
.oc-tile-face::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(105deg, transparent 22%, rgba(120,95,45,.16) 23%, transparent 24.5%),
    linear-gradient(74deg, transparent 58%, rgba(120,95,45,.12) 59%, transparent 60.5%);
}
.oc-tile-back{
  position:absolute; inset:0; border-radius:5px; backface-visibility:hidden; transform:rotateY(180deg);
  background:linear-gradient(135deg, var(--ok-walnut-1,#8a5a2e), var(--ok-walnut-3,#3d2712));
  box-shadow:inset 0 2px 3px rgba(255,214,140,.25), inset 0 -3px 5px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
}
.oc-tile-back::after{content:'★';color:rgba(246,217,138,.6);font-size:14px}
/* §5: okey (gerçek/sahte) taşı çift tıklanınca DÜZ BEYAZ taş olarak çevrilir — diğer taşlar mor kalır */
.oc-tile.is-okey .oc-tile-back{background:#fdfdfd; border:1px solid rgba(0,0,0,.15)}
.oc-tile.is-okey .oc-tile-back::after{content:none}

/* Animasyonlar */
@keyframes ocFlyIn{from{transform:translate(var(--fx,0),var(--fy,0)) scale(.6);opacity:.3}to{transform:translate(0,0) scale(1);opacity:1}}
@keyframes ocShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.oc-flying{animation:ocFlyIn .35s ease-out}
.oc-shake{animation:ocShake .4s ease}
.oc-flash-red{box-shadow:0 0 0 3px #e8192c!important}

@media(max-width:820px){
  /* §KÖK NEDEN DÜZELTMESİ (dikey kaydırma çubuğu): masaüstünde per masası +
     yan panel YAN YANA (satır) dizilir; dar/dikey bir telefon ekranında bu
     satır düzeni per masasını öyle daraltıyordu ki taşlar sığmıyor, taşma
     oluşuyor ve #oc-wallpaper'ın overflow:auto'su KALIN bir dikey scrollbar
     göstermek zorunda kalıyordu. Çözüm: mobilde .oc-main DİKEY istiflenir —
     per masası ÜSTTE TAM GENİŞLİK (asıl oynanış alanı en geniş yeri alır),
     yan panel (rozetler/deste/aksiyon butonları) ALTTA yatay/sarmalı ince
     bir şerit olarak. Ayrıca TÜM ölçüler (avatar/taş/buton/ıstaka) belirgin
     şekilde küçültülüp boşluklar sıkılaştırıldı — hedef: HİÇBİR öğe taşmasın,
     kaydırmaya hiç gerek kalmasın. */
  .oc-layout{max-width:100%; aspect-ratio:auto; height:100%; padding:10px; border-radius:18px}
  .oc-layout::before{ inset:10px; border-radius:11px }

  .oc-avatar{width:50px;padding:3px 3px 2px; border-radius:8px}
  .oc-avatar-me{width:46px}
  .oc-avatar-photo{width:22px;height:22px;font-size:10px;margin:1px auto 2px}
  .oc-avatar-name{font-size:7px; -webkit-line-clamp:1}
  .oc-avatar-stats{font-size:6.5px}
  .oc-timer-ring{width:34px;height:34px}
  .oc-timer-inner{width:29px;height:29px}
  .oc-avatar.is-bot .oc-avatar-photo::after{width:11px;height:11px;bottom:-2px;right:-2px}

  .oc-discard-slot{width:24px;height:33px}
  .coffee-corner{display:none} /* zaten ayrı kuralda kapalıydı, burada da garanti altına alınır */

  /* Per masası ÜSTTE tam genişlik + yan panel ALTTA yatay şerit */
  .oc-main{flex-direction:column; padding:44px 3px 0; gap:4px}
  .oc-meld-area{flex:1 1 auto; min-height:110px}
  .oc-meld-quad-header{font-size:8px; padding:2px 4px}
  .oc-meld-quad-empty{font-size:7.5px}

  .oc-side-panel{
    width:100%; flex-direction:row; flex-wrap:wrap; align-items:stretch;
    overflow:visible; min-height:0; gap:4px; flex-shrink:0;
  }
  .oc-deck-zone{flex-direction:row; gap:6px; order:1; align-items:center}
  .oc-indicator{width:28px;height:38px;font-size:12px}
  .oc-deck{width:32px;height:42px}
  .oc-deck-count{font-size:11px}
  .oc-actions{flex-direction:row; flex-wrap:wrap; flex:1 1 100%; margin-top:0; gap:4px; order:2}
  .oc-actions button{font-size:8.5px; padding:6px 2px; flex:1 1 58px}
  .oc-mode-badges{flex-direction:row; gap:3px; flex:1 1 100%; order:3}
  .oc-badge{font-size:7px; padding:3px 2px; flex:1}

  .oc-point-counter{font-size:9.5px; padding:5px 8px}
  .oc-rack-outer{height:auto; min-height:78px}
  .oc-rack-btn{width:20px;font-size:7px}
  .oc-rack{padding:5px 6px; gap:3px}
  .oc-tile-num{font-size:11px}
  .oc-tile-dot{width:4px;height:4px;margin-top:1px}
}

/* ═══════════════════════════════════════════════════
   TEMA PRESTLERİ — renk aksanı seçimi
═══════════════════════════════════════════════════ */
body.amoled-theme{--bg:#000;--bg1:#050505;--bg2:#0d0d0d;--bg3:#161616}
body.theme-blue  {--red:#4a9eff;--red-d:#2a7fd4;--red-bg:rgba(74,158,255,.12)}
body.theme-green {--red:#3ecf6e;--red-d:#2aad52;--red-bg:rgba(62,207,110,.12)}
body.theme-purple{--red:#a78bfa;--red-d:#7c5fd4;--red-bg:rgba(167,139,250,.12)}
body.theme-amber2{--red:#f5a623;--red-d:#d4851a;--red-bg:rgba(245,166,35,.12)}
body.theme-red   {}

/* ═══════════════════════════════════════════════════
   GLASSMORPHISM
═══════════════════════════════════════════════════ */
.glass-card{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.1)!important}
body.light-theme .glass-card{background:rgba(255,255,255,.65)!important;border:1px solid rgba(255,255,255,.4)!important}

/* ═══════════════════════════════════════════════════
   GRADIENT AKSANLAR
═══════════════════════════════════════════════════ */
.gradient-text{background:linear-gradient(135deg,var(--red),#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.amber-gradient-text{background:linear-gradient(135deg,var(--amber),#fcd34d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-border{border:1px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,linear-gradient(135deg,var(--red),rgba(167,139,250,.4)) border-box}

/* ═══════════════════════════════════════════════════
   FAB — mobil sağ alt köşe butonu
═══════════════════════════════════════════════════ */
.fab{position:fixed;bottom:calc(24px + var(--safe-b));right:20px;z-index:85;width:56px;height:56px;border-radius:50%;background:var(--red);color:#fff;border:none;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.5);cursor:pointer;transition:transform .15s,box-shadow .15s}
.fab:active{transform:scale(.88)}
/* Nefes alma efekti: genişleyen halka, sadece transform+opacity (GPU-only) */
.fab::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--red);opacity:.55;animation:fabRing 2.4s ease-out infinite;z-index:-1;will-change:transform,opacity}
@keyframes fabRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
body.mode-venue .fab,body.mode-admin .fab,body.mode-okey .fab{display:none}

/* ═══════════════════════════════════════════════════
   ARKADAŞ PANELİ — sitenin her yerinde sabit, sağ kenar
═══════════════════════════════════════════════════ */
.friends-sidebar{position:fixed;top:calc(var(--nav) + var(--safe-t));right:0;bottom:0;width:290px;max-width:86vw;background:var(--bg1);border-left:1px solid var(--border);z-index:82;display:flex;flex-direction:column;overflow:hidden;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:-6px 0 28px rgba(0,0,0,.5)}
.friends-sidebar.open{transform:translateX(0)}
body.mode-venue .friends-sidebar,body.mode-admin .friends-sidebar,body.mode-okey .friends-sidebar{display:none!important}
.friends-sidebar-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:700;font-size:13px;flex-shrink:0}
.friends-sidebar-body{flex:1;overflow-y:auto;padding:10px 12px}
.fsb-hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:8px 0 5px}
.fsb-friend-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--border)}
.fsb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fsb-friend-name{flex:1;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsb-empty{color:var(--faint);font-size:11px;padding:4px 0}
.fsb-collapse-toggle{width:100%;text-align:left;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:7px 10px;font-size:11px;font-weight:700;color:var(--dim);cursor:pointer;margin-bottom:6px}
.fsb-collapse-body{display:none;margin-bottom:10px}
.fsb-collapse-body.open{display:block}
.fsb-sent-row{display:flex;justify-content:space-between;font-size:11px;padding:4px 6px}
/* Sekme — panel kapalıyken kenarda asılı durur, panel açıldığında onunla birlikte sola kayar (kapatma kolu gibi) */
.friends-sidebar-tab{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:83;background:var(--red);color:#fff;border:none;border-radius:10px 0 0 10px;padding:13px 7px;font-size:17px;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;transition:right .28s cubic-bezier(.4,0,.2,1)}
.friends-sidebar-tab.open{right:290px}
@media(max-width:520px){ .friends-sidebar-tab.open{right:86vw} }
body.mode-venue .friends-sidebar-tab,body.mode-admin .friends-sidebar-tab,body.mode-okey .friends-sidebar-tab{display:none!important}

/* ═══════════════════════════════════════════════════
   AKTİF ODA PULSE EFEKTÌ
═══════════════════════════════════════════════════ */
/* §PERFORMANS DÜZELTMESİ: roomPulse eskiden border-color animasyonluydu —
   border-color HER karede tarayıcıya o elementi yeniden BOYATTIRIR (paint),
   transform/opacity gibi ucuz compositor-only özelliklerin aksine. Aynı anda
   birden fazla aktif masa kartı gösteren ekranlarda (ana sayfa, admin/mekan
   Masalar sekmesi, kat planı) bu, "her yerde" hissedilen sürekli kasmanın
   asıl kaynağıydı. Artık gerçek kenarlık SABİT, üzerine bindirilen ayrı bir
   ::after katmanının SADECE opacity'si animasyonlanıyor (tamamen ucuz).*/
.rcard-live{position:relative;border-color:rgba(62,207,110,.45)!important;animation:none}
.rcard-live::after{content:'';position:absolute;inset:-1px;border:1px solid rgba(62,207,110,.7);border-radius:inherit;pointer-events:none;animation:roomPulseFade 2.8s infinite;will-change:opacity}
@keyframes roomPulseFade{0%,100%{opacity:1}50%{opacity:.25}}

/* ═══════════════════════════════════════════════════
   SKOR TABLOSU ALTIN/GÜMÜŞ/BRONZ
═══════════════════════════════════════════════════ */
.rank-gold  td:first-child::before{content:'🥇 '}
.rank-silver td:first-child::before{content:'🥈 '}
.rank-bronze td:first-child::before{content:'🥉 '}
.rank-gold  td{background:rgba(255,215,0,.04)!important}
.rank-silver td{background:rgba(192,192,192,.04)!important}
.rank-bronze td{background:rgba(205,127,50,.04)!important}
.score-flash{animation:scoreFlash .4s ease}
@keyframes scoreFlash{0%{transform:scale(1)}50%{transform:scale(1.14)}100%{transform:scale(1)}}

/* ═══════════════════════════════════════════════════
   PROFIL SAYFASI
═══════════════════════════════════════════════════ */
.profile-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.profile-avatar{width:72px;height:72px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:38px;flex-shrink:0;border:2.5px solid var(--red);position:relative}
.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-frame{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--amber);pointer-events:none}
.profile-name{font-family:var(--font-d);font-size:22px;letter-spacing:1px;line-height:1}
.profile-email{font-size:11px;color:var(--faint);margin-top:2px}
.profile-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.profile-stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:10px;text-align:center}
.profile-stat-val{font-family:var(--font-d);font-size:22px;color:var(--red);line-height:1}
.profile-stat-lbl{font-size:10px;color:var(--faint);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}

/* ═══════════════════════════════════════════════════
   ROZET SİSTEMİ
═══════════════════════════════════════════════════ */
.badge-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.badge-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);min-width:62px;text-align:center;transition:border-color .2s,box-shadow .2s}
.badge-item.earned{border-color:rgba(245,166,35,.5);background:rgba(245,166,35,.07);box-shadow:0 2px 10px rgba(245,166,35,.12)}
.badge-item.locked{opacity:.35;filter:grayscale(1)}
.badge-emoji{font-size:22px;line-height:1}
.badge-lbl{font-size:9px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.3px;max-width:58px}

/* ═══════════════════════════════════════════════════
   LIDERBOARD
═══════════════════════════════════════════════════ */
.lb-tabs{display:flex;gap:5px;margin-bottom:12px}
.lb-tab{flex:1;padding:7px;border-radius:var(--r);font-size:12px;font-weight:700;background:var(--bg2);color:var(--dim);border:1px solid var(--border);cursor:pointer;text-align:center;transition:all .15s}
.lb-tab.active{background:var(--red);color:#fff;border-color:var(--red)}
.lb-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px;cursor:pointer;transition:background .12s}
.lb-row:active{background:var(--bg3)}
.lb-rank{font-family:var(--font-d);font-size:18px;width:26px;text-align:center;flex-shrink:0;color:var(--faint)}
.lb-row:nth-child(1) .lb-rank{color:#ffd700}
.lb-row:nth-child(2) .lb-rank{color:#c0c0c0}
.lb-row:nth-child(3) .lb-rank{color:#cd7f32}
.lb-ava{width:34px;height:34px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden}
.lb-ava img{width:100%;height:100%;object-fit:cover}
.lb-info{flex:1;min-width:0}
.lb-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-meta{font-size:11px;color:var(--dim);margin-top:1px}
.lb-val{font-family:var(--font-d);font-size:18px;color:var(--green);flex-shrink:0}

/* ═══════════════════════════════════════════════════
   AVATAR EMOJİ SEÇİCİ
═══════════════════════════════════════════════════ */
.avatar-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;max-height:36vh;overflow-y:auto;padding:2px}
.avatar-opt{font-size:22px;padding:7px;border-radius:var(--r);border:2px solid transparent;cursor:pointer;text-align:center;background:var(--bg2);transition:border-color .1s,transform .1s}
.avatar-opt:active{transform:scale(.88)}
.avatar-opt.sel{border-color:var(--red)}
@media(max-width:400px){.avatar-grid{grid-template-columns:repeat(6,1fr)}}

/* ═══════════════════════════════════════════════════
   TEMA RENK SEÇİCİ
═══════════════════════════════════════════════════ */
.theme-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.theme-dot{width:30px;height:30px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .15s,border-color .15s;flex-shrink:0}
.theme-dot:active{transform:scale(.82)}
.theme-dot.act{border-color:var(--text)!important}
.td-red   {background:#e8192c}
.td-blue  {background:#4a9eff}
.td-green {background:#3ecf6e}
.td-purple{background:#a78bfa}
.td-amber {background:#f5a623}

/* ═══════════════════════════════════════════════════
   MEKAN FOTOĞRAF GALERİSİ
═══════════════════════════════════════════════════ */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:12px}
.photo-item{aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--bg3);position:relative}
.photo-cell{aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--bg3);cursor:pointer;position:relative}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.photo-del{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.65);border:none;color:#fff;width:22px;height:22px;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s}
.photo-cell:hover .photo-del{opacity:1}
.photo-add-btn{aspect-ratio:1;border-radius:var(--r);background:var(--bg3);border:2px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--faint);font-size:24px;transition:border-color .15s}
.photo-add-btn:hover{border-color:var(--amber)}

/* ═══════════════════════════════════════════════════
   YORUM & PUANLAMA
═══════════════════════════════════════════════════ */
.star-row{display:flex;gap:5px;margin-bottom:10px}
.star-pick{font-size:28px;cursor:pointer;transition:transform .1s;line-height:1;opacity:.3}
.star-pick.filled,.star-pick:hover{opacity:1}
.star-pick:active{transform:scale(.88)}
.review-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:11px 13px;margin-bottom:7px}
.review-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.review-ava{font-size:20px;width:30px;height:30px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.review-name{font-size:12px;font-weight:700;flex:1}
.review-stars-disp{font-size:11px;color:var(--amber)}
.review-text{font-size:12px;color:var(--dim);line-height:1.5}
.avg-rating-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.3);border-radius:20px;padding:4px 12px;font-size:13px;font-weight:700;color:var(--amber);margin-bottom:12px}

/* ═══════════════════════════════════════════════════
   ETKİNLİK TAKVİMİ
═══════════════════════════════════════════════════ */
.event-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:11px 13px;margin-bottom:7px;display:flex;gap:10px;align-items:flex-start}
.event-date-box{background:var(--red);color:#fff;border-radius:6px;padding:5px 8px;text-align:center;flex-shrink:0;min-width:40px}
.event-day{font-family:var(--font-d);font-size:18px;line-height:1}
.event-month{font-size:9px;text-transform:uppercase;letter-spacing:.5px}
.event-info{flex:1;min-width:0}
.event-title{font-size:13px;font-weight:700}
.event-desc{font-size:11px;color:var(--dim);margin-top:2px}

/* ═══════════════════════════════════════════════════
   MEKAN DUYURULARI
═══════════════════════════════════════════════════ */
.announce-banner{background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.25);border-radius:var(--r);padding:10px 14px;margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;animation:slidIn .3s ease}
@keyframes slidIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.announce-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.announce-txt{font-size:13px;color:var(--amber);line-height:1.4;flex:1}
.announce-close{background:none;border:none;color:var(--faint);cursor:pointer;font-size:16px;padding:0 2px;flex-shrink:0}


/* ═══════════════════════════════════════════════════
   GÖRSEL MASA HARİTASI
═══════════════════════════════════════════════════ */
.floor-map-grid{position:relative;padding:12px;background:var(--bg3);border-radius:var(--rl);margin-bottom:12px;overflow:hidden}
.floor-table{width:68px;height:68px;border-radius:var(--r);border:2px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:box-shadow .2s,border-color .2s;position:absolute;font-size:11px;font-weight:700;gap:3px;touch-action:none}
.floor-table.ft-dragging{opacity:.75;box-shadow:0 8px 20px rgba(0,0,0,.4);z-index:5;cursor:grabbing}
.floor-map-grid.edit-mode .floor-table{cursor:grab}
.floor-table.ft-empty{border-color:rgba(62,207,110,.45);background:rgba(62,207,110,.07);color:var(--green)}
.floor-table.ft-active{border-color:rgba(232,25,44,.45);background:rgba(232,25,44,.07);color:var(--red)}
.floor-table.ft-active::after{content:'';position:absolute;inset:-2px;border:2px solid rgba(232,25,44,.7);border-radius:inherit;pointer-events:none;animation:roomPulseFade 2.5s infinite;will-change:opacity}
.floor-table.ft-reserved{border-color:rgba(245,166,35,.45);background:rgba(245,166,35,.07);color:var(--amber)}
.floor-table-num{font-family:var(--font-d);font-size:16px;line-height:1}
.floor-table-lbl{font-size:9px;letter-spacing:.3px}

/* ═══════════════════════════════════════════════════
   REZERVASYON
═══════════════════════════════════════════════════ */
.res-slot{padding:9px 12px;border-radius:var(--r);border:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;font-size:12px;font-weight:600}
.res-slot.rs-free{border-color:rgba(62,207,110,.3);color:var(--green)}
.res-slot.rs-taken{border-color:rgba(232,25,44,.3);color:var(--red);opacity:.55;pointer-events:none}
.res-slot.rs-my{border-color:rgba(74,158,255,.4);background:rgba(74,158,255,.06);color:var(--blue)}

/* ═══════════════════════════════════════════════════
   TURNUVA BRAKETİ
═══════════════════════════════════════════════════ */
.bracket-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0 12px}
.bracket-rounds{display:flex;gap:20px;align-items:flex-start;min-width:max-content;padding:0 4px}
.bracket-round{display:flex;flex-direction:column;gap:14px}
.bracket-round-lbl{font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;text-align:center}
.bracket-match{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);min-width:140px;overflow:hidden}
.bracket-player{padding:7px 10px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);transition:background .15s}
.bracket-player:last-child{border-bottom:none}
.bracket-player.winner{background:rgba(62,207,110,.08);color:var(--green)}
.bracket-player.tbd{color:var(--faint);font-style:italic}

/* ═══════════════════════════════════════════════════
   PERSONEL YÖNETİMİ
═══════════════════════════════════════════════════ */
.staff-row{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px}
.staff-role-badge{font-size:10px;background:rgba(74,158,255,.13);color:var(--blue);border:1px solid rgba(74,158,255,.3);padding:2px 8px;border-radius:20px;font-weight:700;white-space:nowrap}

/* ═══════════════════════════════════════════════════
   AKTİVİTE ZAMAN ÇİZELGESİ
═══════════════════════════════════════════════════ */
.activity-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.activity-dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex-shrink:0;margin-top:4px}
.activity-content{flex:1;min-width:0}
.activity-title{font-size:13px;font-weight:600}
.activity-meta{font-size:11px;color:var(--faint);margin-top:1px}

/* ═══════════════════════════════════════════════════
   İLERLEME HALKALARI
═══════════════════════════════════════════════════ */
.progress-ring-wrap{display:inline-flex;align-items:center;justify-content:center;position:relative}
.progress-ring{transform:rotate(-90deg)}
.progress-ring-fill{transition:stroke-dashoffset .6s ease;stroke-linecap:round}
.progress-ring-label{position:absolute;font-family:var(--font-d);font-size:14px;color:var(--text);text-align:center}

/* ═══════════════════════════════════════════════════
   BOŞ DURUM
═══════════════════════════════════════════════════ */
.empty-state{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;gap:8px;color:var(--faint)}
.empty-state-icon{font-size:44px;opacity:.35}
.empty-state-title{font-size:14px;font-weight:700;color:var(--dim)}
.empty-state-sub{font-size:12px;max-width:180px}

/* ═══════════════════════════════════════════════════
   CHART KAPSAYICI
═══════════════════════════════════════════════════ */
.chart-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:14px;margin-bottom:14px;position:relative}
.chart-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);margin-bottom:12px}

/* ═══════════════════════════════════════════════════
   QR TARAYICI
═══════════════════════════════════════════════════ */
#qr-reader-wrap{border-radius:var(--r);overflow:hidden;max-width:320px;margin:0 auto}
#qr-reader{border:none!important}

/* ═══════════════════════════════════════════════════
   OYUNCU ARAMA
═══════════════════════════════════════════════════ */
.player-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px;cursor:pointer;transition:background .12s}
.player-card:active{background:var(--bg3)}
.player-ava{width:40px;height:40px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;overflow:hidden}
.player-ava img{width:100%;height:100%;object-fit:cover}
.player-info{flex:1;min-width:0}
.player-name{font-size:13px;font-weight:700}
.player-stats{font-size:11px;color:var(--dim);margin-top:1px}

/* ═══════════════════════════════════════════════════
   ARKADAŞ SİSTEMİ
═══════════════════════════════════════════════════ */
.friend-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px}
.friend-status{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.friend-status.online{background:var(--green)}
.friend-status.offline{background:var(--faint)}
.friend-status.ingame{background:var(--amber);animation:pulse 1.5s infinite}
.friend-req-card{background:var(--bg2);border:1px solid rgba(74,158,255,.3);border-radius:var(--r);padding:10px 12px;margin-bottom:6px;display:flex;align-items:center;gap:10px}

/* ═══════════════════════════════════════════════════
   SAYFA GEÇİŞ ANİMASYONLARI
═══════════════════════════════════════════════════ */
.page{animation:none}
.page.page-enter{animation:pageIn .22s ease forwards}
.page.page-exit{animation:pageOut .18s ease forwards}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pageOut{from{opacity:1}to{opacity:0}}

/* ═══════════════════════════════════════════════════
   ROZET & RAPOR
═══════════════════════════════════════════════════ */
.badge-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;background:var(--bg3);border:1px solid var(--border);font-size:11px;font-weight:600;margin:2px}

/* İLK KULLANIM TURU */
.tour-backdrop{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.72);opacity:0;pointer-events:none;transition:opacity .25s}
.tour-backdrop.show{opacity:1;pointer-events:auto}
.tour-spotlight{position:fixed;z-index:301;border-radius:16px;box-shadow:0 0 0 4px var(--red),0 0 0 9999px rgba(0,0,0,.72);pointer-events:none;transition:all .3s ease}
.tour-tip{position:fixed;z-index:302;background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px;max-width:280px;box-shadow:0 8px 30px rgba(0,0,0,.5);transition:all .3s ease}
.tour-tip-title{font-weight:800;font-size:14px;margin-bottom:5px}
.tour-tip-text{font-size:12px;color:var(--dim);line-height:1.5;margin-bottom:10px}
.tour-tip-foot{display:flex;justify-content:space-between;align-items:center}
.tour-tip-dots{display:flex;gap:4px}
.tour-tip-dot{width:5px;height:5px;border-radius:50%;background:var(--border)}
.tour-tip-dot.active{background:var(--red)}

/* TOGGLE SWITCH (aç/kapa anahtarı) — bakım modu vb. statik yeşil/kırmızı */
.toggle-switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.toggle-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.toggle-slider{position:absolute;inset:0;background:var(--red);border-radius:999px;transition:background-color .2s}
.toggle-slider::before{content:'';position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.toggle-switch input:checked ~ .toggle-slider{background:var(--green)}
.toggle-switch input:checked ~ .toggle-slider::before{transform:translateX(20px)}
/* Küçük varyant — satır içi kullanıcı/mekan kartlarında (bkz. .sm) */
.toggle-switch.sm{width:36px;height:20px}
.toggle-switch.sm .toggle-slider::before{height:14px;width:14px;left:3px;top:3px}
.toggle-switch.sm input:checked ~ .toggle-slider::before{transform:translateX(16px)}

/* ANLIK DUYURU BANNER */
.broadcast-banner{position:fixed;top:calc(var(--nav) + var(--safe-t));left:0;right:0;z-index:200;background:linear-gradient(90deg,var(--red),#b8101f);color:#fff;padding:10px 16px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.3);transform:translateY(calc(-100% - 100px));transition:transform .3s ease}
.broadcast-banner.show{transform:translateY(0)}
.broadcast-ico{flex-shrink:0;font-size:16px}
.broadcast-text{flex:1;min-width:0}
.broadcast-close{background:rgba(255,255,255,.18);border:none;color:#fff;padding:5px 12px;border-radius:20px;flex-shrink:0;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}
.broadcast-close:active{background:rgba(255,255,255,.3)}
/* Duyuru sekmesi — banner "Gizle" ile kapatılınca sağdaki profil paneli gibi
   tamamen kaybolmaz, üstte küçük bir sekme olarak kalır; tıklanınca banner
   tekrar aşağı kayarak açılır (aynı sekme/panel paradigması). */
.broadcast-tab{display:none;position:fixed;top:calc(var(--nav) + var(--safe-t));left:50%;transform:translateX(-50%);z-index:199;background:var(--red);color:#fff;border:none;border-radius:0 0 10px 10px;padding:6px 16px;font-size:15px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.broadcast-tab.show{display:flex;align-items:center;justify-content:center}

/* BİLDİRİM KUTUSU */
.notif-item{display:flex;gap:10px;padding:10px;border-radius:var(--r);background:var(--bg2);border:1px solid var(--border);cursor:pointer;transition:background .12s}
.notif-item:active{background:var(--bg3)}
.notif-item.unread{border-color:rgba(232,25,44,.35);background:rgba(232,25,44,.06)}
.notif-ico{font-size:18px;flex-shrink:0}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:700}
.notif-text{font-size:12px;color:var(--dim);margin-top:2px}
.notif-time{font-size:10px;color:var(--faint);margin-top:4px}

/* SABİT OYUN GRUPLARI */
.group-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.group-card:active{background:var(--bg3)}
.group-name{font-weight:700;font-size:14px}
.group-meta{font-size:11px;color:var(--dim);margin-top:2px}
.gd-member{display:flex;align-items:center;gap:8px;background:var(--bg2);border-radius:var(--r);padding:8px 10px;font-size:13px}
.report-stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;flex:1;min-width:110px}
.report-stat-value{font-size:22px;font-weight:800;color:var(--text)}
.report-stat-label{font-size:11px;color:var(--dim);margin-top:2px}
.res-avail{cursor:pointer;border-color:rgba(62,207,110,.35);color:var(--green)}
.res-avail:hover{background:rgba(62,207,110,.08)}
.res-taken{opacity:.5;cursor:not-allowed;border-color:var(--border);color:var(--faint)}
.res-selected{border-color:var(--red)!important;background:rgba(232,25,44,.08)!important;color:var(--red)!important}
.avatar-opt{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s}
.avatar-opt:hover{background:var(--bg3)}
.avatar-opt.selected{border-color:var(--red);background:rgba(232,25,44,.1)}
.activity-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;margin-top:5px}
#avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:4px}

/* ═══════════════════════════════════════════════════
   LIGHT THEME EK
═══════════════════════════════════════════════════ */
body.light-theme .lb-row{background:var(--bg1)}
body.light-theme .badge-item{background:var(--bg1)}
body.light-theme .floor-map-grid{background:var(--bg2)}