/* UI platform undangan. Register premium editorial (gading, dakwat hangat, emas lembut, serif display ringan, ruang
   putih luas, garis halus, label kecil berjarak huruf). Warna HANYA melalui var() dari tokens.css. Mobile dahulu. */

@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-var.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-var.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Amiri";src:url(/fonts/amiri-arabic.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Cormorant Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Georgia");font-style:normal;size-adjust:95.2%;ascent-override:96.6%;descent-override:30.5%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:106.3%;ascent-override:91.3%;descent-override:22.6%;line-gap-override:0%}

/* ---------- ASAS ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);color-scheme:light;scroll-padding-top:calc(var(--bar-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink-soft);font:400 1rem/1.6 var(--f-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg,video,canvas,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
b,strong,label,legend,summary,th{color:var(--ink)}
h1,h2,h3,.display{font-family:var(--f-display);font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.6rem + 3.9vw,4.9rem)}
h2{font-size:clamp(2.1rem,1.5rem + 2.5vw,3.5rem)}
h3{font-size:clamp(1.35rem,1.2rem + .5vw,1.65rem);line-height:1.15}
p{margin:0}
ul,ol{margin:0;padding:0}
.lede{font-size:clamp(1.02rem,.96rem + .3vw,1.15rem);line-height:1.65;color:var(--ink-soft);max-width:34rem}
.kecil{font-size:.875rem;line-height:1.55;color:var(--ink-soft)}
.eyebrow{display:block;font:500 .72rem/1.3 var(--f-text);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.garis{height:1px;border:0;margin:0;background:var(--line)}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;z-index:300;background:var(--paper);color:var(--ink);padding:12px 16px;border-radius:var(--r)}
.skip:focus{left:8px}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.angka{font-variant-numeric:tabular-nums lining-nums}

/* ikon garis kecil */
.ik{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ik--sm{width:16px;height:16px}

/* ---------- BUTANG ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:var(--tap);padding:14px 26px;border:0;border-radius:var(--r-pill);
  background:var(--ink);color:var(--on-ink);font:500 .98rem/1.2 var(--f-text);letter-spacing:.01em;text-decoration:none;text-align:center;
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}
.btn:active{transform:scale(.985)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--light{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--sm{min-height:44px;padding:10px 18px;font-size:.9rem}
.btn--wide{width:100%}
.btn--teks{background:transparent;color:var(--ink);min-height:44px;padding:10px 4px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.3em;border-radius:var(--r-sm)}
.btn--bahaya{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger-soft)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn.is-memuat{opacity:.7;cursor:progress}
@media (hover:hover) and (pointer:fine){
  .btn:not([disabled]):hover{background:var(--gold-text)}
  .btn--ghost:not([disabled]):hover{background:var(--ink);color:var(--on-ink)}
  .btn--light:not([disabled]):hover{background:var(--tint);color:var(--ink)}
  .btn--teks:not([disabled]):hover{background:transparent;text-decoration-color:var(--ink)}
  .btn--bahaya:not([disabled]):hover{background:var(--danger-soft);color:var(--danger)}
}
.pautan{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.3em;text-decoration-thickness:1px;font-weight:500}
.pautan:hover{text-decoration-color:var(--ink)}

/* ---------- HEADER + LACI ---------- */
.bar{position:sticky;top:0;z-index:90;height:var(--bar-h);display:flex;align-items:center;background:var(--glass);
  backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);box-shadow:0 1px 0 var(--line)}
.bar__in{display:flex;align-items:center;gap:12px;width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.jenama{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink);white-space:nowrap}
.jenama__mark{width:30px;height:30px;object-fit:contain;flex:none}
.jenama__nama{font:600 1.32rem/1 var(--f-display);letter-spacing:.01em}
.bar__nav{display:none;margin-left:auto;gap:30px;font:500 .9rem/1 var(--f-text);color:var(--ink)}
.bar__nav a{text-decoration:none;padding:12px 0}
.bar__nav a:hover{color:var(--gold-text)}
.bar__end{display:flex;align-items:center;gap:8px;margin-left:auto}
.bar__nav+.bar__end{margin-left:auto}
.bar .btn{min-height:44px;padding:10px 18px;font-size:.88rem}
.btn-ikon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink)}
.btn-ikon .ik{width:22px;height:22px}
.bar__mula{display:none}
@media (min-width:880px){
  .bar__nav{display:flex}
  .bar__nav+.bar__end{margin-left:28px}
  .btn-menu{display:none}
  .bar__mula{display:inline-flex}
}
.laci{position:fixed;inset:0;z-index:200;display:flex;justify-content:flex-end;background:var(--scrim)}
.laci__panel{width:min(86vw,360px);height:100%;background:var(--paper);display:flex;flex-direction:column;padding:16px var(--gutter) calc(24px + env(safe-area-inset-bottom));overflow:auto}
.laci__kepala{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin-bottom:12px}
.laci__nav{display:grid;gap:0;border-top:1px solid var(--line)}
.laci__nav a{display:flex;align-items:center;min-height:var(--tap);border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font:500 1.35rem/1.1 var(--f-display)}
.laci__aksi{margin-top:auto;padding-top:24px;display:grid;gap:10px}
html.laci-buka,html.lapisan-buka{overflow:hidden}

/* ---------- SEKSYEN ---------- */
.sek{position:relative;padding-block:var(--sec-y)}
.sek--paper{background:var(--paper)}
.sek--tint{background:var(--tint)}
.sek--garis{border-top:1px solid var(--line)}
.sek__kepala{display:grid;gap:14px;max-width:44rem;margin-bottom:clamp(2.2rem,5vw,3.5rem)}
.sek__kepala--tengah{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- BINGKAI FON ---------- */
.fon{position:relative;margin:0;padding:9px;border-radius:46px;background:var(--ink);box-shadow:var(--sh-phone);width:min(100%,300px)}
.fon__skrin{display:block;width:100%;aspect-ratio:9/19.5;border-radius:37px;overflow:hidden;background:var(--tint);object-fit:cover;object-position:top;border:0}
.fon--kecil{padding:7px;border-radius:36px;width:min(100%,240px)}
.fon--kecil .fon__skrin{border-radius:29px}
a.fon{display:block;text-decoration:none}

/* ---------- LANDING ---------- */
.hero{padding-block:clamp(2.2rem,7vw,5rem) clamp(3.5rem,8vw,6rem);overflow:hidden}
.hero__grid{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.hero__teks{display:grid;gap:18px;justify-items:start}
.hero__teks h1{max-width:13ch}
.hero__cta{display:grid;gap:10px;width:100%;margin-top:8px}
.hero__nota{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);max-width:30rem}
.hero__nota .ik{color:var(--gold);margin-top:2px}
.hero__media{position:relative;display:grid;place-items:center;padding:12px 0}
.hero__media::before{content:"";position:absolute;inset:6% 4% 6% 4%;border-radius:50% 50% 12px 12px/34% 34% 12px 12px;background:var(--tint)}
.hero__media .fon{width:min(76vw,312px)}
@media (min-width:600px){.hero__cta{grid-auto-flow:column;justify-content:start;width:auto}}
@media (min-width:960px){
  .hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .hero__media .fon{width:330px}
}

.fakta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.fakta__item{display:grid;align-content:start;gap:6px;padding:22px 10px;text-align:center}
.fakta__item+.fakta__item{border-left:1px solid var(--line)}
.fakta__n{font:500 clamp(1.7rem,1.1rem + 3vw,3.3rem)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.fakta__l{font-size:.8rem;line-height:1.35;color:var(--ink-soft)}
@media (min-width:720px){.fakta__item{padding:34px 24px}.fakta__l{font-size:.92rem}}

.cara__list{display:grid;gap:clamp(3rem,7vw,4rem);list-style:none}
.cara__item{display:grid;gap:22px;align-items:center}
.cara__teks{display:grid;gap:10px;align-content:start}
.cara__no{font:500 .78rem/1 var(--f-text);letter-spacing:.2em;color:var(--gold-text)}
.cara__fon{justify-self:center}
@media (min-width:880px){
  .cara__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
  .cara__item{grid-template-rows:auto 1fr;align-items:start}
  .cara__fon{order:-1}
}

.tema-rel{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,300px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--gutter) 18px;margin-inline:calc(-1 * var(--gutter));scrollbar-width:thin;overscroll-behavior-x:contain}
.tema-rel>*{scroll-snap-align:start}
@media (min-width:880px){.tema-rel{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;padding:0;margin:0;gap:28px}}
.tema-grid{display:grid;gap:28px}
@media (min-width:640px){.tema-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.tema-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kad-tema{display:grid;gap:12px;align-content:start}
.kad-tema__img{position:relative;display:block;aspect-ratio:2/3;border-radius:var(--r-lg);overflow:hidden;background:var(--tint);box-shadow:var(--sh-photo)}
.kad-tema__img img{width:100%;height:100%;object-fit:cover}
.kad-tema__nama{font:500 1.6rem/1.1 var(--f-display);color:var(--ink)}
.kad-tema__ringkas{font-size:.92rem;color:var(--ink-soft)}
.kad-tema__aksi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.kad-tema__aksi .btn{padding-inline:12px;font-size:.9rem}

.ciri-grid{display:grid;gap:clamp(2.2rem,5vw,3rem);list-style:none}
@media (min-width:720px){.ciri-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}}
@media (min-width:1040px){.ciri-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kad-ciri{display:grid;gap:14px;align-content:start}
.kad-ciri__img{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--tint);box-shadow:var(--sh-photo)}
.kad-ciri__img img{width:100%;height:100%;object-fit:cover;object-position:top}
.kad-ciri__tajuk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.kad-ciri h3{font-size:1.5rem}
.lencana{display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border-radius:var(--r-pill);background:var(--gold-wash);box-shadow:inset 0 0 0 1px var(--gold-soft);
  color:var(--gold-text);font:500 .72rem/1.2 var(--f-text);letter-spacing:.06em;white-space:nowrap}
.lencana--gelap{background:var(--ink);color:var(--on-ink);box-shadow:none}

.pakej-grid{display:grid;gap:18px;list-style:none;align-items:stretch}
@media (min-width:960px){.pakej-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
.kad-pakej{position:relative;display:flex;flex-direction:column;gap:18px;padding:30px 24px 26px;border-radius:var(--r-lg);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.kad-pakej--popular{box-shadow:inset 0 0 0 1.5px var(--ink),var(--sh-float)}
.kad-pakej__lencana{position:absolute;top:-13px;left:24px}
.kad-pakej__nama{font:500 1.75rem/1.1 var(--f-display);color:var(--ink)}
.kad-pakej__ringkas{font-size:.92rem;min-height:3em}
.kad-pakej__harga{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-block:14px;border-block:1px solid var(--line)}
.harga{font:500 2.9rem/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.harga-nota{font-size:.82rem;color:var(--ink-soft)}
.senarai-semak{display:grid;gap:10px;list-style:none;font-size:.93rem}
.senarai-semak li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.senarai-semak .ik{color:var(--sage-text);margin-top:2px;width:18px;height:18px}
.kad-pakej .btn{margin-top:auto}
.asas{margin-top:clamp(2.5rem,6vw,3.5rem);padding:28px 24px;border-radius:var(--r-lg);background:var(--tint)}
.asas h3{margin-bottom:18px}
@media (min-width:720px){.asas .senarai-semak{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}}
.nota-bb{margin-top:22px;font-size:.9rem;max-width:44rem}

.soalan{display:grid;border-top:1px solid var(--line);max-width:52rem}
.soalan details{border-bottom:1px solid var(--line)}
.soalan summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 0;list-style:none;cursor:pointer;
  font:500 1.28rem/1.25 var(--f-display);color:var(--ink)}
.soalan summary::-webkit-details-marker{display:none}
.soalan summary .ik{transition:transform .25s var(--ease-out);color:var(--gold-text)}
.soalan details[open] summary .ik{transform:rotate(45deg)}
.soalan details p{padding:0 0 22px;max-width:44rem}

.penutup{position:relative;overflow:hidden;text-align:center;background:var(--tint)}
.penutup__grid{display:grid;gap:30px;justify-items:center}
.penutup h2{max-width:16ch}
.penutup__img{width:min(60vw,240px);aspect-ratio:2/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-photo)}
.penutup__img img{width:100%;height:100%;object-fit:cover}

.kaki{padding:44px 0 calc(44px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
.kaki__in{display:grid;gap:22px}
.kaki__nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.kaki__nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.92rem;color:var(--ink);text-decoration:none}
.kaki__nav a:hover{text-decoration:underline}
.kaki__hak{font-size:.82rem;color:var(--ink-soft)}

.bar-cta{position:fixed;z-index:80;left:0;right:0;bottom:0;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--sh-bar);transform:translateY(110%);transition:transform .32s var(--ease-out)}
.bar-cta.is-on{transform:none}
.bar-cta .btn{width:100%}
@media (min-width:880px){.bar-cta{display:none}}
.page-landing{padding-bottom:0}

/* gerak pudar naik. JS tambah .pra hanya pada elemen di bawah skrin (tiada kelip), tanpa JS atau reduced-motion = keadaan akhir */
@media (prefers-reduced-motion:no-preference){
  [data-in].pra{opacity:0;translate:0 14px;transition:opacity .8s var(--ease-out),translate .8s var(--ease-out)}
  [data-in].pra.is-in{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- BORANG ---------- */
.medan{display:grid;gap:8px;align-content:start;min-width:0}
.medan__label{font:500 .95rem/1.35 var(--f-text);color:var(--ink)}
.medan__label .pilihan{font-weight:400;color:var(--ink-mute)}
.medan__bantu{font-size:.85rem;line-height:1.5;color:var(--ink-soft)}
.medan__ralat{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;line-height:1.45;color:var(--danger)}
.medan__ralat:empty{display:none}
.medan__ralat .ik{width:16px;height:16px;margin-top:2px}
.medan__ok{font-size:.88rem;color:var(--sage-text)}
.input{display:block;width:100%;min-height:var(--tap);padding:13px 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);color:var(--ink);
  font:400 1rem/1.35 var(--f-text);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);-webkit-appearance:none;appearance:none}
.input::placeholder{color:var(--ink-mute);opacity:1}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.input[disabled],.input[readonly]{background:var(--tint);color:var(--ink-soft)}
textarea.input{min-height:120px;resize:vertical;line-height:1.55}
select.input{padding-right:42px;background-image:none}
.select{position:relative}
.select .ik{position:absolute;right:14px;top:50%;translate:0 -50%;pointer-events:none;color:var(--ink-soft)}
input[type="date"].input,input[type="time"].input{min-width:0}
.baris{display:grid;gap:16px}
@media (min-width:520px){.baris--2{grid-template-columns:repeat(2,minmax(0,1fr))}.baris--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.baris--gelaran{grid-template-columns:minmax(0,.9fr) minmax(0,2fr)}
.awalan{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);overflow:hidden}
.awalan:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.awalan__teks{display:flex;align-items:center;padding:0 2px 0 14px;color:var(--ink-soft);white-space:nowrap;font-size:.95rem;max-width:55%;overflow:hidden;text-overflow:ellipsis}
.awalan .input{border:0;box-shadow:none;padding-left:2px;min-width:0}
.awalan .input:focus{box-shadow:none}
.pembilang{justify-self:end;font-size:.8rem;color:var(--ink-mute)}
.kumpulan{display:grid;gap:20px;padding:22px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.kumpulan__tajuk{font:500 1.35rem/1.15 var(--f-display);color:var(--ink)}
.kumpulan--tint{background:var(--tint);border-color:transparent}
.subtajuk{font:500 .74rem/1.3 var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}

/* suis */
.suis{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--tap);cursor:pointer}
.suis__label{font:500 .98rem/1.4 var(--f-text);color:var(--ink)}
.suis input{position:absolute;opacity:0;width:1px;height:1px}
.suis__trek{position:relative;flex:none;width:50px;height:30px;border-radius:var(--r-pill);background:var(--line-strong);transition:background-color .2s var(--ease-out)}
.suis__trek::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--paper);box-shadow:var(--sh-photo);transition:translate .22s var(--ease-out)}
.suis input:checked+.suis__trek{background:var(--ink)}
.suis input:checked+.suis__trek::after{translate:20px 0}
.suis input:focus-visible+.suis__trek{outline:2px solid var(--ink);outline-offset:3px}

/* kotak semak */
.semak{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;min-height:44px;padding:10px 0;cursor:pointer;font-size:.95rem;color:var(--ink)}
.semak input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink)}

/* kad pilihan (radio) */
.pilihan{display:grid;gap:10px}
.pilihan--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.pilihan--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pk{position:relative;display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);cursor:pointer;
  color:var(--ink);font-weight:500;line-height:1.35;transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.pk input{position:absolute;opacity:0;width:1px;height:1px}
.pk__titik{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);background:var(--paper)}
.pk:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:var(--gold-wash)}
.pk:has(input:checked) .pk__titik{box-shadow:inset 0 0 0 6px var(--ink)}
.pk:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.pk__isi{display:grid;gap:4px;min-width:0}
.pk__kecil{font-weight:400;font-size:.88rem;color:var(--ink-soft)}

/* ---------- WIZARD ---------- */
.wz-bar .bar__end{gap:12px}
.status-simpan{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-soft);max-width:46vw;line-height:1.3}
.status-simpan[data-s="gagal"],.status-simpan[data-s="konflik"]{color:var(--danger)}
.status-simpan[data-s="disimpan"]{color:var(--sage-text)}
.titik-status{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.status-simpan #status-teks{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.langkah-bar{position:relative;background:var(--bg);border-bottom:1px solid var(--line)}
.langkah-bar__in{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;padding:12px 0 14px;display:grid;gap:10px}
.langkah-bar__teks{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.langkah-bar__nama{font:500 1.15rem/1.2 var(--f-display);color:var(--ink)}
.langkah-bar__dari{font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
.langkah-bar__ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;list-style:none}
.langkah-bar__btn{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;min-height:28px;padding:10px 0 0;border:0;background:transparent;text-align:left;color:var(--ink-soft);font-size:.8rem;line-height:1.25}
.langkah-bar__btn::before{content:"";display:block;height:3px;border-radius:2px;background:var(--line)}
.langkah-bar__btn[data-buka="1"]::before{background:var(--gold)}
.langkah-bar__btn[aria-current="step"]::before{background:var(--ink)}
.langkah-bar__btn[aria-current="step"]{color:var(--ink);font-weight:500}
.langkah-bar__btn[disabled]{cursor:default}
.langkah-bar__label{display:none}
@media (min-width:880px){.langkah-bar__label{display:block}.langkah-bar__teks{display:none}.langkah-bar__btn{min-height:52px}}

.kad-mini{position:sticky;top:var(--bar-h);z-index:60;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.kad-mini__in{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;display:flex;align-items:center;gap:14px;padding:10px 0;transition:padding .25s var(--ease-out)}
.kad-mini__img{flex:none;width:52px;aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;background:var(--tint);box-shadow:var(--sh-photo);transition:width .25s var(--ease-out)}
.kad-mini__img img{width:100%;height:100%;object-fit:cover}
.kad-mini__teks{display:grid;gap:3px;min-width:0}
.kad-mini__nama{font:500 1.35rem/1.1 var(--f-display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-size .25s var(--ease-out)}
.kad-mini__tarikh{font-size:.82rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kad-mini [data-kosong="1"]{color:var(--ink-mute)}
.kad-mini.is-kecil .kad-mini__in{padding:6px 0}
.kad-mini.is-kecil .kad-mini__img{width:28px}
.kad-mini.is-kecil .kad-mini__nama{font-size:1.1rem}
@media (min-width:1040px){.kad-mini{display:none}}

.wz-badan{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;padding:26px 0 calc(150px + env(safe-area-inset-bottom))}
.wz-borang{max-width:var(--formw);display:grid;gap:30px;min-width:0}
.wz-kepala{display:grid;gap:10px}
.wz-kepala h1{font-size:clamp(2.1rem,1.6rem + 2vw,3rem)}
.wz-pratonton{display:none}
@media (min-width:1040px){
  .wz-badan{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start;padding-bottom:140px}
  .wz-pratonton{display:grid;gap:14px;justify-items:center;position:sticky;top:calc(var(--bar-h) + 24px)}
  .wz-pratonton .fon{width:340px}
}
.wz-nav{position:fixed;z-index:70;left:0;right:0;bottom:0;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--sh-bar)}
.wz-nav__in{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;display:flex;gap:10px;padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.wz-nav__in .btn{flex:1}
.wz-nav__in .btn--ghost{flex:0 1 auto;min-width:112px}
@media (min-width:1040px){.wz-nav__in{max-width:var(--maxw)}.wz-nav__in>.wz-nav__kumpul{display:flex;gap:10px;width:var(--formw)}}
.wz-nav__kumpul{display:flex;gap:10px;width:100%}
.btn-pratonton{position:fixed;z-index:71;right:var(--gutter);bottom:calc(84px + env(safe-area-inset-bottom));box-shadow:var(--sh-float);min-height:48px;padding:12px 18px;font-size:.9rem;background:var(--paper);color:var(--ink)}
@media (min-width:1040px){.btn-pratonton{display:none}}
.bendera{display:grid;gap:10px;padding:16px;border-radius:var(--r);background:var(--danger-soft);color:var(--danger);font-size:.92rem}
.bendera--info{background:var(--gold-wash);color:var(--ink)}
.bendera--ok{background:var(--sage-soft);color:var(--sage-text)}
.bendera .btn{justify-self:start}

/* kad templat dalam wizard */
.tpl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none}
@media (min-width:720px){.tpl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.tpl{position:relative;display:grid;gap:8px;align-content:start}
.tpl__pilih{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r-lg);background:var(--tint);overflow:hidden;aspect-ratio:2/3;box-shadow:var(--sh-photo)}
.tpl__pilih img{width:100%;height:100%;object-fit:cover}
.tpl__pilih[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}
.tpl__tanda{position:absolute;left:8px;top:8px}
.tpl__nama{font:500 1.25rem/1.15 var(--f-display);color:var(--ink)}
.tpl__aksi{display:grid;gap:6px}
.tpl__aksi .btn{min-height:44px;padding:8px 10px;font-size:.86rem}

/* ayat tuan rumah */
.ayat-pratonton{display:grid;gap:6px;padding:22px 18px;border-radius:var(--r-lg);background:var(--gold-wash);text-align:center;color:var(--ink)}
.ayat-pratonton__salam{font:italic 500 1.05rem/1.4 var(--f-display);color:var(--gold-text)}
.ayat-pratonton__baris{font:500 1.15rem/1.35 var(--f-display)}
.ayat-pratonton__kecil{font-size:.85rem;color:var(--ink-soft)}
.ayat-pratonton__nama{font:500 1.5rem/1.2 var(--f-display);color:var(--ink);margin-top:6px}

/* aturcara + hubungi */
.senarai-baris{display:grid;gap:12px;list-style:none}
.baris-ubah{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.baris-ubah__isi{display:grid;gap:12px;min-width:0}
.baris-ubah--masa .baris-ubah__isi{grid-template-columns:118px minmax(0,1fr)}
.btn-buang{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-soft)}
.btn-buang:hover{background:var(--tint);color:var(--danger)}

/* ayat al-Quran */
.ayat-pilihan{display:grid;gap:10px}
.pk--ayat{align-items:flex-start}
.pk--ayat .pk__titik{margin-top:3px}
.ayat-ar{font:400 1.35rem/2 var(--f-arab);color:var(--ink);direction:rtl;text-align:right}
.ayat-tr{font-weight:400;font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.ayat-rujuk{font:500 .72rem/1.3 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}

/* galeri + muat naik */
.galeri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none}
@media (min-width:560px){.galeri{grid-template-columns:repeat(4,minmax(0,1fr))}}
.galeri__item{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--tint)}
.galeri__item img{width:100%;height:100%;object-fit:cover}
.galeri__item.is-memuat img{opacity:.45}
.galeri__status{position:absolute;inset:auto 0 0 0;padding:6px;font-size:.72rem;line-height:1.2;text-align:center;background:var(--glass);color:var(--ink)}
.galeri__aksi{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;gap:2px;padding:4px;background:var(--glass)}
.galeri__aksi button{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink)}
.galeri__aksi button:disabled{opacity:.3}
.btn-muat{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:12px 20px;border:1px dashed var(--line-strong);border-radius:var(--r);
  background:var(--paper);color:var(--ink);font-weight:500;cursor:pointer;width:100%}
.btn-muat:hover{border-color:var(--ink)}
.btn-muat input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.btn-muat:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.qr-pratonton{display:flex;align-items:center;gap:14px}
.qr-pratonton img{width:96px;height:96px;object-fit:contain;border-radius:var(--r);background:var(--qr-light);box-shadow:inset 0 0 0 1px var(--line)}

/* muzik */
.muzik{display:grid;gap:8px;list-style:none}
.muzik__baris{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.muzik__baris .btn{min-width:84px}

/* cop */
.cop-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cop{position:relative;display:grid;justify-items:center;gap:6px;padding:10px 4px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);cursor:pointer;text-align:center;font-size:.76rem;line-height:1.25;color:var(--ink)}
.cop input{position:absolute;opacity:0;width:1px;height:1px}
.cop img{width:100%;max-width:56px;aspect-ratio:1;object-fit:contain}
.cop:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:var(--gold-wash)}
.cop:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}

/* nota pakej */
.nota-pakej{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;border-radius:var(--r);background:var(--gold-wash);font-size:.88rem;color:var(--ink)}

/* langkah 6 */
.isu-senarai{display:grid;gap:6px;list-style:none}
.isu-senarai a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:var(--r);background:var(--paper);color:var(--danger);text-decoration:none;box-shadow:inset 0 0 0 1px var(--danger-soft)}
.isu-senarai a:hover{background:var(--danger-soft)}
.cip-grid{display:flex;flex-wrap:wrap;gap:8px}
.cip-pilih{min-height:44px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--paper);color:var(--ink);font-size:.9rem}
.cip-pilih:hover{border-color:var(--ink)}
.pakej-pilih{display:grid;gap:10px}
.pk--pakej{align-items:flex-start;padding:18px 16px}
.pk--pakej .pk__titik{margin-top:4px}
.pk--pakej .pk__isi{flex:1}
.pk__atas{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pk__nama{font:500 1.3rem/1.15 var(--f-display);color:var(--ink)}
.pk__harga{font:500 1.5rem/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.jumlah{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 0;border-block:1px solid var(--line)}
.jumlah__n{font:500 2.3rem/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.pratonton-l6{display:grid;gap:12px;justify-items:center}
.pratonton-l6 .fon{width:min(78vw,300px)}

/* lapisan skrin penuh (pratonton, contoh) */
.lapisan{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;background:var(--bg)}
.lapisan__kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px var(--gutter);border-bottom:1px solid var(--line);background:var(--paper)}
.lapisan__tajuk{font:500 1.15rem/1.2 var(--f-display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lapisan__iframe{flex:1;width:100%;border:0;background:var(--tint)}
@media (min-width:880px){.lapisan__badan{flex:1;display:grid;place-items:center;padding:18px;overflow:auto}.lapisan__badan .fon{width:380px}.lapisan__badan .lapisan__iframe{height:auto}}

/* kad sambung draf */
.sambung{display:grid;gap:18px;max-width:var(--formw)}
.sambung__list{display:grid;gap:10px;list-style:none}
.draf{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.draf__img{width:44px;aspect-ratio:2/3;border-radius:var(--r-sm);overflow:hidden;background:var(--tint)}
.draf__img img{width:100%;height:100%;object-fit:cover}
.draf__nama{font:500 1.15rem/1.2 var(--f-display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draf__meta{font-size:.8rem;color:var(--ink-soft)}

/* ---------- URUS ---------- */
.urus{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;padding:26px 0 calc(64px + env(safe-area-inset-bottom));display:grid;gap:22px;min-width:0}
.urus__papan{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;min-width:0}
.urus-kepala{display:grid;gap:10px}
.urus-kepala h1{font-size:clamp(2rem,1.5rem + 2.2vw,3.2rem);overflow-wrap:anywhere}
.urus-kepala__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:.88rem}
.cip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px;border-radius:var(--r-pill);font:500 .78rem/1.2 var(--f-text);letter-spacing:.04em}
.cip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.cip--aktif{background:var(--sage-soft);color:var(--sage-text)}
.cip--draf{background:var(--gold-wash);color:var(--gold-text)}
.cip--tamat{background:var(--tint);color:var(--ink-soft)}
.kad{display:grid;gap:16px;padding:22px 18px;border-radius:var(--r-lg);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.kad--tint{background:var(--tint);box-shadow:none}
.kad--emas{background:var(--gold-wash);box-shadow:inset 0 0 0 1px var(--gold-soft)}
.kad__kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.kad__aksi{display:flex;flex-wrap:wrap;gap:8px}
.kad__aksi .btn{flex:1 1 auto}
.url-papar{display:block;padding:14px;border-radius:var(--r);background:var(--tint);font:500 1rem/1.4 var(--f-text);color:var(--ink);overflow-wrap:anywhere;user-select:all}
.qr-blok{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.qr-blok canvas{width:120px;height:120px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line);background:var(--qr-light);image-rendering:pixelated}
.statistik{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:720px){.statistik{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{display:grid;gap:6px;align-content:start;padding:20px 16px;background:var(--paper)}
.stat__n{font:500 2.6rem/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.stat__l{font-size:.84rem;line-height:1.35;color:var(--ink-soft)}
.stat__x{font-size:.8rem;color:var(--sage-text)}
.tab-bar{position:sticky;top:var(--bar-h);z-index:50;background:var(--bg);border-bottom:1px solid var(--line);margin-inline:calc(-1 * var(--gutter))}
.tab-bar__rel{display:flex;gap:4px;overflow-x:auto;padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.tab-bar__rel::-webkit-scrollbar{display:none}
.tab{flex:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;border:0;background:transparent;color:var(--ink-soft);font:500 .92rem/1 var(--f-text);text-decoration:none;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent}
.tab[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.tab:hover{color:var(--ink)}
.panel{display:grid;gap:20px;min-width:0}
.panel h2{font-size:clamp(1.8rem,1.4rem + 1.6vw,2.4rem);scroll-margin-top:calc(var(--bar-h) + 76px)}
.senarai{display:grid;list-style:none;border-top:1px solid var(--line)}
.senarai>li{display:grid;gap:10px;padding:16px 0;border-bottom:1px solid var(--line);min-width:0}
.tetamu{grid-template-columns:minmax(0,1fr);}
.tetamu__atas{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.tetamu__nama{font:500 1.2rem/1.25 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.tetamu__meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:.8rem;color:var(--ink-soft)}
.tetamu__aksi{display:flex;flex-wrap:wrap;gap:8px}
.tetamu__aksi .btn{min-height:44px}
.tetamu__aksi .btn--hantar{flex:1 1 140px}
.cip-kecil{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:var(--r-pill);background:var(--tint);color:var(--ink-soft);font-size:.74rem;line-height:1.2}
.cip-kecil--ok{background:var(--sage-soft);color:var(--sage-text)}
.cip-kecil--emas{background:var(--gold-wash);color:var(--gold-text)}
.rsvp__atas{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rsvp__nama{font:500 1.2rem/1.25 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.ucapan__isi{color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.ucapan--sorok .ucapan__isi{color:var(--ink-mute)}
.ringkas-jumlah{padding:14px 16px;border-radius:var(--r);background:var(--tint);color:var(--ink);font-size:.95rem}
.kosong{padding:26px 18px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);text-align:center;color:var(--ink-soft);font-size:.95rem}
.lukis-hasil{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lukis-hasil img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh-photo)}
.video-baris{display:grid;gap:10px}
.naik-kad{display:grid;gap:12px;padding:18px 16px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--paper)}
.naik-kad__atas{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:400;translate:-50% 0;max-width:min(90vw,420px);padding:12px 18px;border-radius:var(--r-pill);
  background:var(--toast-bg);color:var(--on-toast);font-size:.9rem;line-height:1.35;box-shadow:var(--sh-float);text-align:center}

/* ---------- HALAMAN RINGKAS (bayar, undang-undang) ---------- */
.halaman{width:min(100% - 2*var(--gutter),46rem);margin-inline:auto;padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(4rem,9vw,6rem);display:grid;gap:22px}
.halaman h1{font-size:clamp(2.3rem,1.7rem + 2.4vw,3.5rem)}
.dok{display:grid;gap:30px;margin-top:10px}
.dok section{display:grid;gap:10px}
.dok h2{font-size:1.6rem}
.dok p{max-width:42rem;line-height:1.7}
.dikemas{font-size:.85rem;color:var(--ink-soft)}
.hubungi-aksi{display:grid;gap:10px;max-width:24rem}
.tiada{align-content:start;min-height:52vh}
.tiada__aksi{display:flex}
.syarikat{display:grid;gap:14px;margin:6px 0 0;padding:20px;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);max-width:32rem}
.syarikat div{display:grid;gap:2px;min-width:0}
.syarikat dt{font-size:.8rem;letter-spacing:.04em;color:var(--ink-mute)}
.syarikat dd{margin:0;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.status-bayar{display:grid;gap:18px;padding:26px 20px;border-radius:var(--r-lg);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.status-bayar__teks{font:500 1.5rem/1.3 var(--f-display);color:var(--ink)}
.status-bayar[data-s="berjaya"]{box-shadow:inset 0 0 0 1.5px var(--sage-text)}
.status-bayar[data-s="gagal"]{box-shadow:inset 0 0 0 1.5px var(--danger)}
.pusing{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 3px var(--line);position:relative}
.pusing::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--ink);animation:pusing 1s linear infinite}
@keyframes pusing{to{transform:rotate(360deg)}}

/* ---------- CETAK BUKU UCAPAN (A5) ---------- */
.buku-cetak{display:none}
@media print{
  @page{size:A5;margin:16mm 14mm}
  html,body{background:var(--qr-light)}
  body>*:not(.buku-cetak){display:none!important}
  .buku-cetak{display:block;color:var(--ink);font:400 10.5pt/1.55 var(--f-text)}
  .buku-cetak__cover{display:grid;place-content:center;gap:10mm;min-height:170mm;text-align:center;break-after:page}
  .buku-cetak__cover h1{font-size:30pt}
  .buku-cetak__item{padding:5mm 0;border-bottom:.3pt solid var(--line-strong);break-inside:avoid}
  .buku-cetak__nama{font:500 13pt/1.3 var(--f-display);color:var(--ink);margin-bottom:2mm}
}