/* =====================================================================
   KOST 34 — gaya tampilan
   Tema hijau zamrud, ramah sentuh, ringan (tanpa kerangka CSS luar).
   ===================================================================== */
:root{
  --hijau:#0f7a5a; --hijau-tua:#0a5b43; --hijau-muda:#e7f5f0; --hijau-garis:#bfe3d6;
  --emas:#b98a2f; --emas-muda:#fdf6e6;
  --teks:#12261f; --redup:#6b7f78; --garis:#dfe9e5; --latar:#f4f8f6; --putih:#fff;
  --merah:#c0392b; --merah-muda:#fdecea; --kuning:#a8760a; --kuning-muda:#fdf3e0;
  --biru:#1f5f8b; --biru-muda:#e8f1f8;
  --radius:12px; --bayang:0 1px 3px rgba(16,60,45,.08),0 8px 24px rgba(16,60,45,.06);
  --lebar-sisi:216px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--latar); color:var(--teks); font-size:15px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}
h1,h2,h3,h4{margin:0 0 .4rem;line-height:1.25}
h2{font-size:1.22rem} h3{font-size:1.02rem}
a{color:var(--hijau)}
small{font-size:.82rem}

/* ------------------------------------------------------------- tombol */
.tombol{
  display:inline-flex;align-items:center;gap:.4rem;justify-content:center;
  padding:.52rem .9rem;border:1px solid var(--garis);border-radius:9px;
  background:var(--putih);cursor:pointer;font-weight:600;font-size:.9rem;
  transition:.15s; white-space:nowrap;
}
.tombol:hover{border-color:var(--hijau);color:var(--hijau-tua);background:#f7fcfa}
.tombol:active{transform:translateY(1px)}
.tombol.utama{background:var(--hijau);border-color:var(--hijau);color:#fff}
.tombol.utama:hover{background:var(--hijau-tua);border-color:var(--hijau-tua);color:#fff}
.tombol.bahaya{color:var(--merah);border-color:#f0c8c2}
.tombol.bahaya:hover{background:var(--merah-muda);border-color:var(--merah);color:var(--merah)}
.tombol.kecil{padding:.34rem .62rem;font-size:.82rem;border-radius:8px}
.tombol.lebar{width:100%}
.tombol:disabled{opacity:.55;cursor:not-allowed}
.tombol-ikon{
  border:1px solid var(--garis);background:var(--putih);border-radius:9px;
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;font-size:1.05rem;
}
.tombol-ikon:hover{border-color:var(--hijau);background:#f7fcfa}

/* ------------------------------------------------------------- masuk */
.layar-masuk{min-height:100vh;display:grid;place-items:center;padding:1.2rem;
  background:linear-gradient(150deg,var(--hijau-tua),var(--hijau) 55%,#12a077)}
.kartu-masuk{
  background:var(--putih);border-radius:16px;padding:1.7rem;width:100%;max-width:390px;
  box-shadow:0 18px 50px rgba(6,40,30,.28)
}
.merek{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.merek-ikon{font-size:2rem;line-height:1}
.merek-ikon.kecil{font-size:1.4rem}
.merek h1{font-size:1.35rem;margin:0;letter-spacing:.5px}
.merek p{margin:0;color:var(--redup);font-size:.84rem}
.kartu-masuk label{display:block;margin-bottom:.85rem;font-weight:600;font-size:.88rem;color:#33534a}
.kartu-masuk input{
  width:100%;padding:.66rem .75rem;border:1px solid var(--garis);border-radius:9px;
  margin-top:.3rem;font-weight:400;background:#fbfdfc
}
.kartu-masuk input:focus{outline:2px solid var(--hijau-garis);border-color:var(--hijau)}
/* tombol lihat/sembunyikan sandi */
.kolom-sandi{position:relative;display:block;margin-top:.3rem}
.kolom-sandi input{margin-top:0;padding-right:2.7rem}
.lihat-sandi{
  position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;line-height:0;
  padding:.4rem;border-radius:7px;color:#5b7d72
}
.lihat-sandi svg{width:19px;height:19px;display:block}
.lihat-sandi:hover{background:#eef7f3;color:var(--hijau-tua)}
.lihat-sandi:focus-visible{outline:2px solid var(--hijau-garis)}
.catatan-kecil{color:var(--redup);font-size:.78rem;text-align:center;margin:.9rem 0 0}

/* ------------------------------------------------------------- kerangka */
.aplikasi{min-height:100vh;display:flex;flex-direction:column}
.kepala{
  display:flex;align-items:center;gap:.7rem;padding:.55rem .9rem;background:var(--putih);
  border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:30
}
.kepala-merek{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0}
.kepala-merek strong{display:block;font-size:1rem;letter-spacing:.4px}
.kepala-merek small{color:var(--redup);display:block;font-size:.74rem}
.kepala-kanan{display:flex;align-items:center;gap:.5rem}
#bMenu{display:none}
.badan{display:flex;flex:1;min-height:0}

/* ------------------------------------------------------------- sisi kiri */
.sisi{
  width:var(--lebar-sisi);flex:0 0 var(--lebar-sisi);background:var(--putih);
  border-right:1px solid var(--garis);padding:.6rem .5rem;display:flex;flex-direction:column;gap:.18rem
}
.nav{
  display:flex;align-items:center;gap:.6rem;padding:.56rem .7rem;border:0;border-radius:9px;
  background:transparent;cursor:pointer;text-align:left;font-weight:600;font-size:.9rem;color:#2c4b42
}
.nav span{font-size:1.05rem;width:1.3rem;text-align:center}
.nav:hover{background:var(--hijau-muda)}
.nav.aktif{background:var(--hijau);color:#fff}
.tutup-sisi{position:fixed;inset:0;background:rgba(8,40,30,.35);z-index:19;border:0}

.isi{flex:1;min-width:0;padding:1.1rem 1.25rem 3rem;overflow-x:hidden}
.memuat{color:var(--redup);padding:2rem 0;text-align:center}

/* ------------------------------------------------------------- kepala halaman */
.kepala-hal{display:flex;align-items:flex-end;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.kepala-hal .judul{flex:1;min-width:190px}
.kepala-hal h2{margin:0}
.kepala-hal p{margin:.15rem 0 0;color:var(--redup);font-size:.85rem}
.aksi-hal{display:flex;gap:.45rem;flex-wrap:wrap}

/* ------------------------------------------------------------- kartu statistik */
.statistik{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.75rem;margin-bottom:1.1rem}
.stat{background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);
  padding:.85rem .95rem;box-shadow:var(--bayang);position:relative;overflow:hidden}
.stat .label{color:var(--redup);font-size:.76rem;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.stat .nilai{font-size:1.5rem;font-weight:800;margin-top:.2rem;letter-spacing:-.4px}
.stat .catatan{color:var(--redup);font-size:.78rem;margin-top:.15rem}
.stat.hijau .nilai{color:var(--hijau)} .stat.emas .nilai{color:var(--emas)}
.stat.merah .nilai{color:var(--merah)} .stat.biru .nilai{color:var(--biru)}
.stat.emas{background:linear-gradient(180deg,var(--emas-muda),var(--putih))}

/* ------------------------------------------------------------- kartu & panel */
.kartu{background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);
  box-shadow:var(--bayang);margin-bottom:1rem;overflow:hidden}
.kartu-kepala{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.75rem .95rem;border-bottom:1px solid var(--garis);background:#fbfdfc}
.kartu-kepala h3{margin:0;flex:1}
.kartu-isi{padding:.9rem .95rem}
.kartu-isi.rapat{padding:0}
.baris{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem}
.dua{display:grid;grid-template-columns:1.35fr 1fr;gap:1rem;align-items:start}
@media (max-width:940px){.dua{grid-template-columns:1fr}}

/* ------------------------------------------------------------- tabel */
.bungkus-tabel{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:.58rem .7rem;text-align:left;border-bottom:1px solid var(--garis);vertical-align:middle}
th{background:#f7fbf9;font-size:.76rem;text-transform:uppercase;letter-spacing:.45px;color:#3d5c53;font-weight:700;white-space:nowrap}
tbody tr:hover{background:#fbfdfc}
tbody tr:last-child td{border-bottom:0}
td.angka,th.angka{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.aksi{white-space:nowrap;text-align:right}
td.aksi .tombol{padding:.28rem .5rem;font-size:.76rem}
.kosong{padding:1.6rem;text-align:center;color:var(--redup)}
.kosong .besar{font-size:1.8rem;display:block;margin-bottom:.3rem}

/* ------------------------------------------------------------- label status */
.pil{display:inline-block;padding:.16rem .55rem;border-radius:99px;font-size:.74rem;
  font-weight:700;border:1px solid transparent;white-space:nowrap}
.pil.hijau{background:var(--hijau-muda);color:var(--hijau-tua);border-color:var(--hijau-garis)}
.pil.kuning{background:var(--kuning-muda);color:var(--kuning);border-color:#f0dcb4}
.pil.merah{background:var(--merah-muda);color:var(--merah);border-color:#f2cec8}
.pil.biru{background:var(--biru-muda);color:var(--biru);border-color:#c8ddec}
.pil.abu{background:#eef2f0;color:var(--redup);border-color:var(--garis)}

/* ------------------------------------------------------------- borang */
.borang{display:grid;gap:.7rem}
.borang label{font-weight:600;font-size:.82rem;color:#33534a;display:block}
.borang input,.borang select,.borang textarea{
  width:100%;padding:.55rem .65rem;border:1px solid var(--garis);border-radius:9px;
  margin-top:.22rem;background:#fbfdfc;font-weight:400
}
.borang input:focus,.borang select:focus,.borang textarea:focus{
  outline:2px solid var(--hijau-garis);border-color:var(--hijau)}
.borang .ganda{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.borang .tiga{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem}
@media (max-width:560px){.borang .ganda,.borang .tiga{grid-template-columns:1fr}}
.petunjuk{color:var(--redup);font-size:.76rem;margin-top:.15rem}
.kotak-aksi{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;
  padding-top:.7rem;border-top:1px dashed var(--garis);margin-top:.2rem}

/* ------------------------------------------------------------- saringan */
.saringan{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end}
.saringan label{font-size:.76rem;font-weight:700;color:var(--redup);display:block}
.saringan input,.saringan select{padding:.42rem .55rem;border:1px solid var(--garis);
  border-radius:8px;background:#fbfdfc;margin-top:.15rem}
.saringan .cari{flex:1;min-width:150px}

/* ------------------------------------------------------------- pesan & galat */
.galat{background:var(--merah-muda);color:var(--merah);padding:.5rem .7rem;border-radius:9px;
  font-size:.85rem;margin-top:.7rem;border:1px solid #f2cec8}
.pesan{position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:120;
  background:#123c30;color:#fff;padding:.62rem 1.05rem;border-radius:99px;font-size:.88rem;
  box-shadow:0 10px 30px rgba(6,40,30,.3);max-width:92vw;text-align:center}
.pesan.gagal{background:var(--merah)}
.pesan.sukses{background:var(--hijau-tua)}

/* ------------------------------------------------------------- jendela */
.tumpuk{position:fixed;inset:0;background:rgba(8,40,30,.42);z-index:100;
  display:grid;place-items:center;padding:1rem;overflow:auto}
.jendela{background:var(--putih);border-radius:14px;width:100%;max-width:600px;
  box-shadow:0 24px 60px rgba(6,40,30,.3);max-height:92vh;display:flex;flex-direction:column}
.jendela.sempit{max-width:430px}
.jendela.lebar{max-width:820px}
.jendela-kepala{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:1px solid var(--garis)}
.jendela-kepala h3{margin:0;flex:1}
.jendela-isi{padding:1rem;overflow:auto}
.jendela-kaki{display:flex;gap:.5rem;justify-content:flex-end;padding:.8rem 1rem;
  border-top:1px solid var(--garis);background:#fbfdfc;border-radius:0 0 14px 14px}

/* ------------------------------------------------------------- turun pengguna */
.menu-pengguna{position:relative}
.turun{position:absolute;right:0;top:calc(100% + .4rem);background:var(--putih);
  border:1px solid var(--garis);border-radius:11px;box-shadow:var(--bayang);min-width:200px;z-index:40;overflow:hidden}
.turun-kepala{padding:.7rem .85rem;border-bottom:1px solid var(--garis);background:#fbfdfc}
.turun-kepala strong{display:block;font-size:.9rem}
.turun-kepala small{color:var(--redup)}
.turun button{display:block;width:100%;text-align:left;padding:.62rem .85rem;border:0;
  background:transparent;cursor:pointer;font-size:.88rem}
.turun button:hover{background:var(--hijau-muda)}

/* ------------------------------------------------------------- daftar simpel */
.daftar{list-style:none;margin:0;padding:0}
.daftar li{display:flex;align-items:center;gap:.7rem;padding:.62rem .9rem;border-bottom:1px solid var(--garis)}
.daftar li:last-child{border-bottom:0}
.daftar .utama-teks{flex:1;min-width:0}
.daftar .utama-teks strong{display:block;font-size:.9rem}
.daftar .utama-teks small{color:var(--redup)}

/* ------------------------------------------------------------- cetak kuitansi */
.layar-cetak{position:fixed;inset:0;background:#5e6b67;z-index:110;display:flex;flex-direction:column}
.bilah-cetak{display:flex;gap:.5rem;padding:.6rem .9rem;background:#123c30;color:#fff}
.bilah-cetak .jarak{flex:1}
.bilah-cetak .tombol{background:#fff;border-color:#fff;color:var(--hijau-tua)}
/* Tombol cetak: tanpa `color` eksplisit ia mewarisi putih dari bilah hijau,
   sehingga tulisan putih menghilang di atas tombol putih. */
.bilah-cetak .tombol.utama{background:var(--kuning,#d9a520);border-color:var(--kuning,#d9a520);color:#2b2210}
.isi-cetak{flex:1;overflow:auto;padding:1.1rem}
.kertas{
  background:#fff;max-width:760px;margin:0 auto;padding:1.6rem 1.8rem;
  box-shadow:0 12px 40px rgba(0,0,0,.25);border-radius:4px;color:#12261f
}
.kop{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  border-bottom:2px solid var(--hijau);padding-bottom:.55rem}
.kop-kiri .judul{font-size:1.45rem;font-weight:800;color:var(--hijau-tua);letter-spacing:1px;line-height:1.1}
.kop-kiri .no{font-size:.82rem;color:var(--redup);margin-top:.15rem}
.kop-kanan{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center}
.kop .logo{width:132px;height:auto;object-fit:contain;flex:0 0 auto;display:block}
.kop-kanan .nama strong{display:block;font-size:.95rem;color:var(--hijau-tua);letter-spacing:.5px}
.kop-kanan .nama small{display:block;font-size:.72rem;color:var(--redup);max-width:270px;line-height:1.35;margin-top:.1rem}
/* Satu lembar saja per kuitansi — tidak ada lagi lembar "Arsip"/"Asli". */
.lembar+.lembar{margin-top:1.5rem;padding-top:1.4rem;border-top:1px dashed var(--garis)}
/* Periode sewa di daftar tagihan: jangan biarkan tanggal terpenggal di tengah
   frasa ('01 Oktober 2026 s/d 01' lalu 'November 2026' di baris berikutnya). */
td .periode{white-space:nowrap;display:inline-block;font-weight:600}
td .periode-kecil{white-space:nowrap;display:inline-block;color:var(--redup)}
/* Tabel tagihan punya 10 kolom; rapatkan sedikit agar tidak perlu geser
   horizontal di layar laptop (kolom periode sewa memakan ruang lebih). */
table.rapat{font-size:12.4px}
table.rapat th,table.rapat td{padding:8px 7px}
.kuitansi-tabel{width:100%;border-collapse:collapse;font-size:.92rem}
.kuitansi-tabel td{padding:.5rem .3rem;border:0;vertical-align:top}
.kuitansi-tabel td.label{width:26%;color:var(--redup)}
.kuitansi-tabel td.titik{width:2%;text-align:center;color:var(--redup)}
.kuitansi-tabel td.isi{font-weight:600}
/* baris nominal: nilai + garis emas di kiri, kota/tanggal + TTD di kanan */
.jumlah-kuitansi{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1.4rem;margin-top:1.6rem;flex-wrap:wrap}
.jumlah-kuitansi .kotak{display:inline-block;min-width:210px}
.jumlah-kuitansi .kotak .label{display:block;font-size:.8rem;color:var(--redup)}
.jumlah-kuitansi .kotak .nilai{display:block;font-size:1.5rem;font-weight:800;color:var(--teks);
  border-bottom:3px solid var(--emas);padding-bottom:.12rem;margin-top:.1rem}
.jumlah-kuitansi .kotak .sisa{display:block;font-size:.76rem;color:var(--redup);margin-top:.3rem}
.kota-tanggal{text-align:right;display:flex;flex-direction:column;align-items:flex-end;padding-top:.4rem}
.kota-tanggal .kota{font-size:.92rem;margin-bottom:.1rem}
/* dua kolom tanda tangan: Penyewa (kiri) + Penerima (kanan) */
.tanda-tangan-kuitansi{position:relative;display:flex;gap:2.4rem;margin-top:1.7rem;font-size:.85rem}
.tanda-tangan-kuitansi .blok{flex:1;text-align:center}
.tanda-tangan-kuitansi .ruang{height:62px;display:flex;align-items:flex-end;justify-content:center}
.tanda-tangan-kuitansi .nama{display:inline-block;min-width:150px;font-weight:700;
  border-top:1px solid #55705f;padding-top:.3rem}
.tanda-tangan-kuitansi .peran{font-size:.78rem;color:var(--redup)}
/* stempel LUNAS: cap tinta hijau miring di tengah, tepat di atas baris tanda
   tangan. Hurufnya sablon (berongga) supaya tanda tangan di bawahnya tetap
   terbaca; `pointer-events:none` agar tidak menutupi klik area TTD. */
.stempel-lunas{position:absolute;left:50%;top:-.1rem;transform:translateX(-50%) rotate(-8deg);
  border:2.5px solid var(--hijau);border-radius:7px;padding:.16rem .55rem .26rem;
  text-align:center;line-height:1;pointer-events:none;opacity:.86;
  box-shadow:inset 0 0 0 1.5px rgba(15,122,90,.28);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.stempel-lunas .teks{display:block;font-size:1.45rem;font-weight:900;letter-spacing:4px;
  color:var(--hijau);-webkit-text-stroke:1.3px var(--hijau)}
.stempel-lunas .kecil{display:block;font-size:.47rem;font-weight:700;letter-spacing:2.6px;
  margin-top:.16rem;color:var(--hijau)}
@supports (-webkit-text-stroke:1px #000){
  .stempel-lunas .teks{color:transparent;background:transparent}
}
.jumlah-kuitansi.no-ttd{align-items:center}
.kotak-jumlah{background:var(--hijau-muda);border:1px solid var(--hijau-garis);border-radius:10px;
  padding:.75rem .95rem;margin:.9rem 0;display:flex;align-items:center;gap:.8rem}
.kotak-jumlah .label{font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:var(--hijau-tua);font-weight:700}
.kotak-jumlah .nilai{font-size:1.5rem;font-weight:800;color:var(--hijau-tua);margin-left:auto}
.rincian-kuitansi{width:100%;border-collapse:collapse;font-size:.88rem;margin:.6rem 0}
.rincian-kuitansi th{background:var(--hijau-muda);color:var(--hijau-tua);font-size:.75rem}
.rincian-kuitansi th,.rincian-kuitansi td{border:1px solid var(--hijau-garis);padding:.42rem .6rem}
.tanda-tangan{display:flex;gap:2rem;margin-top:2.2rem;text-align:center;font-size:.85rem}
.tanda-tangan>div{flex:1}
.tanda-tangan .garis{height:62px;display:flex;align-items:flex-end;justify-content:center}
.tanda-tangan .nama-ttd{border-top:1px solid #55705f;padding-top:.3rem;font-weight:700;display:inline-block;min-width:150px}
.peran-ttd{font-size:.78rem;color:var(--redup)}
.ttd-gambar{max-height:60px;max-width:230px;object-fit:contain;margin-bottom:2px}
.ttd-pratinjau{max-height:90px;max-width:100%;object-fit:contain;background:#fff;
  border:1px dashed var(--garis);border-radius:6px;padding:.3rem;margin-top:.5rem}
/* footer kuitansi: kata-kata + waktu cetak (ikut tercetak & ikut di screenshot) */
.kaki-kuitansi{margin-top:1.1rem;font-size:.75rem;color:var(--redup);text-align:center;
  border-top:1px dashed var(--garis);padding-top:.55rem}
.kaki-kuitansi .kata{font-size:.79rem;color:var(--teks);line-height:1.45}
.kaki-kuitansi .kata.terima{color:var(--hijau-tua);font-weight:700;margin-top:.15rem}
.kaki-kuitansi .waktu{margin-top:.32rem;color:var(--redup)}
.catatan-kuitansi{margin-top:1.1rem;font-size:.75rem;color:var(--redup);
  border-top:1px dashed var(--garis);padding-top:.5rem}
.lencana-lunas{display:inline-block;border:2px solid var(--hijau);color:var(--hijau);font-weight:800;
  letter-spacing:2px;padding:.2rem .7rem;border-radius:6px;transform:rotate(-4deg);font-size:.9rem}
.lencana-bayar-sebagian{display:inline-block;border:2px solid var(--kuning);color:var(--kuning);
  font-weight:800;letter-spacing:2px;padding:.2rem .7rem;border-radius:6px;transform:rotate(-4deg);font-size:.9rem}

@media print{
  /* latar aplikasi jangan ikut tercetak (dulu muncul pita abu di bawah kuitansi) */
  html,body{background:#fff !important}
  /* sembunyikan SELURUH kerangka aplikasi. PENTING: pakai #isi (ID) bukan .isi
     (kelas) — di dalam kuitansi ada `td.isi` yang berisi nilai kolom, dan
     selector .isi ikut menyembunyikannya sehingga semua kolom kuitansi kosong. */
  #layar-masuk,#aplikasi,.kepala,.sisi,#pesan,#tumpuk{display:none !important}
  .layar-cetak{display:block !important;position:static;background:#fff}
  .bilah-cetak{display:none !important}
  .isi-cetak{padding:0;overflow:visible}
  .kertas{box-shadow:none;max-width:none;padding:0;margin:0}
  /* kuitansi: SATU lembar saja — tidak ada lagi pasangan lembar 1/2 yang
     perlu disembunyikan saat mencetak. Aturan ini tinggal jaring pengaman
     bila suatu saat ada markup .lembar tambahan. */
  .kuitansi .lembar{display:block !important}
  /* footer laporan (catatan-kuitansi) tidak ikut tercetak; footer kuitansi
     (.kaki-kuitansi berisi kata-kata + waktu cetak) SENGAJA ikut tercetak. */
  .catatan-kuitansi{display:none !important}
  @page{size:A4 portrait;margin:12mm}
}

/* ------------------------------------------------------------- telefon */
@media (max-width:860px){
  #bMenu{display:grid}
  .sisi{position:fixed;left:0;top:0;bottom:0;z-index:20;transform:translateX(-100%);
    transition:transform .2s;box-shadow:var(--bayang)}
  .sisi.terbuka{transform:none}
  .isi{padding:.9rem .8rem 3rem}
  .kepala-merek small{display:none}
  .kepala-kanan .tombol{padding:.34rem .55rem;font-size:.8rem}
  .stat .nilai{font-size:1.28rem}
  .kertas{padding:1.1rem 1rem}
  .kop .nomor{text-align:left;margin-left:0}
  .kop{flex-wrap:wrap}
  @page{size:A4 portrait;margin:12mm}
}