/* Taruh setelah base html,body{ background:var(--bg) } */
html,body{
  background:
    radial-gradient(800px 400px at 10% -10%, rgba(224,22,60,.12), transparent 60%),
    radial-gradient(700px 380px at 90% 0%, rgba(224,22,60,.10), transparent 65%),
    #0a0607;
}
/* Taruh setelah base html,body{ background:var(--bg) } */
html,body{
  background:
    radial-gradient(800px 400px at 10% -10%, rgba(224,22,60,.12), transparent 60%),
    radial-gradient(700px 380px at 90% 0%, rgba(224,22,60,.10), transparent 65%),
    #0a0607;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif}
a{color:var(--fg);text-underline-offset:3px}
a:hover{color:#fff}
img{max-width:100%;height:auto;display:block}
.container{max-width:1120px;margin:auto;padding-inline:16px}
.footer{padding:32px 0;color:var(--muted)}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,12,12,.8);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--stroke)}
.navbar{display:flex;align-items:center;gap:12px;min-height:58px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand .logo{height:32px;width:auto}
.brand-name{font-weight:800;letter-spacing:.3px}

/* Search bar */
.search{display:flex;align-items:center;gap:8px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:999px;padding:6px 10px;margin-left:auto;margin-right:auto;flex:1;max-width:680px}
.search input{all:unset;color:#ddd;flex:1;min-width:120px}
.search .icon{all:unset;cursor:pointer}

/* Desktop action buttons */
.desktop-nav{display:none;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.05rem;min-height:48px;border-radius:.9rem;border:1px solid #333;background:#2a2a2a;color:#fff;text-decoration:none;line-height:1.1;transition:transform .15s ease,filter .15s ease,background .15s ease}
.btn:visited{color:#fff}
.btn:hover{filter:brightness(1.05)}
.btn:focus-visible{outline:3px solid rgba(255,255,255,.35);outline-offset:2px}
.btn.ghost{background:#1a1a1a}
.btn.cta{background:var(--cta);border-color:var(--cta-border);color:#fff;text-transform:uppercase;font-weight:800;letter-spacing:.4px}
.btn.cta:hover{background:var(--cta-hover)}

/* Hamburger */
.nav-toggle{all:unset;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--stroke);background:#141414;cursor:pointer}
.nav-toggle-bar,.nav-toggle-bar::before,.nav-toggle-bar::after{content:"";display:block;width:18px;height:2px;background:#fff;position:relative;border-radius:2px}
.nav-toggle-bar::before{position:absolute;top:-6px}.nav-toggle-bar::after{position:absolute;top:6px}

/* Drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(84vw,340px);transform:translateX(100%);transition:transform .2s ease;background:#0f0f10;border-left:1px solid var(--stroke);z-index:70;display:flex;flex-direction:column;gap:12px;padding:16px}
.drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.drawer-close{all:unset;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--stroke);border-radius:10px;background:#141414;cursor:pointer}
.drawer-nav{display:flex;flex-direction:column;gap:8px;overflow:auto;padding-right:2px}
.drawer-nav a{display:block;padding:.9rem 1rem;border-radius:.7rem;text-decoration:none;color:var(--fg)}
.drawer-nav a:hover{background:#181818}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(1px);z-index:60;display:none}
html.drawer-open .drawer{transform:translateX(0)}
html.drawer-open .menu-overlay{display:block}
html.drawer-open,html.drawer-open body{overflow:hidden}

/* Hero */
.hero{display:grid;gap:24px;align-items:center;margin-block:28px}
.hero-media{max-width:520px;justify-self:center}
.hero-copy h1{margin:0 0 8px;font-size:clamp(28px,4vw,40px);line-height:1.2}
.lead{color:var(--muted);max-width:62ch}

/* Sections */
.section{padding-block:42px;border-top:1px solid var(--stroke)}
.section:first-of-type{border-top:0}
.section h2{font-size:clamp(22px,3.2vw,28px);margin:0 0 12px}
.section .sub{color:var(--muted);margin:0 0 18px}

.grid{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr}}

.badges{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.badge{padding:.35rem .6rem;border:1px solid var(--stroke);border-radius:999px;background:#141414;color:#d6d6d6;font-size:.9rem}

.promo{display:grid;gap:10px;border:1px solid var(--stroke);border-radius:12px;background:#121212;padding:14px}
.promo h3{margin:0 0 6px}

.cards{display:grid;gap:14px}
.card{border:1px solid var(--stroke);border-radius:12px;background:#121212;padding:14px}
.card .meta{color:var(--muted);font-size:.95rem}

.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:12px;border:1px solid var(--stroke)}
.table th,.table td{padding:10px;border-bottom:1px solid #242424;text-align:left}

.cta-block{display:grid;gap:12px;text-align:center;border:1px solid var(--stroke);border-radius:16px;padding:24px;background:linear-gradient(180deg,#151515,#101010)}

/* Tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(10,10,10,.92);backdrop-filter:blur(8px);border-top:1px solid #1f1f1f;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px env(safe-area-inset-right) calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left)}
.tab{display:flex;flex-direction:column;align-items:center;gap:6px;color:#d6d6d6;text-decoration:none;padding:8px 6px;border-radius:12px;min-height:48px}
.tab[aria-current="page"],.tab:hover{background:#181818;color:#fff}
.tab span{font-size:.9rem}

/* FAQ spacing & targets */
#faq details{margin-block:14px}
#faq details > summary{list-style:none;cursor:pointer;padding:16px 18px;min-height:52px;display:flex;align-items:center;gap:10px;font-weight:600}
#faq details > summary::-webkit-details-marker{display:none}

/* Desktop */
@media (min-width:901px){.desktop-nav{display:flex}.nav-toggle{display:none}.search{max-width:520px}}

/* Sembunyikan teks aksesibel secara benar */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* Tombol hamburger */
.nav-toggle{
  all:unset;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;border:1px solid var(--stroke);
  background:#141414;cursor:pointer;touch-action:manipulation
}
.nav-toggle-bar,.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:"";display:block;width:18px;height:2px;background:#fff;position:relative;border-radius:2px
}
.nav-toggle-bar::before{position:absolute;top:-6px}
.nav-toggle-bar::after{position:absolute;top:6px}

/* Overlay: hanya muncul saat open */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(1px);z-index:60;display:block}
.menu-overlay[hidden]{display:none}

/* Drawer di atas header */
.drawer{z-index:70}
.site-header{z-index:50}

/* ===== THEME: Red Elegant ===== */
:root{
  --bg:#0a0607;               /* dasar gelap bernuansa merah */
  --card:#12090b;
  --stroke:#2a0f12;
  --accent:#e0163c;           /* aksen merah elegan */
  /* CTA tetap high-contrast */
  --cta:#b00020;              /* kontras AA */
  --cta-hover:#99001b;
  --cta-border:#7f0a1f;
  --cta-focus:#ffd6df;
}

/* latar sedikit “bernapas” merah (ringan, non-blocking) */
html,body{
  background:
    radial-gradient(800px 400px at 10% -10%, rgba(224,22,60,.12), transparent 60%),
    radial-gradient(700px 380px at 90% 0%, rgba(224,22,60,.10), transparent 65%),
    #0a0607;
}

/* kartu/section halus merah */
.feature,.promo,.quote,.table th,.cta-block, details{
  background: linear-gradient(180deg,#14080a,#0f0708);
  border-color: #2a0f12;
}

/* header ada aura lembut merah */
.site-header{
  box-shadow: 0 0 0 1px #2a0f12 inset, 0 0 24px rgba(224,22,60,.12);
}

/* ===== Shine animation (kilau halus) ===== */
@keyframes shine {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* CTA dengan kilau */
.btn.cta{
  position: relative; overflow: hidden;
  background: var(--cta); border-color: var(--cta-border); color:#fff;
  text-transform: uppercase; font-weight:800; letter-spacing:.4px;
}
.btn.cta:hover{ background: var(--cta-hover); transform: translateY(-1px); }
.btn.cta::after{
  content:""; position:absolute; inset:-160% -40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  animation: shine 2.3s ease-in-out infinite; pointer-events:none;
}

/* badge aksen merah */
.badge{ border-color:#2a0f12; background:#16090c; color:#ffd9e1 }

/* ===== FAQ jarak nyaman (mobile-first) ===== */
#faq details{ margin-block: 14px; }
#faq details:first-of-type{ margin-top: 0 }
#faq details:last-of-type{  margin-bottom: 0 }
details > summary{
  padding:16px 18px; min-height:52px; display:flex; align-items:center; gap:10px;
  font-weight:700;
}
details > summary:hover{ background:#1a0b0e }
details > summary::after{ content:"▾"; margin-left:auto; opacity:.7 }
details[open] > summary{ border-bottom:1px solid #221015 }
details[open] > summary::after{ content:"▴" }