/* =========================================================================
   BakuBaik — Sistem Desain "Laut Dalam" · v3
   Palet diturunkan dari logo organisasi (navy #023675 → aqua #07B9C8).

   Yang berubah di v3 dan alasannya — semuanya bisa diperiksa ulang:
   · Warna teks yang gagal kontras WCAG AA diperbaiki. Angka rasionya
     ditulis di sebelah tiap token supaya tidak diubah tanpa sadar.
   · Huruf disajikan sendiri (self-hosted woff2, 41 KB) alih-alih dari
     Google Fonts. Menghapus 3 perjalanan jaringan sebelum halaman tergambar
     — di 3G Sultra itu selisih detik, bukan milidetik.
   · Sasaran sentuh dinaikkan ke 44 px pada perangkat sentuh saja; kerapatan
     khas aplikasi kerja tetap dipertahankan di layar besar.
   · Kolom isian 16 px di ponsel. Di bawah 16 px, Safari iOS memperbesar
     halaman setiap kali kolom disentuh dan tidak mengembalikannya.
   · Mode gelap mengikuti setelan sistem.
   ========================================================================= */

/* ---------- 0. Huruf ----------
   Tiga berkas, dua bobot. Bobot 400 dan 500 sama-sama dilayani Medium,
   600 dan 700 oleh Bold — sistem dua bobot lebih disiplin daripada empat,
   dan Medium terbaca lebih baik daripada Regular pada ukuran kecil di layar
   ponsel murah. Angka & nomor anggota memakai huruf mono bawaan sistem:
   nol berkas untuk diunduh. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-Bold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}

/* ---------- 1. Token ---------- */
:root {
  /* Netral — dasar dingin, bukan abu-abu netral, supaya menyatu dengan navy */
  --paper:        #F4F7FB;
  --surface:      #FFFFFF;
  --surface-2:    #F8FBFD;
  --line:         #E1E9F2;
  --line-strong:  #CBD8E7;

  --ink:          #0A1F3C;   /* 15.9:1 pada surface */
  --ink-2:        #33507A;   /*  8.2:1 */
  --muted:        #5C748F;   /*  4.8:1 — ambang AA teks kecil */
  --faint:        #5F778F;   /*  4.6:1 — dulu #8CA0B8 yang hanya 2.7:1 */

  /* Merek — langsung dari logo */
  --navy-900:     #022A5E;
  --navy:         #04478E;   /*  9.1:1 pada putih — dipakai untuk tautan */
  --navy-600:     #0567B1;
  --sea:          #0686C8;   /*  4.0:1 — HANYA ikon & garis, tidak untuk teks */
  --aqua:         #07B9C8;
  --foam:         #9BDCE7;
  --foam-soft:    #E8F5F9;
  --navy-soft:    #E7EFF9;

  /* Aksen hangat — dipakai hemat: hanya ajakan bertindak & sorotan.
     Dua nilai, sengaja dipisah:
     · --senja       hanya untuk bidang & titik, TIDAK PERNAH menaungi teks
                     putih (putih di atasnya cuma 2.8:1)
     · --senja-fill  versi yang cukup gelap untuk menaungi teks putih (4.7:1) */
  --senja:        #FF6B4A;
  --senja-fill:   #D33C17;
  --senja-ink:    #9E3319;   /*  6.3:1 pada senja-soft */
  --senja-soft:   #FFEDE8;
  --amber:        #E08A00;
  --amber-soft:   #FFF4DF;

  /* Semantik — nilai teks digelapkan agar lolos AA di atas bidang lunaknya */
  --ok:           #0B7350;   /* 5.2:1 pada ok-soft */
  --ok-soft:      #E3F5EE;
  --warn:         #8A5200;   /* 5.9:1 pada warn-soft */
  --warn-soft:    #FFF4DF;
  --danger:       #C62B45;   /* 4.7:1 pada danger-soft */
  --danger-soft:  #FCE9EC;

  /* Warna aksen aktif — dipertukarkan oleh nada halaman */
  --accent:       var(--navy);
  --accent-ink:   var(--navy);
  --accent-soft:  var(--navy-soft);
  --cta:          var(--senja-fill);
  --cta-ink:      #FFFFFF;
  --tautan:       var(--navy);

  /* Bentuk & jarak */
  --r-xs: 6px;  --r-sm: 8px;  --r: 10px;  --r-lg: 14px;  --r-full: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  --topbar-h: 56px;
  --bottomnav-h: 62px;
  --sentuh: 36px;            /* tinggi kendali; jadi 44px pada perangkat sentuh */
  --isian-teks: 16px;        /* ukuran huruf kolom isian; 14px di layar besar */

  /* Bayangan tipis — kredibilitas datang dari garis, bukan dari mengambang */
  --sh-1: 0 1px 2px rgba(10,31,60,.06);
  --sh-2: 0 2px 8px rgba(10,31,60,.07);
  --sh-3: 0 12px 28px -8px rgba(10,31,60,.18);

  --font-display: 'Archivo', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', 'Consolas', monospace;
}

/* Perangkat sentuh: kendali dibesarkan, kerapatan dikorbankan.
   Dipisah lewat `pointer: coarse` — bukan lewat lebar layar — karena yang
   menentukan adalah jari, bukan ukuran jendela. */
@media (pointer: coarse) {
  :root { --sentuh: 44px; }
}
@media (min-width: 1024px) {
  :root { --isian-teks: 14px; }
}

/* Nada "Amanah" — halaman uang, verifikasi, legalitas.
   Aksen hangat dicabut total: tidak ada koral, tidak ada gradasi. */
[data-tone="amanah"] {
  --accent:      var(--navy);
  --accent-soft: var(--navy-soft);
  --cta:         var(--navy);
  --cta-ink:     #FFFFFF;
  --paper:       #F5F7FA;
}

/* ---------- 1b. Mode gelap ----------
   Mengikuti setelan sistem. Bukan sekadar warna dibalik: bidang dinaikkan
   dengan abu kebiruan agar kartu tetap terbaca sebagai lapisan, dan aksen
   hangat diredam supaya tidak menyala di ruang gelap. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #081524;
    --surface:     #0E1F33;
    --surface-2:   #142942;
    --line:        #1E3853;
    --line-strong: #2B4A69;

    --ink:         #E6EEF7;   /* 14.9:1 */
    --ink-2:       #C2D4E6;
    --muted:       #A7BDD4;   /*  9.1:1 */
    --faint:       #8AA3BE;   /*  6.7:1 */

    --navy:        #7FB6E8;   /* tautan harus lebih terang di latar gelap */
    --navy-soft:   #16304B;
    --foam-soft:   #102F38;
    --sea:         #4FA9DC;
    --tautan:      #7FB6E8;

    --senja:       #FF8A6E;
    --senja-fill:  #E0552C;
    --senja-ink:   #FFB49C;
    --senja-soft:  #35190F;

    --ok:          #5FD3A4;  --ok-soft:     #0D2E22;
    --warn:        #E5B25C;  --warn-soft:   #33260E;
    --danger:      #FF8A9C;  --danger-soft: #34141C;
    --amber-soft:  #33260E;

    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 2px 8px rgba(0,0,0,.45);
    --sh-3: 0 12px 28px -8px rgba(0,0,0,.6);
  }
  [data-tone="amanah"] { --paper: #071322; --cta: #2E6FB5; }
  /* Foto diredam sedikit supaya gambar terang tidak menyilaukan di gelap */
  .reel .gbr, .pos .lampiran img { filter: brightness(.9); }
}

/* ---------- 2. Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) { body { font-size: 14.5px; } }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
h1 { font-size: 25px; } h2 { font-size: 18px; } h3 { font-size: 15.5px; } h4 { font-size: 13.5px; }
p { margin: 0 0 var(--s-3); }
a { color: var(--tautan); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

/* Cincin fokus. Dua lapis — garis gelap di dalam, halo terang di luar —
   supaya tetap terlihat baik di bidang putih maupun di bidang navy. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-xs);
  box-shadow: 0 0 0 4px rgba(255,255,255,.9);
}
.tnavlink[aria-current="page"]:focus-visible,
.bottomnav a:focus-visible,
.drawer-grup a[aria-current="page"]:focus-visible {
  outline-color: #fff; box-shadow: 0 0 0 4px rgba(4,71,142,.9);
}

/* Lompat ke isi — tautan pertama pada halaman, hanya muncul saat difokuskan.
   Tanpa ini pengguna papan ketik harus melewati seluruh menu di tiap halaman. */
.lompat {
  position: absolute; left: 8px; top: -64px; z-index: 200;
  background: var(--navy); color: #fff; padding: 11px 16px;
  border-radius: var(--r-sm); font-weight: 650; font-size: 14px;
  transition: top .12s ease;
}
.lompat:focus { top: 8px; text-decoration: none; }

.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -.02em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tiny { font-size: 12px; }
.sm { font-size: 13.5px; }
.strong { font-weight: 650; }
.num { font-family: var(--font-mono); font-weight: 500; }
.row { display: flex; align-items: center; gap: var(--s-2); }
.row.wrap { flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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;
}

/* ---------- 3. Kerangka aplikasi ---------- */
.appshell { min-height: 100dvh; display: flex; flex-direction: column; }
.content  { padding: var(--s-5) var(--s-6) var(--s-8); max-width: 1560px; width: 100%; margin: 0 auto; }

/* Dua kolom: lini masa + rel yang menempel */
.duacol { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: var(--s-5); align-items: start; }
.rail   { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }

.avatar {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-sm);
  background: linear-gradient(140deg, var(--navy-600), var(--aqua));
  color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; font-family: var(--font-display); letter-spacing: .02em;
}
.avatar.lg { width: 52px; height: 52px; font-size: 17px; border-radius: var(--r); }
.avatar.xs { width: 26px; height: 26px; font-size: 10.5px; border-radius: var(--r-xs); }

.iconbtn {
  width: var(--sentuh); height: var(--sentuh); display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2); cursor: pointer; position: relative;
}
.iconbtn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.iconbtn .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--senja); border: 1.5px solid var(--surface); }

.search { flex: 1; max-width: 420px; position: relative; }
.search input {
  width: 100%; height: var(--sentuh); padding: 0 12px 0 36px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); font: inherit; font-size: var(--isian-teks); color: var(--ink);
}
.search input::placeholder { color: var(--faint); }
.search input:focus { background: var(--surface); border-color: var(--sea); outline: none; box-shadow: 0 0 0 3px rgba(6,134,200,.2); }
.search .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--faint); }

/* ---------- 4. Kepala halaman + tanda tangan "garis air" ---------- */
.pagehead { margin-bottom: var(--s-5); }
.pagehead .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 5px;
}
.pagehead h1 { font-size: clamp(23px, 4.6vw, 27px); }
.pagehead .desc { color: var(--muted); font-size: 14px; margin-top: 6px; max-width: 68ch; }

/* Garis air: motif ombak + denyut dari logo.
   Satu-satunya elemen dekoratif yang dibiarkan hidup — dan ia membawa
   keterangan, bukan hiasan: pada halaman bernada "amanah" denyutnya
   diratakan menjadi garis tenang. Uang tidak berdenyut. */
.waterline { display: block; width: 100%; height: 14px; margin: var(--s-4) 0 0; overflow: visible; }
.waterline path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.waterline .wave  { stroke: var(--foam); }
.waterline .pulse { stroke: var(--aqua); }
.waterline .spark { stroke: var(--cta); }
[data-tone="amanah"] .waterline .pulse { stroke: var(--navy-600); }
[data-tone="amanah"] .waterline .spark { display: none; }

/* Garis digambar sekali saat halaman terbuka. Satu gerakan per halaman —
   cukup untuk terasa hidup, tidak cukup untuk mengganggu. */
@media (prefers-reduced-motion: no-preference) {
  .waterline .pulse {
    stroke-dasharray: 240; stroke-dashoffset: 240;
    animation: garis-air 1.1s cubic-bezier(.2,.7,.3,1) .15s forwards;
  }
}
@keyframes garis-air { to { stroke-dashoffset: 0; } }

/* ---------- 5. Kartu & panel ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card > .hd {
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  flex-wrap: wrap;
}
.card > .bd { padding: var(--s-5); }
.card > .bd.tight { padding: var(--s-4); }
.card > .ft { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }

.grid { display: grid; gap: var(--s-4); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.main { grid-template-columns: minmax(0,1fr) 340px; align-items: start; }

/* Kartu angka. Angka dibuat lebih kecil dari judul halaman — sebelumnya
   27px melawan 25px, sehingga statistik terbaca lebih penting daripada
   nama halamannya sendiri. */
.stat { padding: var(--s-4); }
.stat .k { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.stat .v { font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; line-height: 1.15; }
.stat .d { font-size: 12px; color: var(--muted); margin-top: 3px; }
.stat .d.up { color: var(--ok); } .stat .d.down { color: var(--danger); }

/* ---------- 6. Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--sentuh); padding: 0 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .13s ease, border-color .13s ease, transform .08s ease;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* Tombol utama. Isian memakai --cta (4.7:1 dengan putih), bukan --senja
   yang hanya 2.8:1 — teks putih di atas koral terang praktis tak terbaca
   di bawah sinar matahari, dan tombol inilah yang paling sering dipakai. */
.btn.primary { background: var(--cta); border-color: transparent; color: var(--cta-ink); }
.btn.primary:hover { filter: brightness(.92); }
.btn.navy { background: var(--navy); border-color: transparent; color: #fff; }
.btn.navy:hover { background: var(--navy-900); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 16%, var(--danger-soft)); }
/* Ukuran kecil tetap tidak boleh turun di bawah ambang sentuh */
.btn.s { min-height: max(30px, calc(var(--sentuh) - 8px)); padding: 0 12px; font-size: 13px; }
.btn.lg { min-height: max(44px, var(--sentuh)); padding: 0 22px; font-size: 15.5px; }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .ico { width: 16px; height: 16px; flex: none; }

/* <summary> yang dibentuk sebagai tombol — hilangkan segitiga bawaan peramban */
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
summary.btn::marker { content: ''; }

/* ---------- 7. Label status ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 22px; padding: 1px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.pill.sea    { background: var(--navy-soft); color: var(--navy); border-color: transparent; }
.pill.aqua   { background: var(--foam-soft); color: #05707C; border-color: transparent; }
.pill.ok     { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill.warn   { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.pill.cta    { background: var(--senja-soft); color: var(--senja-ink); border-color: transparent; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
@media (prefers-color-scheme: dark) { .pill.aqua { color: var(--foam); } }

.tag-status { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }

/* =========================================================================
   7b. Penanda data contoh
   Angka yang belum nyata TIDAK BOLEH tampil sama persis dengan angka nyata.
   Untuk organisasi yang menjanjikan "kas terbuka, semua tercatat", saldo
   karangan yang bergaya identik dengan saldo sungguhan bukan sekadar cacat
   tampilan — itu merusak satu-satunya hal yang sedang dijual.
   ========================================================================= */
.contoh { position: relative; }
.contoh::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-radius: inherit;
  /* Nilai cadangan lebih dulu: peramban lama membuang baris color-mix di
     bawahnya, dan arsiran ini tidak boleh hilang diam-diam. */
  background: repeating-linear-gradient(
    -45deg, transparent 0 9px, rgba(180,120,0,.10) 9px 18px);
  background: repeating-linear-gradient(
    -45deg, transparent 0 9px,
    color-mix(in srgb, var(--warn) 10%, transparent) 9px 18px);
}
.contoh > * { position: relative; z-index: 1; }
.contoh-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--warn); background: var(--warn-soft);
  border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: var(--r-xs); padding: 2px 7px;
}
.contoh .stat .v, .contoh .angka .a .v { color: var(--muted); }

/* ---------- 8. Daftar & tabel ---------- */
.list { display: flex; flex-direction: column; }
.list > .item { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); display: flex; gap: var(--s-3); }
.list > .item:last-child { border-bottom: 0; }
.list > .item:hover { background: var(--surface-2); }

/* Tabel lebar dibungkus pembungkus yang bisa digulir. Tanpa ini tabel kas
   memaksa seluruh halaman bergeser mendatar di ponsel. */
.tabel-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); padding: 9px var(--s-4); border-bottom: 1px solid var(--line-strong); background: var(--surface-2);
  white-space: nowrap;
}
table.t td { padding: 11px var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.n { font-family: var(--font-mono); text-align: right; white-space: nowrap; }

/* ---------- 9. Form ---------- */
label.f { display: block; font-size: 13px; font-weight: 650; margin-bottom: 5px; color: var(--ink); }
label.f .opt { font-weight: 400; color: var(--faint); }
.in, select.in, textarea.in {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: var(--isian-teks); background: var(--surface); color: var(--ink);
  min-height: var(--sentuh);
}
.in:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(6,134,200,.2); }
.in::placeholder { color: var(--faint); }
textarea.in { min-height: 92px; resize: vertical; }
/* Kotak centang & radio ikut dibesarkan — 13px bawaan peramban tidak bisa
   disentuh dengan andal, dan di sinilah persetujuan privasi dicentang. */
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; flex: none; accent-color: var(--navy); margin: 0;
}
.hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.err { font-size: 12.5px; color: var(--danger); margin-top: 5px; font-weight: 600; }

/* ---------- 10. Catatan & keadaan kosong ---------- */
.note {
  display: flex; gap: 10px; padding: var(--s-3) var(--s-4);
  border-radius: var(--r); font-size: 13.5px;
  border: 1px solid transparent; border-left-width: 3px;
}
.note .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.note.info   { background: var(--navy-soft);   color: var(--navy);   border-color: currentColor; }
.note.warn   { background: var(--warn-soft);   color: var(--warn);   border-color: currentColor; }
.note.danger { background: var(--danger-soft); color: var(--danger); border-color: currentColor; }
.note.ok     { background: var(--ok-soft);     color: var(--ok);     border-color: currentColor; }
/* Hanya garis kiri yang berwarna penuh; sisi lain diredam bila didukung. */
@supports (border-color: color-mix(in srgb, red 20%, transparent)) {
  .note.info   { border-color: color-mix(in srgb, var(--navy) 20%, transparent);   border-left-color: var(--navy); }
  .note.warn   { border-color: color-mix(in srgb, var(--warn) 30%, transparent);   border-left-color: var(--warn); }
  .note.danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); border-left-color: var(--danger); }
  .note.ok     { border-color: color-mix(in srgb, var(--ok) 30%, transparent);     border-left-color: var(--ok); }
}
.note b { color: inherit; }

.empty { text-align: center; padding: var(--s-8) var(--s-5); color: var(--muted); }
.empty h3 { margin-bottom: 5px; }
.empty .ico { width: 34px; height: 34px; color: var(--faint); margin-bottom: var(--s-3); }
.empty .btn { margin-top: var(--s-4); }

/* =========================================================================
   10b. Halaman yang belum dibangun
   Menggantikan enam blok "isi yang direncanakan" yang sebelumnya identik
   kata per kata di enam halaman berbeda, lengkap dengan tombol yang tidak
   melakukan apa-apa. Tombol mati mengajari orang bahwa aplikasinya rusak.
   ========================================================================= */
.segera { border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface-2); padding: var(--s-6) var(--s-5); }
.segera .kepala { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-2); }
.segera .kepala .ico { width: 22px; height: 22px; color: var(--faint); flex: none; }
.segera h2 { font-size: 16px; }
.segera > p { color: var(--muted); font-size: 13.5px; max-width: 62ch; }
.segera ol { margin: var(--s-4) 0 0; padding-left: 0; list-style: none; counter-reset: langkah; }
.segera ol li {
  counter-increment: langkah; position: relative; padding-left: 32px;
  font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; line-height: 1.5;
}
.segera ol li::before {
  content: counter(langkah, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--faint);
}
.segera .sumber { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }

/* ---------- 11. Bilah bawah (mobile) ---------- */
.bottomnav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.bottomnav .items { display: grid; grid-template-columns: repeat(5,1fr); height: var(--bottomnav-h); }
.bottomnav a, .bottomnav button {
  border: 0; background: none; font: inherit; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  padding-top: 3px;
}
.bottomnav .ico { width: 22px; height: 22px; }
/* Halaman aktif ditandai warna DAN garis di atas tombol — warna sendirian
   bukan penanda yang bisa diandalkan. */
.bottomnav [aria-current="page"] { color: var(--navy); font-weight: 700; }
.bottomnav [aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
  background: var(--navy); border-radius: 0 0 3px 3px;
}
/* BUG LAMA: butir tengah selalu bulat merah, apa pun halaman yang dibuka.
   Merah adalah warna paling menonjol di seluruh antarmuka, jadi mata membaca
   "kamu di sini" pada Komunitas walau yang terbuka Beranda. Penanda aktif
   yang sesungguhnya — garis navy tipis — kalah telak.

   Sekarang latar merah HANYA muncul saat butir itu memang halaman aktif.
   Dalam keadaan lain ia tampil sama seperti butir lainnya. */
.bottomnav .center .ico {
  width: 46px; height: 46px; border-radius: 14px; margin-top: -18px;
  background: var(--surface-2); color: var(--muted); display: grid; place-items: center;
  border: 1px solid var(--line);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
  border: 3px solid var(--surface);
}
.bottomnav .center[aria-current="page"] .ico {
  background: var(--cta); color: var(--cta-ink); border-color: transparent;
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--cta) 55%, transparent);
}
/* Butir aktif selalu punya garis di atas — termasuk butir tengah. Warna
   sendirian bukan penanda yang bisa diandalkan. */
.bottomnav .center[aria-current="page"]::before { display: block; }
.bottomnav .titik {
  position: absolute; top: 6px; right: calc(50% - 17px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--senja); border: 1.5px solid var(--surface);
}

/* ---------- 12. Lembar geser & pemberitahuan ---------- */
.sheet-back { position: fixed; inset: 0; background: rgba(4,20,40,.45); z-index: 60; }
.sheet {
  position: fixed; z-index: 61; background: var(--surface);
  left: 0; right: 0; bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
  max-height: 86dvh; overflow-y: auto; box-shadow: var(--sh-3);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet .hd { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.sheet .bd { padding: var(--s-4) var(--s-5) var(--s-6); }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 18px); z-index: 70;
  background: var(--ink); color: var(--paper); padding: 11px 18px; border-radius: var(--r-full);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--sh-3); max-width: 90vw;
}

/* Bilah luring — muncul saat koneksi hilang */
.offlinebar {
  display: none; background: var(--warn-soft); color: var(--warn);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  padding: 8px var(--s-5); font-size: 13px; font-weight: 600;
}
body.is-offline .offlinebar { display: block; }

/* ---------- 13. Responsif ---------- */
@media (max-width: 1360px) {
  .grid.main { grid-template-columns: minmax(0,1fr); }
  .grid.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1180px) {
  .duacol { grid-template-columns: minmax(0,1fr); }
  .rail { position: static; }
}
/* Di bawah 1024 px bilah menu horizontal dilipat menjadi laci (hamburger).
   Batasnya dinaikkan dari 900 px karena di rentang 768–900 px sebelumnya
   tidak ada menu sama sekali: bilah atas sudah hilang, bilah bawah belum
   muncul. Tablet dan ponsel besar jatuh persis di lubang itu. */
@media (max-width: 1024px) {
  .topnav .items { display: none; }
}
@media (max-width: 900px) {
  .topnav .brandtext { display: none; }
  .topnav .right .pill { display: none; }
}
@media (max-width: 768px) {
  .bottomnav { display: block; }
  .search { max-width: none; }
  .content { padding: var(--s-4) var(--s-4) calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--s-7)); }
  .grid.c2, .grid.c3 { grid-template-columns: minmax(0,1fr); }
  /* Kartu angka tetap dua kolom di ponsel — satu kolom membuat empat angka
     memakan seluruh layar pertama sebelum isi halaman terlihat. */
  .grid.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-3); }
  .card > .bd { padding: var(--s-4); }
  .card > .hd, .card > .ft { padding-left: var(--s-4); padding-right: var(--s-4); }
  .list > .item { padding: var(--s-3) var(--s-4); }
  .stat { padding: var(--s-3); }
  .stat .v { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
@media print {
  .topnav, .bottomnav, .rail, .drawer, .drawer-back, .lompat { display: none !important; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* =========================================================================
   14. Bilah menu atas
   ========================================================================= */
.topnav {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
/* Kaca buram hanya di layar besar. Tiga lapisan blur bersamaan menjatuhkan
   laju gambar di ponsel Android kelas bawah — yang justru mayoritas
   perangkat di wilayah ini. */
@supports (backdrop-filter: blur(10px)) {
  @media (min-width: 1024px) {
    .topnav { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: saturate(1.5) blur(10px); }
  }
}
.topnav .inner {
  display: flex; align-items: center; gap: var(--s-3);
  height: 56px; padding: 0 var(--s-4); max-width: 1680px; margin: 0 auto;
}
.topnav .brand { display: flex; align-items: center; gap: 8px; flex: none; text-decoration: none; max-width: 190px; }
.topnav .brand .mark { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.topnav .brandtext { min-width: 0; }
.topnav .brandtext .n { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: .05em; color: var(--ink); line-height: 1.15; }
.topnav .brandtext .s { font-size: 10.5px; color: var(--muted); max-width: 140px; }

/* Deret yang bisa digulir mendatar diberi bayangan tepi supaya terlihat ada
   isi yang belum tampak. Tanpa ini scrollbar disembunyikan dan tidak ada
   satu pun petunjuk bahwa deretnya masih berlanjut. */
.gulir-x, .topnav .items, .sorotan, .saring-jenis {
  overflow-x: auto; scrollbar-width: none;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 28px 100% no-repeat,
    linear-gradient(to left,  var(--surface) 30%, transparent) right / 28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(10,31,60,.13), transparent) left / 11px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(10,31,60,.13), transparent) right / 11px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.gulir-x::-webkit-scrollbar, .topnav .items::-webkit-scrollbar,
.sorotan::-webkit-scrollbar, .saring-jenis::-webkit-scrollbar { display: none; }

.topnav .items {
  display: flex; align-items: center; gap: 1px; flex: 1; min-width: 0;
  padding-left: var(--s-2); border-left: 1px solid var(--line);
}
.tnavlink {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 7px 10px; border-radius: var(--r-sm); position: relative;
  color: var(--ink-2); font-size: 12.5px; font-weight: 600; text-decoration: none; letter-spacing: -.005em;
}
.tnavlink:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.tnavlink .ico { width: 15px; height: 15px; opacity: .75; flex: none; }
.tnavlink[aria-current="page"] { background: var(--navy); color: #fff; }
.tnavlink[aria-current="page"] .ico { opacity: 1; color: var(--foam); }
.tnavlink .count {
  font-family: var(--font-mono); font-size: 10px; background: var(--senja-fill); color: #fff;
  padding: 0 5px; border-radius: var(--r-full); line-height: 16px;
}
.tnavlink[aria-current="page"] .count { background: rgba(255,255,255,.28); }
/* Garis aqua di bawah butir bernada "amanah" DIHAPUS.
   Maksudnya menandai kelompok, tapi bentuknya sama persis dengan penanda
   "halaman aktif" pada pola navigasi mana pun — jadi tiga butir terlihat aktif
   sekaligus sementara halaman yang benar-benar terbuka ditandai dengan cara
   lain (latar navy). Penanda yang berbohong lebih buruk daripada tidak ada
   penanda kelompok sama sekali. */

@media (max-width: 1400px) { .tnavlink .ico { display: none; } .tnavlink { padding: 7px 11px; } }
@media (max-width: 1180px) { .topnav .brandtext { display: none; } }

.topnav .right { display: flex; align-items: center; gap: 6px; flex: none; padding-left: var(--s-2); border-left: 1px solid var(--line); }
.pill.peran-super_admin { background: #2A1A4A; color: #E4D9FF; border-color: transparent; }
.pill.peran-admin       { background: var(--navy); color: #fff; border-color: transparent; }
.pill.peran-pengurus    { background: var(--foam-soft); color: #05707C; border-color: transparent; }
.pill.peran-anggota     { background: var(--surface-2); color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .pill.peran-pengurus { color: var(--foam); }
  .pill.peran-admin    { background: #1D5FA6; }
}

/* Menu akun */
.menu-akun { position: relative; }
.menu-akun > summary { list-style: none; cursor: pointer; }
.menu-akun > summary::-webkit-details-marker { display: none; }
.menu-akun .panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 244px; z-index: 50;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-3); overflow: hidden; padding-bottom: 4px;
}
.menu-akun .panel .kepala { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.menu-akun .panel a, .menu-akun .panel button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 10px 12px; min-height: 40px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); background: none; border: 0; cursor: pointer; text-decoration: none;
}
.menu-akun .panel a:hover, .menu-akun .panel button:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.menu-akun .panel form { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.menu-akun .panel form button { color: var(--danger); }

/* =========================================================================
   15. Lini masa: komposer & pos
   ========================================================================= */
.komposer { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.komposer .area {
  flex: 1; min-height: 48px; border: 0; resize: none; font: inherit; font-size: 16px;
  color: var(--ink); background: transparent; padding: 8px 0;
}
.komposer .area::placeholder { color: var(--faint); }
.komposer .area:focus { outline: none; }
.komposer-alat { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-5) var(--s-4); flex-wrap: wrap; }
.alatbtn {
  width: var(--sentuh); height: var(--sentuh); display: grid; place-items: center; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--navy); cursor: pointer;
}
.alatbtn:hover { background: var(--navy-soft); }
.alatbtn[disabled] { color: var(--faint); cursor: not-allowed; }
.penyaring { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.penyaring.tahan { color: var(--warn); font-weight: 600; }
.penyaring.blokir { color: var(--danger); font-weight: 600; }
.komposer-berkas { font-size: 12px; color: var(--muted); }

.pos { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.pos:hover { background: var(--surface-2); }
.pos .isi { flex: 1; min-width: 0; }
.pos .kepala { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; }
.pos .kepala .nama { font-weight: 700; color: var(--ink); }
.pos .kepala .meta { color: var(--muted); font-size: 12.5px; }
.pos .teks { margin: 4px 0 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.pos .lampiran { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
/* Tinggi dibatasi supaya foto potret tidak mendorong seluruh lini masa
   turun saat gambar selesai dimuat. */
.pos .lampiran img { display: block; width: 100%; max-height: 480px; object-fit: cover; background: var(--surface-2); }
.pos .aksi { display: flex; gap: var(--s-5); margin-top: 8px; }
.pos .aksi button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  padding: 8px 4px; margin: -8px 0; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); cursor: pointer;
}
.pos .aksi button:hover { color: var(--navy); }
.pos .aksi button.suka:hover { color: var(--senja-fill); }

.pos.sematkan { box-shadow: inset 3px 0 0 var(--navy); background: color-mix(in srgb, var(--navy-soft) 45%, transparent); }
.pos .sematan { font-size: 10.5px; font-weight: 700; color: var(--navy); letter-spacing: .07em; text-transform: uppercase; }
.pos .alat { margin-left: auto; display: flex; gap: 2px; }
.pos .alat button {
  border: 0; background: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-xs); color: var(--faint); cursor: pointer;
}
.pos .alat button:hover { background: var(--surface-2); color: var(--danger); }

.pos.ditahan { background: var(--warn-soft); }
.pos.disembunyikan .teks { filter: blur(4px); user-select: none; }

.saring-jenis { display: flex; gap: 5px; }

/* =========================================================================
   16. Rel obrolan (halaman Ruang)
   ========================================================================= */
.chatbox { display: flex; flex-direction: column; height: calc(100dvh - var(--topbar-h) - var(--s-8)); max-height: 720px; }
.chatbox .kepala { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.chatbox .tema { display: flex; gap: 5px; padding: var(--s-2) var(--s-3); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.chatbox .tema::-webkit-scrollbar { display: none; }
.chatbox .tema button {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-full);
  padding: 6px 13px; min-height: 32px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
  white-space: nowrap; cursor: pointer;
}
.chatbox .tema button.on { background: var(--navy); border-color: transparent; color: #fff; }
.chatbox .badan { flex: 1; overflow-y: auto; padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.chatbox .kaki { border-top: 1px solid var(--line); padding: var(--s-3) var(--s-4); }
.pesan { display: flex; gap: 9px; }
.pesan .balon {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px;
  padding: 9px 12px; font-size: 14px; line-height: 1.45; max-width: 100%;
}
.pesan .nm { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.pesan.saya { flex-direction: row-reverse; }
.pesan.saya .balon { background: var(--navy-soft); border-color: transparent; border-radius: 12px 4px 12px 12px; }
.kirim {
  display: flex; align-items: flex-end; gap: 6px; border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 6px; background: var(--surface);
}
.kirim textarea { flex: 1; border: 0; resize: none; font: inherit; font-size: 16px; min-height: 36px; max-height: 110px; background: transparent; color: var(--ink); }
.kirim textarea:focus { outline: none; }

/* =========================================================================
   17. Halaman publik (landing)
   ========================================================================= */
.pub { background: var(--surface); }
.pubnav {
  position: sticky; top: 0; z-index: 40; background: var(--surface);
  border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top);
}
.pubnav .inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-5); min-height: 66px; display: flex; align-items: center; gap: var(--s-5); }
.pubnav .tautan { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }
/* :not(.btn) penting. Tanpa itu selektor ini (0,2,1) mengalahkan .btn.navy
   (0,2,0) dan mengecat teks tombol Masuk dengan --ink-2 di atas latar navy —
   rasio 1.12:1, tulisannya praktis lenyap. Bug ini tidak terlihat di kode
   tombolnya sendiri, hanya muncul saat keduanya bertemu. */
.pubnav .tautan a:not(.btn) { font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 10px 12px; border-radius: var(--r-sm); }
.pubnav .tautan a:not(.btn):hover { background: var(--surface-2); text-decoration: none; }
.pubnav .tautan .btn { font-size: 13.5px; }

/* Sabuk pengaman. Aturan di atas sudah memakai :not(.btn), tapi warna teks
   tombol navigasi terlalu sering jadi korban selektor lain yang kebetulan
   lebih khusus. Tiga baris ini menyatakan warnanya secara langsung dengan
   kekhususan (0,3,0) — lebih tinggi daripada selektor mana pun di berkas ini
   yang mengenai elemen yang sama, dan tidak bergantung pada urutan. */
.pubnav .tautan .btn.navy,
.pubnav .tautan .btn.navy:hover,
.pubnav .tautan .btn.navy:focus { color: #fff; }
.pubnav .tautan .btn.navy .ico { color: #fff; }

.pubnav .tautan .btn:not(.navy),
.pubnav .tautan .btn:not(.navy):hover { color: var(--ink); }

.hero { position: relative; overflow: hidden; background: linear-gradient(168deg, var(--surface-2) 0%, var(--navy-soft) 55%, var(--foam-soft) 100%); }
.hero::after {
  content: ""; position: absolute; right: -8%; top: -30%; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--aqua) 20%, transparent), transparent 62%);
  pointer-events: none;
}
.hero .inner { max-width: 1180px; margin: 0 auto; padding: var(--s-9) var(--s-5); display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-8); align-items: center; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(30px, 6.2vw, 46px); line-height: 1.1; letter-spacing: -.03em; }
.hero h1 .tekan { color: var(--navy); }

/* Kata kunci judul disorot dengan bidang aqua yang meneruskan motif garis
   air — menggantikan teks bergradasi. Teks bergradasi memakai
   -webkit-text-fill-color:transparent; kalau pemuatan huruf atau mesin
   peramban tersendat, kalimat terpenting di seluruh situs bisa tergambar
   tanpa warna sama sekali. */
.hero h1 .laut {
  color: var(--navy-600); position: relative; padding: 0 .08em;
  background-image: linear-gradient(transparent 64%, color-mix(in srgb, var(--aqua) 34%, transparent) 64%);
  background-repeat: no-repeat; background-size: 100% 100%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero .lead { font-size: 16.5px; color: var(--ink-2); max-width: 52ch; margin: var(--s-4) 0 var(--s-6); }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 6px 14px 6px 9px; font-size: 12.5px; font-weight: 600; color: var(--navy);
  box-shadow: var(--sh-1);
}

.sec { max-width: 1180px; margin: 0 auto; padding: var(--s-9) var(--s-5); }
.sec-head { max-width: 60ch; margin-bottom: var(--s-6); }
.sec-head h2 { font-size: clamp(23px, 4.4vw, 30px); letter-spacing: -.025em; }
.sec-head p { color: var(--muted); margin-top: 8px; }

.fitur { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); }
.fitur .kartu { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.fitur .kartu .lambang { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy); margin-bottom: var(--s-3); }
.fitur .kartu h3 { margin-bottom: 5px; }
.fitur .kartu p { color: var(--muted); font-size: 13.5px; margin: 0; }

.angka { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-4); }
.angka .a { text-align: center; padding: var(--s-5) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); }
.angka .a .v { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--navy); }
.angka .a .k { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.pubfoot { background: var(--navy-900); color: #C5D9EE; padding: var(--s-8) var(--s-5) var(--s-6); }
.pubfoot .inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); }
.pubfoot a { color: #DCE8F7; font-size: 13.5px; display: block; padding: 7px 0; }
.pubfoot h4 { color: #fff; margin-bottom: var(--s-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.pubfoot .bawah { max-width: 1180px; margin: var(--s-6) auto 0; padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; color: #A8C2DD; }

/* =========================================================================
   18. Sorotan (reels foto + keterangan, diisi pengurus)
   ========================================================================= */
.sorotan { display: flex; gap: var(--s-4); scroll-snap-type: x mandatory; padding-bottom: var(--s-3); }
.reel {
  flex: none; width: 260px; aspect-ratio: 9/14; scroll-snap-align: start; position: relative;
  border-radius: var(--r-lg); overflow: hidden; background: var(--navy-900); color: #fff;
  border: 1px solid var(--line); text-decoration: none;
}
.reel .gbr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel .tirai { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,25,55,.94) 0%, rgba(2,25,55,.4) 45%, rgba(2,25,55,.05) 100%); }
.reel .isi { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-4); }
.reel .label { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.22); padding: 3px 9px; border-radius: var(--r-full); margin-bottom: 8px; }
.reel h3 { color: #fff; font-size: 15.5px; line-height: 1.25; }
.reel p { color: #D6E7F6; font-size: 12.5px; margin: 5px 0 0; line-height: 1.4; }
.reel .cap { font-size: 11.5px; color: #A6C2DE; margin-top: 8px; display: flex; align-items: center; gap: 5px; }
.reel:hover { text-decoration: none; }
.reel.kosong { background: var(--surface-2); border: 1.5px dashed var(--line-strong); color: var(--muted); display: grid; place-items: center; text-align: center; padding: var(--s-5); }

/* =========================================================================
   19. Kartu anggota digital (e-Card)
   ========================================================================= */
.ecard-bingkai {
  width: 100%; max-width: 720px; aspect-ratio: 1.5;
  border-radius: 16px; overflow: hidden; background: var(--surface-2);
  box-shadow: 0 18px 40px -14px rgba(4,40,90,.32); border: 1px solid var(--line);
  position: relative;
}
.ecard-bingkai img { display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.ecard-bingkai::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--foam-soft) 50%, var(--surface-2) 70%);
  background-size: 240% 100%; animation: geser 1.4s linear infinite;
}
@keyframes geser { to { background-position: -240% 0; } }

@media (max-width: 1180px) {
  .hero .inner { grid-template-columns: minmax(0,1fr); gap: var(--s-6); }
  .pubfoot .inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .fitur { grid-template-columns: minmax(0,1fr); }
  .angka { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero .inner, .sec { padding: var(--s-7) var(--s-4); }
  .pubnav .tautan a:not(.btn) { display: none; }
  .pubfoot .inner { grid-template-columns: 1fr; }
  .komposer, .pos { padding: var(--s-3) var(--s-4); }
  .komposer-alat { padding-left: var(--s-4); padding-right: var(--s-4); }
  .reel { width: 220px; }
  .chatbox { height: auto; max-height: none; }
}

/* =========================================================================
   20. Laci menu (hamburger)
   Tersedia di SEMUA lebar layar. Beberapa menu pengelolaan sengaja tidak
   dipasang di bilah atas supaya bilah itu tidak makin panjang — kalau
   lacinya hanya muncul di ponsel, menu-menu itu tidak punya jalan masuk
   di desktop.
   ========================================================================= */
.hamburger {
  width: var(--sentuh); height: var(--sentuh); flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); cursor: pointer; position: relative;
}
.hamburger:hover { background: var(--surface-2); border-color: var(--line-strong); }
.hamburger .ico { width: 21px; height: 21px; }
.hamburger .dot {
  position: absolute; top: 5px; right: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--senja); border: 1.5px solid var(--surface);
}

.drawer-back { position: fixed; inset: 0; z-index: 80; background: rgba(4,20,40,.5); }

.drawer {
  position: fixed; z-index: 81; top: 0; left: 0; bottom: 0;
  width: min(324px, 88vw);
  background: var(--surface); border-right: 1px solid var(--line);
  box-shadow: var(--sh-3);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  animation: laci-masuk .18s cubic-bezier(.2,.7,.3,1);
}
@keyframes laci-masuk { from { transform: translateX(-100%); } to { transform: none; } }

.drawer-hd {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); flex: none;
}
.drawer-hd .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.drawer-hd .brand .mark { width: 30px; height: 30px; border-radius: 8px; }
.drawer-hd .brand span { font-family: var(--font-display); font-weight: 700; letter-spacing: .05em; font-size: 15px; }

.drawer-bd { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(env(safe-area-inset-bottom) + var(--s-5)); }

.drawer-akun {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.drawer-akun .pill { flex: none; }

.drawer-grup { padding: var(--s-3) var(--s-2) 0; }
.drawer-grup .jd {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); padding: 0 var(--s-3) 6px;
}
.drawer-grup a,
.drawer-keluar button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 46px; padding: 9px var(--s-3); border-radius: var(--r-sm);
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  background: none; border: 0; text-align: left; cursor: pointer; text-decoration: none;
}
.drawer-grup a:hover,
.drawer-keluar button:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.drawer-grup a .ico,
.drawer-keluar button .ico { width: 19px; height: 19px; flex: none; opacity: .8; }
.drawer-grup a[aria-current="page"] { background: var(--navy); color: #fff; }
.drawer-grup a[aria-current="page"] .ico { color: var(--foam); opacity: 1; }
.drawer-grup a .count {
  font-family: var(--font-mono); font-size: 11px; background: var(--senja-fill); color: #fff;
  padding: 2px 7px; border-radius: var(--r-full); flex: none;
}
.drawer-grup a[aria-current="page"] .count { background: rgba(255,255,255,.28); }

.drawer-keluar { border-top: 1px solid var(--line); margin: var(--s-3) var(--s-2); padding-top: var(--s-2); }
.drawer-keluar button { color: var(--danger); }

body.menu-terbuka { overflow: hidden; }

@media (max-width: 400px) { .drawer { width: 92vw; } }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }

/* =========================================================================
   22. Baris sub-tab (di bawah bilah utama)
   Muncul saat berada di dalam seksi ber-anak (Komunitas / Member Area).
   Dipisah dari bilah utama dengan garis, bukan bidang berwarna — supaya
   ia terbaca sebagai "kelanjutan" bilah di atasnya, bukan potongan baru.
   ========================================================================= */
.topnav .chev { width: 13px; height: 13px; opacity: .55; margin-left: -2px; }
.tnavlink[aria-current="page"] .chev { opacity: .85; }

.subnav-bar { border-top: 1px solid var(--line); background: var(--surface-2); }
@supports (backdrop-filter: blur(10px)) {
  @media (min-width: 1024px) {
    .subnav-bar { background: color-mix(in srgb, var(--surface-2) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); }
  }
}
.subnav {
  display: flex; align-items: center; gap: 4px;
  max-width: 1680px; margin: 0 auto; padding: 6px var(--s-4);
  min-height: 44px;
}
.subnav-induk {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); padding-right: var(--s-3); margin-right: 4px;
  border-right: 1px solid var(--line-strong); white-space: nowrap; flex: none;
}
.subtab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 13px; border-radius: var(--r-full); position: relative;
  color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none;
  min-height: 34px; border: 1px solid transparent;
}
.subtab:hover { background: var(--surface); border-color: var(--line); color: var(--ink); text-decoration: none; }
.subtab .ico { width: 15px; height: 15px; opacity: .75; flex: none; }
.subtab[aria-current="page"] {
  background: var(--surface); border-color: var(--line-strong); color: var(--navy);
  box-shadow: var(--sh-1);
}
.subtab[aria-current="page"] .ico { opacity: 1; color: var(--navy); }
.subtab .count {
  font-family: var(--font-mono); font-size: 10px; background: var(--senja-fill); color: #fff;
  padding: 0 5px; border-radius: var(--r-full); line-height: 16px;
}

/* Sub-tab ikut tersembunyi bersama bilah utama saat layar menyempit —
   di ponsel, cabang seksi diakses lewat laci, bukan baris tab. */
@media (max-width: 1024px) {
  .subnav-bar { display: none; }
}

/* Anak menu di dalam laci (mobile): menjorok, garis tipis penanda cabang. */
.drawer-grup a.anak {
  margin-left: var(--s-5); padding-left: var(--s-3);
  border-left: 2px solid var(--line); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  min-height: 42px; font-size: 14px; color: var(--muted);
}
.drawer-grup a.anak .ico { width: 17px; height: 17px; }
.drawer-grup a.anak[aria-current="page"] {
  background: var(--navy-soft); color: var(--navy); border-left-color: var(--navy);
}
.drawer-grup a.anak[aria-current="page"] .ico { color: var(--navy); }

/* =========================================================================
   23. Sambutan beranda (mengikuti acuan)
   Bidang bernada hangat lembut — satu-satunya tempat aksen koral muncul
   sebagai bidang besar, karena ini ajakan, bukan data. Di halaman bernada
   "amanah" pola ini tidak dipakai; beranda selalu bernada biasa.
   ========================================================================= */
.sambutan {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5);
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--senja-soft) 0%, var(--navy-soft) 120%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); margin-bottom: var(--s-5);
}
.sambutan-teks { min-width: 0; }
.sambutan .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--senja-ink); margin-bottom: 6px;
}
.sambutan h1 { font-size: clamp(22px, 4vw, 28px); letter-spacing: -.02em; }
.sambutan .lead { color: var(--ink-2); font-size: 14.5px; margin: 8px 0 0; max-width: 54ch; }
.sambutan-aksi { display: flex; gap: var(--s-2); flex: none; }
@media (prefers-color-scheme: dark) {
  .sambutan { background: linear-gradient(120deg, var(--surface-2) 0%, var(--navy-soft) 120%); }
}
@media (max-width: 768px) {
  .sambutan { padding: var(--s-4); }
  .sambutan-aksi { width: 100%; }
  .sambutan-aksi .btn { flex: 1; }
}

/* =========================================================================
   24. Komponen fitur (Butuh, Store, Belajar, Anggota, Peringkat, Agenda)
   ========================================================================= */

/* Komposer yang dilipat: <summary> jadi baris pemicu */
.komp-buka {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none;
}
.komp-buka::-webkit-details-marker { display: none; }
details[open] > .komp-buka { border-bottom: 1px solid var(--line); }
.komp-buka .btn { flex: none; pointer-events: none; }

/* Store: kisi lapak */
.lapak-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
.lapak-kartu { overflow: hidden; }
.lapak-foto { position: relative; aspect-ratio: 4/3; background: var(--surface-2); }
.lapak-foto img { width: 100%; height: 100%; object-fit: cover; }
.lapak-nofoto { width: 100%; height: 100%; display: grid; place-items: center; color: var(--faint); }
.lapak-badge { position: absolute; top: 8px; left: 8px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--r-full); }
.lapak-harga { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 16px; margin-top: 2px; }

/* Anggota: kisi kartu */
.anggota-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); padding: var(--s-4); }
.anggota-kartu { text-align: center; padding: var(--s-4) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; align-items: center; }
.anggota-kartu .avatar.lg { margin: 0 auto; }

/* Peringkat: rank & poin */
.rank { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); font-family: var(--font-mono); font-weight: 500; font-size: 12px; background: var(--surface-2); color: var(--muted); }
.rank-1 { background: #FFF2CC; color: #8A6D00; }
.rank-2 { background: #ECEFF3; color: #55606E; }
.rank-3 { background: #F6E5D8; color: #8A5320; }
.poin-total { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); flex: none; }

/* Agenda: kotak tanggal */
.agenda-tgl { flex: none; width: 52px; text-align: center; border: 1px solid var(--line); border-radius: var(--r); padding: 6px 0; background: var(--surface-2); display: flex; flex-direction: column; line-height: 1.1; }
.agenda-tgl .hari { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--senja-ink); letter-spacing: .05em; }
.agenda-tgl .tgl { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); }
.agenda-tgl .bln { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.agenda-tgl.sm-tgl { width: 40px; padding: 4px 0; }
.agenda-tgl.sm-tgl .tgl { font-size: 17px; }

/* Store & agenda selesai: pill.ok as button color */
.btn.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); }
.btn.ok:hover { background: color-mix(in srgb, var(--ok) 16%, var(--ok-soft)); }

@media (max-width: 768px) {
  .lapak-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-3); }
  .anggota-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* =========================================================================
   25. Kolaborasi & Survei
   ========================================================================= */

/* Galeri foto kolaborasi */
.galeri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-3); }
.galeri-item { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface-2); aspect-ratio: 1; }
.galeri-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeri-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 6px;
  font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.galeri-hapus {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.galeri-hapus:hover { background: var(--danger); }

/* Kartu pilih (jenis survei) */
.pilih-kartu {
  flex: 1; min-width: 200px; display: flex; gap: 10px; align-items: flex-start;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; background: var(--surface);
}
.pilih-kartu:has(input:checked) { border-color: var(--navy); background: var(--navy-soft); box-shadow: inset 0 0 0 1px var(--navy); }
.pilih-kartu input { margin-top: 3px; }

/* Opsi jawaban (radio besar, mudah disentuh) */
.pilih-opsi {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; background: var(--surface);
  min-height: var(--sentuh, 44px);
}
.pilih-opsi:hover { border-color: var(--line-strong); background: var(--surface-2); }
.pilih-opsi:has(input:checked) { border-color: var(--navy); background: var(--navy-soft); }
.pilih-opsi input { flex: none; }

.soal-blok { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.soal-blok:last-of-type { border-bottom: 0; }

/* Bar hasil polling */
.bar { height: 10px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--navy), var(--aqua)); border-radius: var(--r-full); min-width: 2px; }

@media (max-width: 768px) {
  .galeri-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* =========================================================================
   26. Pemeriksa Tulisan (Fitur C)
   ========================================================================= */
.salah { color: var(--danger); font-weight: 600; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.benar { color: var(--ok); font-weight: 600; }
.konteks { margin-top: 3px; font-style: italic; opacity: .85; }

/* ==========================================================================
   TAHAP A — Halaman Masuk & Beranda
   Menguatkan dunia yang sudah ada (laut + denyut), bukan menggantinya.
   ========================================================================== */

/* --- Permukaan bawaan peramban: bagian yang tidak kita gambar tetap milik
       desain ini. Tanpa ini, sorotan teks dan cincin fokus memakai biru
       sistem yang bukan milik palet mana pun. --- */
::selection { background: var(--foam); color: var(--navy-900); }
:root { accent-color: var(--navy); caret-color: var(--navy); }
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: var(--r-full);
  border: 3px solid var(--paper);
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--navy-600); outline-offset: 2px; border-radius: var(--r-xs);
}
a { text-underline-offset: 3px; }
.mono, .tabular { font-variant-numeric: tabular-nums; }

/* ==================== HALAMAN MASUK ==================== */

.masuk-wrap {
  display: grid; gap: 0; align-items: stretch;
  max-width: 980px; margin: var(--s-7) auto var(--s-9); padding: 0 var(--s-4);
}
@media (min-width: 900px) {
  .masuk-wrap { grid-template-columns: 1.05fr .95fr; padding: 0 var(--s-5); }
}

/* --- Panel laut: sisi yang meyakinkan --- */
.masuk-laut {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(158deg, var(--navy-900) 0%, #063A72 52%, #05528F 100%);
  color: #fff;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s-7) var(--s-6) var(--s-6);
}
@media (min-width: 900px) {
  .masuk-laut { border-radius: var(--r-lg) 0 0 var(--r-lg); padding: var(--s-8) var(--s-7); }
}

/* Kedalaman: dua lapis cahaya lembut, bukan lingkaran datar. */
.masuk-laut::before {
  content: ""; position: absolute; inset: -30% -20% auto -25%; height: 78%;
  background: radial-gradient(60% 70% at 30% 30%, rgba(7,185,200,.34), transparent 68%);
  filter: blur(6px); z-index: -1;
}
.masuk-laut::after {
  content: ""; position: absolute; inset: auto -30% -35% 20%; height: 70%;
  background: radial-gradient(55% 65% at 60% 60%, rgba(155,220,231,.20), transparent 70%);
  z-index: -1;
}

.masuk-mark {
  width: 56px; height: 56px; border-radius: 14px; display: block;
  box-shadow: 0 10px 26px -10px rgba(2,42,94,.85);
}
.masuk-laut h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4.4vw, 36px); line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance; margin: var(--s-5) 0 0; color: #fff;
}
.masuk-laut .jargon {
  margin: var(--s-3) 0 0; max-width: 34ch;
  font-size: 15px; line-height: 1.6; color: var(--foam);
}

/* Denyut: satu momen gerak yang diarang, bukan efek tersebar. */
.masuk-denyut { display: block; width: 100%; height: 26px; margin: var(--s-6) 0 var(--s-5); overflow: visible; }
.masuk-denyut path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.masuk-denyut .wave  { stroke: rgba(155,220,231,.42); stroke-width: 1.6; }
.masuk-denyut .pulse {
  stroke: var(--aqua); stroke-width: 2.4;
  stroke-dasharray: 90 210; stroke-dashoffset: 300;
  animation: denyutJalan 4.2s cubic-bezier(.22,1,.36,1) infinite;
  filter: drop-shadow(0 0 6px rgba(7,185,200,.55));
}
.masuk-denyut .spark { stroke: var(--senja); stroke-width: 2.8; }
@keyframes denyutJalan { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .masuk-denyut .pulse { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}

.masuk-alasan { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.masuk-alasan li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.masuk-alasan .ico { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--foam); }
.masuk-alasan b { color: #fff; font-weight: 600; }
.masuk-alasan span { color: var(--foam); }

/* --- Panel formulir --- */
.masuk-form {
  background: var(--surface);
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--sh-3);
}
@media (min-width: 900px) {
  .masuk-form { border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: var(--s-8) var(--s-7); }
}
.masuk-form h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; letter-spacing: -.015em; margin: 0; color: var(--ink);
}
.masuk-form .sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

.masuk-form .in { transition: border-color .16s ease, box-shadow .16s ease; }
.masuk-form .in:focus {
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px var(--navy-soft);
}
.masuk-form .btn.primary[aria-busy="true"] { opacity: .72; pointer-events: none; }

.masuk-pisah {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-5); color: var(--muted); font-size: 12.5px;
}
.masuk-pisah::before, .masuk-pisah::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.masuk-daftar {
  display: block; text-align: center; padding: var(--s-4);
  border: 1px dashed var(--line-strong); border-radius: var(--r);
  background: var(--surface-2); text-decoration: none; color: var(--ink);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.masuk-daftar:hover { border-color: var(--navy-600); background: var(--navy-soft); transform: translateY(-1px); }
.masuk-daftar b { display: block; font-size: 15px; }
.masuk-daftar span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ==================== BERANDA — sambutan ==================== */

.denyut-hari {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg);
  background: linear-gradient(152deg, var(--navy-900) 0%, #06407E 60%, #05528F 100%);
  color: #fff; padding: var(--s-6);
  margin-bottom: var(--s-5);
  box-shadow: var(--sh-3);
}
@media (min-width: 720px) { .denyut-hari { padding: var(--s-7) var(--s-7) var(--s-6); } }
.denyut-hari::before {
  content: ""; position: absolute; inset: -40% -25% auto auto; width: 70%; height: 130%;
  background: radial-gradient(50% 50% at 70% 30%, rgba(7,185,200,.30), transparent 70%);
  z-index: -1;
}
.denyut-hari .salam { font-size: 14px; color: var(--foam); margin: 0; }
.denyut-hari h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(23px, 3.6vw, 31px); line-height: 1.14; letter-spacing: -.02em;
  margin: var(--s-2) 0 0; color: #fff; text-wrap: balance; max-width: 20ch;
}
.denyut-hari .lead { margin: var(--s-3) 0 0; max-width: 52ch; font-size: 14.5px; line-height: 1.6; color: var(--foam); }

.denyut-aksi { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.denyut-hari .btn.terang {
  background: #fff; color: var(--navy-900); border-color: #fff; font-weight: 600;
}
.denyut-hari .btn.terang:hover { background: var(--foam-soft); border-color: var(--foam-soft); }
.denyut-hari .btn.tembus {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.34);
}
.denyut-hari .btn.tembus:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); }

/* Angka hari ini: satu baris tipis, bukan tiga kartu kembar. */
.denyut-angka {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid rgba(155,220,231,.24);
}
.denyut-angka a { text-decoration: none; color: inherit; display: block; }
.denyut-angka a:hover .n { color: var(--aqua); }
.denyut-angka .n {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  font-variant-numeric: tabular-nums; line-height: 1; color: #fff;
  transition: color .16s ease;
}
.denyut-angka .l { display: block; margin-top: 5px; font-size: 12.5px; color: var(--foam); }


/* Angka kecil pada lonceng bilah atas. */
.iconbtn .titik-notif {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--r-full);
  background: var(--senja); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  border: 1.5px solid var(--surface); font-variant-numeric: tabular-nums;
}

/* Foto profil pada halaman Tentang.

   Sebelumnya: max-height 320px + object-fit cover. Di ponsel lebar 380px,
   foto potret dipotong jadi pita mendatar yang tampak kecil dan janggal —
   persis keluhan "kekecilan". Sekarang lebar penuh dengan rasio 16:10 di
   layar lebar, dan aspect-ratio dilepas di ponsel supaya foto tampil utuh
   apa adanya, tidak dipotong. */
.profil-foto {
  display: block; width: 100%; height: auto;
  background: var(--surface-2);
}
@media (min-width: 720px) {
  .profil-foto { aspect-ratio: 16 / 10; object-fit: cover; }
  .profil-foto.bagian { aspect-ratio: 16 / 9; border-radius: var(--r-sm); }
}
.profil-foto.bagian { border-radius: var(--r-sm); margin-bottom: var(--s-3); }

/* Kolom sandi dengan tombol lihat. */
.sandi-bungkus { position: relative; display: block; }
.sandi-bungkus .in { padding-right: 46px; }
.sandi-lihat {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--muted);
  border-radius: var(--r-xs);
}
.sandi-lihat:hover { color: var(--ink); background: var(--surface-2); }
.sandi-lihat .ico { width: 18px; height: 18px; }
.sandi-lihat[hidden] { display: none; }

/* Panel sunting mitra: ringkasannya tetap tombol kecil di baris, tapi isinya
   melebar penuh ke bawah baris — kalau tidak, formulir terjepit di kolom
   selebar ikon. */
.mitra-sunting { flex: none; }
.mitra-sunting[open] { flex: 1 0 100%; order: 99; }
.mitra-sunting > summary { list-style: none; cursor: pointer; }
.mitra-sunting > summary::-webkit-details-marker { display: none; }

.agenda-sunting { flex: none; }
.agenda-sunting[open] { flex: 1 0 100%; order: 99; }
.agenda-sunting > summary { list-style: none; cursor: pointer; }
.agenda-sunting > summary::-webkit-details-marker { display: none; }