/*
   BROLISOKEY — ortak premium arayüz katmanı
   Bu dosya yalnızca görünümü birleştirir; uygulama akışı, veri kaynakları,
   socket olayları ve mevcut tema tercihleri styles.css / JavaScript tarafında kalır.
*/

:root{
  --ui-page:#05070c;
  --ui-page-soft:#070b13;
  --ui-header:rgba(4,7,12,.94);
  --ui-surface-1:#0a0f18;
  --ui-surface-2:#0e1420;
  --ui-surface-3:#121927;
  --ui-input:rgba(15,21,33,.96);
  --ui-overlay:rgba(1,4,9,.76);
  --ui-line:rgba(255,255,255,.105);
  --ui-line-strong:rgba(255,255,255,.17);
  --ui-red:#ff4b52;
  --ui-orange:#ff9b20;
  --ui-blue:#42adff;
  --ui-green:#52df7a;
  --ui-yellow:#f8c84a;
  --ui-text:#f4f6fa;
  --ui-muted:#a5adba;
  --ui-faint:#687283;
  --ui-radius-xs:8px;
  --ui-radius-sm:11px;
  --ui-radius-md:14px;
  --ui-radius-lg:19px;
  --ui-radius-xl:24px;
  --ui-header-height:74px;
  --nav:74px;
  --ui-content:1440px;
  --ui-content-wide:1560px;
  --ui-shadow:0 22px 60px -34px rgba(0,0,0,.9);
  --ui-shadow-raised:0 20px 42px -28px rgba(0,0,0,.86);
}

/* --- Uygulama zeminleri ve genel okunabilirlik -------------------------------- */
html{background:var(--ui-page)}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse 42% 42% at 0% 29%,rgba(190,22,40,.17),transparent 69%),
    radial-gradient(ellipse 45% 42% at 100% 25%,rgba(20,111,211,.16),transparent 68%),
    linear-gradient(115deg,#08070d 0%,#050810 49%,#06101d 100%);
  color:var(--text,var(--ui-text));
}
body::after{
  content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:.42;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.46),transparent 76%);
}
::selection{background:rgba(255,75,82,.34);color:#fff}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--blue,var(--ui-blue));outline-offset:3px}
:where(button,a){-webkit-tap-highlight-color:transparent}

/* Internal surfaces receive the same cinematic backdrop without touching game tiles. */
#pg-create,#pg-room,#panel-mekan-choice,#panel-single-back,#okey-module{
  position:relative;isolation:isolate;
  background:
    radial-gradient(ellipse 48% 52% at 0 18%,rgba(199,25,39,.12),transparent 72%),
    radial-gradient(ellipse 46% 50% at 100% 17%,rgba(19,107,211,.13),transparent 73%),
    linear-gradient(115deg,#070911 0%,#050810 51%,#06101c 100%);
}
#panel-mekan-choice{background:
  radial-gradient(ellipse 48% 55% at 5% 25%,rgba(210,111,17,.15),transparent 71%),
  radial-gradient(ellipse 44% 48% at 100% 20%,rgba(19,107,211,.12),transparent 72%),
  linear-gradient(115deg,#09090d,#060a10 54%,#07111a)}
#okey-module{background:
  radial-gradient(ellipse 40% 48% at 6% 27%,rgba(192,25,40,.13),transparent 70%),
  radial-gradient(ellipse 42% 48% at 94% 28%,rgba(16,121,83,.14),transparent 70%),
  linear-gradient(115deg,#070a0d,#050a0f 53%,#061713)}

/* --- Ortak başlık ve navigasyon ------------------------------------------------- */
.nav{
  height:calc(var(--nav) + var(--safe-t));
  padding-top:var(--safe-t);padding-inline:clamp(18px,3vw,48px);
  background:linear-gradient(180deg,rgba(4,7,12,.97),rgba(4,7,12,.91));
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,75,82,.15),0 14px 36px -25px rgba(0,0,0,.9);
}
.nav-logo{font-size:25px;letter-spacing:3.2px;color:var(--red,var(--ui-red));text-shadow:0 0 17px rgba(255,75,82,.23)}
.nav-center{gap:6px}
.nav-link{min-height:40px;padding:10px 14px;border-radius:0;color:var(--dim,var(--ui-muted));font-size:13px;font-weight:800}
.nav-link::after{content:"";position:absolute;right:14px;bottom:3px;left:14px;height:2px;border-radius:2px;background:var(--red,var(--ui-red));transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.nav-link:hover{border-color:transparent;background:transparent;color:var(--text,var(--ui-text));transform:none}
.nav-link:hover::after,.nav-link.active::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-link.active,.nav-link[aria-current="page"]{color:var(--red,var(--ui-red));background:transparent}
.nav-link.nav-link-cta{min-height:44px;margin-left:9px;padding-inline:20px;border:1px solid rgba(255,117,87,.72);border-radius:14px;background:linear-gradient(135deg,#d91f32 0%,#ff4248 57%,#ff8439 100%);box-shadow:0 12px 24px -14px rgba(255,52,62,.92)}
.nav-link.nav-link-cta::after{display:none}
.hamburger-btn{width:44px;height:44px;border-color:rgba(255,255,255,.26);border-radius:50%;background:rgba(9,13,20,.78)}
.hamburger-btn span{width:19px;background:var(--text,var(--ui-text))}
.hamburger-btn:hover{border-color:var(--red,var(--ui-red));background:rgba(255,75,82,.1);box-shadow:0 10px 22px -13px rgba(255,75,82,.85)}

/* --- Çekmece -------------------------------------------------------------------- */
.hamburger-backdrop{background:rgba(1,4,9,.78);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.hamburger-menu{
  width:min(420px,94vw);max-width:none;padding-top:var(--safe-t);
  background:
    radial-gradient(ellipse 70% 34% at 0 0,rgba(211,29,46,.13),transparent 70%),
    radial-gradient(ellipse 74% 36% at 100% 100%,rgba(20,112,225,.16),transparent 72%),
    linear-gradient(150deg,#0c0f19 0%,#090d16 58%,#090e18 100%);
  border-left:1px solid rgba(255,75,82,.53);border-right:1px solid rgba(66,173,255,.56);
  box-shadow:-26px 0 80px -30px rgba(0,0,0,.94);
}
.hamburger-menu::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,rgba(255,75,82,.9),rgba(255,255,255,.06),rgba(66,173,255,.92));pointer-events:none}
.hamburger-menu-hdr{min-height:78px;padding:18px 26px;border-bottom-color:var(--ui-line)}
.hamburger-menu-hdr .nav-logo{font-size:24px}
.hamburger-menu-grid{gap:10px;padding:24px 26px}
.hm-item,.hamburger-menu-grid button{
  min-height:94px;border:1px solid rgba(152,171,214,.17);border-radius:14px;
  background:linear-gradient(145deg,rgba(23,30,47,.94),rgba(13,18,30,.96));
  color:var(--text,var(--ui-text));box-shadow:inset 0 1px rgba(255,255,255,.035),var(--ui-shadow);
}
.hm-item:hover,.hamburger-menu-grid button:hover{border-color:rgba(66,173,255,.53);background:linear-gradient(145deg,rgba(25,37,60,.98),rgba(14,21,35,.98));transform:translateY(-2px)}
.hamburger-menu-divider{margin:1px 26px 0;background:linear-gradient(90deg,transparent,var(--ui-line),transparent)}
.hamburger-menu .nav-right{gap:10px;padding:24px 26px 28px}
.hamburger-menu .nav-right .btn,.hamburger-menu #notif-bell-btn{min-height:48px;border-radius:13px;background:rgba(10,15,25,.78);border-color:rgba(156,174,215,.2)}
.hamburger-menu #nav-admin-btn{border-color:rgba(66,173,255,.65)!important;color:#b8ddff;background:linear-gradient(135deg,rgba(20,67,129,.28),rgba(15,23,40,.8))!important}
.hamburger-menu .btn-danger{margin-top:auto;border-color:rgba(255,75,82,.48);color:#ff9096}

/* --- Düğme, rozet, form ve seçim sistemi --------------------------------------- */
.btn{
  min-height:44px;padding:11px 17px;border-radius:var(--ui-radius-sm);font-weight:800;
  border:1px solid transparent;letter-spacing:.05px;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.btn-red{background:linear-gradient(135deg,#d91f32,#ff454c 64%,#ff723f);box-shadow:0 11px 21px -13px rgba(255,61,69,.9)}
.btn-red:hover:not(:disabled){box-shadow:0 15px 28px -13px rgba(255,61,69,.96)}
.btn-blue{color:#c5e7ff;border-color:rgba(66,173,255,.48);background:linear-gradient(135deg,rgba(15,99,205,.8),rgba(22,145,255,.9));box-shadow:0 11px 20px -15px rgba(25,152,255,.9)}
.btn-amber{color:#ffd88c;border-color:rgba(255,155,32,.48);background:linear-gradient(135deg,rgba(157,75,5,.62),rgba(238,132,13,.82))}
.btn-green,.btn-success{color:#e5ffec;border-color:rgba(82,223,122,.49);background:linear-gradient(135deg,rgba(17,148,68,.88),rgba(39,207,92,.9));box-shadow:0 12px 20px -15px rgba(39,207,92,.9)}
.btn-ghost{background:rgba(15,20,32,.85);border-color:rgba(184,199,224,.18);color:var(--text,var(--ui-text))}
.btn-ghost:hover:not(:disabled){background:rgba(29,38,57,.9);border-color:rgba(184,199,224,.35)}
.btn-outline{background:transparent;border-color:rgba(255,75,82,.72);color:#ff8990}
.btn-danger{background:rgba(214,31,50,.15);border-color:rgba(255,75,82,.42);color:#ff9aa0}
.btn-sm{min-height:38px;padding:8px 13px}.btn-xs{min-height:34px;padding:6px 10px}
.btn:disabled,.mode-btn:disabled{opacity:.42;filter:saturate(.55);box-shadow:none}
.pill,.badge,.admin-badge,.okey-room-badge,.lobi-badge,.status-badge{
  border:1px solid rgba(184,199,224,.17);border-radius:999px;background:rgba(12,18,29,.75);color:var(--dim,var(--ui-muted));font-weight:800;letter-spacing:.3px
}

.field{gap:7px}.field label,.field .lbl,.lbl{color:#c6cedd;font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}
.field .hint,.hint,.help-text{color:var(--faint,var(--ui-faint));font-size:12px;line-height:1.55}
.inp,textarea.inp,select.inp{
  min-height:46px;border:1px solid rgba(172,190,225,.19);border-radius:var(--ui-radius-sm);
  background:linear-gradient(145deg,rgba(16,22,35,.96),rgba(11,16,27,.96));color:var(--text,var(--ui-text));
  box-shadow:inset 0 1px rgba(255,255,255,.025);caret-color:var(--red,var(--ui-red));
}
.inp:hover,textarea.inp:hover,select.inp:hover{border-color:rgba(184,204,241,.38)}
.inp:focus,textarea.inp:focus,select.inp:focus{border-color:var(--blue,var(--ui-blue));box-shadow:0 0 0 3px rgba(66,173,255,.15),inset 0 1px rgba(255,255,255,.04)}
.inp[aria-invalid="true"],.inp.error,.field.error .inp{border-color:var(--red,var(--ui-red));box-shadow:0 0 0 3px rgba(255,75,82,.12)}
.mode-toggle,.segmented,.tabs,.tab-bar,.oms-seg{padding:4px;border:1px solid rgba(184,199,224,.14);border-radius:var(--ui-radius-md);background:rgba(7,12,21,.72);gap:4px}
.mode-btn,.tab-btn,.vtab-btn,.oms-seg button{min-height:38px;border:1px solid transparent;border-radius:9px;color:var(--dim,var(--ui-muted));background:transparent;font-weight:800}
.mode-btn:hover,.tab-btn:hover,.vtab-btn:hover,.oms-seg button:hover{color:var(--text,var(--ui-text));background:rgba(255,255,255,.055)}
.mode-btn.active,.tab-btn.active,.vtab-btn.active,.oms-seg button.active{color:#fff;border-color:rgba(255,75,82,.55);background:linear-gradient(135deg,rgba(255,75,82,.2),rgba(255,75,82,.08));box-shadow:inset 0 1px rgba(255,255,255,.06)}

/* --- Kart, liste, veri ve yoğun çalışma yüzeyleri ------------------------------ */
.section,.admin-panel-card,.rhdr,.score-wrap,.lobi-card,.group-card,.user-row,.hp-col,
.okey-room-card,.okey-match-settings,.okey-browse-filters,.okey-create-preview,
.friends-sidebar,.player-card,.venue-card,.data-panel,.panel-card{
  border:1px solid rgba(172,190,225,.13);border-radius:var(--ui-radius-lg);
  background:linear-gradient(145deg,rgba(16,22,34,.9),rgba(9,14,24,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.025),var(--ui-shadow);
}
.section,.admin-panel-card{padding:clamp(16px,2vw,24px)}
.admin-panel-card{margin-bottom:16px}
.admin-panel-title,.section-title,.panel-title{color:var(--text,var(--ui-text));font-family:var(--font-d);font-size:23px;letter-spacing:.5px}
.admin-panel-title::after,.section-title::after{content:"";display:block;width:34px;height:2px;margin-top:8px;border-radius:2px;background:linear-gradient(90deg,var(--red,var(--ui-red)),transparent)}
.lobi-card,.user-row{min-height:70px;padding:13px 15px;margin-bottom:9px}
.lobi-card:hover,.user-row:hover{border-color:rgba(66,173,255,.38);background:linear-gradient(145deg,rgba(15,30,51,.94),rgba(9,18,31,.96));transform:translateY(-1px)}
.okey-room-card{padding:15px 16px}.okey-room-card:hover{border-color:rgba(82,223,122,.42);box-shadow:0 20px 37px -26px rgba(39,207,92,.48)}
.okey-match-settings,.okey-browse-filters{background:linear-gradient(145deg,rgba(10,27,22,.78),rgba(10,15,25,.96));border-color:rgba(82,223,122,.18)}

/* Room / Yaz-Boz: wide data surface, compact hierarchy. */
#pg-create .wrap{width:min(calc(100% - 32px),820px);margin-inline:auto;padding-block:calc(var(--ui-header-height) + 30px) 42px}
#pg-room .rhdr{margin-top:var(--ui-header-height);padding:18px clamp(16px,2.5vw,38px);border-radius:0;border-inline:0;border-top:0;background:linear-gradient(105deg,rgba(128,14,26,.28),rgba(12,20,34,.93) 44%,rgba(13,44,78,.25))}
#pg-room .score-wrap{width:min(calc(100% - 32px),var(--ui-content-wide));margin:22px auto 46px;padding:clamp(14px,2vw,28px)}
.rhdr-top{gap:10px}.rhdr .rcode{font-size:clamp(22px,3vw,32px);letter-spacing:1.5px}.rhdr .rmeta{color:var(--dim,var(--ui-muted))}
.rhdr-acts{gap:8px}.share-links-grid{gap:10px}.share-link-btn{min-height:54px;border:1px solid rgba(184,199,224,.15);border-radius:12px;background:rgba(7,12,22,.64);color:var(--text,var(--ui-text))}
.share-link-btn:hover{border-color:rgba(255,75,82,.44);background:rgba(255,75,82,.08)}
.score-wrap table,.data-table,table.data-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid rgba(184,199,224,.12);border-radius:14px;background:rgba(6,10,18,.54)}
.score-wrap th,.data-table th{padding:12px 14px;background:rgba(18,26,42,.85);color:#aebbd1;font-size:10px;text-align:left;letter-spacing:.8px;text-transform:uppercase}
.score-wrap td,.data-table td{padding:12px 14px;border-top:1px solid rgba(184,199,224,.09);color:var(--text,var(--ui-text))}
.score-wrap tr:hover td,.data-table tbody tr:hover td{background:rgba(66,173,255,.045)}

/* Listing / venue / admin tools share a data-efficient geometry. */
.lobi-btn-hero{min-height:50px;border-radius:var(--ui-radius-md);color:#cfeaff;border-color:rgba(66,173,255,.5);background:linear-gradient(135deg,rgba(18,90,192,.62),rgba(14,43,90,.72));box-shadow:0 12px 22px -17px rgba(25,152,255,.88)}
.lobi-btn-hero:hover{transform:translateY(-2px);border-color:var(--blue,var(--ui-blue))}
.hp-lobi-filter-inp,.hp-venue-search{
  min-height:42px;border-color:rgba(172,190,225,.18);border-radius:10px;
  background:rgba(12,18,30,.86);color:var(--text,var(--ui-text));
}
.hp-lobi-filter-inp:focus,.hp-venue-search:focus{border-color:var(--blue,var(--ui-blue));box-shadow:0 0 0 3px rgba(66,173,255,.13);outline:none}
.hp-mekan-tabs{padding:4px;border-color:rgba(184,199,224,.14);border-radius:13px;background:rgba(7,12,21,.74)}
.hp-mekan-tab{min-height:36px;border-radius:9px;color:var(--dim,var(--ui-muted))}.hp-mekan-tab:hover{background:rgba(255,255,255,.055);color:var(--text,var(--ui-text))}
.hp-mekan-tab.active{background:linear-gradient(135deg,rgba(242,144,23,.93),rgba(255,173,43,.92));color:#161006;box-shadow:0 6px 14px -10px rgba(255,155,32,.95)}

/* Single-column workspace views (Yaz-Boz, lobby and venue actions) should be
   focused panels, not a full-height strip with an empty lower half. */
#panel-single-back{margin-top:0;padding:15px max(16px,calc((100% - 1080px)/2));background:rgba(7,11,19,.86);border-bottom-color:rgba(184,199,224,.1)}
#homepage-triptych.single-col{padding:24px max(16px,calc((100% - 1080px)/2)) 48px;background:transparent;border:0}
#homepage-triptych.single-col .hp-col{
  width:100%;max-width:920px;min-height:0;margin:0 auto;padding:26px;
  border:1px solid rgba(184,199,224,.15);border-radius:var(--ui-radius-xl);
  background:linear-gradient(145deg,rgba(16,22,35,.96),rgba(9,14,24,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.035),var(--ui-shadow);
}
#homepage-triptych.single-col .hp-col::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--red,var(--ui-red)),rgba(255,75,82,.08) 70%,transparent);pointer-events:none}
#homepage-triptych.single-col .hp-col-body{flex:initial;overflow:visible}
#homepage-triptych.single-col .hp-col-desc{max-width:560px;font-size:14px}
#homepage-triptych.single-col .hp-col-actions{max-width:760px}
.hp-lobi-mini,.hp-venue-mini{border-radius:12px;background:rgba(9,15,26,.73);border-color:rgba(184,199,224,.14);box-shadow:none}
.hp-lobi-mini:hover{border-color:rgba(66,173,255,.45);background:rgba(11,29,52,.78)}
.hp-venue-mini:hover{border-color:rgba(255,155,32,.45);background:rgba(45,29,10,.45)}
.venue-tab-bar{gap:5px;padding:5px;border:1px solid rgba(255,166,45,.18);border-radius:14px;background:rgba(34,22,7,.3)}
.venue-tab-bar .vtab-btn.active{color:#ffe3b0;border-color:rgba(255,155,32,.55);background:linear-gradient(135deg,rgba(235,125,11,.29),rgba(95,43,3,.32))}
.admin-actions{gap:8px;flex-wrap:wrap}.admin-room-row{padding:13px 0;border-bottom-color:rgba(184,199,224,.09)}
.admin-room-row:hover{background:rgba(255,255,255,.025)}
.admin-room-code{color:#f6f8fc}.admin-badge{border-color:rgba(66,173,255,.32);background:rgba(66,173,255,.1);color:#b9e2ff}

/* --- Modallar, yan paneller, toastlar ve durumlar ------------------------------- */
.overlay{background:var(--ui-overlay);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal{
  width:min(calc(100% - 32px),620px);max-width:620px;max-height:min(88dvh,850px);
  padding:24px;border:1px solid rgba(173,192,230,.18);border-bottom:1px solid rgba(173,192,230,.18);
  border-radius:var(--ui-radius-xl);background:
    radial-gradient(ellipse 70% 44% at 0 0,rgba(255,75,82,.10),transparent 68%),
    linear-gradient(145deg,#111827,#090e18 76%);
  box-shadow:0 32px 90px -35px rgba(0,0,0,.98),inset 0 1px rgba(255,255,255,.05);
}
.overlay.open .modal{transform:translateY(0) scale(1)}
.mhandle{display:none}.mclose{width:40px;height:40px;border:1px solid rgba(184,199,224,.21);border-radius:12px;background:rgba(14,21,34,.8);color:var(--text,var(--ui-text))}
.mclose:hover{background:rgba(255,75,82,.13);border-color:rgba(255,75,82,.58);color:#fff}
.mtitle{font-family:var(--font-d);font-size:28px;letter-spacing:.5px;color:var(--text,var(--ui-text))}.msub{color:var(--dim,var(--ui-muted));line-height:1.55}
.mfooter{padding-top:18px;margin-top:18px;border-top:1px solid rgba(184,199,224,.1)}
.toast{bottom:calc(24px + var(--safe-b));min-height:46px;padding:12px 18px;border-radius:14px;background:rgba(12,18,29,.97);border-color:rgba(184,199,224,.22);box-shadow:0 18px 36px -17px rgba(0,0,0,.88);white-space:normal;max-width:min(calc(100vw - 32px),500px)}
.toast.ok{border-color:rgba(82,223,122,.55);color:#caffd7}.toast.err{border-color:rgba(255,75,82,.58);color:#ffc3c7}
.empty,.empty-state,.no-data,.error-state{padding:28px 20px;border:1px dashed rgba(184,199,224,.2);border-radius:14px;background:rgba(10,15,25,.45);color:var(--dim,var(--ui-muted));text-align:center}
.error-state{border-color:rgba(255,75,82,.35);color:#ffabb0;background:rgba(255,75,82,.06)}

/* --- 101 Okey: table mechanics remain untouched; only surrounding UI is unified - */
.okey-select-hero{padding-top:calc(var(--ui-header-height) + 26px)}
.okey-select-title{font-size:clamp(34px,4vw,50px)}
.okey-select-eyebrow{border-color:rgba(82,223,122,.4);background:rgba(39,207,92,.1);color:#a1f4b5}
.okey-tile-card{border-radius:var(--ui-radius-xl);background:linear-gradient(145deg,rgba(11,28,23,.94),rgba(9,15,25,.97));border-color:rgba(82,223,122,.22);box-shadow:var(--ui-shadow)}
.okey-tile-card:hover{border-color:rgba(82,223,122,.56)}
.okey-topbar{border-bottom-color:rgba(184,199,224,.12);background:rgba(8,13,22,.9)}
.okey-quickjoin .inp{border-radius:12px}.okey-room-card-join{border-radius:11px;background:linear-gradient(135deg,#119444,#27cf5c);color:#fff}
.okey-browse-footer{padding-bottom:30px}.okey-room-empty{padding:32px;border:1px dashed rgba(82,223,122,.25);border-radius:14px;background:rgba(9,25,20,.38)}

/* Secondary fixed social panel belongs to the drawer/card family. */
.friends-sidebar{border-radius:18px 0 0 18px;border-right:0;background:linear-gradient(155deg,rgba(14,20,32,.98),rgba(8,13,22,.99));box-shadow:-16px 0 45px -28px #000}

/* --- Motion and responsive rules ------------------------------------------------ */
/* The landing scene stays a composition, rather than becoming a full-bleed tile. */
@media (min-width:1081px){
  #panel-landing .pl-hero::after{
    /* Taş sahnesi ayrı bir sağ kolon değil, bütün hero'nun arka planıdır. */
    inset:0;
    -webkit-mask-image:none;
    mask-image:none;
    background-image:
      linear-gradient(90deg,rgba(8,10,17,.95) 0%,rgba(8,10,17,.78) 31%,rgba(8,10,17,.34) 52%,rgba(8,10,17,.07) 74%,rgba(8,10,17,.03) 100%),
      url('../images/okey-hero-stage-v2.png');
    background-size:cover;
    background-position:center;
  }
  #panel-landing .pl-hero-glow{display:none}
  #panel-landing .pl-hero-inner{
    grid-template-columns:47% 53%;
    width:min(calc(100% - 96px),1280px);
  }
  /* Duyurular iki kart satırını kapsar; altında boş yüzey bırakmaz. */
  #panel-landing .pl-announce{
    grid-area:auto;
    grid-column:3;
    grid-row:1 / span 2;
    align-self:stretch;
    height:auto;
    min-height:0;
  }
  #panel-landing .pl-announce-list{overflow:hidden}
  #panel-landing .pl-announce-item{justify-content:flex-start}
}

/* Performans: hero ve kart yüzeylerinde sürekli kompozit/animasyon katmanı yok. */
#panel-landing .pl-hero-glow,
#panel-landing .pl-panel::after,
#panel-landing .pl-icon-badge,
#panel-landing .pl-hero-title,
#panel-landing .pl-hero-sub,
#panel-landing .pl-hero-actions{will-change:auto}
#panel-landing .pl-hero-live{animation:none}
#panel-landing .pl-panel::after{animation:none!important}
/* Sabit maskeli doku kaydırma sırasında gereksiz yeniden boyama yapıyordu. */
body::after{display:none}
@media (hover:none){
  #panel-landing .pl-panel:hover{transform:none;box-shadow:0 22px 52px -30px rgba(0,0,0,.86)}
  #panel-landing .pl-btn:hover .pl-arrow{transform:none}
}
@media (min-width:901px){
  .overlay{align-items:center}.modal{transform:translateY(12px) scale(.985)}
  .hamburger-menu .nav-right .btn:hover:not(:disabled){transform:translateY(-1px)}
}
@media (max-width:1100px){
  .nav{padding-inline:20px}.nav-center{gap:0}.nav-link{padding-inline:9px;font-size:12px}
  .nav-link.nav-link-cta{margin-left:4px;padding-inline:14px}
  #pg-room .score-wrap{width:min(calc(100% - 24px),100%)}
  .venue-tab-bar{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  :root{--nav:64px}
  body::after{background-size:58px 58px;opacity:.25}
  .nav{height:calc(var(--nav) + var(--safe-t));padding-inline:14px;gap:9px}.nav-logo{font-size:20px;letter-spacing:2.2px}
  .nav-center{display:none}.nav-right{gap:6px}.nav-link.nav-link-cta{min-height:40px;margin:0;padding:9px 13px;font-size:12px}
  .hamburger-btn{width:40px;height:40px}.hamburger-menu{width:100%;max-width:100%}.hamburger-menu-hdr{padding-inline:20px}.hamburger-menu-grid,.hamburger-menu .nav-right{padding-inline:20px}
  #pg-create .wrap{width:min(calc(100% - 24px),820px);padding-top:calc(64px + var(--safe-t) + 22px)}
  #pg-room .rhdr{margin-top:calc(64px + var(--safe-t));padding:14px 16px}#pg-room .score-wrap{width:calc(100% - 20px);margin-top:12px;padding:12px}
  .section,.admin-panel-card{border-radius:16px;padding:15px}.modal{width:100%;max-width:100%;padding:21px 16px calc(21px + var(--safe-b));border-right:0;border-bottom:0;border-left:0;border-radius:22px 22px 0 0}
  .overlay{align-items:flex-end}.mhandle{display:block;width:42px;height:4px;margin:-9px auto 15px;border-radius:999px;background:rgba(255,255,255,.2)}
  .venue-tab-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.score-wrap{overflow-x:auto}.score-wrap table{min-width:650px}
  .okey-select-hero{padding-top:calc(64px + var(--safe-t) + 21px)}.okey-tile-grid{grid-template-columns:1fr;max-width:360px;gap:12px}
  .friends-sidebar{width:min(92vw,380px)}
}
@media (max-width:380px){
  .nav-logo{font-size:18px}.nav-link.nav-link-cta{padding-inline:10px}.hamburger-menu-grid{gap:8px;padding-inline:15px}.hamburger-menu .nav-right{padding-inline:15px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}