/* =====================================================================
   NikahuSunnati — Global Match Making Services
   style.css  ·  Identitas: pine #1E4635, brass #9C7327, kertas #F6F2E8
   Motif tanda tangan: bintang empat sudut (dari mark logo) sebagai
   penanda menu aktif dan pemisah kelompok.
   ===================================================================== */

:root{
  --ink:#16241C; --pine:#1E4635; --pine-2:#2A5C46; --sage:#7E9A82; --sage-bg:#E9EEE6;
  --brass:#9C7327; --brass-2:#B98C35; --brass-bg:#F3EBD6;
  --clay:#B0603A; --clay-bg:#F4E3D9;
  --paper:#F6F2E8; --card:#FDFBF5; --white:#fff; --line:#DDD3BF; --line-2:#EDE6D6;
  --muted:#6E7A6E; --ok:#2E6B4F; --warn:#B0603A; --info:#2C5C7A; --danger:#A33A2E;
  --shadow:0 1px 2px rgba(30,45,30,.05),0 8px 24px -12px rgba(30,45,30,.18);
  --shadow-lg:0 24px 60px -24px rgba(20,40,25,.35);
  --r:14px; --r-sm:9px; --r-xs:6px;
  --sidebar-w:264px; --topbar-h:58px; --docbar-h:38px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}

*,*::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.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.25;margin:0 0 .5em}
h1{font-size:1.7rem} h2{font-size:1.35rem} h3{font-size:1.1rem} h4{font-size:1rem}
a{color:var(--pine);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}   /* gambar selalu proporsional */
hr{border:0;border-top:1px solid var(--line);margin:20px 0}
code,kbd,pre{font-family:var(--font-mono);font-size:.86em}
:focus-visible{outline:2.5px solid var(--brass);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------------------------------------------------------ UTILITAS */
.muted{color:var(--muted)}
.small{font-size:.86rem}
.tiny{font-size:.76rem}
/* Dipakai 26 kali pada input dan select di sebelas layar, tetapi tidak pernah
   didefinisikan — sehingga kendali yang dimaksudkan kecil tampil seukuran
   penuh dan merusak kerapatan baris tabel. */
.sm{font-size:.86rem;padding:5px 9px}

/* Tombol Apple milik aplikasi sendiri.

   Semula ini hanya label cadangan DI DALAM elemen yang digambar skrip Apple.
   Skrip itu mengharapkan targetnya kosong, dan isi tambahan membuatnya gagal
   dengan "undefined is not an object (evaluating 'i.text')" — tombolnya mati
   sebelum sempat diklik. Sekarang tombolnya milik kita sepenuhnya, dan skrip
   Apple hanya dipakai untuk membuka jendela masuknya. */
.apple-btn{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;max-width:356px;height:44px;margin:10px auto 0;padding:0 14px;
  border:1px solid #000;border-radius:6px;background:#000;color:#fff;
  font:inherit;font-size:.95rem;font-weight:500;letter-spacing:.01em;
  cursor:pointer;user-select:none}
.apple-btn svg{display:block;margin-top:-2px}
.apple-btn:hover{background:#1a1a1a}
.apple-btn:active{background:#2a2a2a}
.apple-btn:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
/* Galat Apple ditulis di bawah tombolnya. Sebelumnya semuanya dibuang diam-
   diam, sehingga Services ID yang salah terlihat sama persis dengan tombol
   yang tidak berfungsi. */
.apple-error{max-width:356px;margin:8px auto 0;padding:8px 10px;border-radius:6px;
  background:#FDECEB;color:#A3322A;font-size:.82rem;line-height:1.45;text-align:left}
/* Empat kelas di bawah ini dipakai di markup tetapi tidak pernah diberi
   aturan, dan dua di antaranya membuat halaman notifikasi kehilangan satu-
   satunya penanda yang dimilikinya: .dot adalah <span> kosong, jadi tanpa
   ukuran ia sama sekali tidak terlihat, sementara .unread pada <li> juga
   kosong. Akibatnya notifikasi yang belum dibaca tampil persis sama dengan
   yang sudah dibaca — tidak ada galat, hanya tidak ada bedanya. */
/* Tombol "tandai tahap ini selesai". Dipisahkan dari isi kartu di atasnya
   dengan garis, karena ini jalan pintas dan tidak boleh terbaca sebagai
   langkah berikutnya yang wajar. */
.stage-force{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-2)}
/* Nama pengguna di bilah atas. Aturannya sebelumnya ditulis sebagai atribut
   style pada elemennya, jadi dari luar kelas ini tampak tidak pernah dipakai. */
.who{font-size:.86rem;font-weight:600;max-width:190px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.notif-list{list-style:none;margin:0;padding:0}
.notif-list>li{padding:13px 0;border-bottom:1px solid var(--line-2)}
.notif-list>li:last-child{border-bottom:0}
.notif-list>li.unread{border-left:3px solid var(--clay);padding-left:11px;
  background:var(--paper)}
.dot{display:inline-block;width:8px;height:8px;margin-left:6px;
  border-radius:50%;background:var(--clay);vertical-align:middle}
/* Blok teks panjang: selisih audit dan badan dokumen NDA. Keduanya div biasa
   tanpa aturan, sehingga baris-barisnya menyatu tanpa jarak baca. */
.diff{font-family:var(--font-mono);font-size:.82rem;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;background:var(--paper);
  border:1px solid var(--line-2);border-radius:8px;padding:10px 12px;
  max-height:320px;overflow:auto}
.doc-text{line-height:1.7;white-space:normal;max-height:460px;overflow:auto;
  padding-right:6px}
select.sm,input.sm{height:auto}
.mono{font-family:var(--font-mono)}
.right{text-align:right}.center{text-align:center}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt16{margin-top:16px}.mb16{margin-bottom:16px}.mt24{margin-top:24px}
.hide{display:none!important}
.grow{flex:1 1 auto}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row-between{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:14px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600}

/* Bintang empat sudut — motif dari mark logo */
.star{display:inline-block;width:10px;height:10px;background:var(--brass);flex:none;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.star-sm{width:7px;height:7px}

/* --------------------------------------------------------------- SHELL */
.app{min-height:100vh;display:flex;flex-direction:column}

/* Bar dokumen paling atas (manual, implementasi, skenario uji) */
.docbar{
  height:var(--docbar-h);background:var(--ink);color:#D9E2D6;
  display:flex;align-items:center;gap:18px;padding:0 18px;font-size:.79rem;
  position:sticky;top:0;z-index:60;overflow-x:auto;scrollbar-width:none
}
.docbar::-webkit-scrollbar{display:none}
.docbar a{color:#D9E2D6;white-space:nowrap;display:flex;align-items:center;gap:6px}
.docbar a:hover{color:var(--brass-2);text-decoration:none}
.docbar .sep{width:1px;height:16px;background:rgba(255,255,255,.16);flex:none}

/* Topbar: informasi site + switch site + bahasa + akun */
.topbar{
  height:var(--topbar-h);background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 16px;
  position:sticky;top:var(--docbar-h);z-index:55
}
.topbar-logo{height:32px;width:auto}
.topbar-logo-mark{height:30px;width:30px}
.site-switch{
  display:flex;align-items:center;gap:8px;background:var(--sage-bg);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.84rem;
  cursor:pointer;font-family:inherit;color:var(--pine);font-weight:600;max-width:min(46vw,320px)
}
.site-switch:hover{background:var(--brass-bg);border-color:var(--brass)}
.site-switch .site-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{
  width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--white);display:grid;place-items:center;cursor:pointer;position:relative;color:var(--pine)
}
.icon-btn:hover{background:var(--sage-bg)}
.badge-dot{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  background:var(--clay);color:#fff;border-radius:999px;font-size:.65rem;
  display:grid;place-items:center;font-weight:700
}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--pine);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.78rem;flex:none
}
.menu-toggle{display:none}

/* Badan: sidebar kiri + konten */
.body-wrap{display:flex;flex:1;min-height:0}

/* -------------------------------------------------------- SIDEBAR KIRI */
.sidebar{
  width:var(--sidebar-w);flex:none;background:var(--card);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:calc(var(--docbar-h) + var(--topbar-h));
  height:calc(100vh - var(--docbar-h) - var(--topbar-h))
}
.sidebar-scroll{overflow-y:auto;flex:1;padding:12px 10px;scrollbar-width:thin}
.sidebar-scroll::-webkit-scrollbar{width:7px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.nav-group{margin-bottom:14px}
.nav-group-title{
  display:flex;align-items:center;gap:7px;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);font-weight:700;padding:6px 10px 5px
}
.nav-group-title::after{content:"";flex:1;height:1px;background:var(--line-2)}
.nav-link{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  color:var(--ink);font-size:.885rem;position:relative
}
.nav-link:hover{background:var(--sage-bg);text-decoration:none}
.nav-link.active{background:var(--brass-bg);color:var(--pine);font-weight:600}
.nav-link.active::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;background:var(--brass);border-radius:0 3px 3px 0
}
.nav-link .ni{width:18px;text-align:center;color:var(--sage);flex:none;font-size:.95rem}
.nav-link.active .ni{color:var(--brass)}
.nav-count{margin-left:auto;background:var(--sage-bg);color:var(--pine);
  font-size:.7rem;padding:1px 7px;border-radius:999px;font-weight:700}

/* Kredit aplikasi di paling bawah scrollbar menu */
.sidebar-credit{
  border-top:1px solid var(--line);padding:11px 14px;font-size:.72rem;
  color:var(--muted);background:var(--paper);flex:none;max-height:150px;overflow-y:auto
}
.sidebar-credit b{color:var(--pine);font-weight:600}
.sidebar-credit .cr-row{display:flex;justify-content:space-between;gap:8px;padding:1px 0}

/* ------------------------------------------------------------- KONTEN */
.content{flex:1;min-width:0;padding:22px;max-width:100%}
.page-head{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:18px}
.page-head h1{margin:0}
.page-head .sub{color:var(--muted);font-size:.9rem;margin-top:3px}
.crumb{font-size:.78rem;color:var(--muted);margin-bottom:5px}
.crumb a{color:var(--muted)}

/* ---------------------------------------------------------------- KARTU */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.card-head{padding:14px 18px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0}
.card-body{padding:18px}
.card-foot{padding:13px 18px;border-top:1px solid var(--line-2);background:var(--paper);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.stat .k{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat .v{font-family:var(--font-display);font-size:1.85rem;font-weight:600;color:var(--pine);line-height:1.1;margin-top:5px}
.stat .d{font-size:.78rem;color:var(--muted);margin-top:3px}

/* --------------------------------------------------------------- TOMBOL */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 17px;border-radius:var(--r-sm);border:1px solid var(--pine);
  background:var(--pine);color:#fff;font-family:inherit;font-size:.88rem;font-weight:600;
  cursor:pointer;transition:background .15s,border-color .15s;text-decoration:none
}
.btn:hover{background:var(--pine-2);border-color:var(--pine-2);text-decoration:none;color:#fff}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--pine);border-color:var(--line)}
.btn-ghost:hover{background:var(--sage-bg);color:var(--pine)}
.btn-brass{background:var(--brass);border-color:var(--brass)}
.btn-brass:hover{background:var(--brass-2);border-color:var(--brass-2)}
.btn-danger{background:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:#8E2E24;border-color:#8E2E24}
.btn-sm{padding:5px 11px;font-size:.79rem}
.btn-block{width:100%}
.btn-link{background:none;border:none;color:var(--pine);padding:0;cursor:pointer;
  font-family:inherit;font-size:inherit;text-decoration:underline}

/* --------------------------------------------------------------- FORMULIR */
.field{margin-bottom:15px}
.field label,.lbl{display:block;font-size:.81rem;font-weight:600;color:var(--pine);margin-bottom:5px}
.field .hint{font-size:.76rem;color:var(--muted);margin-top:4px}
.req{color:var(--clay)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],
input[type=url],input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);font-family:inherit;font-size:.9rem;color:var(--ink)
}
input:focus,select:focus,textarea:focus{border-color:var(--brass);outline:none;
  box-shadow:0 0 0 3px rgba(156,115,39,.15)}
input[readonly],input:disabled,select:disabled,textarea:disabled{background:var(--paper);color:var(--muted)}
textarea{min-height:110px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E7A6E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
/* Sebuah .check adalah PILIHAN, bukan judul ruas (6791).
 *
 * Pemilih kedua bukan hiasan. Di dalam sebuah borang, ".field label"
 * (kekhususan 0,1,1) mengalahkan ".check" (0,1,0), sehingga setiap
 * pilihan radio yang berada di dalam .field — seluruh borang asesmen
 * Bravo, misalnya — diam-diam kehilangan tata letaknya: display:flex
 * berganti block, gap-nya tidak berlaku sama sekali, dan kotak radionya
 * menempel rapat pada teksnya. Ia juga mewarisi gaya JUDUL ruas: tebal,
 * warna pine, dan margin bawah. Tidak ada galat, tidak ada tanda; hanya
 * dua aturan yang diam-diam saling meniadakan.
 *
 * "label.check" berkekhususan sama (0,1,1) dan ditulis belakangan, jadi
 * ia menang tanpa perlu melemahkan aturan judul ruas.
 *
 * Jaraknya 10px (~2,6 mm pada 96dpi) — lingkaran radio digambar sedikit
 * masuk ke dalam kotak 16px-nya, jadi ruang putih yang benar-benar
 * terlihat sedikit lebih lebar lagi.
 */
.check,label.check{display:flex;align-items:flex-start;gap:10px;font-size:.87rem;
  font-weight:400;color:var(--ink);margin-bottom:0;cursor:pointer;padding:3px 0}
.check input,label.check input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--pine);flex:none}
.inline-fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
fieldset{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;margin:0 0 16px}
legend{font-size:.8rem;font-weight:700;color:var(--brass);padding:0 6px;text-transform:uppercase;letter-spacing:.09em}

/* --------------------------------------------------------------- TABEL */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:.87rem;min-width:520px}
table.tbl th{
  text-align:left;padding:10px 12px;background:var(--sage-bg);color:var(--pine);
  font-weight:700;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
  border-bottom:1px solid var(--line);white-space:nowrap
}
table.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
/* Tabel dua kolom di dalam kartu sempit.
   min-width:520px di atas ditujukan untuk tabel data yang lebar, dan di
   dalam kartu grid selebar ~290px ia membuat tabelnya meluber keluar
   kartunya: kolom kanan terdorong ke luar batas dan hilang dari layar.
   Angkanya tetap ada di HTML — yang hilang hanya penglihatannya, jadi
   tidak ada galat apa pun, hanya daftar kategori tanpa satu angka. */
table.tbl.tbl-slim{min-width:0}
table.tbl.tbl-slim td{padding:9px 12px;white-space:nowrap}
table.tbl tbody tr:hover{background:var(--paper)}
table.tbl tr.is-danger td{background:#FBEDEA}
.tbl-actions{display:flex;gap:6px;flex-wrap:wrap}
/* Baris riwayat yang seluruhnya bisa diklik. Tautan aslinya tetap ada di
   dalam baris supaya papan ketik, klik tengah dan "buka di tab baru"
   bekerja seperti biasa; penangan bariskan hanya pintasan untuk tetikus. */
/* Batang kelengkapan. Dipakai untuk "sudah terisi berapa", TIDAK pernah
   untuk skor: skor tidak boleh terlihat oleh anggota, dan satu batang yang
   dipakai untuk dua hal akan membocorkan yang kedua. */
.meter{height:7px;border-radius:99px;background:var(--line-2);overflow:hidden;max-width:160px}
.meter>span{display:block;height:100%;background:var(--pine);border-radius:99px}
/* Pratinjau foto profil. Kecil, tetapi benar-benar gambarnya — nama
   berkas bukan sesuatu yang bisa diverifikasi. */
.photo-thumb{max-width:160px;max-height:160px;border-radius:8px;border:1px solid var(--line);
  margin:6px 0;object-fit:cover}
.row-link{cursor:pointer}
.row-link:hover{background:var(--line-2)}
.row-link a{color:inherit;text-decoration:none}
.row-link:hover a{text-decoration:underline}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty .star{margin:0 auto 10px}

/* Matriks otorisasi: kolom C R U D */
.matrix{width:100%;border-collapse:collapse;font-size:.83rem;min-width:640px}
.matrix th,.matrix td{border:1px solid var(--line-2);padding:7px 9px}
.matrix thead th{background:var(--sage-bg);color:var(--pine);position:sticky;top:0;z-index:2;font-size:.74rem}
.matrix td.crud{text-align:center;width:46px}
.matrix tbody tr:hover{background:var(--brass-bg)}
.matrix .grp td{background:var(--pine);color:#fff;font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase}
.matrix input[type=checkbox]{accent-color:var(--pine);width:16px;height:16px}

/* -------------------------------------------------------------- LENCANA */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.03em;border:1px solid transparent;white-space:nowrap}
.badge-ok{background:var(--sage-bg);color:var(--ok);border-color:#BFD3C0}
.badge-warn{background:var(--clay-bg);color:var(--warn);border-color:#E5C4B2}
.badge-info{background:#E3EDF3;color:var(--info);border-color:#BDD4E0}
.badge-brass{background:var(--brass-bg);color:var(--brass);border-color:#E0CFA6}
.badge-muted{background:#EDEBE3;color:var(--muted);border-color:var(--line)}
.badge-danger{background:#F8E5E2;color:var(--danger);border-color:#EEC4BD}

/* --------------------------------------------------------------- ALERT */
/* Wadah pesan yang ikut ke mana pun halamannya mendarat.

   Pesan dirender di puncak isi halaman, sementara sebagian layar sengaja
   mendarat jauh di bawah — borang asesmen dituju lewat jangkar #asm-form
   supaya orangnya kembali ke pertanyaannya. Tanpa ini, "Tersimpan, tetapi
   sebagian pertanyaan wajib masih kosong" tercetak delapan ratus piksel di
   atas layar yang sedang ia lihat: ia menyimpan, tidak diberi tahu apa
   pun, dan melihat borang yang sama — persis seperti tombol yang rusak.

   Dibatasi tingginya dan bisa digulir sendiri, supaya tumpukan pesan yang
   panjang tidak pernah menutupi halaman di belakangnya.

   Jaraknya dari atas memakai tinggi docbar + topbar, angka yang sama
   dipakai sidebar: melekat pada 0 akan menempatkannya DI BALIK bilah atas
   yang juga melekat, dan pesannya tetap tidak terbaca — hanya kali ini
   tanpa petunjuk apa pun bahwa ia ada. */
.flash-dock{position:sticky;top:calc(var(--docbar-h) + var(--topbar-h) + 8px);
  z-index:45;max-height:40vh;overflow-y:auto}
@media (max-width:640px){ .flash-dock{max-height:50vh} }
/* Pemberitahuan yang HARUS tetap berdiri — basis data yang tertinggal
   dari berkasnya, misalnya. Ia tidak menutup diri dan tidak dapat
   ditutup, karena keadaannya belum berubah hanya karena dibaca. Tidak
   melekat: ia bukan jawaban atas sesuatu yang baru saja dilakukan
   orangnya, jadi tidak perlu mengikuti gulirannya. */
.notice-dock{margin-bottom:4px}
.alert{display:flex;gap:11px;padding:12px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--card);font-size:.88rem;margin-bottom:15px;align-items:flex-start}
.alert b{display:block;margin-bottom:2px}
.alert-ok{background:var(--sage-bg);border-color:#BFD3C0;color:#1F4B37}
.alert-warn{background:var(--clay-bg);border-color:#E5C4B2;color:#7A3E22}
.alert-danger{background:#F8E5E2;border-color:#EEC4BD;color:#7C2A20}
.alert-info{background:#E3EDF3;border-color:#BDD4E0;color:#1E4258}
.alert .close{margin-left:auto;background:none;border:none;cursor:pointer;color:inherit;
  font-size:1.15rem;line-height:1;padding:0 2px;opacity:.6}
.alert .close:hover{opacity:1}

/* --------------------------------------------------------------- MODAL */
.modal-back{position:fixed;inset:0;background:rgba(22,36,28,.55);display:none;
  z-index:200;padding:20px;overflow-y:auto}
.modal-back.open{display:flex;align-items:flex-start;justify-content:center}
.modal{background:var(--card);border-radius:var(--r);max-width:560px;width:100%;
  margin:6vh auto;box-shadow:var(--shadow-lg);overflow:hidden}
.modal-head{padding:15px 19px;border-bottom:1px solid var(--line-2);display:flex;
  justify-content:space-between;align-items:center;gap:10px}
.modal-body{padding:19px;max-height:64vh;overflow-y:auto}
.modal-foot{padding:14px 19px;border-top:1px solid var(--line-2);background:var(--paper);
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ------------------------------------------------------------ PAGINASI */
.pager{display:flex;gap:5px;align-items:center;justify-content:center;padding:15px 0;flex-wrap:wrap}
.pager a,.pager span{padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-xs);
  font-size:.83rem;background:var(--card);color:var(--ink)}
.pager .on{background:var(--pine);color:#fff;border-color:var(--pine);font-weight:700}
.pager a:hover{background:var(--sage-bg);text-decoration:none}

/* ------------------------------------------------------------ TAB & FILTER */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:9px 15px;border-bottom:2.5px solid transparent;font-size:.87rem;
  color:var(--muted);white-space:nowrap;font-weight:600}
.tab:hover{color:var(--pine);text-decoration:none}
.tab.on{color:var(--pine);border-bottom-color:var(--brass)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filters .field{margin:0;min-width:150px}

/* --------------------------------------------------- HALAMAN OTENTIKASI */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:
    radial-gradient(1000px 500px at 50% -10%,rgba(156,115,39,.10),transparent 60%),
    var(--paper)}
.auth-card{width:100%;max-width:412px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:30px 28px}
.auth-logo{height:52px;width:auto;margin:0 auto 6px}
.auth-tag{text-align:center;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin-bottom:22px}
.auth-card h1{font-size:1.3rem;text-align:center;margin-bottom:4px}
.auth-card .lead{text-align:center;color:var(--muted);font-size:.86rem;margin:0 0 20px}
.auth-sep{display:flex;align-items:center;gap:11px;margin:19px 0;color:var(--muted);font-size:.76rem}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-links{margin-top:17px;display:flex;justify-content:space-between;font-size:.82rem;
  gap:10px;flex-wrap:wrap}
.pw-meter{height:4px;background:var(--line-2);border-radius:9px;overflow:hidden;margin-top:7px}
.pw-meter i{display:block;height:100%;width:0;background:var(--clay);transition:width .2s,background .2s}

/* --------------------------------------------------- HALAMAN PEMBERITAHUAN */
.notice-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--paper)}
.notice-card{max-width:480px;text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:36px 30px;box-shadow:var(--shadow)}
.notice-logo{height:46px;width:auto;margin:0 auto 18px}

/* -------------------------------------------------------- SITUS PUBLIK */
.pub-nav{position:sticky;top:0;z-index:50;background:rgba(253,251,245,.94);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.pub-nav-in{max-width:1140px;margin:0 auto;padding:11px 20px;display:flex;
  align-items:center;gap:20px}
.pub-nav-logo{height:36px;width:auto}
.pub-links{margin-left:auto;display:flex;gap:20px;align-items:center;font-size:.88rem}
.pub-links a{color:var(--ink)}
.pub-links a:hover{color:var(--brass)}
.pub-wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.hero{padding:70px 0 56px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% 30% auto;height:420px;
  background:radial-gradient(closest-side,rgba(156,115,39,.13),transparent);pointer-events:none}
.hero h1{font-size:clamp(2rem,5.2vw,3.2rem);margin-bottom:16px;position:relative}
.hero .slogan{font-family:var(--font-display);font-style:italic;font-size:clamp(1rem,2.4vw,1.3rem);
  color:var(--brass);margin-bottom:22px;position:relative}
.hero p.lead{max-width:620px;margin:0 auto 28px;color:var(--muted);font-size:1.02rem;position:relative}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}
.section{padding:52px 0;border-top:1px solid var(--line)}
.section h2{text-align:center;margin-bottom:8px}
.section .section-sub{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 34px}
.phase-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.phase-card .ph-no{font-family:var(--font-display);font-size:1.5rem;color:var(--brass);line-height:1}
.phase-card h3{margin:8px 0 6px;font-size:1.02rem}
.phase-card p{margin:0;font-size:.87rem;color:var(--muted)}
.sealed{background:linear-gradient(135deg,var(--sage-bg),var(--brass-bg));
  border:1px dashed var(--brass);border-radius:var(--r);padding:22px;text-align:center}
.sealed .lock{font-size:1.7rem;margin-bottom:8px}
.pub-foot{background:var(--ink);color:#C9D4C6;padding:36px 0;margin-top:40px;font-size:.86rem}
.pub-foot a{color:#C9D4C6}
.pub-foot .cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ------------------------------------------------------------- DOKUMEN */
.doc-body{max-width:850px}
.doc-body h2{margin-top:34px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.doc-body h3{margin-top:22px;color:var(--pine)}
.doc-body p,.doc-body li{font-size:.93rem}
.doc-body ol,.doc-body ul{padding-left:22px}
.doc-body li{margin-bottom:5px}
.doc-body pre{background:var(--ink);color:#DDE8DA;padding:13px 15px;border-radius:var(--r-sm);
  overflow-x:auto;font-size:.8rem;line-height:1.55}
.doc-body table{width:100%;border-collapse:collapse;font-size:.86rem;margin:14px 0}
.doc-body th,.doc-body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.doc-body th{background:var(--sage-bg);color:var(--pine)}
.doc-toc{background:var(--sage-bg);border:1px solid var(--line);border-radius:var(--r);padding:15px 20px}
.doc-toc ol{margin:6px 0 0}

/* --------------------------------------------------------- MESSAGE CENTRE */
.msg-layout{display:grid;grid-template-columns:290px 1fr;gap:16px;align-items:start}
/* Dua kolom ada untuk memilih di antara banyak proses. Yang hanya punya
   satu membacanya, bukan memilihnya — jadi kartunya menumpuk ke bawah,
   selebar halaman. */
.msg-layout.one-col{grid-template-columns:1fr}
.thread-item{display:block;padding:11px 13px;border-bottom:1px solid var(--line-2);color:var(--ink)}
.thread-item:hover{background:var(--paper);text-decoration:none}
.thread-item.on{background:var(--brass-bg)}
.thread-item .t-sub{font-weight:600;font-size:.87rem}
.thread-item .t-meta{font-size:.75rem;color:var(--muted);margin-top:2px}
.chat-scroll{max-height:56vh;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.bubble{max-width:78%;padding:9px 13px;border-radius:13px;font-size:.88rem;
  background:var(--sage-bg);border:1px solid var(--line-2)}
.bubble.me{align-self:flex-end;background:var(--pine);color:#fff;border-color:var(--pine)}
.bubble .b-meta{font-size:.7rem;opacity:.72;margin-top:3px}
.bubble.sys{align-self:center;background:var(--brass-bg);border-color:var(--brass);
  font-size:.79rem;text-align:center;max-width:92%}

/* ---------------------------------------------------------------- CETAK */
@media print{
  .docbar,.topbar,.sidebar,.no-print,.pager,.filters{display:none!important}
  body{background:#fff}
  .content{padding:0}
  .card{box-shadow:none;border-color:#ccc}
}

/* ----------------------------------------------------------- RESPONSIF */
@media (max-width:1024px){
  :root{--sidebar-w:236px}
  .msg-layout{grid-template-columns:250px 1fr}
}
@media (max-width:860px){
  .menu-toggle{display:grid}
  .sidebar{
    position:fixed;left:0;top:0;height:100vh;z-index:120;width:min(84vw,300px);
    transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow-lg)
  }
  .sidebar.open{transform:translateX(0)}
  .scrim{position:fixed;inset:0;background:rgba(22,36,28,.5);z-index:110;display:none}
  .scrim.open{display:block}
  .content{padding:16px 14px}
  .msg-layout{grid-template-columns:1fr}
  .topbar{top:var(--docbar-h)}
  .hero{padding:48px 0 40px}
  .section{padding:38px 0}
}
@media (max-width:560px){
  body{font-size:14.5px}
  h1{font-size:1.42rem}
  .topbar{gap:9px;padding:0 11px}
  .topbar-logo{height:27px}
  .site-switch{padding:4px 9px;font-size:.78rem;max-width:42vw}
  .card-body,.card-head,.card-foot{padding:13px}
  .pub-links{gap:13px;font-size:.82rem}
  /* Menu publik digulir mendatar di layar sempit agar tidak memaksa
     seluruh halaman ikut melebar. */
  .pub-nav-in{flex-wrap:wrap;gap:8px}
  .pub-links{margin-left:0;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  .pub-links::-webkit-scrollbar{display:none}
  .pub-links>*{flex:0 0 auto;white-space:nowrap}
  .btn{padding:9px 14px}
  .auth-card{padding:24px 19px}
  .stat .v{font-size:1.5rem}
  /* Tabel jadi kartu bertumpuk agar terbaca di ponsel */
  table.tbl.stackable{min-width:0}
  table.tbl.stackable thead{display:none}
  table.tbl.stackable tr{display:block;border:1px solid var(--line);border-radius:var(--r-sm);
    margin-bottom:11px;background:var(--card);padding:5px 0}
  table.tbl.stackable td{display:flex;gap:11px;border:0;padding:6px 13px;justify-content:space-between}
  table.tbl.stackable td::before{content:attr(data-label);font-weight:700;color:var(--muted);
    font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;flex:none}
}

/* ---------------------------------------- SITUS PUBLIK — GAYA PROTOTIPE */
/* Diturunkan dari nikahusunnati-desain-aplikasi: hero dua kolom dengan
   kartu tersegel, papan tahap, kartu keunggulan, dan tangga keterbukaan. */

.hero-proto{position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 85% -10%,rgba(199,154,69,.16),transparent 55%),
             radial-gradient(90% 70% at -5% 110%,rgba(46,107,79,.14),transparent 55%),
             var(--paper)}
.hero-proto .pub-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;
  align-items:center;padding-top:62px;padding-bottom:62px}
.hero-proto h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.12;margin:12px 0 14px}
.hero-proto h1 em{font-style:italic;color:var(--brass)}
.hero-proto .lead{color:var(--muted);font-size:1.03rem;max-width:52ch;margin-bottom:24px}
.cta-row{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:26px}
.trust{display:flex;gap:30px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.trust>div{font-size:.78rem;color:var(--muted);line-height:1.5}
.trust b{display:block;font-family:var(--font-display);font-size:1.45rem;color:var(--pine);font-weight:600}

/* Kartu kandidat tersegel */
.veilcard{position:relative;background:linear-gradient(160deg,#20402F,#122419);
  border-radius:20px;padding:26px;color:#E9E3D2;box-shadow:var(--shadow-lg);overflow:hidden}
.veilcard .vhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.veilcard .vid{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:#B9C6B4}
.veiled-photo{height:132px;border-radius:12px;
  background:linear-gradient(135deg,#2C4E3B,#1B3527);display:grid;place-items:center;
  position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.veiled-photo .silh{opacity:.55}
.sealtag{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;
  gap:6px;justify-content:center;font-size:.66rem;color:#CBBE9A;background:rgba(0,0,0,.34);
  border:1px solid rgba(199,154,69,.34);border-radius:999px;padding:5px 10px;text-align:center}
.vrow{display:flex;justify-content:space-between;gap:12px;font-size:.83rem;
  padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.vrow span:first-child{color:#9DB09B}
.vrow:last-of-type{border-bottom:0}
.wax{margin-top:14px;background:rgba(199,154,69,.13);border:1px solid rgba(199,154,69,.32);
  border-radius:10px;padding:11px 13px;font-size:.76rem;color:#E4D9BC;line-height:1.55}

/* Papan tahap */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.steps+.steps{margin-top:1px}
.step{background:var(--card);padding:22px 20px}
.step .num{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;
  color:var(--brass);font-weight:600;margin-bottom:9px}
.step h4{font-size:.97rem;margin-bottom:6px;line-height:1.35}
.step p{font-size:.82rem;color:var(--muted);line-height:1.6;margin:0}
.step.goal{background:var(--pine)}
.step.goal .num{color:var(--brass2)}
.step.goal h4{color:#fff}
.step.goal p{color:#C7D0C0}

/* Kartu keunggulan */
.feat{display:flex;gap:14px;align-items:flex-start}
.feat .fi{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--sage-bg);color:var(--pine)}
.feat h4{font-size:.97rem;margin-bottom:5px}
.feat p{font-size:.84rem;color:var(--muted);line-height:1.62;margin:0}

/* Tangga keterbukaan */
.ladder{display:grid;gap:11px}
.rung{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-left-width:4px;
  border-radius:var(--r);padding:17px 19px}
.rung .rn{width:40px;height:40px;border-radius:11px;display:grid;place-items:center}
.rung h4{font-size:.95rem;margin-bottom:4px}
.rung p{font-size:.83rem;color:var(--muted);line-height:1.6;margin:0}
.rung.male{border-left-color:var(--info)}
.rung.male .rn{background:#E4EEF4;color:var(--info)}
.rung.female{border-left-color:var(--clay)}
.rung.female .rn{background:var(--clay-bg);color:var(--clay)}
.rung.meet{border-left-color:var(--brass)}
.rung.meet .rn{background:var(--brass-bg);color:var(--brass)}

/* Pita animasi */
.anim-strip{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  background:linear-gradient(160deg,#20402F,#122419);border-radius:18px;
  padding:26px 30px;color:#E9E3D2;box-shadow:var(--shadow-lg)}
.anim-strip h3{color:#fff;font-size:1.25rem;margin-bottom:7px}
.anim-strip p{color:#B9C6B4;font-size:.88rem;line-height:1.6;margin:0;max-width:56ch}
.anim-strip .btn{background:var(--brass2);border-color:var(--brass2);color:#1B2E22;white-space:nowrap}
.anim-strip .btn:hover{background:#D8AC58;border-color:#D8AC58}

@media (max-width:980px){
  .hero-proto .pub-wrap{grid-template-columns:1fr;gap:34px;padding-top:44px;padding-bottom:44px}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr}
  .trust{gap:20px}
  .rung{grid-template-columns:auto 1fr;gap:12px}
  .rung .who-tag{grid-column:1/-1}
  .anim-strip{grid-template-columns:1fr;padding:22px}
}

/* Koreksi agar sesuai prototipe */
/* Tombol di dalam menu publik: aturan .pub-links a sebelumnya menimpa warna
   teks tombol sehingga label "Daftar" tak terbaca di atas latar hijau. */
.pub-links a.btn{color:#fff}
.pub-links a.btn:hover{color:#fff}
.pub-links a.btn-ghost{color:var(--pine)}
.pub-links a.btn-ghost:hover{color:var(--pine)}

/* Kepala bagian rata kiri seperti prototipe, bukan tengah. */
.sec-head{max-width:640px;margin-bottom:34px}
.sec-head h2{text-align:left;margin-bottom:10px}
.sec-head p{color:var(--muted);font-size:.95rem;line-height:1.7;margin:0}
.sec-head .eyebrow{display:block;margin-bottom:9px}

/* Kartu keunggulan: tiga kolom tetap, bukan auto-fit. */
.section .grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.section .grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.section .grid-3{grid-template-columns:1fr}}

/* Butir menu yang mendapat kursor setelah tombol Dashboard dilipat. */
.nav-link.is-cursor{outline:2px solid var(--brass);outline-offset:-2px;border-radius:8px}
.nav-link:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}

/* Daftar bercentang untuk menugaskan beberapa asesmen sekaligus.
   Barisnya dibuat selebar kartunya supaya seluruh baris bisa ditekan,
   bukan hanya kotak kecilnya. */
.check-list{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow:auto;
  border:1px solid var(--line);border-radius:8px;padding:6px}
.check-row{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border-radius:6px;
  cursor:pointer;line-height:1.45}
.check-row:hover{background:var(--paper)}
.check-row input{margin-top:3px;flex:0 0 auto}
.check-row.is-taken{opacity:.55;cursor:default}
.check-row.is-taken:hover{background:transparent}
.check-row [data-already]{color:var(--clay);margin-left:6px}

/* Lini masa riwayat proses: waktu di kiri, peristiwanya di kanan.
   Pada layar sempit keduanya menumpuk, karena kolom waktu selebar 150px
   di samping teks panjang menyisakan lajur yang terlalu kurus untuk
   dibaca. */
.flow-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.flow-list>li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 0;
  border-top:1px solid var(--line-2)}
.flow-list>li:first-child{border-top:0}
.flow-when{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:1px}
.flow-what{min-width:0}
.flow-what>b{display:inline-block;margin-right:6px}
@media (max-width:640px){
  .flow-list>li{grid-template-columns:1fr;gap:3px}
  .flow-when{order:-1}
}

/* --------------------------------------------- Jangkar di bawah bilah atas
   Bilah dokumentasi dan bilah aplikasi keduanya sticky di puncak layar,
   setinggi 96px bersama-sama. Sebuah tautan #jangkar menggulir elemennya
   persis ke puncak JENDELA, jadi judul kartu yang dituju berakhir di
   belakang kedua bilah itu — yang terbaca pertama kali oleh orang yang
   baru saja mengklik "Mulai" adalah pertanyaan kedua, bukan judul
   asesmennya. */
[id] { scroll-margin-top: calc(var(--docbar-h) + var(--topbar-h) + 12px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------------
   Kepatuhan terhadap harapan, pada layar Penjodohan.

   Batang dan angkanya sejajar supaya satu baris dapat dibaca sekilas,
   dan "belum dapat dinilai" sengaja TIDAK digambar sebagai batang
   kosong: batang kosong di tempat yang sama dengan batang 0% akan
   terbaca sebagai nol oleh siapa pun yang melewatinya, padahal keduanya
   keadaan yang sama sekali berbeda.
   --------------------------------------------------------------------- */
.comply{display:flex;align-items:center;gap:7px;min-width:150px}
.comply-track{flex:1;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.comply-fill{display:block;height:100%;border-radius:999px}
.comply-fill.is-ok{background:var(--pine)}
.comply-fill.is-warn{background:var(--brass)}
.comply-fill.is-low{background:var(--clay)}
.comply-num{font-variant-numeric:tabular-nums;font-weight:600;font-size:.85rem}
.comply-na{font-size:.78rem;color:var(--muted);font-style:italic}
input[type=range]{width:100%;accent-color:var(--pine);height:22px}