/* ═══════════════════════════════════════════════════════════════════
   components.css — komponen bersama, gaya glassmorphism.
   Nilai warna HANYA var().

   Resep kaca yang dipakai berulang di sini:
     background       : var(--glass)      gradien tembus pandang
     backdrop-filter  : blur + saturate   membiaskan air di belakangnya
     border           : var(--glass-brd)  tepi kaca
     box-shadow inset : var(--glass-sheen) garis kilau di tepi atas
     ::before         : var(--glass-top)  pantulan cahaya dari permukaan
   ═══════════════════════════════════════════════════════════════════ */

/* ── Merek (logo + nama) ──────────────────────────────────────────
   Ditaruh di sini, BUKAN di public.css, karena dipakai tiga tempat:
   navbar laman public, kartu halaman masuk, dan kepala sidebar —
   dan dua yang terakhir tidak memuat public.css.

   min-width:0 + ellipsis membuat namanya menyusut sendiri, jadi merek
   tidak pernah menjebol navbar walau layarnya cuma 320px. */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; min-width: 0; flex: 0 1 auto;

  /* Merek itu tautan (ke beranda / ke dashboard), jadi tunduk pada
     aturan target sentuh 44px. Lambangnya sendiri tetap 36px —
     yang membesar cuma kotak yang bisa ditekan. */
  min-height: 44px;
}
.brand-mark {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px;
  background: var(--grad); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px var(--accent-glow), inset 0 1px 0 var(--glass-sheen);
}
.brand-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-md); font-weight: 700; letter-spacing: -.3px;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Tombol ── target sentuh minimal 44px ─────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: inherit; font-size: var(--fs-base); font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--tr), box-shadow var(--tr),
              background var(--tr), border-color var(--tr), color var(--tr);
}
/* 44px, bukan 38px: ini dipakai tombol "Mulai Gratis" di navbar, yang di HP
   adalah salah satu target sentuh terpenting di seluruh situs. Protokol 03
   §6.4 aturan 1 menetapkan minimum 44×44px. */
.btn-sm     { min-height: 44px; padding: 8px 16px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn-lg     { min-height: 52px; padding: 15px 30px; font-size: var(--fs-md); }
.btn-block  { width: 100%; }

.btn-primary {
  background: var(--grad); color: var(--on-accent);
  box-shadow: 0 8px 22px var(--accent-glow),
              inset 0 1px 0 var(--glass-sheen);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px var(--accent-glow),
              inset 0 1px 0 var(--glass-sheen);
}

/* Tombol hantu = kaca kosong */
.btn-ghost {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color: var(--glass-brd); color: var(--text);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}
.btn-ghost:hover {
  background: var(--glass-2);
  border-color: var(--glass-brd-hi);
  transform: translateY(-2px);
}

.btn-soft   { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Kartu kaca ───────────────────────────────────────────────────── */
.card {
  position: relative; overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  padding: var(--s6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-sheen);
  transition: transform var(--tr-slow), border-color var(--tr),
              box-shadow var(--tr-slow), background var(--tr);
}
/* pantulan cahaya permukaan di bagian atas kaca */
.card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; background: var(--glass-top);
}
.card:hover {
  transform: translateY(-4px);
  background: var(--glass-2);
  border-color: var(--glass-brd-hi);
  box-shadow: var(--glass-shadow-hi), inset 0 1px 0 var(--glass-sheen);
}
.card-icon {
  position: relative;
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: var(--s4);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 6px 18px var(--accent-glow);
}
.card h3 { position: relative; margin-bottom: var(--s2); }
.card p  { position: relative; font-size: var(--fs-sm); color: var(--text2); line-height: 1.7; }

/* ── Grid ──────────────────────────────────────────────────────────
   min() wajib: tanpa itu minmax(320px,1fr) menjebol layar 320px
   dan memunculkan scroll horizontal di HP kecil. */
.grid   { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-split {
  display: grid; gap: var(--s7); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}

/* ── Bagian ───────────────────────────────────────────────────────── */
.sec { position: relative; padding: var(--s11) 0; }
.sec-head { max-width: 660px; margin-bottom: var(--s8); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center p { margin-left: auto; margin-right: auto; }
.eyebrow {
  display: inline-block; margin-bottom: var(--s3);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent);
}

/* ── Form ─────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--s5); }
.field label {
  display: block; margin-bottom: 7px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text2);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.req { color: var(--danger); }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=url], input[type=number], input[type=date], input[type=file],
select, textarea {
  width: 100%; max-width: 100%; min-height: 48px; padding: 12px 15px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius); color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);   /* 16px: di bawah ini Safari iOS auto-zoom */
  box-shadow: inset 0 1px 0 var(--glass-sheen);
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
input:hover, select:hover, textarea:hover { border-color: var(--glass-brd-hi); }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--glass-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), inset 0 1px 0 var(--glass-sheen);
}
textarea { resize: vertical; min-height: 130px; }
::placeholder { color: var(--text3); }

/* Dropdown asli tidak tembus pandang di semua OS — beri dasar padat */
select { background-color: var(--bg2); }
select option { background: var(--bg2); color: var(--text); }

/* ── Pesan ────────────────────────────────────────────────────────── */
.alert {
  padding: 14px 17px; margin-bottom: var(--s5);
  border: 1px solid; border-radius: var(--radius); font-size: var(--fs-sm);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.alert-ok   { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.alert-err  { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.alert-info { background: var(--accent-soft);  border-color: var(--accent-line); color: var(--accent); }
.alert ul { margin: 6px 0 0 18px; }
/* Peringatan dengan ikon di kiri: ikon tidak ikut turun ke baris kedua. */
.alert-row { display: flex; align-items: flex-start; gap: 10px; }
.alert-row > svg { flex-shrink: 0; margin-top: 1px; }
.alert-row a { color: inherit; font-weight: 700; text-decoration: underline; }

.badge {
  display: inline-block; padding: 3px 11px; border-radius: 100px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-size: var(--fs-xs); font-weight: 600;
}

/* ── Tabel ────────────────────────────────────────────────────────── */
/* Batang gulir sengaja dibuat terlihat, bukan disembunyikan: di layar
   sentuh itu satu-satunya petunjuk bahwa tabelnya masih bisa digeser
   ke kanan. Tanpa itu pengguna mengira kolomnya memang terpotong. */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  padding-bottom: 2px;
}
.table-scroll::-webkit-scrollbar { height: 7px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 100px;
}
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent-line); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dtable th {
  padding: 13px 16px; text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text3); border-bottom: 1px solid var(--glass-brd);
}
.dtable td {
  padding: 13px 16px; white-space: nowrap;
  border-bottom: 1px solid var(--glass-brd);
  font-variant-numeric: tabular-nums;
}
.dtable tbody tr:last-child td { border-bottom: none; }
.dtable tbody tr { transition: background var(--tr); }
.dtable tbody tr:hover { background: var(--surface-2); }
.cell-sub { display: block; font-size: 11px; color: var(--text3); font-variant-numeric: normal; }

/* ── Accordion kaca ───────────────────────────────────────────────── */
.acc {
  position: relative; margin-bottom: var(--s3); overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-brd); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-sheen);
  transition: border-color var(--tr), background var(--tr);
}
.acc:hover { border-color: var(--glass-brd-hi); }
.acc[open] { background: var(--glass-2); border-color: var(--glass-brd-hi); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 17px 20px; min-height: 44px;
  font-size: var(--fs-base); font-weight: 600; cursor: pointer; list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: '+'; flex-shrink: 0;
  font-size: 22px; line-height: 1; color: var(--accent); transition: transform var(--tr);
}
.acc[open] summary::after { transform: rotate(45deg); }
.acc-body { padding: 0 20px 18px; font-size: var(--fs-sm); color: var(--text2); line-height: 1.75; }

/* ── Catatan peringatan ───────────────────────────────────────────── */
.note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; border-radius: var(--radius-sm); font-size: var(--fs-sm);
  background: var(--warning-soft); border: 1px solid var(--warning); color: var(--warning);
}
.note svg { margin-top: 2px; }

/* ── Daftar centang ───────────────────────────────────────────────── */
.ticks { list-style: none; display: grid; gap: var(--s3); max-width: 640px; }
.ticks li { display: flex; align-items: flex-start; gap: var(--s3); color: var(--text2); }
.ticks li svg { margin-top: 4px; color: var(--success); }

/* ── Pemisah "atau" ───────────────────────────────────────────────── */
.or-line {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s6) 0; font-size: var(--fs-sm); color: var(--text3);
}
.or-line::before, .or-line::after {
  content: ''; flex: 1; height: 1px; background: var(--glass-brd);
}

/* ── Keadaan kosong ───────────────────────────────────────────────── */
.empty {
  padding: var(--s11) var(--s6); text-align: center; color: var(--text3);
  background: var(--glass);
  border: 1px dashed var(--glass-brd-hi);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.empty svg { margin: 0 auto; color: var(--text3); }
.empty h2 { margin: var(--s4) 0 var(--s2); font-size: var(--fs-lg); color: var(--text); }
.empty p  { margin: 0 auto var(--s6); }

/* ── Kolom umpan anti-spam (honeypot) ─────────────────────────────
   Robot pengisi form mengisi SEMUA kolom yang ditemukannya, termasuk
   yang ini; manusia tidak, karena tidak terlihat. Kalau kolom ini
   terisi, kiriman diabaikan diam-diam.

   Ditaruh di berkas CSS, bukan style="" di dalam HTML. Alasannya:
   target CSP protokol ini adalah style-src TANPA 'unsafe-inline'.
   Begitu itu diberlakukan, semua atribut style dibuang browser — dan
   honeypot yang tadinya tersembunyi tiba-tiba muncul di tengah form
   sebagai kolom "Website" yang membingungkan pengunjung. */
.hp-field {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── Ikon tema ────────────────────────────────────────────────────── */
.ico-light { display: none; }
body.theme-light .ico-dark  { display: none; }
body.theme-light .ico-light { display: inline-flex; }

/* ── Perangkat tanpa dukungan backdrop-filter (Firefox lama, dsb.) ──
   Tanpa ini, kartu jadi nyaris tak terlihat karena latarnya transparan. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card, .acc, .empty, .btn-ghost,
  input[type=text], input[type=email], input[type=password], input[type=tel],
  input[type=url], input[type=number], input[type=date], select, textarea {
    background-color: var(--bg2);
  }
}