:root{
  --brand-primary:#0F5132;
  --brand-accent:#B8860B;
  --ink:#171A19;
  --muted:#6B7280;
  --surface:#F7F7F8;
  --line:#ECECEE;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Inter',sans-serif;
  background:#FFFFFF;
  color:var(--ink);
  padding-bottom:96px; /* ruang untuk navbar island di bawah */
}
.font-display{font-family:'Fraunces',serif;}
.font-arabic{font-family:'Amiri',serif;}
.brand-bg{background:var(--brand-primary);}
.brand-text{color:var(--brand-primary);}
.accent-bg{background:var(--brand-accent);}
.accent-text{color:var(--brand-accent);}
.surface{background:var(--surface);}
.hide-scrollbar::-webkit-scrollbar{display:none;}
.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}
input,textarea,select{outline:none;}
.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* ---------- Top bar (statis, tidak melayang) ---------- */
.top-bar{border-bottom:1px solid var(--line);}

/* ---------- Bottom island navbar ---------- */
.bottom-nav-wrap{position:fixed;left:0;right:0;bottom:16px;z-index:50;padding:0 16px;}
.glass{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(0,0,0,.05);
}
.nav-item{color:#9CA3AF;transition:color .15s ease;}
.nav-item-active{color:var(--brand-primary);}
.nav-icon-wrap{display:flex;align-items:center;justify-content:center;height:22px;}

/* ---------- Cards (gaya e-commerce) ---------- */
.ec-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.ec-card:hover{box-shadow:0 12px 30px -12px rgba(17,24,23,.15);transform:translateY(-2px);}

/* ---------- Chips kategori ---------- */
.chip{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:8px 18px;border-radius:999px;font-size:13px;font-weight:500;
  background:var(--surface);color:var(--muted);border:1px solid transparent;
  transition:all .15s ease;
}
.chip.active{background:var(--brand-primary);color:#fff;}

/* ---------- Carousel horizontal (kesamping, tidak turun ke bawah) ---------- */
.carousel-row{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;
}
.carousel-row > *{scroll-snap-align:start;flex:0 0 auto;}
.carousel-card-sm{width:170px;}
.carousel-card-md{width:230px;}
.carousel-card-lg{width:280px;}

/* ---------- Bead divider (opsional, dipakai di halaman tertentu) ---------- */
.bead-divider{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;margin:40px auto;}
.bead-divider span{display:block;width:6px;height:6px;border-radius:50%;background:var(--brand-accent);opacity:.35;}

@media (max-width:640px){
  .carousel-card-lg{width:240px;}
  .carousel-card-md{width:200px;}
}

/* ---------- Popup Promo (modal saat buka website) ---------- */
.promo-popup-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(17,24,23,.6);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:popupFadeIn .2s ease;
}
@keyframes popupFadeIn{from{opacity:0}to{opacity:1}}
.promo-popup-card{
  position:relative;max-width:420px;width:100%;background:#fff;border-radius:24px;
  overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
  animation:popupScaleIn .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes popupScaleIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.promo-popup-close{
  position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border-radius:999px;
  background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;font-size:16px;line-height:1;
}
.promo-popup-close:hover{background:rgba(0,0,0,.65);}
.promo-popup-img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;cursor:pointer;}
.promo-popup-body{padding:16px 18px 20px;text-align:center;}

/* ---------- Grafik (chart) - kartu modern ---------- */
.chart-card{
  background:#fff;border-radius:20px;border:1px solid var(--line);
  box-shadow:0 4px 24px -12px rgba(17,24,23,.08);padding:20px;
}
.stat-tile{
  background:linear-gradient(145deg,#fff,var(--surface));
  border:1px solid var(--line);border-radius:18px;padding:18px;
}
.range-pill{
  padding:7px 16px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:var(--surface);color:var(--muted);border:1px solid transparent;transition:all .15s ease;
}
.range-pill.active{background:var(--brand-primary);color:#fff;}

/* ---------- Konten CMS (panduan/promo/paket) — styling list, heading, dll ----------
   Tailwind menghapus style bawaan browser untuk ul/ol/li, jadi perlu diaktifkan lagi
   di sini supaya list dari editor (Quill) tampil benar: bullet, nomor, indentasi. */
.prose-sm{ color:#374151; }
.prose-sm p{ margin:0 0 12px; }
.prose-sm p:last-child{ margin-bottom:0; }
.prose-sm ul{ list-style:disc; padding-left:1.4rem; margin:0 0 14px; }
.prose-sm ol{ list-style:decimal; padding-left:1.4rem; margin:0 0 14px; }
.prose-sm li{ margin:0 0 6px; }
.prose-sm li::marker{ color:var(--brand-primary); }
.prose-sm h1, .prose-sm h2, .prose-sm h3{ font-family:'Fraunces',serif; color:#111827; margin:20px 0 10px; line-height:1.3; }
.prose-sm h1{ font-size:1.4rem; }
.prose-sm h2{ font-size:1.2rem; }
.prose-sm h3{ font-size:1.05rem; }
.prose-sm strong, .prose-sm b{ font-weight:700; color:#111827; }
.prose-sm blockquote{
  border-left:3px solid var(--brand-accent); padding:8px 16px; margin:14px 0;
  background:var(--surface); border-radius:0 10px 10px 0; font-style:italic; color:#4B5563;
}
.prose-sm a{ color:var(--brand-primary); text-decoration:underline; }
.prose-sm img{ border-radius:12px; margin:12px 0; max-width:100%; }