/* ============================================================
   Ndalem kopikopi.id — Shared Styles
   ============================================================ */

:root {
  --gold:   #c8973a;
  --amber:  #e8a530;
  --dark:   #110900;
  --mocha:  #1e0f00;
  --card:   #1c1000;
  --text:   #f0e6d3;
  --muted:  #a8957e;
  --green:  #5aab6e;
  --blue:   #7ab8e8;
  --border: rgba(200,151,58,.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--dark);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  /* space for bottom nav */
  padding-bottom: 72px;
}

/* ── BOTTOM NAV ─────────────────────────────────── */
.bnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(17, 9, 0, .97);
  border-top: 1px solid var(--border);
  display: flex;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px 12px;
  text-decoration: none;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  transition: color .2s;
}

.bnav a .nav-icon { font-size: 22px; line-height: 1; }

.bnav a.active,
.bnav a:active { color: var(--amber); }

.bnav a.bnav-wa {
  color: #25d366;
}

/* ── LAYOUT HELPERS ─────────────────────────────── */
.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
}
.divider::before { background: linear-gradient(to right, transparent, var(--gold)); }
.divider::after  { background: linear-gradient(to left,  transparent, var(--gold)); }
.divider-icon { font-size: 18px; }

.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 6vw, 34px);
  color: #fff;
  line-height: 1.2;
  margin-bottom: 10px;
}

.section-body {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 24px;
}

/* ── CARD BASE ──────────────────────────────────── */
.card {
  background: linear-gradient(150deg, #231200, var(--card));
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

/* ── PAGE HEADER (non-home) ─────────────────────── */
.page-header {
  padding: 44px 20px 28px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200,151,58,.15) 0%, transparent 65%),
    var(--dark);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.page-header .page-icon { font-size: 46px; margin-bottom: 10px; }

.page-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 7vw, 38px);
  color: #fff;
  margin-bottom: 6px;
}

.page-header p {
  color: var(--muted);
  font-size: 15px;
  max-width: 360px;
  margin: 0 auto;
}

/* ── SPACERS ────────────────────────────────────── */
.mt-12  { margin-top: 12px; }
.mt-20  { margin-top: 20px; }
.mt-28  { margin-top: 28px; }
.mt-40  { margin-top: 40px; }
.mt-52  { margin-top: 52px; }

/* ── ACCESSIBILITY ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-cup, .scroll-hint { animation: none; }
  * { transition: none !important; }
}

/* ── FOOTER ─────────────────────────────────────── */
footer {
  text-align: center;
  padding: 24px 20px 32px;
  border-top: 1px solid var(--border);
  margin-top: 52px;
}
footer p     { font-family: 'Playfair Display', serif; font-size: 15px; color: var(--gold); }
footer small { color: var(--muted); font-size: 12px; }

/* ── PAKET STYLES (shared) ──────────────────────── */
.paket-list {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.paket-card { background: linear-gradient(150deg, #231200, var(--card)); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.paket-head { padding: 13px 18px; display: flex; align-items: center; gap: 11px; background: rgba(200,151,58,.055); border-bottom: 1px solid rgba(200,151,58,.1); }
.paket-ico  { font-size: 22px; }
.paket-name { font-family: 'Playfair Display', serif; font-size: 17px; color: #fff; flex: 1; }
.paket-body { padding: 13px 18px; display: flex; flex-direction: column; gap: 9px; }
.paket-row  { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.paket-row-label { color: var(--muted); flex: 1; }

.p-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.p-badge.gratis { background: rgba(90,171,110,.18); color: var(--green); border: 1px solid rgba(90,171,110,.35); }
.p-badge.nego   { background: rgba(232,165,48,.14); color: var(--amber); border: 1px solid rgba(232,165,48,.35); }

.val          { font-weight: 700; white-space: nowrap; }
.val.gratis   { color: var(--green); }
.val.sukarela { color: var(--blue); }
.val.bayar    { color: var(--amber); }
.val.nego     { color: #ffaa44; }

/* ── WA BUTTON ──────────────────────────────────── */
.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #25d366, #0e7a41);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  padding: 15px 32px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(37,211,102,.28);
}