@font-face{font-family:"DM Serif Display";src:url(/assets/fonts/dm-serif-display.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/assets/fonts/courier-prime-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/assets/fonts/courier-prime-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Special Elite";src:url(/assets/fonts/special-elite.woff2) format("woff2");font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/manrope-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}

:root{
 --paper:#f1e7d0;--paper-2:#e9dcbd;--card:#fffaf0;--white:#fffdf6;
 --ink:#22202b;--soft:#5b5463;--line:#d9c9a3;
 --blue:#1f3f8f;--blue-deep:#162c63;--blue-dark:#0d1c42;--red:#c0302e;--red-deep:#8f1f1d;
 --postmark:#3b2f5c;--brass:#c9a45c;--tele:#f5e6b6;
 --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
 --type:"Courier Prime","Courier New",ui-monospace,monospace;
 --elite:"Special Elite","Courier Prime","Courier New",monospace;
 --sans:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
 --air:repeating-linear-gradient(-45deg,var(--red) 0 12px,var(--white) 12px 18px,var(--blue) 18px 30px,var(--white) 30px 36px);
 color-scheme:light;
}
.ink-0{--ic:#b3263a}.ink-1{--ic:#24418f}.ink-2{--ic:#4f6a1f}.ink-3{--ic:#94540f}.ink-4{--ic:#146a6a}
.ink-5{--ic:#5a3d8a}.ink-6{--ic:#7a4526}.ink-7{--ic:#b8411c}.ink-8{--ic:#34495e}
.d0{--dc:#3f4a55}.d1{--dc:#b3263a}.d2{--dc:#24418f}.d3{--dc:#55701f}.d4{--dc:#94540f}
.d5{--dc:#146a6a}.d6{--dc:#5a3d8a}.d7{--dc:#7a4526}.d8{--dc:#b8411c}.d9{--dc:#2d6b3a}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;min-width:320px;background-color:var(--paper);
 background-image:radial-gradient(circle at 20% 10%,#ffffff55 0 1px,transparent 1.5px),radial-gradient(circle at 70% 60%,#8a6d3a14 0 1px,transparent 1.5px);
 background-size:7px 7px,11px 11px;color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--red)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;color:var(--ink);letter-spacing:-.005em}
h1{font-size:clamp(31px,5.2vw,54px);margin:10px 0 14px}
h2{font-size:clamp(24px,3.2vw,33px);margin:0 0 12px}
h3{font-size:21px;margin:0 0 8px}
p{margin:0 0 12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.kecil{font-size:13px;color:var(--soft)}
.tengah{text-align:center;justify-content:center}
.lompat{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:8px 14px;z-index:99;border-radius:4px}
.lompat:focus{top:10px}

/* ---------- kop (header) */
.airmail{height:8px;background:var(--air)}
.kop{background:var(--paper);border-bottom:2px solid var(--ink)}
.kop-in{max-width:1180px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.plakat{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;padding:9px 16px 7px;border-radius:10px;
 background:radial-gradient(circle at 7px 7px,#c7cfe0 0 2px,#0000 2.6px),radial-gradient(circle at calc(100% - 7px) 7px,#c7cfe0 0 2px,#0000 2.6px),
 radial-gradient(circle at 7px calc(100% - 7px),#c7cfe0 0 2px,#0000 2.6px),radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),#c7cfe0 0 2px,#0000 2.6px),
 linear-gradient(160deg,#27499b,var(--blue-deep) 60%);
 box-shadow:inset 0 0 0 2px var(--blue-deep),inset 0 0 0 3.5px #e9e2cf99,0 3px 0 var(--blue-dark)}
.plakat img{width:150px;display:block;filter:drop-shadow(0 1px 0 #0006)}
.plakat span{font:700 9.5px/1 var(--type);letter-spacing:.32em;color:#f1e7d0;margin-top:3px;padding-left:.32em}
.kop-cta{display:flex;gap:8px}
.b-daftar,.b-login{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;border-radius:5px;padding:7px 15px 6px;line-height:1.05;min-height:46px;transition:transform .15s,box-shadow .15s}
.b-daftar b,.b-login b{font:700 16px/1 var(--type);letter-spacing:.12em}
.b-daftar small,.b-login small{font:400 10px/1.2 var(--type);letter-spacing:.04em;opacity:.9;margin-top:2px}
.b-daftar{background:var(--red);color:#fff;box-shadow:0 3px 0 var(--red-deep);outline:1.5px dashed #ffffffaa;outline-offset:-5px}
.b-login{background:var(--white);color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue),0 3px 0 var(--blue-deep)}
.b-daftar:hover,.b-login:hover{transform:translateY(-1px)}
.b-daftar:hover{color:#fff}
.b-daftar:active,.b-login:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.loket{background:var(--paper-2);border-top:1px solid var(--line)}
.loket-in{max-width:1180px;margin:0 auto;display:flex;gap:4px;overflow-x:auto;padding:8px 16px 0;scrollbar-width:none}
.loket-in::-webkit-scrollbar{display:none}
.loket a{flex:none;display:flex;flex-direction:column;padding:6px 13px 8px;border:1.5px solid var(--ink);border-bottom:0;border-radius:9px 9px 0 0;background:var(--card);font:800 14px/1.15 var(--sans);color:var(--ink);text-decoration:none}
.loket a small{font:400 10px/1.3 var(--type);letter-spacing:.07em;text-transform:uppercase;color:var(--soft)}
.loket a:hover{background:#fff}
.loket a[aria-current]{background:var(--blue);color:#fff;border-color:var(--blue)}
.loket a[aria-current] small{color:#d8e0ff}

/* ---------- layout */
main{max-width:1180px;margin:0 auto;padding:0 16px 48px}
.blok{margin:34px 0}
.blok-kepala{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;margin-bottom:14px}
.blok-kepala h2{margin:0}
.blok-kepala p{margin:0;color:var(--soft);max-width:560px;font-size:15px}
.label-kecil{display:inline-block;font:700 11px/1.3 var(--type);letter-spacing:.13em;text-transform:uppercase;color:var(--red);border:1.5px solid var(--red);padding:3px 8px 2px;border-radius:3px;transform:rotate(-1deg)}
.judul{margin:18px 0 8px;max-width:860px}
.lead{font-size:18px;color:#3d3845;max-width:760px}
.teks{max-width:760px}
.teks h2{margin-top:26px}
.teks ul,.teks ol{padding-left:22px}
.teks li{margin-bottom:6px}
.rute ol{list-style:none;display:flex;flex-wrap:wrap;gap:2px 0;padding:0;margin:16px 0 0;font:13px var(--type)}
.rute li:not(:last-child)::after{content:"›";margin:0 8px;color:var(--soft)}
.rute a{color:var(--soft)}
.rute [aria-current]{color:var(--ink);font-weight:700}

/* ---------- buttons */
.b-biru,.b-garis{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 18px;border-radius:5px;font:700 15px var(--sans);text-decoration:none;border:0}
.b-biru{background:var(--blue);color:#fff;box-shadow:0 3px 0 var(--blue-dark)}
.b-biru:hover{color:#fff;background:#274ca8}
.b-garis{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.b-garis:hover{background:var(--ink);color:var(--paper)}
.b-garis.kecil{min-height:38px;padding:6px 12px;font-size:13px}
.tombol-cap{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 14px;background:transparent;color:var(--red);border:2px solid var(--red);border-radius:4px;font:700 13px var(--type);letter-spacing:.1em;text-transform:uppercase;transform:rotate(-1deg)}
.tombol-cap:hover{background:#c0302e12}
.tombol-cap.tersalin::after{content:"TERSALIN ✓";position:absolute;inset:-2px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:4px;animation:cap-pukul .32s ease-out both}
@keyframes cap-pukul{from{transform:scale(1.7) rotate(-9deg);opacity:0}to{transform:none;opacity:1}}

/* ---------- prangko (stamp) */
.stamp{position:relative;display:block;text-decoration:none;color:inherit;filter:drop-shadow(0 3px 3px #4a38182e);transition:transform .2s}
a.stamp:hover{transform:rotate(-1.4deg) translateY(-2px);color:inherit}
.st-paper{display:block;padding:7px;background:var(--white);
 -webkit-mask:radial-gradient(circle 4px,#0000 94%,#000) -6px -6px/12px 12px round,linear-gradient(#000 0 0) content-box;
 mask:radial-gradient(circle 4px,#0000 94%,#000) -6px -6px/12px 12px round,linear-gradient(#000 0 0) content-box}
.st-face{display:flex;flex-direction:column;border:2px solid var(--ic);
 background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--ic) 7%,transparent) 0 1.5px,transparent 1.5px 6px),#fffaf0}
.st-top{background:var(--ic);color:#fff;font:700 10.5px/1.25 var(--type);letter-spacing:.07em;text-transform:uppercase;padding:5px 6px;text-align:center;min-height:36px;display:grid;place-items:center}
.st-mid{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 6px 8px}
.st-mid img{width:34px;height:34px;object-fit:contain;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--ic)}
.st-num{font:400 34px/1 var(--serif);color:var(--ic);letter-spacing:.03em}
.st-bot{display:flex;justify-content:space-between;font:700 10px/1 var(--type);padding:6px 7px;border-top:1px dashed var(--ic);color:var(--ic)}
.cap{position:absolute;right:-12px;bottom:-12px;width:96px;height:48px;pointer-events:none;opacity:.62;transform:rotate(-13deg);mix-blend-mode:multiply}
.cap circle,.cap path{fill:none;stroke:var(--postmark);stroke-width:2.2}
.cap circle+circle{stroke-width:1.4}
.cap text{fill:var(--postmark);font:700 9px var(--type);letter-spacing:.08em}
.cap .c-mid{font-size:14px;letter-spacing:.02em}
.stamp-big{max-width:300px;margin:0 auto}
.stamp-big .st-paper{padding:10px}
.stamp-big .st-top{font-size:13px;min-height:42px}
.stamp-big .st-mid{padding:20px 10px 14px;gap:12px}
.stamp-big .st-mid img{width:56px;height:56px}
.stamp-big .st-num{font-size:66px}
.stamp-big .st-bot{font-size:12px;padding:8px 10px}
.stamp-big .cap{width:170px;height:85px;right:-44px;bottom:-26px;opacity:.55}

/* ---------- beranda */
.amplop-hero{margin:22px 0 10px;padding:12px;background:repeating-linear-gradient(-45deg,var(--red) 0 18px,var(--white) 18px 27px,var(--blue) 27px 45px,var(--white) 45px 54px);border-radius:6px;box-shadow:0 12px 30px #5a46282a}
.amplop-in{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:26px;align-items:center;padding:28px 30px;background:var(--card)}
.par-avion{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.par-avion span{font:700 11px var(--type);letter-spacing:.14em;color:var(--blue);border:1.5px solid var(--blue);padding:3px 7px 2px;border-radius:2px}
.par-avion span:nth-child(2){color:var(--red);border-color:var(--red)}
.alamat{font:15px/1.7 var(--elite);color:#3a3441;padding:6px 0 6px 14px;border-left:3px solid var(--line);max-width:430px}
.alamat b{font-weight:400;color:var(--ink)}
.amplop-hero h1 em{font-style:italic;color:var(--red)}
.hero-aksi{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.hero-prangko{padding:10px 30px 6px}
.hero-ket{text-align:center;font:13px var(--type);color:var(--soft);margin-top:40px}
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:26px 18px;padding:22px;background-color:#fbf6e9;
 background-image:linear-gradient(#eadfc4 1px,transparent 1px),linear-gradient(90deg,#eadfc4 1px,transparent 1px);background-size:22px 22px;border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 0 #fff inset}
.kiriman{display:flex;flex-direction:column;gap:8px;min-width:0}
.kiriman-meta{display:flex;flex-direction:column;font:12.5px/1.45 var(--type);color:var(--soft);padding-top:4px}
.kiriman-meta .tgl{color:var(--ink);font-weight:700}
.kiriman-link{display:flex;gap:12px;font:700 12.5px var(--sans)}
.kiriman-link a{text-decoration:underline dashed;text-underline-offset:4px}
.cd b{font-weight:700;color:var(--ink)}
.cd-t{font-weight:700;color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.cd-t:not(:empty)::before{content:"· "}
.kiriman-meta .cd-t{display:block;font-size:14px}
.kiriman-meta .cd-t::before{content:"⏱ ";color:var(--soft)}
.dua-kolom{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start}
.papan-jam{padding:20px 22px;border-radius:14px;color:#efe6d0;
 background:radial-gradient(circle at 10px 10px,#c7cfe0 0 2.2px,#0000 2.8px),radial-gradient(circle at calc(100% - 10px) 10px,#c7cfe0 0 2.2px,#0000 2.8px),radial-gradient(circle at 10px calc(100% - 10px),#c7cfe0 0 2.2px,#0000 2.8px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#c7cfe0 0 2.2px,#0000 2.8px),var(--blue-deep);
 box-shadow:inset 0 0 0 3px #ffffff26,0 5px 0 var(--blue-dark)}
.papan-jam h2{color:#fff}
.papan-jam .kecil,.papan-jam .kecil a{color:#c9d2ea}
.jam-list{list-style:none;padding:0;margin:10px 0 0}
.jam-list li{display:grid;grid-template-columns:62px minmax(0,1fr) minmax(0,42%);gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dashed #ffffff30}
.jam-list time{font:700 17px var(--type);color:#ffd98a}
.jam-list a{color:#fff;font-weight:700;text-decoration:none}
.jam-list a:hover{text-decoration:underline}
.jam-list span{font:12px var(--type);color:#b7c1dc;text-align:right}
.loket-alat{display:flex;flex-direction:column;gap:14px}
.loket-alat h2{margin-bottom:2px}
.resi-mini,.resi-form,.cari-mimpi{display:block;padding:16px;background:var(--card);border:1.5px solid var(--ink);border-radius:6px}
.resi-mini label,.resi-form label,.cari-mimpi label{display:block;font:700 13px var(--type);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.baris-input{display:flex;gap:0;margin-bottom:6px}
.baris-input input{flex:1;min-width:0;height:48px;padding:0 12px;border:2px solid var(--ink);border-right:0;border-radius:5px 0 0 5px;background:#fff;font:700 20px var(--type);letter-spacing:.18em}
.baris-input button{flex:none;height:48px;padding:0 18px;border:0;border-radius:0 5px 5px 0;background:var(--blue);color:#fff;font:700 14px var(--type);letter-spacing:.1em;text-transform:uppercase}
.kartu-loket{display:block;padding:14px 16px;background:var(--card);border:1.5px solid var(--ink);border-radius:6px;box-shadow:4px 4px 0 var(--ink);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.kartu-loket:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);color:var(--ink)}
.kartu-loket b{display:block;font:400 20px var(--serif)}
.kartu-loket span{font-size:14px;color:var(--soft)}
.surat-editor{max-width:820px;margin-left:auto;margin-right:auto;padding:28px 30px 24px;background-color:#fffdf5;background-image:repeating-linear-gradient(transparent 0 29px,#e4d8bc 29px 30px);background-position:0 12px;border:1px solid var(--line);box-shadow:0 10px 24px #5a462820;transform:rotate(-.4deg)}
.surat-editor p{font:16px/30px var(--elite);color:#2d2934}
.surat-editor::after{content:"— Kepala Kantor Pos Angka GRAB4D";display:block;text-align:right;font:italic 20px var(--serif);color:var(--blue)}
.tanya{background:var(--card);border:1.5px solid var(--ink);border-radius:6px;margin-bottom:10px}
.tanya summary{cursor:pointer;list-style:none;padding:13px 46px 13px 16px;font-weight:800;position:relative}
.tanya summary::-webkit-details-marker{display:none}
.tanya summary::after{content:"+";position:absolute;right:14px;top:50%;translate:0 -50%;width:24px;height:24px;display:grid;place-items:center;border:1.5px solid var(--red);color:var(--red);border-radius:50%;font:700 16px/1 var(--type)}
.tanya[open] summary::after{content:"–"}
.tanya p{padding:0 16px 14px;margin:0;color:#3d3845}
.formulir-cta{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:center;margin:40px 0 10px;padding:22px 24px;background:var(--white);border:2px solid var(--blue);border-radius:4px;box-shadow:inset 0 0 0 5px var(--white),inset 0 0 0 6px #1f3f8f66}
.formulir-cta h2{margin:6px 0 8px}
.formulir-cta p{margin:0;color:var(--soft);font-size:15px}
.fc-kanan{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.fc-kanan a{flex:1;min-width:130px;min-height:54px}

/* ---------- halaman pasaran */
.map-kepala{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center;margin:14px 0 22px}
.urai{font:14px var(--type);color:var(--soft)}
.aksi-baris{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:8px;font-size:14px}
.map-prangko{padding:8px 36px}
.map-tab{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-bottom:2px solid var(--ink)}
.map-tab a{display:flex;flex-direction:column;align-items:center;padding:8px 6px 10px;border:1.5px solid var(--ink);border-bottom:0;border-radius:10px 10px 0 0;background:var(--card);color:var(--ink);text-decoration:none;font:800 15px/1.2 var(--sans)}
.map-tab a small{font:400 10.5px var(--type);text-transform:uppercase;letter-spacing:.07em;color:var(--soft)}
.map-tab a[aria-current]{background:var(--ink);color:#fff}
.map-tab a[aria-current] small{color:#d6cfc0}
.alat-baris{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:10px}
.cari{display:flex;align-items:center;gap:8px;font:700 12px var(--type);text-transform:uppercase;letter-spacing:.08em}
.cari input{width:200px;max-width:52vw;height:40px;padding:0 10px;border:2px solid var(--ink);border-radius:4px;background:#fff;font:700 15px var(--type)}
.hitung{font:13px var(--type);color:var(--soft)}
.register{overflow-x:auto;background:var(--white);border:1.5px solid var(--ink);border-radius:4px}
.register table{width:100%;border-collapse:collapse;font:14px var(--type)}
.register thead th{position:sticky;top:0;background:var(--blue);color:#fff;text-align:left;font:700 11px var(--type);letter-spacing:.1em;text-transform:uppercase;padding:9px 10px}
.register td{padding:7px 10px;border-bottom:1px solid #eadfc6;vertical-align:middle}
.register tbody tr:nth-child(even){background:#fbf5e6}
.register tbody tr:hover{background:#f3e8cc}
.c-p{color:var(--soft);font-size:13px}
.c-t span{display:inline-block;min-width:52px;color:var(--soft)}
.c-2{font-weight:700;color:var(--red)}
.keping{display:inline-flex;gap:3px;vertical-align:middle}
.keping i{font-style:normal;display:inline-grid;place-items:center;width:25px;height:29px;border:1.5px solid var(--ink);border-radius:3px;background:#fff;font:700 16px var(--type);box-shadow:1.5px 1.5px 0 var(--ink)}
.keping.mini{gap:2px}
.keping.mini i{width:18px;height:20px;font-size:11.5px;border:0;box-shadow:none;background:var(--dc);color:#fff;border-radius:2px}
.timbang-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.timbang{margin:0;padding:12px 12px 8px;background:var(--card);border:1.5px solid var(--ink);border-radius:6px}
.timbang figcaption{display:flex;justify-content:space-between;font:700 14px var(--sans);margin-bottom:8px}
.timbang figcaption small{font:12px var(--type);color:var(--soft)}
.bars{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.bar{display:grid;grid-template-rows:110px auto;text-align:center}
.tabung{position:relative;align-self:end;height:var(--h);background:#cdbb8e;border-radius:2px 2px 0 0}
.bar.top .tabung{background:var(--blue)}
.tabung i{position:absolute;bottom:100%;left:50%;translate:-50% -1px;font:10.5px var(--type);font-style:normal;color:var(--soft)}
.bar b{font:700 13px var(--type);border-top:1.5px solid var(--ink);padding-top:2px}
.catatan-timbang{margin:14px 0 0;padding-left:20px;font-size:15px}
.catatan-timbang li{margin-bottom:4px}
.memo{position:relative;max-width:820px;padding:24px 24px 16px;background:#fdf1bf;box-shadow:0 8px 18px #5a46281f;transform:rotate(.3deg)}
.memo::before{content:"";position:absolute;top:-11px;left:50%;width:110px;height:24px;translate:-50% 0;rotate:-3deg;background:#ffffffa6;box-shadow:0 1px 2px #0001}
.memo h2{font-size:24px}
.memo p,.memo li{font:15.5px/1.7 var(--elite);color:#2d2934}
.memo ul{padding-left:20px}
.amplop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.amplop-kecil{display:block;padding:12px 14px;border:6px solid transparent;border-radius:4px;background:linear-gradient(var(--white),var(--white)) padding-box,var(--air) border-box;text-decoration:none;color:var(--ink);font-weight:800;line-height:1.3}
.amplop-kecil small{display:block;font:400 11.5px var(--type);color:var(--ic);margin-bottom:3px}
.amplop-kecil:hover{color:var(--red)}

/* ---------- kotak surat (hub keluaran) */
.rak{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding:9px;background:#6b4a2e;border-radius:6px;box-shadow:inset 0 0 0 3px #4a321e,0 8px 20px #3a271630;
 background-image:repeating-linear-gradient(90deg,#ffffff08 0 2px,transparent 2px 9px)}
.lubang{display:flex;flex-direction:column;gap:7px;margin:5px;padding:12px;min-height:178px;border-radius:3px;background:linear-gradient(#2e1f12,#4f3924);box-shadow:inset 0 8px 14px #000a;text-decoration:none;color:#f1e7d0}
.lb-no{align-self:flex-start;background:linear-gradient(#e0c27f,#b48d45);color:#2e1f12;font:700 10.5px var(--type);letter-spacing:.1em;padding:2px 7px;border-radius:2px;box-shadow:0 1px 0 #0006}
.lb-surat{display:flex;flex-direction:column;background:var(--white);color:var(--ink);padding:9px 11px;border-top:5px solid var(--ic);transform:rotate(-2deg);box-shadow:0 3px 6px #0005;transition:transform .2s}
.lb-surat b{font:400 32px/1 var(--serif);color:var(--ic)}
.lb-surat small{font:11.5px var(--type);color:var(--soft)}
.lubang:hover .lb-surat{transform:rotate(0) translateY(-5px)}
.lb-nama{font-weight:800;line-height:1.25;color:#fff}
.lb-jam{font:11.5px var(--type);color:#d6c7a6}

/* ---------- album paito */
.rak-album{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.halaman-album{display:flex;flex-direction:column;gap:10px;padding:14px;background-color:#fbf6e9;background-image:linear-gradient(#eadfc4 1px,transparent 1px),linear-gradient(90deg,#eadfc4 1px,transparent 1px);background-size:16px 16px;border:1.5px solid var(--ink);border-radius:4px;text-decoration:none;color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.halaman-album:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.ha-kepala b{display:block;font:400 21px/1.15 var(--serif)}
.ha-kepala small{font:11.5px var(--type);color:var(--soft)}
.strip{display:grid;gap:3px}
.ha-kaki{font:700 13px var(--sans);color:var(--blue)}
.kontrol-album{padding:14px;background:var(--card);border:1.5px solid var(--ink);border-radius:6px 6px 0 0;border-bottom:0}
.kd-baris{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.kd{width:38px;height:42px;border:0;border-radius:3px;background:var(--dc);color:#fff;font:700 18px var(--type);outline:1px dashed #ffffff80;outline-offset:-4px;transition:transform .12s}
.kd[aria-pressed=true]{box-shadow:0 0 0 3px var(--card),0 0 0 5.5px var(--ink);transform:translateY(-2px)}
.kontrol-2{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font:700 13px var(--sans)}
.kontrol-2 select{height:38px;padding:0 8px;border:2px solid var(--ink);border-radius:4px;background:#fff;font:700 14px var(--sans);margin-left:4px}
.cek{display:inline-flex;align-items:center;gap:6px}
.cek input{width:18px;height:18px;accent-color:var(--red)}
.status-album{margin:8px 0 0}
.status-album:empty{display:none}
.lembar{overflow-x:auto;padding:10px 8px;background-color:#fbf6e9;background-image:linear-gradient(#eadfc4 1px,transparent 1px),linear-gradient(90deg,#eadfc4 1px,transparent 1px);background-size:20px 20px;border:1.5px solid var(--ink);border-radius:0 0 6px 6px}
.album-tabel{border-collapse:separate;border-spacing:4px;margin:0 auto}
.album-tabel thead th{font:700 11px var(--type);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);padding:2px 0 4px}
.album-tabel th[scope=row]{text-align:left;padding-right:6px;white-space:nowrap;font:12px/1.2 var(--type)}
.pt-d{display:block;font-weight:700}
.pt-p{display:block;color:var(--soft);font-size:11px}
.album-tabel td{width:46px;height:40px;text-align:center;font:700 19px var(--type);color:#fff;background:var(--dc);border-radius:3px;outline:1px dashed #ffffff7a;outline-offset:-4px;transition:opacity .15s,transform .15s}
.mode-gg td{background:#24418f}
.mode-gg td:is([data-d="0"],[data-d="2"],[data-d="4"],[data-d="6"],[data-d="8"]){background:#b3263a}
.mode-bk td{background:#146a6a}
.mode-bk td:is([data-d="5"],[data-d="6"],[data-d="7"],[data-d="8"],[data-d="9"]){background:#b8411c}
.mode-polos td{background:#fff;color:var(--ink);outline:0;box-shadow:inset 0 0 0 1.5px var(--ink)}
.album-tabel.sorot td{opacity:.16}
.album-tabel.sorot td.kena{opacity:1;transform:scale(1.07);box-shadow:0 0 0 2px var(--ink)}
.album-tabel tr.sembunyi{display:none}

/* ---------- telegram */
.tumpuk-slip{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.slip{display:flex;flex-direction:column;gap:6px;padding:0 0 12px;background:var(--tele);border:1px solid #c9b27a;box-shadow:0 5px 12px #5a462826;text-decoration:none;color:var(--ink);transition:transform .15s}
.slip:nth-child(odd){transform:rotate(-.6deg)}
.slip:nth-child(even){transform:rotate(.5deg)}
.slip:hover{transform:translateY(-3px);color:var(--ink)}
.slip-kop{background:var(--blue);color:#fff;font:700 11px var(--type);letter-spacing:.14em;padding:6px 12px}
.slip b{font:400 21px var(--serif);padding:2px 12px 0}
.slip-isi{margin:0 12px;padding:6px 8px;background:#fffdf2;font:14px/1.5 var(--elite);letter-spacing:.04em}
.slip-kaki{padding:0 12px;font:700 12.5px var(--sans);color:var(--blue)}
.telegram{max-width:680px;margin:0 auto;background:var(--tele);border:1px solid #c9b27a;box-shadow:0 10px 26px #5a462833}
.tg-kop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;background:var(--blue);color:#fff;padding:10px 16px;font:700 12.5px var(--type);letter-spacing:.14em}
.tg-isi{margin:0;padding:16px 20px 6px}
.tl{display:grid;grid-template-columns:128px minmax(0,1fr);gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px dotted #b59e62}
.tl dt{font:700 12px var(--type);color:#6a5a2e;letter-spacing:.08em}
.tl dd{margin:0;padding:2px 8px;background:#fffdf2;box-shadow:0 1px 0 #0000001a;font:17px/1.45 var(--elite);letter-spacing:.05em;overflow-wrap:anywhere}
.tl dd.baru{animation:ketik .5s steps(8) both}
@keyframes ketik{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.tg-kaki{display:flex;justify-content:space-between;align-items:center;padding:6px 20px 12px;font:700 12px var(--type);color:#6a5a2e;letter-spacing:.1em}
.cap.cap-tele{position:static;width:84px;height:84px;opacity:.6}
.telegram+.aksi-baris{margin-top:18px}

/* ---------- jadwal */
.papan-enamel{padding:16px 16px 8px;border-radius:14px;color:#efe6d0;
 background:radial-gradient(circle at 11px 11px,#c7cfe0 0 2.4px,#0000 3px),radial-gradient(circle at calc(100% - 11px) 11px,#c7cfe0 0 2.4px,#0000 3px),radial-gradient(circle at 11px calc(100% - 11px),#c7cfe0 0 2.4px,#0000 3px),radial-gradient(circle at calc(100% - 11px) calc(100% - 11px),#c7cfe0 0 2.4px,#0000 3px),linear-gradient(170deg,#23458f,var(--blue-deep) 50%);
 box-shadow:inset 0 0 0 3px #ffffff29,0 6px 0 var(--blue-dark)}
.pe-kop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:4px 10px 10px;border-bottom:2px solid #efe6d066;font:700 13px var(--type);letter-spacing:.2em}
.pe-tabel{overflow-x:auto}
.pe-tabel table{width:100%;border-collapse:collapse}
.pe-tabel thead th{font:700 10.5px var(--type);letter-spacing:.12em;text-transform:uppercase;color:#b7c1dc;text-align:left;padding:10px 8px 6px}
.pe-tabel td,.pe-tabel tbody th{padding:10px 8px;border-bottom:1px dashed #ffffff2e;text-align:left;vertical-align:middle}
.j-jam time{font:400 28px/1 var(--serif);color:#ffd98a}
.pe-tabel tbody th a{color:#fff;font-weight:800;text-decoration:none}
.pe-tabel tbody th a:hover{text-decoration:underline}
.pe-tabel tbody th small{display:block;font:400 11px var(--type);color:#b7c1dc}
.j-hari{font:13px var(--type);color:#d6ddef}
.j-cd .cd b{display:none}
.j-cd .cd{font:13px var(--type);color:#d6ddef}
.j-cd .cd-t{color:#ffd98a;font-size:16px}
.j-cd .cd-t::before{content:""}
.j-akhir{font:700 17px var(--type);letter-spacing:.12em;color:#fff}

/* ---------- statistik, kalkulator, resi, mimpi */
.sortir{min-width:520px}
.sortir th[scope=row] a{font-family:var(--sans);font-weight:700}
.cari-mimpi .baris-input input{letter-spacing:.02em;font-size:17px}
.dg{display:inline-grid;place-items:center;width:26px;height:28px;background:var(--dc);color:#fff;border-radius:3px}
.timbangan-alat{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;padding:18px;background:var(--card);border:1.5px solid var(--ink);border-radius:6px}
.timbangan-alat>label{display:flex;flex-direction:column;font:700 12px var(--type);text-transform:uppercase;letter-spacing:.08em;gap:4px}
.timbangan-alat input[name=digit]{width:210px;max-width:100%;height:46px;padding:0 12px;border:2px solid var(--ink);border-radius:4px;background:#fff;font:700 20px var(--type);letter-spacing:.2em}
.timbangan-alat fieldset{border:0;padding:0;margin:0;display:flex;gap:12px;align-items:center}
.timbangan-alat legend{font:700 12px var(--type);text-transform:uppercase;letter-spacing:.08em;float:left;margin-right:4px}
.timbangan-alat fieldset label{display:inline-flex;gap:5px;align-items:center;font-weight:800}
.timbangan-alat .cek{font-size:14px;font-weight:700;text-transform:none;flex-direction:row;letter-spacing:0;font-family:var(--sans)}
.hasil-timbang{margin-top:16px;padding:18px;background:var(--white);border:1.5px dashed var(--ink);border-radius:6px}
.berat{margin:0;font:400 20px var(--serif)}
.berat b{font:400 54px/1 var(--serif);color:var(--red);margin-right:6px}
.daftar-keping{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.daftar-keping span{font:700 14px var(--type);padding:3px 7px;border:1.5px solid var(--ink);border-radius:3px;background:#fff}
.resi-form{max-width:640px}
.hasil-resi{margin-top:16px;max-width:760px}
.resi-ringkas{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:14px 16px;background:var(--blue-deep);color:#fff;border-radius:6px 6px 0 0;font:14px var(--type)}
.resi-ringkas b{font:400 26px var(--serif);color:#ffd98a}
.jejak{list-style:none;margin:0;padding:12px 16px 4px 16px;background:var(--white);border:1.5px solid var(--ink);border-top:0;border-radius:0 0 6px 6px}
.jejak li{position:relative;padding:4px 0 14px 26px;border-left:2px solid var(--line);margin-left:6px}
.jejak li::before{content:"";position:absolute;left:-7px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--ic,var(--blue));box-shadow:0 0 0 3px var(--white)}
.jejak li:last-child{border-left-color:transparent}
.jejak .st{display:inline-block;font:700 11px var(--type);letter-spacing:.1em;color:#fff;background:var(--red);padding:2px 7px;border-radius:2px;margin-right:6px}
.jejak .st.s3{background:var(--blue)}
.jejak .st.s2{background:#4f6a1f}
.jejak b{font-weight:800}
.jejak small{display:block;font:12.5px var(--type);color:var(--soft)}
.kodepos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.kartu-kodepos{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--card);border:1.5px solid var(--ink);border-radius:6px;box-shadow:4px 4px 0 var(--ink);text-decoration:none;color:var(--ink)}
.kartu-kodepos:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.kp-kode{display:flex;gap:4px;font:700 22px var(--type)}
.kp-kode{letter-spacing:.35em;color:var(--red)}
.kartu-kodepos b{font:400 22px var(--serif)}
.kartu-kodepos small{font:12px var(--type);color:var(--soft)}
.kartu-kodepos span:last-child{font-size:14px;color:#3d3845}
.hasil-mimpi{margin-top:12px}
.hasil-mimpi ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.hasil-mimpi li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:8px 12px;background:var(--white);border:1px solid var(--line);border-radius:4px}
.hasil-mimpi li b{font:700 17px var(--type);color:var(--red)}
.hasil-mimpi li small{display:block;font:12px var(--type);color:var(--soft)}
.daftar-sampel{columns:2 260px;padding-left:18px}
.daftar-sampel b{font-family:var(--type);color:var(--red)}
.direktori td{font-family:var(--sans);font-size:14.5px}
.direktori td.kp b{font:700 17px var(--type);color:var(--red)}
.direktori td.kp-alt{font:13px var(--type);color:var(--soft);white-space:nowrap}
.register tr.sembunyi{display:none}

/* ---------- buku saku & naskah */
.rak-buku{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.buku-saku{display:flex;flex-direction:column;gap:8px;padding:20px 20px 20px 30px;min-height:200px;border-radius:3px 8px 8px 3px;background:linear-gradient(90deg,#0e1f4a 0 12px,#ffffff22 12px 13px,transparent 13px),var(--blue);color:#efe6d0;text-decoration:none;box-shadow:0 8px 16px #1f3f8f33}
.buku-saku:nth-child(2){background:linear-gradient(90deg,#6d1715 0 12px,#ffffff22 12px 13px,transparent 13px),var(--red)}
.buku-saku:nth-child(3){background:linear-gradient(90deg,#2f3d10 0 12px,#ffffff22 12px 13px,transparent 13px),#4f6a1f}
.buku-saku:hover{color:#fff;transform:translateY(-3px)}
.buku-saku small{font:700 11px var(--type);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.buku-saku b{font:400 22px/1.15 var(--serif);color:#fff}
.buku-saku span{font-size:14px;opacity:.9}
.buku-saku.kecil{min-height:0}
.naskah{max-width:820px}
.naskah .teks{font-size:17px;line-height:1.75}
.daftar-isi{margin:14px 0 22px;padding:14px 18px;background:var(--white);border:1.5px dashed var(--ink);border-radius:4px;max-width:560px}
.daftar-isi b{font:700 12px var(--type);letter-spacing:.12em;text-transform:uppercase}
.daftar-isi ol{margin:6px 0 0;padding-left:20px}
.rumus,.formulir{font:700 15px/1.6 var(--type);background:var(--white);border:1.5px solid var(--ink);border-left:6px solid var(--red);padding:10px 14px;border-radius:3px;overflow-x:auto}
.formulir{white-space:pre;font-weight:400}

/* ---------- 404 */
.retur{padding:40px 0}
.retur-amplop{position:relative;max-width:760px;margin:0 auto;padding:40px 30px 30px;border:10px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--air) border-box;box-shadow:0 12px 30px #5a46282a}
.retur-cap{position:absolute;right:20px;top:18px;display:flex;flex-direction:column;align-items:center;padding:8px 14px;border:4px double var(--red);color:var(--red);font:700 34px/1 var(--type);letter-spacing:.14em;transform:rotate(12deg);opacity:.82}
.retur-cap small{font-size:10.5px;letter-spacing:.12em;margin-top:4px}
.retur h1{max-width:470px}

/* ---------- kaki */
.kaki{margin-top:40px;background:var(--blue-deep);color:#e4dcc6}
.kaki-in{max-width:1180px;margin:0 auto;padding:34px 16px 20px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:28px}
.kaki-merk img{width:170px}
.kaki-merk p{font-size:14px;color:#cdd4e6}
.kaki h2{font:700 12px var(--type);letter-spacing:.14em;text-transform:uppercase;color:#ffd98a;margin:0 0 10px}
.kaki-kol{display:flex;flex-direction:column;gap:4px}
.kaki-kol h2:not(:first-child){margin-top:14px}
.kaki a{color:#efe6d0;text-decoration:none;font-size:14px}
.kaki a:hover{color:#fff;text-decoration:underline}
.kaki-rute{columns:2;column-gap:14px}
.kaki-rute a{display:block;padding:2px 0}
.kaki .kecil{color:#aab4cf}
.kaki-bawah{margin:0;padding:14px 16px 18px;text-align:center;font:12px var(--type);color:#aab4cf;border-top:1px dashed #ffffff2e}
.dok{display:none}

.kontrol-judul{margin:0 0 8px;font:700 11px var(--type);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.legenda{display:none}
.stok{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.stok li{display:grid;grid-template-columns:26px 1fr 34px;gap:8px;align-items:center;font:700 13px var(--type)}
.stok .dg{width:24px;height:24px;font-size:13px}
.stok-bar{height:10px;background:#eadfc4;border-radius:2px;overflow:hidden}
.stok-bar i{display:block;height:100%;width:var(--w);background:var(--dc)}
.stok b{text-align:right}
@media (min-width:1000px){
 .reg-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
 .reg-samping{position:sticky;top:12px}
 .reg-samping .timbang-grid{grid-template-columns:1fr 1fr}
 .reg-samping .blok:first-child{margin-top:34px}
 .reg-samping .memo{margin-top:24px}
 .reg-grid .register{max-height:1180px;overflow:auto}
 .album-wrap{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:start}
 .album-wrap .kontrol-album{position:sticky;top:12px;border-radius:6px 0 0 6px;border-bottom:1.5px solid var(--ink);border-right:0}
 .album-wrap .lembar{border-radius:0 6px 6px 6px}
 .album-wrap .legenda{display:block;margin-top:16px;padding-top:14px;border-top:1.5px dashed var(--line)}
 .album-wrap .album-tabel td{width:64px;height:46px;font-size:22px}
 .album-wrap .album-tabel th[scope=row]{font-size:13px;padding-right:12px}
}
@media (max-width:900px){
 .amplop-in,.map-kepala,.dua-kolom,.formulir-cta{grid-template-columns:minmax(0,1fr)}
 .fc-kanan{justify-content:stretch}
 .kaki-in{grid-template-columns:1fr 1fr}
 .kaki-merk{grid-column:1/-1}
}
@media (max-width:720px){
 body{padding-bottom:76px}
 .dok{position:fixed;z-index:40;left:0;right:0;bottom:0;display:flex;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#f1e7d0f2;border-top:2px solid var(--ink);box-shadow:0 -4px 14px #0000001f}
 .dok a{flex:1;min-height:48px}
 .kop-in{padding:10px 12px}
 .plakat{padding:8px 12px 6px}
 .plakat img{width:118px}
 .plakat span{font-size:8px;letter-spacing:.24em}
 .kop-cta .b-daftar,.kop-cta .b-login{padding:6px 10px 5px;min-height:44px}
 .kop-cta small{display:none}
 .amplop-hero{padding:8px}
 .amplop-in{padding:20px 16px}
 .hero-prangko{padding:6px 34px 0}
 .lead{font-size:16.5px}
 .album{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;padding:14px 12px}
 .st-top{font-size:9.5px;min-height:33px;padding:4px}
 .st-mid{gap:5px;padding:10px 4px 7px}
 .st-mid img{width:26px;height:26px}
 .st-num{font-size:28px}
 .st-bot{font-size:9px;padding:5px}
 .cap{width:80px;height:40px;right:-6px;bottom:-10px}
 .stamp-big .cap{width:140px;height:70px;right:-26px;bottom:-22px}
 .stamp-big .st-num{font-size:56px}
 .map-prangko{padding:4px 40px}
 .rak{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px}
 .lubang{margin:4px;padding:10px;min-height:160px}
 .lb-surat b{font-size:26px}
 .pe-tabel .j-hari,.pe-tabel .j-akhir,.pe-tabel thead th:nth-child(3),.pe-tabel thead th:nth-child(5){display:none}
 .j-jam time{font-size:22px}
 .tl{grid-template-columns:1fr;gap:2px}
 .tl dd{font-size:15.5px}
 .tg-isi{padding:12px 12px 4px}
 .register table{font-size:13px}
 .register td{padding:6px 6px}
 .register thead th{padding:8px 6px}
 .c-t span{display:block;min-width:0;font-size:11.5px}
 .keping i{width:22px;height:26px;font-size:14.5px}
 .album-tabel td{width:42px;height:38px;font-size:17px}
 .album-tabel thead th{font-size:9.5px;letter-spacing:.02em}
 .direktori td.kp-alt{white-space:normal}
 .kaki-in{grid-template-columns:1fr}
 .sortir{min-width:0;font-size:12px}
 .sortir td,.sortir th{padding:6px 4px}
 .sortir .dg{width:22px;height:24px}
 .retur-cap{position:static;display:inline-flex;margin-bottom:14px;font-size:26px}
 .surat-editor{padding:22px 18px 18px}
 .formulir-cta{padding:18px 16px}
 .blok{margin:28px 0}
}
@media (max-width:380px){
 .kop-in{gap:8px}
 .plakat img{width:104px}
 .kop-cta .b-daftar b,.kop-cta .b-login b{font-size:14px;letter-spacing:.08em}
 .map-tab a{font-size:14px}
 .cari input{width:150px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{.kop,.kaki,.dok,.formulir-cta{display:none}}