/* ============================================================
   SILSILAH — gaya aplikasi
   Palet: nila (tinta indigo), linen (kertas arsip), kunyit (kuningan),
   jade (penanda masih hidup).
   ============================================================ */
:root{
  --nila:#1B2A4A; --nila-2:#26395E; --nila-3:#3A5180;
  --ink:#101A2E; --linen:#E7E4DA; --paper:#FBFAF7;
  --kunyit:#B8891F; --kunyit-lo:#E7C97A; --jade:#2F7D6B; --bahaya:#9E3B2C;
  --garis:rgba(16,26,46,.16); --garis-lo:rgba(16,26,46,.08);
  --rel:300px; --panel:344px; --bar:56px;
  --f-display:"Spectral",Georgia,"Times New Roman",serif;
  --f-body:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--f-body);font-size:14px;line-height:1.45;color:var(--ink);
  background:var(--linen);-webkit-font-smoothing:antialiased}
body.penuh{overflow:hidden}

/* Penting: elemen ber-atribut hidden harus benar-benar hilang, termasuk yang
   kelasnya memakai display:grid/flex. Tanpa ini, pesan "belum ada orang"
   tetap tampil walau tree sudah terisi. */
[hidden]{display:none!important}

button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--nila);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--kunyit);outline-offset:2px}
img{max-width:100%}
h1{font-family:var(--f-display);font-size:26px;font-weight:600;margin:0}
h2.sub{font-family:var(--f-display);font-size:17px;font-weight:600;margin:0 0 12px}
.hint{font-size:12px;color:var(--nila-3);line-height:1.5;margin:4px 0 0}
.mono{font-family:var(--f-mono)}
.kecil{font-size:11px}

/* ── Bilah atas ─────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:18px;min-height:var(--bar);padding:0 16px;
  background:var(--nila);color:#EFECE3;position:sticky;top:0;z-index:40}
.brand{text-decoration:none;display:flex;align-items:center;flex:0 0 auto}
.brand .mark{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--kunyit-lo);border:1px solid rgba(231,201,122,.42);padding:4px 8px;border-radius:2px;
  white-space:nowrap}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{color:rgba(239,236,227,.78);text-decoration:none;padding:7px 12px;border-radius:3px;
  font-size:13.5px;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.on{background:rgba(231,201,122,.15);color:var(--kunyit-lo)}
.nav .cnt{font-family:var(--f-mono);font-size:9.5px;background:var(--bahaya);color:#fff;
  border-radius:8px;padding:1px 5px;margin-left:5px;vertical-align:1px}
.akun{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:13px;flex:0 0 auto}
.akun .nm{color:rgba(239,236,227,.9);text-decoration:none}
.akun .nm:hover{color:#fff;text-decoration:underline}
.akun .keluar{color:rgba(239,236,227,.6);text-decoration:none;font-size:12.5px}
.akun .keluar:hover{color:#fff}
.badge-role{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px;background:rgba(231,201,122,.16);color:var(--kunyit-lo);
  border:1px solid rgba(231,201,122,.3);white-space:nowrap}

/* ── Wadah halaman ──────────────────────────────────────── */
.wadah{max-width:1120px;margin:0 auto;padding:26px 18px 60px}
.wadah.sempit{max-width:620px}
.judul-baris{display:flex;align-items:flex-start;gap:18px;margin-bottom:20px;flex-wrap:wrap}
.judul-baris .aksi-baris{margin-left:auto}
.aksi-baris{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.impor{display:inline}

.flash{max-width:1120px;margin:14px auto -6px;padding:11px 15px;border-radius:3px;font-size:13.5px;
  border-left:3px solid var(--nila-3);background:var(--paper)}
.flash.sukses{border-left-color:var(--jade)}
.flash.galat{border-left-color:var(--bahaya)}
.flash.peringatan{border-left-color:var(--kunyit)}

.kosong{background:var(--paper);border:1px dashed var(--garis);border-radius:4px;
  padding:46px 20px;text-align:center}

/* ── Tombol & isian ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;
  border:1px solid var(--garis);border-radius:3px;padding:7px 13px;font-size:13px;
  text-decoration:none;color:var(--ink);min-height:36px}
.btn:hover{border-color:var(--nila-3)}
.btn.primary{background:var(--nila);border-color:var(--nila);color:#F5F2E9}
.btn.primary:hover{background:var(--nila-2)}
.btn.emas{background:var(--kunyit);border-color:var(--kunyit);color:#1A1405;font-weight:600}
.btn.bahaya{color:var(--bahaya);border-color:rgba(158,59,44,.35)}
.btn.lebar{width:100%}
.btn.kecil{padding:4px 9px;font-size:12px;min-height:30px}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.field{display:block;margin-bottom:12px}
.field>span{display:block;font-size:11.5px;color:var(--nila-3);margin-bottom:4px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],
select,textarea{width:100%;background:#fff;border:1px solid var(--garis);border-radius:3px;
  padding:8px 10px;font-size:16px}      /* 16px mencegah iOS memperbesar saat fokus */
@media (min-width:700px){
  input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],
  select,textarea{font-size:13.5px}
}
textarea{resize:vertical}
.kartu-form{background:var(--paper);border:1px solid var(--garis);border-radius:4px;padding:20px}
.baris-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end}
.inline{display:inline}
.cek-tree{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cek{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;background:#fff;
  border:1px solid var(--garis);border-radius:3px;padding:4px 8px}

/* ── Halaman masuk ──────────────────────────────────────── */
.halaman-masuk{display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:20px;
  background:linear-gradient(160deg,#1B2A4A 0%,#0F1B33 100%)}
.kartu-masuk{background:var(--paper);border-radius:5px;width:min(400px,100%);padding:30px;
  border-top:3px solid var(--kunyit);box-shadow:0 26px 70px rgba(8,14,28,.42)}
.kartu-masuk .kop .mark{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--kunyit);border:1px solid rgba(184,137,31,.4);
  padding:3px 7px;border-radius:2px}
.kartu-masuk h1{font-size:24px;margin:14px 0 5px;line-height:1.2}
.kartu-masuk .kop p{margin:0 0 20px;font-size:13px;color:var(--nila-3)}
.form-masuk .btn{margin-top:6px}
.jejak{font-size:12px;color:var(--nila-3);margin:16px 0 0;text-align:center}

/* ── Kartu tree ─────────────────────────────────────────── */
.kisi-tree{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.kartu-tree{display:block;background:var(--paper);border:1px solid var(--garis);border-radius:4px;
  padding:18px;text-decoration:none;color:inherit;border-top:3px solid var(--nila)}
.kartu-tree:hover{border-color:var(--nila-3);border-top-color:var(--kunyit)}
.kartu-tree h2{font-family:var(--f-display);font-size:18px;font-weight:600;margin:0}
.kartu-tree .asal{font-family:var(--f-mono);font-size:11px;color:var(--nila-3);margin:3px 0 14px}
.kartu-tree .angka{display:flex;gap:22px;margin:0 0 12px}
.kartu-tree .angka dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--nila-3)}
.kartu-tree .angka dd{margin:0;font-family:var(--f-display);font-size:22px;font-weight:600;line-height:1.1}
.kartu-tree .akar{font-size:12.5px;margin:0 0 12px;color:var(--nila-2)}
.kartu-tree .buka{font-size:12.5px;color:var(--kunyit);font-weight:600}

/* ── Tabel ──────────────────────────────────────────────── */
.tabel-gulir{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--garis);border-radius:4px;font-size:13.5px;min-width:560px}
.tabel th{text-align:left;font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--nila-3);padding:11px 13px;border-bottom:1px solid var(--garis)}
.tabel td{padding:11px 13px;border-bottom:1px solid var(--garis-lo);vertical-align:top}
.tabel tr:last-child td{border-bottom:0}

/* ── Kartu usulan ───────────────────────────────────────── */
.kartu-usulan{background:var(--paper);border:1px solid var(--garis);border-radius:4px;
  padding:17px;margin-bottom:12px}
.kartu-usulan.selesai{opacity:.66}
.kartu-usulan header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kartu-usulan h2{font-family:var(--f-display);font-size:16px;font-weight:600;margin:0}
.kartu-usulan .meta{font-family:var(--f-mono);font-size:10.5px;color:var(--nila-3);margin:4px 0 9px}
.kartu-usulan .detail{margin:0 0 10px;font-size:13px}
.status{font-family:var(--f-mono);font-size:10px;padding:2px 7px;border-radius:2px;
  text-transform:uppercase;letter-spacing:.08em;margin-left:auto}
.status.menunggu{background:rgba(184,137,31,.16);color:var(--kunyit)}
.status.disetujui{background:rgba(47,125,107,.14);color:var(--jade)}
.status.ditolak{background:rgba(158,59,44,.12);color:var(--bahaya)}
.aksi-usulan{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.aksi-usulan input[type=text]{flex:1;min-width:180px}
dl.kv{margin:0 0 12px;display:grid;grid-template-columns:96px 1fr;gap:5px 10px;font-size:13px}
dl.kv dt{font-size:11px;color:var(--nila-3);padding-top:2px}
dl.kv dd{margin:0}
dl.kv.ringkas{background:#fff;border:1px solid var(--garis-lo);border-radius:3px;padding:11px}

/* ============================================================
   Ruang kerja silsilah
   ============================================================ */
.kerja{display:flex;height:calc(100vh - var(--bar));height:calc(100dvh - var(--bar));
  overflow:hidden;position:relative}
.rel{width:var(--rel);flex:0 0 var(--rel);background:var(--paper);
  border-right:1px solid var(--garis);display:flex;flex-direction:column;min-height:0}
.rel-gulir{overflow-y:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.blok{border-bottom:1px solid var(--garis-lo);padding:14px 16px}
.blok h2{margin:0 0 10px;font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nila-3)}
.tumpuk{display:grid;gap:7px}
.daftar-orang{display:flex;flex-direction:column;gap:2px;max-height:min(320px,34vh);
  overflow-y:auto;margin-top:8px}
.baris-orang{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:3px;
  background:transparent;border:0;width:100%;text-align:left}
.baris-orang:hover{background:#F1EFE8}
.baris-orang.on{background:var(--nila);color:#F5F2E9}
.baris-orang.on .meta{color:rgba(245,242,233,.66)}
.avatar{width:26px;height:26px;border-radius:50%;flex:0 0 26px;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:10px;background:var(--linen);color:var(--nila);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.baris-orang .nm{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baris-orang .meta{font-family:var(--f-mono);font-size:10.5px;color:var(--nila-3)}
.angka-kisi{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.angka-kisi .sel{background:#fff;border:1px solid var(--garis);border-radius:3px;padding:8px 10px}
.angka-kisi b{display:block;font-family:var(--f-display);font-size:21px;font-weight:600;line-height:1.1}
.angka-kisi span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--nila-3)}

.panggung{flex:1;display:flex;flex-direction:column;min-width:0;
  background:radial-gradient(circle at 1px 1px,rgba(27,42,74,.16) 1px,transparent 0) 0 0/22px 22px,#DFDCD2}
.bilah{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--paper);
  border-bottom:1px solid var(--garis);flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--garis);border-radius:3px;overflow:hidden;background:#fff}
.seg button{background:#fff;border:0;padding:7px 11px;font-size:12.5px;
  border-right:1px solid var(--garis-lo);white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--nila);color:#F5F2E9}
.tag-akar{font-family:var(--f-mono);font-size:11px;color:var(--nila-3);display:flex;
  align-items:center;gap:6px;padding:5px 9px;border:1px dashed var(--garis);border-radius:3px;
  background:#fff;max-width:230px}
.tag-akar b{font-family:var(--f-body);font-size:12.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.isi-sisa{flex:1}
.ikon-tombol{display:none;background:#fff;border:1px solid var(--garis);border-radius:3px;
  padding:7px 11px;font-size:14px}

.kanvas-bungkus{position:relative;flex:1;min-height:0;overflow:hidden}
#pohon{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#pohon.geser{cursor:grabbing}
.catatan-kosong{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  color:var(--nila-2);font-family:var(--f-display);font-size:17px;pointer-events:none;padding:24px}
.bilah-zum{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;background:var(--paper);
  border:1px solid var(--garis);border-radius:3px;padding:5px}
.bilah-zum button{background:#fff;border:1px solid var(--garis-lo);border-radius:2px;
  width:34px;height:32px;font-size:15px}
.bilah-zum .lbl{display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;
  padding:0 8px;color:var(--nila-3)}

/* Tirai gelap saat rel/panel terbuka di layar kecil */
.tirai-samping{position:absolute;inset:0;background:rgba(16,26,46,.42);z-index:25;display:none}
.tirai-samping.on{display:block}

.panel{width:var(--panel);flex:0 0 var(--panel);background:var(--paper);
  border-left:1px solid var(--garis);display:flex;flex-direction:column;min-height:0}
.tab{display:flex;border-bottom:1px solid var(--garis);background:#fff}
.tab button{flex:1;background:transparent;border:0;padding:12px 5px;font-size:12px;
  border-bottom:2px solid transparent}
.tab button.on{border-bottom-color:var(--kunyit);font-weight:600}
.panel-isi{overflow-y:auto;padding:16px;flex:1;-webkit-overflow-scrolling:touch}
.kepala-orang{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.pas-foto{width:62px;height:62px;flex:0 0 62px;border-radius:3px;overflow:hidden;background:var(--linen);
  display:grid;place-items:center;font-family:var(--f-display);font-size:22px;color:var(--nila-2);
  border:1px solid var(--garis)}
.pas-foto img{width:100%;height:100%;object-fit:cover}
.kepala-orang h3{margin:0;font-family:var(--f-display);font-size:20px;font-weight:600;line-height:1.2;
  overflow-wrap:anywhere}
.kepala-orang .sub{font-family:var(--f-mono);font-size:11px;color:var(--nila-3);margin-top:3px}
.cip-baris{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.cip{font-size:10.5px;padding:2px 7px;border-radius:2px;border:1px solid var(--garis);
  background:#fff;color:var(--nila-2)}
.cip.jade{border-color:rgba(47,125,107,.4);color:var(--jade)}
.cip.emas{border-color:rgba(184,137,31,.45);color:var(--kunyit)}
.daftar-relasi{margin:0 0 6px;padding:0;list-style:none;font-size:13px}
.daftar-relasi li{padding:6px 0;border-bottom:1px dashed var(--garis-lo);display:flex;gap:8px;align-items:center}
.daftar-relasi li:last-child{border-bottom:0}
.pranala{background:none;border:0;padding:0;color:var(--nila);text-decoration:underline;
  text-underline-offset:2px;font-size:13px;text-align:left}
.daftar-relasi .tag{font-family:var(--f-mono);font-size:10px;color:var(--nila-3);margin-left:auto;
  white-space:nowrap}
.aksi-kisi{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:14px 0}
.aksi-kisi .penuh{grid-column:1/-1}
/* Tombol tambah relasi cepat pada panel detail */
.relasi-cepat{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}
.relasi-cepat .btn{justify-content:flex-start;font-size:12.5px;padding:8px 11px}
.relasi-cepat .btn:not([disabled]){border-color:rgba(184,137,31,.42);
  background:linear-gradient(#fff,#FDFBF5)}
.relasi-cepat .btn:not([disabled]):hover{border-color:var(--kunyit);background:#fff}
/* Kotak centang "hanya perkiraan" di bawah isian tanggal */
.cek-kira{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11.5px;
  color:var(--nila-3);cursor:pointer}
.cek-kira input{width:auto;margin:0}
h4.bagian{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nila-3);margin:18px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--garis-lo)}
.galeri{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.galeri figure{margin:0;position:relative;aspect-ratio:1;border:1px solid var(--garis);
  border-radius:3px;overflow:hidden;background:#fff}
.galeri img{width:100%;height:100%;object-fit:cover;display:block}
.galeri .buang{position:absolute;top:3px;right:3px;background:rgba(16,26,46,.78);color:#fff;
  border:0;border-radius:2px;font-size:10px;padding:3px 6px}
.jatuh{border:1px dashed var(--garis);border-radius:3px;padding:14px;text-align:center;
  color:var(--nila-3);font-size:12px;background:#fff}
.catatan-log{list-style:none;margin:0;padding:0;font-size:12.5px}
.catatan-log li{padding:8px 0;border-bottom:1px dashed var(--garis-lo)}
.catatan-log time{font-family:var(--f-mono);font-size:10.5px;color:var(--nila-3);display:block}
.hampa{color:var(--nila-3);font-size:12.5px;padding:22px 4px;text-align:center;line-height:1.6}

/* ── Modal & notifikasi ─────────────────────────────────── */
.tabir{position:fixed;inset:0;background:rgba(16,26,46,.52);display:none;place-items:center;
  z-index:60;padding:18px}
.tabir.on{display:grid}
.modal{background:var(--paper);border-radius:4px;width:min(520px,100%);max-height:88vh;
  max-height:88dvh;overflow-y:auto;border-top:3px solid var(--kunyit);
  box-shadow:0 22px 60px rgba(16,26,46,.34)}
.modal header{padding:16px 20px 0}
.modal header h3{margin:0;font-family:var(--f-display);font-size:19px;font-weight:600}
.modal header p{margin:4px 0 0;font-size:12.5px;color:var(--nila-3)}
.modal .isi{padding:14px 20px}
.modal footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px 18px}
.kisi2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.roti{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:var(--nila);color:#F5F2E9;padding:11px 16px;border-radius:3px;font-size:13px;
  z-index:80;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
  border-left:3px solid var(--kunyit);max-width:88vw}
.roti.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Cetak ──────────────────────────────────────────────── */
#areaCetak{display:none}
#areaCetak .kop-cetak{display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:1.5px solid #1B2A4A;padding-bottom:8px;margin-bottom:14px}
#areaCetak .kop-cetak h1{font-size:20pt;margin:0}
#areaCetak .kop-cetak .m{font-family:var(--f-mono);font-size:8pt;text-align:right;color:#3A5180}
#areaCetak svg{width:100%;height:auto}
@media print{
  @page{size:A3 landscape;margin:12mm}
  body.mencetak{background:#fff;overflow:visible}
  body.mencetak .topbar,body.mencetak .kerja,body.mencetak .tabir,
  body.mencetak .roti,body.mencetak .flash{display:none!important}
  body.mencetak #areaCetak{display:block!important}
}

/* ============================================================
   Layar menengah dan kecil
   ============================================================ */
@media (max-width:1280px){
  :root{--rel:264px;--panel:312px}
  .tag-akar{max-width:170px}
}

/* Tablet dan bawah: rel & panel jadi laci yang menutup kanvas */
@media (max-width:1024px){
  :root{--rel:min(84vw,300px);--panel:min(90vw,340px)}
  .rel,.panel{position:absolute;top:0;bottom:0;z-index:30;
    box-shadow:0 0 34px rgba(16,26,46,.28);transform:translateX(-102%);
    transition:transform .22s ease;will-change:transform}
  .panel{right:0;transform:translateX(102%)}
  .rel.buka,.panel.buka{transform:translateX(0)}
  .ikon-tombol{display:inline-flex}
  .daftar-orang{max-height:none}
}

/* Ponsel */
@media (max-width:700px){
  :root{--bar:52px}
  .topbar{gap:10px;padding:0 10px}
  .brand .mark{font-size:9px;padding:3px 6px}
  .nav a{padding:7px 8px;font-size:12.5px}
  .akun{gap:8px}
  .akun .badge-role,.akun .nm{display:none}

  .wadah{padding:18px 13px 48px}
  h1{font-size:21px}
  .judul-baris{gap:12px;margin-bottom:16px}
  .judul-baris .aksi-baris{margin-left:0;width:100%}
  .judul-baris .aksi-baris .btn{flex:1}
  .kisi-tree{grid-template-columns:1fr}
  .kartu-form{padding:15px}
  .flash{margin:10px 13px -2px}

  /* Bilah alat: satu baris yang bisa digulir mendatar, bukan menumpuk */
  .bilah{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 10px;gap:7px}
  .bilah::-webkit-scrollbar{display:none}
  .bilah>*{flex:0 0 auto}
  .isi-sisa{display:none}
  .seg button{padding:7px 9px;font-size:12px}
  .tag-akar{max-width:140px}
  #tgPanel{margin-left:auto}

  .bilah-zum{left:10px;bottom:10px}
  .catatan-kosong{font-size:15px}
  .aksi-usulan input[type=text]{min-width:100%}
  .aksi-usulan .btn{flex:1}
  .kisi2{grid-template-columns:1fr}
  .modal footer{flex-direction:column-reverse}
  .modal footer .btn{width:100%}
  .roti{left:13px;right:13px;bottom:14px;transform:translateY(12px);max-width:none}
  .roti.on{transform:translateY(0)}
  dl.kv{grid-template-columns:82px 1fr}
}

@media (max-width:400px){
  .aksi-kisi,.relasi-cepat{grid-template-columns:1fr}
  .galeri{grid-template-columns:repeat(2,1fr)}
}

/* Hormati preferensi kurangi gerak */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}