/* =========================================================
   TEMA WARNA — semua warna diambil dari variabel --t-*
   yang diatur dari dashboard admin (Tampilan Website →
   Kustomisasi Tema). Nilai di bawah = tema "Halloween".
   Dipasang SETELAH site.css.
   ========================================================= */
:root {
  --t-bg: #333333;       /* latar halaman */
  --t-win: #1e1e1e;      /* jendela */
  --t-panel: #232323;    /* kartu */
  --t-panel2: #2a2a2a;   /* tombol, input, chip */
  --t-deep: #171717;     /* area isi paling dalam */
  --t-line: #444444;     /* garis tipis */
  --t-edge: #ffffff;     /* bingkai tebal ala stiker */
  --t-shadow: #000000;   /* bayangan */
  --t-text: #f4f4f4;     /* teks utama */
  --t-muted: #a6a6a6;    /* teks redup */
  --t-on: #111111;       /* teks di atas warna utama */
  --t-scheme: dark;

  /* ukuran sudut (diubah lewat kelas rad-*) */
  --r-xl: 24px; --r-l: 18px; --r-m: 12px; --r-pill: 999px;
  /* bayangan (diubah lewat kelas shadow-*) */
  --sh-s: 0 2px 0 var(--t-shadow);
  --sh-m: 0 4px 0 var(--t-shadow);
  --sh-l: 0 5px 0 var(--t-shadow);

  color-scheme: var(--t-scheme);
  --p-50: var(--t-deep);
  --p-100: var(--t-panel2);
  --p-200: var(--t-line);
  --p-300: color-mix(in srgb, var(--t-line) 65%, var(--t-text));
  --p-400: color-mix(in srgb, var(--t-line) 40%, var(--t-text));
  --ink: var(--t-text);
  --muted: var(--t-muted);
  --lav: var(--t-panel2);
  --sky: var(--t-panel2);
}

/* gaya sudut */
body.rad-soft { --r-xl: 12px; --r-l: 10px; --r-m: 8px; --r-pill: 10px; }
body.rad-square { --r-xl: 4px; --r-l: 4px; --r-m: 3px; --r-pill: 4px; }
/* gaya bayangan */
body.shadow-hard { --sh-s: 2px 2px 0 var(--t-shadow); --sh-m: 4px 4px 0 var(--t-shadow); --sh-l: 6px 6px 0 var(--t-shadow); }
body.shadow-none { --sh-s: none; --sh-m: none; --sh-l: none; }

body {
  color: var(--t-text);
  background-color: var(--t-bg);
  background-image:
    radial-gradient(color-mix(in srgb, var(--t-text) 6%, transparent) 1.5px, transparent 2px),
    linear-gradient(color-mix(in srgb, var(--t-text) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--t-text) 3%, transparent) 1px, transparent 1px);
}

/* ---------- Jendela ---------- */
.window { background: var(--t-win); border: 4px solid var(--t-edge); border-radius: var(--r-xl); box-shadow: 0 0 0 2px var(--t-shadow), 0 16px 34px #0006; }
.titlebar.striped, .titlebar.gradient {
  background: linear-gradient(90deg, var(--t-deep), var(--t-panel2) 55%, var(--t-line));
  border-bottom: 2px solid var(--t-shadow);
}
.win-title { color: var(--t-text); text-shadow: 0 2px 0 var(--t-shadow); }
.win-btn { background: var(--t-panel2); color: var(--t-text); border-color: var(--t-line); box-shadow: var(--sh-s); border-radius: var(--r-m); }
.win-btn:active { box-shadow: none; }
.win-btn.danger { background: var(--primary); color: var(--t-on); border-color: var(--t-edge); }

/* ---------- Banner bawaan ---------- */
.banner { border-color: var(--t-edge); background: var(--t-panel2); border-radius: var(--r-l); }
.banner-default {
  background:
    radial-gradient(color-mix(in srgb, var(--t-text) 8%, transparent) 1.5px, transparent 2px) 0 0 / 18px 18px,
    radial-gradient(circle at 15% 25%, color-mix(in srgb, var(--primary) 22%, transparent) 0 70px, transparent 71px),
    radial-gradient(circle at 85% 75%, color-mix(in srgb, var(--t-text) 6%, transparent) 0 90px, transparent 91px),
    linear-gradient(135deg, var(--t-deep), var(--t-panel2));
}
.banner-default h1 {
  color: var(--t-title, var(--t-deep));
  --o: var(--t-title-outline, var(--t-edge));
  text-shadow: 4px 0 var(--o), -4px 0 var(--o), 0 4px var(--o), 0 -4px var(--o),
    3px 3px var(--o), -3px -3px var(--o), 3px -3px var(--o), -3px 3px var(--o), 0 10px 0 var(--t-shadow);
}
.banner-default p { background: var(--primary); color: var(--t-on); border: 2px solid var(--t-edge); box-shadow: var(--sh-s); border-radius: var(--r-pill); }

/* ---------- Profil ---------- */
.profile-card { background: linear-gradient(var(--t-panel), var(--t-win)); border-color: var(--t-edge); box-shadow: inset 0 0 0 1px var(--t-shadow); border-radius: var(--r-l); }
.avatar { border-color: var(--t-edge); box-shadow: 0 0 0 3px var(--t-shadow); background: var(--t-panel2); }
.name-pill { background: var(--t-deep); color: var(--t-text); border-color: var(--t-edge); box-shadow: var(--sh-s); border-radius: var(--r-pill); }
.bio { color: var(--t-text); }
.social { background: var(--t-panel2); color: var(--t-text); border-color: var(--t-line); box-shadow: var(--sh-m); border-radius: var(--r-m); }
.social:hover { color: var(--primary); }
.search-bar { background: var(--t-panel2); border-color: var(--t-edge); box-shadow: none; border-radius: var(--r-pill); }
.search-bar input { color: var(--t-text); }

/* ---------- Menu bertab ---------- */
.menubar { background: var(--t-panel2); border-bottom-color: var(--t-shadow); }
.menu-tab { color: var(--t-text); border-radius: var(--r-m); }
.menu-tab:hover { background: var(--t-panel); }
.menu-tab.active { background: var(--t-deep); border-color: var(--t-line); color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.chip-btn { background: var(--t-panel2); color: var(--t-text); border-color: var(--t-line); box-shadow: var(--sh-s); border-radius: var(--r-m); }
.win-body.inset { background: var(--t-deep); border-color: var(--t-line); box-shadow: inset 0 2px 10px #0004; border-radius: var(--r-m); }
.statusbar { color: var(--t-muted); }

/* ---------- Komponen ---------- */
.box { background: var(--t-panel); border-color: var(--t-line); box-shadow: var(--sh-m); border-radius: var(--r-l); }
.btn { color: var(--t-on); border-color: var(--t-on); box-shadow: var(--sh-s); border-radius: var(--r-pill); }
.btn:active { box-shadow: none; }
.btn-outline { background: var(--t-panel2); color: var(--t-text); border-color: var(--t-line); }
.mini-btn { background: var(--t-panel2); color: var(--t-text); border-color: var(--t-line); box-shadow: var(--sh-s); border-radius: var(--r-m); }
.input { background: var(--t-panel2); border-color: var(--t-line); color: var(--t-text); border-radius: var(--r-m); }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.hint, .panel-head p { color: var(--t-muted); }

/* ---------- Pricelist ---------- */
.chip { background: var(--t-panel2); color: var(--t-text); border-color: var(--t-line); box-shadow: var(--sh-s); border-radius: var(--r-pill); }
.chip.active { background: var(--primary); color: var(--t-on); border-color: var(--t-edge); }
.price-card { background: var(--t-panel); border-color: var(--t-line); box-shadow: var(--sh-l); border-radius: var(--r-l); }
.price-card .icon { background: var(--t-panel2); border-color: var(--t-line); border-radius: var(--r-m); }
.price-card h3 { color: var(--t-text); }
.plans, .variant-list, .price-rows { border-top-color: var(--t-line); }
.badge { color: var(--t-on); border-color: var(--t-edge); border-radius: var(--r-pill); }

/* ---------- Info aplikasi & kritik saran ---------- */
.app-item { background: var(--t-panel); border-color: var(--t-line); box-shadow: var(--sh-m); border-radius: var(--r-l); }
.fb-item { background: var(--t-panel); border-color: var(--t-line); box-shadow: var(--sh-s); border-radius: var(--r-l); }
.rating-bars .track { background: var(--t-panel2); border-color: var(--t-line); }
.stars label { color: var(--t-line); }
.tag.Kritik, .stock-pill.out { background: #4a1f1f; color: #ff9b9b; }
.tag.Saran, .stock-pill.in { background: #1f3d2a; color: #8fe0a9; }
.reply { background: var(--t-panel2); }

/* ---------- Kalender ---------- */
.today-card { background: linear-gradient(135deg, var(--t-deep), var(--t-panel2)); color: var(--t-text); border-color: var(--t-edge); box-shadow: 0 0 0 2px var(--t-shadow), var(--sh-l); border-radius: var(--r-l); }
.today-card .time { color: var(--primary); }
.cal-grid .dow:first-child, .cal-cell.sun { color: #ff7b7b; }
.cal-cell { border-radius: var(--r-m); }
.cal-cell:hover { background: var(--t-panel2); border-color: var(--t-line); }
.cal-cell.other { color: color-mix(in srgb, var(--t-muted) 50%, transparent); }
.cal-cell.in-range { background: var(--t-panel2); }
.cal-cell.selected { background: color-mix(in srgb, var(--accent) 18%, var(--t-panel)); border-color: var(--accent); }
.cal-cell.today { background: var(--primary); color: var(--t-on); box-shadow: var(--sh-s); }
.result { background: var(--t-deep); border-color: var(--t-line); border-radius: var(--r-m); }
.toggle-row { background: var(--t-deep); border-color: var(--t-line); border-radius: var(--r-m); }
.toggle { background: var(--t-line); }
.toggle:checked { background: var(--primary); }

.toast { background: var(--t-deep); color: var(--t-text); border-color: var(--t-edge); box-shadow: var(--sh-m); border-radius: var(--r-l); }

/* ---------- Jenis plan, popup & keranjang ---------- */
.popup-bg { background: #000a; }
.popup-body { background: var(--t-deep); }
.popup-app-head .icon { background: var(--t-panel2); border-color: var(--t-line); border-radius: var(--r-m); }
.popup-app-head h3 { color: var(--t-text); }
.variant { background: var(--t-panel); border-color: var(--t-line); box-shadow: var(--sh-m); border-radius: var(--r-l); }
.variant-compare .variant { background: var(--t-deep); }
.price-row + .price-row { border-top-color: var(--t-line); }
.count-bubble { color: var(--t-on); }
.count-bubble.zero { background: var(--t-line); color: var(--t-text); }
.cart-item { background: var(--t-panel); border-color: var(--t-line); border-radius: var(--r-l); }
.cart-total, .notes { border-color: var(--t-line); background: var(--t-deep); border-radius: var(--r-m); }

/* ---------- Pita riwayat order & promo ---------- */
.order-ticker { background: var(--t-win); border-color: var(--t-edge); box-shadow: 0 0 0 2px var(--t-shadow), var(--sh-m); border-radius: var(--r-pill); }
.ot-label { color: var(--t-on); border-radius: var(--r-pill) 0 0 var(--r-pill); }
.promo-block { background: var(--t-deep); border-radius: var(--r-l); }
.promo-card { background: var(--t-panel); border-color: var(--t-line); box-shadow: var(--sh-m); border-radius: var(--r-l); }
.promo-head .icon { background: var(--t-panel2); border-radius: var(--r-m); }
.promo-head h4 { color: var(--t-text); }
.promo-off { color: var(--t-on); border-color: var(--t-edge); }