/* ══════════════════════════════════════════════════════════════
   SIBERFROST.ID — Tema Kutub Utara / Antartika
   Dark mode • Aurora adaptif malam • Glassmorphism • Neon glow
   ══════════════════════════════════════════════════════════════ */
:root{
  --primary:#1E3A5F;
  --secondary:#F0F4F8;
  --accent:#4A90D9;
  --accent-2:#7DD3FC;
  --success:#28A745;
  --danger:#DC3545;
  --warning:#FFC107;
  --dark:#0F172A;
  --card:#1E293B;
  --card-2:#16233B;
  --text:#E6EEF7;
  --muted:#8CA3BD;
  --border:rgba(125,211,252,.14);
  --glow:0 0 18px rgba(74,144,217,.55),0 0 42px rgba(74,144,217,.25);
  --radius:18px;
  --font-head:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'Roboto Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--dark);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
.denom{font-family:var(--font-body)}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0B1220}
::-webkit-scrollbar-thumb{background:#2A3B55;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ── Lapisan langit Antartika ─────────────────────────────── */
.sky-layer{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(74,144,217,.22),transparent 60%),
    radial-gradient(900px 500px at 10% 0%,rgba(30,58,95,.55),transparent 60%),
    linear-gradient(180deg,#0B1426 0%,#0F172A 45%,#0A1020 100%);
  transition:background 1.2s ease;
}
body.daylight .sky-layer{
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(125,211,252,.20),transparent 60%),
    radial-gradient(900px 500px at 10% 0%,rgba(148,197,255,.18),transparent 60%),
    linear-gradient(180deg,#16324F 0%,#10203A 45%,#0C1626 100%);
}

/* ── Suasana adaptif: foto langit Antartika asli mengikuti waktu setempat ── */
body::before{
  content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;
  background-size:cover;background-position:center 20%;
  filter:brightness(.5) saturate(.9);
  transition:opacity 1.2s ease;
}
body.night::before{background-image:url('../images/scene/bg-night.jpg');filter:brightness(.42) saturate(1.05)}
body.sky-morning::before{background-image:url('../images/scene/bg-morning.jpg');filter:brightness(.55) saturate(.9)}
body.sky-day::before{background-image:url('../images/scene/bg-day.jpg');filter:brightness(.6) saturate(.95)}
body.sky-dusk::before{background-image:url('../images/scene/bg-dusk.jpg');filter:brightness(.52) saturate(1.05)}
#aurora{
  position:fixed;inset:-20% -10% auto -10%;height:75vh;z-index:-2;pointer-events:none;
  opacity:0;transition:opacity 2.5s ease;
  filter:blur(40px) saturate(1.2);
  background:
    radial-gradient(45% 90% at 15% 30%,rgba(52,211,153,.34),transparent 70%),
    radial-gradient(40% 80% at 45% 10%,rgba(74,144,217,.30),transparent 70%),
    radial-gradient(45% 90% at 75% 25%,rgba(167,139,250,.30),transparent 70%),
    radial-gradient(35% 70% at 92% 40%,rgba(45,212,191,.26),transparent 70%);
  animation:auroraFlow 16s ease-in-out infinite alternate;
}
body.night #aurora{opacity:1}
#aurora::after{
  content:'';position:absolute;inset:0;
  filter:blur(26px) saturate(1.35);
  background:
    linear-gradient(100deg,transparent 5%,rgba(52,211,153,.5) 22%,rgba(45,212,191,.42) 38%,transparent 55%),
    linear-gradient(80deg,transparent 30%,rgba(96,165,250,.45) 52%,rgba(167,139,250,.38) 68%,transparent 85%);
  mix-blend-mode:screen;
  animation:auroraFlow 12s ease-in-out infinite alternate-reverse;
}
@keyframes auroraFlow{
  0%{transform:translate3d(-3%,0,0) skewX(-6deg) scaleY(1)}
  50%{transform:translate3d(3%,2%,0) skewX(4deg) scaleY(1.08)}
  100%{transform:translate3d(-2%,-1%,0) skewX(-3deg) scaleY(.96)}
}
#snow-canvas{position:fixed;inset:0;z-index:60;pointer-events:none}

/* Pegunungan es ASLI Antartika (foto nyata) + kabut malam */
/* Lanskap Antartika: TINGGI DIKUNCI ~28vh (di tengah rentang wajib 15–35% layar)
   supaya pemandangan bersalju tidak pernah tertutup total oleh konten. */
.ice-scape{position:fixed;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;line-height:0;height:28vh;overflow:hidden}
.mtn{position:absolute;left:-6%;right:-6%;bottom:0;background-repeat:repeat-x;background-position:bottom center;background-size:auto 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 42%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 42%);
  transition:opacity 1.6s ease,filter 1.6s ease}
.mtn-far {height:100%;background-image:url('../images/scene/mtn-far.jpg');opacity:.5}
.mtn-mid {height:82%;background-image:url('../images/scene/mtn-mid.jpg');opacity:.72}
.mtn-near{height:58%;background-image:url('../images/scene/mtn-near.jpg');opacity:.9}
.ice-fog{position:absolute;left:-10%;right:-10%;bottom:0;height:70%;opacity:0;transition:opacity 2s ease;
  background:linear-gradient(to top,rgba(214,232,245,.92) 8%,rgba(198,222,240,.55) 45%,transparent 85%);
  filter:blur(6px)}
.ice-fog2{height:46%;background:linear-gradient(to top,rgba(226,240,250,.95) 15%,transparent 90%);filter:blur(14px)}
body.night .mtn{filter:brightness(.38) saturate(.7) blur(1.5px)}
body.night .mtn-far{opacity:.30}body.night .mtn-mid{opacity:.34}body.night .mtn-near{opacity:.38}
body.night .ice-fog{opacity:.9}body.night .ice-fog2{opacity:.85}
body.daylight .ice-fog,body.daylight .ice-fog2{opacity:0}

/* ── Header ───────────────────────────────────────────────── */
header.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:12px 20px;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:1.25rem}
.brand img{height:38px;width:auto;border-radius:10px}
.brand .dot{color:var(--accent-2)}
.nav-links{display:none;gap:6px;margin-left:auto;align-items:center}
.nav-links a{
  padding:8px 14px;border-radius:10px;font-size:.92rem;color:var(--muted);
  transition:.25s;
}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(74,144,217,.16)}
.btn-login{
  background:linear-gradient(135deg,var(--accent),#2E6FB7);
  color:#fff!important;font-weight:600;
  box-shadow:var(--glow);
}
.btn-login:hover{transform:translateY(-1px)}
.hamburger{display:block;margin-left:auto;background:none;border:1px solid var(--border);border-radius:10px;color:var(--text);padding:8px 11px;font-size:1.1rem}
.mobile-menu{
  display:flex;position:fixed;top:0;left:0;bottom:0;width:min(320px,85vw);z-index:70;
  background:rgba(13,20,36,.98);backdrop-filter:blur(16px);
  border-right:1px solid var(--border);padding:18px 22px 24px;
  flex-direction:column;gap:4px;
  transform:translateX(-105%);transition:transform .35s ease;
  visibility:hidden;pointer-events:none;
}
.mobile-menu.open{transform:translateX(0);visibility:visible;pointer-events:auto}
.mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mm-head img{width:44px;height:44px;border-radius:13px;object-fit:cover}
.mm-head .close-x{background:none;border:none;color:var(--text);font-size:1.7rem;cursor:pointer;padding:4px 8px}
.mobile-menu a{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;border-radius:12px;font-size:1.02rem;color:#E2E8F0;text-decoration:none;border-bottom:1px solid rgba(125,211,252,.07);transition:.2s}
.mobile-menu a:hover{background:rgba(74,144,217,.15);color:#fff}
.mobile-menu a svg{width:19px;height:19px;color:var(--accent-2);flex:none}
.menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:65}
.menu-overlay.show{display:block}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{
  position:relative;padding:56px 20px 100px;text-align:center;overflow:hidden;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:99px;font-size:.82rem;letter-spacing:.06em;
  background:rgba(74,144,217,.14);border:1px solid var(--border);color:var(--accent-2);
  margin-bottom:22px;
}
.hero-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 10px var(--success);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.hero h1{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(2rem,6vw,3.6rem);line-height:1.12;
  background:linear-gradient(100deg,#FFFFFF 20%,var(--accent-2) 55%,#A5B4FC 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:16px;
}
.hero p.sub{color:var(--muted);font-size:clamp(.95rem,2.4vw,1.15rem);max-width:640px;margin:0 auto 34px}
.hero-logo{width:min(150px,32vw);border-radius:28px;margin:0 auto 26px;display:block;
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 60px rgba(74,144,217,.25);
  border:1px solid var(--border);
}
.cta-big{
  display:inline-flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,var(--accent) 0%,#2563EB 60%,#1D4ED8 100%);
  color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.05rem;
  padding:16px 40px;border-radius:16px;border:none;
  box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.25);
  transition:.28s;position:relative;overflow:hidden;
}
.cta-big::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  animation:sheen 3.2s infinite;
}
@keyframes sheen{0%{left:-80%}60%,100%{left:130%}}
.cta-big:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 26px rgba(74,144,217,.75),0 0 70px rgba(74,144,217,.35)}
.cta-ghost{
  display:inline-flex;align-items:center;gap:8px;margin-left:12px;
  padding:15px 26px;border-radius:16px;border:1px solid var(--border);
  color:var(--accent-2);font-weight:600;background:rgba(30,41,59,.5);
  transition:.25s;
}
.cta-ghost:hover{border-color:var(--accent);background:rgba(74,144,217,.15)}

/* Counter */
.counters{display:flex;justify-content:center;gap:clamp(18px,5vw,64px);margin-top:56px;flex-wrap:wrap}
.counter{text-align:center}
.counter .num{font-family:var(--font-mono);font-size:clamp(1.5rem,4vw,2.3rem);font-weight:700;color:var(--accent-2)}
.counter .lbl{color:var(--muted);font-size:.85rem;margin-top:4px;letter-spacing:.04em}

/* Widget info real-time Antartika — foto asli, anti-terpotong di HP */
.polar-widget{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  max-width:760px;margin:30px auto 0;
}
.pw-cell{
  display:flex;align-items:center;gap:9px;min-width:0;
  padding:10px 12px;border-radius:14px;
  background:rgba(30,41,59,.55);border:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.pw-img{width:46px;height:46px;object-fit:cover;border-radius:10px;flex:none;border:1px solid rgba(255,255,255,.25)}
.pw-thermo{object-fit:cover}
.pw-sky{font-size:1.7rem;flex:none}
.pw-txt{font-size:.72rem;color:var(--muted);line-height:1.35;min-width:0;text-align:left}
.pw-txt b{display:block;color:var(--accent-2);font-family:var(--font-mono);font-size:.8rem;word-break:break-word}

/* ── Section umum ─────────────────────────────────────────── */
section{padding:64px 20px;max-width:1220px;margin:0 auto}
.sec-title{font-family:var(--font-head);font-weight:700;font-size:clamp(1.35rem,3.4vw,1.9rem);display:flex;align-items:center;gap:12px;margin-bottom:8px}
.sec-title .bar{width:6px;height:26px;border-radius:4px;background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:var(--glow)}
.sec-sub{color:var(--muted);margin-bottom:30px;font-size:.95rem}

/* ── Flash Sale ───────────────────────────────────────────── */
.flash-sale{
  border-radius:24px;padding:30px;
  background:linear-gradient(135deg,rgba(220,53,69,.14),rgba(30,41,59,.7) 45%);
  border:1px solid rgba(255,193,7,.25);
  position:relative;overflow:hidden;
}
.flash-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.flash-badge{
  font-family:var(--font-head);font-weight:800;letter-spacing:.08em;
  background:linear-gradient(135deg,#FF416C,#FF4B2B);color:#fff;
  padding:8px 18px;border-radius:12px;font-size:1rem;
  animation:blinkGlow 1.4s ease-in-out infinite;
}
@keyframes blinkGlow{50%{box-shadow:0 0 24px rgba(255,65,108,.8);transform:scale(1.03)}}
.countdown{display:flex;gap:8px;margin-left:auto}
.countdown .cell{
  background:#0B1220;border:1px solid var(--border);border-radius:10px;
  min-width:52px;padding:8px 6px;text-align:center;
}
.countdown .cell b{display:block;font-family:var(--font-mono);font-size:1.3rem;color:var(--warning)}
.countdown .cell span{font-size:.62rem;color:var(--muted);letter-spacing:.08em}
.flash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.flash-card{
  background:rgba(15,23,42,.75);border:1px solid var(--border);border-radius:18px;padding:16px;
  display:flex;gap:14px;align-items:center;transition:.3s;cursor:pointer;
}
.flash-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--glow)}
.flash-card img{width:64px;height:64px;border-radius:14px;object-fit:cover;border:2px solid rgba(255,255,255,.85)}
.flash-card .fname{font-weight:600;font-size:.92rem}
.flash-card .fprice{font-family:var(--font-mono);color:var(--warning);font-weight:700;margin-top:3px}
.flash-card .fold{font-family:var(--font-mono);color:var(--muted);text-decoration:line-through;font-size:.75rem}
.stock-bar{height:6px;border-radius:6px;background:#0B1220;margin-top:8px;overflow:hidden}
.stock-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--warning),#FF416C)}
.stock-txt{font-size:.68rem;color:var(--muted);margin-top:4px}

/* ── Kartu produk ala Barongsay ───────────────────────────── */
.grid-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.game-card{
  background:linear-gradient(160deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--border);border-radius:18px;
  padding:8px 8px 14px;text-align:center;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.3,1.2),box-shadow .3s,border-color .3s;
  position:relative;overflow:hidden;
}
.game-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120px 90px at 50% 0%,rgba(125,211,252,.14),transparent 70%);
  opacity:0;transition:.3s;
}
.game-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--glow)}
.game-card:hover::before{opacity:1}
.game-card .gimg{
  width:100%;aspect-ratio:1/1;height:auto;margin:0 auto 12px;border-radius:14px;
  border:none;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  transition:transform .35s;
}
.game-card:hover .gimg{transform:scale(1.04)}
.game-card .gimg img{width:100%;height:100%;object-fit:cover}
.game-card .gname{font-family:var(--font-head);font-weight:600;font-size:.86rem;line-height:1.3;min-height:2.2em}
.game-card .gcat{
  display:inline-block;margin-top:8px;font-size:.62rem;letter-spacing:.06em;font-weight:600;
  padding:3px 10px;border-radius:99px;text-transform:uppercase;
}
.gcat.direct{background:rgba(74,144,217,.18);color:var(--accent-2)}
.gcat.voucher{background:rgba(167,139,250,.18);color:#C4B5FD}
.gcat.ppob{background:rgba(40,167,69,.16);color:#6EE7A0}
.gcat.login{background:rgba(251,191,36,.16);color:#FCD34D}
.game-card .gprice{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);margin-top:8px}
.game-card .gprice b{color:#fff;font-size:.85rem}
.status-dot{position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%}
.status-dot.on{background:var(--success);box-shadow:0 0 9px var(--success)}
.status-dot.off{background:var(--danger);box-shadow:0 0 9px var(--danger)}

/* Toolbar katalog */
.catalog-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.search-box{
  flex:1;min-width:220px;display:flex;align-items:center;gap:10px;
  background:rgba(30,41,59,.7);border:1px solid var(--border);border-radius:14px;padding:12px 16px;
}
.search-box input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:.95rem}
.search-box input::placeholder{color:var(--muted)}
.tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;
  padding:10px 18px;border-radius:12px;border:1px solid var(--border);
  background:rgba(30,41,59,.55);color:var(--muted);font-weight:600;font-size:.85rem;transition:.25s;
}
.tab:hover{color:#fff}
.tab.active{background:linear-gradient(135deg,var(--accent),#2563EB);color:#fff;border-color:transparent;box-shadow:var(--glow)}
.sort-select{
  background:rgba(30,41,59,.7);border:1px solid var(--border);border-radius:12px;
  color:var(--text);padding:10px 14px;font-size:.85rem;outline:none;
}
.load-more{
  display:block;margin:34px auto 0;padding:13px 34px;border-radius:14px;
  border:1px solid var(--accent);background:rgba(74,144,217,.12);color:var(--accent-2);
  font-weight:600;transition:.25s;
}
.load-more:hover{background:rgba(74,144,217,.28);box-shadow:var(--glow)}
.no-result{text-align:center;color:var(--muted);padding:50px 0;font-size:1rem}

/* ── Cara Order ───────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;position:relative}
.step{
  background:rgba(30,41,59,.55);border:1px solid var(--border);border-radius:20px;
  padding:28px 22px;text-align:center;position:relative;transition:.3s;backdrop-filter:blur(8px);
}
.step:hover{transform:translateY(-5px);border-color:var(--accent)}
.step .sico{
  width:64px;height:64px;margin:0 auto 16px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;background:linear-gradient(135deg,rgba(74,144,217,.3),rgba(37,99,235,.15));
  border:1px solid var(--border);box-shadow:var(--glow);
}
.step .snum{
  position:absolute;top:14px;left:16px;font-family:var(--font-mono);font-weight:700;
  color:var(--accent);font-size:.85rem;opacity:.8;
}
.step h3{font-family:var(--font-head);font-size:1.02rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.85rem;line-height:1.55}
.step-line{height:4px;border-radius:4px;background:#0B1220;margin-top:34px;overflow:hidden}
.step-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 1.4s ease}
.step-line.fill i{width:100%}

/* ── Testimoni ────────────────────────────────────────────── */
.testi-wrap{position:relative;overflow:hidden;border-radius:24px}
.testi-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.testi{
  min-width:100%;padding:34px;background:rgba(30,41,59,.55);border:1px solid var(--border);
  border-radius:24px;text-align:center;backdrop-filter:blur(8px);
}
.testi .tava{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;border:3px solid var(--accent);object-fit:cover;background:#334155;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:#fff}
.testi .stars{color:var(--warning);letter-spacing:3px;margin-bottom:12px}
.testi p{color:var(--text);font-style:italic;max-width:520px;margin:0 auto 14px;line-height:1.65}
.testi .tname{font-weight:700;font-family:var(--font-head)}
.testi .tgame{color:var(--muted);font-size:.82rem}
.testi-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.testi-dots button{width:9px;height:9px;border-radius:50%;border:none;background:#334155;transition:.3s}
.testi-dots button.active{background:var(--accent-2);box-shadow:0 0 8px var(--accent-2);width:24px;border-radius:6px}

/* ── Footer ───────────────────────────────────────────────── */
footer{
  margin-top:70px;border-top:1px solid var(--border);
  background:linear-gradient(180deg,rgba(15,23,42,.6),#0A1020);
  padding:54px 20px 30px;
}
.foot-grid{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px}
.foot-grid h4{font-family:var(--font-head);margin-bottom:16px;color:var(--accent-2);font-size:1rem}
.foot-grid a{display:block;color:var(--muted);padding:5px 0;font-size:.9rem;transition:.2s}
.foot-grid a:hover{color:#fff;padding-left:5px}
.foot-brand img{width:130px;border-radius:16px;margin-bottom:14px}
.foot-brand .paw-live{width:92px;height:92px;border-radius:22px;margin-bottom:14px;display:block}
.foot-brand .paw-live .pl-prints i{width:22px;height:22px;margin:-11px 0 0 -11px}
.foot-brand p{color:var(--muted);font-size:.88rem;line-height:1.65}
.copyright{max-width:1220px;margin:38px auto 0;padding-top:20px;border-top:1px solid rgba(125,211,252,.08);text-align:center;color:var(--muted);font-size:.82rem}

/* ── Glass card umum ──────────────────────────────────────── */
.glass{
  background:rgba(30,41,59,.55);border:1px solid var(--border);border-radius:var(--radius);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

/* ── Skeleton loading ─────────────────────────────────────── */
.skeleton{position:relative;overflow:hidden;background:#1A2740;border-radius:20px;min-height:190px}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(125,211,252,.09) 50%,transparent 70%);
  animation:skl 1.4s infinite;
}
@keyframes skl{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ── Toast ────────────────────────────────────────────────── */
#toast-box{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{
  padding:14px 24px;border-radius:14px;font-weight:600;font-size:.92rem;
  background:rgba(15,23,42,.95);border:1px solid var(--accent);color:#fff;
  box-shadow:var(--glow);animation:toastIn .35s ease;display:flex;gap:10px;align-items:center;
  max-width:88vw;
}
.toast.success{border-color:var(--success);box-shadow:0 0 18px rgba(40,167,69,.5)}
.toast.error{border-color:var(--danger);box-shadow:0 0 18px rgba(220,53,69,.5)}
@keyframes toastIn{from{opacity:0;transform:translateY(18px)}to{opacity:1}}

/* ── Halaman Order ────────────────────────────────────────── */
.breadcrumb{color:var(--muted);font-size:.85rem;margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--accent-2)}
.order-banner{
  border-radius:24px;overflow:hidden;position:relative;margin-bottom:28px;
  border:1px solid var(--border);min-height:170px;
  display:flex;align-items:flex-end;
  background:linear-gradient(120deg,#12203A,#0B1426);
}
.order-banner .bgblur{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(26px) brightness(.55);transform:scale(1.2)}
.order-banner .inner{position:relative;display:flex;gap:20px;align-items:center;padding:26px;width:100%;flex-wrap:wrap}
.order-banner img.ologo{width:104px;height:104px;border-radius:24px;border:3px solid rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.order-banner h1{font-family:var(--font-head);font-size:clamp(1.2rem,3.4vw,1.7rem)}
.order-banner .odesc{color:var(--muted);font-size:.88rem;margin-top:6px;max-width:560px}
.form-card{padding:26px;margin-bottom:22px}
.form-card h2{font-family:var(--font-head);font-size:1.08rem;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.form-card h2 .stepnum{
  width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),#2563EB);font-size:.85rem;color:#fff;box-shadow:var(--glow);
}
.input-row{display:flex;gap:14px;flex-wrap:wrap}
.field{flex:1;min-width:200px;position:relative}
.field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:7px}
.field input{
  width:100%;padding:14px 16px 14px 44px;border-radius:13px;font-size:.98rem;
  background:#0F1930;border:1px solid var(--border);color:var(--text);outline:none;transition:.25s;
}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(74,144,217,.22)}
.field .fico{position:absolute;left:14px;bottom:14px;font-size:1.05rem;opacity:.75}
.btn-check{
  margin-top:14px;padding:12px 22px;border-radius:12px;border:1px solid var(--accent);
  background:rgba(74,144,217,.12);color:var(--accent-2);font-weight:600;transition:.25s;
}
.btn-check:hover{background:rgba(74,144,217,.3)}
.nick-result{margin-top:14px;padding:13px 18px;border-radius:12px;display:none;font-weight:600}
.nick-result.ok{display:block;background:rgba(40,167,69,.13);border:1px solid rgba(40,167,69,.5);color:#6EE7A0}

.denom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:13px}
.denom{
  background:#0F1930;border:1px solid var(--border);border-radius:15px;padding:15px 13px;
  cursor:pointer;transition:.25s;position:relative;text-align:left;
}
.denom:hover{transform:translateY(-3px);border-color:rgba(125,211,252,.45)}
.denom.selected{border-color:var(--accent);box-shadow:var(--glow);background:rgba(74,144,217,.12)}
.denom.selected::after{
  content:"✓";position:absolute;top:9px;right:11px;width:20px;height:20px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.7rem;display:flex;align-items:center;justify-content:center;
}
.denom .dico{width:34px;height:34px;object-fit:contain;margin-bottom:9px}
.denom .dname{font-weight:600;font-size:.88rem;display:block;min-height:2.1em}
.denom .dold{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);text-decoration:line-through}
.denom .dprice{font-family:var(--font-mono);font-weight:700;color:#fff;font-size:.98rem;display:block;margin-top:2px}
.denom .ddisc{
  position:absolute;top:-8px;left:10px;background:linear-gradient(135deg,#FF416C,#FF4B2B);
  color:#fff;font-size:.62rem;font-weight:700;padding:3px 8px;border-radius:8px;
}
.pack-divider{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:var(--warning);font-weight:700;font-family:var(--font-head);font-size:.95rem}
.pack-divider::before,.pack-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,193,7,.5),transparent)}

/* Pembayaran */
.pay-group{border:1px solid var(--border);border-radius:15px;margin-bottom:12px;overflow:hidden}
.pay-group>button{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:rgba(15,25,48,.8);border:none;color:var(--text);padding:15px 18px;font-weight:700;font-family:var(--font-head);font-size:.95rem;
}
.pay-group .plist{display:none;padding:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px;background:rgba(11,18,32,.5)}
.pay-group.open .plist{display:grid}
.pay-opt{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;
  background:#0F1930;border:1px solid var(--border);cursor:pointer;transition:.25s;
}
.pay-opt:hover{border-color:rgba(125,211,252,.4)}
.pay-opt.selected{border-color:var(--accent);box-shadow:var(--glow)}
.pay-opt img{width:38px;height:38px;border-radius:9px;object-fit:cover;background:#fff}
.pay-opt .pname{font-size:.85rem;font-weight:600}
.pay-opt .pfee{font-size:.7rem;color:var(--muted);font-family:var(--font-mono)}

/* Ringkasan & tombol bayar */
.summary{padding:24px;position:sticky;top:86px}
.summary h3{font-family:var(--font-head);margin-bottom:16px}
.sum-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.9rem;color:var(--muted)}
.sum-row b{color:#fff;font-family:var(--font-mono)}
.sum-total{display:flex;justify-content:space-between;padding-top:14px;margin-top:10px;border-top:1px dashed rgba(125,211,252,.25);font-size:1.05rem}
.sum-total b{font-family:var(--font-mono);color:var(--accent-2);font-size:1.25rem}
.btn-pay{
  width:100%;margin-top:20px;padding:17px;border-radius:15px;border:none;
  background:linear-gradient(135deg,var(--accent),#2563EB);color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:1.05rem;letter-spacing:.03em;
  box-shadow:var(--glow);transition:.3s;position:relative;overflow:hidden;
}
.btn-pay::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);animation:sheen 3s infinite}
.btn-pay:disabled{opacity:.4;box-shadow:none;cursor:not-allowed}
.btn-pay:not(:disabled):hover{transform:translateY(-2px)}
.order-layout{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}

/* ── Checkout / invoice ───────────────────────────────────── */
.invoice{max-width:640px;margin:0 auto;position:relative;overflow:hidden}
.invoice .wm{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);
  width:340px;opacity:.05;pointer-events:none;
}
.inv-head{text-align:center;padding-bottom:20px;border-bottom:2px dashed rgba(125,211,252,.25);margin-bottom:20px}
.inv-head img{width:76px;border-radius:18px;margin-bottom:12px}
.inv-num{font-family:var(--font-mono);font-size:1.3rem;color:var(--accent-2);font-weight:700}
.pay-timer{
  text-align:center;margin:18px 0;padding:14px;border-radius:14px;
  background:rgba(255,193,7,.1);border:1px solid rgba(255,193,7,.4);
}
.pay-timer b{font-family:var(--font-mono);font-size:1.5rem;color:var(--warning)}
.status-track{display:flex;justify-content:space-between;margin:26px 0 8px;position:relative}
.status-track::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:3px;background:#0B1220;border-radius:3px}
.status-track .prog{position:absolute;top:19px;left:8%;height:3px;background:linear-gradient(90deg,var(--warning),var(--success));border-radius:3px;transition:width 1s ease;z-index:1}
.st{position:relative;z-index:2;text-align:center;flex:1}
.st .dot{width:40px;height:40px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:#0F1930;border:2px solid #2A3B55;transition:.4s}
.st span{font-size:.7rem;color:var(--muted)}
.st.active .dot{border-color:var(--warning);box-shadow:0 0 14px rgba(255,193,7,.6)}
.st.done .dot{border-color:var(--success);background:rgba(40,167,69,.2);box-shadow:0 0 14px rgba(40,167,69,.55)}
.st.done span{color:#6EE7A0}
.st.failed .dot{border-color:var(--danger);background:rgba(220,53,69,.2);box-shadow:0 0 14px rgba(220,53,69,.5)}

/* ── Leaderboard ──────────────────────────────────────────── */
.lb-row{
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;margin-bottom:10px;
  background:rgba(30,41,59,.55);border:1px solid var(--border);
}
.lb-row.top1{background:linear-gradient(90deg,rgba(255,193,7,.16),rgba(30,41,59,.55));border-color:rgba(255,193,7,.4)}
.lb-row.top2{background:linear-gradient(90deg,rgba(192,192,192,.12),rgba(30,41,59,.55))}
.lb-row.top3{background:linear-gradient(90deg,rgba(205,127,50,.12),rgba(30,41,59,.55))}
.lb-rank{font-family:var(--font-mono);font-weight:800;font-size:1.15rem;width:38px;text-align:center}
.lb-name{flex:1;font-weight:600}
.lb-amt{font-family:var(--font-mono);color:var(--accent-2);font-weight:700}

/* ── Artikel ──────────────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.blog-card{border-radius:20px;overflow:hidden;transition:.3s;cursor:pointer}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--glow)}
.blog-thumb{height:170px;position:relative;overflow:hidden}
.blog-thumb img.cover{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.blog-card:hover .blog-thumb img.cover{transform:scale(1.06)}
.blog-thumb .btag{position:absolute;top:12px;left:12px;background:rgba(15,23,42,.72);backdrop-filter:blur(6px);color:#E2E8F0;font-size:.68rem;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}
.blog-src{font-size:.68rem;color:var(--muted);margin-top:8px;font-style:italic}
.article-hero{max-width:760px;margin:0 auto 26px;border-radius:22px;overflow:hidden;position:relative;border:1px solid var(--border);min-height:210px;display:flex;align-items:flex-end}
.article-hero img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-hero .ah-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.15),rgba(15,23,42,.92))}
.article-hero .ah-text{position:relative;padding:26px}
.article-src{max-width:760px;margin:-14px auto 22px;font-size:.72rem;color:var(--muted);font-style:italic}
.article-body{max-width:760px;margin:0 auto}
.article-body h1{font-family:var(--font-head);font-size:1.55rem;line-height:1.35;margin-bottom:10px}
.article-body .ameta{color:var(--muted);font-size:.8rem;margin-bottom:24px;display:flex;gap:14px;flex-wrap:wrap}
.article-body h2{font-family:var(--font-head);font-size:1.12rem;margin:26px 0 10px;color:var(--accent-2)}
.article-body p{color:#CBD5E1;font-size:.93rem;line-height:1.85;margin-bottom:14px}
.article-body ul{color:#CBD5E1;font-size:.93rem;line-height:1.85;margin:0 0 14px 20px}
.article-body li{margin-bottom:6px}
.article-body .hl{background:rgba(74,144,217,.12);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:14px 18px;margin:18px 0;color:#DBEAFE;font-size:.9rem}
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent-2);font-size:.86rem;font-weight:600;text-decoration:none;margin-bottom:20px;cursor:pointer}
.back-link:hover{text-decoration:underline}
.blog-body{padding:20px}
.blog-body h3{font-family:var(--font-head);font-size:1rem;margin-bottom:8px;line-height:1.4}
.blog-body p{color:var(--muted);font-size:.85rem;line-height:1.6}
.blog-meta{display:flex;gap:12px;margin-top:14px;font-size:.75rem;color:var(--muted)}

/* ── Login ────────────────────────────────────────────────── */
.auth-card{max-width:430px;margin:30px auto;padding:34px}
.auth-card .alogo{width:84px;border-radius:20px;display:block;margin:0 auto 18px}
.auth-card h1{text-align:center;font-family:var(--font-head);margin-bottom:6px}
.auth-card .asub{text-align:center;color:var(--muted);font-size:.88rem;margin-bottom:26px}
.auth-tabs{display:flex;background:#0B1220;border-radius:12px;padding:5px;margin-bottom:22px}
.auth-tabs button{flex:1;padding:10px;border:none;border-radius:9px;background:none;color:var(--muted);font-weight:700;transition:.25s}
.auth-tabs button.active{background:linear-gradient(135deg,var(--accent),#2563EB);color:#fff}
.pass-wrap{position:relative}
.pass-toggle{position:absolute;right:12px;bottom:11px;background:none;border:none;cursor:pointer;color:var(--muted);display:flex;align-items:center;transition:.2s}
.pass-toggle:hover,.pass-toggle.show{color:var(--accent)}
.auth-row{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;margin-bottom:18px;color:var(--muted)}
.remember{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.remember input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--muted);font-size:.76rem}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.btn-google{width:100%;padding:12px;border-radius:13px;border:1px solid var(--border);background:#0B1220;color:var(--text);font-weight:600;font-size:.92rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:.2s;font-family:'Inter',sans-serif}
.btn-google:hover{border-color:var(--accent);background:#111C33}
.btn-full{width:100%;padding:15px;border-radius:13px;border:none;background:linear-gradient(135deg,var(--accent),#2563EB);color:#fff;font-weight:700;font-size:1rem;box-shadow:var(--glow);transition:.25s}
.btn-full:hover{transform:translateY(-2px)}

/* ── Admin ────────────────────────────────────────────────── */
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.admin-side{background:#0B1426;border-right:1px solid var(--border);padding:24px 14px;position:sticky;top:0;height:100vh}
.admin-side .brand{margin-bottom:28px;padding:0 8px}
.admin-side a{display:flex;gap:11px;align-items:center;padding:12px 14px;border-radius:12px;color:var(--muted);font-size:.92rem;margin-bottom:4px;transition:.2s}
.admin-side a:hover,.admin-side a.active{background:rgba(74,144,217,.15);color:#fff}
.admin-main{padding:30px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:26px}
.stat-card{padding:22px;border-radius:18px}
.stat-card .sico{font-size:1.5rem;margin-bottom:10px}
.stat-card .sval{font-family:var(--font-mono);font-size:1.55rem;font-weight:700}
.stat-card .slbl{color:var(--muted);font-size:.82rem;margin-top:4px}
.stat-card .sdelta{font-size:.75rem;margin-top:8px}
.stat-card .up{color:#6EE7A0}.stat-card .down{color:#F87171}
.tbl-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--border)}
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
.tbl th{background:#0F1930;padding:13px 14px;text-align:left;font-family:var(--font-head);font-size:.78rem;letter-spacing:.05em;color:var(--muted)}
.tbl td{padding:12px 14px;border-top:1px solid rgba(125,211,252,.07)}
.tbl tr:hover td{background:rgba(74,144,217,.06)}
.badge{display:inline-block;padding:4px 11px;border-radius:99px;font-size:.7rem;font-weight:700}
.badge.success{background:rgba(40,167,69,.18);color:#6EE7A0}
.badge.pending{background:rgba(255,193,7,.15);color:var(--warning)}
.badge.process{background:rgba(74,144,217,.18);color:var(--accent-2)}
.badge.failed{background:rgba(220,53,69,.18);color:#F87171}
.btn-sm{padding:7px 14px;border-radius:9px;border:1px solid var(--border);background:rgba(30,41,59,.6);color:var(--text);font-size:.78rem;transition:.2s}
.btn-sm:hover{border-color:var(--accent);color:var(--accent-2)}
.btn-sm.danger{border-color:rgba(220,53,69,.5);color:#F87171}
.chart-box{padding:24px;border-radius:18px;height:340px}
.admin-toggle{position:relative;width:44px;height:24px;border-radius:99px;background:#334155;border:none;transition:.25s}
.admin-toggle.on{background:var(--success)}
.admin-toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.25s}
.admin-toggle.on::after{left:23px}

/* ── Setup page ───────────────────────────────────────────── */
.setup-card{max-width:640px;margin:30px auto;padding:32px}
.setup-group{border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:20px}
.setup-group h3{font-family:var(--font-head);color:var(--accent-2);margin-bottom:16px;font-size:1rem}
.btn-save{
  width:100%;padding:17px;border-radius:15px;border:none;
  background:linear-gradient(135deg,#22C55E,#16A34A);color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:1.05rem;
  box-shadow:0 0 18px rgba(34,197,94,.5),0 0 44px rgba(34,197,94,.22);transition:.3s;
}
.btn-save:hover{transform:translateY(-2px)}
.setup-steps{counter-reset:st;margin-top:26px}
.setup-steps li{list-style:none;color:var(--muted);font-size:.9rem;padding:7px 0 7px 34px;position:relative;counter-increment:st}
.setup-steps li::before{
  content:counter(st);position:absolute;left:0;top:6px;width:24px;height:24px;border-radius:8px;
  background:rgba(74,144,217,.2);color:var(--accent-2);font-size:.75rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* ── Floating WA ──────────────────────────────────────────── */
.wa-float{
  position:fixed;right:20px;bottom:22px;z-index:80;width:62px;height:62px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2C4E7E,#0F172A 78%);
  border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(74,144,217,.5);
  transition:.3s;animation:csPulse 2.6s infinite;
}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{display:block}
.cs-online{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:#28A745;border:2.5px solid #0F172A;box-shadow:0 0 8px #28A745}
.cs-tip{position:absolute;right:72px;top:50%;transform:translateY(-50%) translateX(8px);
  white-space:nowrap;font-size:.75rem;font-weight:600;color:var(--text);
  background:rgba(30,41,59,.92);border:1px solid var(--border);border-radius:10px;
  padding:7px 12px;opacity:0;pointer-events:none;transition:.25s}
.wa-float:hover .cs-tip{opacity:1;transform:translateY(-50%) translateX(0)}
@keyframes csPulse{
  0%{box-shadow:0 8px 24px rgba(74,144,217,.5),0 0 0 0 rgba(74,144,217,.45)}
  70%{box-shadow:0 8px 24px rgba(74,144,217,.5),0 0 0 14px rgba(74,144,217,0)}
  100%{box-shadow:0 8px 24px rgba(74,144,217,.5),0 0 0 0 rgba(74,144,217,0)}
}

/* ── Confetti canvas ──────────────────────────────────────── */
#confetti-canvas{position:fixed;inset:0;z-index:150;pointer-events:none}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:960px){
  .order-layout{grid-template-columns:1fr}
  .summary{position:static}
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:fixed;z-index:70;transform:translateX(-100%);transition:.3s;width:250px}
  .admin-side.open{transform:none}
}
@media (max-width:760px){
  section{padding:46px 14px}
  .grid-games{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:11px}
  .game-card{padding:8px 8px 12px;border-radius:16px}
  .game-card .gimg{width:100%;height:auto;aspect-ratio:1/1;border-radius:12px}
  .game-card .gname{font-size:.72rem}
  .hero{padding:60px 14px 90px}
  .cta-ghost{margin:12px 0 0}
  .countdown{margin-left:0}
}

/* ── EXTRA: header logo, hero kecil, kaca pembesar, iklan, search, tabs, responsif perangkat */
.brand img{width:46px;height:46px;border-radius:13px;object-fit:cover}
.hero-logo{width:72px!important;height:72px!important;border-radius:18px!important;margin-bottom:6px!important}
.nav-mag{width:17px;height:17px;border-radius:50%;object-fit:cover;vertical-align:-3px;margin-right:5px;border:1.5px solid var(--border)}
/* ── Iklan carousel: dirombak total, gaya elegan Codashop + UniPin ──
   Codashop: banner lebar rasio kecil, dot indikator di bawah luar banner.
   UniPin: kartu bersudut membulat, teks + tombol menumpuk di atas gambar
   dengan gradasi gelap supaya tetap terbaca. */
.ad-carousel{position:relative;max-width:660px;margin:0 auto 18px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 30px rgba(2,6,17,.42)}
.ad-track{display:flex;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.ad-slide{min-width:100%;position:relative;aspect-ratio:16/7;display:block;
  user-select:none;color:#fff;text-decoration:none;overflow:hidden}
/* gambar jadi LATAR penuh, bukan ikon kecil di samping */
.ad-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:0;box-shadow:none;background:transparent;transition:transform .6s ease}
.ad-slide:hover .ad-art{transform:scale(1.04)}
.ad-art-logo{object-fit:contain;padding:12% 18%;background:transparent}
/* gradasi supaya teks selalu terbaca di atas gambar apa pun */
.ad-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,12,24,.92) 0%,rgba(6,12,24,.72) 42%,rgba(6,12,24,.12) 78%,transparent 100%)}
.ad-txt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;text-align:left;padding:0 6% 0 6%;max-width:66%}
.ad-txt .ad-title{font-family:var(--font-head);font-weight:700;font-size:1.05rem;margin-bottom:5px;
  letter-spacing:.01em;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.ad-txt .ad-sub{font-size:.8rem;color:#D6E4F5;line-height:1.45;max-width:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 8px rgba(0,0,0,.45)}
.ad-txt .ad-cta{display:inline-block;margin-top:12px;background:#fff;color:#0B1220;
  font-weight:700;font-size:.76rem;padding:8px 18px;border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.35)}
.ad-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:32px;height:32px;
  border-radius:50%;border:none;background:rgba(8,15,30,.55);backdrop-filter:blur(6px);
  color:#fff;font-size:1.05rem;cursor:pointer;opacity:0;transition:.25s}
.ad-carousel:hover .ad-arrow{opacity:1}
#ad-prev{left:10px}#ad-next{right:10px}
/* dot indikator DI LUAR banner (ala Codashop), tidak menutupi gambar */
.ad-dots{position:static;display:flex;gap:6px;justify-content:center;margin:12px auto 0;z-index:5}
.ad-dots span{width:7px;height:7px;border-radius:50%;background:rgba(226,240,255,.30);cursor:pointer;transition:.3s}
.ad-dots span.on{background:var(--accent-2);width:20px;border-radius:4px}
.hero-search{max-width:560px;margin:0 auto 24px;position:relative}
.hs-box{display:flex;align-items:center;background:rgba(30,41,59,.92);border:1px solid var(--border);border-radius:999px;padding:6px 8px 6px 20px;box-shadow:0 12px 30px rgba(2,6,17,.45);transition:.25s}
.hs-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hs-box .hs-ico{color:var(--muted);font-size:1.05rem}
.hs-box input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:1rem;padding:10px 14px;font-family:'Inter',sans-serif}
.hs-box input::placeholder{color:var(--muted)}
.hs-go{background:var(--accent);color:#fff;border:none;border-radius:999px;padding:10px 22px;font-weight:600;cursor:pointer;font-size:.9rem}
.hs-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#16213B;border:1px solid var(--border);border-radius:14px;overflow:hidden;z-index:60;box-shadow:0 18px 44px rgba(2,6,17,.6);display:none}
.hs-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:.15s;text-decoration:none}
.hs-item:hover{background:#1E293B}
.hs-item img{width:34px;height:34px;border-radius:9px;object-fit:cover}
.hs-item .n{color:var(--text);font-size:.88rem;font-weight:500;text-align:left}
.hs-item .c{color:var(--muted);font-size:.72rem;margin-left:auto;flex-shrink:0}
.hs-empty{padding:13px;color:var(--muted);font-size:.85rem;text-align:center}
.tabs-wrap{position:relative;display:flex;align-items:center}
.tabs-wrap .tabs-arrow{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;font-size:1rem;transition:.2s;z-index:2}
.tabs-wrap .tabs-arrow:hover{color:var(--accent);border-color:var(--accent)}
.tabs-wrap .tabs{flex:1;min-width:0}
@media (max-width:640px){
  .polar-widget{grid-template-columns:1fr 1fr 1fr;gap:6px;padding:10px 8px;margin-top:20px}
  .pw-cell{padding:9px 7px;min-width:0;flex-direction:column;align-items:flex-start;gap:7px}
  .pw-img{width:44px;height:44px}
  .pw-sky{font-size:1.5rem}
  .pw-cap{font-size:.58rem;line-height:1.3;display:block}
  .pw-txt b{font-size:.76rem;line-height:1.35;word-break:break-word}
  .ad-slide{aspect-ratio:16/8}
  .ad-txt{padding:0 5%;max-width:70%}
  .ad-txt .ad-title{font-size:.92rem}
  .ad-txt .ad-sub{font-size:.72rem}
  .ad-txt .ad-cta{font-size:.7rem;padding:7px 14px;margin-top:9px}
}
@media (orientation:landscape) and (max-height:540px){
  .hero{padding-top:18px}
  .hero h1{font-size:1.6rem;margin-bottom:8px}
  .hero .sub{margin-bottom:14px;font-size:.85rem}
  .hero-logo{width:52px!important;height:52px!important}
  .ad-slide{aspect-ratio:16/6}
  .polar-widget{max-width:100%}
  .ice-scape{height:30vh}
}

/* ── Form 2 kolom + prefix WA (Daftar) ── */
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.form-2col{grid-template-columns:1fr;gap:0}}
.wa-prefix{display:flex;align-items:center;background:#0B1220;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:.2s}
.wa-prefix:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.wa-prefix .wa-flag{padding:12px 14px;font-size:.92rem;font-weight:600;color:var(--text);border-right:1px solid var(--border);background:#111C33;white-space:nowrap}
.wa-prefix input{outline:none;color:var(--text);font-size:.95rem;font-family:'Inter',sans-serif;padding:12px}

/* ── Logo hidup: jejak telapak kucing berjalan DI DALAM logo ── */
.paw-live{position:relative;display:inline-block;width:46px;height:46px;border-radius:13px;overflow:hidden;flex:none;
  box-shadow:0 0 0 1px var(--border),0 4px 14px rgba(74,144,217,.25);background:#0B1220}
.paw-live .pl-main{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  animation:plMain 7s ease-in-out infinite;will-change:transform,opacity,filter}
/* jejak telapak: muncul berurutan kiri→kanan, memudar berurutan (seperti kucing lewat) */
.pl-prints i{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px 0 0 -6px;
  background:url('../images/cats/pawprint.png') no-repeat center/contain;
  opacity:0;transform:rotate(var(--r)) scale(.35);filter:drop-shadow(0 1px 2px rgba(2,6,17,.6));
  animation:plStep 7s linear infinite;animation-delay:var(--d);will-change:opacity,transform}
@keyframes plStep{
  0%{opacity:0;transform:rotate(var(--r)) scale(.35)}
  2.5%,40%{opacity:.95;transform:rotate(var(--r)) scale(1)}
  47%,100%{opacity:0;transform:rotate(var(--r)) scale(1)}
}
/* paw logo: redup saat jejak lewat, lalu POP bercahaya sebagai jejak terakhir yang dikenang */
@keyframes plMain{
  0%,42%{opacity:.28;transform:scale(.9);filter:saturate(.6) brightness(.85)}
  50%{opacity:1;transform:scale(1.16);filter:saturate(1.15) brightness(1.2) drop-shadow(0 0 12px rgba(125,211,252,.9))}
  56%{transform:scale(.97)}
  61%{transform:scale(1.04)}
  66%,88%{opacity:1;transform:scale(1);filter:saturate(1.05) brightness(1.02) drop-shadow(0 0 6px rgba(125,211,252,.35))}
  94%,100%{opacity:.28;transform:scale(.9);filter:saturate(.6) brightness(.85)}
}
/* kilau aurora menyapu logo tepat saat paw muncul */
.pl-shine{position:absolute;inset:-20%;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(186,230,253,.75) 50%,transparent 62%);
  transform:translateX(-130%);animation:plShine 7s ease-in-out infinite}
@keyframes plShine{
  0%,44%{transform:translateX(-130%)}
  58%,100%{transform:translateX(130%)}
}
/* denyut lembut setelah paw "menetap" */
.paw-live::after{content:'';position:absolute;inset:0;border-radius:13px;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(125,211,252,.0);animation:plRing 7s ease-in-out infinite}
@keyframes plRing{
  0%,48%{box-shadow:inset 0 0 0 1.5px rgba(125,211,252,0)}
  52%{box-shadow:inset 0 0 0 1.5px rgba(125,211,252,.85)}
  70%,100%{box-shadow:inset 0 0 0 1.5px rgba(125,211,252,0)}
}
/* hero setelah promo dihapus: badge langsung di atas */
.hero-badge{margin-top:6px}

/* ══════════════════════════════════════════════════════════════
   TAMBAHAN — Area Member (akun.php, akun-riwayat.php, dst)
   Ditambahkan di akhir file, tidak mengubah gaya yang sudah ada.
   ══════════════════════════════════════════════════════════════ */

/* Menu titik-3: info user + saldo saat sudah login */
.mm-user{padding:12px;margin-bottom:6px;border-radius:12px;background:rgba(74,144,217,.12);border:1px solid var(--border)}
.mm-user b{display:block;font-size:1rem;color:var(--text)}
.mm-user span{display:block;font-size:.82rem;color:var(--accent-2);margin-top:2px}
.mm-sep{height:1px;background:var(--border);margin:10px 4px}

/* Wrapper halaman member */
.member-wrap{max-width:560px;margin:30px auto 60px;padding:0 16px}
.member-title{font-family:var(--font-head);font-size:1.35rem;margin-bottom:16px;text-align:center}
.member-card{border-radius:var(--radius);padding:22px;margin-bottom:16px}
.member-card-title{font-family:var(--font-head);font-size:1rem;margin-bottom:16px;color:var(--accent-2)}
.member-notice{background:rgba(40,167,69,.16);border:1px solid rgba(40,167,69,.4);color:#7CE8A0;font-weight:600;text-align:center}

.member-head{display:flex;align-items:center;gap:16px}
.member-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#0B1220;flex:none}
.member-head h2{font-family:var(--font-head);font-size:1.15rem;margin-bottom:4px}
.member-badge{display:inline-block;font-size:.74rem;padding:3px 10px;border-radius:20px;background:rgba(74,144,217,.22);color:var(--accent-2);font-weight:600}
.member-phone{margin-top:6px;color:var(--muted);font-size:.86rem}

.member-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:var(--muted);font-size:.9rem}
.member-big{font-family:var(--font-mono);font-size:1.6rem;font-weight:700;color:var(--text)}
.member-section-title{font-family:var(--font-head);font-size:1rem;margin:22px 0 12px;color:var(--text)}

.btn-mini{font-size:.78rem;padding:6px 14px;border-radius:20px;background:var(--accent);color:#fff;font-weight:600;text-decoration:none}
.btn-mini:hover{background:var(--accent-2);color:#0B1220}

.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
.stat-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center}
.stat-box b{display:block;font-family:var(--font-mono);font-size:1.3rem;color:var(--accent-2)}
.stat-box span{display:block;font-size:.78rem;color:var(--muted);margin-top:4px}

.member-links{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.member-links a{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--border);color:var(--text);font-weight:600;font-size:.94rem;transition:.2s}
.member-links a:hover{background:rgba(74,144,217,.15);transform:translateX(3px)}
.member-links a.danger{color:#FF8A8A}
.member-links a.danger:hover{background:rgba(220,53,69,.15)}

.member-search{display:flex;gap:8px;margin-bottom:16px}
.member-search input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text)}
.member-search button{padding:12px 18px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-weight:600}

.table-card{overflow-x:auto;padding:8px}
.member-table{width:100%;border-collapse:collapse;min-width:520px}
.member-table th{text-align:left;font-size:.78rem;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--border)}
.member-table td{padding:14px;border-bottom:1px solid rgba(125,211,252,.07);font-size:.88rem}
.member-table .empty{text-align:center;color:var(--muted);padding:30px}

.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.76rem;font-weight:700}
.badge.st-success{background:rgba(40,167,69,.18);color:#4ADE80}
.badge.st-pending{background:rgba(255,193,7,.18);color:#FFC107}
.badge.st-paid,.badge.st-process{background:rgba(74,144,217,.18);color:var(--accent-2)}
.badge.st-failed,.badge.st-expired{background:rgba(220,53,69,.18);color:#FF8A8A}
.badge.st-refunded{background:rgba(140,163,189,.18);color:var(--muted)}

.topup-result{padding:14px;border-radius:12px;margin-bottom:16px;font-size:.88rem;line-height:1.5}
.topup-result.ok{background:rgba(40,167,69,.14);border:1px solid rgba(40,167,69,.4);color:#7CE8A0}
.topup-result.err{background:rgba(220,53,69,.14);border:1px solid rgba(220,53,69,.4);color:#FF8A8A}

.member-select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);font-family:inherit}
.field-note{display:block;margin-top:6px;font-size:.76rem;color:var(--muted)}
.member-form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.btn-ghost{padding:11px 20px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--muted);font-weight:600}
.btn-solid{padding:11px 22px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--accent),#2563EB);color:#fff;font-weight:700}

.back-link{display:inline-block;margin-top:6px;color:var(--muted);font-size:.88rem;text-decoration:none}
.back-link:hover{color:var(--accent-2)}

.reg-error{background:rgba(220,53,69,.14);border:1px solid rgba(220,53,69,.4);color:#FF8A8A;padding:12px 14px;border-radius:12px;font-size:.86rem;margin-bottom:16px}

.field input:disabled{opacity:.6;cursor:not-allowed}

/* reCAPTCHA: batasi lebar supaya rapi di kartu auth sempit & center di HP kecil */
.g-recaptcha{transform-origin:0 0}
@media (max-width:360px){ .g-recaptcha{transform:scale(.9)} }
/* ── Tambahan SiberFrost: alamat usaha di footer (untuk verifikasi iPaymu) ──
   Tempel di bagian PALING BAWAH assets/css/style.css                        */

.foot-addr{
  margin-top: 14px;
  font-style: normal;
  font-size: 13px;
  line-height: 1.75;
  color: #cfe6f7;
  opacity: .92;
  border-left: 3px solid rgba(125, 211, 252, .55);
  padding-left: 12px;
}
.foot-addr strong{ color: #eaf6ff; }
.foot-addr a{
  display: inline;
  padding: 0;
  color: #7DD3FC;
  text-decoration: none;
}
.foot-addr a:hover{ text-decoration: underline; }

footer .copyright{
  line-height: 1.7;
  font-size: 12.5px;
}

@media (max-width: 640px){
  .foot-addr{ font-size: 12.5px; }
}


/* ── Kasus 8: tombol ganti bahasa ID / EN ─────────────────── */
header.topbar .hamburger{margin-left:10px}
.lang-switch{
  margin-left:auto;display:inline-flex;align-items:center;gap:2px;flex:none;
  padding:3px;border:1px solid var(--border);border-radius:999px;
  background:rgba(30,41,59,.55);
}
.lang-switch button{
  border:none;background:none;cursor:pointer;
  padding:5px 11px;border-radius:999px;
  font-family:inherit;font-weight:700;font-size:.76rem;letter-spacing:.04em;
  color:var(--muted);transition:.22s;
}
.lang-switch button:hover{color:#fff}
.lang-switch button.on{
  background:linear-gradient(135deg,var(--accent),#2563EB);
  color:#fff;box-shadow:var(--glow);
}
@media (max-width:400px){
  .lang-switch button{padding:5px 8px;font-size:.7rem}
  header.topbar{padding:12px 14px;gap:8px}
}


/* ── Kasus 8: footer gaya GTID / Barongsay ────────────────── */
.foot-addr{
  display:block !important;text-align:left !important;font-style:normal;
  margin:16px 0 0 !important;padding:0 !important;border:none !important;
  color:var(--muted);line-height:1.8;font-size:.88rem;
}
.foot-addr .fa-name{
  display:block;
  font-family:var(--font-head);font-weight:600;
  font-size:1.1rem;letter-spacing:.02em;
  color:#E2E8F0;margin-bottom:8px;
}
.foot-addr .fa-line{display:block}
.foot-addr a{color:var(--accent-2);text-decoration:none}
.foot-addr a:hover{text-decoration:underline}

footer .foot-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:30px 24px !important;
  text-align:left !important;
}
footer .foot-grid > div,
footer .foot-brand{text-align:left !important;min-width:0}
footer .foot-brand{grid-column:1 / -1 !important}
footer .foot-brand p{text-align:left !important}
footer .foot-grid h4{
  text-align:left !important;margin-bottom:14px;
  letter-spacing:.02em;text-transform:uppercase;
  font-size:.92rem;
}
footer .foot-grid a{
  display:block;text-align:left !important;padding:7px 0;
  overflow-wrap:anywhere;
}
footer .foot-grid a:hover{padding-left:0 !important;color:#fff}

@media (min-width:900px){
  footer .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr !important;gap:34px !important}
  footer .foot-brand{grid-column:auto !important}
}


/* ══════════════════════════════════════════════════════════════
   REDESAIN UI — gaya gabungan Codashop + UniPin
   1) Loading screen "Memuat..." (logo sendiri, versi bersih)
   2) Search bar tersembunyi di header (ikon → klik → terbuka)
   3) Hamburger dipindah ke KIRI + menu dikelompokkan, ikon di kiri teks
   ══════════════════════════════════════════════════════════════ */

/* ── 1) Loading screen ───────────────────────────────────────── */
html,body{ max-width:100%; overflow-x:hidden; }
#sf-preloader{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:linear-gradient(180deg,#0B1426 0%,#0F172A 60%,#0A1020 100%);
  transition:opacity .5s ease;
}
#sf-preloader.sfp-hide{opacity:0;pointer-events:none}
.sfp-logo{width:64px;height:64px;border-radius:18px;overflow:hidden;
  box-shadow:var(--glow);animation:sfpPulse 1.6s ease-in-out infinite}
.sfp-logo img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes sfpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.sfp-bar{width:190px;height:4px;border-radius:99px;background:rgba(230,238,247,.14);overflow:hidden}
.sfp-bar-fill{height:100%;width:36%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  animation:sfpBar 1.1s ease-in-out infinite}
@keyframes sfpBar{
  0%{transform:translateX(-100%)}
  50%{transform:translateX(60%)}
  100%{transform:translateX(220%)}
}
.sfp-text{font-family:var(--font-body);font-size:.86rem;color:var(--muted);letter-spacing:.02em}
@media (prefers-reduced-motion: reduce){.sfp-logo,.sfp-bar-fill{animation:none}}

/* ── 2) & 3) Header: hamburger kiri, search icon tersembunyi, menu grup ── */
header.topbar{ position:sticky; } /* jangkar posisi utk panel search absolute di bawahnya */
header.topbar .hamburger{
  margin-left:0; order:0;
}
header.topbar .brand{ order:1; }
.topbar-right{
  order:2; margin-left:auto; display:flex; align-items:center; gap:10px;
}
.topbar-right .lang-switch{ margin-left:0; } /* override lama: dulu auto, sekarang cukup di dalam grup kanan */

.header-search-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border-radius:50%;
  background:transparent !important; border:none !important;
  color:var(--accent-2) !important; -webkit-appearance:none; appearance:none;
  transition:.2s;
}
.header-search-btn svg{ width:21px; height:21px; display:block; fill:none !important; stroke:currentColor !important; }
.header-search-btn:hover,.header-search-btn[aria-expanded="true"]{
  color:#fff !important; background:rgba(74,144,217,.20) !important;
}

.header-search-panel{
  position:absolute; top:100%; left:0; right:0; z-index:55;
  padding:14px 20px 18px; background:rgba(15,23,42,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transform:translateY(-10px); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .25s ease, opacity .25s ease, visibility .25s;
}
.header-search-panel.open{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
.header-search-panel .hs-box{ max-width:640px; margin:0 auto; }
.header-search-panel .hs-results{ max-width:640px; margin:8px auto 0; position:static; }
.hs-box .hs-ico{ display:flex; align-items:center; color:var(--muted); }
.hs-box .hs-ico svg{ width:18px; height:18px; display:block; fill:none; stroke:currentColor; }

/* Hapus tampilan pencarian lama yang selalu terbuka di hero (kalau markup lama masih tertinggal di halaman lain) */
.hero .hero-search{ display:none !important; }

/* ── Menu drawer: RAMPING & simpel (gabungan Codashop + UniPin) ── */
.mobile-menu{
  width:min(272px,76vw) !important;
  padding:14px 14px 20px !important;
  gap:1px !important;
}
.mm-head{ margin-bottom:10px !important; padding:0 4px; }
.mm-head img{ width:34px !important; height:34px !important; border-radius:10px !important; }
.mm-head .close-x{ font-size:1.35rem !important; }
.mobile-menu a{
  justify-content:flex-start !important;
  gap:13px !important;
  padding:11px 10px !important;
  font-size:.92rem !important;
  border-bottom:none !important;
  border-radius:10px !important;
  text-align:left !important;
}
.mobile-menu a svg{ width:18px !important; height:18px !important; flex:none; }
.mobile-menu a span{ flex:1; text-align:left !important; }
.mm-sep{ margin:8px 6px !important; }
.mm-active{
  background:linear-gradient(135deg,var(--accent),#2E6FB7) !important;
  color:#fff !important; font-weight:600;
}
.mm-active svg{ color:#fff !important; }

@media (max-width:400px){
  .header-search-btn{ width:36px; height:36px; }
}

/* ── Seksi BARU / POPULER (gaya Codashop) + tombol Load Less (gaya UniPin) ── */
#pilihan{max-width:1220px;margin:0 auto;padding:0 16px}
.rowsec{margin-bottom:34px}
.rowsec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.rowsec-title{
  font-family:var(--font-head);font-weight:800;
  font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase;
  color:#fff;margin:0;
}
.rowsec-more{font-size:.82rem;color:var(--accent-2);text-decoration:none;white-space:nowrap;font-weight:600}
.rowsec-more:hover{color:#fff;text-decoration:underline}

/* Tombol muat: sejajar, gaya UniPin (garis tepi, membulat) */
.load-actions{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:22px}
.load-actions .load-more,.load-actions .load-less{margin:0}
.load-less{
  background:transparent;border:1px solid var(--border);color:var(--muted);
  padding:12px 26px;border-radius:999px;font-weight:600;font-size:.88rem;
  font-family:inherit;cursor:pointer;transition:.22s;
}
.load-less:hover{color:#fff;border-color:var(--accent);background:rgba(74,144,217,.14)}

@media (max-width:640px){
  .rowsec-title{font-size:1.08rem}
  .rowsec{margin-bottom:26px}
  .load-actions{gap:8px}
  .load-less{padding:11px 20px;font-size:.82rem}
}

/* ══════════════════════════════════════════════════════════════
   BLOK BAWAH: Promo & Berita, Keunggulan, Dukungan, Berlangganan
   Gabungan 50% Codashop + 50% UniPin
   ══════════════════════════════════════════════════════════════ */

/* ── Promo & Berita (Codashop "News and Updates" + UniPin "Promo & Events") ── */
#berita{max-width:1220px;margin:0 auto 46px;padding:0 16px}
#berita .sec-sub{margin:-6px 0 18px}
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.news-card{
  display:block;text-decoration:none;overflow:hidden;border-radius:16px;
  background:linear-gradient(160deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--border);transition:transform .3s,border-color .3s,box-shadow .3s;
}
.news-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:var(--glow)}
.news-thumb{aspect-ratio:16/9;overflow:hidden;background:#0E1A30}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.news-card:hover .news-thumb img{transform:scale(1.06)}
.news-thumb.no-img{background:linear-gradient(135deg,#12325B,#0B1220)}
.news-body{padding:14px 16px 16px}
.news-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.news-tag{
  font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:6px;background:rgba(74,144,217,.20);color:var(--accent-2);
}
.news-date{font-size:.7rem;color:var(--muted)}
.news-title{
  font-family:var(--font-head);font-weight:700;font-size:.95rem;line-height:1.4;
  color:var(--text);margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.news-more{font-size:.78rem;color:var(--accent-2);font-weight:600}

/* ── Blok "SiberFrost Indonesia" + Keunggulan (gaya Codashop) ── */
.about-sec{max-width:1220px;margin:0 auto;padding:44px 16px 10px}
.about-title{
  font-family:var(--font-head);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.5rem,4.4vw,2.3rem);line-height:1.15;color:#fff;margin:0 0 16px;
}
.about-title.sm{font-size:clamp(1.25rem,3.6vw,1.8rem);margin-top:44px}
.about-lead{color:var(--muted);font-size:.94rem;line-height:1.75;margin:0 0 16px;max-width:900px}
.feat-list{margin-top:30px;display:grid;gap:24px}
.feat-item{display:flex;gap:18px;align-items:flex-start}
.feat-ico{
  flex:none;width:58px;height:58px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.feat-ico svg{width:28px;height:28px;color:var(--accent)}
.feat-txt h3{font-family:var(--font-head);font-weight:700;font-size:1.03rem;color:var(--text);margin:6px 0 7px}
.feat-txt p{color:var(--muted);font-size:.88rem;line-height:1.7;margin:0}

/* ── Dukungan Pelanggan: kotak-kotak (gaya UniPin) ── */
.support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:20px}
.support-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  padding:24px 14px;border-radius:14px;text-decoration:none;
  border:1px solid var(--border);background:rgba(74,144,217,.07);
  color:var(--text);font-size:.88rem;font-weight:600;transition:.25s;
}
.support-box svg{width:30px;height:30px;color:var(--accent-2)}
.support-box:hover{border-color:var(--accent);background:rgba(74,144,217,.16);transform:translateY(-3px)}
.support-box:hover svg{color:#fff}

/* ── Panel Berlangganan + medsos (gaya UniPin) ── */
.subs-panel{
  margin-top:40px;padding:28px 24px;border-radius:18px;text-align:center;
  border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(74,144,217,.12),rgba(11,18,32,.5));
}
.subs-panel h3{font-family:var(--font-head);font-weight:800;font-size:1.15rem;color:#fff;margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em}
.subs-panel p{color:var(--muted);font-size:.87rem;margin:0 0 20px}
.subs-social{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.subs-social a{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(226,240,255,.10);color:var(--text);transition:.25s;
}
.subs-social svg{width:23px;height:23px}
.subs-social a:hover{background:var(--accent);color:#fff;transform:translateY(-3px)}

/* ── Baris pengaduan konsumen di footer (gaya UniPin) ── */
.foot-consumer{
  max-width:900px;margin:26px auto 0;padding:20px 16px 0;text-align:center;
  border-top:1px solid var(--border);
  color:var(--muted);font-size:.78rem;line-height:1.8;
}
.foot-consumer a{color:var(--accent-2);text-decoration:none}
.foot-consumer a:hover{text-decoration:underline}

@media (max-width:640px){
  .about-sec{padding:34px 16px 6px}
  .about-lead{font-size:.87rem;line-height:1.7}
  .feat-list{gap:20px;margin-top:24px}
  .feat-item{gap:14px}
  .feat-ico{width:48px;height:48px}
  .feat-ico svg{width:23px;height:23px}
  .feat-txt h3{font-size:.94rem}
  .feat-txt p{font-size:.82rem}
  .support-grid{grid-template-columns:1fr 1fr;gap:11px}
  .support-box{padding:18px 10px;font-size:.8rem}
  .subs-panel{padding:22px 16px}
  #berita{margin-bottom:34px}
  .news-title{font-size:.88rem}
}

/* ── Deskripsi singkat di kartu berita beranda ── */
.news-desc{
  color:var(--muted);font-size:.82rem;line-height:1.6;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.news-card .news-title{-webkit-line-clamp:2;margin-bottom:8px}

/* ── Halaman artikel: tipografi baca yang nyaman, bukan blok datar ── */
.article-body{max-width:760px;margin:0 auto;padding:26px 4px 10px}
.article-body p{font-size:.96rem;line-height:1.85;color:#C8D6E8;margin:0 0 18px}
.article-body h2{
  font-family:var(--font-head);font-weight:700;font-size:1.18rem;color:#fff;
  margin:32px 0 12px;padding-left:14px;border-left:4px solid var(--accent);line-height:1.4;
}
.article-body b{color:#fff;font-weight:600}
.article-body .hl{
  background:rgba(74,144,217,.12);border:1px solid var(--border);border-left:4px solid var(--accent-2);
  border-radius:10px;padding:15px 17px;margin:24px 0;font-size:.9rem;line-height:1.7;color:#DCE9F8;
}
.ameta{
  display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.76rem;color:var(--muted);
  padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--border);
}
.article-src{
  max-width:760px;margin:12px auto 0;font-size:.7rem;color:var(--muted);
  font-style:italic;line-height:1.6;text-align:center;opacity:.8;
}
.back-link{
  display:inline-block;margin-bottom:18px;color:var(--accent-2);
  text-decoration:none;font-size:.88rem;font-weight:600;
}
.back-link:hover{color:#fff}

@media (max-width:640px){
  .article-body{padding:20px 2px 6px}
  .article-body p{font-size:.9rem;line-height:1.8}
  .article-body h2{font-size:1.04rem;margin:26px 0 10px}
}

/* ══════════════════════════════════════════════════════════════
   SAMPUL ARTIKEL SVG • SLIDE CERITA • IKON MEREK ASLI
   ══════════════════════════════════════════════════════════════ */

/* ── Sampul artikel: SVG mengisi penuh wadahnya ── */
.cover-svg{width:100%;height:100%;display:block;object-fit:cover}
.news-thumb .cover-svg,.blog-thumb .cover-svg{aspect-ratio:16/9}
.blog-thumb{aspect-ratio:16/9;overflow:hidden;border-radius:14px 14px 0 0;position:relative}
.article-hero{position:relative;border-radius:16px;overflow:hidden;max-width:940px;margin:0 auto}
.article-hero .cover-svg{aspect-ratio:940/400}
/* judul ganda tidak perlu: sampul SVG sudah memuat judulnya sendiri */
.article-hero .ah-text,.article-hero .ah-grad{display:none}

/* ── Slide "cerita" di carousel: ikon garis, bukan logo game ── */
.ad-ikon{
  position:absolute;right:5%;top:50%;transform:translateY(-50%);
  width:33%;max-width:150px;aspect-ratio:1/1;z-index:1;opacity:.85;
}
.ad-ikon svg{width:100%;height:100%;display:block}
.ad-slide-art .ad-title{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:8px;
}
.ad-slide-art .ad-sub{
  font-size:1rem;font-weight:700;color:#fff;font-family:var(--font-head);
  line-height:1.35;-webkit-line-clamp:3;
}

/* ── Ikon merek asli: JANGAN diwarnai ulang, biarkan warna aslinya ── */
.sb-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px}
.sb-ico svg{width:100%;height:100%;display:block}
.support-box .sb-ico.brand svg{border-radius:8px}
.support-box .sb-ico:not(.brand) svg{color:var(--accent-2)}
.support-box:hover .sb-ico:not(.brand) svg{color:#fff}
/* aturan lama mewarnai semua svg — dikecualikan untuk ikon merek */
.support-box .sb-ico.brand svg *{fill:revert}
.subs-social a.brand{background:transparent;padding:0}
.subs-social a.brand svg{width:44px;height:44px;border-radius:12px}
.subs-social a.brand:hover{background:transparent;transform:translateY(-3px) scale(1.06)}

/* ── Kotak ulasan gaya UniPin: kartu bertepi, bintang emas, rata kiri ── */
.review-card,.ulasan-card{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:18px 18px 16px;text-align:left;transition:.25s;
}
.review-card:hover,.ulasan-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.review-head,.ulasan-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.review-ava,.ulasan-ava{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--accent),#2E6FB7);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;font-size:.95rem;
}
.review-name,.ulasan-name{font-weight:600;font-size:.9rem;color:var(--text)}
.review-date,.ulasan-date{font-size:.72rem;color:var(--muted)}
.review-stars,.ulasan-stars{color:#F5C542;font-size:.9rem;letter-spacing:1px;margin-bottom:8px}
.review-text,.ulasan-text{color:var(--muted);font-size:.86rem;line-height:1.7}
.review-prod,.ulasan-prod{
  display:inline-block;margin-top:10px;font-size:.7rem;font-weight:600;
  padding:4px 10px;border-radius:6px;
  background:rgba(74,144,217,.16);color:var(--accent-2);
}

@media (max-width:640px){
  .ad-ikon{width:30%;max-width:104px;right:4%}
  .ad-slide-art .ad-sub{font-size:.88rem}
  .sb-ico{width:30px;height:30px}
  .subs-social a.brand svg{width:40px;height:40px}
}

/* Antarctic live background — matikan latar lama */
body::before{display:none !important}
#ant-bg{z-index:-1 !important}
#ant-bg .lyr{z-index:1}
#ant-bg .veil{z-index:2}


/* ── Angka suhu digital di atas foto termometer LCD ── */
.pw-thermo-wrap{position:relative;flex:none;width:46px;height:46px}
.pw-thermo-wrap .pw-img{width:100%;height:100%;display:block}
.pw-lcd{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62%;text-align:center;pointer-events:none;white-space:nowrap;
  font-family:var(--font-mono);font-weight:700;font-size:9.5px;line-height:1;letter-spacing:-.2px;
  color:#ff4b4b;text-shadow:0 0 3px rgba(255,60,60,.85),0 0 1px rgba(0,0,0,.85);
}
@media (max-width:640px){
  .pw-thermo-wrap{width:44px;height:44px}
  .pw-lcd{font-size:9px;top:50%;left:50%}
}