/* Minimal, clean, mobile-first */
:root{
  --bg:#0b0b0b; --ink:#f1f5f9; --muted:#9aa4b2; --card:#151515;
  --gold:#e8c151; --gold-2:#caa65b; --accent:#1DB954;
}
*{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin-inline:auto;padding:16px}

/* Buttons */
.btn{display:inline-block;padding:12px 16px;border-radius:14px;background:var(--gold);color:#111;font-weight:800;text-decoration:none}
.btn:hover{filter:brightness(1.03)}
.btn-outline{background:transparent;color:var(--gold);border:1px solid var(--gold-2)}
.btn-wa{background:var(--accent);color:#fff}

/* Header & Nav */
header.site-header{position:sticky;top:0;z-index:20;background:rgba(12,12,12,.7);backdrop-filter:blur(8px);border-bottom:1px solid #1f1f1f}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--muted);font-weight:700}
.nav a:hover,.nav a.active{color:var(--gold)}
.menu-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#191919;border:1px solid #262626;color:var(--muted)}
.mobile-nav{display:none;gap:8px;padding:10px 16px;border-top:1px solid #1f1f1f;background:#0f0f0f}
.mobile-nav.show{display:grid}
.hide-on-mobile{display:none}
@media(min-width:860px){.hide-on-mobile{display:flex}.hide-on-desktop{display:none}}

/* Hero */
.hero{padding:24px 0;border-bottom:1px solid #1f1f1f;background:linear-gradient(180deg,#0b0b0b 0%, #0d0d0d 100%)}
.hero .grid{display:grid;gap:16px}
.hero-card .kicker{font-weight:700;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;font-size:.8rem}
.hero h1{font-size:2.2rem;margin:.3rem 0 0}
.hero .lead{color:#e5e7eb}
.hero-media{margin-top:8px}
@media(min-width:860px){.hero .grid{grid-template-columns:1.2fr .8fr}}

/* Sections & cards */
.section{padding:22px 0}
h2{margin:0 0 10px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{background:var(--card);border:1px solid #222;border-radius:16px;padding:14px}
.card h3{margin:6px 0 4px;font-size:1.1rem}
.card p{margin:0;color:#cfd4da}
.price{font-size:1.25rem;font-weight:800;color:var(--gold)}

/* Gallery */
.gallery{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.gallery img{border-radius:10px;border:1px solid #242424}

/* Footer & sticky CTA */
footer.site-footer{border-top:1px solid #1f1f1f;margin-top:24px}
footer .cols{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
small,.muted{color:#9aa4b2}
.sticky-cta{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);display:grid;place-items:center;padding:8px 12px;background:#111;border:1px solid #222;border-radius:16px;z-index:50}
.sticky-cta a{padding:10px 12px;border-radius:12px;font-weight:700}

/* Utilities */
.flex{display:flex;gap:10px;align-items:center}
.grid{display:grid;gap:10px}

/* === Social icons (brand colors) === */
.socials{display:flex;gap:12px;align-items:center}
.social{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:999px;
  background:#111;border:1px solid #222;
  transition:transform .12s ease, filter .12s ease;
}
.social:hover{transform:translateY(-1px);filter:brightness(1.08)}
.social:focus-visible{outline:2px solid #fff3;outline-offset:2px}
.social--ig{background:#0f0f0f}   /* SVG gradien berada di ikon */
.social--fb{background:#0f1422}
.social--tk{background:#000}

/* === Reviews slider === */
#reviews .reviews{position:relative;display:flex;align-items:center;gap:8px}
.reviews-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);
  gap:12px;overflow-x:auto;padding:2px;scroll-snap-type:x mandatory;
}
.review-card{
  scroll-snap-align:start;background:var(--card);border:1px solid #222;border-radius:16px;padding:14px;
}
.review-stars{font-size:18px;letter-spacing:2px;margin-bottom:6px}
.review-stars .star{color:#555}
.review-stars .star.filled{color:#f59e0b}
.review-text{color:#e5e7eb;margin:0 0 8px}
.review-meta{display:flex;gap:8px;align-items:center;color:#9aa4b2}
.review-meta .review-src{color:#9aa4b2;text-decoration:underline}
.reviews-nav{
  appearance:none;border:1px solid #222;background:#111;color:#e5e7eb;
  width:36px;height:36px;border-radius:10px;font-size:20px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
}
.reviews-nav:hover{filter:brightness(1.08)}