*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #111113;
    --bg-soft: #171719;
    --header: #1b1b1e;
    --panel: #202024;
    --panel-2: #26262b;
    --panel-3: #2b2b31;
    --line: #2c2c32;
    --line-soft: rgba(255,255,255,.07);
    --text: #f7f7fb;
    --muted: #b9b9c4;
    --dim: #777783;
    --orange: #ff6d16;
    --orange-2: #ff8f2c;
    --orange-dark: #c94907;
    --radius: 20px;
    --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --display: 'Bebas Neue', Impact, sans-serif;
    --max: 1248px;
  }

  html { width:100%; max-width:100%; scroll-behavior:smooth; overflow-x:hidden; }

  body {
    width:100%; max-width:100%; min-height:100vh;
    background:
      radial-gradient(circle at 15% -10%, rgba(255,109,22,.11), transparent 34rem),
      linear-gradient(180deg, #161618 0%, #101012 38%, #111113 100%);
    color:var(--text); font-family:var(--font); overflow-x:hidden;
  }

  a { color:inherit; text-decoration:none; }
  button, input { font:inherit; }
  button { cursor:pointer; }
  img { max-width:100%; }

  /* ── PAGE SHELL ── */
  .page-shell { width:100%; max-width:var(--max); min-width:0; margin:0 auto; padding:0 18px; }

  /* ── HEADER ── */
  .site-header {
    position:sticky; top:0; z-index:50;
    width:100%; max-width:100%; overflow:hidden;
    background:rgba(27,27,30,.94);
    border-bottom:1px solid rgba(255,255,255,.055);
    backdrop-filter:blur(18px);
    box-shadow:0 16px 36px rgba(0,0,0,.22);
  }

  .header-inner {
    width:100%; max-width:var(--max); min-width:0;
    height:76px; margin:0 auto; padding:0 14px;
    display:flex; align-items:center; gap:8px; overflow:hidden;
  }

  .brand {
    position:relative; display:block;
    flex:1 1 auto; min-width:0;
    max-width:calc(100vw - 206px);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    padding-left:2px; padding-right:8px;
    font-family:var(--display);
    font-size:clamp(24px,7vw,34px);
    line-height:1; letter-spacing:.8px; color:#fff;
    transform:skewX(-8deg);
    text-shadow:2px 2px 0 #000,-1px -1px 0 #000,0 4px 12px rgba(0,0,0,.75);
  }
  .brand::after {
    content:''; position:absolute; left:0; right:4px; bottom:-5px;
    height:6px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
    transform:skewX(-20deg); opacity:.38; pointer-events:none;
  }

  .header-search {
    display:none; align-items:center; gap:11px;
    flex:1 1 240px; min-width:0; height:44px;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.12); border-radius:14px;
    background:rgba(255,255,255,.08); color:var(--muted);
    transition:border-color .2s,background .2s,box-shadow .2s;
  }
  .header-search:focus-within {
    border-color:rgba(255,109,22,.75);
    background:rgba(255,255,255,.1);
    box-shadow:0 0 0 4px rgba(255,109,22,.12);
  }
  .header-search svg { width:18px; height:18px; flex-shrink:0; }
  .header-search input {
    width:100%; min-width:0; border:0; outline:0;
    color:var(--text); background:transparent;
    font-size:14px; font-weight:600;
  }
  .header-search input::placeholder { color:#aaaab5; }

  .header-actions { margin-left:auto; flex:0 0 auto; min-width:0; display:flex; align-items:center; gap:7px; }

  .round-btn, .lang-btn, .login-btn {
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.085); color:#fff;
    background:rgba(20,20,22,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 22px rgba(0,0,0,.18);
    transition:transform .18s,border-color .18s,background .18s;
  }
  .round-btn:hover, .lang-btn:hover, .login-btn:hover {
    transform:translateY(-1px);
    border-color:rgba(255,109,22,.5);
    background:rgba(35,35,39,.9);
  }
  .round-btn { width:39px; height:39px; border-radius:50%; display:grid; place-items:center; }
  .round-btn svg { width:20px; height:20px; }

  .lang-btn {
    height:39px; display:inline-flex; align-items:center; gap:6px;
    border-radius:999px; padding:0 9px;
    font-weight:800; font-size:12px; white-space:nowrap;
  }
  .flag-dot {
    flex:0 0 auto; width:19px; height:19px; border-radius:50%; overflow:hidden;
    border:1px solid rgba(255,255,255,.28);
    background:linear-gradient(#d91622 0 50%,#fff 50% 100%);
    box-shadow:0 1px 6px rgba(0,0,0,.35);
  }
  .login-btn {
    display:none; height:42px; align-items:center; gap:8px;
    border-radius:999px; padding:0 16px;
    font-weight:800; font-size:13px; white-space:nowrap;
  }
  .login-btn svg { width:18px; height:18px; }

  .desktop-nav {
    display:none; width:100%; max-width:100%; overflow:hidden;
    border-top:1px solid rgba(255,255,255,.035);
    background:rgba(20,20,22,.94);
  }
  .nav-inner {
    max-width:var(--max); min-width:0; margin:0 auto; padding:0 18px;
    display:flex; align-items:center; gap:2px;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  }
  .nav-inner::-webkit-scrollbar { display:none; }
  .nav-item {
    flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
    height:48px; padding:0 15px;
    border-bottom:2px solid transparent;
    color:#d6d6df; font-size:13px; font-weight:800;
    white-space:nowrap; opacity:.9;
    transition:color .2s,border-color .2s,opacity .2s;
  }
  .nav-item:hover { opacity:1; color:#fff; }
  .nav-item.active { color:var(--orange); border-bottom-color:var(--orange); opacity:1; }
  .nav-item svg { width:18px; height:18px; flex:0 0 auto; }

  /* ── MOBILE SEARCH OVERLAY ── */
  .mobile-search-bar {
    display:none; position:absolute; top:0; left:0; right:0;
    height:76px; align-items:center; gap:10px; padding:0 14px;
    background:rgba(27,27,30,.98); z-index:10;
  }
  .mobile-search-bar.open { display:flex; }
  .mobile-search-input {
    flex:1 1 auto; height:44px; padding:0 16px;
    border:1px solid rgba(255,109,22,.75); border-radius:14px;
    background:rgba(255,255,255,.1); color:var(--text);
    font-size:14px; font-weight:600; outline:none;
  }
  .mobile-search-input::placeholder { color:#aaaab5; }
  .mobile-search-close {
    flex:0 0 auto; border:0; background:none;
    color:var(--muted); font-size:15px; font-weight:800; padding:6px 8px;
  }

  /* ── HERO ── */
  .hero-wrap { padding-top:16px; }
  .hero-card {
    position:relative; width:100%;
    height:clamp(160px,28vw,420px);
    border-radius:22px; overflow:hidden; background:#000;
  }
  .hero-img {
    width:100%; height:100%; object-fit:fill;
    object-position:center; display:block; background:#000;
  }
  .hero-arrow {
    display:none; position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px;
    border:1px solid rgba(255,255,255,.14); border-radius:50%;
    background:rgba(0,0,0,.45); color:#fff;
    font-size:30px; line-height:1;
    backdrop-filter:blur(10px); z-index:2;
  }
  .hero-arrow.prev { left:18px; }
  .hero-arrow.next { right:18px; }
  .hero-arrow:hover { background:rgba(0,0,0,.65); }

  /* ── SECTIONS ── */
  .section { padding-top:34px; }
  .section-head { margin-bottom:18px; }
  .section-title {
    display:flex; align-items:center; gap:9px;
    font-family:var(--display);
    font-size:clamp(27px,4vw,36px);
    line-height:1; letter-spacing:1.4px; color:#f5f5f8;
  }
  .section-title .fire {
    font-family:var(--font); font-size:.78em;
    filter:drop-shadow(0 0 8px rgba(255,109,22,.55));
  }
  .section-desc { color:#d7d7df; font-size:clamp(13px,2.6vw,14px); line-height:1.55; margin-top:8px; }

  /* ── TRENDING ── */
  .trending-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 16px;
  }
  .trend-card {
    min-width:0; min-height:82px;
    display:flex; align-items:center; gap:12px;
    padding:8px; border-radius:16px;
    background:
      radial-gradient(circle at 12px 12px,rgba(255,255,255,.06) 0 1px,transparent 1.3px) 0 0/12px 12px,
      linear-gradient(145deg,#29292e,#1e1e22 62%);
    border:1px solid rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 26px rgba(0,0,0,.24);
    transition:transform .18s,border-color .18s,filter .18s;
  }
  .trend-card:hover { transform:translateY(-2px); border-color:rgba(255,109,22,.55); filter:brightness(1.08); }
  .trend-card[hidden] { display:none; }

  .cover-mini, .cover-big {
    position:relative; flex-shrink:0; overflow:hidden;
    background:linear-gradient(135deg,var(--c1,#25252a),var(--c2,#151517));
  }
  .cover-mini {
    width:58px; height:58px; border-radius:11px;
    box-shadow:0 8px 18px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.14);
  }
  .cover-mini::before, .cover-big::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle at 72% 24%,rgba(255,255,255,.35),transparent 2.5rem),
      radial-gradient(circle at 30% 82%,rgba(0,0,0,.38),transparent 3.5rem),
      linear-gradient(140deg,transparent 0 44%,rgba(255,255,255,.16) 44.5% 48%,transparent 48.5% 100%);
    opacity:.8; pointer-events:none;
  }
  .cover-mini::after, .cover-big::after { content:none !important; }
  .cover-mini img, .cover-big img { width:100%; height:100%; object-fit:fill; display:block; }

  .trend-name, .game-name { min-width:0; overflow:hidden; color:#fff; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
  .trend-name { font-size:12px; }
  .trend-dev, .game-dev { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#d4d4dc; font-weight:500; }
  .trend-dev { margin-top:5px; font-size:12px; }

  /* ── CATEGORY TABS ── */
  .category-wrap {
    position:sticky; top:76px; z-index:35;
    margin:28px -18px 0; padding:14px 18px 13px;
    background:linear-gradient(180deg,rgba(17,17,19,.97),rgba(17,17,19,.9));
    border-top:1px solid rgba(255,255,255,.035);
    border-bottom:1px solid rgba(255,255,255,.045);
    backdrop-filter:blur(14px); overflow:hidden;
  }
  .tabs-scroll {
    display:flex; align-items:center; gap:9px;
    overflow-x:auto; overflow-y:hidden; padding-bottom:1px; scrollbar-width:none;
  }
  .tabs-scroll::-webkit-scrollbar { display:none; }
  .tab-btn {
    border:1px solid rgba(255,255,255,.06); color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.22);
    flex:0 0 auto; height:40px; padding:0 20px; border-radius:999px;
    background:linear-gradient(180deg,#25252a,#202024);
    font-size:13px; font-weight:900; white-space:nowrap;
    transition:transform .18s,background .18s,border-color .18s;
  }
  .tab-btn.active {
    background:linear-gradient(180deg,var(--orange-2),var(--orange));
    border-color:rgba(255,255,255,.12); color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.25);
  }
  .tab-btn:hover { transform:translateY(-1px); }

  /* ── PRODUCTS ── */
  .products { padding-top:20px; }
  .game-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px; padding-bottom:72px;
  }
  .game-card {
    min-width:0; overflow:hidden; border-radius:13px;
    background:#222226; border:1px solid rgba(255,255,255,.06);
    box-shadow:0 12px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
    transition:transform .2s,border-color .2s,filter .2s;
  }
  .game-card:hover { transform:translateY(-4px); border-color:rgba(255,109,22,.58); filter:brightness(1.05); }
  .cover-big { width:100%; aspect-ratio:1/1; border-radius:12px 12px 0 0; }
  .game-info { padding:11px 12px 14px; min-width:0; }
  .game-name { font-size:14px; }
  .game-dev { margin-top:7px; font-size:11px; }

  /* ── EMPTY STATE ── */
  .search-empty {
    display:none; grid-column:1/-1;
    padding:48px 0; text-align:center; color:var(--dim);
  }
  .search-empty svg { width:48px; height:48px; margin-bottom:12px; opacity:.4; }
  .search-empty p { font-size:14px; font-weight:600; }

  /* ── CHAT FLOAT ── */
  .chat-float {
    position:fixed; right:16px; bottom:18px; z-index:60;
    width:64px; height:64px; border-radius:50%;
    display:grid; place-items:center; border:0;
    background:#673ab7;
    box-shadow:0 16px 32px rgba(0,0,0,.36),0 0 0 8px rgba(72,169,255,.12);
  }
  .chat-float i { font-size:28px; color:#fff; }

  /* ── SIDEBAR ── */
  .sidebar-overlay {
    position:fixed; inset:0; z-index:200;
    background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
    opacity:0; visibility:hidden;
    transition:opacity .3s,visibility .3s;
  }
  .sidebar-overlay.open { opacity:1; visibility:visible; }
  .sidebar {
    position:fixed; top:0; right:0; z-index:201;
    width:min(320px,86vw); height:100%;
    background:#1a1a1e;
    border-left:1px solid rgba(255,255,255,.07);
    box-shadow:-24px 0 64px rgba(0,0,0,.55);
    display:flex; flex-direction:column;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y:auto; overflow-x:hidden;
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 20px 18px;
    border-bottom:1px solid rgba(255,255,255,.06);
    position:sticky; top:0; background:#1a1a1e; z-index:2;
  }
  .sidebar-logo { font-family:var(--display); font-size:26px; letter-spacing:.8px; color:#fff; transform:skewX(-7deg); }
  .sidebar-logo span { color:var(--orange); }
  .sidebar-close {
    width:36px; height:36px; border-radius:50%;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.05); color:#fff;
    display:grid; place-items:center; font-size:18px;
    transition:background .18s;
  }
  .sidebar-close:hover { background:rgba(255,109,22,.18); border-color:rgba(255,109,22,.5); }
  .sidebar-login-cta {
    display:block; margin:16px 20px; padding:13px 18px; border-radius:14px;
    background:linear-gradient(135deg,var(--orange-2),var(--orange));
    color:#fff; font-weight:900; font-size:14px; text-align:center;
    box-shadow:0 8px 20px rgba(255,109,22,.28);
    transition:filter .18s,transform .18s;
  }
  .sidebar-login-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }
  .sidebar-section-label {
    padding:12px 20px 6px; font-size:10px; font-weight:900;
    letter-spacing:1.6px; text-transform:uppercase; color:var(--dim);
  }
  .sidebar-nav { list-style:none; padding:0 10px; }
  .sidebar-nav-item {
    display:flex; align-items:center; gap:14px;
    padding:13px 14px; border-radius:12px;
    color:#d6d6df; font-size:14px; font-weight:700;
    transition:background .18s,color .18s; cursor:pointer;
  }
  .sidebar-nav-item:hover, .sidebar-nav-item.active { background:rgba(255,109,22,.1); color:var(--orange-2); }
  .sidebar-nav-item svg { width:20px; height:20px; flex:0 0 auto; opacity:.85; }
  .sidebar-nav-item .nav-badge {
    margin-left:auto; background:var(--orange); color:#fff;
    font-size:10px; font-weight:900; padding:2px 8px; border-radius:999px;
  }
  .sidebar-divider { height:1px; background:rgba(255,255,255,.06); margin:8px 20px; }
  .sidebar-footer { margin-top:auto; padding:16px 20px 24px; border-top:1px solid rgba(255,255,255,.06); color:var(--dim); font-size:11px; text-align:center; }

  /* ── FOOTER ── */
  .desktop-footer { display:none; margin-top:10px; padding:36px 0; border-top:1px solid rgba(255,255,255,.06); background:rgba(22,22,24,.72); }
  .footer-inner { max-width:var(--max); margin:0 auto; padding:0 18px; display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--dim); font-size:13px; }
  .footer-links { display:flex; gap:22px; list-style:none; }
  .footer-links a { color:var(--muted); font-weight:700; }
  .footer-links a:hover { color:var(--orange); }

  /* ── RESPONSIVE ── */
  @media (max-width:360px) {
    .header-inner { padding:0 10px; gap:6px; }
    .brand { max-width:calc(100vw - 186px); font-size:23px; }
    .round-btn { width:36px; height:36px; }
    .round-btn svg { width:18px; height:18px; }
    .lang-btn { height:36px; padding:0 8px; font-size:11px; gap:5px; }
    .flag-dot { width:17px; height:17px; }
    .page-shell { padding:0 12px; }
    .category-wrap { margin-left:-12px; margin-right:-12px; padding-left:12px; padding-right:12px; }
    .game-grid { gap:12px; }
    .trend-card { gap:8px; padding:7px; }
    .cover-mini { width:50px; height:50px; }
    .trend-name, .trend-dev { font-size:11px; }
  }
  @media (min-width:430px) {
    .header-inner { padding:0 18px; gap:10px; }
    .brand { max-width:48vw; font-size:clamp(28px,6vw,36px); }
    .round-btn { width:42px; height:42px; }
    .round-btn svg { width:21px; height:21px; }
    .lang-btn { height:42px; padding:0 13px; font-size:13px; gap:8px; }
    .flag-dot { width:22px; height:22px; }
  }
  @media (min-width:700px) {
    .page-shell { padding:0 24px; }
    .header-inner { padding:0 24px; }
    .desktop-nav { display:block; }
    .hero-wrap { padding-top:30px; }
    .hero-card { border-radius:24px; min-height:315px; }
    .hero-arrow { display:grid; place-items:center; }
    .section { padding-top:46px; }
    .trending-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
    .trend-card { min-height:94px; padding:10px; border-radius:16px; }
    .cover-mini { width:66px; height:66px; }
    .trend-name { font-size:14px; }
    .category-wrap { position:relative; top:auto; margin:36px 0 0; padding:0 0 22px; background:transparent; border:0; backdrop-filter:none; }
    .game-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
    .desktop-footer { display:block; }
  }
  @media (min-width:900px) {
    .brand { flex:0 1 260px; max-width:260px; font-size:34px; }
    .header-search { display:flex; }
    .round-btn.search-mobile { display:none; }
    .login-btn { display:inline-flex; }
  }
  @media (min-width:1060px) {
    .header-inner { height:66px; }
    .brand { flex-basis:280px; max-width:280px; font-size:34px; }
    .hero-card { min-height:390px; aspect-ratio:2.55/1; }
    .trending-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .game-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .game-info { padding:13px 14px 16px; }
    .game-name { font-size:15px; }
    .game-dev { font-size:12px; }
  }
  @media (min-width:1320px) {
    .page-shell, .header-inner, .nav-inner, .footer-inner { padding-left:0; padding-right:0; }
  }

/* ══ FALLBACK COVER ══ */
.cover-fallback, .cover-fallback-big {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#3a3a44,#1e1e22); color:#fff; font-weight:900;
}
.cover-fallback { font-size:24px; }
.cover-fallback-big { font-size:60px; }

/* ══ MODAL PEMBELIAN — selalu dimulai di bawah header website saat header terlihat ══ */
:root {
  --dgf-vv-top: 0px;
  --dgf-vv-height: 100dvh;
  --dgf-modal-top-space: 16px;
}
html.modal-open, body.modal-open { overflow:hidden; }
.modal-overlay {
  position:fixed; left:0; right:0; top:var(--dgf-vv-top,0px); bottom:auto; z-index:300;
  height:var(--dgf-vv-height,100dvh); min-height:0;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:var(--dgf-modal-top-space,16px) 16px max(16px,env(safe-area-inset-bottom));
  overflow:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal {
  width:100%; max-width:560px;
  max-height:calc(var(--dgf-vv-height,100dvh) - var(--dgf-modal-top-space,16px) - max(16px,env(safe-area-inset-bottom)));
  background:#1a1a1e; border:1px solid rgba(255,255,255,.08); border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  display:flex; flex-direction:column;
  overflow:hidden; min-height:0;
  transform:translateY(20px) scale(.98); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.modal-overlay.open .modal { transform:translateY(0) scale(1); }
/* Mobile: bottom-sheet dibatasi dari bawah header website, jadi header modal tidak melewati atas halaman */
@media(max-width:699px){
  :root { --dgf-modal-top-space: 76px; }
  .modal-overlay{
    align-items:flex-end;
    padding:var(--dgf-modal-top-space,76px) 0 0;
  }
  .modal{
    border-radius:18px 18px 0 0;
    max-height:calc(var(--dgf-vv-height,100dvh) - var(--dgf-modal-top-space,76px));
    transform:translateY(100%);
  }
  .modal-overlay.open .modal{ transform:translateY(0); }
}

.modal-head {
  flex:0 0 auto;            /* header tidak ikut scroll */
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.06);
  background:#1a1a1e;
}

/* Dual input untuk game dengan ID + Server (MLBB, dll) */
.input-row { display:flex; gap:8px; }
.input-row .modal-input { flex:1 1 0; min-width:0; }
.input-row .modal-input.w-server { max-width:120px; flex:0 0 120px; }
.modal-brand { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.modal-cover {
  position:relative; width:54px; height:54px; border-radius:11px; overflow:hidden;
  background:linear-gradient(145deg,#2a2a30,#171719); flex-shrink:0;
  box-shadow:0 6px 14px rgba(0,0,0,.3);
}
.modal-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.modal-title { color:#fff; font-weight:900; font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-sub { color:#b9b9c4; font-size:12px; font-weight:600; margin-top:3px; }
.modal-close {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05);
  color:#fff; display:grid; place-items:center; font-size:16px; flex-shrink:0;
}
.modal-close:hover { background:rgba(255,109,22,.18); border-color:rgba(255,109,22,.5); }
.modal-body { padding:16px 18px; overflow-y:auto; flex:1 1 auto; min-height:0; overscroll-behavior:contain; }
.modal-label { display:block; font-size:12px; font-weight:700; color:#b9b9c4; margin:10px 0 6px; }
.modal-input {
  width:100%; height:42px; padding:0 14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px;
  color:#fff; font-size:14px; font-weight:600; outline:none;
}
.modal-input:focus { border-color:rgba(255,109,22,.6); background:rgba(255,255,255,.08); }
.modal-section-label {
  margin-top:18px; font-size:11px; font-weight:900; letter-spacing:1.4px;
  text-transform:uppercase; color:#777783;
}
.sku-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:10px; }
@media(min-width:500px){ .sku-list{grid-template-columns:repeat(3,1fr);} }
.sku-card {
  padding:10px 12px; border-radius:10px;
  background:#26262b; border:1px solid rgba(255,255,255,.07);
  cursor:pointer; transition:all .15s;
}
.sku-card:hover { border-color:rgba(255,109,22,.5); transform:translateY(-1px); }
.sku-card.sel { border-color:#ff6d16; background:rgba(255,109,22,.12); }
.sku-name { font-size:12px; font-weight:700; color:#fff; line-height:1.3; }
.sku-price { font-size:13px; font-weight:900; color:#ff8f2c; margin-top:6px; }
.sku-empty { grid-column:1/-1; padding:24px; text-align:center; color:#777783; font-size:13px; }
.modal-foot { padding:14px 18px; border-top:1px solid rgba(255,255,255,.06); }
.btn-buy {
  width:100%; height:46px; border:0; border-radius:12px;
  background:linear-gradient(180deg,#ff8f2c,#ff6d16); color:#fff;
  font-weight:900; font-size:14px; letter-spacing:.5px;
  box-shadow:0 8px 20px rgba(255,109,22,.35);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-buy:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.pay-box {
  margin-top:14px; padding:14px; border-radius:12px;
  background:#0f172a; color:#e2e8f0; font-family:'DM Mono',monospace; font-size:12px;
}
.pay-row { margin:2px 0; }
.pay-amt { font-size:24px; font-weight:900; color:#34d399; margin:6px 0; font-family:inherit; }
.pay-meta { font-size:10px; color:#94a3b8; margin-top:4px; }
.pay-bank { margin-top:10px; padding:8px 10px; background:rgba(255,255,255,.05); border-radius:8px; font-size:11px; }
.pay-warn {
  margin-top:10px; padding:10px 12px; border-radius:10px;
  background:rgba(251,191,36,.12); color:#fde68a; font-size:12px; line-height:1.5;
}
.contact-row { display:flex; gap:8px; margin-top:10px; }
.contact-btn {
  flex:1; padding:10px; border-radius:10px; text-align:center;
  font-weight:800; font-size:13px; color:#fff; display:flex; align-items:center; justify-content:center; gap:6px;
}
.contact-btn.wa { background:#25D366; }
.contact-btn.tg { background:#229ED9; }