/* Mimoto — sistem web.
   Token diturunkan dari identitas: S = tebal tarikan logo, papan + dua aksen per bagian,
   huruf tempel (tambalan berjahit / kuas), stiker halftone, kertas berpetak, foto tak pernah tertutup. */

@font-face{font-family:"DM Sans";font-weight:500;font-display:swap;src:url(../aset/font/DMSans_18pt-Medium.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-display:swap;src:url(../aset/font/DMSans_18pt-Bold.woff2) format("woff2")}
@font-face{font-family:"DM Sans Display";font-weight:800;font-display:swap;src:url(../aset/font/DMSans_36pt-ExtraBold.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:600;font-style:italic;font-display:swap;src:url(../aset/font/DMSans_24pt-SemiBoldItalic.woff2) format("woff2")}

:root{
  --kuning:#FCD12D;--ungu:#7558FE;--biru:#0280EC;--hijau:#019642;--lime:#CFF933;--oranye:#FE7B00;--pink:#FF9ED8;--tinta:#232226;--krem:#FBF6F2;--kertas:#FBFBF8;
  --grain:url(../aset/tex/grain.png);
  --wrap:1180px;--gut:clamp(20px,4.5vw,64px);
  --t:clamp(16px,min(1.9vw,2.8vh),26px);              /* satu tarikan di layar */
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);
  --f-teks:"DM Sans",system-ui,sans-serif;--f-disp:"DM Sans Display","DM Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font:500 clamp(15px,min(1.05vw,1.9vh),17px)/1.55 var(--f-teks);color:var(--tinta);background:var(--kuning);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--tinta);outline-offset:4px;border-radius:4px}
.papan-tinta :focus-visible,.papan-ungu :focus-visible,.papan-biru :focus-visible,.kaki :focus-visible{outline-color:var(--lime)}
.lompat{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700}
.lompat:focus{top:12px}

/* ---------- papan (latar bergrain) */
.bg{position:relative;overflow:clip;background-image:var(--grain);background-size:512px}
.papan-kuning{background-color:var(--kuning)}.papan-krem{background-color:var(--krem)}.papan-tinta{background-color:var(--tinta);color:var(--krem)}
.papan-biru{background-color:var(--biru);color:#fff}.papan-lime{background-color:var(--lime)}.papan-ungu{background-color:var(--ungu);color:#fff}
.papan-pink{background-color:var(--pink)}.papan-oranye{background-color:var(--oranye)}
section.bg{min-height:100svh;padding:clamp(72px,10vh,104px) 0 clamp(40px,7vh,80px);display:flex;flex-direction:column;justify-content:center}
section.bg>.wrap{width:100%}
.wrap{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.medan{position:absolute;z-index:0;pointer-events:none;user-select:none}

/* ---------- satu tarikan */
.tarik{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.tarik path{fill:none;stroke-linecap:butt;stroke-linejoin:round}
.t-isi{stroke:var(--jalur);stroke-width:var(--t)}
.t-arsir{stroke:var(--tinta);stroke-width:calc(var(--t) * .55);stroke-dasharray:2.5 22;opacity:.85}
.papan-tinta .t-arsir{stroke:var(--tinta)}
[style*="--jalur:var(--tinta)"] .t-arsir{stroke:#fff}
.tarik path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-io)}
.js .tarik:not(.on) .t-isi{stroke-dashoffset:var(--len)}
.js .tarik:not(.on) .t-arsir{opacity:0}
.t-arsir{transition:opacity .4s ease 1.2s}

/* ---------- tipografi */
.eb{margin:0 0 14px;font:700 11.5px/1.2 var(--f-teks);letter-spacing:.16em;text-transform:uppercase}
.d1,.d2,.d3,.d4{font-family:var(--f-disp);font-weight:800;margin:0;text-wrap:balance}
.d1{font-size:clamp(38px,min(6vw,9.4vh),92px);line-height:.96;letter-spacing:-.045em}
.d2{font-size:clamp(30px,min(4.2vw,6.6vh),62px);line-height:1.02;letter-spacing:-.038em;max-width:18ch}
.d3{font-size:clamp(22px,min(2.2vw,3.4vh),30px);line-height:1.05;letter-spacing:-.03em}
.d4{font-size:clamp(17px,min(1.5vw,2.4vh),21px);line-height:1.15;letter-spacing:-.02em}
.lead{font-size:clamp(16px,min(1.2vw,2.1vh),19px);line-height:1.5;max-width:46ch;margin:clamp(10px,2vh,20px) 0 0;text-wrap:pretty}
.kp{margin-bottom:clamp(24px,4.5vh,52px)}
.mini{margin:6px 0 14px;font:700 11px var(--f-teks);letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.cat,.sumber{font-size:12.5px;line-height:1.5;opacity:.7;margin:16px 0 0}
.sumber{margin-top:28px}

/* tambalan berjahit: sudut kiri-atas terkelupas, sisi belakang lime */
.jh{--patch:var(--ungu);--teks:#fff;--L:.38em;position:relative;display:inline-block;padding:.02em .2em .06em .22em;margin:0 .04em;color:var(--teks);
  background:var(--patch) var(--grain);background-size:512px;clip-path:polygon(var(--L) 0,100% 0,100% 100%,0 100%,0 var(--L))}
.jh>span{position:relative;z-index:1}
.jh::after{content:"";position:absolute;inset:.12em;border:2px dashed rgba(255,255,255,.75);clip-path:polygon(calc(var(--L) - .1em) 0,100% 0,100% 100%,0 100%,0 calc(var(--L) - .1em))}
.jh::before{content:"";position:absolute;left:0;top:0;width:var(--L);height:var(--L);background:var(--lime);clip-path:polygon(100% 0,100% 100%,0 100%);z-index:2}
.jk{font-family:var(--f-teks);font-style:italic;font-weight:600;letter-spacing:-.02em;color:var(--kuas,var(--ungu));
  background:linear-gradient(currentColor,currentColor) 0 92%/100% .07em no-repeat;padding-bottom:.04em}
.papan-kuning{--kuas:var(--ungu)}
.papan-krem .jh{--patch:var(--oranye);--teks:var(--tinta)}.papan-krem{--kuas:var(--oranye)}
.papan-tinta .jh{--patch:var(--pink);--teks:var(--tinta)}.papan-tinta .jh::before{background:var(--lime)}.papan-tinta{--kuas:var(--pink)}
.papan-biru .jh{--patch:var(--oranye);--teks:var(--tinta)}.papan-biru{--kuas:var(--oranye)}
.papan-lime .jh{--patch:var(--ungu)}.papan-lime .jh::before{background:#fff}
.papan-ungu .jh{--patch:var(--lime);--teks:var(--tinta)}.papan-ungu .jh::before{background:#fff}.papan-ungu .jh::after{border-color:rgba(35,34,38,.55)}.papan-ungu{--kuas:var(--lime)}
.papan-pink .jh{--patch:var(--biru)}.papan-pink{--kuas:var(--biru)}
.papan-oranye .jh{--patch:var(--kuning);--teks:var(--tinta)}.papan-oranye .jh::after{border-color:rgba(35,34,38,.5)}.papan-oranye{--kuas:var(--tinta)}

/* ---------- tombol stiker: muka tinta bergrain, tepi die-cut putih rata, lapis warna meleset (misprint), titik halftone di bawah */
.stk-btn{--bg:var(--tinta);--fg:#fff;--acc:var(--ungu);position:relative;display:inline-flex;text-decoration:none;font:700 16px/1 var(--f-teks);
  transform:rotate(-1.5deg);transition:transform .2s var(--ease-out)}
.stk-btn::before{content:"";position:absolute;inset:0;border-radius:12px;background:var(--acc);transform:translate(6px,6px);box-shadow:0 0 0 5px var(--acc)}
.stk-btn>span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:11px;padding:17px 24px 18px;border-radius:12px;color:var(--fg);
  background:var(--bg) var(--grain);background-size:512px;box-shadow:0 0 0 5px #fff;overflow:hidden}
.stk-btn>span::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.22) 1.1px,transparent 1.5px) 0 0/6px 6px;
  -webkit-mask:linear-gradient(to top,#000,transparent 75%);mask:linear-gradient(to top,#000,transparent 75%)}
.stk-btn .ar{width:16px;height:16px;transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.stk-btn:hover{transform:rotate(0) translate(-1px,-1px)}.stk-btn:hover .ar{transform:translateX(3px)}}
.stk-btn:active{transform:rotate(0) translate(3px,3px)}
.stk-btn.kecil{font-size:14.5px}.stk-btn.kecil>span{padding:12px 17px 13px;border-radius:10px;box-shadow:0 0 0 4px #fff}.stk-btn.kecil::before{border-radius:10px;transform:translate(4px,4px);box-shadow:0 0 0 4px var(--acc)}
.stk-btn.besar{font-size:17px}.stk-btn.besar>span{padding:20px 28px 21px}
.papan-tinta .stk-btn,.papan-ungu .stk-btn{--bg:var(--lime);--fg:var(--tinta);--acc:var(--pink)}
.papan-oranye .stk-btn{--acc:var(--kuning)}
.nav .stk-btn{--acc:var(--lime)}
.tautan{font-weight:700;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:3px;transition:background-size .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.tautan:hover{background-size:40% 2px}}

/* ---------- nav: sobekan kertas berpetak yang ditempel selotip di atas papan */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding:14px var(--gut);pointer-events:none}
.nav-in{pointer-events:auto;position:relative;max-width:calc(var(--wrap) + 40px);margin:0 auto;display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:12px 14px 12px 24px;color:var(--tinta);transform:rotate(-.4deg);
  background:var(--kertas);background-image:linear-gradient(rgba(70,120,190,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(70,120,190,.12) 1px,transparent 1px),var(--grain);background-size:22px 22px,22px 22px,512px;
  -webkit-mask:url(../aset/tex/sobek-atas.png) top/100% 10px no-repeat,linear-gradient(#000,#000) 0 9px/100% calc(100% - 18px) no-repeat,url(../aset/tex/sobek-bawah.png) bottom/100% 10px no-repeat;
          mask:url(../aset/tex/sobek-atas.png) top/100% 10px no-repeat,linear-gradient(#000,#000) 0 9px/100% calc(100% - 18px) no-repeat,url(../aset/tex/sobek-bawah.png) bottom/100% 10px no-repeat;
  filter:drop-shadow(0 10px 14px rgba(35,34,38,.18))}
.nav-in .nav-tp{position:absolute;width:70px;height:auto;top:-8px;z-index:3;pointer-events:none}
.nav-in .nav-tp.kiri{left:-30px;transform:rotate(-32deg)}.nav-in .nav-tp.kanan{right:-30px;transform:rotate(30deg)}
.nav-logo{display:block;color:var(--tinta);flex:none}
.nav-logo svg{height:clamp(32px,2.8vw,42px);width:auto;display:block}
.nav-menu{display:flex;gap:clamp(14px,2.2vw,28px);margin-left:auto;font:700 14px var(--f-teks)}
.nav-menu a{text-decoration:none;padding:6px 0;background:linear-gradient(var(--ungu),var(--ungu)) 0 100%/0 3px no-repeat;transition:background-size .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav-menu a:hover{background-size:100% 3px}}


/* ---------- hero: kiri = pesan (eyebrow > judul > lead > aksi > poin), kanan = bukti (strip) */
.hero{padding-top:clamp(120px,17vh,170px)}
.hero-g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:center}
.hero .d1{font-size:clamp(38px,min(5.2vw,8.6vh),84px);max-width:13.5ch}
.jh{white-space:nowrap}
.hero .lead{margin-top:clamp(14px,2.4vh,22px);max-width:40ch}
.aksi{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(20px,3.6vh,32px)}
.poin{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;padding:0;margin:clamp(14px,2.4vh,20px) 0 0;font-weight:700;font-size:14px;opacity:.85}
.poin li{display:flex;align-items:center;gap:8px}
.poin li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tinta)}
.hero-v{position:relative;height:min(36vw,calc(100svh - 220px));min-height:340px}
.hero-v .medan{position:absolute;left:50%;top:50%;width:118%;transform:translate(-48%,-50%);opacity:.9}
.hero-v{--sw:min(11vw,calc((100svh - 300px) / 3.3))}
.strip{margin:0;position:absolute;width:var(--sw,min(11vw,calc((100svh - 300px) / 3.3)));min-width:104px;transform:rotate(var(--r,0deg))}
.strip img{width:100%;height:auto;box-shadow:0 1px 0 rgba(0,0,0,.08),0 18px 30px -18px rgba(0,0,0,.45);border-radius:2px}
.strip figcaption{font:700 12px var(--f-teks);margin-top:10px;opacity:.75}
.hero .s1{--r:-5deg;left:4%;top:3%;z-index:3}
.hero .s2{--r:4deg;left:calc(4% + max(var(--sw),104px) + 12%);top:9%;z-index:3}
.tp{position:absolute;z-index:4;width:44%;pointer-events:none}
.t-atas{top:-5%;left:30%;width:40%;transform:rotate(-7deg)}
.strip .t-atas{top:-22px;height:auto}
.hero-kamera{position:absolute;right:-14%;top:-14%;width:26%;z-index:2;transform:rotate(9deg)}
.bd{user-select:none;pointer-events:none}

/* ---------- pita alur */
.pita{background:var(--tinta) var(--grain);background-size:512px;color:var(--lime);overflow:hidden;padding:12px 0;border-block:var(--t) solid var(--tinta)}
.pita-t{display:flex;width:max-content;gap:24px;align-items:center;animation:jalan 38s linear infinite;font:800 clamp(20px,2vw,28px)/1 var(--f-disp);letter-spacing:-.03em;white-space:nowrap}
.pita-t .wm{display:inline-block;color:var(--kuning)}.pita-t .wm svg{height:1.05em;width:auto;display:block}
.pita.balik{background-color:var(--lime);color:var(--tinta);border-block-color:var(--lime)}
.pita.balik .pita-t{animation-direction:reverse;animation-duration:46s}
.pita.balik .wm{color:var(--tinta)}
@keyframes jalan{to{transform:translateX(-50%)}}

/* ---------- kertas berpetak */
.banding{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(20px,2.6vh,32px) clamp(28px,3.4vw,52px);align-items:center}
.kp-baris{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;margin:0}
.kp-baris .lead{margin-top:0}.kp-baris .sumber{margin-top:10px}
.banding .d2{font-size:clamp(30px,min(3.6vw,5.8vh),54px)}
.kertas{position:relative;color:var(--tinta);padding:clamp(26px,4vh,40px) clamp(22px,2.4vw,36px) clamp(24px,3.6vh,36px);transform:rotate(var(--r,0deg));
  background:var(--kertas) var(--grain);
  background-image:linear-gradient(rgba(70,120,190,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(70,120,190,.11) 1px,transparent 1px),var(--grain);
  background-size:26px 26px,26px 26px,512px;
  -webkit-mask:url(../aset/tex/sobek-atas.png) top/100% 18px no-repeat,linear-gradient(#000,#000) 0 17px/100% calc(100% - 34px) no-repeat,url(../aset/tex/sobek-bawah.png) bottom/100% 18px no-repeat;
          mask:url(../aset/tex/sobek-atas.png) top/100% 18px no-repeat,linear-gradient(#000,#000) 0 17px/100% calc(100% - 34px) no-repeat,url(../aset/tex/sobek-bawah.png) bottom/100% 18px no-repeat}
.kertas .tp{top:4px;left:8%;width:30%}
/* Hirarki perbandingan: kertas = pembanding (diredam), tawaran = jawaban (kontras penuh). */
.banding .kertas{color:rgba(35,34,38,.78)}
.banding .kertas .d3{color:var(--tinta)}
.banding .kertas .rw.tot b{color:var(--oranye)}
.tawaran{position:relative;color:var(--krem);padding:clamp(30px,4.6vh,44px) clamp(24px,2.6vw,38px) clamp(26px,4vh,38px);transform:rotate(var(--r,0deg));
  background:var(--tinta) var(--grain);background-size:512px;border-radius:4px;box-shadow:0 26px 40px -26px rgba(35,34,38,.55)}
.tawaran .d3{color:#fff;font-size:clamp(26px,min(2.6vw,4vh),36px)}
.tawaran .mini{color:var(--lime);opacity:1}
.tawaran .rw{border-bottom-color:rgba(251,246,242,.14)}
.tawaran .rw span{color:rgba(251,246,242,.82)}
.tawaran .rw.ya b{color:var(--lime)}
.tawaran .rw.ya b::before{background:var(--lime)}
.tawaran .rw.tot{border-bottom:0;padding-top:clamp(14px,2.2vh,20px);align-items:baseline}
.tawaran .rw.tot span{color:#fff;font-size:clamp(15px,2vh,17px)}
.tawaran .rw.tot b{font-size:clamp(30px,min(2.9vw,5vh),44px);line-height:1;color:var(--lime);letter-spacing:-.04em}
.tawaran .tp{top:-14px;left:10%;width:30%}
.tawaran .cap-chip{color:var(--tinta)}

.rw{display:flex;justify-content:space-between;gap:16px;padding:clamp(4px,.7vh,8px) 0;border-bottom:1.5px solid rgba(35,34,38,.14);font-size:clamp(13.5px,1.75vh,15px)}
.rw b{font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rw.tot{border-bottom:3px solid var(--tinta);font-weight:700}
.rw.tot b{font-family:var(--f-disp);font-weight:800;font-size:16.5px;letter-spacing:-.02em}
.rw.ya b::before{content:"";display:inline-block;width:.55em;height:.85em;margin-right:8px;background:var(--hijau);clip-path:polygon(0 0,60% 0,100% 30%,100% 100%,0 100%);vertical-align:-1px}
.sep{height:clamp(6px,1.2vh,12px)}
.cap-chip{position:absolute;right:20px;top:24px;margin:0;padding:6px 10px;background:var(--lime);font:700 11px var(--f-teks);letter-spacing:.06em;transform:rotate(3deg)}
.kertas-bd{position:absolute;right:-6px;bottom:24px;width:92px;transform:rotate(10deg);opacity:.95}

/* ---------- kalkulator */
.hitung-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center;max-width:1080px}
.hitung-g .kp{margin:0}
.kalk{display:grid;gap:2px;background:rgba(251,246,242,.12);border-radius:22px;overflow:hidden}
.k-in,.k-out{padding:clamp(24px,3vw,40px);background:#2B2A2F}
.k-lb{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 12px;font-weight:700;font-size:13.5px;color:rgba(251,246,242,.75)}
.k-lb output{font:800 38px/1 var(--f-disp);color:var(--lime);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
input[type=range]{--p:28.6%;-webkit-appearance:none;appearance:none;width:100%;height:var(--t);margin:6px 0 34px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:12px;background:linear-gradient(var(--pink),var(--pink)) 0/var(--p) 100% no-repeat,rgba(251,246,242,.16)}
input[type=range]::-moz-range-track{height:12px;border-radius:12px;background:rgba(251,246,242,.16)}
input[type=range]::-moz-range-progress{height:12px;border-radius:12px;background:var(--pink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--t);height:var(--t);margin-top:calc(6px - var(--t) / 2);border-radius:50%;background:var(--lime);border:5px solid var(--tinta);box-shadow:0 0 0 3px var(--lime);transition:transform .15s var(--ease-out)}
input[type=range]::-moz-range-thumb{width:var(--t);height:var(--t);border-radius:50%;background:var(--lime);border:5px solid var(--tinta)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.tiket{display:flex;gap:10px;flex-wrap:wrap}
.tiket button{flex:1;min-width:84px;padding:11px 10px;border-radius:999px;border:2px solid rgba(251,246,242,.3);background:transparent;color:var(--krem);font:700 14.5px var(--f-teks);cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .16s var(--ease-out)}
.tiket button[aria-checked=true]{background:var(--lime);color:var(--tinta);border-color:var(--lime)}
.tiket button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.tiket button:not([aria-checked=true]):hover{border-color:var(--krem)}}
.k-angka{margin:0;font:800 clamp(40px,min(5vw,8vh),76px)/1 var(--f-disp);letter-spacing:-.045em;color:var(--pink);font-variant-numeric:tabular-nums}
.k-out .cat{color:rgba(251,246,242,.7);opacity:1}

/* ---------- langkah (catatan tempel) */
.langkah{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.catatan{position:relative;color:var(--tinta);padding:24px 22px 26px;min-height:min(250px,32vh);transform:rotate(var(--r));background:var(--kuning) var(--grain);background-size:512px}
.catatan:nth-child(2){background-color:var(--pink)}.catatan:nth-child(3){background-color:var(--krem)}.catatan:nth-child(4){background-color:var(--lime)}
.catatan::before{content:"";position:absolute;left:50%;top:-12px;width:70px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.55)}
.no{display:block;font:800 clamp(40px,6vh,54px)/1 var(--f-disp);letter-spacing:-.05em;margin-bottom:14px}
.catatan p{margin:8px 0 0;font-size:15px;line-height:1.5}

/* ---------- spek */
.spek{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vh,44px) clamp(24px,3vw,56px)}
.spek li{border-top:3px solid var(--tinta);padding-top:clamp(12px,2.2vh,20px);display:grid;grid-template-columns:clamp(64px,10vh,92px) 1fr;column-gap:18px;align-items:start}
.spek-bd{grid-row:1/3;width:clamp(64px,10vh,92px);height:clamp(64px,10vh,92px);object-fit:contain}
.spek p{margin:6px 0 0;font-size:15px}

/* ---------- galeri: kiri = konteks + daftar frame, kanan = empat strip rapat sebagai satu kelompok */
.galeri-g{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.galeri-g .kp{margin:0}
.frame-list{list-style:none;padding:0;margin:clamp(18px,3.2vh,30px) 0 0;border-top:2px solid rgba(255,255,255,.35)}
.frame-list li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:2px solid rgba(255,255,255,.35);font:800 clamp(16px,2.2vh,19px)/1.2 var(--f-disp);letter-spacing:-.02em}
.frame-list b{font:700 12px var(--f-teks);letter-spacing:.08em;color:var(--lime)}
.galeri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,22px);align-items:start;max-width:calc((100svh - 230px) / 3 * 3 + 66px);justify-self:end;width:100%}
.galeri .strip{position:relative;width:auto;min-width:0}
.galeri .strip:nth-child(even){margin-top:clamp(24px,5vh,48px)}
.galeri .strip .t-atas{top:-16px;left:22%;width:56%}
.galeri figcaption{color:#fff;opacity:.9;display:flex;gap:6px;align-items:baseline}
.galeri figcaption b{color:var(--lime);font-size:11px}

/* ---------- faq */
.faq-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.faq-g .kp{position:sticky;top:120px}
.faq-bd{width:clamp(96px,16vh,140px);margin-top:30px;transform:rotate(-6deg)}
.faq details{border-top:3px solid var(--tinta)}
.faq details:last-child{border-bottom:3px solid var(--tinta)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(12px,2.2vh,20px) 0;font:800 clamp(17px,min(1.4vw,2.4vh),20px)/1.25 var(--f-disp);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;position:relative;width:22px;height:22px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:9px;width:22px;height:4px;background:currentColor;transition:transform .25s var(--ease-out)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq-a p{margin:0 0 20px;max-width:52ch;font-size:15px}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .3s var(--ease-out),content-visibility .3s allow-discrete}
.faq details[open]::details-content{block-size:auto}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}

/* ---------- cta */
.cta-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.cta-tanda{color:var(--tinta);width:42px;margin-bottom:20px}.cta-tanda svg{width:100%;height:auto;display:block}
.cta .d1{max-width:14ch}
.cta .stk-btn{margin-top:28px}


/* ---------- kaki */
.kaki{background:var(--tinta) var(--grain);background-size:512px;color:var(--krem);padding:52px 0 40px}
.kaki-g{display:grid;grid-template-columns:auto 1fr;gap:28px 60px;align-items:center}
.kaki-logo{color:var(--krem)}.kaki-logo svg{height:34px;width:auto;display:block}
.kaki ul{grid-column:1/-1;list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 24px;padding:0;margin:0;font-weight:700;font-size:13.5px}
.kaki ul a{text-decoration:none;opacity:.85}.kaki ul a:hover{opacity:1}
.kaki p{grid-column:1/-1;margin:0;font-size:12.5px;opacity:.6;border-top:1.5px solid rgba(251,246,242,.15);padding-top:22px}

/* ---------- munculan */
.js .rv{opacity:0;transform:translateY(18px) rotate(var(--r,0deg))}
.js .rv.in{opacity:1;transform:translateY(0) rotate(var(--r,0deg));transition:opacity .6s var(--ease-out) calc(var(--i,0) * 70ms),transform .7s var(--ease-out) calc(var(--i,0) * 70ms)}

/* ---------- responsif */
@media (max-width:960px){
  section.bg{min-height:0}
  .banding .kp{margin-bottom:12px}
  .kp-baris{grid-template-columns:1fr}
  .galeri{grid-template-columns:1fr 1fr;max-width:none}
  .galeri-g{grid-template-columns:1fr}
  .strip{width:clamp(110px,30vw,160px)}
  .nav-menu{display:none}.nav-cta{margin-left:auto}
  .hero-g,.hitung-g,.faq-g,.cta-g,.banding{grid-template-columns:1fr}
  .hero-v{height:clamp(380px,90vw,560px);margin-top:12px}
  .strip{width:clamp(120px,30vw,170px)}
  .langkah{grid-template-columns:1fr 1fr}
  .spek{grid-template-columns:1fr 1fr}
  .galeri{grid-template-columns:1fr 1fr;max-width:none}
  .galeri-g{grid-template-columns:1fr}
  .faq-g .kp{position:static}
  
  .tarik{opacity:.0}
}
@media (max-width:600px){
  .langkah,.spek{grid-template-columns:1fr}
  .catatan{min-height:0}
  .kaki-g{grid-template-columns:1fr}.kaki ul{justify-content:flex-start}
  .stk-btn.kecil>span{padding:11px 16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pita-t{animation:none}
  .js .rv,.js .rv.in{transform:rotate(var(--r,0deg));transition:opacity .3s ease}
  .tarik path{transition:none}.js .tarik:not(.on) .t-isi{stroke-dashoffset:0}.js .tarik:not(.on) .t-arsir{opacity:.85}
}

/* ---------- recall wordmark */
.judul-wm{display:flex;align-items:center;gap:.3em}
.judul-wm .wm{display:inline-block;color:var(--kuning)}.judul-wm .wm svg{height:.95em;width:auto;display:block;margin-top:.1em}
.stempel{position:absolute;right:16px;bottom:14px;color:var(--tinta);opacity:.32;transform:rotate(-6deg)}
.stempel svg{height:15px;width:auto;display:block}
.catatan{padding-bottom:44px}
.kaki{padding-bottom:0;overflow:hidden}
.kaki-besar{color:var(--kuning);margin:clamp(32px,6vh,64px) auto 0;padding:0 var(--gut);max-width:calc(var(--wrap) + 2 * var(--gut));line-height:0}
.kaki-besar svg{width:100%;height:auto;display:block;margin-bottom:-1.2%}

/* ---------- hero: beautiful mess. Ornamen di pinggiran kelompok, tidak pernah di atas foto atau teks. */
.hero-t{position:relative}
.orn{position:absolute;pointer-events:none;user-select:none;z-index:1}
.petak{width:80%;left:-2%;top:56%;transform:rotate(-8deg);z-index:1}
.o-bintang{width:24%;left:-22%;top:-12%;transform:rotate(-12deg);z-index:4}
.o-mata{position:absolute;left:-14.6%;top:-3.6%;z-index:5;transform:rotate(-12deg);display:flex;gap:4px}
.o-mata i{display:block;width:16px;height:21px;border-radius:50%;background:#fff;position:relative;border:3px solid var(--tinta)}
.o-mata i::after{content:"";position:absolute;width:7px;height:9px;border-radius:50%;background:var(--tinta);left:5px;top:6px}
.o-hati{width:22%;right:-16%;bottom:-6%;transform:rotate(14deg);z-index:4}
.o-kilat{width:14%;left:-16%;bottom:12%;transform:rotate(-16deg);z-index:4}
.o-kejut{width:20%;right:4%;top:-14%;z-index:4}
.o-spiral{width:16%;left:-14%;bottom:4%;transform:rotate(8deg);z-index:2}
.o-kilau{width:40px;right:-2%;top:-40px}
.o-ast{width:38px;left:-58px;top:46%;transform:rotate(12deg)}
.o-panah{width:110px;left:-4px;bottom:-62px;transform:rotate(160deg) scaleY(-1)}
.o-cangkir{width:110px;left:calc(-1 * var(--gut) - 46px);bottom:-170px;transform:rotate(-10deg)}
@media (max-width:960px){.o-ast,.o-cangkir,.o-panah,.petak{display:none}.o-bintang{left:-4%}.o-mata{left:3.6%}}

/* ---------- klaster ornamen per bagian (selalu di pinggir isi, tidak di atas foto atau teks) */
.klaster{position:absolute;pointer-events:none}
.mata{display:flex;gap:4px;position:absolute;z-index:5}
.mata i{display:block;width:15px;height:20px;border-radius:50%;background:#fff;position:relative;border:3px solid var(--tinta)}
.mata i::after{content:"";position:absolute;width:6px;height:8px;border-radius:50%;background:var(--tinta);left:4px;top:6px}
.hero-medan-kiri{left:-15vw;top:24%;width:24vw;opacity:.85}

.kalk-w{position:relative}
.kalk-w .kalk{position:relative;z-index:2}
.k-petak{width:62%;right:-12%;bottom:-16%;transform:rotate(7deg);z-index:1}
.k-bintang{width:100px;left:-78px;top:-70px;transform:rotate(-14deg);z-index:3}
.k-mata{left:-48px;top:-38px;transform:rotate(-14deg)}
.k-kilau{width:46px;right:-64px;bottom:30%;z-index:3}
.k-tp{position:absolute;width:120px;right:16%;top:-16px;transform:rotate(4deg);z-index:4}
.kalk{border-radius:10px}

.kp-orn{position:relative}
.sp-k{right:0;top:-60px;width:min(34vw,400px);height:230px}
.sp-medan{width:62%;right:8%;top:-18%;opacity:.95}
.sp-kamera{width:46%;right:20%;top:6%;transform:rotate(-9deg);z-index:2}
.sp-bintang{width:26%;right:-2%;top:30%;transform:rotate(14deg);z-index:3}
.sp-mata{right:7.5%;top:44%;transform:rotate(14deg)}
.sp-kejut{width:18%;right:63%;top:-2%;z-index:3}
.sp-spiral{width:22%;right:6%;top:-12%;z-index:3}

.galeri{position:relative}
.galeri .strip{z-index:2}
.g-medan{width:70%;left:14%;top:-6%;z-index:0;opacity:.9}
.g-k{position:relative;height:clamp(150px,22vh,220px);margin-top:clamp(16px,3vh,28px)}
.g-petak{width:min(220px,58%);left:0;top:0;transform:rotate(-6deg)}
.g-kacamata{width:min(200px,52%);left:10%;top:18%;transform:rotate(-8deg);z-index:2}
.g-bintang{width:min(90px,24%);left:52%;top:-4%;transform:rotate(12deg);z-index:3}
.g-kilau{width:40px;left:68%;top:46%}
.g-panah{width:min(150px,36%);left:62%;top:58%;transform:rotate(-18deg)}

.f-k{position:relative;height:clamp(150px,22vh,220px);margin-top:clamp(14px,3vh,28px)}
.f-petak{width:min(240px,62%);left:0;top:0;transform:rotate(-4deg)}
.f-gelembung{width:min(140px,36%);left:8%;top:12%;transform:rotate(-6deg);z-index:2}
.f-kilat{width:min(80px,20%);left:40%;top:-6%;transform:rotate(14deg);z-index:3}
.f-qr{width:min(84px,22%);left:38%;top:44%;transform:rotate(8deg);z-index:2}
.f-ast{width:40px;left:62%;top:8%}
.f-panah{width:min(140px,34%);left:62%;top:40%;transform:rotate(-8deg)}

.cta-g{position:relative}
.c-k{position:relative;width:118%;height:clamp(340px,56vh,540px);margin-right:-18%}
.c-medan{width:92%;left:4%;top:0;opacity:.9}
.c-foto{position:absolute;width:74%;left:14%;top:4%;transform:rotate(5deg);z-index:2}
.c-kamera{width:34%;left:-4%;bottom:2%;transform:rotate(-12deg);z-index:3}
.c-cangkir{width:26%;right:-2%;top:-4%;transform:rotate(10deg);z-index:3}
.c-kejut{width:20%;right:4%;bottom:6%}
.c-kilau{width:44px;left:6%;top:6%}

.kaki-logo{color:var(--kuning)}.kaki-logo svg{height:30px;width:auto;display:block}
.kaki{padding-bottom:40px}
@media (max-width:960px){.k-bintang,.k-mata,.k-kilau{display:none}.hero-v{--sw:clamp(110px,28vw,150px)}.o-bintang{top:auto!important;bottom:-4%;left:auto!important;right:2%;width:22%!important}.o-mata{display:none}.sp-k{display:none}.hero-medan-kiri{display:none}.k-petak{display:none}}

/* ======== KONSISTENSI (satu aturan per komponen) ======== */
/* penekanan judul = tambalan berjahit saja; .jk tidak dipakai lagi */
/* selotip = selalu gambar selotip asli (bukan kotak CSS) */
.catatan::before{display:none}
.catatan .c-tp{position:absolute;left:50%;top:-20px;width:110px;transform:translateX(-50%) rotate(-3deg);pointer-events:none}
/* kartu = sudut 4px + grain, sama untuk kertas, tawaran, kalkulator */
.kalk{border-radius:4px}
.k-in,.k-out{background:#2B2A2F var(--grain);background-size:512px}
/* tombol pilihan = stiker kecil, pilihan aktif diberi tepi die-cut seperti tombol utama */
.tiket button{border-radius:10px;transform:rotate(0)}
.tiket button[aria-checked=true]{box-shadow:0 0 0 4px #fff,6px 6px 0 4px var(--pink);transform:rotate(-1.5deg)}
.tiket button:active{transform:scale(.97)}

/* catatan cara kerja: jatuh-tertempel saat terlihat, selotip menyusul */
.js .langkah .catatan.rv{opacity:0;transform:translateY(-46px) rotate(calc(var(--r) * 4))}
.js .langkah .catatan.rv.in{opacity:1;transform:translateY(0) rotate(var(--r));
  transition:opacity .35s ease calc(var(--i) * 120ms),transform .75s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 120ms)}
.js .langkah .catatan .c-tp{opacity:0;transform:translateX(-50%) rotate(-3deg) scaleX(.2)}
.js .langkah .catatan.in .c-tp{opacity:1;transform:translateX(-50%) rotate(-3deg) scaleX(1);transition:opacity .2s ease calc(var(--i) * 120ms + 480ms),transform .35s var(--ease-out) calc(var(--i) * 120ms + 480ms)}
@media (hover:hover) and (pointer:fine){.langkah .catatan.in{transition:transform .25s var(--ease-out)}.langkah .catatan.in:hover{transform:translateY(-6px) rotate(0)}}
@media (prefers-reduced-motion:reduce){.js .langkah .catatan.rv{transform:rotate(var(--r))}.js .langkah .catatan .c-tp{transform:translateX(-50%) rotate(-3deg)}}

/* galeri: 4 gaya frame */
.galeri figcaption{line-height:1.25}

/* faq: satu tokoh, bukan tumpukan */
.f-tokoh{position:relative;width:min(210px,52%);margin-top:clamp(18px,3.5vh,34px)}
.f-gelembung{position:relative;width:100%;transform:rotate(-6deg)}
.f-mata{left:38%;top:30%;transform:rotate(-6deg)}
.f-mata i{width:22px;height:28px}.f-mata i::after{width:9px;height:11px;left:6px;top:8px}

/* wordmark kecil di atas headline */
.wm-atas{display:block;width:clamp(96px,8vw,124px);margin-bottom:clamp(14px,2.4vh,22px);color:currentColor}
.wm-atas svg{width:100%;height:auto;display:block}
.papan-lime .wm-atas{color:var(--ungu)}.papan-oranye .wm-atas{color:var(--tinta)}

/* footer: wordmark + simpul MOTE bergaya Mimoto */
.kaki-merek{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.kaki-mote{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--krem)}
.kaki-mote span{font-size:12.5px;opacity:.6}
.kaki-mote img{width:72px;height:auto;transform:rotate(-8deg)}
.kaki-mote b{font:800 14px var(--f-teks);letter-spacing:.08em}

.galeri-g .d2{font-size:clamp(28px,min(3.4vw,5.6vh),50px)}

/* galeri: papan tempel di belakang strip (bukan latar polos) */
.g-papan{position:absolute;inset:-12% -10% -14% -8%;z-index:0;pointer-events:none}
.g-papan .orn{position:absolute}
.gp-petak{width:78%;left:12%;top:4%;transform:rotate(-5deg);opacity:.95}
.gp-blob{width:40%;right:-8%;top:18%;transform:rotate(12deg)}
.gp-medan2{width:32%;left:4%;top:24%;opacity:.9}
.gp-tabung{width:34%;left:-2%;top:-8%;transform:rotate(-20deg)}
.gp-tp1{width:16%;left:14%;top:2%;transform:rotate(-28deg)}
.gp-tp2{width:15%;right:20%;top:6%;transform:rotate(24deg)}
.gp-k1{width:40px;left:1%;top:58%}
.gp-k2{width:40px;right:2%;top:30%}
.gp-zz{width:20%;left:42%;bottom:-6%;transform:rotate(-4deg)}
.gp-bt{width:12%;right:-2%;top:-2%;transform:rotate(14deg)}
.gp-kl{width:8%;left:6%;top:4%;transform:rotate(-12deg)}
.galeri .strip{position:relative;z-index:2}
@media (max-width:960px){.g-papan{inset:-6% -4%}.gp-tabung,.gp-zz,.gp-blob,.gp-medan2,.gp-k1{display:none}}