/* ==========================================================================
   Website Diklat RS Persahabatan — Design System
   Palette: Kemenkes Corporate University (BPPK / Bapelkes)
     Teal  #00B9AD   Lime #CDDC29   Biru #60C0D0   Abu #8E8E8E
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — skala diturunkan dari teal resmi #00B9AD (ada di --teal-500) */
  --teal-50:  #e6faf8;
  --teal-100: #c2f2ee;
  --teal-200: #8ce8e0;
  --teal-300: #4bd9ce;
  --teal-400: #17c9bc;
  --teal-500: #00b9ad;  /* warna utama Kemenkes */
  --teal-600: #00a094;
  --teal-700: #00847b;
  --teal-800: #006760;
  --teal-900: #004b46;

  /* Warna pendamping palet Kemenkes */
  --lime:      #cddc29;
  --lime-soft: #f2f7c9;
  --sky:       #60c0d0;
  --sky-soft:  #dcf0f4;
  --brand-gray:#8e8e8e;

  /* Neutral */
  --white:    #ffffff;
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Status */
  --success:     #16a34a;
  --success-bg:  #dcfce7;
  --warning:     #d97706;
  --warning-bg:  #fef3c7;
  --danger:      #dc2626;
  --danger-bg:   #fee2e2;
  --info:        #2563eb;
  --info-bg:     #dbeafe;

  /* Semantic */
  --primary:      var(--teal-500);   /* #00B9AD — isian tombol, ikon, aksen */
  --primary-dark: var(--teal-700);   /* teks tautan & hover (kontras AA di atas putih) */
  --primary-soft: var(--teal-50);
  --text:         var(--gray-800);
  --text-muted:   var(--gray-500);
  --border:       var(--gray-200);
  --bg:           var(--white);
  --bg-alt:       var(--gray-50);

  /* Layout */
  --container: 1200px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 2px 8px rgba(15, 23, 42, .07);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, .09);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, .12);

  /* Typography */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --header-h: 72px;

  /* Animate.css — tempo bawaannya 1s, terlalu lambat untuk reveal saat scroll.
     Berlaku hanya bila css/animate.min.css dimuat SEBELUM berkas ini. */
  --animate-duration: .7s;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Kata sangat panjang tanpa spasi (URL, email, kode transaksi) dipatahkan
     agar tidak memaksa halaman melebar di layar sempit. */
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; display: block; }
a { color: var(--primary-dark); text-decoration: none; }
a:hover { color: var(--teal-800); }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; color: var(--gray-900); letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--teal-300); outline-offset: 2px; border-radius: 4px; }

/* ---------- 3. Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.section   { padding: 72px 0; }
.section--alt { background: var(--bg-alt); }
.grid { display: grid; gap: 24px; }

/* PENTING — jangan dihapus.
   Item grid/flex bawaannya punya min-width:auto, artinya tidak boleh menyusut
   lebih kecil dari konten terlebar di dalamnya. Bila di dalamnya ada elemen
   yang sebetulnya bisa digeser sendiri (deretan tab, tabel lebar), lebar
   minimumnya justru "mendorong" kolom melebihi layar sehingga SELURUH halaman
   ikut bisa digeser mendatar — persis gejala "tidak responsif" di HP.
   min-width:0 mengembalikan kendali ke pembungkus yang punya overflow sendiri. */
.grid > *, .tiles > *, .steps > *, .gallery > *, .filter-bar > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 4. Section heading ---------- */
.section-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section-head .eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--primary); background: var(--teal-50);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.section-head h2 { margin-bottom: .4em; }
.section-head p { color: var(--text-muted); margin: 0; }
.section-head--left { margin-inline: 0; text-align: left; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius); border: 1px solid transparent;
  font-size: .95rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
  white-space: nowrap; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(0,185,173,.32); }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }
.btn--outline { background: transparent; color: var(--primary-dark); border-color: var(--teal-300); }
.btn--outline:hover { background: var(--teal-50); color: var(--primary-dark); }
.btn--ghost { background: var(--gray-100); color: var(--gray-700); }
.btn--ghost:hover { background: var(--gray-200); color: var(--gray-800); }
.btn--white { background: #fff; color: var(--primary-dark); }
.btn--white:hover { background: var(--teal-50); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #b91c1c; color: #fff; }
.btn--success { background: var(--success); color: #fff; }
.btn--success:hover { background: #15803d; color: #fff; }
.btn--sm { padding: 7px 14px; font-size: .85rem; border-radius: var(--radius-sm); }
.btn--lg { padding: 14px 30px; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff; color: var(--gray-600); cursor: pointer;
}
.btn-icon:hover { background: var(--gray-50); color: var(--primary-dark); border-color: var(--teal-300); }

/* ---------- 6. Badges & pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  background: var(--gray-100); color: var(--gray-600);
}
.badge--open    { background: var(--success-bg); color: #15803d; }
.badge--full    { background: var(--danger-bg);  color: #b91c1c; }
.badge--done    { background: var(--gray-200);   color: var(--gray-600); }
.badge--soon    { background: var(--warning-bg); color: #b45309; }
.badge--warn    { background: #fef3c7;           color: #92400e; }
.badge--info    { background: var(--info-bg);    color: #1d4ed8; }
.badge--teal    { background: var(--teal-100);   color: var(--teal-800); }
.badge--lime    { background: var(--lime-soft);  color: #5c6410; }
.badge--sky     { background: var(--sky-soft);   color: #17646f; }
.badge--pending { background: var(--warning-bg); color: #b45309; }
.badge--verified{ background: var(--success-bg); color: #15803d; }
.badge--rejected{ background: var(--danger-bg);  color: #b91c1c; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- 7. Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
/* overflow:hidden di atas memotong elemen absolute di dalam kartu (mis. menu
   dropdown). Pakai .card--menu pada kartu yang memuat dropdown. Aturan :has()
   di bawahnya menangkap kasus yang terlewat; peramban lama mengabaikannya. */
.card--menu { overflow: visible; }
.card:has(.dropdown__menu) { overflow: visible; }
.card__body { padding: 22px; }
.card__head {
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card__head h3 { margin: 0; font-size: 1.05rem; }
.card__foot { padding: 16px 22px; border-top: 1px solid var(--border); background: var(--gray-50); }

/* ---------- 8. Topbar ---------- */
.topbar { background: var(--teal-800); color: rgba(255,255,255,.9); font-size: .84rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; flex-wrap: wrap; }
.topbar a { color: rgba(255,255,255,.9); display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: #fff; }
.topbar__contact { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar__actions { display: flex; align-items: center; gap: 14px; }
.topbar__wa {
  background: #25d366; color: #06301a !important; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; font-size: .8rem;
}
.topbar__wa:hover { background: #1fb757; color: #06301a !important; }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; }
.lang-switch button {
  background: transparent; border: 0; color: rgba(255,255,255,.72);
  font-size: .82rem; font-weight: 600; cursor: pointer; padding: 2px 4px;
}
.lang-switch button.is-active, .lang-switch button:hover { color: #fff; text-decoration: underline; }
.lang-switch .sep { color: rgba(255,255,255,.35); }

/* ---------- 9. Header / navigation ---------- */
.header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.header.is-scrolled { box-shadow: var(--shadow); }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; }

/* ---------- Logo ----------
   logo.png      = lockup penuh (ikon + tulisan Kemenkes RS Persahabatan)
   logo-mark.png = ikon saja, persegi — dipakai di layar sempit dan sidebar
   --invert      = versi putih untuk latar gelap (footer, sidebar, halaman auth) */
.brand__logo { height: 42px; width: auto; flex: none; display: block; }
.brand__logo--mark { height: 40px; width: 40px; }
.brand__logo--invert { filter: brightness(0) invert(1); }
.brand__divider { flex: none; width: 1px; height: 30px; background: var(--border); }
.footer__brand .brand__divider,
.auth__aside .brand__divider { background: rgba(255,255,255,.28); }

/* Di layar sempit lockup penuh diganti ikon agar header tidak sesak */
.brand .brand__logo--mark { display: none; }

/* Nama unit TIDAK ditampilkan di header desktop.
   .container dibatasi 1200px, jadi ruang isi selalu 1160px berapa pun lebar
   layar. Logo (149) + nama unit (149) + 6 item navigasi (732) + Login/Daftar
   (182) + jarak (64) = 1276px — melebihi 1160px, sehingga navigasi melipat
   jadi dua baris. Nama unit ditampilkan lagi begitu navigasi berubah menjadi
   tombol hamburger di <=900px, karena ruangnya kembali lega. */
.header .brand__divider, .header .brand__text { display: none; }

/* Kotak berlabel "RSP" — sisa dari sebelum logo asli tersedia, disimpan
   sebagai cadangan bila berkas logo belum diunggah. */
.brand__mark {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0,185,173,.34);
}
.brand__text strong { display: block; font-size: 1.02rem; color: var(--gray-900); line-height: 1.2; }
.brand__text span { display: block; font-size: .78rem; color: var(--text-muted); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: .94rem;
  font-weight: 600; color: var(--gray-700); white-space: nowrap;
}
.nav a:hover { background: var(--teal-50); color: var(--primary-dark); }
.nav a.is-active { color: var(--primary-dark); background: var(--teal-50); }
/* Item navigasi dengan submenu */
.nav__group { position: relative; }
.nav__group > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-sm); font: inherit; font-size: .94rem;
  font-weight: 600; color: var(--gray-700); white-space: nowrap;
}
.nav__group > button:hover,
.nav__group.is-open > button { background: var(--teal-50); color: var(--primary-dark); }
.nav__group > button.is-active { background: var(--teal-50); color: var(--primary-dark); }
.nav__group .dropdown__menu { left: 0; right: auto; min-width: 232px; }

.header__cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; width: 42px; height: 42px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--gray-700); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--gray-700);
}
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }

/* ---------- 10. Hero / slider ---------- */
.hero { position: relative; background: var(--teal-900); color: #fff; overflow: hidden; }
/* Hero fixed ratio 24:10 (matching rekomendasi gambar 1920×800).
   Kalau admin upload sesuai spec, gambar fit sempurna tanpa crop.
   min/max: safety supaya tidak terlalu pendek di HP / kelewat tinggi di monitor lebar. */
.hero__slides {
  position: relative;
  aspect-ratio: 24 / 10;
  min-height: 320px;
  max-height: 800px;
}
.hero__slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
  display: flex; align-items: center; pointer-events: none;
}
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__slide::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(0,75,70,.95) 0%, rgba(0,132,123,.88) 45%, rgba(0,185,173,.55) 100%);
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Slide video: <video class="hero__bg"> memakai object-fit seperti gambar.
   Iframe YouTube tidak mengenal object-fit, jadi diskalakan manual agar menutup penuh. */
.hero__yt { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__yt iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;      /* 16:9 mengikuti lebar layar */
  min-width: 100%; min-height: 100%;  /* jaga agar tidak menyisakan celah */
  border: 0;
}
/* Di layar kecil YouTube latar dimatikan: autoplay sering diblokir, boros kuota,
   dan hasil skalanya kurang rapi. Gambar poster di bawahnya yang tampil. */
@media (max-width: 900px) { .hero__yt { display: none; } }

/* Penanda kecil bahwa slide berisi video */
.hero__badge-video {
  position: absolute; left: 20px; bottom: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(0,0,0,.45); color: #fff; font-size: .76rem; font-weight: 600;
  backdrop-filter: blur(4px);
}
.hero__inner { position: relative; padding: 80px 0; max-width: 660px; }
.hero__tag {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24); padding: 6px 14px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; margin-bottom: 18px;
}
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero p { color: rgba(255,255,255,.86); font-size: 1.06rem; margin-bottom: 28px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__dots { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: center; gap: 9px; z-index: 3; }
.hero__dots button {
  width: 32px; height: 4px; border-radius: 99px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.38); transition: background .2s;
}
.hero__dots button.is-active { background: #fff; }
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.hero__arrow:hover { background: rgba(255,255,255,.24); }
.hero__arrow--prev { left: 20px; } .hero__arrow--next { right: 20px; }

/* ---------- 11. Quick stats strip ---------- */
.stats { margin-top: -46px; position: relative; z-index: 5; }
.stats__grid {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
}
.stat { padding: 26px 22px; text-align: center; border-right: 1px solid var(--border); }
.stat:last-child { border-right: 0; }
.stat__icon {
  width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 12px;
  background: var(--teal-50); color: var(--primary); display: grid; place-items: center;
}
.stat__num { font-size: 2rem; font-weight: 800; color: var(--gray-900); line-height: 1.1; }
.stat__label { font-size: .87rem; color: var(--text-muted); }

/* ---------- 12. Training card ---------- */
.training-card { display: flex; flex-direction: column; height: 100%; transition: transform .18s ease, box-shadow .18s ease; }
.training-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.training-card__media { position: relative; aspect-ratio: 16/9; background: var(--teal-100); overflow: hidden; }
.training-card__media img { width: 100%; height: 100%; object-fit: cover; }
.training-card__media .badge { position: absolute; top: 12px; left: 12px; box-shadow: var(--shadow-sm); }
.training-card__mode {
  position: absolute; top: 12px; right: 12px; background: rgba(15,23,42,.72); color: #fff;
  padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700;
}
.training-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.training-card__cat { font-size: .76rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; }
.training-card__title { font-size: 1.06rem; margin: 6px 0 12px; }
.training-card__title a { color: var(--gray-900); }
.training-card__title a:hover { color: var(--primary-dark); }
.training-card__meta { display: grid; gap: 8px; font-size: .87rem; color: var(--gray-600); margin-bottom: 16px; }
.training-card__meta div { display: flex; align-items: center; gap: 8px; }
.training-card__meta svg { flex: none; color: var(--teal-500); }
.training-card__foot {
  margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.price { font-size: 1.12rem; font-weight: 800; color: var(--gray-900); }
.price small { display: block; font-size: .72rem; font-weight: 500; color: var(--text-muted); }
.price--free { color: var(--success); }

/* Quota bar */
.quota { margin-bottom: 14px; }
.quota__label { display: flex; justify-content: space-between; font-size: .78rem; color: var(--text-muted); margin-bottom: 5px; }
.quota__bar { height: 6px; border-radius: 99px; background: var(--gray-200); overflow: hidden; }
.quota__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--teal-400), var(--teal-600)); }
.quota__fill--warn { background: linear-gradient(90deg, #fbbf24, #d97706); }
.quota__fill--full { background: linear-gradient(90deg, #f87171, #dc2626); }

/* ---------- 13. Filter bar ---------- */
.filter-bar {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow-sm); display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 12px; align-items: end;
}
.view-switch { display: inline-flex; background: var(--gray-100); border-radius: var(--radius); padding: 4px; gap: 4px; }
.view-switch button {
  border: 0; background: transparent; padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 600; color: var(--gray-600); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.view-switch button.is-active { background: #fff; color: var(--primary-dark); box-shadow: var(--shadow-sm); }

/* ---------- 14. Forms ---------- */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: .88rem; font-weight: 600; color: var(--gray-700); margin-bottom: 7px; }
.form-label .req { color: var(--danger); }
.form-control {
  width: 100%; padding: 11px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius);
  background: #fff; font-size: .95rem; transition: border-color .16s, box-shadow .16s;
}
.form-control:focus { outline: 0; border-color: var(--teal-400); box-shadow: 0 0 0 3px rgba(0,185,173,.18); }
.form-control::placeholder { color: var(--gray-400); }
textarea.form-control { min-height: 120px; resize: vertical; }
select.form-control {
  appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.form-hint { font-size: .8rem; color: var(--text-muted); margin-top: 6px; }
.form-error { font-size: .8rem; color: var(--danger); margin-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--gray-700); cursor: pointer; }
.check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--primary); flex: none; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; background: var(--gray-300); border-radius: 99px;
  cursor: pointer; transition: background .18s;
}
.switch .slider::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: var(--shadow-sm);
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row strong { display: block; font-size: .92rem; font-weight: 600; }
.switch-row span { font-size: .82rem; color: var(--text-muted); }

/* File dropzone */
.dropzone {
  border: 2px dashed var(--teal-300); border-radius: var(--radius-lg); background: var(--teal-50);
  padding: 32px 20px; text-align: center; cursor: pointer; transition: background .18s, border-color .18s;
}
.dropzone:hover, .dropzone.is-dragover { background: var(--teal-100); border-color: var(--teal-500); }
.dropzone__icon { width: 48px; height: 48px; margin: 0 auto 12px; color: var(--primary); }
.dropzone strong { display: block; font-size: .96rem; color: var(--gray-800); }
.dropzone span { font-size: .82rem; color: var(--text-muted); }
.file-preview {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
}
.file-preview__thumb {
  width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--teal-50);
  color: var(--primary); display: grid; place-items: center; flex: none;
}
.file-preview__info { flex: 1; min-width: 0; }
.file-preview__info strong { display: block; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview__info span { font-size: .78rem; color: var(--text-muted); }

/* ---------- 15. Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 720px; }
.table th {
  text-align: left; font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gray-500); background: var(--gray-50);
  padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:hover { background: var(--teal-50); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table__actions { display: flex; gap: 6px; }
.table-title { font-weight: 600; color: var(--gray-900); }
.table-sub { font-size: .8rem; color: var(--text-muted); }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--teal-100); color: var(--teal-800);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex: none;
}
.avatar--lg { width: 72px; height: 72px; font-size: 1.4rem; }
.user-cell { display: flex; align-items: center; gap: 12px; }

/* ---------- 16. Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button {
  border: 0; background: transparent; padding: 12px 18px; font-size: .93rem; font-weight: 600;
  color: var(--gray-500); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button:hover { color: var(--primary-dark); }
.tabs button.is-active { color: var(--primary-dark); border-bottom-color: var(--primary); }
.tab-panel { display: none; padding-top: 28px; }
.tab-panel.is-active { display: block; }

/* ---------- 17. Accordion (FAQ) ---------- */
.accordion { display: grid; gap: 12px; }
.acc-item { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden; }
.acc-item.is-open { border-color: var(--teal-300); box-shadow: var(--shadow-sm); }
.acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; background: transparent; border: 0; cursor: pointer; text-align: left;
  font-size: .98rem; font-weight: 600; color: var(--gray-800);
}
.acc-head:hover { color: var(--primary-dark); }
.acc-head .chev { flex: none; transition: transform .2s; color: var(--primary); }
.acc-item.is-open .chev { transform: rotate(180deg); }
.acc-body { display: none; padding: 0 20px 20px; color: var(--gray-600); font-size: .94rem; }
.acc-item.is-open .acc-body { display: block; }

/* ---------- 18. Timeline / alur ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.step { text-align: center; position: relative; }
.step::after {
  content: ""; position: absolute; top: 26px; left: calc(50% + 32px); right: calc(-50% + 32px);
  height: 2px; background: repeating-linear-gradient(90deg, var(--teal-300) 0 6px, transparent 6px 12px);
}
.step:last-child::after { display: none; }
.step__num {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--teal-50); border: 2px solid var(--teal-300); color: var(--primary-dark);
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; position: relative; z-index: 1;
}
.step h4 { margin: 0 0 6px; font-size: 1rem; }
.step p { font-size: .87rem; color: var(--text-muted); margin: 0; }

/* Vertical timeline */
.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--teal-200); }
.timeline__item { position: relative; padding-bottom: 24px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: -28px; top: 6px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; border: 3px solid var(--teal-500);
}
.timeline__item.is-done::before { background: var(--teal-500); }
.timeline__time { font-size: .78rem; color: var(--text-muted); }
.timeline__item strong { display: block; font-size: .94rem; }

/* ---------- 19. Calendar ---------- */
.calendar { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.calendar__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.calendar__head h3 { margin: 0; font-size: 1.1rem; }
.calendar__nav { display: flex; gap: 8px; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar__dow {
  padding: 10px 6px; text-align: center; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500);
  background: var(--gray-50); border-bottom: 1px solid var(--border);
}
.calendar__day {
  min-height: 104px; padding: 8px; border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border); font-size: .82rem;
}
.calendar__day:nth-child(7n) { border-right: 0; }
.calendar__day.is-muted { background: var(--gray-50); color: var(--gray-400); }
.calendar__day.is-today .calendar__date {
  background: var(--primary); color: #fff; border-radius: 50%;
  width: 24px; height: 24px; display: grid; place-items: center;
}
.calendar__date { font-weight: 700; color: var(--gray-700); margin-bottom: 5px; }
.cal-event {
  display: block; font-size: .72rem; font-weight: 600; padding: 3px 6px; border-radius: 4px;
  margin-bottom: 3px; background: var(--teal-100); color: var(--teal-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-event--full  { background: var(--danger-bg); color: #b91c1c; }
.cal-event--soon  { background: var(--warning-bg); color: #b45309; }
.cal-event:hover { filter: brightness(.95); }
.calendar__legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-muted); }
.calendar__legend span { display: inline-flex; align-items: center; gap: 7px; }
.calendar__legend i { width: 11px; height: 11px; border-radius: 3px; display: block; }

/* ---------- 20. Gallery & lightbox ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery--2 { grid-template-columns: repeat(2, 1fr); }
.gallery__item {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden;
  cursor: pointer; background: var(--gray-100);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after {
  content: ""; position: absolute; inset: 0; background: rgba(0,150,140,.36);
  opacity: 0; transition: opacity .25s;
}
.gallery__item:hover::after { opacity: 1; }
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(15,23,42,.92);
  display: none; align-items: center; justify-content: center; padding: 40px 20px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1000px, 92vw); max-height: 84vh; border-radius: var(--radius); }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.15); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,.3); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__caption { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-size: .9rem; }

/* Video */
.video-frame {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--gray-900); box-shadow: var(--shadow-md);
}
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 21. News ---------- */
.news-card { display: flex; flex-direction: column; height: 100%; }
.news-card__media { aspect-ratio: 16/10; background: var(--gray-100); overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.news-card__date { font-size: .78rem; color: var(--text-muted); display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.news-card__title { font-size: 1.02rem; margin: 0 0 10px; }
.news-card__title a { color: var(--gray-900); }
.news-card__title a:hover { color: var(--primary-dark); }
.news-card p { font-size: .88rem; color: var(--gray-600); margin: 0 0 14px; }
.news-card .more { margin-top: auto; font-size: .86rem; font-weight: 700; color: var(--primary-dark); display: inline-flex; align-items: center; gap: 6px; }

/* ---------- 22. Testimonials ---------- */
.testi { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; height: 100%; }
.testi__stars { color: #f59e0b; margin-bottom: 12px; display: flex; gap: 2px; }
.testi p { font-size: .95rem; color: var(--gray-700); font-style: italic; }
.testi__person { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.testi__person strong { display: block; font-size: .92rem; }
.testi__person span { font-size: .8rem; color: var(--text-muted); }

/* ---------- 23. Page hero (inner pages) ---------- */
.page-hero {
  background: linear-gradient(120deg, var(--teal-800), var(--teal-600));
  color: #fff; padding: 56px 0; position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px;
  border-radius: 50%; background: rgba(255,255,255,.07);
}
.page-hero h1 { color: #fff; margin-bottom: 8px; }
.page-hero p { color: rgba(255,255,255,.85); margin: 0; max-width: 640px; }
.breadcrumb { display: flex; gap: 8px; font-size: .84rem; color: rgba(255,255,255,.75); margin-bottom: 14px; flex-wrap: wrap; }
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb a:hover { color: #fff; }

/* ---------- 24. Footer ---------- */
.footer { background: var(--gray-900); color: rgba(255,255,255,.7); padding: 56px 0 0; font-size: .9rem; }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: 16px; }
.footer a { color: rgba(255,255,255,.7); }
.footer a:hover { color: var(--teal-300); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; padding-bottom: 40px; }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer__brand .brand__text strong { color: #fff; }
.footer__brand .brand__text span { color: rgba(255,255,255,.6); }
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact svg { flex: none; margin-top: 3px; color: var(--teal-400); }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a {
  width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.08);
  display: grid; place-items: center; color: rgba(255,255,255,.8);
}
.footer__social a:hover { background: var(--primary); color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; font-size: .84rem;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------- 25. Floating WhatsApp ---------- */
.fab-wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px;
  background: #25d366; color: #06301a; border-radius: 999px; font-weight: 700; font-size: .92rem;
  box-shadow: 0 10px 26px rgba(37,211,102,.42);
}
.fab-wa:hover { background: #1fb757; color: #06301a; }
.fab-wa svg { flex: none; }
.fab-wa__label { display: inline; }

/* ---------- 26. Alerts ---------- */
.alert {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius);
  font-size: .9rem; border: 1px solid transparent; margin-bottom: 18px;
}
.alert svg { flex: none; margin-top: 2px; }
.alert strong { display: block; }
.alert--info    { background: var(--info-bg);    border-color: #bfdbfe; color: #1e40af; }
.alert--success { background: var(--success-bg); border-color: #bbf7d0; color: #166534; }
.alert--warning { background: var(--warning-bg); border-color: #fde68a; color: #92400e; }
.alert--danger  { background: var(--danger-bg);  border-color: #fecaca; color: #991b1b; }

/* ---------- 27. Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 250; background: rgba(15,23,42,.55);
  display: none; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto;
}
.modal.is-open { display: flex; }
.modal__dialog {
  background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 640px;
  box-shadow: var(--shadow-lg); overflow: hidden; animation: modalIn .2s ease;
}
.modal__dialog--lg { max-width: 900px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.modal__head {
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.modal__head h3 { margin: 0; font-size: 1.1rem; }
.modal__body { padding: 24px; }
.modal__foot { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--gray-50); }

/* ---------- 28. Auth pages ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth__aside {
  background: linear-gradient(150deg, var(--teal-800), var(--teal-600));
  color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth__aside::after {
  content: ""; position: absolute; right: -80px; bottom: -80px; width: 340px; height: 340px;
  border-radius: 50%; background: rgba(255,255,255,.08);
}
.auth__aside h2 { color: #fff; font-size: 1.9rem; }
.auth__aside p { color: rgba(255,255,255,.85); }
.auth__points { list-style: none; display: grid; gap: 14px; margin-top: 26px; position: relative; }
.auth__points li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: rgba(255,255,255,.9); }
.auth__points svg { flex: none; margin-top: 3px; color: var(--teal-300); }
.auth__main { display: grid; place-items: center; padding: 40px 20px; background: var(--bg-alt); }
.auth__box { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); }
/* Segmented switch Masuk / Daftar */
.auth-switch {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 24px;
  background: var(--gray-100); border-radius: var(--radius);
}
.auth-switch button {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  padding: 11px 16px; border-radius: var(--radius-sm);
  font-size: .95rem; font-weight: 600; color: var(--gray-600);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.auth-switch button:hover { color: var(--primary-dark); }
.auth-switch button.is-active { background: #fff; color: var(--primary-dark); box-shadow: var(--shadow-sm); }

.captcha {
  display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--gray-50);
}
.captcha__code {
  font-family: "Courier New", monospace; font-size: 1.35rem; font-weight: 700; letter-spacing: .3em;
  background: linear-gradient(105deg, var(--teal-100), var(--teal-200)); padding: 8px 16px;
  border-radius: var(--radius-sm); color: var(--teal-900); user-select: none; text-decoration: line-through;
}
.divider { display: flex; align-items: center; gap: 14px; color: var(--gray-400); font-size: .82rem; margin: 22px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- 29. Payment ---------- */
.pay-detail { display: grid; gap: 0; }
.pay-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px dashed var(--border); font-size: .93rem; }
.pay-row:last-child { border-bottom: 0; }
.pay-row span { color: var(--text-muted); }
.pay-row strong { text-align: right; color: var(--gray-900); }
.pay-total { background: var(--teal-50); margin: 12px -22px -22px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; }
.pay-total span { font-size: .9rem; color: var(--gray-700); }
.pay-total strong { font-size: 1.5rem; color: var(--teal-800); }
.copy-field {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--gray-50); font-family: "Courier New", monospace;
  font-size: 1.05rem; font-weight: 700; color: var(--gray-900); justify-content: space-between;
}
.countdown {
  display: inline-flex; gap: 8px; align-items: center; font-variant-numeric: tabular-nums;
  font-weight: 800; color: var(--danger); font-size: 1.05rem;
}
.bank-card {
  display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff;
}
.bank-card__logo {
  width: 54px; height: 38px; border-radius: 6px; background: var(--teal-800); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .75rem; flex: none;
}

/* ---------- 30. Utilities: empty state, pagination, chips ---------- */
.empty-state { text-align: center; padding: 56px 20px; color: var(--text-muted); }
.empty-state svg { color: var(--gray-300); margin: 0 auto 16px; }
.empty-state h3 { color: var(--gray-700); }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-size: .88rem; font-weight: 600; color: var(--gray-600);
}
.pagination a:hover { border-color: var(--teal-300); background: var(--teal-50); color: var(--primary-dark); }
.pagination .is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff;
  font-size: .85rem; font-weight: 600; color: var(--gray-600); cursor: pointer;
}
.chip:hover { border-color: var(--teal-300); color: var(--primary-dark); }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

.info-list { list-style: none; display: grid; gap: 14px; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; }
.info-list .ico {
  width: 38px; height: 38px; border-radius: 10px; background: var(--teal-50); color: var(--primary);
  display: grid; place-items: center; flex: none;
}
.info-list strong { display: block; font-size: .9rem; }
.info-list span { font-size: .88rem; color: var(--text-muted); }

.def-list { display: grid; gap: 0; }
.def-list__row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: .93rem; }
/* Varian lebar label. WAJIB memakai kelas, bukan style inline — style inline
   mengalahkan media query sehingga barisnya tidak ikut menumpuk di layar kecil. */
.def-list__row--sm    { grid-template-columns: 120px 1fr; }
.def-list__row--md    { grid-template-columns: 140px 1fr; }
.def-list__row--split { grid-template-columns: 1fr auto; }
.def-list__row:last-child { border-bottom: 0; }
.def-list__row dt { color: var(--text-muted); }
.def-list__row dd { margin: 0; font-weight: 600; color: var(--gray-800); }

.doc-link {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff; transition: border-color .16s, background .16s;
}
.doc-link:hover { border-color: var(--teal-300); background: var(--teal-50); }
.doc-link__ico { width: 38px; height: 38px; border-radius: 9px; background: var(--danger-bg); color: var(--danger); display: grid; place-items: center; flex: none; }
.doc-link strong { display: block; font-size: .9rem; color: var(--gray-800); }
.doc-link span { font-size: .78rem; color: var(--text-muted); }

.rating { display: flex; gap: 8px; flex-wrap: wrap; }
.rating input { position: absolute; opacity: 0; }
.rating label {
  padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .86rem; font-weight: 600; color: var(--gray-600); cursor: pointer; background: #fff;
}
.rating input:checked + label { background: var(--primary); border-color: var(--primary); color: #fff; }
.rating label:hover { border-color: var(--teal-400); }

.sticky-side { position: sticky; top: calc(var(--header-h) + 20px); }

/* ---------- Dropdown ---------- */
.dropdown { position: relative; }
.dropdown__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 6px; display: none; min-width: 220px;
}
/* Ditarget lewat atribut, bukan kelas .dropdown — karena JS menambahkan
   .is-open ke elemen [data-dropdown], yang di navigasi memakai kelas
   .nav__group. Memakai `.dropdown.is-open` membuat submenu navigasi
   tidak pernah terbuka di tampilan desktop. */
[data-dropdown].is-open .dropdown__menu { display: block; }
.dropdown__menu a, .dropdown__menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; background: transparent; border-radius: var(--radius-sm);
  font-size: .89rem; font-weight: 500; color: var(--gray-700); text-align: left; cursor: pointer;
}
.dropdown__menu a:hover, .dropdown__menu button:hover { background: var(--teal-50); color: var(--primary-dark); }
.dropdown__menu svg { flex: none; color: var(--primary); }
.dropdown__menu .sep { height: 1px; background: var(--border); margin: 5px 0; }
[data-dropdown] [data-dropdown-toggle] .chev { transition: transform .18s; }
[data-dropdown].is-open [data-dropdown-toggle] .chev { transform: rotate(180deg); }

/* ---------- Halaman error (404) ---------- */
.error-page { text-align: center; padding: 80px 0 90px; }
.error-page__code {
  font-size: clamp(5rem, 18vw, 9.5rem); font-weight: 800; line-height: 1;
  letter-spacing: -.04em; margin: 0 0 8px;
  background: linear-gradient(120deg, var(--teal-700), var(--teal-400), var(--lime));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-page h1 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
.error-page p { color: var(--text-muted); max-width: 560px; margin-inline: auto; }
.error-page__links {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 780px; margin: 40px auto 0; text-align: left;
}
.error-page__links a {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
  font-size: .9rem; font-weight: 600; color: var(--gray-700);
  transition: border-color .16s, background .16s, transform .16s;
}
.error-page__links a:hover { border-color: var(--teal-300); background: var(--teal-50); color: var(--primary-dark); transform: translateY(-2px); }
.error-page__links svg { flex: none; color: var(--primary); }
@media (max-width: 900px) { .error-page__links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .error-page__links { grid-template-columns: 1fr; } }

/* ---------- 31. Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
}

@media (max-width: 900px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--border); padding: 12px 20px 20px;
    box-shadow: var(--shadow-md); display: none; gap: 2px; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 12px; }
  .nav-toggle { display: inline-flex; }
  .brand__logo { height: 36px; }
  /* Navigasi sudah jadi tombol hamburger — ruang kembali lega,
     nama unit ditampilkan lagi. */
  .header .brand__divider, .header .brand__text { display: block; }

  /* Submenu di layar kecil: tampil menempel, bukan mengambang */
  .nav__group { width: 100%; }
  .nav__group > button { width: 100%; justify-content: space-between; padding: 13px 12px; }
  .nav__group .dropdown__menu {
    position: static; display: none; box-shadow: none; border: 0; padding: 0;
    margin: 2px 0 8px 12px; border-left: 2px solid var(--teal-200); min-width: 0;
  }
  .nav__group.is-open .dropdown__menu { display: block; }
  .nav__group .dropdown__menu a { padding: 11px 14px; }
  .header__cta .btn--outline { display: none; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .step:nth-child(2)::after { display: none; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .hero__slides { min-height: 240px; max-height: 480px; }
  .hero__arrow { display: none; }
}

@media (max-width: 640px) {
  .brand .brand__logo--full { display: none; }
  .brand .brand__logo--mark { display: block; height: 36px; width: 36px; }
  /* Harus ikut diawali .header agar mengalahkan aturan tampil di blok <=900px */
  .header .brand__divider { display: none; }
  .brand { gap: 8px; }
  .brand__text strong { font-size: .95rem; }

  .section { padding: 48px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .topbar__contact { display: none; }
  .topbar .container { justify-content: center; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .stats { margin-top: 0; padding-top: 32px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .fab-wa__label { display: none; }
  .fab-wa { padding: 14px; right: 16px; bottom: 16px; }
  .def-list__row { grid-template-columns: 1fr; gap: 2px; }
  .calendar__day { min-height: 76px; padding: 5px; }
  .cal-event { font-size: .62rem; padding: 2px 4px; }
  .auth__box { padding: 24px; }
  .hero__inner { padding: 60px 0; }
  .pay-total strong { font-size: 1.25rem; }
}

/* Ponsel sangat sempit: nama unit disembunyikan agar tombol Daftar dan
   hamburger tetap muat. Ikon logo tetap tampil. */
@media (max-width: 400px) {
  .header .brand__text { display: none; }
}

@media print {
  .topbar, .header, .footer, .fab-wa, .btn { display: none !important; }
}