/* ===== VARIABEL WARNA & DASAR ===== */
:root {
  --bg: #08080a;
  --ink: #f3ebda;
  --muted: #c9b48a;
  
  /* GARIS MODE GELAP: EMAS TEGAS STATIS */
  --line: rgba(227, 201, 143, 0.6); 
  
  --panel: rgba(15, 14, 17, 0.98); 
  --g1: #fff6df;
  --g2: #e3c98f; /* Warna Emas Premium Utama */
  --g3: #a8823f;
  --blur: saturate(140%) blur(14px);
  --on: #86efac;
  --off: #fca5a5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ===== HEADER & NAVIGASI ===== */
header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: var(--blur);
  border-bottom: 2px solid var(--line);
  overflow: visible;
  position: relative;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

.nav { display: flex; align-items: center; padding: 15px 0; justify-content: space-between; }

.logo {
  font-family: "Fraunces", serif;
  font-size: 1.4rem; color: var(--g2);
  letter-spacing: 2px; font-weight: 700;
}

.burger { 
  display: flex; flex-direction: column; gap: 4px; padding: 10px; 
  z-index: 10000;
  position: relative;
}
.burger span { width: 24px; height: 2px; background: var(--g2); border-radius: 2px; }

/* ===== MENU PENGATURAN ===== */
.menu {
  position: fixed;
  right: 20px; 
  left: auto;
  transform: none;
  top: 65px;
  
  width: 280px;
  max-width: calc(100vw - 40px);
  
  background: var(--panel); 
  border: 2px solid var(--line);
  border-radius: 16px; 
  padding: 10px;
  
  display: none; 
  pointer-events: none; 
  
  flex-direction: column; 
  gap: 5px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8); 
  z-index: 9999;
  max-height: 70vh; 
  overflow-y: auto;
}

.menu.buka { 
  display: flex; 
  pointer-events: auto; 
}

.sub-label {
  font-size: .65rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--g2);
  padding: 10px 12px 5px; font-weight: bold;
  border-top: 2px solid var(--line);
  margin-top: 5px;
}
.sub-label:first-of-type { border-top: none; margin-top: 0; }

.row-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 10px; text-align: left;
  transition: background .2s, border-color .2s;
  border: 2px solid transparent; 
}
.row-btn:hover { background: rgba(255,255,255,0.05); border-color: var(--line); }

.r-ikon { width: 20px; text-align: center; }
.r-label { flex: 1; font-size: .9rem; font-weight: 500; }

.stat {
  font-size: .6rem; padding: 3px 8px; border-radius: 20px;
  font-weight: bold; letter-spacing: 1px;
}
.stat.on {
  background: rgba(134,239,172,0.1); color: var(--on);
  border: 2px solid rgba(134,239,172,0.3);
}
.stat.off {
  background: rgba(252,165,165,0.1); color: var(--off);
  border: 2px solid rgba(252,165,165,0.3);
}

/* ===== KONTEN UTAMA & PANEL ===== */
.hero { padding: 80px 0 40px; text-align: center; min-height: 20px; }

.section { padding: 40px 0; }
.divider {
  height: 2px;
  max-width: 1000px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.panel {
  background: rgba(255,255,255,0.03); 
  border: 2px solid var(--line); 
  border-radius: 20px; padding: 30px; margin-bottom: 20px;
}

.overline {
  font-size: .7rem; letter-spacing: 2px; color: var(--g2);
  text-transform: uppercase; margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.overline::after { 
  content: ""; 
  flex: 1; 
  height: 2px; 
  background: var(--line); 
}

h2 { 
  font-family: "Fraunces", serif; color: var(--g1); margin-bottom: 20px; 
  border-bottom: 2px solid var(--line);
  padding-bottom: 10px;
}

/* ===== GRID LAYANAN & CARD ===== */
.grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; 
  padding-top: 20px;
}

.card {
  background: rgba(0,0,0,0.2); 
  border: 2px solid var(--line);
  border-radius: 16px; 
  padding: 24px; 
  position: relative;
  transition: transform .3s, border-color .3s;
  min-height: 150px; 
}

.card:hover { 
  transform: translateY(-5px); 
  border-color: var(--g2); 
}

/* ===== FOOTER & TOAST ===== */
footer {
  text-align: center; padding: 40px 0; color: var(--muted);
  font-size: .8rem; 
  border-top: 2px solid var(--line); 
  margin-top: 40px;
}

.mono {
  font-family: "Fraunces", serif; color: var(--g2);
  font-size: 1.2rem; letter-spacing: 4px;
  display: inline-block; margin-bottom: 10px;
  border: 2px solid var(--line); 
  padding: 5px 15px; border-radius: 8px;
}

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--panel); 
  border: 2px solid var(--g2);
  padding: 12px 24px; border-radius: 30px; font-size: .9rem;
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.toast.muncul { opacity: 1; }

/* ===== ANIMASI BACKGROUND GLOBAL ===== */
.bg-anim { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.aura {
  position: absolute; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(227,201,143,0.08), transparent 70%);
  border-radius: 50%;
}
.a1 { top: -100px; left: -100px; animation: drift 20s infinite alternate; }
.a2 { bottom: -100px; right: -100px; animation: drift 25s infinite alternate-reverse; }
@keyframes drift { from { transform: translate(0,0); } to { transform: translate(30px,30px); } }

/* ===== DESKTOP MODE ===== */
.dsk-badge {
  position: fixed; right: 15px; bottom: 15px;
  background: var(--panel); 
  border: 2px solid var(--g2);
  padding: 8px 16px; border-radius: 30px; font-size: .75rem;
  color: var(--g2); display: none; z-index: 90;
}
html.mode-desktop .dsk-badge { display: block; }
html.mode-desktop { font-size: 120%; }

/* ===== ANIMASI REVEAL ===== */
.reveal { opacity: 0; transform: translateY(20px); transition: all .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ===== TEMA TERANG ===== */
body.terang {
  --bg: #f7f5f0; 
  --ink: #241c0c; 
  --muted: #8a6d3a;
  --line: rgba(0, 0, 0, 0.15); 
  
  --panel: rgba(255,255,255,0.98);
  
  /* Warna Emas Avatar Tetap Sama (#e3c98f) */
  --g2: #e3c98f; 
  
  /* PERBAIKAN: Coklat Hitam Pekat Agar Teks Sangat Kuat */
  --g1: #3a2508; 
  --g3: #a8823f;
}

/* PERBAIKAN KHUSUS: Hanya Garis Tiga (Burger) yang jadi Coklat Gelap */
body.terang .burger span {
  background: var(--g1) !important;
  height: 2.5px !important;
}

/* PERBAIKAN KHUSUS: Teks "TAMPILAN" di menu juga ikut gelap agar jelas */
body.terang .sub-label {
  color: var(--g1) !important;
  font-weight: 800 !important;
}

/* PERBAIKAN BARU: Samakan warna teks item menu dengan label "TAMPILAN" */
body.terang .r-label {
  color: var(--g1) !important;
  font-weight: 600 !important;
}

/* PERBAIKAN KHUSUS: HANYA TEKS "00 LAYANAN", "01 CARA ORDER", DLL YANG BERUBAH JADI GELAP */
body.terang .overline {
  font-weight: 800 !important;
  color: var(--g1) !important;
}

/* SEMENTARA ITU: Judul H2 DAN GARIS HORIZONTAL (.overline::after) TETAP EMAS PREMIUM */
body.terang h2 {
  font-weight: 800 !important;
  color: var(--g2) !important;
}

/* Penyesuaian Tampilan Nama di Mode Terang */
body.terang #namaDisplay {
  color: var(--g1); /* Menggunakan warna coklat gelap agar kontras di putih */
}

/* Agar nama tidak terlalu besar di HP */
@media (max-width: 480px) {
  .card-full > span {
    font-size: 1.4rem !important;
  }
}

body.terang .card { 
  background: rgba(255,255,255,0.8); 
  border: 2px solid var(--line);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
body.terang .card:hover { border-color: var(--g2); }

body.terang .row-btn:hover { background: rgba(168,130,63,0.08); border-color: var(--line); }
body.terang .panel { background: rgba(255,255,255,0.6); border: 2px solid var(--line); }

/* EMOJI GOLD CLASS */
.emoji-gold{display:inline-block;vertical-align:middle;filter:url(#gold-shine);color:var(--g2)}

/* ===== KOTAK AVATAR PREMIUM ===== */
.card-full > div:first-child {
  background: var(--g2) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  overflow: hidden !important;
  position: relative;
}

.card-full > div:first-child::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%);
  transform: skewX(-25deg);
  animation: shimmerAvatar 2.5s infinite linear;
  will-change: transform;
  z-index: 2;
}

@keyframes shimmerAvatar {
  0% { left: -100%; }
  100% { left: 200%; }
}