/* =====================================================================
   MemberHub: app.css (modern app shell)
   ---------------------------------------------------------------------
   Desain 2026: sidebar + topbar ala dashboard SaaS modern.
   • Token semantik (light & dark) ala shadcn/ui
   • Plus Jakarta Sans, card lembut dengan shadow halus, radius konsisten
   • Sidebar tetap di desktop, drawer di mobile; topbar sticky
   • Kontrak kelas lama (.card/.btn/.badge/.stat/.tbl/alert) dipertahankan
   ===================================================================== */

:root {
  /* shadcn token, dark (default area aplikasi) */
  --background: #0e1013;
  --foreground: #eceef2;
  --card: #161920;
  --card-foreground: #eceef2;
  --popover: #1d212a;
  --primary: #22c55e;
  --primary-foreground: #05230f;
  /* Warna primer untuk TEKS (link, label aktif, badge). Dipisah dari --primary
     supaya admin bisa mengubah warna tombol tanpa ikut membuat teks gagal
     kontras: --primary cuma dipakai sebagai bidang, --primary-ink sebagai huruf.
     Di mode gelap hurufnya digeser 50% ke arah putih; karena memakai var(),
     rumus ini otomatis mengikuti warna utama apa pun yang dipilih admin. */
  --primary-ink: color-mix(in srgb, var(--primary) 50%, #fff);
  --secondary: #1d212a;
  --secondary-foreground: #eceef2;
  --muted: #1d212a;
  --muted-foreground: #9aa1ad;
  --accent: #242938;
  --accent-foreground: #eceef2;
  --destructive: #ef4444;
  --destructive-foreground: #fff;
  --success: #22c55e;
  --warning: #f59e0b;
  --info: #60a5fa;
  --border: #262b35;
  --input: #2b313d;
  --ring: #22c55e;
  --radius: 0.75rem;

  --sidebar: #12141a;
  --sidebar-foreground: #a6adba;
  --sidebar-accent: #1e232e;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.45);

  /* Nama lama → token baru (kompatibilitas template) */
  --panel: var(--card);
  --panel2: var(--secondary);
  --text: var(--foreground);
  --brand: var(--primary);
  --brand2: #16a34a;
  --wa: var(--primary);
  --danger: var(--destructive);
  --warn: var(--warning);
  --blue: var(--info);
}

[data-theme="light"] {
  --background: #f4f6f8;
  --foreground: #171a20;
  --card: #ffffff;
  --card-foreground: #171a20;
  --popover: #ffffff;
  --primary: #16a34a;
  --primary-foreground: #ffffff;
  /* Mode terang: huruf digeser 55% ke arah hitam. Pada semua warna utama tema
     (hijau, teal, biru, violet, jingga, zaitun, marun) hasilnya minimal 6:1 di
     atas latar #f4f6f8, jadi tetap lolos WCAG AA dengan sisa ruang. */
  --primary-ink: color-mix(in srgb, var(--primary) 55%, #000);
  --secondary: #eef1f4;
  --secondary-foreground: #171a20;
  --muted: #eef1f4;
  --muted-foreground: #5b6672;
  --accent: #e6ebf1;
  --accent-foreground: #171a20;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #e3e7ec;
  --input: #ccd3dc;
  --ring: #16a34a;
  --brand2: #15803d;

  --sidebar: #ffffff;
  --sidebar-foreground: #5b6672;
  --sidebar-accent: #eaf7ef;
  --shadow-card: 0 1px 3px rgb(16 24 40 / 0.07), 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-pop: 0 12px 32px rgb(16 24 40 / 0.14);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.55;
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 6px; }
h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 28px 0 12px; }
h3 { font-size: 15.5px; font-weight: 700; margin: 14px 0 8px; }
p.sub { color: var(--muted-foreground); margin-top: 0; font-size: 14.5px; }
.muted { color: var(--muted-foreground); }
.right { text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

/* =============== App shell: sidebar + main =============== */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px; flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 14px;
}
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16.5px; color: var(--foreground); letter-spacing: -0.01em; white-space: nowrap; }
.logo:hover { text-decoration: none; }
/* Logo gambar milik admin (Settings → Logo & Favicon): mendukung logo kotak maupun
   logo horizontal (lockup). Tinggi dikunci supaya header dashboard/guest tidak
   berubah saat logo dipasang; teks nama situs disembunyikan karena lockup
   sudah memuat wordmark. */
.logo-img { width: auto; max-width: 180px; height: 26px; object-fit: contain; flex-shrink: 0; border-radius: 6px; }
.logo:has(.logo-img) { font-size: 0; }
/* Thumbnail kartu course (member area): hanya tampil bila course punya cover,
   tanpa cover kartu persis seperti sebelumnya. */
.course-thumb img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
/* Form Logo & Favicon: dua kolom di desktop, menumpuk di HP. */
.brand-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.brand-fields input[type="file"] { padding: 8px; }
.brand-preview { border: 1px solid var(--border); border-radius: 8px; padding: 4px; background: var(--card); }
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--info) 70%, var(--primary)));
  color: #fff; font-size: 14px; font-weight: 800;
}
.side-close { display: none; background: none; border: 0; color: var(--muted-foreground); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.side-close:hover { background: var(--accent); color: var(--foreground); }

.side-nav { flex: 1; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.side-sep {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted-foreground); opacity: 0.75;
  margin: 14px 10px 6px;
}
.side-sep:first-child { margin-top: 4px; }
.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 8.5px 11px; border-radius: calc(var(--radius) - 3px);
  color: var(--sidebar-foreground); font-size: 13.8px; font-weight: 600;
  transition: background-color 130ms ease, color 130ms ease;
}
.side-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
.side-link:hover { background: color-mix(in srgb, var(--foreground) 5%, transparent); color: var(--foreground); text-decoration: none; }
.side-link.active {
  background: var(--sidebar-accent);
  color: var(--primary-ink);
}
.side-link.active svg { opacity: 1; }

.side-foot { padding: 14px 16px 18px; border-top: 1px solid var(--border); }
.side-backdrop { display: none; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 28px;
  background: color-mix(in srgb, var(--background) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.top-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.side-open {
  display: none; background: none; border: 1px solid var(--border); border-radius: 10px;
  color: var(--foreground); padding: 7px 9px; cursor: pointer;
}
.top-user { display: flex; align-items: center; gap: 9px; color: var(--foreground); font-weight: 600; font-size: 13.5px; }
.top-user:hover { text-decoration: none; opacity: 0.85; }
.avatar {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary-ink); font-weight: 800; font-size: 14px;
}
.top-user-name { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.content { flex: 1; padding: 26px 28px 40px; max-width: 1280px; width: 100%; margin: 0 auto; }
.content-foot { padding: 18px 28px 26px; color: var(--muted-foreground); font-size: 12.5px; border-top: 1px solid var(--border); }

/* Guest shell (login/register/error) */
.guest-shell { min-height: 100vh; display: flex; flex-direction: column; }
.guest-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
}
.guest-top nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.guest-top nav a { color: var(--muted-foreground); font-size: 14px; }
.guest-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 20px 40px; }
.guest-main > * { width: 100%; max-width: 460px; }
.guest-shell footer { text-align: center; color: var(--muted-foreground); font-size: 12.5px; padding: 18px; }

/* Card auth: padding bawah longgar di HP supaya tak menempel footer + keyboard */
@media (max-width: 780px) {
  .guest-shell .card { margin-bottom: 24px; }
  .guest-shell .card .btn.block { min-height: 50px; font-size: 16px; }
  .guest-top { padding: 12px 16px; }
}

/* =============== Komponen =============== */

/* Button (variant × size) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.55rem 1.05rem; border-radius: calc(var(--radius) - 3px);
  border: 1px solid var(--border);
  font-weight: 700; font-size: 13.5px; line-height: 1.4; cursor: pointer;
  font-family: inherit;
  text-decoration: none !important;
  background: var(--card); color: var(--foreground);
  box-shadow: var(--shadow-card);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.btn:hover { background: var(--accent); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.btn.primary:hover { background: var(--brand2); color: #fff; }
.btn.wa { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.btn.wa:hover { background: var(--brand2); }
.btn.danger { background: var(--destructive); color: var(--destructive-foreground); border-color: transparent; }
.btn.danger:hover { background: #dc2626; }
.btn.small { padding: 0.34rem 0.75rem; font-size: 12.8px; border-radius: calc(var(--radius) - 4px); }
.btn.block { display: flex; width: 100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--muted-foreground);
}
.theme-toggle:hover { background: var(--accent); color: var(--foreground); }
.theme-toggle .ico-sun { display: none; }
.theme-toggle .ico-moon { display: inline-block; }
html[data-theme="light"] .theme-toggle .ico-sun { display: inline-block; }
html[data-theme="light"] .theme-toggle .ico-moon { display: none; }

/* Card */
.card {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

/* Badge */
.badge {
  display: inline-flex; align-items: center;
  padding: 2.5px 10px; border-radius: 999px; font-size: 11.8px; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap;
}
.badge.green { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-ink); border-color: color-mix(in srgb, var(--primary) 32%, transparent); }
.badge.yellow { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 32%, transparent); }
.badge.blue { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); border-color: color-mix(in srgb, var(--info) 32%, transparent); }
.badge.red { background: color-mix(in srgb, var(--destructive) 14%, transparent); color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 32%, transparent); }
.badge.gray { background: color-mix(in srgb, var(--muted-foreground) 14%, transparent); color: var(--muted-foreground); border-color: color-mix(in srgb, var(--muted-foreground) 30%, transparent); }

/* Stat */
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Jarak antar kartu sudah diatur gap grid; margin bawah kartu di grid dihapus
   supaya tidak terhitung dua kali (baris terakhir jadi lebih renggang). */
.grid > .card { margin-bottom: 0; }
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-card);
}
.stat .label { color: var(--muted-foreground); font-size: 12.5px; font-weight: 600; }
.stat .value { font-size: 23px; font-weight: 800; margin-top: 3px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Table */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.8px; }
.tbl th, .tbl td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl th { color: var(--muted-foreground); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--foreground) 3.5%, transparent); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl form { display: inline-flex; gap: 4px; margin: 0; flex-wrap: wrap; }

/* Form */
label { display: block; font-size: 12.8px; font-weight: 600; color: var(--muted-foreground); margin: 12px 0 5px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=file], select, textarea {
  width: 100%; padding: 0.55rem 0.8rem; border-radius: calc(var(--radius) - 3px);
  border: 1px solid var(--input);
  background: var(--background); color: var(--foreground); font-size: 14px; font-family: inherit;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--ring) 45%, transparent);
  outline-offset: 1px; border-color: var(--ring);
}
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
/* Placeholder pakai muted-foreground penuh: campuran 75% hanya 3.2:1 di tema
   terang (gagal WCAG AA). Nilai penuh: 5.4:1 terang, 7.3:1 gelap. */
input::placeholder, textarea::placeholder { color: var(--muted-foreground); }

/* Foto profil (Profil member) */
.avatar-field { display: flex; gap: 14px; align-items: flex-start; margin-top: 6px; }
.avatar-preview { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--primary) 14%, transparent); display: grid; place-items: center; }
.avatar-initial { color: var(--primary-ink); font-weight: 800; font-size: 21px; }
.avatar-remove { display: flex; align-items: center; gap: 7px; font-size: 12.8px; font-weight: 600; color: var(--muted-foreground); margin: 8px 0 0; }
.avatar-remove input { width: auto; }
.avatar-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* Login sosial */
.divider-or {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted-foreground); font-size: 12.5px; font-weight: 600;
  margin: 16px 0;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.divider-or::before, .divider-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.google-btn { background: var(--card); color: var(--foreground); }
.google-btn:hover { background: var(--accent); }
.google-btn svg { flex-shrink: 0; }

/* Alert */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; border: 1px solid; }
.alert.error { background: color-mix(in srgb, var(--destructive) 11%, transparent); border-color: color-mix(in srgb, var(--destructive) 38%, transparent); color: color-mix(in srgb, var(--destructive) 78%, var(--foreground)); }
.alert.ok { background: color-mix(in srgb, var(--primary) 11%, transparent); border-color: color-mix(in srgb, var(--primary) 38%, transparent); color: color-mix(in srgb, var(--primary) 78%, var(--foreground)); }

/* Hero/section lama (error page dsb.) */
.hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--info) 8%, transparent));
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 44px 32px; text-align: center;
}
.hero h1 { font-size: 32px; }
.hero p { color: var(--muted-foreground); max-width: 640px; margin: 10px auto 22px; }
.section { margin: 28px 0; }
.copy {
  background: var(--secondary); border: 1px dashed var(--border); padding: 10px 14px; border-radius: 10px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12.8px; overflow-wrap: anywhere;
}
.progress { height: 8px; background: var(--secondary); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: var(--primary); transition: width 300ms ease; }

/* Charts */
.chart-wrap { width: 100%; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.top-list { display: flex; flex-direction: column; gap: 10px; }
.top-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.top-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-track { background: var(--secondary); border-radius: 999px; height: 12px; overflow: hidden; }
.top-fill { height: 100%; border-radius: 999px; }
.top-fill.bar { background: var(--info); opacity: 0.85; }
.top-fill.top { background: var(--primary); }
.top-val { white-space: nowrap; font-weight: 600; }
.top-val .muted { font-weight: 400; }

/* Landing lama (kompatibilitas) */
.landing .lp-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, transparent), transparent); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 52px 28px; text-align: center; }
.landing .lp-hero h1 { font-size: 32px; }
.landing .lp-hero p { color: var(--muted-foreground); max-width: 620px; margin: 12px auto 24px; }
.landing .lp-text { white-space: pre-wrap; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-card); }

footer { color: var(--muted-foreground); font-size: 12.5px; }

/* =============== Navigasi bawah (mobile ala aplikasi) ===============
   Disembunyikan di desktop; drawer tetap ada untuk daftar menu lengkap. */
.bottom-nav { display: none; }

/* =============== Responsive =============== */
@media (max-width: 900px) {
  /* Drawer */
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 60;
    transform: translateX(-100%); transition: transform 220ms ease;
    box-shadow: var(--shadow-pop); width: min(292px, 84vw);
  }
  .sidebar.open { transform: translateX(0); }
  /* Tombol tutup drawer: 44px penuh supaya nyaman dijangkau jempol (R-03). */
  .side-close { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; }
  .side-backdrop.show {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgb(0 0 0 / 0.5); backdrop-filter: blur(2px);
  }
  .side-link { min-height: 46px; font-size: 14.5px; }

  /* Topbar & konten: sisakan ruang nav bawah + safe-area iOS */
  .topbar { padding: 10px 14px; gap: 10px; }
  .top-title { font-size: 14.5px; }
  .content { padding: 16px 14px calc(88px + env(safe-area-inset-bottom)); }
  .content-foot { display: none; }
  .top-user-name { display: none; }

  /* Tipografi & kartu: lebih lega membaca, lebih ringkas menggulir */
  h1 { font-size: 21px; margin: 2px 0 4px; }
  h2 { font-size: 17px; margin: 22px 0 10px; }
  h3 { font-size: 15px; }
  /* Input 16px di layar sempit: iOS Safari memaksa zoom-in otomatis saat
     field yang diberi fokus berfont <16px, sehingga tampilan terasa "lompat"
     dan tidak nyaman (terasa di menu Settings yang penuh form). */
  input, select, textarea { font-size: 16px; }
  .card { padding: 16px; border-radius: 14px; margin-bottom: 12px; }
  .grid { gap: 10px; }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 13px 14px; }
  .stat .value { font-size: 20px; }
  .stat .label { font-size: 11.5px; }
  .hero { padding: 30px 18px; border-radius: 16px; }
  .hero h1 { font-size: 24px; }

  /* Target sentuh ≥44px; input 16px supaya iOS tidak auto-zoom saat fokus */
  /* Semua tombol, termasuk yang kecil di dalam tabel, memenuhi target sentuh
     44px (R-03). Sebelumnya .btn.small 40px: baris aksi tabel jadi rawan salah
     tekan di layar sempit. */
  .btn { min-height: 44px; padding: 0.7rem 1.05rem; font-size: 14.5px; }
  .btn.small { min-height: 44px; padding: 0.5rem 0.85rem; font-size: 13.5px; }
  label { font-size: 13px; margin-top: 14px; }
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=url], input[type=search], input[type=tel], input[type=file], select, textarea {
    font-size: 16px; min-height: 46px; padding: 0.7rem 0.85rem;
  }
  textarea { min-height: 110px; }
  .theme-toggle { width: 44px; height: 44px; }
  .avatar { width: 34px; height: 34px; }
  .divider-or { margin: 14px 0; }

  /* Navigasi bawah */
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--background) 88%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
  }
  .bnav-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 52px; padding: 6px 2px; border: 0; border-radius: 12px;
    background: none; color: var(--muted-foreground);
    font-family: inherit; font-size: 10.5px; font-weight: 700; line-height: 1.15;
    text-align: center; text-decoration: none; cursor: pointer;
  }
  .bnav-link[hidden] { display: none; }
  .bnav-link svg { width: 21px; height: 21px; flex-shrink: 0; }
  .bnav-link:hover { text-decoration: none; color: var(--foreground); }
  .bnav-link.active { color: var(--primary-ink); background: color-mix(in srgb, var(--primary) 13%, transparent); }

  /* Tabel panjang → kartu bertumpuk (label sel diisi otomatis oleh script layout) */
  .card.tbl-stackable {
    background: transparent; border: 0; box-shadow: none; padding: 0;
    border-radius: 0; overflow: visible;
  }
  table.tbl:not(.tbl-adapt) th, table.tbl:not(.tbl-adapt) td { padding: 9px 10px; }
  table.tbl-adapt { display: block; font-size: 14px; }
  table.tbl-adapt thead { display: none; }
  table.tbl-adapt tbody { display: block; }
  table.tbl-adapt tbody tr {
    display: block; background: var(--card);
    border: 1px solid var(--border); border-radius: 14px;
    padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-card);
  }
  table.tbl-adapt tbody tr:hover td { background: transparent; }
  table.tbl-adapt tbody tr.tbl-flat { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
  table.tbl-adapt td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; /* sel aksi berisi banyak tombol: boleh turun baris, bukan keluar kartu */
    padding: 7px 0; border: 0; vertical-align: top;
  }
  table.tbl-adapt td + td { border-top: 1px dashed color-mix(in srgb, var(--border) 75%, transparent); }
  table.tbl-adapt td::before {
    content: attr(data-label); flex: 0 0 42%; padding-top: 3px;
    color: var(--muted-foreground); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  table.tbl-adapt td > * { min-width: 0; }
  table.tbl-adapt tr:not(.tbl-flat) td:first-child {
    display: block; padding: 0 0 9px; margin-bottom: 5px;
    border-top: 0; border-bottom: 1px solid var(--border);
    font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
  }
  table.tbl-adapt td:first-child::before { display: none; }
  table.tbl-adapt tr.tbl-flat td { display: block; padding: 16px 0; text-align: center; border: 0; }
  table.tbl-adapt td form { display: flex; gap: 8px; flex-wrap: wrap; }
  table.tbl-adapt td form .btn { flex: 1 1 auto; }
  /* Sel aksi (tombol + form campuran): label kolom menempati barisnya sendiri,
     lalu tombol tersusun dua kolom rata. Grid dipakai supaya keempat tombol
     berbagi lebar sama dan tidak ada yang menyusut sampai tulisannya meluber
     keluar kotak (dulu ".btn.small" di sini patah dua baris dan "Hapus" keluar
     dari kartu di layar sempit). */
  table.tbl-adapt td:has(> form),
  table.tbl-adapt td:has(> .btn) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px; align-items: center;
  }
  table.tbl-adapt td:has(> form)::before,
  table.tbl-adapt td:has(> .btn)::before { grid-column: 1 / -1; padding-top: 0; }
  table.tbl-adapt td > .btn { white-space: nowrap; }
  table.tbl-adapt td > .btn:only-child,
  table.tbl-adapt td > form:only-child { grid-column: 1 / -1; }
  table.tbl-adapt td > form .btn { width: 100%; white-space: nowrap; }
  table.tbl-adapt td .mono { font-size: 13.5px; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Preset tema (Settings → Tampilan) ---------- */
/* Kartu preset menampilkan empat warna utama paketnya, jadi admin memilih dari
   tampilan warnanya, bukan dari nama. Dipakai grid auto-fit supaya kartunya
   mengalir sendiri di layar sempit tanpa media query tambahan. */
.theme-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.theme-preset {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 10px 11px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--foreground); text-align: left; cursor: pointer;
  font-family: inherit;
}
.theme-preset:hover { border-color: var(--primary); }
/* Paket yang sedang berlaku ditandai jelas, termasuk saat warnanya diatur manual
   (tidak ada preset yang cocok, jadi tidak ada kartu bertanda "Aktif"). */
.theme-preset.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.theme-preset strong { font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.theme-preset small { color: var(--muted-foreground); font-size: 11.5px; line-height: 1.35; }
.theme-now {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-foreground);
  background: var(--primary);
  border-radius: 999px;
  padding: 2px 7px;
}
.theme-now-note { font-size: 12.5px; margin: -6px 0 12px; }
.theme-swatch { display: flex; gap: 3px; }
.theme-swatch i { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgb(0 0 0 / 0.14); }
.theme-pairs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
/* Dua kolom untuk pasangan font; satu kolom di layar sempit. */
.theme-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 14px; }
/* Bagian manual: label di barisnya sendiri, kotak warna di bawahnya. Sebelumnya
   input warna sebaris dengan teks label, sehingga label panjang (mis. "Aksen
   gelap (dipakai sebagai warna teks label kecil...)") bertumpuk dengan kotaknya. */
.theme-more { margin: 14px 0 4px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.theme-more > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; }
.theme-more > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.theme-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; margin-top: 10px; }
.theme-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.theme-field label { margin: 0; font-size: 12.5px; line-height: 1.35; }
.theme-field input[type="color"] { width: 100%; height: 44px; padding: 2px; border-radius: 10px; cursor: pointer; }

/* ---------- Video player (course) ---------- */
.video-frame {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
}
.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-frame video { object-fit: contain; }
/* Gerbang klik-untuk-putar: menutup chrome YouTube sampai member menekan
   Putar. Tombol asli (<button>) agar bisa dijangkau keyboard. */
.video-gate {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 100%; border: 0; cursor: pointer;
  background: rgb(8 10 14 / 0.55); color: #fff;
  font: 600 14px "Plus Jakarta Sans", system-ui, sans-serif;
}
.video-gate[hidden] { display: none; }
.video-gate:hover { background: rgb(8 10 14 / 0.45); }
.video-gate:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.video-gate-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground);
  font-size: 22px; padding-left: 4px;
}
.video-gate-text { opacity: 0.9; }

/* ---------- Podium leaderboard ---------- */
.podium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: end;
  max-width: 760px;
  margin: 18px 0;
}
.podium-card {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 18px 12px 14px;
  text-align: center;
}
.podium-card.p1 { padding-top: 26px; padding-bottom: 26px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.10); }
.podium-card.empty { visibility: hidden; }
.podium-rank { font-size: 30px; line-height: 1; }
.podium-name { font-weight: 700; margin-top: 8px; }
.podium-product {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted-foreground, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .podium { gap: 8px; }
  .podium-card { padding: 12px 8px 10px; }
  .podium-card.p1 { padding: 18px 8px 16px; }
  .podium-name { font-size: 14px; }
}

/* ---------- Gambar mockup produk (admin: form edit produk) ---------- */
/* Daftar gambar: thumbnail tetap proporsional, teks path boleh terpotong
   (bukan tombol), dan baris aksi boleh membungkus supaya di HP tombolnya tidak
   keluar dari kartu. Target sentuh semua tombol tetap >= 44px lewat .btn. */
.pm-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; }
.pm-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--secondary, #f9fafb);
}
.pm-thumb { display: block; grid-row: span 2; }
.pm-thumb img { display: block; width: 96px; height: 68px; object-fit: cover; border-radius: 8px; }
.pm-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.pm-meta .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-aksi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pm-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e5e7eb);
}

/* ---------- Kartu "Produk Saya" (member) dengan sampul produk ---------- */
.dl-card { padding: 0; overflow: hidden; }
.dl-cover { display: block; border-bottom: 1px solid var(--border, #e5e7eb); }
.dl-cover img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.dl-card .dl-body { padding: 16px; }
@media (max-width: 640px) {
  .pm-item { grid-template-columns: 72px minmax(0, 1fr); }
  .pm-thumb img { width: 72px; height: 54px; }
  .pm-aksi { gap: 8px; }
  .pm-aksi > form { flex: 1 1 auto; }
  .pm-aksi > form > .btn { width: 100%; }
  .dl-cover img { aspect-ratio: 16 / 9; }
}