/* GarudaSaham — gaya struk belanja & rak toko */
:root{
  --kertas:#fffdf7; --tinta:#1f2937; --tinta-2:#4b5563; --rak:#be123c; --rak-tua:#9f1239;
  --etiket:#facc15; --panel:#fff1f2; --kayu:#7c2d12; --garis:#e5d9c3;
  --sudut:6px; --judul:"Asap",system-ui,sans-serif; --isi:"Domine",Georgia,serif;
  --struk:ui-monospace,"SFMono-Regular","Courier New",monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kertas);color:var(--tinta);font:17px/1.72 var(--isi);overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--rak);text-underline-offset:3px}
a:hover{color:var(--rak-tua)}
h1,h2,h3,h4{font-family:var(--judul);line-height:1.22;color:var(--tinta);margin:1.7em 0 .55em}
h1{font-size:clamp(1.75rem,5.4vw,2.6rem);font-weight:800;margin-top:.4em;letter-spacing:-.01em}
h2{font-size:clamp(1.35rem,3.6vw,1.8rem);font-weight:700}
h3{font-size:1.18rem;font-weight:700}
p{margin:0 0 1.05em}
.lompat{position:absolute;left:-999px;top:0;background:var(--etiket);color:var(--tinta);padding:10px 14px;z-index:9}
.lompat:focus{left:8px;top:8px}

/* pita atas */
.pita{background:var(--rak);color:#fff;border-bottom:4px dashed var(--etiket)}
.pita-isi{max-width:1100px;margin:0 auto;padding:8px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;justify-content:space-between}
.merek{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:700 1.35rem var(--judul);min-height:48px}
.merek b{color:var(--etiket);font-weight:800}
.merek .lambang{border:2px solid #fff;border-radius:var(--sudut)}
.lorong{display:flex;flex-wrap:wrap;gap:2px 4px}
.lorong a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:#fff;text-decoration:none;font:600 .98rem var(--judul);border-radius:var(--sudut)}
.lorong a:hover,.lorong a[aria-current]{background:var(--rak-tua);color:var(--etiket)}

main{display:block;max-width:760px;margin:0 auto;padding:18px 16px 40px}
main.home{max-width:1100px}
.jejak{font:500 .9rem var(--judul);color:var(--tinta-2);margin:4px 0 6px}
.jejak a{color:var(--tinta-2)}
.jejak i{font-style:normal;color:var(--rak);padding:0 4px}

/* gambar */
.foto{margin:1.4em 0}
.foto img{border-radius:var(--sudut);border:1px solid var(--garis)}
.foto figcaption{font-size:.88rem;color:var(--tinta-2);margin-top:6px}

/* kotak pembuka & catatan */
.pembuka{font-size:1.08rem}
.kotak-panel{background:var(--panel);border-left:5px solid var(--rak);border-radius:var(--sudut);padding:14px 16px;margin:1.4em 0}
.kotak-panel p:last-child{margin-bottom:0}
.awas{background:#fffbea;border:2px dashed var(--etiket);border-radius:var(--sudut);padding:14px 16px;margin:1.6em 0}
.awas strong{font-family:var(--judul)}

/* STRUK: dipakai di halaman emiten */
.struk{position:relative;background:#fff;max-width:440px;margin:18px auto 26px;padding:22px 18px 20px;
  border:1px solid var(--garis);border-radius:var(--sudut);box-shadow:0 8px 20px -14px rgba(31,41,55,.45)}
.struk::before,.struk::after{content:"";position:absolute;left:12px;right:12px;border-top:2px dashed var(--rak)}
.struk::before{top:9px}.struk::after{bottom:9px}
.struk-kepala{text-align:center;font:700 1.05rem var(--judul);letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px}
.struk-sub{text-align:center;font:13px/1.5 var(--struk);color:var(--tinta-2);margin:0 0 10px}
.struk dl{margin:0;font:13px/1.55 var(--struk)}
.struk .baris{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--garis)}
.struk dt{color:var(--tinta-2);flex:0 0 42%}
.struk dd{margin:0;text-align:right;font-weight:600}
.struk-kaki{font:13px/1.5 var(--struk);text-align:center;margin:12px 0 0;color:var(--tinta-2)}

/* bagian "di rak mana" */
.lorong-rak{display:grid;grid-template-columns:1fr;gap:12px;margin:1em 0 1.4em;padding:0;list-style:none}
.lorong-rak li{background:var(--panel);border-radius:var(--sudut);padding:12px 14px 12px 16px;border-bottom:5px solid var(--kayu)}
.lorong-rak b{font-family:var(--judul);display:block;color:var(--rak-tua)}
@media(min-width:620px){.lorong-rak{grid-template-columns:1fr 1fr}}

/* linimasa */
.linimasa{list-style:none;margin:1em 0;padding:0 0 0 18px;border-left:3px dashed var(--rak)}
.linimasa li{position:relative;margin:0 0 14px}
.linimasa li::before{content:"";position:absolute;left:-26px;top:.45em;width:13px;height:13px;background:var(--etiket);border:2px solid var(--rak);border-radius:3px;transform:rotate(45deg)}
.linimasa time{font:700 .95rem var(--judul);color:var(--rak-tua);display:block}

/* langkah bernomor */
.langkah{counter-reset:lk;list-style:none;padding:0;margin:1em 0}
.langkah li{counter-increment:lk;position:relative;padding:4px 0 10px 50px;min-height:44px}
.langkah li::before{content:counter(lk);position:absolute;left:0;top:2px;width:36px;height:36px;border-radius:var(--sudut);
  background:var(--rak);color:#fff;font:700 1rem/36px var(--judul);text-align:center}

/* tabel */
.gulir{overflow-x:auto;margin:1.2em 0;border:1px solid var(--garis);border-radius:var(--sudut)}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:#fff}
th,td{padding:9px 11px;text-align:left;vertical-align:top;border-bottom:1px dashed var(--garis)}
th{font-family:var(--judul);background:var(--panel);color:var(--rak-tua)}
td.angka,th.angka{text-align:right;white-space:nowrap}

/* checklist */
.centang{list-style:none;padding:0;margin:1em 0}
.centang li{padding:6px 0 6px 34px;position:relative}
.centang li::before{content:"";position:absolute;left:4px;top:.72em;width:16px;height:16px;border:2px solid var(--rak);border-radius:4px;background:#fff}

/* tanya jawab */
.tanya details{border:1px dashed var(--rak);border-radius:var(--sudut);margin:10px 0;background:#fff}
.tanya summary{cursor:pointer;padding:12px 14px;font:700 1.02rem var(--judul);min-height:44px;list-style-position:outside}
.tanya .jawab{padding:0 14px 4px}

/* tautan lanjut */
.lanjut{margin:2em 0 0;padding:16px;border-top:3px double var(--rak)}
.lanjut p{font:700 1.05rem var(--judul);margin-bottom:.4em}
.lanjut ul{margin:0;padding-left:20px}
.lanjut li{margin:6px 0}

/* ===== ETALASE (beranda) ===== */
.etalase-atas{display:grid;gap:18px;align-items:center;margin:6px 0 10px}
.etalase-atas .foto{margin:0}
.cap-toko{display:inline-block;font:700 .9rem var(--judul);background:var(--etiket);color:var(--tinta);padding:4px 12px;border-radius:var(--sudut);transform:rotate(-2deg)}
@media(min-width:860px){.etalase-atas{grid-template-columns:1.15fr .85fr}}

.rak{margin:28px 0 36px;background:linear-gradient(#fff7ed,#fffdf7);border:3px solid var(--kayu);border-radius:var(--sudut);padding:12px 12px 0}
.rak-kepala{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px;padding:4px 6px 0}
.rak-kepala h2{margin:.2em 0}
.rak-kepala p{margin:0;font-size:.95rem;color:var(--tinta-2)}
.tingkat{padding:14px 6px 0;border-bottom:12px solid var(--kayu);box-shadow:0 6px 0 -2px #5b2110;margin-bottom:16px}
.tingkat:last-child{margin-bottom:0}
.tingkat h3{margin:0 0 10px;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--kayu)}
.deret{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;align-items:end;padding-bottom:4px}
.produk{position:relative;background:#fff;border:2px solid var(--tinta);border-radius:var(--sudut) var(--sudut) 2px 2px;padding:14px 14px 58px;min-height:180px}
.produk .kemasan{display:block;height:10px;border-radius:3px;margin:-4px 0 10px}
.produk h4{margin:0 0 4px;font-size:1.12rem}
.produk p{font-size:.93rem;margin:0 0 6px;line-height:1.55}
.produk a.ambil{display:inline-flex;align-items:center;min-height:44px;font:700 .95rem var(--judul)}
.etiket{position:absolute;left:-6px;bottom:10px;background:var(--etiket);color:var(--tinta);font:700 .9rem/1.2 var(--judul);
  padding:6px 22px 6px 12px;clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%);box-shadow:0 2px 0 var(--rak)}
.etiket small{display:block;font:600 .78rem/1.2 var(--judul);color:#78350f}

.nota{background:#fff;max-width:620px;margin:10px auto 34px;padding:26px 20px 22px;border:1px solid var(--garis);border-radius:var(--sudut);position:relative}
.nota::before,.nota::after{content:"";position:absolute;left:0;right:0;height:10px;
  background:radial-gradient(circle at 8px -2px,var(--kertas) 7px,transparent 8px) repeat-x;background-size:16px 10px}
.nota::before{top:0}.nota::after{bottom:0;transform:rotate(180deg)}
.nota h2{text-align:center;margin-top:.2em;font-size:1.35rem;letter-spacing:.04em;text-transform:uppercase}
.nota ol{list-style:none;margin:0;padding:0;font-family:var(--struk);font-size:13px}
.nota li{display:flex;gap:10px;justify-content:space-between;border-bottom:1px dashed var(--garis);padding:6px 0}
.nota li a{display:inline-flex;align-items:center;min-height:32px;font-family:var(--isi);font-size:15px}
.nota .qty{flex:0 0 auto;color:var(--tinta-2);align-self:center}
.nota-total{display:flex;justify-content:space-between;font:700 13px var(--struk);padding-top:10px}

.gudang{display:grid;gap:22px;margin:26px 0}
.gudang .foto{margin:0}
@media(min-width:860px){.gudang{grid-template-columns:.9fr 1.1fr;align-items:start}}
.lembar-cek{background:var(--panel);border-radius:var(--sudut);padding:16px 18px;border:2px dashed var(--rak)}
.lembar-cek h3{margin-top:.2em}
.kasir{background:var(--tinta);color:#f9fafb;border-radius:var(--sudut);padding:18px 20px;margin:30px 0 8px}
.kasir h2{color:var(--etiket);margin-top:.2em}
.kasir a{color:var(--etiket)}
.tombol{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;background:var(--rak);color:#fff;border-radius:var(--sudut);
  text-decoration:none;font:700 1rem var(--judul)}
.tombol:hover{background:var(--rak-tua);color:#fff}

/* kaki halaman */
.alas{background:#2b1b1f;color:#f3e8e8;margin-top:30px;border-top:6px dashed var(--etiket)}
.alas-isi{max-width:1100px;margin:0 auto;padding:26px 16px 6px;display:grid;gap:18px}
@media(min-width:760px){.alas-isi{grid-template-columns:repeat(3,1fr)}}
.alas-judul{font:700 1.02rem var(--judul);color:var(--etiket);margin:0 0 6px}
.alas ul{list-style:none;margin:0;padding:0}
.alas li{margin:0}
.alas li a,.alas-surel a{color:#fde2e4;display:inline-flex;align-items:center;min-height:36px;font-size:.95rem}
.alas-surel{font-size:.95rem}
.alas-catatan{max-width:1100px;margin:0 auto;padding:4px 16px 14px;font-size:.88rem;color:#e7d3d5}

/* halaman legal */
.dua-kolom{display:grid;gap:12px;margin:1em 0}
@media(min-width:620px){.dua-kolom{grid-template-columns:1fr 1fr}}
.dua-kolom > div{border:2px dashed var(--garis);border-radius:var(--sudut);padding:12px 14px;background:#fff}
.dua-kolom h2{font-size:1.1rem;margin-top:.2em}
.salah{max-width:1100px}
.tingkat:last-child .deret{grid-template-columns:minmax(0,420px)}