/* =========================================================
   iBorneo-Ticketing — Gaya Aplikasi

   Diturunkan langsung dari mockup-ticketing.html v0.2. Nama kelas
   dipertahankan apa adanya supaya potongan tata letak dari mockup bisa
   ditempel ke halaman PHP tanpa diterjemahkan ulang — dan supaya kalau
   mockup itu dibuka lagi untuk membandingkan, yang terlihat di layar
   memang benda yang sama.

   Yang DIBUANG dari mockup: chrome dokumennya (.doc-head, .tabbar,
   .stage, .frame, .phones, .ph) — itu perangkat presentasi, bukan
   bagian aplikasi.

   Yang DITAMBAH: kontrol form sungguhan. Mockup memalsukan input dengan
   div ber-border; di sini input, select, dan textarea diberi gaya yang
   sama supaya hasilnya tidak berbeda dari yang sudah disetujui.
   ========================================================= */

:root{
  --bg:#EDF1F1; --surface:#FFFFFF; --surface-2:#F4F8F8; --surface-3:#E9F0F0;
  --ink:#0E1618; --ink-2:#2C3D41; --muted:#56686C;
  --line:#CBD8D9; --line-strong:#A3B9BC;
  /* Batas kontrol form. Dipisah dari --line karena WCAG 1.4.11 menuntut
     3:1 untuk batas komponen antarmuka, sementara --line (1,46:1 di atas
     putih) sengaja lemah supaya garis tabel tidak berisik. Kotak isian
     yang tepinya nyaris tak terlihat bukan soal selera — teknisi mengisi
     form ini di HP di bawah matahari. */
  --line-field:#768E92;
  /* Teks tombol solid. Lihat blok tombol di bawah untuk alasannya. */
  --btn-ink:#FFFFFF;
  --accent:#0A6E77; --accent-ink:#08565D; --accent-soft:#DBEBEC;
  --ok:#14713F; --ok-bg:#DFF0E6; --ok-bar:#2E8B5B;
  --warn:#8A5705; --warn-bg:#F7EAD3; --warn-bar:#C68A19;
  --crit:#9E241F; --crit-bg:#F7E1DF; --crit-bar:#C0453D;
  --nav:#0E1F22; --nav-ink:#CFE2E2; --nav-muted:#7E9A9C; --nav-line:#1E3437;
  --font-display:"Bahnschrift","DIN Alternate","Roboto Condensed","Avenir Next Condensed",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Cascadia Mono","SF Mono",ui-monospace,Consolas,"Liberation Mono",monospace;
}

/* Mode gelap mengikuti setelan perangkat. Teknisi memakai aplikasi ini
   di dalam ruang ATM yang gelap dan di bawah matahari siang pada hari
   yang sama; keduanya tidak bisa dilayani satu palet. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C1416; --surface:#111E21; --surface-2:#16262A; --surface-3:#1C2E33;
    --ink:#E3EDEE; --ink-2:#C3D5D7; --muted:#8DA3A7;
    --line:#22383D; --line-strong:#37585F; --line-field:#527A84;
    --btn-ink:#07191B;
    --accent:#4AC7D0; --accent-ink:#84DEE4; --accent-soft:#0F3339;
    --ok:#5FC792; --ok-bg:#12301F; --ok-bar:#3E9B6B;
    --warn:#E2AC40; --warn-bg:#33260C; --warn-bar:#B8862B;
    --crit:#F07A70; --crit-bg:#3A1A17; --crit-bar:#C05248;
    --nav:#081214; --nav-ink:#C6DCDD; --nav-muted:#71898B; --nav-line:#16282B;
  }
}
:root[data-theme="dark"]{
  --bg:#0C1416; --surface:#111E21; --surface-2:#16262A; --surface-3:#1C2E33;
  --ink:#E3EDEE; --ink-2:#C3D5D7; --muted:#8DA3A7;
  --line:#22383D; --line-strong:#37585F; --line-field:#527A84;
  --btn-ink:#07191B;
  --accent:#4AC7D0; --accent-ink:#84DEE4; --accent-soft:#0F3339;
  --ok:#5FC792; --ok-bg:#12301F; --ok-bar:#3E9B6B;
  --warn:#E2AC40; --warn-bg:#33260C; --warn-bar:#B8862B;
  --crit:#F07A70; --crit-bg:#3A1A17; --crit-bar:#C05248;
  --nav:#081214; --nav-ink:#C6DCDD; --nav-muted:#71898B; --nav-line:#16282B;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
p{margin:0}
a{color:var(--accent-ink)}
img{max-width:100%;height:auto}

/* ---------- rangka aplikasi ---------- */
.app{display:grid;grid-template-columns:200px 1fr;min-height:100vh}
.nav{background:var(--nav);color:var(--nav-ink);padding:.9rem 0;display:flex;flex-direction:column;gap:.15rem}
.nav .brand{padding:.3rem 1rem 1rem;display:flex;align-items:baseline;gap:.45rem}
.nav .brand b{font-family:var(--font-display);font-size:1.02rem;letter-spacing:.02em;color:#fff}
.nav .brand span{font-family:var(--font-mono);font-size:.62rem;color:var(--nav-muted);letter-spacing:.1em}
.nav .grp{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nav-muted);padding:.9rem 1rem .35rem}
.nav a{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.42rem 1rem;font-size:.83rem;color:var(--nav-ink);text-decoration:none;border-left:2px solid transparent}
.nav a:hover{background:rgba(255,255,255,.05)}
.nav a.on{background:rgba(255,255,255,.08);border-left-color:var(--accent);color:#fff;font-weight:600}
.nav .cnt{font-family:var(--font-mono);font-size:.68rem;background:rgba(255,255,255,.1);padding:.05rem .3rem;border-radius:2px;color:var(--nav-ink)}
.nav .cnt.hot{background:var(--crit-bar);color:#fff}
/* Entri menu yang halamannya belum dibangun. Tampil, tapi tidak bisa
   diklik — lihat alasannya di includes/header.php. */
.nav .belum{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.42rem 1rem;font-size:.83rem;color:var(--nav-muted);border-left:2px solid transparent;cursor:default}
.nav .belum .cnt{background:none;border:1px solid var(--nav-line);color:var(--nav-muted);font-size:.6rem}
.nav .kaki{margin-top:auto;padding:1rem;border-top:1px solid var(--nav-line);font-family:var(--font-mono);font-size:.62rem;color:var(--nav-muted)}
.nav .kaki a{color:var(--nav-muted);padding:0;border:none;display:inline}

.body{background:var(--surface-2);display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.1rem;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.top h3{font-family:var(--font-display);font-size:1rem;margin:0;font-weight:600}
.top .crumb{font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}
.spacer{flex:1}
.who{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--ink-2)}
.av{width:24px;height:24px;border-radius:2px;background:var(--accent-soft);color:var(--accent-ink);font-family:var(--font-mono);font-size:.64rem;display:grid;place-items:center;border:1px solid var(--accent)}
.content{padding:1.1rem;display:flex;flex-direction:column;gap:1.1rem;min-width:0}

/* ---------- dasar ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:2px}
.card-h{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-h h4{font-family:var(--font-display);font-size:.88rem;font-weight:600;margin:0}
.card-h .sub{font-family:var(--font-mono);font-size:.68rem;color:var(--muted)}
.card-b{padding:.9rem}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:.75rem .85rem}
.tile .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tile .v{font-family:var(--font-display);font-size:1.75rem;font-weight:600;line-height:1.15;margin-top:.2rem;font-variant-numeric:tabular-nums}
.tile .d{font-size:.72rem;color:var(--muted);margin-top:.1rem}
.tile.warn .v{color:var(--warn)} .tile.crit .v{color:var(--crit)} .tile.ok .v{color:var(--ok)}
a.tile{text-decoration:none;color:inherit;display:block}
a.tile:hover{border-color:var(--line-strong)}

table.g{border-collapse:collapse;width:100%;font-size:.8rem;font-variant-numeric:tabular-nums}
table.g th{font-family:var(--font-display);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.5rem .7rem;background:var(--surface-2);border-bottom:1px solid var(--line-strong);white-space:nowrap}
table.g td{padding:.5rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.g tr:last-child td{border-bottom:none}
table.g td.m,table.g th.m{font-family:var(--font-mono);font-size:.73rem;white-space:nowrap}
table.g td.r,table.g th.r{text-align:right;font-family:var(--font-mono);font-size:.75rem}
table.g tbody tr:hover{background:var(--surface-2)}
table.g td a{font-weight:600}
.scrollx{overflow-x:auto}
.kosong{padding:1.4rem .9rem;text-align:center;font-family:var(--font-mono);font-size:.74rem;color:var(--muted)}

.pill{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;padding:.1rem .38rem;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
.p-crit{color:var(--crit);background:var(--crit-bg)} .p-warn{color:var(--warn);background:var(--warn-bg)}
.p-ok{color:var(--ok);background:var(--ok-bg)} .p-mut{color:var(--muted);background:var(--surface-2)}
.p-acc{color:var(--accent-ink);background:var(--accent-soft)}

.meter{height:5px;background:var(--surface-3);border-radius:3px;overflow:hidden;min-width:56px}
.meter i{display:block;height:100%;border-radius:3px;background:var(--ok-bar)}
.meter.w i{background:var(--warn-bar)} .meter.c i{background:var(--crit-bar)}
.meterrow{display:flex;align-items:center;gap:.5rem}
.meterrow .meter{flex:1}

.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.82rem;margin:0}
.kv dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.kv dd{margin:0}

.cols{display:grid;gap:1.1rem}
.c-2{grid-template-columns:1fr 1fr}
.c-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c-32{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
@media (max-width:900px){.c-2,.c-3,.c-32{grid-template-columns:1fr}}

.note{font-family:var(--font-mono);font-size:.73rem;color:var(--muted);line-height:1.6;border-left:2px solid var(--line-strong);padding-left:.7rem}
.legendrow{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-family:var(--font-mono);font-size:.68rem;color:var(--muted);align-items:center}
.legendrow b{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.3rem;vertical-align:-1px}

/* ---------- papan dispatch ---------- */
.kan{display:flex;gap:.65rem;overflow-x:auto;padding-bottom:.4rem}
.kcol{flex:0 0 226px;display:flex;flex-direction:column;gap:.5rem}
.kcol-h{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.2rem .1rem;border-bottom:1px solid var(--line-strong)}
.kcol-h b{font-family:var(--font-mono);color:var(--ink)}
.tk{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:2px;padding:.55rem .6rem;display:flex;flex-direction:column;gap:.3rem;text-decoration:none;color:inherit}
.tk:hover{border-color:var(--line-strong)}
.tk.p1{border-left-color:var(--crit-bar)} .tk.p2{border-left-color:var(--warn-bar)}
.tk.p3{border-left-color:var(--accent)} .tk.p4{border-left-color:var(--line-strong)}
.tk .no{font-family:var(--font-mono);font-size:.68rem;color:var(--muted);display:flex;justify-content:space-between;gap:.4rem}
.tk .ttl{font-size:.79rem;font-weight:600;line-height:1.3}
.tk .sub{font-size:.71rem;color:var(--muted);line-height:1.35}
.tk .ft{display:flex;align-items:center;gap:.4rem;margin-top:.1rem;font-family:var(--font-mono);font-size:.66rem;color:var(--muted)}
.tk .ft .meter{flex:1}
.av-s{width:19px;height:19px;border-radius:2px;background:var(--surface-3);color:var(--ink-2);font-family:var(--font-mono);font-size:.58rem;display:grid;place-items:center;border:1px solid var(--line);flex:0 0 auto}

.chips{display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.3rem}
.chips a{flex:0 0 auto;font-family:var(--font-mono);font-size:.68rem;padding:.22rem .5rem;border:1px solid var(--line-field);background:var(--surface);color:var(--muted);border-radius:2px;text-decoration:none}
.chips a.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:600}

/* ---------- foto & stempel ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:.6rem}
.shot{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--surface-3);display:block}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .tag{position:absolute;top:5px;left:5px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:#DCEBE9;background:rgba(0,0,0,.55);padding:.08rem .3rem;border-radius:2px}
.shot .wm{position:absolute;left:0;right:0;bottom:0;background:rgba(5,13,15,.76);padding:3px 5px;font-family:var(--font-mono);font-size:.55rem;line-height:1.4;color:#BFDCD6;letter-spacing:.02em}
.shot .wm b{display:block;font-weight:600;color:#E8F5F2}
.shot.empty{background:var(--surface-2);border-style:dashed;display:grid;place-items:center}
.shot.empty span{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);text-align:center;padding:0 .5rem}

/* ---------- garis waktu ---------- */
.tl{display:flex;flex-direction:column}
.tl-i{display:grid;grid-template-columns:64px 12px 1fr;gap:.5rem;padding:.4rem 0}
.tl-i .t{font-family:var(--font-mono);font-size:.68rem;color:var(--muted);text-align:right;padding-top:.1rem}
.tl-i .rail{position:relative}
.tl-i .rail::before{content:"";position:absolute;left:5px;top:0;bottom:-.8rem;width:1px;background:var(--line)}
.tl-i:last-child .rail::before{display:none}
.tl-i .rail i{position:absolute;left:2px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--line-strong);border:1px solid var(--surface)}
.tl-i.acc .rail i{background:var(--accent)}
.tl-i .b{font-size:.78rem;line-height:1.4}
.tl-i .b em{font-style:normal;font-weight:600}
.tl-i .b small{display:block;color:var(--muted);font-family:var(--font-mono);font-size:.66rem}

/* ---------- tombol ----------

   Warna teks tombol solid diambil dari token --btn-ink, yang ikut
   berganti tema: putih di atas teal gelap (mode terang), hampir hitam
   di atas teal terang (mode gelap).

   Dulu ini ditangani dua aturan bertema yang menimpa `.btn` — dan
   keduanya salah, karena ikut menimpa `.btn.ghost` yang latarnya
   transparan. Hasilnya tombol ghost bertulisan hampir hitam di atas
   latar hampir hitam: tombolnya ada, teksnya tidak terlihat. Aturan
   bertema itu juga menang spesifisitas atas `.btn.ghost` (0,3,0 lawan
   0,2,0), jadi tidak bisa dibetulkan dengan menaruh ghost di bawahnya.

   Dengan token, `.btn` (0,1,0) kalah dari `.btn.ghost` (0,2,0) secara
   wajar — varian mana pun bisa menyetel warnanya sendiri tanpa
   berkelahi dengan media query. */
.btn{appearance:none;border:1px solid var(--accent);background:var(--accent);color:var(--btn-ink);font-family:var(--font-display);font-size:.86rem;letter-spacing:.03em;padding:.6rem;border-radius:2px;width:100%;cursor:pointer;text-align:center;text-decoration:none;display:inline-block}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--muted);border-color:var(--line-field)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-strong)}
.btn.bahaya{background:var(--crit-bg);border-color:var(--crit);color:var(--crit)}
.btn.bahaya:hover{background:var(--crit);color:var(--surface)}
.btn.sm{font-size:.76rem;padding:.36rem .6rem;width:auto}
.btn.lg{font-size:1rem;padding:.85rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* ---------- form ---------- */
/* Mockup memalsukan input dengan div; ini padanannya yang sungguhan,
   dibuat sedekat mungkin supaya tampilan yang sudah disetujui tidak
   berubah begitu diisi orang. */
.fld-lbl{display:block;font-family:var(--font-mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.fld-lbl .wajib{color:var(--crit)}
.fld-box{border:1px solid var(--line-field);background:var(--surface);border-radius:2px;padding:.45rem .55rem;font-size:.8rem;line-height:1.45}
input[type=text],input[type=password],input[type=number],input[type=date],
input[type=datetime-local],input[type=tel],input[type=email],input[type=search],
select,textarea{
  width:100%;border:1px solid var(--line-field);background:var(--surface);color:var(--ink);
  border-radius:2px;padding:.45rem .55rem;font-size:.84rem;font-family:var(--font-body);line-height:1.45;
}
input[type=number],input[type=tel]{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
textarea{min-height:80px;resize:vertical}
select{cursor:pointer}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.hint{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);margin-top:.22rem;line-height:1.5}
.frow{display:flex;flex-direction:column;gap:.9rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:720px){.fgrid{grid-template-columns:1fr}}

.srch{font-family:var(--font-mono);font-size:.75rem;min-width:200px;width:auto}

.seg{display:flex;gap:.3rem;font-family:var(--font-mono);font-size:.63rem}
.seg span{flex:1;text-align:center;padding:.28rem .2rem;border:1px solid var(--line-field);border-radius:2px;color:var(--muted);background:var(--surface-2)}
.seg span.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:600}

.opt{display:flex;flex-direction:column;gap:.35rem}
.opt label{display:flex;gap:.5rem;align-items:flex-start;border:1px solid var(--line-field);border-radius:2px;padding:.45rem .55rem;background:var(--surface);font-size:.8rem;cursor:pointer}
.opt label:hover{border-color:var(--line-strong)}
.opt label.on{border-color:var(--accent);background:var(--accent-soft)}
.opt label input{width:auto;flex:0 0 auto;margin:.3rem 0 0;accent-color:var(--accent)}
.opt label small{display:block;color:var(--muted);font-size:.7rem}
.opt label span{min-width:0}

.cek{display:flex;gap:.45rem;align-items:flex-start;font-size:.82rem;cursor:pointer}
.cek input{width:auto;flex:0 0 auto;margin:.32rem 0 0;accent-color:var(--accent)}

/* ---------- pesan ---------- */
.alert{border:1px solid var(--line);border-left-width:3px;border-radius:2px;padding:.65rem .8rem;font-size:.82rem;line-height:1.55}
.alert-ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.alert-warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.alert-bad{background:var(--crit-bg);border-color:var(--crit);color:var(--crit)}
.alert ul{margin:.3rem 0 0;padding-left:1.1rem}

/* ---------- layar teknisi (HP) ---------- */
/* Bukan tiruan frame HP seperti di mockup — ini gaya sungguhan untuk
   halaman yang dibuka di HP. Tombol aksi lebar penuh dan tinggi, karena
   dipakai berdiri di depan mesin, sering dengan satu tangan. */
.hp{max-width:520px;margin:0 auto;padding:.8rem;display:flex;flex-direction:column;gap:.8rem}
.hp-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:var(--nav);color:var(--nav-ink);margin:-.8rem -.8rem 0}
.hp-bar b{font-family:var(--font-display);font-size:.92rem;color:#fff}
.hp-bar a{color:var(--nav-ink);text-decoration:none;font-family:var(--font-mono);font-size:.7rem}
.hp .btn{padding:.85rem;font-size:.95rem}
.step{display:flex;gap:.4rem;align-items:center;font-family:var(--font-mono);font-size:.62rem;color:var(--muted)}
.step i{flex:1;height:3px;background:var(--surface-3);border-radius:2px}
.step i.done{background:var(--ok-bar)} .step i.now{background:var(--accent)}
.hitung{font-family:var(--font-mono);font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums}
.hitung.w{color:var(--warn)} .hitung.c{color:var(--crit)}

@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .nav{flex-direction:row;overflow-x:auto;padding:.4rem;gap:.3rem;align-items:center}
  .nav .grp,.nav .brand span,.nav .kaki{display:none}
  .nav .brand{padding:.2rem .6rem}
  .nav a{border-left:none;border-bottom:2px solid transparent;white-space:nowrap}
  .nav a.on{border-left-color:transparent;border-bottom-color:var(--accent)}
  .content{padding:.8rem}
}

/* ---------- halaman tanpa rangka (login, pemasang) ---------- */
.tengah{max-width:820px;margin:0 auto;padding:2.4rem 1.1rem 3rem;display:flex;flex-direction:column;gap:1.1rem}
.tengah.sempit{max-width:400px}
.merek{display:flex;align-items:center;gap:.7rem;margin-bottom:.4rem}
.merek-tanda{width:38px;height:38px;border-radius:3px;background:var(--accent);display:grid;place-items:center;flex:0 0 auto}
.merek-tanda svg{width:21px;height:21px}
.merek h1{font-family:var(--font-display);font-size:1.25rem;font-weight:600;letter-spacing:.02em;margin:0}
.merek p{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);margin:0}

@media print{
  .nav,.top .btn,.btnrow,.chips{display:none !important}
  .app{grid-template-columns:1fr}
  body{background:#fff}
  .card{break-inside:avoid}
}