/* MOTE web ekosistem — prototipe lokal, putaran 3.
   Mekanik gerak dari extrafazant.nl (kartu bertumpuk, kartu kipas, transisi tali). Rupa dari Graphic System Manual MOTE 2026.
   Putaran 3 (koreksi Ryan 9 Okt): judul rata tengah · skala lebih kecil dan lega · stiker dikurangi ·
   pita digambar ulang lebih ramping, masuk dan keluar lewat tepi kiri-kanan layar (tidak ada ujung yang kelihatan putus) ·
   satu nav saja (pindah brand lewat logo) · MTGOODS ungu. */
@font-face{font-family:DMD;font-weight:300;font-style:italic;src:url(../aset/font/DMSans_36pt-LightItalic.ttf)}
@font-face{font-family:DMD;font-weight:300;src:url(../aset/font/DMSans_36pt-Light.ttf)}
@font-face{font-family:DMD;font-weight:600;src:url(../aset/font/DMSans_36pt-SemiBold.ttf)}
@font-face{font-family:DMD;font-weight:700;src:url(../aset/font/DMSans_36pt-Bold.ttf)}
@font-face{font-family:DMS;font-weight:400;src:url(../aset/font/DMSans_18pt-Regular.ttf)}
@font-face{font-family:DMS;font-weight:400;font-style:italic;src:url(../aset/font/DMSans_18pt-Italic.ttf)}
@font-face{font-family:DMS;font-weight:500;src:url(../aset/font/DMSans_18pt-Medium.ttf)}
@font-face{font-family:DMS;font-weight:500;font-style:italic;src:url(../aset/font/DMSans_18pt-MediumItalic.ttf)}
@font-face{font-family:DMS;font-weight:600;src:url(../aset/font/DMSans_18pt-SemiBold.ttf)}
@font-face{font-family:DMS;font-weight:700;src:url(../aset/font/DMSans_18pt-Bold.ttf)}

:root{
  --kun:#FCD12D;--oranye:#FE7B00;--hijau:#019642;--lime:#CFF933;--merah:#FD0D32;--pink:#FF9ED8;--ungu:#7558FE;--biru:#0280EC;
  --ink:#232226;--putih:#FBF6F2;--krem:#F9EED8;
  --bg:var(--putih);--fg:var(--ink);--hl:var(--kun);--hlt:var(--ink);--bt:var(--kun);--btt:var(--ink);
  --gut:clamp(18px,3.4vw,56px);--r:clamp(16px,1.5vw,24px);--lebar:1180px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:DMS,system-ui,sans-serif;font-weight:500;color:var(--ink);background:var(--putih);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--kun);color:var(--ink)}

/* ---------- warna bagian ---------- */
.sec,.hero{background:var(--bg);color:var(--fg)}
.w-kun{--bg:var(--kun);--hl:var(--ink);--hlt:var(--kun);--bt:var(--ink);--btt:#fff}
.w-oranye{--bg:var(--oranye);--hl:var(--ink);--hlt:var(--kun);--bt:var(--ink);--btt:#fff}
.w-ungu{--bg:var(--ungu);--fg:#fff;--hl:var(--kun)}
.w-biru{--bg:var(--biru);--fg:#fff;--hl:var(--kun)}
.w-hijau{--bg:var(--hijau);--fg:#fff;--hl:var(--lime)}
.w-ink{--bg:var(--ink);--fg:#fff}
.w-krem{--bg:var(--krem)}

/* ---------- tipografi: DM Sans, rata tengah ---------- */
.d{font-family:DMD,sans-serif;font-weight:700;letter-spacing:-.045em;line-height:1}
.d i{font-weight:300;font-style:italic;letter-spacing:-.04em}
.d{position:relative}
.lekat{position:absolute;right:-1.55em;bottom:-.25em;width:1.55em;max-width:150px;min-width:74px;transform:rotate(var(--rt,0deg)) scale(.3);opacity:0;transition:transform .7s var(--ease) .5s,opacity .4s .5s;pointer-events:none}
.in .lekat,.lekat.in{transform:rotate(var(--rt,0deg));opacity:1}
.d mark{background:var(--hl);color:var(--hlt);padding:0 .16em .04em;border-radius:.16em;display:inline-block;transform:rotate(-2deg);font-style:normal}
.d1{font-size:clamp(40px,5.8vw,92px)}
.d2{font-size:clamp(34px,4.2vw,66px)}
.d3{font-size:clamp(26px,2.9vw,44px);line-height:1.04}
.d4{font-size:clamp(20px,1.7vw,26px);line-height:1.1;letter-spacing:-.03em}
.lead{font-style:italic;font-weight:500;font-size:clamp(16px,1.25vw,20px);line-height:1.35}
.p{font-size:clamp(16px,1.15vw,18px);line-height:1.55;max-width:34em}
.kecil{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ln{display:block;overflow:hidden;padding:.08em .1em .14em;margin:-.08em -.1em -.14em}
.ln>span{display:block;transform:translateY(112%);transition:transform 1s var(--ease)}
.in .ln>span,.ln.in>span{transform:none}
.ln:nth-child(2)>span{transition-delay:.08s}.ln:nth-child(3)>span{transition-delay:.16s}
.naik{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.in .naik,.naik.in{opacity:1;transform:none}
.naik.t1{transition-delay:.12s}.naik.t2{transition-delay:.22s}.naik.t3{transition-delay:.32s}

/* ---------- nav: logo = pemindah brand, pil tengah = menu brand itu ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50}
.nav-in{display:flex;align-items:flex-start;justify-content:space-between;padding:16px var(--gut) 0;pointer-events:none}
.nav-in>*{pointer-events:auto}
.merek{position:relative}
.logo{display:flex;align-items:center;gap:9px;height:44px;padding:0 14px 0 16px;border-radius:99px;background:#fff;color:var(--ink);transition:transform .3s var(--ease)}
.logo:hover{transform:rotate(-2deg)}
.logo .bw{height:17px}.logo .wm{height:15px}
.logo svg{height:100%;width:auto}
.logo b{font-family:DMD;font-weight:700;font-size:16px;letter-spacing:-.03em}
.logo img{height:15px;width:auto}
.logo .car{width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;margin-left:4px;transition:transform .3s var(--ease)}
.logo .car svg{width:9px;height:9px}
.merek.buka .car{transform:rotate(180deg)}
.merek-menu{position:absolute;left:0;top:52px;min-width:290px;background:#fff;border-radius:22px;padding:8px;display:grid;gap:2px;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:20px 0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.merek.buka .merek-menu{opacity:1;transform:none;pointer-events:auto}
.merek-menu small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.5;padding:8px 12px 4px}
.merek-menu a{display:grid;grid-template-columns:14px 1fr;gap:2px 12px;align-items:center;padding:10px 12px;border-radius:16px;transition:background .2s}
.merek-menu a:hover,.merek-menu a.on{background:var(--putih)}
.merek-menu a i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.merek-menu a b{font-family:DMD;font-weight:700;font-size:17px;letter-spacing:-.03em}
.merek-menu a span{grid-column:2;font-size:13px;opacity:.65;line-height:1.3}
.menu{display:flex;gap:2px;position:absolute;left:50%;transform:translateX(-50%);background:#fff;padding:4px;border-radius:99px}
.menu a{color:var(--ink);font-size:14px;font-weight:600;padding:8px 16px;border-radius:99px;transition:background .2s,color .2s}
.menu a:hover{background:var(--ink);color:#fff}
.kontak{display:flex;align-items:center;gap:8px;height:44px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;padding:0 18px;border-radius:99px;transition:transform .3s var(--ease)}
.kontak:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kun)}
.kontak:hover{transform:rotate(-3deg) scale(1.05)}

/* ---------- tombol + tautan bercoret ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 7px 0 22px;border-radius:99px;background:var(--bt);color:var(--btt);font-weight:700;font-size:15px;transition:transform .35s var(--ease)}
.btn .ar{width:36px;height:36px;border-radius:50%;background:var(--btt);color:var(--bt);display:grid;place-items:center;transition:transform .35s var(--ease)}
.btn svg{width:14px;height:14px}
.btn:hover{transform:rotate(-2deg) scale(1.04)}
.btn:hover .ar{transform:rotate(-38deg)}
.btn.ink{--bt:var(--ink);--btt:#fff}
.sq{display:inline-flex;align-items:center;gap:9px;font-family:DMD;font-weight:600;font-size:clamp(17px,1.35vw,21px);letter-spacing:-.03em;position:relative;padding-bottom:10px}
.sq .ar{width:1.3em;height:1.3em;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center}
.sq .ar svg{width:.5em;height:.5em}
.sq .gr{position:absolute;left:0;bottom:0;width:calc(100% - 1.7em);height:9px;overflow:visible}
.sq .gr path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease) .3s}
.in .sq .gr path,.sq.in .gr path{stroke-dashoffset:0}
.sq:hover .gr path{transition:none;animation:gambar .7s var(--ease)}
@keyframes gambar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---------- bagian ---------- */
.sec{position:relative;padding:clamp(72px,8.5vw,140px) var(--gut);overflow:hidden}
.isi{max-width:var(--lebar);margin-inline:auto}
.kepala{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;max-width:920px;margin-inline:auto}
.kepala .p{margin-inline:auto}
.kepala .aksi{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:10px}
.hero{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:120px var(--gut) clamp(40px,5vw,70px)}
.hero .d1{max-width:11em}
.hero .aksi{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:8px}
.hero.kecilan{min-height:auto;padding-top:clamp(150px,13vw,200px);padding-bottom:clamp(50px,6vw,90px)}
.narasi{max-width:760px;margin:clamp(26px,3vw,44px) auto 0;display:grid;gap:1.1em;text-align:center}
.narasi p{font-size:clamp(17px,1.35vw,21px);line-height:1.55}
.narasi p b{font-weight:700;background:var(--hl);color:var(--hlt);padding:0 .18em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- pita (digambar ulang: ramping, memuai, ujung di luar layar kiri-kanan) + stiker di atasnya ---------- */
.pb{position:relative;flex:none;align-self:stretch;width:auto;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));color:var(--pc,var(--ungu));pointer-events:none}
.pb>svg{width:100%;height:auto;overflow:visible;clip-path:inset(-40% 100% -40% 0);transition:clip-path 1.6s var(--ease)}
.pb.in>svg{clip-path:inset(-40% -10% -40% -10%)}
.pb.balik>svg{transform:scaleX(-1)}
.pb path,.pb circle{fill:currentColor}
.pb .stk{position:absolute;width:clamp(74px,8.4vw,132px);transform:translate(-50%,-82%) rotate(var(--rt,0deg));scale:0;transition:scale .6s var(--ease) var(--tunda,.8s);pointer-events:auto}
.pb.in .stk{scale:1}
.stk img{width:100%}

.hias{position:absolute!important;width:clamp(96px,10vw,156px);z-index:3!important;transform:rotate(var(--rt,0deg)) scale(.4);opacity:0;transition:transform .7s var(--ease),opacity .5s;pointer-events:none}
.hias.in{transform:rotate(var(--rt,0deg));opacity:1}
@media (max-width:860px){.lekat{right:-.4em;bottom:auto;top:-.9em;min-width:56px;width:1.1em}.hias{width:72px;top:14px!important;bottom:auto!important}}
/* ---------- pita jalan ---------- */
.mq{overflow:hidden;white-space:nowrap}
.mq-t{display:inline-flex;align-items:center;gap:clamp(36px,5vw,80px);padding-right:clamp(36px,5vw,80px);animation:jalan 36s linear infinite}
@keyframes jalan{to{transform:translateX(-50%)}}
.logos{width:100vw;margin-top:clamp(20px,3vw,44px)}
.logos img{height:clamp(26px,2.6vw,38px);width:auto;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.2)}
.mq.besar{padding:clamp(16px,2vw,28px) 0;background:var(--ink);color:#fff}
.mq.besar .mq-t{gap:.45em;padding-right:.45em;animation-duration:32s}
.mq.besar .it{display:inline-flex;align-items:center;gap:.45em}
.mq.besar .it{display:inline-flex;align-items:center;gap:.5em}
.mq.besar .it .st{display:inline-block;flex:0 0 1.35em;width:1.35em;height:1.35em;margin:0 .25em;transform:rotate(-8deg)}
.mq.besar .it:nth-child(even) .st{transform:rotate(7deg)}
.mq.besar .it .st img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.mq.besar .mq-t{gap:.6em!important}

/* ---------- foto berbingkai ---------- */
.pol{background:#fff;padding:clamp(7px,.7vw,11px);border-radius:var(--r);position:relative;transform:rotate(var(--rt,0deg));transition:transform .5s var(--ease)}
.pol img{width:100%;aspect-ratio:var(--ar,4/3);object-fit:cover;border-radius:calc(var(--r) - 7px)}
.pol:hover{transform:rotate(0) scale(1.02);z-index:4}
.foto2{display:flex;justify-content:center;align-items:center;gap:0;max-width:860px;margin:clamp(34px,4vw,60px) auto 0;position:relative}
.foto2 .pol{width:46%}
.foto2 .a{--rt:-3.5deg;margin-right:-3%}
.foto2 .b{--rt:4deg;margin-top:8%}
.foto2 .dua{position:absolute;left:50%;top:-6%;width:24%;aspect-ratio:1.2;transform:translateX(-50%);z-index:5}
.foto2 .dua .stk{position:absolute;width:56%}
.foto2 .dua .stk:nth-child(1){left:0;top:10%;transform:rotate(-9deg)}
.foto2 .dua .stk:nth-child(2){right:0;top:0;transform:rotate(8deg)}

/* ---------- kartu karya: logo brand + visual + judul ---------- */
.kar{display:block;background:#fff;color:var(--ink);border-radius:calc(var(--r) * 1.2);overflow:hidden;transition:transform .45s var(--ease)}
.kar:hover{transform:translateY(-8px) rotate(-1deg)}
.kar .gb{aspect-ratio:4/3;background:var(--c,#eee);position:relative;overflow:hidden;display:grid;place-items:center}
.kar .gb img.ft{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.kar:hover .gb img.ft{transform:scale(1.05)}
.kar .gb .besar{width:46%;background:#fff;border-radius:var(--r);padding:8% 6%;display:grid;place-items:center}
.kar .gb .besar img{max-height:70px;width:auto;max-width:100%}
.kar .ket{padding:clamp(14px,1.4vw,22px);display:grid;gap:10px}
.kar .brand{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kar .lg{height:30px;display:flex;align-items:center}
.kar .lg img{max-height:30px;max-width:120px;width:auto}
.kar .jenis{font-size:13px;font-weight:600;opacity:.6;text-align:right}
.kar .d{font-size:clamp(20px,1.8vw,27px);line-height:1.08}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);max-width:var(--lebar);margin:clamp(30px,4vw,56px) auto 0}
.grid4{grid-template-columns:repeat(4,1fr)}

/* ---------- kartu bertumpuk ---------- */
.tumpuk{padding-bottom:clamp(60px,7vw,110px);overflow:visible}
.tumpuk .kepala{position:sticky;top:clamp(84px,11vh,120px);z-index:1;padding-bottom:26px}
.tumpuk-list{position:relative;z-index:2}
.tumpuk .kepala.diam{position:static}
.tumpuk .kepala.diam~.tumpuk-list{margin-top:clamp(50px,6vw,90px)}
.tumpuk .kepala.diam~.tumpuk-list .kt{top:calc(clamp(110px,16vh,150px) + var(--i) * 18px);margin-bottom:26vh}
.tumpuk .kepala.diam~.tumpuk-list .kt:last-child{margin-bottom:0}
.kt{position:sticky;top:calc(clamp(240px,34vh,320px) + var(--i) * 18px);width:min(760px,86vw);margin:0 auto 42vh;display:block;transform-origin:50% 0}
.kt:last-child{margin-bottom:8vh}
.kt .kar .gb{aspect-ratio:16/9}
.kt .kar:hover{transform:none}
.tumpuk .tutup{display:flex;justify-content:center;position:relative;z-index:3}

/* ---------- kartu kipas ---------- */
.kipas{display:flex;justify-content:center;align-items:stretch;margin-top:clamp(36px,4.4vw,64px);padding-bottom:30px}
.kp{width:min(26vw,330px);border-radius:calc(var(--r) * 1.3);background:var(--c);color:var(--ct,#fff);transform:rotate(var(--rt)) translateY(var(--y,0));margin:0 -8px;transition:transform .55s var(--ease);position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(18px,1.8vw,28px);min-height:clamp(280px,25vw,360px)}
.kp:hover{transform:rotate(0) translateY(-14px) scale(1.03);z-index:5}
.kp .no{font-family:DMD;font-weight:300;font-style:italic;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.04em;line-height:1}
.kp .d{font-size:clamp(28px,3vw,46px)}
.kp p{font-size:clamp(15px,1.1vw,17px);line-height:1.4}
.kp ul{list-style:none;margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}
.kp li,.pil-tag{font-size:13px;font-weight:700;background:rgba(255,255,255,.94);color:var(--ink);padding:6px 12px;border-radius:99px;white-space:nowrap}

/* ---------- langkah ---------- */
.langkah{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:clamp(16px,2.2vw,36px);max-width:var(--lebar);margin:clamp(30px,3.6vw,54px) auto 0;text-align:left}
.langkah>div{border-top:2.5px solid currentColor;padding-top:14px}
.langkah small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.langkah .d{margin-top:8px}
.langkah p{font-size:16px;margin-top:8px;opacity:.9}

/* ---------- tim ---------- */
.tim{position:relative;max-width:1040px;margin:clamp(36px,4.4vw,70px) auto 0;display:grid;grid-template-columns:repeat(12,1fr);row-gap:clamp(24px,4vw,70px)}
.org{position:relative;grid-column:var(--col);margin-top:var(--mt,0);background:var(--c);aspect-ratio:4/5;border-radius:calc(var(--r) * 1.2);overflow:hidden}
.org img{position:absolute;left:50%;bottom:0;height:98%;width:auto;max-width:none;transform:translateX(-50%)}
.org b{position:absolute;left:6%;bottom:7%;font-family:DMD;font-weight:700;font-size:clamp(18px,1.9vw,28px);letter-spacing:-.04em;line-height:1;background:var(--nb,#fff);color:var(--nc,#232226);padding:.16em .36em .22em;border-radius:.24em;transform:rotate(var(--nr,-5deg));z-index:3}

/* ---------- formulir + faq ---------- */
.form{background:#fff;color:var(--ink);padding:clamp(20px,2.2vw,32px);border-radius:calc(var(--r) * 1.3);transform:rotate(1.5deg);max-width:440px;margin:clamp(30px,3.6vw,50px) auto 0;text-align:left}
.form label{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-top:16px}
.form label:first-of-type{margin-top:0}
.form .isian{border:2.5px solid var(--ink);border-radius:14px;padding:11px 15px;font-family:DMD;font-weight:700;font-size:clamp(19px,1.7vw,25px);letter-spacing:-.035em;margin-top:6px}
.form .btn{margin-top:20px}
.faq{max-width:820px;margin:clamp(26px,3.2vw,48px) auto 0;border-top:2.5px solid currentColor;text-align:left}
.faq details{border-bottom:2px solid rgba(35,34,38,.16)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary .d{font-size:clamp(19px,1.8vw,26px)}
.faq summary:after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:DMD;font-weight:600;font-size:22px;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary:after{transform:rotate(45deg);background:var(--kun);color:var(--ink)}
.faq details p{padding:0 0 22px;font-size:17px;max-width:36em}
.pil{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pil button{font-size:14px;font-weight:700;padding:9px 17px;border-radius:99px;background:#fff;color:var(--ink);transition:transform .3s var(--ease)}
.pil button:hover{transform:rotate(-3deg)}
.pil button.on{background:var(--ink);color:#fff}

/* ---------- lencana + kaki ---------- */
.lencana{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);width:clamp(74px,6vw,96px);aspect-ratio:1;z-index:40;border-radius:50%;background:var(--ink);color:var(--kun);display:grid;place-items:center}
.lencana svg.tx{position:absolute;inset:0;width:100%;height:100%;animation:putar 14s linear infinite}
.lencana text{font-family:DMD;font-weight:700;font-size:12.6px;letter-spacing:.08em;fill:currentColor}
.lencana .bw{width:36%}
@keyframes putar{to{transform:rotate(360deg)}}
.kaki{background:var(--ink);color:#fff;padding:clamp(44px,5vw,70px) var(--gut) 24px}
.kaki-g{display:grid;grid-template-columns:1.8fr repeat(3,auto);gap:clamp(30px,6vw,100px);max-width:var(--lebar);margin-inline:auto}
.kaki .lg{display:flex;align-items:center;gap:10px;color:var(--kun);height:26px}
.kaki .lg .bw{height:22px}.kaki .lg .wm{height:20px}
.kaki .lg svg{height:100%;width:auto}
.kaki .pg-l{color:var(--kun);margin-top:26px}
.kaki .pegang{font-family:DMD;font-weight:600;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.025em;line-height:1.3;max-width:24em;margin-top:8px}
.kaki .alamat{font-size:15px;opacity:.6;margin-top:20px;max-width:24em;line-height:1.5}
.kaki h4{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;opacity:.55}
.kaki li{list-style:none;font-size:16px;line-height:1.7}
.kaki li a:hover{color:var(--kun)}
.kaki-b{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:var(--lebar);margin:clamp(36px,4vw,56px) auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:14px;opacity:.55}

/* ---------- transisi tali ---------- */
.tr{position:fixed;inset:0;z-index:999;pointer-events:none;color:var(--kun)}
.tr svg{width:100%;height:100%}
.tr path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:0;stroke-dasharray:1 1;stroke-dashoffset:1}
html.tr-masuk .tr{background:currentColor}
html.tr-masuk .tr path{stroke-width:520;stroke-dashoffset:0}

/* ---------- lobi ---------- */
.pintu3{display:flex;justify-content:center;align-items:stretch;margin-top:clamp(64px,7vw,104px)}
.pintu{width:min(26vw,330px);padding:clamp(18px,1.8vw,26px);border-radius:calc(var(--r) * 1.3);background:var(--c);color:var(--ct,#232226);transform:rotate(var(--rt));margin:0 -6px;display:flex;flex-direction:column;gap:14px;min-height:clamp(280px,25vw,350px);text-align:left;transition:transform .5s var(--ease);position:relative}
.pintu:hover{transform:rotate(0) translateY(-14px) scale(1.03);z-index:5}
.pintu .lgk{display:flex;align-items:center;gap:9px;height:26px;margin-top:6px}
.pintu .lgk .bw{height:22px}.pintu .lgk .wm{height:20px}
.pintu .lgk svg{height:100%;width:auto}
.pintu .lgk b{font-family:DMD;font-weight:700;font-size:21px;letter-spacing:-.03em}
.pintu .lgm{height:22px;width:auto;margin-top:8px;align-self:flex-start;filter:brightness(0) invert(1)}
.pintu .d{font-size:clamp(22px,2.2vw,32px);line-height:1.06;margin-top:auto}
.pintu .bawah{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.pintu .hidup{font-size:15px;line-height:1.35;max-width:13em}
.pintu .bulat{flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.pintu .bulat svg{width:15px;height:15px}
.duduk{position:absolute;top:0;width:29%;z-index:6;transform:translateY(-63%) rotate(var(--sr,0deg));transition:transform .5s var(--ease);pointer-events:none}
.duduk img{width:100%}
.pintu:hover .duduk{transform:translateY(-70%) rotate(calc(var(--sr,0deg) * -1))}
.anak{background:var(--c);color:var(--ct);border-radius:calc(var(--r) * 1.4);padding:clamp(22px,3vw,44px);min-height:clamp(230px,23vw,310px);display:grid;grid-template-columns:1fr clamp(110px,19%,170px);gap:clamp(16px,3vw,40px);align-items:center;text-align:left}
.anak .no{display:block;font-family:DMD;font-weight:300;font-style:italic;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.04em;line-height:1;margin-bottom:clamp(16px,2vw,30px)}
.anak .d{font-size:clamp(24px,2.5vw,38px);line-height:1.32;text-wrap:balance;max-width:16em}
.anak .d mark{-webkit-box-decoration-break:clone;box-decoration-break:clone;transform:none;display:inline;padding:.02em .2em .06em}
.anak mark{background:#fff;color:var(--ink)}
.anak .fg{width:100%;transform:rotate(var(--sr,0deg));transition:transform .5s var(--ease)}
.anak:hover .fg{transform:rotate(calc(var(--sr,0deg) * -1)) scale(1.06)}
.rantai4{display:flex;justify-content:center;align-items:center;gap:clamp(8px,1.2vw,16px);flex-wrap:wrap;max-width:var(--lebar);margin:clamp(26px,3vw,44px) auto 0}
.rantai4 span{font-family:DMD;font-weight:700;font-size:clamp(16px,1.5vw,22px);letter-spacing:-.03em;padding:.5em 1em;border-radius:99px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.rantai4 span.ujung{background:var(--kun);color:var(--ink);box-shadow:none;transform:rotate(-2deg)}
.rantai4 svg{width:20px;height:20px;flex:none}
.tokoh4{display:grid;grid-template-columns:repeat(5,1fr);row-gap:clamp(34px,4vw,60px);gap:clamp(12px,2vw,30px);max-width:var(--lebar);margin:clamp(40px,5vw,70px) auto 0;align-items:end}
.tokoh{display:flex;flex-direction:column;align-items:center;text-align:center}
.tokoh .balon{position:relative;background:var(--ink);color:#fff;font-family:DMD;font-weight:600;font-size:clamp(14px,1.2vw,17px);letter-spacing:-.025em;line-height:1.18;padding:.7em 1em;border-radius:1.1em;transform:rotate(var(--sr,0deg));margin-bottom:18px;max-width:13em}
.tokoh .balon:after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;background:var(--ink);transform:translateX(-50%) rotate(45deg);border-radius:3px}
.tokoh img{height:clamp(120px,11.5vw,160px);width:auto;transition:transform .5s var(--ease)}
.tokoh:hover img{transform:translateY(-8px) rotate(-3deg)}
.tokoh b{font-family:DMD;font-weight:700;font-size:clamp(19px,1.8vw,25px);letter-spacing:-.04em;margin-top:14px}
.tokoh span{font-size:15px;line-height:1.45;margin-top:4px;max-width:15em}
.kutip mark{background:var(--kun);color:var(--ink);padding:0 .16em .04em;border-radius:.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.urut3{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(12px,1.8vw,26px);align-items:start;max-width:var(--lebar);margin:clamp(34px,4vw,60px) auto 0;text-align:left}
.urut3>div:not(.pn){border-top:2.5px solid var(--kun);padding-top:14px}
.urut3 .no{display:block;font-family:DMD;font-weight:300;font-style:italic;font-size:22px;letter-spacing:-.04em;color:var(--kun)}
.urut3 b{display:block;font-family:DMD;font-weight:700;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.04em;line-height:1.05;margin-top:4px}
.urut3 p{font-size:16px;line-height:1.5;margin-top:10px;color:rgba(255,255,255,.82)}
.urut3 .pn{padding-top:54px;color:var(--kun)}
.urut3 .pn svg{width:22px;height:22px}
.kp.unit{width:min(29vw,370px);min-height:clamp(330px,29vw,420px);gap:6px}
.kp.unit .d{font-size:clamp(26px,2.7vw,40px);margin-bottom:10px}
.kp.unit small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-top:10px}
.kp.unit p{font-size:15.5px;line-height:1.42}
.lawan{max-width:860px;margin:clamp(44px,5.4vw,84px) auto 0;background:var(--ink);color:#fff;border-radius:calc(var(--r) * 1.5);padding:clamp(24px,3.4vw,50px);text-align:left;rotate:-1deg}
.lawan{position:relative}
.lawan .dob{position:absolute;right:-4%;top:-22%;width:clamp(110px,16vw,190px);transform:rotate(8deg)}
.lawan .kecil{color:var(--kun)}
.lawan h3{color:var(--kun);font-size:clamp(34px,4.6vw,70px);margin:6px 0 16px}
.lawan p:not(.kecil){font-size:clamp(16px,1.25vw,19px);line-height:1.55;margin-top:12px;color:rgba(255,255,255,.86)}
.lawan b{color:var(--kun)}
.riak{position:relative;max-width:520px;width:100%;margin-inline:auto}
.riak-svg{width:100%;height:auto;overflow:visible}
.riak-svg circle{transform-origin:260px 260px;scale:0;transition:scale 1s var(--ease)}
.riak-svg text{opacity:0;transition:opacity .6s .9s}
.in .riak-svg circle{scale:1}.in .riak-svg text{opacity:1}
.in .riak-svg .r1{transition-delay:.1s}.in .riak-svg .r2{transition-delay:.35s}.in .riak-svg .r3{transition-delay:.6s}
.riak .orang{position:absolute;left:50%;top:53%;width:20%;transform:translate(-50%,-50%)}
.lapis-daftar{margin-top:clamp(20px,2.4vw,34px);display:grid;gap:0}
.lapis-daftar>div{display:grid;grid-template-columns:auto 1fr;gap:14px;border-top:2px solid rgba(255,255,255,.4);padding:12px 0}
.lapis-daftar .no{font-family:DMD;font-weight:300;font-style:italic;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.04em;line-height:1.15}
.lapis-daftar b{display:block;font-family:DMD;font-weight:700;font-size:clamp(18px,1.6vw,23px);letter-spacing:-.035em;line-height:1.1}
.lapis-daftar i{display:block;font-style:normal;font-weight:700;font-size:14px;color:var(--lime);margin-top:3px}
.lapis-daftar p{font-size:15px;margin-top:4px;opacity:.9}
.rantai{list-style:none;max-width:860px;margin:clamp(30px,3.6vw,50px) auto 0;border-top:2.5px solid var(--ink)}
.rantai li{display:grid;grid-template-columns:70px 1fr;align-items:baseline;gap:10px;padding:18px 0;border-bottom:2px solid rgba(35,34,38,.16);text-align:left}
.rantai span{font-family:DMD;font-weight:300;font-style:italic;font-size:clamp(22px,2vw,30px);letter-spacing:-.04em}
.rantai p{font-family:DMD;font-weight:600;font-size:clamp(20px,2vw,30px);letter-spacing:-.035em;line-height:1.14}
.misi{max-width:var(--lebar);margin:clamp(40px,5vw,72px) auto 0;text-align:center}
.misi3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,40px);margin-top:20px;text-align:left}
.misi3>div,.empat-nilai>div{border-top:2.5px solid currentColor;padding-top:14px}
.misi3 b,.empat-nilai b{display:block;font-family:DMD;font-weight:700;font-size:clamp(22px,2vw,28px);letter-spacing:-.04em}
.misi3 i{display:block;font-size:15px;opacity:.7;margin-top:2px}
.misi3 p,.empat-nilai p{font-size:16px;line-height:1.5;margin-top:10px}
.empat-nilai{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,32px);max-width:var(--lebar);margin:clamp(30px,3.6vw,54px) auto 0;text-align:left}
.empat-nilai span{display:block;font-family:DMD;font-weight:300;font-style:italic;font-size:20px;letter-spacing:-.03em;margin-bottom:4px}
.yakin{display:grid;grid-template-columns:minmax(160px,300px) 1fr;gap:clamp(24px,5vw,80px);align-items:center;max-width:var(--lebar);margin:0 auto}
.yakin .simpul{color:var(--kun)}
.yakin .simpul svg{width:100%;height:auto}
.kutip{font-family:DMD;font-weight:600;font-size:clamp(24px,2.9vw,44px);line-height:1.2;letter-spacing:-.035em;margin-top:12px}
.tiga-kol{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,56px);max-width:var(--lebar);margin:clamp(34px,4.4vw,64px) auto 0;border-top:1.5px solid rgba(255,255,255,.3);padding-top:26px}
.tiga-kol .kecil{color:var(--kun);margin-bottom:12px}
.tiga-kol p:not(.kecil){font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:rgba(255,255,255,.82)}
.tiga-kol b{color:#fff;font-weight:700}
.visi{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;max-width:var(--lebar);margin:0 auto;text-align:left}
.sorot{background:var(--lime);color:var(--ink);padding:.05em .3em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- kelas: sampul ---------- */
.sampul{aspect-ratio:4/5;border-radius:var(--r);background:var(--c);color:var(--ct,#232226);padding:clamp(13px,1.2vw,18px);display:flex;flex-direction:column;justify-content:space-between;text-align:left}
.sampul .j{align-self:flex-start}
.sampul .d{font-size:clamp(19px,1.75vw,26px);line-height:1.04}
.prod{display:block;text-align:left;transition:transform .45s var(--ease)}
.prod:hover{transform:translateY(-8px) rotate(-1.2deg)}
.prod .info{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-top:10px}
.prod .info b{font-family:DMD;font-weight:700;font-size:clamp(17px,1.4vw,21px);letter-spacing:-.035em}
.prod .info span{font-size:14px;opacity:.7;text-align:right}
.prod .sub{font-size:14px;opacity:.75;margin-top:3px}
.paket{background:#fff;color:var(--ink);padding:clamp(18px,1.9vw,26px);border-radius:calc(var(--r) * 1.3);display:flex;flex-direction:column;gap:10px;text-align:left;transform:rotate(var(--rt,0));transition:transform .45s var(--ease)}
.paket:hover{transform:rotate(0) translateY(-8px)}
.paket .harga{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:12px}
.paket .harga b{font-family:DMD;font-weight:700;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.045em}
.paket .harga s{font-size:16px;opacity:.55}
.paket li{list-style:none;font-size:15px;border-top:1.5px solid rgba(35,34,38,.14);padding:7px 0}
.paket .btn{align-self:flex-start;--bt:var(--ink);--btt:#fff}

/* ---------- daftar layanan ---------- */
.lay{max-width:var(--lebar);margin:0 auto;border-top:2.5px solid var(--ink)}
.lay article{display:grid;grid-template-columns:60px 1fr 2fr;gap:clamp(14px,2.4vw,44px);padding:clamp(22px,2.6vw,40px) 0;border-bottom:2px solid rgba(35,34,38,.14);align-items:start}
.lay .no{font-family:DMD;font-weight:300;font-style:italic;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.04em;line-height:1}
.lay .empat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lay .empat small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.6;display:block}
.lay .empat b{font-family:DMD;font-weight:600;font-size:clamp(16px,1.2vw,18px);letter-spacing:-.02em;line-height:1.2;display:block;margin-top:6px}
.lay .bukti{grid-column:2/-1;display:inline-flex;gap:10px;align-items:center;font-size:14px;font-weight:700;margin-top:4px}
.lay .bukti span{background:var(--kun);padding:5px 12px;border-radius:99px}

/* ---------- halaman proyek ---------- */
.proyek-kepala{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.proyek-kepala .lg{background:#fff;border-radius:99px;padding:10px 22px;height:54px;display:flex;align-items:center}
.proyek-kepala .lg img{max-height:32px;width:auto}
.sampul-proyek{max-width:var(--lebar);margin:clamp(30px,4vw,56px) auto 0;border-radius:calc(var(--r) * 1.4);overflow:hidden}
.sampul-proyek img{width:100%;aspect-ratio:16/9;object-fit:cover}
.dua-kol{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(24px,5vw,80px);max-width:var(--lebar);margin:0 auto;text-align:left;align-items:start}
.dua-kol .p{max-width:none}
.urut{list-style:none;counter-reset:u;display:grid;gap:0;border-top:2.5px solid currentColor}
.urut li{counter-increment:u;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-bottom:2px solid rgba(35,34,38,.14);font-size:clamp(16px,1.25vw,19px);line-height:1.45}
.urut li:before{content:counter(u,decimal-leading-zero);font-family:DMD;font-weight:300;font-style:italic;font-size:1.25em;letter-spacing:-.04em;line-height:1.2}
.galeri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px);max-width:var(--lebar);margin:0 auto}
.galeri img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)}
.galeri img.tinggi{grid-row:span 2;aspect-ratio:auto;height:100%}
.hasil{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px);max-width:var(--lebar);margin:clamp(30px,3.6vw,50px) auto 0;text-align:left}
.hasil>div{border-top:2.5px solid currentColor;padding-top:14px}
.hasil b{display:block;font-family:DMD;font-weight:700;font-size:clamp(40px,5vw,76px);letter-spacing:-.055em;line-height:1}
.hasil span{display:block;font-size:16px;margin-top:8px}
.meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.kosong{display:none!important}

@media (max-width:860px){
  .menu{display:none}
  .kipas,.pintu3{flex-direction:column;align-items:center;gap:18px}
  .kp,.pintu{width:min(86vw,400px);margin:0}
  .tim{grid-template-columns:repeat(2,1fr);gap:14px}
  .org{grid-column:auto!important;margin-top:0!important}
  .langkah{grid-template-columns:1fr 1fr}
  .grid3,.grid4,.galeri,.hasil{grid-template-columns:1fr 1fr}
  .kaki-g,.dua-kol,.visi,.yakin,.misi3{grid-template-columns:1fr}
  .empat-nilai,.tiga-kol,.tokoh4{grid-template-columns:1fr 1fr}
  .urut3{grid-template-columns:1fr}.urut3 .pn{display:none}
  .kp.unit{width:min(86vw,400px)}
  .anak{grid-template-columns:1fr}.anak .fg{display:none}
  .yakin .simpul{max-width:160px}
  .lay article{grid-template-columns:1fr}.lay .empat{grid-template-columns:1fr 1fr}.lay .bukti{grid-column:auto}
  .foto2{flex-direction:column}.foto2 .pol{width:86%}.foto2 .a{margin-right:0}
}
@media (max-width:520px){.grid3,.grid4,.hasil,.galeri{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .ln>span,.naik{transform:none!important;opacity:1!important;transition:none}
  .mq-t,.lencana svg.tx{animation:none}
  .pb>svg{clip-path:none}.pb .stk{scale:1}
}

/* ---------- MOTE Kreatif putaran 8 ---------- */
.klien6{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);max-width:var(--lebar);margin:clamp(34px,4vw,56px) auto 0}
.klien{position:relative;display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:calc(var(--r) * 1.2);padding:clamp(18px,1.8vw,26px);min-height:clamp(220px,19vw,280px);overflow:hidden;transition:transform .45s var(--ease)}
.klien:before{content:"";position:absolute;inset:0;background:var(--c);transform:translateY(101%);transition:transform .5s var(--ease)}
.klien>*{position:relative}
.klien .lg{flex:1;display:grid;place-items:center;padding:6px 10% 16px}
.klien .lg img{height:clamp(64px,6vw,96px);max-height:none;max-width:78%;object-fit:contain;width:auto;transition:transform .5s var(--ease)}
.klien .ket{display:flex;flex-direction:column;gap:4px;padding-right:52px}
.klien .ket b{font-family:DMD;font-weight:700;font-size:clamp(17px,1.4vw,21px);letter-spacing:-.03em;line-height:1.15}
.klien .ket i{font-style:normal;font-size:13px;opacity:.6}
.klien .bulat{position:absolute;right:16px;bottom:16px;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .45s var(--ease)}
.klien .bulat svg{width:14px;height:14px}
.klien:hover{transform:translateY(-8px) rotate(-1deg)}
.klien:hover:before{transform:none}
.klien:hover .lg img{transform:scale(1.08)}
.klien:hover .bulat{transform:rotate(-40deg)}
.ly6{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);max-width:var(--lebar);margin:clamp(36px,4vw,60px) auto 0}
.ly{position:relative;background:var(--c);color:var(--ct);border-radius:calc(var(--r) * 1.3);padding:clamp(20px,2vw,30px);padding-right:clamp(96px,8vw,120px);min-height:clamp(220px,18vw,260px);rotate:var(--rt);transition:rotate .5s var(--ease),translate .5s var(--ease)}
.ly:hover{rotate:0deg;translate:0 -8px}
.ly .no{font-family:DMD;font-weight:300;font-style:italic;font-size:24px;letter-spacing:-.04em}
.ly h3{font-size:clamp(22px,1.9vw,28px);line-height:1.08;margin:6px 0 14px}
.ly p{font-size:15.5px;line-height:1.45}
.ly .ma{font-weight:700;margin-bottom:6px}
.ly-st{position:absolute;right:-14px;top:-22px;width:clamp(86px,7.4vw,112px);transform:rotate(8deg);transition:transform .5s var(--ease)}
.ly:hover .ly-st{transform:rotate(-6deg) scale(1.1)}
.ly-plus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);max-width:var(--lebar);margin:clamp(20px,2.4vw,34px) auto 0}
.ly-plus>div{border:2.5px dashed rgba(35,34,38,.35);border-radius:calc(var(--r) * 1.2);padding:18px 22px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.ly-plus b{font-family:DMD;font-weight:700;font-size:22px;letter-spacing:-.03em}
.ly-plus span{font-size:15.5px;opacity:.8}
.mf6{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,46px) clamp(18px,2.6vw,44px);max-width:var(--lebar);margin:0 auto}
.mf{text-align:left;border-top:2.5px solid rgba(255,255,255,.5);padding-top:18px;position:relative;padding-right:84px}
.mf img{position:absolute;right:0;top:-34px;width:78px;transform:rotate(6deg)}
.mf:nth-child(even) img{transform:rotate(-6deg)}
.mf b{display:block;font-family:DMD;font-weight:700;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.035em;line-height:1.12}
.mf p{font-size:16px;line-height:1.5;margin-top:8px;color:rgba(255,255,255,.88)}
.tim11{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(22px,2.6vw,40px) clamp(14px,1.8vw,28px);max-width:var(--lebar);margin:clamp(50px,5vw,80px) auto 0;perspective:1200px}
.idc{width:calc(25% - clamp(14px,1.8vw,28px));rotate:var(--rt);transition:rotate .5s var(--ease);outline:none}
.idc:nth-child(4n+2),.idc:nth-child(4n+4){margin-top:clamp(18px,2.4vw,40px)}
.idc-in{position:relative;background:var(--c);color:var(--ct);border-radius:calc(var(--r) * 1.1);padding:10px 10px 16px;transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateZ(0);transition:transform .25s ease-out,box-shadow .35s;transform-style:preserve-3d}
.idc-tali{position:absolute;left:50%;top:-34px;width:34px;height:44px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:var(--ink);z-index:2}
.idc-tali:after{content:"";position:absolute;left:50%;bottom:8px;width:16px;height:5px;border-radius:9px;background:var(--putih);transform:translateX(-50%)}
.idc-h{display:flex;align-items:center;gap:7px;padding:10px 6px 10px;font-size:10.5px;font-weight:700;letter-spacing:.14em}
.idc-h .bw{height:13px;display:flex}.idc-h .bw svg{height:100%;width:auto}
.idc-h em{margin-left:auto;font-style:normal;opacity:.7}
.idc-f{position:relative;aspect-ratio:4/4.3;border-radius:calc(var(--r) * .8);background:rgba(255,255,255,.28);overflow:hidden}
.idc-f .ft{position:absolute;left:50%;bottom:0;height:92%;width:auto;max-width:none;transform:translateX(-50%);transform-origin:50% 100%;transition:transform .5s var(--ease)}
.idc-f .st{position:absolute;right:6%;bottom:6%;width:34%;transform:rotate(10deg) scale(0);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.idc-k{padding:12px 6px 0}
.idc-k b{display:block;font-family:DMD;font-weight:700;font-size:clamp(17px,1.35vw,20px);letter-spacing:-.03em;line-height:1.12}
.idc-k span{display:block;font-size:14px;font-weight:700;margin-top:4px}
.idc-k i{display:block;font-style:normal;font-size:12.5px;opacity:.7;margin-top:2px}
.idc:hover,.idc:focus-visible{rotate:0deg;z-index:3}
.idc:hover .idc-in,.idc:focus-visible .idc-in{box-shadow:0 30px 50px -24px rgba(35,34,38,.45)}
.idc:hover .ft,.idc:focus-visible .ft{transform:translateX(-50%) scale(1.07)}
.idc:hover .st,.idc:focus-visible .st{transform:rotate(-8deg) scale(1)}
@keyframes ayun{0%{rotate:var(--rt)}30%{rotate:calc(var(--rt) * -1.4)}60%{rotate:calc(var(--rt) * .6)}100%{rotate:0deg}}
.idc:hover{animation:ayun .7s var(--ease)}
@media (max-width:860px){.klien6,.ly6,.mf6{grid-template-columns:1fr}.idc{width:calc(50% - 8px)}.idc:nth-child(n){margin-top:0}.ly-plus{grid-template-columns:1fr}}

/* hero berjudul panjang: skala turun, baris lega, blok sorot tidak menabrak huruf di atasnya */
.d1.panjang{font-size:clamp(36px,4.6vw,74px);line-height:1.08;max-width:15em}
.d1.panjang .ln:last-child{margin-top:.12em}
.d1.panjang mark{padding:.02em .2em .1em;transform:rotate(-1.5deg)}
.sub-hero{font-size:clamp(17px,1.35vw,21px);max-width:30em;margin-top:6px;text-wrap:balance}

/* ---- revisi 12 Okt: lobi */
.kutip.misi-k{line-height:1.46}
.kutip.misi-k mark{padding:.02em .2em .08em}
.asal{text-align:center;max-width:46em;margin:clamp(34px,4.4vw,64px) auto 0;font-size:clamp(17px,1.3vw,20px);line-height:1.6}
.asal b{background:var(--lime);color:var(--ink);padding:0 .22em;border-radius:.2em}
.lapis-daftar>div{cursor:default;outline:none;transition:opacity .35s}
.riak-svg circle{cursor:pointer;transition:scale 1s var(--ease),opacity .35s}
.in .riak-svg .r1{transition-delay:.1s,0s}.in .riak-svg .r2{transition-delay:.35s,0s}.in .riak-svg .r3{transition-delay:.6s,0s}
.riak-svg text,.riak .orang{pointer-events:none}
.riak .orang{transition:opacity .35s}
.visi[data-nyala] .riak-svg text{transition:opacity .3s}
.visi[data-nyala] .riak-svg circle{transition:scale .45s var(--ease),opacity .35s;transition-delay:0s}
.visi[data-nyala] .lapis-daftar>div{opacity:.4}
.visi[data-nyala="1"] .lapis-daftar>[data-ring="1"],.visi[data-nyala="2"] .lapis-daftar>[data-ring="2"],.visi[data-nyala="3"] .lapis-daftar>[data-ring="3"]{opacity:1}
.visi[data-nyala="1"] .r2,.visi[data-nyala="1"] .r3,.visi[data-nyala="2"] .r1,.visi[data-nyala="2"] .r3,.visi[data-nyala="3"] .r1,.visi[data-nyala="3"] .r2{opacity:.22}
.visi[data-nyala="1"] .tx2,.visi[data-nyala="1"] .tx3,.visi[data-nyala="2"] .tx1,.visi[data-nyala="2"] .tx3,.visi[data-nyala="3"] .tx1,.visi[data-nyala="3"] .tx2{opacity:.25}
.visi[data-nyala="2"] .orang,.visi[data-nyala="3"] .orang{opacity:.25}
.visi[data-nyala="1"] .riak-svg .r1{scale:1.07}.visi[data-nyala="2"] .riak-svg .r2{scale:1.035}.visi[data-nyala="3"] .riak-svg .r3{scale:1.02}
/* ---- revisi 12 Okt: MOTE Kreatif */
.cp{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;max-width:940px;margin:clamp(40px,4.6vw,70px) auto 0}
.cp-k{position:relative;background:var(--c);color:var(--ct);border-radius:calc(var(--r) * 1.3);padding:clamp(22px,2.6vw,38px);text-align:left;rotate:var(--rt)}
.cp-k small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.cp-k h3{font-size:clamp(32px,3.6vw,54px);margin:8px 0 14px}
.cp-k p{font-size:clamp(17px,1.3vw,20px);line-height:1.45;max-width:17em}
.cp-k ul,.sisi ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.cp-st{position:absolute;right:-12px;top:-30px;width:clamp(82px,7.4vw,112px);transform:rotate(8deg)}
.cp-m{align-self:center;z-index:2;margin:0 -16px;background:var(--ink);color:#fff;border-radius:99px;padding:.42em .9em .5em;font-family:DMD;font-style:italic;font-weight:300;font-size:clamp(22px,2.3vw,34px);letter-spacing:-.04em;rotate:-7deg}
.ly2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,34px);max-width:var(--lebar);margin:clamp(44px,4.6vw,70px) auto 0}
.sisi{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--c);color:var(--ct);border-radius:calc(var(--r) * 1.4);padding:clamp(24px,2.8vw,42px);text-align:left;rotate:var(--rt);transition:opacity .8s var(--ease),transform .8s var(--ease),rotate .5s var(--ease),translate .5s var(--ease)}
.sisi:hover{rotate:0deg;translate:0 -8px}
.sisi .no{font-family:DMD;font-weight:300;font-style:italic;font-size:26px;letter-spacing:-.04em}
.sisi h3{font-size:clamp(30px,3.3vw,50px);line-height:1.02;max-width:8em}
.sisi .untuk{font-weight:700;font-size:clamp(17px,1.3vw,20px);margin-top:6px}
.sisi p{font-size:clamp(16px,1.2vw,18px);line-height:1.5;max-width:28em}
.sisi ul{margin:8px 0 22px}
.sisi .ly-st{width:clamp(96px,8.6vw,132px)}
.sisi:hover .ly-st{transform:rotate(-6deg) scale(1.1)}
.sisi .buka{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;font-family:DMD;font-weight:700;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.03em;padding-top:16px;border-top:2.5px solid currentColor}
.sisi .bulat{flex:none;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .45s var(--ease)}
.sisi .bulat svg{width:15px;height:15px}
.sisi:hover .bulat{transform:translateX(6px)}
.ly6.ly4{grid-template-columns:1fr 1fr;max-width:940px}
.urut li b{font-weight:700}
.faq details p a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.logogram{width:clamp(84px,8vw,128px);margin-bottom:6px}
.logogram svg{width:100%;height:auto;display:block}
.idc{position:relative}
.idc-pop{position:absolute;left:50%;top:43%;width:min(240px,104%);translate:-50% 0;background:#fff;color:var(--ink);border-radius:18px;padding:13px 16px 15px;text-align:left;z-index:6;box-shadow:0 20px 36px -16px rgba(35,34,38,.55);opacity:0;scale:.5;rotate:-3deg;transform-origin:50% 0;pointer-events:none;transition:opacity .2s,scale .45s cubic-bezier(.3,1.6,.5,1)}
.idc-pop:after{content:"";position:absolute;left:50%;top:-8px;width:18px;height:18px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:3px}
.idc-pop small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ungu)}
.idc-pop p{font-size:15px;line-height:1.38;font-weight:500;margin-top:4px}
.idc:hover .idc-pop,.idc:focus-visible .idc-pop{opacity:1;scale:1}
@media (max-width:860px){
  .cp{grid-template-columns:1fr;gap:0}.cp-m{justify-self:center;margin:-14px 0}
  .ly2,.ly6.ly4{grid-template-columns:1fr}
}
.kepala .p{text-wrap:balance}

/* ---------- studi kasus Balong (12 Okt) ---------- */
/* kartu karya: Balong satu-satunya yang terbuka, sisanya terkunci */
.klien.kunci{opacity:.5;cursor:default}
.klien.kunci:before{display:none}
.klien.kunci .segera{position:absolute;right:16px;bottom:18px;font-size:12px;font-weight:600;border:1.5px solid currentColor;border-radius:99px;padding:5px 11px;opacity:.75}
.klien.kunci .ket{padding-right:110px}
.klien.utama{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(18px,3vw,44px);min-height:0;align-items:stretch}
.klien.utama .sisi-kiri{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:6px 0}
.klien.utama .lg{flex:none;padding:0;place-items:start}
.klien.utama .lg img{height:clamp(54px,5vw,76px);max-width:none}
.klien.utama .baru{font-size:12px;font-weight:700;letter-spacing:.02em;background:var(--kun);color:var(--ink);border-radius:99px;padding:5px 12px}
.klien.utama .ket{padding-right:0;margin-top:auto}
.klien.utama .ket b{font-size:clamp(26px,2.8vw,42px);line-height:1.02;letter-spacing:-.045em}
.klien.utama .angka{display:flex;gap:clamp(16px,2vw,30px);border-top:2px solid rgba(35,34,38,.14);padding-top:14px;width:100%;padding-right:56px}
.klien.utama .angka span{display:flex;flex-direction:column;font-size:13px;line-height:1.3;opacity:.75}
.klien.utama .angka em{font-style:normal;font-family:DMD;font-weight:700;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.05em;opacity:1;line-height:1.05}
.klien.utama .kb-foto{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:10px}
.klien.utama .kb-foto img{width:100%;height:100%;min-height:clamp(220px,22vw,330px);object-fit:cover;border-radius:var(--r);transition:transform .6s var(--ease)}
.klien.utama .kb-foto img:nth-child(2){transform:translateY(14px)}
.klien.utama:hover .kb-foto img{transform:translateY(-6px)}
.klien.utama:hover .kb-foto img:nth-child(2){transform:translateY(4px)}
.klien.utama:hover{transform:translateY(-6px)}
.klien.utama:hover .ket,.klien.utama:hover .angka{color:#fff}
.klien.utama:hover .angka{border-color:rgba(255,255,255,.3)}
.kar.kunci{opacity:.5;cursor:default}.kar.kunci:hover{transform:none}

/* hero */
.kb-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center;text-align:left;padding-left:var(--gut);padding-right:var(--gut);max-width:calc(var(--lebar) + 2 * var(--gut));margin:0 auto}
.kb-hero.hero{max-width:none;padding-left:max(var(--gut),calc((100vw - var(--lebar)) / 2));padding-right:max(var(--gut),calc((100vw - var(--lebar)) / 2))}
.kb-teks{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.kb-teks .lg{background:#fff;border-radius:99px;padding:10px 22px;height:58px;display:flex;align-items:center}
.kb-teks .lg img{max-height:36px;width:auto}
.kb-teks .d1{text-align:left}
.kb-teks .meta{display:flex;flex-wrap:wrap;gap:8px}

/* bingkai ponsel */
.hp{width:min(100%,330px);margin:0 auto}
.hp-l{position:relative;aspect-ratio:9/16;border-radius:34px;overflow:hidden;background:#000;border:7px solid var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.hp video{width:100%;height:100%;object-fit:cover;display:block}
.hp-b{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--kun);color:var(--ink);font-weight:700;font-size:14px;border-radius:99px;padding:10px 18px;white-space:nowrap;transition:transform .3s var(--ease)}
.hp-b:hover{transform:translateX(-50%) scale(1.05)}
.hp-b .off,.hp.bunyi .hp-b .on{display:none}.hp.bunyi .hp-b .off{display:inline}
.hp.bunyi .hp-b{background:#fff}
.hp figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px;text-align:center}
.hp figcaption b{font-family:DMD;font-weight:700;font-size:20px;letter-spacing:-.03em}
.hp figcaption span{font-size:13px;opacity:.7}

/* angka */
.hasil.empat{grid-template-columns:repeat(4,1fr);margin-top:0}
.sumber{max-width:var(--lebar);margin:22px auto 0;font-size:13px;opacity:.6;text-align:left}

/* tiga keputusan */
.kb-langkah{max-width:var(--lebar);margin:clamp(34px,4vw,60px) auto 0;display:grid;gap:clamp(30px,4vw,60px);text-align:left}
.kb-l{display:grid;grid-template-columns:minmax(200px,.6fr) 1.4fr;gap:clamp(20px,4vw,60px);align-items:center;border-top:2.5px solid var(--ink);padding-top:clamp(20px,2.4vw,34px)}
.kb-l:nth-child(even){grid-template-columns:1.4fr minmax(200px,.6fr)}
.kb-l:nth-child(even) img{order:2}
.kb-l img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.kb-l .no{display:block;font-family:DMD;font-weight:300;font-style:italic;font-size:26px;letter-spacing:-.04em}
.kb-l h3{font-size:clamp(26px,2.6vw,40px);line-height:1.04;letter-spacing:-.045em;margin:6px 0 14px}
.kb-l p{font-size:clamp(16px,1.2vw,19px);line-height:1.55;max-width:36em}
.kb-l p b{background:var(--kun);padding:0 .18em;border-radius:.2em}
.jeda{list-style:none;display:grid;gap:8px;margin-top:16px}
.jeda li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;background:var(--krem);border-radius:14px;padding:12px 16px;font-weight:600;font-size:clamp(15px,1.15vw,18px)}
.jeda i{font-weight:500;opacity:.65}
.jeda small{margin-left:auto;font-size:12px;font-weight:600;border:1.5px solid currentColor;border-radius:99px;padding:2px 9px;opacity:.6}
.porsi{display:flex;margin-top:18px;border-radius:99px;overflow:hidden;font-size:13px;font-weight:700}
.porsi span{flex:0 0 var(--w);padding:10px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.porsi span:nth-child(1){background:var(--kun)}.porsi span:nth-child(2){background:var(--biru);color:#fff}.porsi span:nth-child(3){background:var(--krem)}

/* dua video */
.kb-vid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);max-width:900px;margin:clamp(34px,4vw,60px) auto 0}
.kb-vid>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.kb-vid p{font-size:16px;line-height:1.5;opacity:.82;max-width:24em}
.kb-vid blockquote{font-family:DMD;font-weight:600;font-size:clamp(19px,1.6vw,24px);line-height:1.25;letter-spacing:-.03em;color:var(--kun);max-width:16em}
.kb-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:clamp(40px,5vw,70px) calc(-1 * var(--gut)) 0;padding:0 var(--gut) 8px;scrollbar-width:none}
.kb-strip::-webkit-scrollbar{display:none}
.kb-strip img{flex:none;width:clamp(150px,15vw,210px);height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);scroll-snap-align:start}
.kb-strip img:nth-child(odd){transform:rotate(-1.5deg)}.kb-strip img:nth-child(even){transform:rotate(1.5deg) translateY(10px)}

/* grafik jam makan */
.jam{max-width:900px;margin:clamp(30px,4vw,54px) auto 0;display:grid;gap:22px;text-align:left}
.jam-leg{display:flex;gap:18px;font-size:13px;font-weight:600}
.jam-leg span:before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.jam-leg .q1:before{background:rgba(255,255,255,.4)}.jam-leg .q2:before{background:var(--kun)}
.jam-r{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;border-top:1.5px solid rgba(255,255,255,.3);padding-top:14px}
.jam-n b{display:block;font-family:DMD;font-size:20px;letter-spacing:-.03em}
.jam-n span{font-size:13px;opacity:.75}
.jam-b{display:grid;gap:6px}
.jam-b i{display:block;width:var(--w);min-width:fit-content;height:30px;border-radius:8px;font-style:normal;font-size:13px;font-weight:700;line-height:30px;padding:0 10px;white-space:nowrap}
.jam-b .q1{background:rgba(255,255,255,.25)}.jam-b .q2{background:var(--kun);color:var(--ink)}
.jam-r:nth-child(2) .q2{box-shadow:0 0 0 3px #fff}
.jam-t{text-align:right;font-size:15px}.jam-t b{font-family:DMD;font-size:22px;letter-spacing:-.03em;margin-left:8px}

/* PR */
.kb-pr{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px);max-width:var(--lebar);margin:clamp(30px,3.6vw,50px) auto 0;text-align:left}
.kb-pr>div{border-top:2.5px solid var(--ink);padding-top:14px}
.kb-pr .no{font-family:DMD;font-weight:300;font-style:italic;font-size:22px}
.kb-pr h3{font-size:clamp(21px,1.9vw,28px);line-height:1.08;letter-spacing:-.04em;margin:6px 0 10px}
.kb-pr p{font-size:16px;line-height:1.55}

/* bahan diskusi */
.kb-tanya{list-style:none;counter-reset:t;max-width:860px;margin:clamp(30px,4vw,54px) auto 0;display:grid;gap:12px;text-align:left}
.kb-tanya li{counter-increment:t;display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;background:rgba(255,255,255,.07);border-radius:var(--r);padding:20px 22px;font-size:clamp(17px,1.35vw,21px);line-height:1.45}
.kb-tanya li:before{content:counter(t);width:40px;height:40px;border-radius:50%;background:var(--kun);color:var(--ink);display:grid;place-items:center;font-family:DMD;font-weight:700;font-size:18px}

@media (max-width:860px){
  .klien.utama{grid-template-columns:1fr}
  .klien.utama .kb-foto img{min-height:200px}
  .kb-hero{grid-template-columns:1fr}
  .hasil.empat{grid-template-columns:1fr 1fr}
  .kb-l,.kb-l:nth-child(even){grid-template-columns:1fr}
  .kb-l:nth-child(even) img{order:0}
  .kb-l img{aspect-ratio:4/3}
  .kb-vid,.kb-pr{grid-template-columns:1fr}
  .jam-r{grid-template-columns:1fr;gap:8px}
}
@media (max-width:520px){.klien.kunci .ket{padding-right:0;padding-bottom:34px}.klien.utama .angka{padding-right:50px}}
.kb-lg{height:clamp(70px,7vw,104px);width:auto}
.klien.utama .lg img{height:clamp(40px,3.6vw,56px)}
.kb-lg{filter:brightness(0) invert(1)}
.klien.utama{align-items:center}
.klien.utama .sisi-kiri{align-self:stretch}
.klien.utama .kb-foto{height:clamp(260px,24vw,350px)}
.klien.utama .kb-foto img{min-height:0;height:100%}
@media (max-width:860px){.klien.utama .kb-foto{height:240px}}
.klien.utama .kb-foto{width:100%;min-width:0;justify-self:stretch}.klien.utama .kb-foto img{max-width:none;min-width:0}
.kb-ringkas{max-width:820px;margin-top:14px}
.kb-ringkas p{font-size:clamp(19px,1.6vw,25px);line-height:1.5}
.kb-hero .d2{text-align:left}
.kb-l p+p{margin-top:.8em}
.kb-l h3{font-size:clamp(24px,2.3vw,36px)}
.kb-hasil{margin-top:clamp(40px,5vw,70px)}
.kb-hasil b{font-size:clamp(36px,4vw,60px)}
.kb-hasil span{line-height:1.45}
.w-kun .kb-pr{margin-top:clamp(30px,3.6vw,50px)}

/* ---- layanan Trifecta (13 Okt) */
.mf8{grid-template-columns:repeat(4,1fr)}
.mf8 .mf{padding-right:0;padding-top:58px}.mf8 .mf img{top:-30px;width:70px}
.bonus{max-width:640px;margin:clamp(26px,3vw,40px) auto 0;background:var(--ink);color:#fff;border-radius:calc(var(--r) * 1.2);padding:clamp(20px,2.4vw,32px);text-align:left;rotate:-1deg}
.bonus small{display:inline-block;background:var(--kun);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:99px}
.bonus ol{list-style:none;counter-reset:b;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:16px}
.bonus li{counter-increment:b;font-family:DMD;font-weight:600;font-size:clamp(17px,1.35vw,20px);letter-spacing:-.02em;line-height:1.25;display:flex;gap:10px}
.bonus li::before{content:counter(b);flex:none;width:26px;height:26px;border-radius:50%;background:var(--kun);color:var(--ink);font-size:14px;display:grid;place-items:center;margin-top:-1px}
.bonus .sk{display:block;margin-top:16px;font-size:13px;opacity:.6}
.tri3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);max-width:var(--lebar);margin:clamp(34px,4vw,60px) auto}
.tri-k{position:relative;background:var(--c);color:var(--ct);border-radius:calc(var(--r) * 1.3);padding:clamp(22px,2.4vw,34px);text-align:left;rotate:var(--rt)}
.tri-k small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.tri-k h3{font-size:clamp(28px,2.8vw,42px);margin:8px 0 12px}
.tri-k p{font-size:clamp(16px,1.2vw,18px);line-height:1.45}
.tri-k i{display:inline-block;margin-top:16px;font-style:normal;font-size:13px;font-weight:700;border:1.5px solid currentColor;border-radius:99px;padding:4px 12px}
.tri-k .cp-st{position:absolute;right:-10px;top:-34px;width:84px;rotate:8deg}
.tri-loop{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;max-width:980px;margin:clamp(24px,3vw,40px) auto}
.tri-loop span{background:#fff;color:var(--ink);font-family:DMD;font-weight:600;font-size:clamp(15px,1.15vw,18px);letter-spacing:-.02em;padding:9px 16px;border-radius:99px}
.tri-loop em{width:18px;color:#fff;display:grid}
.lay .peran{font-size:16px;line-height:1.5;margin-top:12px;max-width:26em;opacity:.85}
.lay .peran span{display:inline-block;background:var(--kun);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:99px;margin-right:8px;opacity:1}
@media (max-width:1100px){.mf8{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.mf8,.tri3{grid-template-columns:1fr}.bonus ol{grid-template-columns:1fr}.tri-loop{flex-direction:column}.tri-loop em{rotate:90deg}}
.kepala + .lay{margin-top:clamp(30px,3.4vw,50px)}

/* ---- trifecta ringkas + corporate training baru (13 Okt) */
.tri-why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);max-width:940px;margin:clamp(22px,2.6vw,36px) auto 0}
.tw{border-radius:calc(var(--r) * 1.2);padding:clamp(20px,2.4vw,32px);text-align:left;display:flex;flex-direction:column;gap:18px;background:rgba(255,255,255,.12);color:#fff}
.tw.on{background:#fff;color:var(--ink)}
.tw small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.tw-isi{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1}
.tw-isi span{font-family:DMD;font-weight:600;font-size:clamp(15px,1.15vw,18px);letter-spacing:-.02em;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.16)}
.tw.on .tw-isi span{background:var(--kun)}
.tw-isi.pisah span::after{content:" ✓";opacity:.7}
.tw-isi em{width:16px;margin-left:18px;display:grid;opacity:.55}
.tw b{font-family:DMD;font-weight:700;font-size:clamp(20px,1.7vw,25px);letter-spacing:-.035em;line-height:1.15;border-top:2px solid currentColor;padding-top:14px}
.tri-tutup{max-width:640px;margin:clamp(28px,3vw,44px) auto 0;text-align:center}
.tri-tutup b{background:var(--kun);color:var(--ink);padding:0 .2em;border-radius:.2em}
.bt3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);max-width:var(--lebar);margin:clamp(34px,4vw,60px) auto 0}
.bt{position:relative;background:var(--c);color:var(--ct);border-radius:calc(var(--r) * 1.3);padding:clamp(24px,2.6vw,36px);text-align:left;rotate:var(--rt)}
.bt h3{font-size:clamp(26px,2.4vw,36px);line-height:1.02;max-width:9em}
.bt .ma{font-size:clamp(16px,1.2vw,18px);margin:10px 0 20px;opacity:.85}
.bt-spek>div{border-top:1.5px solid currentColor;padding:10px 0;display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:baseline}
.bt-spek small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.bt-spek b{font-family:DMD;font-weight:600;font-size:16px;letter-spacing:-.02em}
.bt .ly-st{position:absolute;right:-12px;top:-36px;width:86px;rotate:8deg}
.bt-tanda{position:absolute;left:24px;top:-14px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px}
.alur4{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,32px);max-width:var(--lebar);margin:clamp(34px,4vw,60px) auto 0;text-align:left}
.alur4 li{border-top:2.5px solid var(--ink);padding-top:16px}
.alur4 .no{font-family:DMD;font-weight:300;font-style:italic;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.04em}
.alur4 b{display:block;font-family:DMD;font-weight:700;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.035em;margin:10px 0 8px}
.alur4 p{font-size:16px;line-height:1.5}
@media (max-width:1000px){.alur4{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.tri-why,.bt3,.alur4{grid-template-columns:1fr}.bt3{gap:34px}}

/* ---- trifecta dua kolom + diagram, kartu training "kapan" (13 Okt sore) */
.tri-dua{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;max-width:var(--lebar);margin:0 auto;text-align:left}
.tri-teks h2{margin:10px 0 22px}
.tri-teks p:not(.lead){font-size:clamp(17px,1.3vw,20px);line-height:1.6}
.tri-teks p b{background:var(--kun);color:var(--ink);padding:0 .2em;border-radius:.2em}
.tg{width:100%;max-width:540px;display:block;margin:0 auto;overflow:visible}
.tg-n{font-family:DMD;font-weight:600;font-size:30px;letter-spacing:-1.2px}
.tg-k{font-family:DMD;font-weight:600;font-size:13px}
.tg-c{font-family:DMD;font-weight:600;font-size:17px;letter-spacing:-.4px}
.tg-ck{font-family:DMD;font-weight:300;font-style:italic;font-size:14px}
.bt-kapan{margin:14px 0 20px}
.bt-kapan small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.bt-kapan p{font-size:clamp(16px,1.2vw,18px);line-height:1.45;margin-top:6px}
@media (max-width:860px){.tri-dua{grid-template-columns:1fr}}
.bt-harga{display:flex;align-items:center;gap:8px;margin-top:18px;background:var(--ink);color:#fff;border-radius:99px;padding:8px 8px 8px 18px;width:max-content;transition:transform .3s var(--ease)}
.bt-harga span:first-child{font-size:13px;opacity:.75}
.bt-harga b{font-family:DMD;font-weight:600;font-size:18px;letter-spacing:-.02em;margin-right:6px}
.bt-harga .bulat{width:30px;height:30px;border-radius:50%;background:var(--c);color:var(--ink);display:grid;place-items:center}
.bt-harga .bulat svg{width:14px}
.bt-harga:hover{transform:translateX(4px)}
.bt{display:flex;flex-direction:column}.bt-spek{flex:1}

/* ======================= Kelas MOTE: oranye, katalog → materi → keranjang → bayar → ruang belajar (13 Okt) */
.b-kelas .btn{--bt:var(--ink);--btt:#fff}
.b-kelas .w-oranye .btn,.b-kelas .w-oranye{--bt:var(--ink);--btt:#fff}
.hero-lg{display:flex;justify-content:center}
.hero-lg .lgk{display:flex;align-items:center;gap:12px;height:40px;background:#fff;color:var(--ink);padding:10px 20px;border-radius:99px;box-sizing:content-box}
.hero-lg .lgk .bw{height:30px}.hero-lg .lgk .wm{height:26px}.hero-lg .lgk svg{height:100%;width:auto}
.hero-lg .lgk b{font-family:DMD;font-weight:700;font-size:28px;letter-spacing:-.03em}
.sampul{position:relative}
.sampul .bw.sm{position:absolute;right:14px;bottom:14px;width:30px;opacity:.85}.sampul .bw.sm svg{width:100%;height:auto}
.sampul.besar{aspect-ratio:4/5;padding:clamp(20px,2vw,30px)}.sampul.besar .d{font-size:clamp(30px,3vw,46px);max-width:8em}
.prod .punya{display:none}
.prod.dimiliki .punya{display:inline-block;margin-top:8px;background:var(--hijau);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px}
.catatan{text-align:center;margin-top:40px;font-size:14px;opacity:.55}
.apa2{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;max-width:var(--lebar);margin:0 auto;text-align:left}
.apa-teks h2{margin:10px 0 22px}
.apa-teks p:not(.lead){font-size:clamp(17px,1.3vw,20px);line-height:1.6}
.unggul{position:relative;display:grid;grid-template-columns:.9fr 1fr;gap:clamp(16px,2vw,26px);align-items:end;background:#fff;border:2.5px solid var(--ink);border-radius:calc(var(--r) * 1.4);padding:clamp(14px,1.6vw,22px);rotate:1.2deg;transition:rotate .5s var(--ease),transform .5s var(--ease);box-shadow:8px 8px 0 var(--oranye)}
.unggul:hover{rotate:0deg;transform:translateY(-6px)}
.ung-tanda{position:absolute;left:22px;top:-15px;background:var(--oranye);color:var(--ink);font-size:13px;font-weight:700;padding:6px 14px;border-radius:99px;z-index:2}
.unggul .sampul.besar .d{font-size:clamp(24px,2.2vw,34px)}
.ung-info b{display:block;font-family:DMD;font-weight:700;font-size:clamp(20px,1.7vw,25px);letter-spacing:-.035em;line-height:1.12}
.ung-info p{font-size:15px;line-height:1.5;margin:10px 0 14px;opacity:.8}
.ung-baris{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;opacity:.65;margin-bottom:16px}
.ung-harga{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1.5px solid rgba(35,34,38,.15);padding-top:14px}
.ung-harga>b{font-family:DMD;font-weight:700;font-size:clamp(22px,2vw,28px);letter-spacing:-.04em}
.sq-s{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.sq-s .bulat{width:30px;height:30px;border-radius:50%;background:var(--oranye);display:grid;place-items:center}.sq-s svg{width:13px}
/* materi */
.balik{display:inline-block;font-size:14px;font-weight:700;margin-bottom:24px;opacity:.7}
.belanja,.materi,.ruang{max-width:var(--lebar);margin:0 auto;padding-top:clamp(110px,12vw,150px)}
.mt2{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(26px,4vw,64px);align-items:start;text-align:left}
.mt-kanan h1{margin:12px 0 14px}
.mt-desk{font-size:clamp(17px,1.25vw,19px);line-height:1.55;opacity:.85}
.mt-oleh{display:flex;align-items:center;gap:12px;margin:20px 0}
.mt-oleh img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:top;background:var(--krem)}
.mt-oleh b{display:block;font-size:15px}.mt-oleh i{font-style:normal;font-size:13px;opacity:.65}
.mt-harga{display:flex;align-items:baseline;gap:12px;border-top:2px solid var(--ink);padding-top:16px}
.mt-harga b{font-family:DMD;font-weight:700;font-size:clamp(32px,3vw,44px);letter-spacing:-.045em}
.mt-harga span{font-size:14px;opacity:.65}
.mt-aksi{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:16px}
button.btn{border:0;cursor:pointer;font-family:inherit}
.sq-b{background:none;border:0;font:inherit;font-weight:700;font-size:15px;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.mt-janji{list-style:none;margin-top:22px;display:grid;gap:6px;font-size:14px}
.mt-janji li::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--oranye);color:var(--ink);font-size:11px;font-weight:700;margin-right:10px}
.daftar-isi{list-style:none;display:grid;gap:0;text-align:left}
.daftar-isi li{display:grid;grid-template-columns:40px 1fr auto auto;gap:14px;align-items:center;padding:14px 0;border-top:1.5px solid rgba(35,34,38,.15);font-size:16px}
.daftar-isi li b{font-family:DMD;font-weight:300;font-style:italic;font-size:20px}
.daftar-isi li .ji{font-weight:600}
.daftar-isi li>span:not(.ji){font-size:13px;opacity:.6}
.daftar-isi em{font-style:normal;font-size:12px;font-weight:700}
.daftar-isi .gratis{background:var(--oranye);padding:4px 10px;border-radius:99px}
.daftar-isi .kunci-i{opacity:.45}
/* preview */
.pv{position:relative;border-radius:calc(var(--r) * 1.3);overflow:hidden;background:var(--ink);color:#fff}
.pv-video{aspect-ratio:16/10}
.pv-video img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .4s}
.pv-video.main img{opacity:.85}
.pv-main{position:absolute;left:50%;top:46%;translate:-50% -50%;width:84px;height:84px;border-radius:50%;border:0;background:var(--oranye);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--ease),opacity .3s}
.pv-main svg{width:30px;margin-left:4px}
.pv-video.main .pv-main{opacity:0}.pv-video.main:hover .pv-main{opacity:1}
.pv-bar{position:absolute;left:18px;right:18px;bottom:46px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700}
.pv-bar i{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.3);overflow:hidden}.pv-bar u{display:block;height:100%;width:0;background:var(--oranye);transition:width 1s linear}
.pv-cap{position:absolute;left:18px;bottom:14px;font-size:13px;opacity:.8}
.pv-buku{background:var(--krem);color:var(--ink);padding:clamp(22px,3vw,44px) clamp(22px,3vw,44px) 60px;aspect-ratio:16/12}
.pv-buku .hlm{background:#fff;border-radius:6px;padding:clamp(20px,2.4vw,34px);box-shadow:0 18px 40px -20px rgba(0,0,0,.35);height:100%;overflow:hidden;position:relative}
.pv-buku small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--oranye)}
.pv-buku h4{font-family:DMD;font-weight:700;font-size:clamp(22px,2vw,30px);letter-spacing:-.035em;line-height:1.1;margin:8px 0 14px}
.pv-buku p{font-size:15px;line-height:1.6;margin-bottom:12px}
.pv-buku .kabur{filter:blur(4px);user-select:none}
.pv-buku.baca{aspect-ratio:auto;min-height:380px;padding-bottom:clamp(22px,3vw,44px)}
.pv-buku .pv-cap{color:var(--ink)}
.pv-tpl{background:var(--krem);color:var(--ink);padding:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 60px}
.th3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.th{aspect-ratio:3/4;border-radius:10px;background:var(--c);color:var(--ct);padding:14px;display:flex;align-items:flex-end;font-family:DMD;font-weight:600;font-size:15px;line-height:1.2;letter-spacing:-.02em;rotate:-1.5deg}
.th:nth-child(2){rotate:1.5deg;translate:0 10px}.th:nth-child(3){rotate:-.5deg}
.pv-tpl .pv-cap{color:var(--ink)}
/* keranjang & bayar */
.kepala.kiri{align-items:flex-start;text-align:left;max-width:none;margin:0 0 clamp(20px,2.4vw,34px)}
.bl2{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,3vw,48px);align-items:start;text-align:left}
.bl-item{display:grid;grid-template-columns:92px 1fr auto;gap:18px;align-items:center;padding:16px 0;border-top:1.5px solid rgba(35,34,38,.15)}
.bl-item .sampul{aspect-ratio:4/5;padding:8px;border-radius:10px}.bl-item .sampul .d{font-size:11px}.bl-item .sampul .j{display:none}
.bl-ket small{font-size:12px;opacity:.6;display:block}.bl-ket b{display:block;font-family:DMD;font-weight:700;font-size:clamp(18px,1.4vw,21px);letter-spacing:-.03em;line-height:1.15;margin:4px 0}.bl-ket span{font-size:14px;opacity:.7}
.bl-kanan{text-align:right}.bl-kanan b{display:block;font-family:DMD;font-weight:700;font-size:19px;letter-spacing:-.03em}
.bl-kanan button{background:none;border:0;font:inherit;font-size:13px;text-decoration:underline;opacity:.6;cursor:pointer;margin-top:6px}
.ringkas{background:#fff;border:2.5px solid var(--ink);border-radius:calc(var(--r) * 1.2);padding:clamp(18px,2vw,28px);position:sticky;top:110px;box-shadow:8px 8px 0 var(--oranye)}
.ringkas>small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.rk-baris{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1.5px solid rgba(35,34,38,.1);font-size:15px}
.rk-baris.kecil{font-size:14px}.rk-baris.kecil span{max-width:70%}
.rk-baris.total{border:0;font-size:18px}.rk-baris.total b{font-family:DMD;font-size:26px;letter-spacing:-.04em}
.rk-cat{font-size:13px;opacity:.6;margin:10px 0 16px}
.ringkas .btn{width:100%;justify-content:space-between;margin-top:14px}
.kosong-k{text-align:center;display:grid;justify-items:center;gap:20px;padding:60px 0}
.form-b fieldset{border:0;border-top:2px solid var(--ink);padding:16px 0 26px;display:grid;gap:14px}
.form-b legend{font-family:DMD;font-weight:700;font-size:22px;letter-spacing:-.03em;padding-right:12px}
.form-b label{display:grid;gap:6px;font-size:14px;font-weight:700}
.form-b label i{font-style:normal;font-weight:500;font-size:13px;opacity:.6}
.form-b input:not([type=radio]){font:inherit;font-weight:500;font-size:16px;padding:13px 16px;border:2px solid rgba(35,34,38,.2);border-radius:12px;background:#fff}
.form-b input:focus{outline:none;border-color:var(--oranye)}
.form-b label.salah input{border-color:var(--merah)}
.form-b .opsi{grid-template-columns:auto 1fr;align-items:start;gap:12px;padding:14px 16px;border:2px solid rgba(35,34,38,.15);border-radius:14px;background:#fff;cursor:pointer}
.form-b .opsi:has(input:checked){border-color:var(--ink);box-shadow:4px 4px 0 var(--oranye)}
.form-b .opsi input{accent-color:var(--ink);margin-top:4px}
.form-b .opsi b{display:block;font-size:16px}
.modal{position:fixed;inset:0;background:rgba(35,34,38,.6);display:grid;place-items:center;z-index:200;padding:16px}
.modal[hidden]{display:none}
.modal-in{background:#fff;border-radius:calc(var(--r) * 1.4);padding:clamp(22px,3vw,36px);width:min(400px,100%);display:grid;justify-items:center;gap:14px;text-align:center}
.modal-in small{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.qr{width:220px;border:2.5px solid var(--ink);border-radius:14px;padding:12px;background:#fff}.qr svg{display:block;width:100%}
.va{font-family:DMD;font-weight:700;font-size:26px;letter-spacing:.02em;padding:20px 6px}
.m-total{font-family:DMD;font-weight:700;font-size:32px;letter-spacing:-.04em}
.m-cat{font-size:13px;opacity:.65}
.modal-in .btn{width:100%;justify-content:space-between}
.nb{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:99px;background:var(--oranye);color:var(--ink);font-size:12px;font-weight:700;margin-left:8px;padding:0 5px}
.toast{position:fixed;left:50%;bottom:28px;translate:-50% 30px;opacity:0;background:var(--ink);color:#fff;padding:13px 20px;border-radius:99px;font-size:14px;z-index:300;transition:all .4s var(--ease);max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;translate:-50% 0}
/* Kelasku & ruang belajar */
.sukses{display:flex;gap:16px;align-items:center;background:var(--hijau);color:#fff;border-radius:calc(var(--r) * 1.2);padding:18px 22px;margin-bottom:30px;text-align:left}
.bulat-ok{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--hijau);display:grid;place-items:center;font-weight:700;font-size:20px;flex:none}
.sukses p{font-size:14px;opacity:.9}
.rak{margin-top:0}.kecil-b{font-size:17px!important;line-height:1.2}
.rak-prog{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px}
.rak-prog i,.rb-prog i{flex:1;height:6px;border-radius:9px;background:rgba(35,34,38,.12);overflow:hidden}
.rak-prog u,.rb-prog u{display:block;height:100%;background:var(--oranye);transition:width .5s var(--ease)}
.rb2{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(20px,3vw,44px);align-items:start;text-align:left}
.rb-kepala{margin:20px 0 6px}.rb-kepala small{font-size:13px;font-weight:700;color:var(--oranye);letter-spacing:.04em}
.rb-kepala h1{margin:6px 0}.rb-kepala p{font-size:18px;opacity:.8}
.rb-aksi{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:18px}
.rb-daftar{background:#fff;border:2.5px solid var(--ink);border-radius:calc(var(--r) * 1.2);padding:clamp(16px,1.8vw,24px);position:sticky;top:110px}
.rb-prog{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;margin-bottom:12px}
.rb-prog small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.6}.rb-prog b{font-family:DMD;font-size:20px}.rb-prog i{grid-column:1/-1}
.rb-daftar ol{list-style:none}
.rb-daftar li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:11px 8px;border-top:1.5px solid rgba(35,34,38,.1);font-size:15px;cursor:pointer;border-radius:8px}
.rb-daftar li.on{background:var(--krem);font-weight:700}
.rb-daftar .cek{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-size:12px;font-weight:700}
.rb-daftar li.ok .cek{background:var(--hijau);border-color:var(--hijau);color:#fff}
.rb-daftar em{font-style:normal;font-size:12px;opacity:.6}
@media (max-width:860px){
  .apa2,.mt2,.bl2,.rb2{grid-template-columns:1fr}
  .unggul{grid-template-columns:1fr}
  .ringkas,.rb-daftar{position:static}
  .bl-item{grid-template-columns:64px 1fr;}.bl-kanan{grid-column:2;text-align:left;display:flex;gap:14px;align-items:baseline}
  .daftar-isi li{grid-template-columns:30px 1fr auto}.daftar-isi li>span:not(.ji){display:none}
}
[hidden]{display:none!important}
.rk-baris.rk-i{font-size:14px}.rk-baris.rk-i span{max-width:70%}
.sampul .bw.sm{top:16px;bottom:auto;right:16px;width:26px}
.ung-harga{flex-direction:column;align-items:flex-start}
.apa-teks p b{background:var(--kun);padding:0 .2em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ======================= MTGOODS: toko online (13 Okt) */
.b-mtgoods{background:#FAFAFA}
.b-mtgoods .btn{--bt:#8A55F5;--btt:#fff}
.b-mtgoods .btn.garis{background:transparent;color:#1A1A1A;box-shadow:inset 0 0 0 2px #1A1A1A;padding:0 22px}
.tg-mt{font-size:10.5px;line-height:1.15;font-weight:600;text-align:left;opacity:.75;border-left:1.5px solid rgba(35,34,38,.25);padding-left:9px;margin-left:2px}
.b-mtgoods .logo{gap:8px}
.mt-strip{background:#1A1A1A;color:#fff;text-align:center;font-size:13px;font-weight:600;padding:9px 16px;margin-top:86px}
.toko{max-width:1320px;margin:0 auto;padding:clamp(20px,2.4vw,34px) clamp(16px,3vw,40px) clamp(50px,6vw,90px);text-align:left}
.toko.barang,.belanja-mt{padding-top:clamp(110px,11vw,140px)}
.mt-banner{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:20px;background:#8A55F5;color:#fff;border-radius:24px;overflow:hidden;padding-left:clamp(22px,4vw,60px);min-height:300px}
.mb-teks small{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.mb-teks h1{margin:8px 0 10px}.mb-teks p{font-size:clamp(16px,1.3vw,19px);max-width:24em;margin-bottom:20px;opacity:.9}
.mt-banner .btn{--bt:#F7C839;--btt:#1A1A1A}
.mb-ft{height:100%}.mb-ft .ft-b{height:100%;border-radius:0;aspect-ratio:auto}
.toko-kepala{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:clamp(30px,3.6vw,50px) 0 16px}
.toko-kepala p{font-size:14px;opacity:.6}
.toko-alat{display:flex;gap:10px;flex-wrap:wrap}
.cari{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #E8E8E5;border-radius:99px;padding:0 16px;height:44px;min-width:240px}
.cari svg{width:16px;opacity:.5}.cari input{border:0;outline:0;font:inherit;font-size:15px;background:none;width:100%}
.toko-alat select{font:inherit;font-size:14px;font-weight:600;height:44px;border:1.5px solid #E8E8E5;border-radius:99px;padding:0 16px;background:#fff}
.kiri-pil{justify-content:flex-start;margin-bottom:22px}
.b-mtgoods .pil button{border:1.5px solid #E8E8E5}.b-mtgoods .pil button.on{background:#1A1A1A;border-color:#1A1A1A}
.kb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.kb{position:relative;background:#fff;border-radius:18px;overflow:hidden;border:1.5px solid #EDEDEA;transition:transform .35s var(--ease),box-shadow .35s}
.kb:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(26,26,26,.35)}
.kb-ft{display:block;position:relative}
.ft-b{aspect-ratio:1/1;background:#F2F0EC;overflow:hidden}
.ft-b img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.kb:hover .ft-b img{transform:scale(1.04)}
.kb-po{position:absolute;left:10px;top:10px;background:#F7C839;color:#1A1A1A;font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px}
.kb-isi{padding:12px 14px 14px}
.kb-isi small{font-size:12px;opacity:.55}.kb-isi b{display:block;font-family:DMD;font-weight:600;font-size:17px;letter-spacing:-.02em;margin:2px 0 8px}
.kb-bawah{display:flex;justify-content:space-between;align-items:center}
.kb-h{font-weight:700;font-size:16px}
.kb-var{display:flex;gap:4px}.kb-var i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.kb-tambah{position:absolute;right:10px;top:calc(100% - 128px);width:40px;height:40px;border-radius:50%;border:0;background:#1A1A1A;color:#fff;font-size:22px;cursor:pointer;transform:translateY(8px);opacity:0;transition:all .3s var(--ease)}
.kb:hover .kb-tambah,.kb-tambah:focus{opacity:1;transform:none}
.kosong-cari{text-align:center;padding:40px;opacity:.6}
/* halaman barang */
.remah{display:flex;gap:8px;font-size:13px;margin-bottom:20px;flex-wrap:wrap}.remah a{opacity:.6}.remah span{opacity:.35}
.br2{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,60px);align-items:start}
.mt-galeri{display:grid;grid-template-columns:80px 1fr;gap:12px;position:sticky;top:100px}
.g-utama{grid-column:2;grid-row:1;border-radius:20px;overflow:hidden}
.g-u{display:none}.g-u.on{display:block}
.g-ths{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:10px}
.g-th{border:2px solid transparent;border-radius:12px;overflow:hidden;padding:0;cursor:pointer;background:none}
.g-th.on{border-color:#1A1A1A}
.br-info>small{font-size:13px;opacity:.6}
.br-info h1{margin:6px 0 10px}
.br-harga{font-family:DMD;font-weight:600;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.03em}
.br-po{background:#FFF6D6;border-radius:12px;padding:10px 14px;font-size:14px;margin:14px 0}
.br-po b{background:#F7C839;padding:2px 8px;border-radius:99px;font-size:12px;margin-right:6px}
.br-desk{font-size:16px;line-height:1.6;opacity:.85;margin-bottom:18px}
.br-pilih{margin:16px 0}.br-pilih>small{font-size:13px;opacity:.7;display:block;margin-bottom:8px}.br-pilih>small b{opacity:1}
.vrs{display:flex;gap:8px;flex-wrap:wrap}
.vr{display:flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:99px;border:1.5px solid #E8E8E5;background:#fff;cursor:pointer}
.vr i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.vr.on{border-color:#1A1A1A;box-shadow:inset 0 0 0 1px #1A1A1A}
.qty{display:inline-flex;align-items:center;border:1.5px solid #E8E8E5;border-radius:99px;background:#fff;height:44px}
.qty button{width:42px;height:100%;border:0;background:none;font-size:18px;cursor:pointer}
.qty input{width:40px;text-align:center;border:0;font:inherit;font-weight:700;background:none}
.qty.kecil{height:34px;margin-top:8px}.qty.kecil button{width:32px}
.br-aksi{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 26px}
.br-info details{border-top:1.5px solid #E8E8E5;padding:14px 0}
.br-info summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.br-info summary::after{content:"+";font-size:20px;line-height:1}.br-info details[open] summary::after{content:"−"}
.br-info details p{font-size:15px;line-height:1.6;opacity:.8;margin-top:10px}
.br-info dl{display:grid;grid-template-columns:120px 1fr;gap:8px 14px;margin-top:12px;font-size:15px}.br-info dt{opacity:.6}
.lain-b{padding-top:0}.lain-b h2{margin-bottom:18px}
/* keranjang, laci, pesanan */
.th-mt{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--c)}
.th-mt img{width:100%;height:100%;object-fit:cover}
.belanja-mt h1{margin-bottom:24px}
.belanja-mt .bl-item{grid-template-columns:96px 1fr auto}
.b-mtgoods .ringkas{box-shadow:8px 8px 0 #8A55F5}
.dua-isian{display:grid;grid-template-columns:1fr 160px;gap:12px}
.b-mtgoods .form-b .opsi:has(input:checked){box-shadow:4px 4px 0 #8A55F5}
.b-mtgoods .nb,.b-mtgoods .rak-prog u{background:#F7C839}
.laci{position:fixed;inset:0;z-index:250;background:rgba(26,26,26,0);transition:background .35s}
.laci.on{background:rgba(26,26,26,.45)}
.laci-in{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:#fff;padding:24px;display:flex;flex-direction:column;gap:14px;transform:translateX(100%);transition:transform .35s var(--ease)}
.laci.on .laci-in{transform:none}
.laci-k{display:flex;justify-content:space-between;align-items:center;font-size:18px}
.laci-k button{border:0;background:none;font-size:28px;cursor:pointer}
.laci .bl-item{grid-template-columns:80px 1fr auto}
.laci .btn{justify-content:space-between}
.psn{background:#fff;border:1.5px solid #E8E8E5;border-radius:20px;padding:clamp(16px,2vw,26px);margin-bottom:18px}
.psn-k{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-bottom:16px;border-bottom:1.5px solid #EDEDEA}
.psn-k small{font-size:12px;opacity:.55;display:block}.psn-k b{font-size:15px}
.tahap{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:22px 0 10px;position:relative}
.tahap li{position:relative;display:grid;justify-items:center;text-align:center;gap:6px;font-size:14px;font-weight:600}
.tahap li::before{content:"";position:absolute;top:9px;left:-50%;right:50%;height:3px;background:#E8E8E5;z-index:0}
.tahap li:first-child::before{display:none}
.tahap li.ok::before,.tahap li.kini::before{background:#8A55F5}
.tahap i{width:20px;height:20px;border-radius:50%;background:#E8E8E5;position:relative;z-index:1}
.tahap li.ok i{background:#8A55F5}.tahap li.kini i{background:#fff;box-shadow:inset 0 0 0 5px #8A55F5}
.tahap em{font-style:normal;font-size:12px;font-weight:500;opacity:.6;max-width:14em}
.psn-isi .bl-item{grid-template-columns:64px 1fr auto}
@media (max-width:1000px){.kb-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
  .mt-banner{grid-template-columns:1fr;padding:24px 22px 0}.mb-ft .ft-b{aspect-ratio:16/10;border-radius:16px 16px 0 0}
  .kb-grid{grid-template-columns:1fr 1fr}.br2{grid-template-columns:1fr}.mt-galeri{position:static;grid-template-columns:1fr}
  .g-ths{grid-column:1;grid-row:2;flex-direction:row}.g-th{width:70px}.g-utama{grid-column:1}
  .psn-k{grid-template-columns:1fr 1fr}.tg-mt{display:none}.kb-tambah{opacity:1;transform:none}
  .cari{min-width:0;flex:1}
}
.kb-tambah{top:auto;bottom:10px}
.menu a.ke-mp{display:inline-flex;align-items:center;padding-inline:12px}
.menu .mp{height:18px;width:auto;display:block}
.menu a.ke-mp+a.ke-mp{padding-left:4px}
.kaki .mp{height:16px;width:auto;filter:brightness(0) invert(1);opacity:.85}
.mt-strip a{text-decoration:underline;text-underline-offset:3px}

/* ======================= Kelas MOTE gaya marketplace (13 Okt sore) */
.b-kelas{background:#FAFAFA}
.sampul.foto{position:relative;padding:0;overflow:hidden;background:var(--c)}
.sampul.foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sampul.foto .j{position:absolute;left:10px;top:10px;z-index:1}
.kolase{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:var(--c)}
.kolase img{width:100%;height:100%;object-fit:cover}.kolase img:first-child{grid-row:span 2}
.kk .sampul{aspect-ratio:1/1;border-radius:0}
.kk .kb-h s{font-size:13px;font-weight:500;opacity:.5;margin-left:4px}
.kb-oleh{font-size:12px;opacity:.6}
.kk .punya{display:none}.kk.dimiliki .punya{display:inline-block;margin-top:8px;background:var(--hijau);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px}
.kk.dimiliki .kb-tambah{display:none}
.b-kelas .kb-po{display:none}
.kb-3{grid-template-columns:repeat(3,1fr);max-width:1000px;margin:0 auto}
/* banner geser */
.geser{position:relative;border-radius:24px;overflow:hidden}
.gs-rel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gs-rel::-webkit-scrollbar{display:none}
.gs{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:clamp(18px,3vw,50px);min-height:380px;padding:clamp(24px,3.6vw,54px) clamp(24px,4.6vw,70px);text-align:left}
.gs-oranye{background:var(--oranye);color:var(--ink)}
.gs-ink{background:var(--ink);color:#fff}
.gs-ungu{background:var(--ungu);color:#fff}
.gs-teks small{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.gs-teks h2{margin:10px 0 12px}
.gs-teks p{font-size:clamp(15px,1.2vw,18px);line-height:1.5;opacity:.9;max-width:30em}
.gs-harga{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:16px 0 20px}
.gs-harga b{font-family:DMD;font-weight:700;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.04em}
.gs-harga s{opacity:.6}.gs-harga span{font-size:14px;opacity:.75}
.gs-oranye .btn{--bt:var(--ink);--btt:#fff}.gs-ungu .btn{--bt:var(--kun);--btt:var(--ink)}
.gs-vis .sampul{aspect-ratio:4/3;border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);rotate:2deg}
.gs-vis .pv-video{border-radius:18px}
.gs-nama{display:flex;align-items:center;gap:12px;margin-top:20px}
.gs-nama img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:top;background:var(--kun)}
.gs-nama b{display:block;font-size:15px}.gs-nama i{font-style:normal;font-size:13px;opacity:.65}
.gs-tumpuk{position:relative;height:300px}
.gs-tumpuk .sampul{position:absolute;width:56%;aspect-ratio:1/1;top:10%}
.gs-tumpuk .sampul:nth-child(1){left:0;rotate:-8deg}.gs-tumpuk .sampul:nth-child(2){left:22%;rotate:3deg;top:4%;z-index:1}.gs-tumpuk .sampul:nth-child(3){left:44%;rotate:10deg;top:14%}
.gs-btn{position:absolute;top:50%;right:14px;translate:0 -50%;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:2}
.gs-btn svg{width:16px}.gs-btn.kiri{right:auto;left:14px}.gs-btn.kiri svg{rotate:180deg}
.gs-titik{position:absolute;left:50%;bottom:14px;translate:-50% 0;display:flex;gap:8px;z-index:2}
.gs-titik i{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.55);cursor:pointer;transition:width .3s}
.gs-titik i.on{width:26px;background:#fff}
/* penjelasan & paket */
.apa-foto{position:relative;rotate:2deg}
.apa-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;border:6px solid #fff;box-shadow:0 24px 50px -28px rgba(0,0,0,.45)}
.apa-foto span{position:absolute;left:18px;bottom:-12px;background:var(--oranye);font-size:13px;font-weight:700;padding:6px 14px;border-radius:99px}
.pk-tumpuk{position:relative;aspect-ratio:1/1;background:var(--c);border-radius:24px}
.pk-tumpuk .sampul{position:absolute;width:52%;aspect-ratio:1/1;border-radius:16px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.pk-tumpuk .sampul:nth-child(1){left:8%;top:12%;rotate:-7deg}.pk-tumpuk .sampul:nth-child(2){left:26%;top:26%;rotate:4deg;z-index:1}.pk-tumpuk .sampul:nth-child(3){left:42%;top:10%;rotate:9deg}
.b-kelas .bl-item .sampul,.laci .sampul{aspect-ratio:1/1;border-radius:12px}
.b-kelas .rak .sampul{aspect-ratio:1/1}
@media (max-width:860px){
  .gs{grid-template-columns:1fr;min-height:0;padding:26px 22px 50px}.gs-tumpuk{height:220px}.gs-btn{display:none}
  .kb-3{grid-template-columns:1fr 1fr}
}
.b-kelas,.b-mtgoods{--bg:#FAFAFA}
/* halaman segera (Kelas MOTE & MTGOODS sebelum siap jualan) */
.segera-h .p{max-width:34em}
.w-ungu.segera-h .btn{--bt:var(--kun);--btt:var(--ink)}
.mp-baris{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.mp-b{display:flex;align-items:center;background:#fff;border-radius:99px;padding:12px 22px;height:52px;transition:transform .3s var(--ease)}
.mp-b:hover{transform:rotate(-2deg) scale(1.04)}.mp-b img{height:24px;width:auto}
/* template thumbnail "lagi diproduksi" (Kelas MOTE & MTGOODS, sebelum ada foto/sampul asli) */
.tpl,.ft-b.tpl{position:relative;background:var(--c) repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 16px,transparent 16px 32px);display:grid;place-items:center;overflow:hidden}
.sampul.foto>.tpl{position:absolute;inset:0}
.kolase .tpl{width:100%;height:100%}
.tpl-st,.ft-b.tpl img.tpl-st{width:44%!important;height:auto!important;max-width:220px;object-fit:contain!important;position:static!important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));transition:transform .5s var(--ease)}
.kolase .tpl-st{width:58%!important}
.kb:hover .tpl-st{transform:rotate(-6deg) scale(1.06)}
.tpl-lbl{position:absolute;left:50%;bottom:12px;translate:-50% 0;white-space:nowrap;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px}
.tpl-lbl::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--kun);margin-right:7px;vertical-align:1px;animation:kedip 1.4s infinite}
@keyframes kedip{50%{opacity:.25}}
.besar .tpl-lbl,.ft-b.besar .tpl-lbl{font-size:15px;padding:8px 16px;bottom:20px}
.b-kreatif .logo{gap:8px}
@media (max-width:860px){.b-kreatif .tg-mt{display:none}}
.g-th .tpl-lbl,.bl-item .tpl-lbl,.th-mt .tpl-lbl{display:none}.g-th .tpl-st{width:62%!important}
.tpl-lbl{white-space:normal;text-align:center;width:max-content;max-width:86%;line-height:1.3;padding:6px 12px}
.pk-tumpuk .tpl-lbl,.gs-tumpuk .tpl-lbl{display:none}

/* ======================= Mote Capture (desain ulang capture.motekreatif.com, isi tetap) */
.cp-lompat{position:absolute;left:-999px}.cp-lompat:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 14px;border-radius:99px}
.cp-logo{display:flex;align-items:center;gap:10px;background:#fff;border-radius:99px;padding:0 18px;height:44px}
.cp-logo .bw{height:18px;display:block}.cp-logo .bw svg{height:100%;width:auto}
.cp-logo b{font-family:DMD;font-weight:700;font-size:18px;letter-spacing:-.03em}
.cp-hero{min-height:auto;padding-top:clamp(120px,12vw,160px);padding-bottom:clamp(140px,14vw,210px)}
.cp-h2{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,70px);align-items:center;max-width:var(--lebar);width:100%;margin:0 auto;text-align:left;position:relative;z-index:2}
.cp-teks h1{margin:12px 0 18px}.cp-teks .aksi{justify-content:flex-start}
.cp-kecil{font-size:clamp(15px,1.15vw,17px)!important;opacity:.8;margin-top:10px}
.cp-kecil b{background:var(--ink);color:var(--kun);padding:0 .2em;border-radius:.2em}
.cp-poin{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.cp-poin li{background:#fff;font-size:13px;font-weight:700;padding:6px 14px;border-radius:99px}
.cp-poin li::before{content:"✓";margin-right:6px;color:var(--hijau)}
.cp-strip{display:flex;justify-content:center;gap:clamp(12px,2vw,26px)}
.cp-strip figure{background:#fff;padding:10px 10px 14px;border-radius:10px;rotate:var(--rt);box-shadow:0 30px 50px -28px rgba(0,0,0,.45);width:clamp(130px,14vw,200px);transition:rotate .5s var(--ease)}
.cp-strip figure:hover{rotate:0deg}
.cp-strip figure:nth-child(2){margin-top:60px}
.cp-strip img{width:100%;display:block;border-radius:4px}
.cp-strip figcaption{font-size:12px;font-weight:700;margin-top:8px;text-align:center}
.cp-mq{font-family:DMD;font-weight:600;font-size:clamp(18px,1.8vw,26px)}.cp-mq .tx{white-space:nowrap}.cp-dot{color:var(--kun);font-size:.6em}
.cp-banding{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,44px);max-width:1080px;margin:clamp(36px,4vw,60px) auto 0;text-align:left}
.cpt-k{position:relative;background:#fff;border:2.5px solid var(--ink);border-radius:calc(var(--r) * 1.3);padding:clamp(20px,2.4vw,32px);rotate:var(--rt)}
.cpt-k.on{background:var(--kun)}
.cpt-kh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.cpt-kh h3{font-size:clamp(22px,2vw,28px)}.cpt-kh small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.cp-r{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1.5px dashed rgba(35,34,38,.2);font-size:15px}
.cp-r b{white-space:nowrap}
.cp-r.tot{border-bottom:2.5px solid var(--ink);font-family:DMD;font-weight:600;font-size:clamp(17px,1.4vw,20px);padding:12px 0}
.cp-sep{height:14px}
.cp-cat{font-size:13px;opacity:.65;margin-top:12px}
.cp-pita{position:absolute;right:20px;top:-15px;background:var(--merah);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:6px 14px;border-radius:99px;rotate:3deg}
.cpt-k .ly-st{position:absolute;left:-30px;bottom:-30px;width:90px;rotate:-10deg}
.cp-sumber{text-align:center;font-size:13px;opacity:.55;margin-top:34px}
.cp-hit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,50px);align-items:center;max-width:1000px;margin:clamp(36px,4vw,60px) auto 0;border:2px solid rgba(255,255,255,.25);border-radius:calc(var(--r) * 1.4);padding:clamp(22px,3vw,44px);text-align:left}
.cp-in label{display:block;font-weight:700;margin:4px 0 12px}.cp-in label b{color:var(--kun);font-family:DMD;font-size:22px}
.cp-in input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:9px;background:linear-gradient(90deg,var(--kun) var(--p,29%),rgba(255,255,255,.2) var(--p,29%));margin-bottom:26px}
.cp-in input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--kun);cursor:pointer}
.cp-tiket{display:flex;gap:8px;flex-wrap:wrap}
.cp-tiket button{font:inherit;font-weight:700;font-size:15px;padding:10px 18px;border-radius:99px;border:2px solid rgba(255,255,255,.4);background:none;color:#fff;cursor:pointer}
.cp-tiket button.on{background:var(--kun);border-color:var(--kun);color:var(--ink)}
.cp-out small{font-size:15px;opacity:.8}
.cp-out b{display:block;font-family:DMD;font-weight:700;font-size:clamp(44px,5vw,72px);letter-spacing:-.045em;color:var(--kun);line-height:1;margin:10px 0 14px}
.cp-out p{font-size:14px;opacity:.7}
.cp-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px);max-width:var(--lebar);margin:clamp(40px,4.6vw,70px) auto 0;text-align:left}
.cp-l{position:relative;background:var(--c);color:var(--ct);border-radius:calc(var(--r) * 1.2);padding:clamp(20px,2vw,28px);rotate:var(--rt)}
.cp-l .no{font-family:DMD;font-weight:300;font-style:italic;font-size:clamp(30px,2.8vw,42px);line-height:1}
.cp-l h3{font-size:clamp(20px,1.7vw,24px);margin:12px 0 8px}.cp-l p{font-size:15px;line-height:1.5}
.cp-l .ly-st{position:absolute;right:-10px;top:-30px;width:76px;rotate:8deg}
.cp-spek{margin-top:clamp(50px,5vw,80px)}
.b-capture .cp-spek .mf{border-top-color:rgba(35,34,38,.3)}.b-capture .cp-spek .mf p{color:inherit;opacity:.8}
.cp-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);max-width:1080px;margin:clamp(36px,4vw,60px) auto 0}
.cp-gal figure{background:#fff;color:var(--ink);padding:10px 10px 14px;border-radius:10px;rotate:var(--rt);box-shadow:0 30px 50px -30px rgba(0,0,0,.5);transition:rotate .5s var(--ease),transform .5s var(--ease)}
.cp-gal figure:hover{rotate:0deg;transform:translateY(-8px)}
.cp-gal img{width:100%;display:block;border-radius:4px}
.cp-gal figcaption{font-family:DMD;font-weight:600;font-size:15px;margin-top:10px;text-align:center}
.cp-kaki{text-align:center;padding:40px var(--gut)}
.cp-kaki ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;font-weight:700;font-size:14px;margin-bottom:14px}
.cp-kaki p{font-size:13px;opacity:.6}
@media (max-width:860px){
  .cp-h2,.cp-banding,.cp-hit{grid-template-columns:1fr}.cp-4{grid-template-columns:1fr 1fr}.cp-gal{grid-template-columns:1fr 1fr}
  .cp-strip figure:nth-child(2){margin-top:30px}
}
@media (max-width:520px){.cp-4{grid-template-columns:1fr}}
/* halaman legal + footer legal */
.lg-hero{min-height:auto;padding-top:clamp(130px,13vw,170px);padding-bottom:clamp(50px,6vw,80px)}
.lg-isi{max-width:820px;margin:0 auto;text-align:left}
.lg-tgl{font-size:14px;opacity:.6;margin-bottom:20px}
.lg-b{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:22px 0;border-top:1.5px solid rgba(35,34,38,.15)}
.lg-b .no{font-family:DMD;font-weight:300;font-style:italic;font-size:22px}
.lg-b h2{font-size:clamp(20px,1.8vw,24px);margin-bottom:8px}
.lg-b p{font-size:16px;line-height:1.65;opacity:.85}.lg-b a{text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.kaki-b{flex-wrap:wrap;gap:10px 24px}
.kaki-legal{display:flex;flex-wrap:wrap;gap:6px 18px}.kaki-legal a{text-decoration:underline;text-underline-offset:3px}
.kaki-ipaymu b{color:#fff}

/* ======================= HP: keterbacaan & ukuran sentuh (audit 13 Okt, 360/390px) */
@media (max-width:600px){
  .kaki h4,.pg-l,small,.kb-oleh,.kb-po,.tpl-lbl,em.gratis,.segera,.baru,.bt-tanda,.cp-pita,.kecil,figcaption,.br-po b,.bt-spek small,.bt-kapan small,.lay .empat small,.peran span,
  .tg-mt{display:none}
  .kaki ul a,.kaki-legal a,.kaki a{display:inline-block;padding:11px 0;min-height:44px}
  .kaki-legal{gap:0 18px}
  .br-info summary,.faq summary{padding-top:14px;padding-bottom:14px;min-height:48px;align-items:center}
  .qty input,.cari input{height:100%;min-height:40px}
  .sq{min-height:44px}
  .menu a.ke-mp{min-height:44px;padding-block:12px}
  .remah a{display:inline-block;padding:10px 0}
  .lg-b a,.mt-janji a{padding:4px 0}
  .cp-in input[type=range]{height:28px;background-clip:content-box;padding:10px 0;box-sizing:border-box}
}
@media (max-width:600px){.mt-strip a{display:inline-block;padding:8px 0}.idc-h em,.idc-h span{font-size:11.5px}}

/* HP: stiker judul (lekat) naik ke atas judul, tidak menimpa kata */
@media (max-width:860px){
  h1.d:has(.lekat),h2.d:has(.lekat),h3.d:has(.lekat){display:flex;flex-direction:column;align-items:center}
  .lekat{position:static;order:-1;width:58px;min-width:0;margin:0 0 6px;transform:rotate(var(--rt,0deg)) scale(.3)}
  .in .lekat,.lekat.in{transform:rotate(var(--rt,0deg))}
  .dua-kol h2.d:has(.lekat),.apa-teks .d:has(.lekat),.tri-teks .d:has(.lekat),.cp-teks .d:has(.lekat),.kepala.kiri .d:has(.lekat){align-items:flex-start}
}
@media (max-width:600px){.lencana{width:58px!important;height:58px!important;right:10px!important;bottom:10px!important}}
@media (max-width:600px){
  .lencana{display:none!important}
  .cpt-k .ly-st{left:auto;right:-8px;bottom:auto;top:-34px;width:64px}
  .cpt-k.on .cpt-kh{padding-right:44px}
}
@media (max-width:600px){.lay .peran span{font-size:13px!important}.kb-isi>a{display:block;padding:4px 0}}
.gs-terj{font-size:clamp(15px,1.2vw,18px)!important;opacity:.75!important;margin-top:-4px}
.gs-foto{position:relative;rotate:2deg;background:#fff;padding:10px 10px 40px;border-radius:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.gs-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block}
.gs-foto span{position:absolute;left:14px;bottom:10px;color:var(--ink);font-size:13px;font-weight:700}

/* ===== Lobi: benda jatuh dengan gravitasi (js/meja.js). Teks tenang di kiri atas, benda menumpuk di dasar layar ===== */
.sambut{position:relative;height:max(100svh,640px);overflow:hidden;background:#fff;padding:clamp(96px,8vw,120px) var(--gut) 0;box-sizing:border-box}
.sambut-kepala{position:relative;z-index:3;pointer-events:none;max-width:min(700px,90vw)}
.sambut h1{font-family:DMD;font-weight:700;font-size:clamp(32px,3.4vw,62px);line-height:1;letter-spacing:-.045em;margin:0;color:var(--ink)}
.sambut h1 i{font-weight:300;font-style:italic;letter-spacing:-.03em}
.sambut h1 mark{background:var(--kun);color:var(--ink);padding:0 .12em .02em;border-radius:.12em;display:inline-block;transform:rotate(-1.5deg)}
.sambut-logo{display:block;width:clamp(64px,5.4vw,104px);margin-top:clamp(18px,1.8vw,30px);color:var(--ink)}
.sambut-logo svg{width:100%;height:auto;display:block}
/* tombol brand di kanan atas: satu kapsul putih seperti kapsul logo di kiri, gaya menu bar Mac */
.pintu-atas{position:absolute;z-index:60;top:16px;right:var(--gut);display:flex;align-items:center;gap:2px;height:44px;padding:0 5px;border-radius:99px;background:#fff;box-shadow:0 1px 2px rgba(35,34,38,.06),0 8px 24px -12px rgba(35,34,38,.25)}
.pintu-atas a{position:relative;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:99px;color:var(--ink);font-family:DMS;font-weight:600;font-size:14px;letter-spacing:-.01em;transition:background .18s,color .18s,transform .1s ease-out}
.pintu-atas a i{width:8px;height:8px;border-radius:50%;background:var(--c);transition:background .18s}
.pintu-atas a:hover{background:var(--c);color:var(--ct)}
.pintu-atas a:hover i{background:currentColor}
.pintu-atas a:active{transform:scale(.96)}
.pintu-atas .sekat{width:1px;height:20px;margin:0 4px;background:rgba(35,34,38,.15)}
.pintu-atas a.ikon{width:34px;padding:0;justify-content:center}
.pintu-atas a.ikon:hover{background:#f3f1ec}
.pintu-atas a.ikon img{width:24px;height:auto}
.pintu-atas a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* stiker aktivitas MOTE yang benar-benar menempel di halaman: foto di atas kertas putih, dibaurkan multiply */
.stiker-nyata{position:absolute;z-index:1;mix-blend-mode:multiply;pointer-events:none}
.stiker-nyata.s1{left:clamp(560px,55vw,1060px);top:clamp(110px,9vw,150px);width:clamp(150px,13vw,240px);transform:rotate(-6deg)}
.stiker-nyata.s2{left:clamp(700px,67vw,1300px);top:clamp(150px,13vw,230px);width:clamp(110px,9.5vw,180px);transform:rotate(8deg)}
.meja{position:absolute;inset:0;z-index:2;touch-action:pan-y}
.meja.genggam,.meja.genggam .fo{cursor:grabbing}
.meja .fo{position:absolute;left:0;top:0;display:block;cursor:grab;will-change:transform;transform:translate(-9999px,-9999px);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.meja .fo-alas>img{filter:drop-shadow(0 2px 3px rgba(35,34,38,.18))!important}
.meja .fo>img{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(35,34,38,.16)) drop-shadow(0 10px 14px rgba(35,34,38,.12))}
.meja .fo.polaroid>img{aspect-ratio:.84;object-fit:cover;box-sizing:border-box;padding:6% 6% 23%;background:linear-gradient(160deg,#fff,#f3f1ea);filter:none;box-shadow:0 1px 1px rgba(35,34,38,.12),0 12px 20px -10px rgba(35,34,38,.35)}
.meja .fo-catatan{container-type:inline-size}
.fo-catatan p{position:absolute;inset:15% 13% 18% 12%;margin:0;font-family:DMS;font-weight:500;font-size:10.5cqi;line-height:1.3;color:var(--ink);pointer-events:none}
.fo-catatan p span{display:block;margin-top:.5em;font-style:italic;font-weight:400;text-align:right;opacity:.75}
.meja .tag{position:absolute;left:50%;bottom:8%;translate:-50% 0;white-space:nowrap;background:var(--ink);color:#fff;font-family:DMS;font-weight:600;font-size:clamp(12px,.95vw,15px);padding:.45em .7em;border-radius:4px;transition:background .25s,color .25s}
.meja a.fo:hover .tag,.meja a.fo:focus-visible .tag{background:var(--c);color:var(--ink)}
.meja a.fo[style*="7558FE"]:hover .tag,.meja a.fo[style*="34C759"]:hover .tag,.meja a.fo[style*="FF0000"]:hover .tag{color:#fff}
.meja a.fo:focus-visible{outline:none}.meja a.fo:focus-visible .tag{outline:2px solid var(--ink);outline-offset:3px}
.sambut~.lencana{display:none}
@media (max-width:760px){
  .sambut{height:max(100svh,600px)}
  .pintu-atas{position:relative;top:auto;right:auto;z-index:3;margin-top:18px;width:max-content;max-width:100%;height:42px}
  .pintu-atas a{height:32px;padding:0 8px;font-size:12px;gap:5px;white-space:nowrap}.pintu-atas .sekat{margin:0 2px}.pintu-atas a.ikon{width:30px}.pintu-atas a.ikon img{width:22px}
  .stiker-nyata.s1{left:auto;right:3%;top:auto;bottom:58%;width:110px}.stiker-nyata.s2{display:none}
  .meja .tag{font-size:11px}
}

/* footer: daftar kanal, label kecil di kiri */
.kaki li.kanal{display:grid;grid-template-columns:5.6em 1fr;align-items:baseline;gap:8px}
.kaki li.kanal span{font-size:.78em;letter-spacing:.06em;text-transform:uppercase;opacity:.5}

/* Kelas MOTE: asal-usul (kartu bertumpuk) + format (kipas) + cara (pita & tiga kolom) */
.apa-tutup{max-width:30em;margin:clamp(30px,4vw,60px) auto 0;text-align:center;font-size:clamp(18px,1.5vw,23px);position:relative;z-index:3}
.kp.fmt{width:min(23vw,290px);min-height:clamp(260px,22vw,330px)}
.kp.fmt .d{font-size:clamp(28px,2.8vw,42px)}
.kp.fmt img{width:58%;margin:auto auto 0;display:block}
#cara .tiga-kol{margin-top:clamp(24px,3vw,44px)}
@media (max-width:760px){#cara .kipas{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px}#cara .kp.fmt{width:calc(50% - 6px);margin:0;min-height:210px;padding:16px}#cara .kp.fmt .d{font-size:26px}#cara .kp.fmt p{font-size:14px}}

/* ===== Kelas MOTE dijelaskan lewat pembaca PDF ala Mac (susunan Acrobat baru: quick tools mengambang, rail kanan) ===== */
.pdf-sec{padding-left:var(--gut);padding-right:var(--gut)}
.pdf-kepala{max-width:1180px;margin:0 auto 22px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.pdf-ajak{font-size:15px;opacity:.65;margin:0}
.pdf{--abu:#f3f3f3;--garis:#e1e1e1;--teks:#2c2c2c;max-width:1180px;margin:0 auto;border-radius:12px;overflow:hidden;background:#fff;color:var(--teks);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",DMS,sans-serif;font-size:13px;box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 30px 70px -20px rgba(35,34,38,.45),0 10px 24px -12px rgba(35,34,38,.25)}
.pdf button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.pdf-judul{height:38px;display:flex;align-items:center;gap:14px;padding:0 12px;background:#ececec;border-bottom:1px solid var(--garis)}
.lampu{display:flex;gap:8px}.lampu i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}.lampu i:nth-child(2){background:#febc2e}.lampu i:nth-child(3){background:#28c840}
.pdf-tab{display:flex;align-items:flex-end;height:100%;gap:2px}
.pdf-tab>span{display:flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:8px 8px 0 0;color:#666}
.pdf-tab>span.on{background:#fff;color:var(--teks);font-weight:500;box-shadow:0 0 0 .5px var(--garis)}
.pdf-tab em{font-style:normal;font-size:9px;font-weight:700;color:#fff;background:#d7373f;border-radius:3px;padding:2px 3px;letter-spacing:.02em}
.pdf-tab i{font-style:normal;opacity:.45;margin-left:4px}
.pdf-alat{height:46px;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid var(--garis);background:#fff}
.pa-teks{display:flex;gap:2px}.pa-teks>*{padding:6px 10px;border-radius:6px;font-weight:500}.pa-teks b{background:#f0f0f0;font-weight:600}
.pa-cari{margin:0 auto;display:flex;align-items:center;gap:8px;width:min(320px,30%);height:30px;padding:0 10px;border-radius:15px;background:#f3f3f3;color:#8a8a8a}
.pa-cari svg{width:15px;height:15px}
.pa-kanan{display:flex;align-items:center;gap:6px}
.pa-bagi{display:flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:15px;background:#1473e6;color:#fff;font-weight:600}.pa-bagi svg{width:15px;height:15px}
.pa-ik{width:32px;height:32px;display:grid;place-items:center;border-radius:7px;color:#4b4b4b;transition:background .15s ease,transform .12s ease-out}
.pa-ik svg{width:18px;height:18px}
.pa-ik:active{transform:scale(.94)}
.pa-ik.on{background:#e8f0fd;color:#1473e6}
@media (hover:hover) and (pointer:fine){.pa-ik:hover{background:#f0f0f0}}
.pdf-badan{position:relative;display:flex;height:min(76svh,720px);background:var(--abu)}
.pdf-isi{flex:1;overflow:auto;padding:28px 72px 40px;display:flex;flex-direction:column;align-items:center;gap:22px;outline:none;overscroll-behavior:auto;scroll-behavior:auto}
.hal{--z:1;width:calc(min(100%,880px) * var(--z));flex:none;aspect-ratio:16/9;background:var(--c);color:var(--ct);box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08);container-type:inline-size;position:relative;overflow:hidden}
.pdf-quick{position:absolute;left:12px;top:16px;display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:10px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.14);z-index:2}
.pdf-thumbs{width:0;overflow:auto;background:#fafafa;border-left:1px solid var(--garis);transition:width .22s cubic-bezier(.23,1,.32,1);display:flex;flex-direction:column;align-items:center;gap:14px}
.pdf.thumb-buka .pdf-thumbs{width:168px;padding:16px 0}
.pdf-thumbs button{width:118px;display:grid;gap:6px;justify-items:center;color:#666;font-size:11px}
.pdf-thumbs .tb{width:118px;aspect-ratio:16/9;overflow:hidden;box-shadow:0 0 0 1px var(--garis);border-radius:2px;position:relative}
.pdf-thumbs .tb .hal{position:absolute;left:0;top:0;width:880px;transform:scale(calc(118 / 880));transform-origin:0 0;box-shadow:none}
.pdf-thumbs button.on .tb{box-shadow:0 0 0 2px #1473e6}
.pdf-rail{width:48px;flex:none;background:#fff;border-left:1px solid var(--garis);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:10px 0}
.pr-atas,.pr-bawah{display:flex;flex-direction:column;align-items:center;gap:4px}
.pn-hal{display:grid;justify-items:center;gap:2px;margin-bottom:4px;font-variant-numeric:tabular-nums}
.pn-hal b{min-width:30px;text-align:center;padding:4px 0;border:1px solid var(--garis);border-radius:5px;font-weight:600}
.pn-hal span{font-size:11px;color:#8a8a8a}
.pn-garis{width:20px;height:1px;background:var(--garis);margin:4px 0}
/* isi slide: semua ukuran dalam cqi supaya sama di thumbnail, zoom, dan HP */
.slide{position:absolute;inset:0;padding:6.5cqi 7cqi;font-family:DMS;display:flex;flex-direction:column;justify-content:center}
.slide h3{font-family:DMD;font-weight:700;font-size:6.6cqi;line-height:1;letter-spacing:-.045em;margin:0 0 2.4cqi;max-width:11em}
.slide p{font-size:2.2cqi;line-height:1.45;margin:0;max-width:26em}
.slide .s-kecil{font-size:1.6cqi;opacity:.8;margin-top:2cqi;max-width:30em}
.s-no{font-family:DMD;font-weight:300;font-style:italic;font-size:3.4cqi;letter-spacing:-.04em;margin-bottom:2cqi}
.s-stk{position:absolute;height:auto;transform:rotate(var(--rt,0deg))}
.s-kaki{position:absolute;left:7cqi;bottom:4.5cqi;font-size:1.4cqi;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.s-sampul h3{font-size:9cqi}
.s-sampul p{font-size:2.8cqi}
.s-bw{display:block;width:9cqi;margin-bottom:3cqi}.s-bw svg{width:100%;height:auto;display:block}
.s-format{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqi;margin-top:1cqi}
.s-format>div{background:var(--c);color:var(--ct);border-radius:1.6cqi;padding:2.2cqi;min-height:17cqi;display:flex;flex-direction:column;gap:1.2cqi}
.s-format b{font-family:DMD;font-size:3cqi;letter-spacing:-.04em;line-height:1}
.s-format span{font-size:1.65cqi;line-height:1.4}
.s-langkah{list-style:none;margin:0;padding:0;display:grid;gap:1.6cqi;max-width:44cqi;counter-reset:l}
.s-langkah li{font-size:2cqi;line-height:1.4;padding-left:5cqi;position:relative;counter-increment:l}
.s-langkah li::before{content:counter(l);position:absolute;left:0;top:-.2cqi;width:3.4cqi;height:3.4cqi;border-radius:50%;background:var(--kun);color:var(--ink);font-weight:700;font-size:1.8cqi;display:grid;place-items:center}
.s-langkah b{display:block;font-size:2.4cqi}
.s-aksi{display:flex;gap:1.6cqi;margin-top:3cqi}
.s-btn{display:inline-flex;align-items:center;height:5.6cqi;padding:0 3cqi;border-radius:99px;background:var(--kun);color:var(--ink);font-weight:700;font-size:1.9cqi}
.s-btn2{background:transparent;color:#fff;box-shadow:inset 0 0 0 .25cqi rgba(255,255,255,.5)}
@media (max-width:760px){
  .pdf{border-radius:10px;font-size:12px}
  .pdf-tab>span:first-child,.pa-teks,.pa-kanan .pa-ik,.pdf-quick,.pdf-rail .pr-atas{display:none}
  .pa-cari{width:auto;flex:1;margin:0 8px 0 0}.pa-bagi{padding:0 10px}
  .pdf-badan{height:min(62svh,560px)}
  .pdf-isi{padding:14px 10px 24px;gap:12px}
  .pdf-rail{width:40px}
  .pdf.thumb-buka .pdf-thumbs{width:120px}
}
/* HP: halaman PDF jadi tegak 4:5 dan hurufnya membesar supaya terbaca */
@media (max-width:760px){.pdf-isi .hal{aspect-ratio:4/5}}
@container (max-width:560px){
  .slide{padding:9cqi 8cqi;justify-content:flex-start;padding-top:14cqi}
  .slide h3{font-size:11cqi}.s-sampul h3{font-size:14cqi}
  .slide p{font-size:4.6cqi}.s-sampul p{font-size:5.2cqi}.slide .s-kecil{font-size:3.6cqi}
  .s-no{font-size:6cqi}.s-kaki{font-size:2.8cqi;bottom:7cqi;left:8cqi}.s-bw{width:16cqi}
  .s-stk{width:30%!important;right:6%!important;bottom:8%!important;top:auto!important}
  .s-format{grid-template-columns:1fr 1fr;gap:3cqi}.s-format>div{min-height:24cqi;padding:4cqi;border-radius:3cqi}.s-format b{font-size:5.6cqi}.s-format span{font-size:3.4cqi}
  .s-langkah{max-width:none;gap:4cqi}.s-langkah li{font-size:3.8cqi;padding-left:9cqi}.s-langkah b{font-size:4.6cqi}.s-langkah li::before{width:6.4cqi;height:6.4cqi;font-size:3.4cqi}
  .s-aksi{flex-direction:column;align-items:flex-start;gap:3cqi}.s-btn{height:11cqi;padding:0 6cqi;font-size:4cqi}
}
@container (max-width:560px){.s-sampul .s-stk:nth-of-type(2){display:none}.s-langkah~.s-stk,.s-langkah+.s-stk{top:9%!important;bottom:auto!important;width:18%!important}}
.lencana{transition:opacity .2s ease}
html.pdf-tampak .lencana{opacity:0;pointer-events:none}
/* slide bercerita: foto penuh, dua kolom, polaroid, wajah tim */
.s-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-gelap{position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,19,22,.86) 0%,rgba(20,19,22,.55) 50%,rgba(20,19,22,.15) 100%)}
.s-atas-foto{position:relative;color:#fff}
.s-atas-foto h3{max-width:12em}
.s-terang{color:#fff}
.s-kaki.s-terang{opacity:.75}
.slide .s-besar{font-size:7.6cqi;max-width:13em}
.s-dua{display:grid;grid-template-columns:1.05fr 1fr;gap:5cqi;align-items:center;height:100%}
.s-dua h3{font-size:5.4cqi}
.s-dua p+p{margin-top:1.6cqi}
.s-orang3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqi;align-self:end;margin-bottom:-6.5cqi}
.s-org{margin:0;display:grid;justify-items:center;gap:.4cqi;text-align:center}
.s-org span{width:100%;aspect-ratio:3/4;display:flex;align-items:flex-end;justify-content:center;background:var(--kun);border-radius:2cqi 2cqi 0 0;overflow:hidden}
.s-org img{width:118%;height:auto;display:block}
.s-org b{font-size:2cqi;margin-top:1cqi}.s-org small{font-size:1.4cqi;opacity:.7;margin-bottom:7cqi}
.s-polar{margin:0;background:#fff;padding:1.4cqi 1.4cqi 5cqi;transform:rotate(var(--rt));box-shadow:0 2cqi 4cqi -1.5cqi rgba(0,0,0,.4);position:relative}
.s-polar img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.s-polar figcaption{position:absolute;left:1.8cqi;bottom:1.5cqi;font-family:DMS;font-weight:700;font-size:1.7cqi;color:var(--ink)}
.s-jarak,.s-cek{list-style:none;margin:2cqi 0 0;padding:0;display:grid;gap:1.3cqi;max-width:34em}
.s-jarak li,.s-cek li{font-size:2.3cqi;line-height:1.35;padding-left:3.4cqi;position:relative}
.s-jarak li::before{content:"×";position:absolute;left:0;color:var(--merah);font-weight:700}
.s-cek li::before{content:"✓";position:absolute;left:0;color:var(--kun);font-weight:700}
@container (max-width:560px){
  .s-dua{grid-template-columns:1fr;gap:5cqi;align-content:start;height:auto}
  .s-dua h3{font-size:9cqi}
  .s-orang3{margin-bottom:0;gap:3cqi}.s-org b{font-size:3.6cqi}.s-org small{font-size:2.8cqi;margin-bottom:0}
  .s-polar{width:78%;justify-self:center;padding:3cqi 3cqi 10cqi}.s-polar figcaption{font-size:3.6cqi;left:4cqi;bottom:3cqi}
  .slide .s-besar{font-size:11.5cqi}
  .s-jarak li,.s-cek li{font-size:4.4cqi;padding-left:6.5cqi}
  .s-gelap{background:linear-gradient(180deg,rgba(20,19,22,.85) 0%,rgba(20,19,22,.55) 60%,rgba(20,19,22,.3) 100%)}
}
/* HP: tinggi slide ikut isi supaya foto & wajah tidak terpotong */
@media (max-width:760px){.pdf-isi .hal{aspect-ratio:auto;min-height:calc((100vw - 70px) * 1.25)}.pdf-isi .hal .slide{position:relative;min-height:inherit}}
@container (max-width:560px){.slide>.s-stk{display:none}}
.s-stk3{display:flex;align-items:flex-end;justify-content:center;gap:1cqi}
.s-stk3 img{width:30%;height:auto;transform:rotate(var(--rt))}
.s-stk2 img:first-child{width:46%}.s-stk2 img+img{width:30%}
.s-polar2{position:relative;height:100%;display:grid;place-items:center}
.s-polar2 .s-polar{width:72%;grid-area:1/1}
.s-polar2 .s-polar:first-child{translate:-16% -14%}.s-polar2 .s-polar+.s-polar{translate:16% 16%}
@container (max-width:560px){.s-stk3 img{width:28%}.s-polar2{height:auto;padding:4cqi 0 8cqi}.s-polar2 .s-polar{width:70%!important}}
.s-polar2 .s-polar{width:60%}.s-polar2 .s-polar:first-child{translate:-28% -22%}.s-polar2 .s-polar+.s-polar{translate:26% 22%}
@container (max-width:560px){.s-polar2{padding:2cqi 0 14cqi}.s-polar2 .s-polar:first-child{translate:-16% 0}.s-polar2 .s-polar+.s-polar{translate:16% 30%}}

/* ===== Kelas MOTE: katalog satu kelas gratis + halaman Skill Tersembunyi ===== */
.ks-unggul{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,3vw,48px);align-items:center;background:var(--oranye);color:var(--ink);border-radius:calc(var(--r)*1.4);padding:clamp(22px,3vw,44px);max-width:var(--lebar);margin:0 auto clamp(40px,5vw,72px);transition:transform .25s cubic-bezier(.23,1,.32,1)}
.ks-unggul:hover{transform:translateY(-4px)}
.ks-teks small,.ks-info>small{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.ks-teks h2{margin:10px 0 12px}.ks-teks p{font-size:clamp(16px,1.25vw,19px);line-height:1.5;margin:0 0 18px;max-width:26em}
.ks-harga{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px}.ks-harga b{font-family:DMD;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.04em}.ks-harga span{font-size:14px;opacity:.75}
.ks-vis{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 20px 40px -20px rgba(35,34,38,.5)}
.ks-vis img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ks-main{position:absolute;left:50%;top:50%;translate:-50% -50%;width:72px;height:72px;border-radius:50%;background:var(--kun);color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.3)}.ks-main svg{width:30px;margin-left:4px}
.ks-grid{max-width:var(--lebar);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.ks-kartu{display:grid;gap:6px}.ks-ft{position:relative;border-radius:var(--r);overflow:hidden;display:block}.ks-ft img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s cubic-bezier(.23,1,.32,1)}
.ks-kartu:hover .ks-ft img{transform:scale(1.03)}.ks-ft em{position:absolute;left:10px;top:10px;font-style:normal;font-weight:700;font-size:13px;background:var(--kun);border-radius:99px;padding:4px 10px}
.ks-kartu small{font-size:12px;opacity:.65;margin-top:6px}.ks-kartu b{font-family:DMD;font-size:20px;letter-spacing:-.03em}.ks-oleh{font-size:13px;opacity:.7}
.ks{max-width:var(--lebar);margin:0 auto;padding-top:clamp(110px,10vw,140px)}
.ks-atas{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(22px,3vw,48px);align-items:start;margin-top:16px}
.ks-layar{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.ks-pv{width:100%;height:100%;display:block;object-fit:cover}
.ks-yt,.ks-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ks-cap{font-size:14px;opacity:.7;margin:10px 2px 0}
.ks-info h1{margin:8px 0 4px}.ks-sub{font-size:clamp(17px,1.3vw,20px);margin:0 0 18px;font-style:italic}
.ks-tombol{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ks-halo{font-weight:600;margin:14px 0 0}
.ks-dapet{margin-top:26px;border-top:1.5px solid rgba(35,34,38,.12);padding-top:18px}.ks-dapet b{font-family:DMD;font-size:18px}
.ks-dapet ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}.ks-dapet li{display:flex;gap:12px;align-items:center;font-size:15.5px}
.ks-dapet li span{flex:none;min-width:42px;height:30px;padding:0 8px;border-radius:8px;background:var(--oranye);color:var(--ink);font-size:12px;font-weight:700;display:grid;place-items:center}
.ks-bawah{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(22px,3vw,48px);margin-top:clamp(48px,6vw,90px)}
.ks-desk p{font-size:clamp(16px,1.2vw,18px);line-height:1.65;margin:14px 0 0}.ks-catat{opacity:.65;font-style:italic}
.ks-tiga{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.ks-tiga div{background:var(--c);color:#fff;border-radius:var(--r);padding:18px;display:grid;gap:6px}.ks-tiga b{font-family:DMD;font-size:18px;line-height:1.1}.ks-tiga span{font-size:14px;opacity:.9}
.ks-bab ol{list-style:none;padding:0;margin:16px 0 0;border-top:1px solid rgba(35,34,38,.12)}
.ks-bab li button{width:100%;display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;text-align:left;padding:11px 4px;border:0;border-bottom:1px solid rgba(35,34,38,.12);background:none;font:inherit;font-size:15px;color:inherit;cursor:pointer;transition:background .15s ease}
.ks-bab li button:hover{background:rgba(254,123,0,.08)}.ks-bab time{font-variant-numeric:tabular-nums;font-weight:700;opacity:.7}
.ks-terbuka .ks-bab .kunci{display:none}
.ks-modal{position:fixed;inset:0;z-index:100;background:rgba(35,34,38,.55);display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .18s ease-out}
.ks-modal.on{opacity:1}
.ks-m-in{position:relative;width:min(460px,100%);background:var(--putih);border-radius:calc(var(--r)*1.3);padding:clamp(22px,3vw,34px);transform:translateY(8px) scale(.98);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.ks-modal.on .ks-m-in{transform:none}
.ks-m-in small{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.65}.ks-m-in h3{margin:8px 0 18px}
.ks-tutup{position:absolute;right:14px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(35,34,38,.08);font-size:20px;cursor:pointer}
.ks-m-in form{display:grid;gap:12px}.ks-m-in label{display:grid;gap:5px;font-size:14px;font-weight:600}
.ks-m-in input{font:inherit;font-weight:400;font-size:16px;height:46px;padding:0 14px;border:1.5px solid rgba(35,34,38,.2);border-radius:12px;background:#fff}
.ks-m-in input:focus{outline:2px solid var(--oranye);outline-offset:1px;border-color:transparent}
.ks-m-in .btn{margin-top:6px;justify-self:start}.ks-kecil{font-size:12.5px;opacity:.65;margin:4px 0 0}
@media (max-width:900px){.ks-unggul,.ks-atas,.ks-bawah{grid-template-columns:1fr}.ks-unggul .ks-vis{order:-1}}
@media (max-width:560px){.ks-tiga{grid-template-columns:1fr}}
.ks-isi2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.ks-it{display:grid;gap:3px}.ks-it b{font-family:DMD;font-size:16px;margin-top:8px}.ks-it>span:last-child{font-size:13.5px;opacity:.7}
.ks-it-v,.ks-it-p{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--ink)}
.ks-it-v img{width:100%;height:100%;object-fit:cover;opacity:.85}
.ks-it-v i{position:absolute;left:50%;top:50%;translate:-50% -50%;width:40px;height:40px;border-radius:50%;background:var(--kun);color:var(--ink);display:grid;place-items:center}.ks-it-v i svg{width:16px;margin-left:2px}
.ks-it-p{background:#e9e3d6;display:grid;place-items:center}
.ks-it-p img{width:72%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;box-shadow:6px 6px 0 #fff,12px 12px 0 rgba(255,255,255,.6),0 10px 20px -8px rgba(0,0,0,.35);translate:-6px -6px}
.ks-it-p em{position:absolute;right:10px;bottom:10px;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:#d7373f;border-radius:4px;padding:2px 6px}
.ks-bab li button span{font-weight:500}
.ks-judul{font-size:clamp(34px,3.6vw,56px)!important;line-height:1.02}
.ks-asal{display:grid;gap:6px;margin:16px 0 4px;padding:16px 18px;border-radius:var(--r);background:var(--kun)}
.ks-asal b{font-family:DMD;font-size:16px}.ks-asal span{font-size:15px;line-height:1.55}
.ks-geser{max-width:var(--lebar);margin:0 auto clamp(40px,5vw,72px)}
.ks-gs-stk{display:flex;justify-content:center;align-items:center;gap:4%}.ks-gs-stk img{width:38%;transform:rotate(var(--rt))}
.ks-gs-poin{list-style:none;padding:0;margin:14px 0 22px;display:grid;gap:8px}.ks-gs-poin li{padding-left:22px;position:relative;font-size:clamp(15px,1.15vw,17px)}
.ks-gs-poin li::before{content:"✓";position:absolute;left:0;color:var(--kun);font-weight:700}
@media (min-width:761px){.ks-geser .gs{padding-left:clamp(70px,7vw,100px);padding-right:clamp(70px,7vw,100px)}}
.ks-geser .gs-ink .btn{--bt:var(--kun);--btt:var(--ink)}
/* tiket kelas: isi paket ditampilkan sebagai tiket bersobekan */
.ks-tiket{--lb:16px;position:relative;display:grid;grid-template-columns:auto 1fr;margin-top:26px;color:var(--ink);filter:drop-shadow(0 12px 20px rgba(35,34,38,.14))}
.ks-tiket>div{background:var(--kun);padding:18px 20px}
.tk-kiri{border-radius:16px 0 0 16px;display:grid;align-content:center;gap:2px;min-width:118px;
  -webkit-mask:radial-gradient(circle var(--lb) at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lb) at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--lb) at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lb) at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.tk-kanan{border-radius:0 16px 16px 0;background:#fff!important;display:grid;gap:10px;border-left:2px dashed rgba(35,34,38,.25);
  -webkit-mask:radial-gradient(circle var(--lb) at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lb) at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--lb) at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--lb) at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.ks-tiket small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.tk-kiri b{font-family:DMD;font-size:32px;letter-spacing:-.04em;line-height:1}.tk-kiri span{font-size:12.5px;opacity:.75;max-width:9em;line-height:1.3;margin-top:4px}
.tk-baris{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center}
.tk-baris b{display:block;font-family:DMD;font-size:16px}.tk-baris div span{font-size:13.5px;opacity:.7}
.tk-baris em{font-style:normal;font-weight:700;font-size:13px;opacity:.45;font-variant-numeric:tabular-nums}
.tk-ik{width:40px;height:40px;border-radius:11px;display:grid;place-items:center}
.tk-play{background:var(--ink);color:var(--kun)}.tk-play svg{width:16px;margin-left:2px}
.tk-pdf{background:#d7373f;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em}
@media (max-width:420px){.ks-tiket{grid-template-columns:1fr}.tk-kiri{border-radius:16px 16px 0 0;-webkit-mask:none;mask:none}.tk-kanan{border-radius:0 0 16px 16px;border-left:0;border-top:2px dashed rgba(35,34,38,.25);-webkit-mask:none;mask:none}}
.ks-meta{display:flex;flex-wrap:wrap;gap:4px 0;margin:10px 0 0;font-size:14px;font-weight:600}
.ks-meta span:not(:last-child)::after{content:"·";margin:0 8px;opacity:.4}
.ks-meta-k{font-size:14px!important;line-height:1.55!important;opacity:.65;margin:6px 0 18px!important;max-width:44em}
.ks-desk .ks-meta{font-size:14px;line-height:1.5;margin:10px 0 0}
/* halaman kelas: hero kuning + pita, babak berwarna */
.ks-hero{background:var(--kun);position:relative;overflow:hidden;padding-bottom:0}
.ks-hero .ks-in{padding-top:clamp(100px,9vw,124px);position:relative;z-index:2}
.ks-hero .pb{margin-top:-30px}
.ks-hero .ks-judul mark{background:var(--ink);color:var(--kun)}
.ks-hero .ks-cap{opacity:.75}
.ks-hero .btn{--bt:var(--ink);--btt:var(--kun)}
.ks-hero .ks-layar{box-shadow:0 30px 60px -28px rgba(35,34,38,.55)}
.ks-hero .tk-kiri{background:var(--ink)!important;color:var(--kun)}
.ks-hero .ks-tiket{margin-top:22px}
.ks-pengajar{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.ks-pengajar img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:top;background:#fff;border:2px solid var(--ink)}
.ks-pengajar b{display:block;font-size:15px}.ks-pengajar span{font-size:13px;opacity:.75}
.ks-sec2{background:var(--putih)}.ks-sec2 .ks{padding-top:0}
.ks-sec2 .ks-bawah{margin-top:0}
.ks-desk h2 .lekat{width:clamp(56px,5vw,80px)}
.bab-grup{margin-top:20px}
.bab-k{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px}
.bab-k::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c)}
.bab-grup ol{list-style:none;padding:0 0 0 5px;margin:0;border-left:2px solid var(--c)}
.bab-grup li button{grid-template-columns:52px 1fr 18px;padding:9px 4px 9px 14px;border-bottom:0}
.bab-grup .kunci{width:16px;opacity:.4}.bab-grup .kunci svg{width:16px;display:block}
.ks-bab>ol{display:none}
@media (max-width:900px){.ks-hero .pb{margin-top:0}}
@media (max-width:900px){
  .ks-hero .ks-atas{display:flex;flex-direction:column}
  .ks-hero .ks-pemutar{display:contents}
  .ks-hero .ks-layar{order:1}.ks-hero .ks-cap{order:2}.ks-hero .ks-info{order:3;margin-top:22px}.ks-hero .ks-tiket{order:4}
}
.ks-hero .ks-in{padding-left:var(--gut);padding-right:var(--gut);box-sizing:content-box}
@media (max-width:900px){.ks-hero .ks-in{box-sizing:border-box}.ks-hero .ks-layar,.ks-hero .ks-tiket{width:100%;align-self:stretch}.ks-hero .ks-tiket{box-sizing:border-box}}
/* v2: hero putih bersih, warna mulai di bagian isi (tinta + pita kuning) */
.ks-hero{background:var(--putih)}
.ks-hero .ks-judul mark{background:var(--kun);color:var(--ink)}
.ks-hero .btn{--bt:var(--kun);--btt:var(--ink)}
.ks-hero .tk-kiri{background:var(--kun)!important;color:var(--ink)}
.ks-hero .ks-in{padding-bottom:clamp(56px,6vw,90px)}
.ks-hero .ks-tiket{margin-top:26px;max-width:520px}
.ks-sec2.w-ink{padding-top:0}
.ks-sec2 .ks-pita{margin:0 calc(var(--gut) * -1) clamp(30px,4vw,60px)}
.w-ink .ks-desk p,.w-ink .ks-bab li button{color:rgba(255,255,255,.88)}
.w-ink .ks-meta{color:#fff}.w-ink .ks-meta-k{color:rgba(255,255,255,.7);opacity:1}
.w-ink .bab-k{color:#fff}.w-ink .ks-bab li button:hover{background:rgba(255,255,255,.06)}
.w-ink .ks-bab time{color:var(--kun);opacity:1}
.w-ink .bab-grup .kunci{color:#fff}
.ks-sec2.w-ink{background:var(--ink);color:#fff}
.ks-sec2.w-ink{background:var(--ungu)}.ks-sec2 .ks-bab time{color:var(--kun)}.ks-sec2 .ks-meta-k{color:rgba(255,255,255,.8)!important}
/* v3 bagian isi: latar krem terang, teks gelap; warna dibawa kartu babak */
.ks-sec2.ks-terang{background:var(--krem);color:var(--ink)}
.ks-terang .ks-desk p{color:var(--ink)}
.ks-terang .ks-meta-k{color:var(--ink)!important;opacity:.6}
.ks-terang .bab-grup{background:var(--c);border-radius:var(--r);padding:16px 14px 8px;margin-top:14px;color:var(--ink)}
.ks-terang .bab-grup[style*="0280EC"]{color:#fff}
.ks-terang .bab-k{color:inherit;margin:0 0 6px 4px}.ks-terang .bab-k::before{background:currentColor}
.ks-terang .bab-grup ol{border-left:0;padding:0}
.ks-terang .bab-grup li button{color:inherit;padding:10px 6px;border-top:1px solid rgba(35,34,38,.14);border-radius:0}
.ks-terang .bab-grup[style*="0280EC"] li button{border-top-color:rgba(255,255,255,.25)}
.ks-terang .ks-bab time{color:inherit;opacity:.7}
.ks-terang .bab-grup li button:hover{background:rgba(255,255,255,.25)}
.ks-terang .bab-grup .kunci{color:inherit;opacity:.5}
.ks-terang .ks-pita{margin-top:-60px}
/* v4 hero seimbang: judul selebar halaman, lalu video | kartu tiket setinggi video */
.ks-kepala{margin:18px 0 clamp(24px,3vw,40px);max-width:none}
.ks-kepala small{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.ks-kepala .ks-judul{font-size:clamp(36px,4.6vw,72px)!important;margin:10px 0 10px;max-width:16em}
.ks-kepala .ks-sub{font-size:clamp(17px,1.4vw,21px);margin:0;max-width:36em}
.ks-hero .ks-atas{grid-template-columns:1.7fr 1fr;align-items:stretch;margin-top:0}
.ks-kartu-beli{display:flex;flex-direction:column;border-radius:calc(var(--r)*1.2);overflow:hidden;background:#fff;box-shadow:0 24px 50px -30px rgba(35,34,38,.45)}
.kb-atas{background:var(--kun);padding:18px 22px;display:grid;gap:2px;position:relative;border-bottom:2px dashed rgba(35,34,38,.25)}
.kb-atas small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.kb-atas b{font-family:DMD;font-size:34px;letter-spacing:-.04em;line-height:1}.kb-atas span{font-size:13px;opacity:.75}
.kb-badan{padding:18px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.kb-badan .ks-pengajar{margin:0 0 4px}
.kb-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.kb-badan .tk-baris{grid-template-columns:40px 1fr}
.kb-badan .ks-tombol{margin-top:auto}.kb-badan .ks-tombol .btn{width:100%;justify-content:space-between}
@media (max-width:900px){.ks-hero .ks-atas{display:grid;grid-template-columns:1fr}.ks-hero .ks-pemutar{display:block}}
/* v5: judul rata tengah, video & kartu setinggi persis */
.ks-hero .remah{justify-content:center}
.ks-kepala{text-align:center;margin-left:auto;margin-right:auto}
.ks-kepala .ks-judul{margin-left:auto;margin-right:auto;max-width:14em}
.ks-kepala .ks-sub{margin:0 auto;max-width:34em}
.ks-hero .ks-atas{grid-template-columns:1.85fr 1fr;align-items:stretch;gap:clamp(16px,1.8vw,26px)}
.ks-hero .ks-pemutar{display:flex}.ks-hero .ks-layar{flex:1;aspect-ratio:auto;min-height:100%}
.ks-hero .ks-pv{height:100%}
.kb-atas{padding:14px 20px}.kb-atas b{font-size:28px}
.kb-badan{gap:10px;padding:16px 20px 20px}
.ks-hero > .ks > .ks-cap,.ks-in > .ks-cap{margin-top:12px}
@media (max-width:900px){.ks-hero .ks-layar{aspect-ratio:16/9;min-height:0}.ks-hero .ks-pemutar{display:block}}
@media (max-width:900px){.ks-hero .ks-atas{grid-template-columns:1fr!important;display:grid!important}.ks-hero .ks-pemutar{display:block!important}.ks-hero .ks-layar{aspect-ratio:16/9;min-height:0;width:100%}.ks-hero .ks-in>.ks-cap{order:0}}
/* halaman kelas gaya marketplace (pola sama dengan halaman barang MTGOODS) */
.ks-toko{padding-top:clamp(100px,9vw,124px)}
.ks-galeri{grid-template-columns:96px 1fr}
.ks-utama{border-radius:20px;overflow:visible}
.ks-utama .ks-layar{border-radius:20px}
.ks-gbr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.ks-ths button{position:relative;display:block;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;background:none;aspect-ratio:16/10}
.ks-ths button img{width:100%;height:100%;object-fit:cover;display:block}
.ks-ths button.on{border-color:var(--ink)}
.ks-ths i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;color:#fff;font-size:14px;background:rgba(0,0,0,.25)}
.ks-sub2{font-size:16px;line-height:1.55;opacity:.8;margin:0 0 14px;font-style:italic}
.ks-vrs span{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:12px;padding:8px 12px;font-size:14px;font-weight:600}
.ks-vrs b{font-size:10px;background:var(--ink);color:var(--kun);border-radius:5px;padding:2px 5px}
.ks-penjual{display:flex;align-items:center;gap:12px;border:1.5px solid #E8E8E5;border-radius:14px;padding:12px 14px;margin:18px 0 0}
.ks-penjual img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top;background:var(--kun)}
.ks-penjual b{display:block;font-size:15px}.ks-penjual span{font-size:13px;opacity:.65}
.ks-penjual a{margin-left:auto;font-size:13px;font-weight:700;border:1.5px solid var(--ink);border-radius:99px;padding:7px 12px}
@media (max-width:900px){.ks-galeri{grid-template-columns:1fr}.ks-ths button{width:84px;flex:none}}
.ks-klip{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink)}
.ks-ths{max-height:none}
.ks-ths button[data-jenis=klip] img{object-position:center 30%}
.ks-terang{padding-top:clamp(40px,5vw,72px)!important}
@media (min-width:901px){.ks-galeri .g-ths{display:grid;grid-template-columns:1fr;gap:8px;align-content:start}.ks-ths button{aspect-ratio:16/10}}
/* galeri: thumbnail di bawah media utama, 4 kolom */
.ks-galeri{grid-template-columns:1fr!important}
.ks-galeri .g-utama{grid-column:1;grid-row:1}
.ks-galeri .g-ths{grid-column:1!important;grid-row:2!important;display:grid!important;grid-template-columns:repeat(4,1fr);gap:8px}
.ks-ths button{width:auto!important;border:2px solid #E8E8E5;aspect-ratio:16/10}
.ks-ths button.on{border-color:var(--ink)}
.ks-ths button[data-th*="klip-02"] img,.ks-ths button[data-th*="klip-04"] img{object-position:center 0}
.ks-galeri .g-ths{grid-template-columns:repeat(5,1fr)!important}
/* thumbnail galeri kecil (gaya marketplace) */
.ks-galeri .g-ths{display:flex!important;flex-wrap:wrap;gap:8px}
.ks-ths button{width:88px!important;flex:none;aspect-ratio:16/10;border-radius:10px}
.ks-ths i{font-size:11px}
/* supergraphic minor: pita tipis pemisah bagian + dua stiker di tepi */
.ks-toko{position:relative}
.ks-hias{position:absolute;pointer-events:none;z-index:0;opacity:.95}
.ks-hias.h1{width:46px;right:max(var(--gut),calc((100vw - var(--lebar))/2 - 10px));top:clamp(96px,8.5vw,118px);transform:rotate(12deg)}
.ks-hias.h2{width:92px;left:max(4px,calc((100vw - var(--lebar))/2 - 110px));top:58%;transform:rotate(-8deg)}
.ks-toko .br2{position:relative;z-index:1}
.ks-garis{background:linear-gradient(var(--putih) 50%,var(--krem) 50%);overflow:hidden}
.ks-pita-tipis{height:110px;margin:0!important}.ks-pita-tipis svg{height:100%;width:100%}
@media (max-width:1200px){.ks-hias.h2{display:none}}
@media (max-width:760px){.ks-hias.h1{display:none}.ks-pita-tipis{height:70px}}
.ks-galeri .g-ths{flex-direction:row!important}
.ks-pita-tipis{position:relative;height:120px!important}
.ks-pita-tipis svg{position:absolute;left:0;top:50%;width:100%!important;height:auto!important;transform:translateY(-50%) scaleY(.42)}
.ks-pita-tipis .stk{top:6%!important}
@media (max-width:760px){.ks-pita-tipis{height:70px!important}}
.ks-garis{background:var(--krem)!important}.ks-garis + .ks-terang{padding-top:clamp(20px,3vw,40px)!important}
.ks-terang .ks-bawah{align-items:start}.ks-terang .ks-desk>h2,.ks-terang .ks-bab>h2{margin-top:0}
/* harga gratis sebagai stiker tag: latar kuning, tepi putih tebal, sedikit miring (gaya stiker MOTE) */
.ks-tag-gratis{display:inline-flex;align-items:center;gap:8px;margin:2px 0 18px;padding:8px 16px 8px 12px;background:var(--kun);color:var(--ink);font-family:DMD;font-weight:700;font-size:20px;letter-spacing:-.02em;border-radius:12px;transform:rotate(-3deg);box-shadow:0 0 0 4px #fff,0 6px 14px -4px rgba(35,34,38,.35)}
.ks-tag-gratis svg{width:20px;height:20px}
/* stiker garis kecil penghias (tanda-*), di ruang kosong, tidak menimpa isi */
.ks-sec2{position:relative}
.ks-hias.h3{width:40px;left:max(var(--gut),calc((100vw - var(--lebar))/2));top:clamp(640px,52vw,760px);transform:rotate(-10deg)}
.ks-hias.h4{width:70px;left:calc(max(var(--gut),calc((100vw - var(--lebar))/2)) + 300px);top:clamp(680px,55vw,800px);transform:rotate(8deg)}
.ks-hias.h5{width:44px;left:max(var(--gut),calc((100vw - var(--lebar))/2));bottom:18%;transform:rotate(14deg)}
.ks-hias.h6{width:84px;left:calc(max(var(--gut),calc((100vw - var(--lebar))/2)) + 260px);bottom:30%;transform:rotate(-6deg)}
.ks-hias.h7{width:38px;right:max(16px,calc((100vw - var(--lebar))/2 - 60px));top:8%;transform:rotate(20deg)}
@media (max-width:900px){.ks-hias.h3,.ks-hias.h4,.ks-hias.h5,.ks-hias.h6{display:none}}
@media (max-width:900px){.ks-hias.h7{top:6px;right:12px;width:30px}}
@media (max-width:900px){.ks-hias.h7{display:none}}
/* babak isi video bisa dibuka-tutup */
.ks-terang summary.bab-k{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;margin:0;padding:4px 4px 10px}
.ks-terang summary.bab-k::-webkit-details-marker{display:none}
.ks-terang summary.bab-k em{margin-left:auto;font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;font-size:13px;opacity:.7}
.ks-terang summary.bab-k::after{content:"+";font-size:20px;line-height:1;font-weight:600;margin-left:10px}
.ks-terang details[open]>summary.bab-k::after{content:"−"}
.ks-terang details.bab-grup:not([open]){padding-bottom:8px}

/* ===== Hero MOTE Kreatif: kinetic hook (kunjungan pertama = jatah delight) ===== */
.hero-main{position:relative;overflow:hidden;isolation:isolate}
.hero-main>*:not(.hm-langit):not(.pb){position:relative;z-index:2}
/* kata naik bergiliran */
.hm-judul .ln>span{transform:none!important;transition:none!important}
.hm-k{display:inline-block;transform:translateY(110%) rotate(6deg);opacity:0;animation:hmKata .9s cubic-bezier(0.23,1,0.32,1) forwards;animation-delay:calc(.15s + var(--i) * .06s)}
@keyframes hmKata{to{transform:none;opacity:1}}
/* blok sorot "brand growth." menyapu dari kiri, lalu grafik tumbuh di dalamnya */
.hm-mark{position:relative;display:inline-block;clip-path:inset(0 100% 0 0);animation:hmSapu .7s cubic-bezier(0.77,0,0.175,1) .85s forwards}
@keyframes hmSapu{to{clip-path:inset(0 0 0 0)}}
.hm-tumbuh{display:inline-flex;align-items:flex-end;gap:.06em;height:.62em;margin-right:.22em;vertical-align:.02em}
.hm-tumbuh i{width:.13em;border-radius:.04em;background:var(--kun);height:100%;transform:scaleY(0);transform-origin:bottom;animation:hmBatang .6s cubic-bezier(0.23,1,0.32,1) forwards}
.hm-tumbuh i:nth-child(1){--h:.3;animation-delay:1.45s}.hm-tumbuh i:nth-child(2){--h:.5;animation-delay:1.55s}.hm-tumbuh i:nth-child(3){--h:.72;animation-delay:1.65s}.hm-tumbuh i:nth-child(4){--h:1;animation-delay:1.75s}
@keyframes hmBatang{to{transform:scaleY(var(--h))}}
/* stiker beterbangan: muncul bergiliran, lalu mengapung pelan; ikut kursor (paralaks, diatur js) */
.hm-langit{position:absolute;inset:0;z-index:1;pointer-events:none}
.hm-stk{position:absolute;left:var(--x);top:var(--y);width:var(--w);translate:-50% -50%;transform:translate3d(var(--px,0),var(--py,0),0)}
.hm-stk img{display:block;width:100%;height:auto;opacity:0;transform:rotate(var(--rt)) scale(.7);animation:hmMuncul .7s cubic-bezier(0.23,1,0.32,1) forwards,hmApung var(--f) ease-in-out calc(var(--d) + .7s) infinite alternate;animation-delay:var(--d),calc(var(--d) + .7s)}
@keyframes hmMuncul{to{opacity:1;transform:rotate(var(--rt)) scale(1)}}
@keyframes hmApung{from{opacity:1;transform:rotate(var(--rt)) translateY(0)}to{opacity:1;transform:rotate(calc(var(--rt) * -.6)) translateY(-14px)}}
/* tombol: sedikit melompat waktu ditekan */
.hero-main .btn:active{transform:scale(.97)}
@media (max-width:760px){.hm-stk{--w:52px!important}.hm-stk:nth-child(n+5){display:none}.hm-stk{top:calc(var(--y) * .9)}}
@media (prefers-reduced-motion:reduce){
  .hm-k,.hm-mark,.hm-tumbuh i,.hm-stk img{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .hm-tumbuh i{transform:scaleY(var(--h))!important}
  .hm-stk img{transform:rotate(var(--rt))!important}
}
@media (max-width:760px){.hm-stk:nth-child(n+3){display:none}}

/* ===== Hero MOTE Kreatif v2: blok diagonal + pita simpul besar + ilustrasi orang yang bergerak (acuan Gigs, Behance) ===== */
.hk{position:relative;min-height:max(100svh,720px);background:var(--putih);overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1fr 1fr}
.hk-blok{position:relative;z-index:1;background:var(--kun);clip-path:polygon(0 0,100% 0,82% 100%,0 100%);padding:clamp(110px,10vw,150px) clamp(28px,4vw,72px) clamp(28px,3vw,44px);display:flex;flex-direction:column;margin-right:-14%}
.hk-lead{font-style:italic;font-size:15px;margin:0 0 18px;opacity:.8}
.hk-judul{margin:0;font-family:DMD;font-weight:700;letter-spacing:-.05em;color:var(--ink)}
.hk-kecil{display:block;font-size:clamp(20px,1.9vw,30px);line-height:1.15;letter-spacing:-.03em;max-width:14em;margin-bottom:.5em}
.hk-besar{display:block;font-size:clamp(76px,10.8vw,190px);line-height:.84;letter-spacing:-.065em}
.hk-besar>span{display:block}
.hk-b2{color:var(--ink);background:none}
.hk-idx{margin-top:auto;display:flex;gap:28px;font-size:14px}
.hk-kanan{position:relative;z-index:3;grid-column:2;padding:clamp(110px,10vw,150px) clamp(28px,4vw,72px) 0 clamp(60px,8vw,140px);display:flex;flex-direction:column;align-items:flex-start;gap:22px;pointer-events:none}
.hk-kanan>*{pointer-events:auto}
.hk-desk{font-size:clamp(17px,1.35vw,21px);line-height:1.5;margin:0;max-width:24em}
.hk-aksi{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hk-pita{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hk-garis{stroke-dasharray:1;stroke-dashoffset:1;animation:hkGaris 1.6s cubic-bezier(0.77,0,0.175,1) .2s forwards}
@keyframes hkGaris{to{stroke-dashoffset:0}}
/* figur */
.hk-org{position:absolute;margin:0;z-index:4;transform:translate3d(var(--px,0),var(--py,0),0)}
.hk-org>.pup{display:block;position:relative;opacity:0;transform:translateY(24px) scale(.94);animation:hkMasuk .8s cubic-bezier(0.23,1,0.32,1) var(--d) forwards}
@keyframes hkMasuk{to{opacity:1;transform:none}}
.pup img{display:block;width:100%;height:auto}
.pup .pup-kepala{position:absolute;inset:0}
.o-musik{width:clamp(220px,22vw,380px);left:52%;top:46%}
.o-jalan{width:clamp(120px,11vw,200px);left:82%;top:40%}
.o-foto{width:clamp(200px,19vw,330px);left:60%;bottom:-2%}
.o-gambar{width:clamp(140px,12vw,210px);left:84%;bottom:4%}
/* boneka potong: kepala dipisah lewat clip-path, berputar di titik leher */
.o-musik .pup-badan{clip-path:polygon(0 0,52% 0,52% 27%,60% 30%,72% 33%,84% 31%,84% 0,100% 0,100% 100%,0 100%)}
.o-musik .pup-kepala{clip-path:polygon(52% 0,84% 0,84% 31%,72% 33%,60% 30%,52% 27%);transform-origin:70% 31%;animation:hkAngguk .52s ease-in-out 1.4s infinite alternate}
@keyframes hkAngguk{from{transform:rotate(-2deg)}to{transform:rotate(4deg) translateY(1.5%)}}
.o-foto .pup-badan{clip-path:polygon(0 0,52% 0,52% 19%,58% 21%,66% 21%,72% 18%,72% 0,100% 0,100% 100%,0 100%)}
.o-foto .pup-kepala{clip-path:polygon(52% 0,72% 0,72% 18%,66% 21%,58% 21%,52% 19%);transform-origin:62% 20%;animation:hkToleh 2.6s ease-in-out 1.6s infinite alternate}
@keyframes hkToleh{0%,40%{transform:rotate(0)}60%,100%{transform:rotate(-7deg)}}
.o-gambar .pup-badan{clip-path:polygon(0 0,36% 0,36% 23%,46% 25%,56% 25%,62% 22%,62% 0,100% 0,100% 100%,0 100%)}
.o-gambar .pup-kepala{clip-path:polygon(36% 0,62% 0,62% 22%,56% 25%,46% 25%,36% 23%);transform-origin:50% 24%;animation:hkMiring 3.4s ease-in-out 1.8s infinite alternate}
@keyframes hkMiring{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
/* jalan: langkah naik-turun + goyang badan */
.pup.jalan>img{transform-origin:50% 100%;animation:hkLangkah .46s ease-in-out 1.6s infinite alternate}
@keyframes hkLangkah{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-3.5%) rotate(1.5deg)}}
.uap{position:absolute;left:10%;top:13%;width:16%;height:14%}
.uap i{position:absolute;bottom:0;left:30%;width:3px;height:60%;border-radius:3px;background:#F47B20;opacity:0;animation:hkUap 2.4s ease-out infinite}
.uap i:nth-child(2){left:55%;animation-delay:.8s}.uap i:nth-child(3){left:5%;animation-delay:1.6s}
@keyframes hkUap{0%{opacity:0;transform:translateY(0) scaleY(.4)}30%{opacity:.7}100%{opacity:0;transform:translateY(-120%) translateX(30%) scaleY(1)}}
/* not musik naik dari headphone */
.not{position:absolute;left:58%;top:4%;font-family:DMD;font-weight:700;font-size:clamp(18px,1.6vw,28px);color:var(--hijau);opacity:0;animation:hkNot 2.6s ease-out infinite}
.n2{animation-delay:.9s;left:66%}.n3{animation-delay:1.8s;left:61%}
@keyframes hkNot{0%{opacity:0;transform:translate(0,10px) rotate(-10deg)}20%{opacity:1}100%{opacity:0;transform:translate(26px,-60px) rotate(14deg)}}
/* kilat kamera */
.kilat{position:absolute;left:22%;top:22%;width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff 18%,rgba(252,209,45,.85) 34%,rgba(252,209,45,0) 70%);opacity:0;transform:translate(-50%,-50%) scale(.4);animation:hkKilat 3.2s ease-out 2s infinite}
@keyframes hkKilat{0%,82%{opacity:0;transform:translate(-50%,-50%) scale(.4)}86%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
@media (max-width:900px){
  .hk{grid-template-columns:1fr;min-height:0}
  .hk-blok{clip-path:polygon(0 0,100% 0,100% 88%,0 100%);margin-right:0;padding-bottom:70px}
  .hk-idx{display:none}
  .hk-kanan{grid-column:1;padding:28px var(--gut) 0;pointer-events:auto}
  .hk-pita{position:relative;inset:auto;height:auto;aspect-ratio:16/10;margin-top:-10px}
  .o-musik{width:50%;left:4%;top:auto;bottom:6%}.o-jalan{width:26%;left:66%;top:auto;bottom:30%}.o-foto,.o-gambar{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hk-garis{animation:none;stroke-dashoffset:0}
  .hk-org>.pup{animation:none;opacity:1;transform:none}
  .pup-kepala,.pup.jalan>img,.uap i,.not,.kilat{animation:none!important}
  .not,.uap,.kilat{display:none}
}
.o-musik{left:55%;top:47%}
.o-foto{left:73%;bottom:-3%;width:clamp(190px,17vw,300px)}
.o-jalan{left:86%;top:30%;width:clamp(110px,9.5vw,170px)}
@media (max-width:900px){.o-musik{left:4%;top:auto}.o-jalan{left:68%;top:auto}}
.hk-panggung{position:absolute;inset:0;z-index:2;pointer-events:none}
.hk-panggung .hk-org{pointer-events:auto}
.o-foto{bottom:2%}
@media (max-width:900px){
  .hk-panggung{position:relative;inset:auto;aspect-ratio:1/1.05;margin-top:10px}
  .hk-panggung .hk-pita{position:absolute;inset:0;height:100%;aspect-ratio:auto;margin:0}
  .o-musik{width:56%;left:3%;bottom:4%;top:auto}
  .o-jalan{width:28%;left:68%;top:6%;bottom:auto}
}
@media (min-width:901px) and (max-width:1180px){.o-jalan{top:38%}}
.pup .pup-badan{position:absolute;inset:0}

/* ===== Hero MOTE Kreatif: dua tangan dari pojok (acuan "Arte vs. Diseño Gráfico"), lengan selalu keluar tepi layar ===== */
.ht{position:relative;height:100svh;min-height:600px;background:var(--kun);overflow:hidden;display:grid;place-items:center;isolation:isolate}
.ht-garis{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.ht-garis path,.ht-garis line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ht .tg{position:absolute;left:0;top:0;z-index:2;max-width:none;pointer-events:none;will-change:transform;filter:drop-shadow(0 18px 26px rgba(35,34,38,.16))}
.ht-cahaya{position:absolute;z-index:1;left:var(--mx,50%);top:var(--my,62%);width:clamp(220px,26vw,420px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,250,215,.65) 30%,rgba(252,209,45,0) 70%);opacity:0;transform:scale(.3)}
.ht-judul{position:relative;z-index:3;margin:0;font-family:DMD;font-weight:700;font-size:clamp(28px,3.2vw,54px);letter-spacing:-.04em;line-height:1.1;display:flex;align-items:center;gap:.3em;flex-wrap:wrap;justify-content:center;text-align:center;padding:0 var(--gut)}
.ht-meet{display:inline-grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:var(--ink);color:var(--kun);font-family:DMS;font-style:italic;font-weight:600;font-size:.6em;letter-spacing:-.02em}
.ht-growth{flex-basis:100%;display:block;height:0;overflow:visible;color:var(--hijau);font-size:.7em;opacity:0;transform:translateY(.4em);transition:opacity .8s ease,transform .8s cubic-bezier(0.23,1,0.32,1)}
.ht.satu .ht-growth{opacity:1;transform:translateY(.25em)}
.ht.satu .ht-cahaya{animation:htCahaya 1.8s cubic-bezier(0.23,1,0.32,1) forwards}
@keyframes htCahaya{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.1)}100%{opacity:.6;transform:scale(1)}}
.ht-kaki{position:absolute;left:var(--gut);bottom:clamp(18px,3vh,32px);z-index:3;margin:0;display:flex;gap:clamp(24px,4vw,64px);font-size:14px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.ht-growth{transition:none}.ht.satu .ht-cahaya{animation:none;opacity:.6;transform:none}}

.ht-meet{width:2.4em;height:2.4em;font-size:.5em}
.ht-judul{padding:0 calc(var(--gut) + 14px)}
.ht-meet{width:2.9em;height:2.9em;font-size:.44em}
.ht-kaki{left:auto;right:calc(var(--gut) + 110px)}@media (max-width:760px){.ht-kaki{right:var(--gut);bottom:auto;top:84px}}

/* tali dari pensil & stylus masuk ke lingkaran "meet", lalu terikat jadi simpul logo MOTE */
.ht-meet{position:relative;width:2.2em;height:2.2em;font-size:.62em;display:inline-grid;place-items:center;overflow:visible}
.ht-simpul{width:72%;display:block;color:var(--kun)}
.ht-simpul svg{width:100%;height:auto;display:block;overflow:visible}
.ht-simpul path{fill:transparent;stroke:currentColor;stroke-width:.35;stroke-dasharray:var(--L,200);stroke-dashoffset:var(--L,200)}
.ht.ikat .ht-simpul path{transition:stroke-dashoffset .9s cubic-bezier(0.77,0,0.175,1),fill .4s ease .75s;stroke-dashoffset:0;fill:currentColor}
.ht-meet em{position:absolute;top:100%;left:50%;translate:-50% 0;margin-top:.25em;font-family:DMS;font-style:italic;font-weight:600;font-size:.55em;letter-spacing:0;color:var(--ink);opacity:0;transition:opacity .4s ease .9s,transform .5s cubic-bezier(0.23,1,0.32,1) .9s;transform:translateY(-6px)}
.ht.ikat .ht-meet em{opacity:1;transform:none}
.ht.ikat .ht-meet{animation:htDenyut .5s cubic-bezier(0.34,1.56,0.64,1) .7s}
@keyframes htDenyut{50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.ht-simpul path{stroke-dashoffset:0;fill:currentColor}.ht-meet em{opacity:1;transform:none}}
.ht-kaki{right:auto;left:var(--gut)}@media (max-width:760px){.ht-kaki{display:none}}

/* simpul dibentuk oleh tali (svg), bukan logo yang ditempel: tempat "meet" dikosongkan */
.ht-meet{background:none!important;width:2.8em;height:1.4em;font-size:1em;border-radius:0;animation:none!important}
.ht-cahaya{z-index:0}.ht-garis{z-index:1}
@media (max-width:760px){.ht-judul{flex-wrap:nowrap;white-space:nowrap;font-size:clamp(20px,6.4vw,30px);gap:.2em}}
.ht-kaki{left:auto!important;right:calc(var(--gut) + 110px)!important}
/* kartu otak kanan/kiri: tangan yang sama dengan hero, saling menunjuk ke "meet" */
.cp-k{position:relative}
.cp-tangan{position:absolute;pointer-events:none;height:auto;filter:drop-shadow(0 10px 16px rgba(35,34,38,.18));z-index:2}
.cp-t1{width:clamp(170px,17vw,260px);right:-8%;bottom:-20%;transform:rotate(-8deg)}
.cp-t2{width:clamp(150px,15vw,230px);left:-10%;top:-26%;transform:rotate(6deg)}
@media (max-width:760px){.cp-t1{width:150px;right:-4%;bottom:-16%}.cp-t2{width:130px;left:auto;right:-4%;top:-20%}}
.cp{margin-top:clamp(110px,10vw,150px)!important;margin-bottom:clamp(90px,9vw,130px)}
.cp-t1{width:clamp(170px,16vw,240px);right:-4%;bottom:auto;top:calc(100% - 14px);transform:rotate(-4deg)}
.cp-t2{width:clamp(150px,14vw,210px);left:-4%;top:auto;bottom:calc(100% - 14px);transform:rotate(4deg)}
@media (max-width:760px){.cp-t1{width:150px;right:2%;top:calc(100% - 10px)}.cp-t2{width:130px;left:auto;right:2%;bottom:calc(100% - 10px)}.cp{margin-bottom:100px}}
.cp{margin-top:clamp(150px,13vw,190px)!important;margin-bottom:clamp(150px,13vw,190px)!important}@media (max-width:760px){.cp{margin-top:150px!important;margin-bottom:150px!important}.cp-t2{bottom:calc(100% - 6px)}}
/* "MOTE" di ujung kiri bawah, "Kreatif" di ujung kanan bawah */
.ht-ujung{position:absolute;bottom:clamp(18px,3vh,32px);z-index:4;margin:0;font-family:DMS;font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--ink);background:var(--kun);padding:2px 6px;border-radius:4px}
.ht-ujung.kiri{left:var(--gut)}.ht-ujung.kanan{right:var(--gut)}
html.hero-tampak .lencana{opacity:0;pointer-events:none}
.lencana{transition:opacity .25s ease}
@media (max-width:760px){
  .cp{margin-top:130px!important;margin-bottom:130px!important}
  .cp-t1{width:150px!important;left:auto;right:4%!important;top:auto!important;bottom:calc(100% - 8px)!important;transform:rotate(-6deg)}
  .cp-t2{width:140px!important;left:4%!important;right:auto!important;bottom:auto!important;top:calc(100% - 8px)!important;transform:rotate(4deg)}
  .cp-k h3,.cp-k p,.cp-k ul{position:relative;z-index:3}
}
.ht-ujung{background:none;padding:0}
.ht-ujung{bottom:auto;top:50%;translate:0 -50%;z-index:5}
@media (max-width:760px){.ht-ujung{font-size:13px}.ht-ujung.kiri{translate:0 calc(-50% - 34px)}.ht-ujung.kanan{translate:0 calc(-50% + 34px)}}
/* logogram MOTE di ujung judul */
.lekat-bow{display:block;color:var(--ink)}.lekat-bow svg{width:100%;height:auto;display:block}
/* kartu otak kanan/kiri: tangan keluar dari BALIK kartu, cuma jari yang muncul di celah tengah dan menunjuk "meet" */
.cp{position:relative;column-gap:clamp(70px,9vw,140px);max-width:1040px;margin-top:clamp(40px,4.6vw,70px)!important;margin-bottom:0!important}
.cp>.cp-k,.cp>.cp-m{position:relative;z-index:1}
.cp-m{margin:0!important;justify-self:center}
.cp-tg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cp-tg .cp-tangan{position:absolute;width:var(--w);top:auto;bottom:auto;right:auto;transform:none;filter:drop-shadow(0 8px 14px rgba(35,34,38,.16))}
.cp-tg .cp-t1{--w:clamp(260px,26vw,380px);left:calc(50% - 28px - var(--w) * .977);top:calc(66% - var(--w) * .7016 * .389)}
.cp-tg .cp-t2{--w:clamp(230px,23vw,340px);left:calc(50% + 28px - var(--w) * .028);top:calc(34% - var(--w) * .8217 * .956)}
.cp-m{rotate:-4deg}
@media (max-width:760px){.cp-tg{display:none}.cp{column-gap:0;margin-bottom:0!important}.cp-m{margin:-14px 0!important}}
.cp{column-gap:clamp(40px,4vw,64px);max-width:1120px}
.cp-tg .cp-t1{--w:clamp(250px,23vw,340px);left:calc(50% - clamp(62px,5.6vw,80px) - var(--w) * .977);top:calc(70% - var(--w) * .7016 * .389)}
.cp-tg .cp-t2{--w:clamp(220px,20vw,300px);left:calc(50% + clamp(62px,5.6vw,80px) - var(--w) * .028);top:calc(30% - var(--w) * .8217 * .956)}
.cp{column-gap:clamp(70px,7vw,110px);max-width:1260px}
.cp-tg .cp-t1{--w:clamp(300px,27vw,400px);left:calc(50% - clamp(66px,5.4vw,78px) - var(--w) * .977);top:calc(66% - var(--w) * .7016 * .389)}
.cp-tg .cp-t2{--w:clamp(270px,24vw,360px);left:calc(50% + clamp(66px,5.4vw,78px) - var(--w) * .028);top:calc(36% - var(--w) * .8217 * .956)}
@media (max-width:1100px){.cp{column-gap:56px}}
/* ukuran & titik ujung dihitung supaya seluruh tangan tetap di dalam tinggi kartu (tidak terpotong tepi) */
.cp-tg .cp-t1{--w:clamp(220px,19vw,270px);top:calc(62% - var(--w) * .7016 * .389)}
.cp-tg .cp-t2{--w:clamp(170px,14vw,200px);top:calc(52% - var(--w) * .8217 * .956)}
.cp-m{z-index:2}
.kp-bow{display:block;width:clamp(56px,5vw,80px);margin:0 auto 18px;color:var(--ink)}.kp-bow svg{width:100%;height:auto;display:block}
/* tangan di DEPAN kartu, utuh terlihat; lengan keluar dari pojok kartunya masing-masing, jari menunjuk "meet" */
.cp{margin-top:clamp(170px,14vw,220px)!important;margin-bottom:clamp(120px,10vw,160px)!important}
.cp-tg{overflow:visible;z-index:3}
.cp-tg .cp-t1{--w:clamp(260px,23vw,340px);left:calc(50% - clamp(66px,5.4vw,78px) - var(--w) * .977);top:calc(64% - var(--w) * .7016 * .389)}
.cp-tg .cp-t2{--w:clamp(250px,21vw,310px);left:calc(50% + clamp(66px,5.4vw,78px) - var(--w) * .028);top:calc(34% - var(--w) * .8217 * .956)}
.ht-wm{display:block;height:15px}.ht-wm svg{height:100%;width:auto;display:block}
/* beri ruang tangan di dalam kartu supaya tidak menimpa teks */
.cp>.cp-k:first-of-type>*:not(.cp-tangan){max-width:58%}
.cp>.cp-k:last-of-type{padding-top:clamp(96px,8vw,120px)}
.cp-k{min-height:clamp(300px,24vw,350px)}
.cp-tg .cp-t1{--w:clamp(240px,21vw,310px);top:calc(60% - var(--w) * .7016 * .389)}
.cp-tg .cp-t2{--w:clamp(230px,19vw,280px);top:calc(36% - var(--w) * .8217 * .956)}
@media (max-width:760px){.cp>.cp-k:first-of-type>*{max-width:none}.cp>.cp-k:last-of-type{padding-top:clamp(22px,2.6vw,38px)}.cp-k{min-height:0}.ht-wm{height:12px}}
.cp-k[style*="oranye"]>*{max-width:56%}
.cp-tg .cp-t1{top:calc(70% - var(--w) * .7016 * .389)}
@media (max-width:760px){.cp-k[style*="oranye"]>*{max-width:none}}
.cp-k[style*="ungu"]{padding-top:clamp(120px,10vw,140px)}
@media (max-width:1180px){.cp-tg .cp-t1{--w:220px}.cp-tg .cp-t2{--w:200px}.cp-k[style*="oranye"]>*{max-width:52%}}
@media (max-width:760px){.cp-k[style*="ungu"]{padding-top:clamp(22px,2.6vw,38px)}.cp-k[style*="oranye"]>*{max-width:none}}
.cp-tg .cp-t2{top:calc(24% - var(--w) * .8217 * .956)}.cp-k[style*="ungu"]{padding-top:clamp(110px,9vw,130px)}@media (max-width:760px){.cp-k[style*="ungu"]{padding-top:clamp(22px,2.6vw,38px)}}
/* kartu didempetkan; posisi tangan dihitung js dari letak "meet" supaya jari benar-benar menyentuh */
.cp{column-gap:clamp(18px,2vw,30px);max-width:1180px;margin-top:clamp(120px,10vw,150px)!important;margin-bottom:clamp(70px,6vw,100px)!important}
.cp-tg .cp-tangan{left:var(--x,0)!important;top:var(--y,0)!important}
#kenal .kepala{margin-bottom:0}
@media (min-width:761px){
  .cp-k[style*="ungu"]{padding-top:clamp(170px,13vw,190px)!important}
  .cp-k[style*="oranye"]{padding-bottom:clamp(110px,9vw,130px)}
  .cp-k[style*="oranye"]>*{max-width:62%}
}
@media (min-width:761px){.cp-m{align-self:start;margin-top:clamp(70px,6vw,90px)!important}.cp-k[style*="ungu"]{padding-top:clamp(150px,12vw,170px)!important}.cp-k[style*="oranye"]{padding-bottom:clamp(38px,3vw,50px)}.cp-k{min-height:clamp(330px,26vw,380px)}}
.cp-tg .cp-t1{--w:clamp(200px,16vw,240px)!important;width:var(--w)}.cp-tg .cp-t2{width:var(--w)}
/* dua kartu sejajar & sama tinggi; tiap tangan menumpang di kartunya sendiri:
   Creative = teks atas-kiri, tangan pensil di kanan-bawah; Performance = tangan di kiri-atas, teks turun ke bawah */
@media (min-width:761px){
  .cp{align-items:stretch}
  .cp-k{min-height:clamp(420px,32vw,470px)!important;display:flex;flex-direction:column}
  .cp-k[style*="ungu"]{padding-top:clamp(22px,2.6vw,38px)!important;margin-top:0!important;justify-content:flex-end}
  .cp-k[style*="oranye"]{justify-content:flex-end}
  .cp-k[style*="oranye"]>*{max-width:60%}
  .cp-m{align-self:center!important;margin-top:0!important}
}
.cp-tg .cp-tangan,.cp>.cp-k{will-change:transform}

/* "meet" bersinar: titik dua tangan bertemu diberi cahaya ajaib (kuning MOTE + oranye creative + ungu performance).
   Huruf tetap putih pekat di atas bulatan gelap, cahayanya cuma di luar bulatan dan di tepi huruf, supaya tetap terbaca. */
@property --meet-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.cp-m{position:relative;isolation:isolate;overflow:visible;
  box-shadow:0 0 0 1.5px rgba(255,236,170,.55),0 0 22px 5px rgba(252,209,45,.7),0 0 54px 14px rgba(254,123,0,.38),0 0 100px 30px rgba(117,88,254,.32);
  animation:meet-napas 3.4s ease-in-out infinite}
.cp-m::before{content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--meet-a),#FCD12D,#FE7B00,#7558FE,#fff6c8,#FCD12D);filter:blur(7px);opacity:.9;
  animation:meet-putar 4s linear infinite}
.cp-m::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--ink)}
.cp-m-tx{position:relative;color:#fff;text-shadow:0 0 6px rgba(255,246,200,.95),0 0 16px rgba(252,209,45,.7),0 0 30px rgba(254,123,0,.45)}
.cp-m .meet-b{position:absolute;width:20px;height:20px;background:#FCD12D;pointer-events:none;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 3px #FE7B00) drop-shadow(0 0 8px rgba(252,209,45,.9));opacity:0;animation:meet-kilau 2.6s ease-in-out infinite}
.cp-m .meet-b:nth-of-type(1){top:-14px;left:12%;animation-delay:0s}
.cp-m .meet-b:nth-of-type(2){top:-12px;right:6%;width:14px;height:14px;animation-delay:.7s}
.cp-m .meet-b:nth-of-type(3){bottom:-16px;right:22%;width:22px;height:22px;animation-delay:1.3s}
.cp-m .meet-b:nth-of-type(4){bottom:-10px;left:4%;width:13px;height:13px;animation-delay:1.9s}
.cp-m .meet-b:nth-of-type(5){top:-18px;left:46%;width:12px;height:12px;animation-delay:.4s;background:#7558FE;filter:drop-shadow(0 0 6px rgba(117,88,254,.9))}
@keyframes meet-putar{to{--meet-a:360deg}}
@keyframes meet-napas{50%{box-shadow:0 0 0 1.5px rgba(255,236,170,.75),0 0 26px 6px rgba(252,209,45,.7),0 0 64px 16px rgba(254,123,0,.4),0 0 120px 34px rgba(117,88,254,.36)}}
@keyframes meet-kilau{0%,100%{opacity:0;transform:scale(.4) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.6) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.cp-m,.cp-m::before{animation:none}.cp-m .meet-b{animation:none;opacity:.8}}

/* "meet": bulatannya sekarang bentuk SVG lunak (digambar kartu-tangan.js) supaya bisa melesak di titik sentuhan jari */
.cp>.cp-m{z-index:2;background:transparent}
.cp-m::after{display:none}
.cp-m-bentuk{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;fill:var(--ink)}

/* ===== Sistem KILAU =====
   Asal: bulatan "meet" di kartu otak kanan/kiri. Artinya: titik tempat sesuatu bertemu dan jadi hidup.
   Dipakai HEMAT, cuma di titik keputusan (ajakan utama yang dilihat sekali per kunjungan) dan di tanda nilai.
   WAJIB di atas latar PUTIH / TERANG (krem, kuning muda). Di latar gelap, oranye, ungu, atau warna pekat lain
   cahayanya jadi ramai dan norak (koreksi Ryan 23 Okt 2026), jadi jangan dipasang di sana.
   Jangan di menu, data, form pembayaran, atau teks yang sedang dibaca.
   .kilau          : halo warna berputar (kuning MOTE → oranye creative → ungu performance) + bernapas. Untuk tombol ajakan utama.
   .kilau-tenang   : halo diam tipis; bernapas cuma saat kursor di atasnya. Untuk tombol yang muncul di tiap halaman.
   .kilau-bintang  : cuma bintang berkelip di sekitar elemen (isi elemennya dengan BINTANG dari build.py). */
:root{--kilau-1:#FCD12D;--kilau-2:#FE7B00;--kilau-3:#7558FE}
.kilau,.kilau-bintang{position:relative;isolation:isolate;overflow:visible}
.kilau{animation:kilau-napas 3.4s ease-in-out infinite;box-shadow:0 0 16px 2px rgba(252,209,45,.45),0 0 40px 8px rgba(254,123,0,.22),0 0 70px 18px rgba(117,88,254,.2)}
.kilau::before{content:"";position:absolute;inset:-4px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--meet-a),var(--kilau-1),var(--kilau-2),var(--kilau-3),#fff6c8,var(--kilau-1));filter:blur(7px);opacity:.85;animation:meet-putar 4s linear infinite}
.kilau::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:inherit;pointer-events:none}
.kilau-b{position:absolute;width:16px;height:16px;background:var(--kilau-1);pointer-events:none;z-index:2;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 3px var(--kilau-2)) drop-shadow(0 0 7px rgba(252,209,45,.9));opacity:0;animation:meet-kilau 2.8s ease-in-out infinite}
.kilau-b:nth-of-type(1){top:-12px;left:14%}
.kilau-b:nth-of-type(2){bottom:-10px;right:18%;width:12px;height:12px;animation-delay:.9s;background:var(--kilau-3);filter:drop-shadow(0 0 6px rgba(117,88,254,.9))}
.kilau-b:nth-of-type(3){top:-8px;right:-8px;width:11px;height:11px;animation-delay:1.7s}
.kontak.kilau-tenang{box-shadow:0 0 0 1.5px rgba(255,236,170,.35),0 0 14px 2px rgba(252,209,45,.35),0 0 30px 6px rgba(117,88,254,.18)}
@media (hover:hover) and (pointer:fine){.kontak.kilau-tenang:hover{animation:kilau-napas 1.8s ease-in-out infinite}}
@keyframes kilau-napas{50%{box-shadow:0 0 22px 5px rgba(252,209,45,.6),0 0 54px 12px rgba(254,123,0,.3),0 0 96px 26px rgba(117,88,254,.28)}}
@media (prefers-reduced-motion:reduce){.kilau,.kilau::before,.kontak.kilau-tenang:hover{animation:none}.kilau-b{animation:none;opacity:.85}}

/* kilau di simpul logo MOTE pada hero: menyala setelah tali mengencang (kelas .satu dari tangan.js) */
.ht-kilau{position:absolute;z-index:0;left:var(--mx,50%);top:var(--my,62%);width:calc(var(--mk,160px) * 1.05);height:calc(var(--mk,160px) * .55);
  translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:0;scale:.92;transition:opacity .6s cubic-bezier(0.23,1,0.32,1),scale .6s cubic-bezier(0.23,1,0.32,1)}

.ht.satu .ht-kilau{opacity:1;scale:1;transition-delay:.15s}
.ht-kilau .kilau-b:nth-of-type(1){top:-6%;left:10%}
.ht-kilau .kilau-b:nth-of-type(2){bottom:-4%;right:12%}
.ht-kilau .kilau-b:nth-of-type(3){top:2%;right:4%}

@media (prefers-reduced-motion:reduce){.ht-kilau{transition:none}}
/* stiker hiasan halaman kelas: h4 menabrak daftar "Yang kamu dapet" di layar ≥1600, h7 menabrak judul "Isi slide/video" di ≤1180 (diukur 23 Okt) */
@media (min-width:1600px){.ks-hias.h4{display:none}}
@media (max-width:1180px){.ks-hias.h7{display:none}}
.ks-grid{align-items:start}/* kartu berjudul pendek tidak turun ke tengah baris */
/* banner geser Kelas MOTE. Patokan (Ryan 23 Okt): di laptop biasa kartu kelas harus kelihatan tanpa scroll.
   Diukur: 1440x790 (MacBook, tanpa toolbar) judul kartu masuk layar; 1366x658 (laptop terkecil umum) thumbnail kelas masuk layar. */
@media (min-width:761px){
  .ks-geser{margin-bottom:clamp(18px,2vw,28px)}
  .ks-geser .gs{min-height:0;grid-template-columns:2fr 1fr;gap:clamp(18px,2.4vw,36px);padding-top:clamp(18px,1.8vw,26px);padding-bottom:clamp(28px,2.6vw,34px)}
  .ks-geser .gs-teks small{font-size:11px}
  .ks-geser .gs-teks h2{font-size:clamp(24px,2.2vw,32px);max-width:22em;margin:6px 0 6px}
  .ks-geser .gs-teks p{font-size:15px;line-height:1.45;max-width:46em;margin-bottom:12px}
  .ks-geser .gs-teks .btn{height:42px;font-size:14px}.ks-geser .gs-teks .btn .ar{width:30px;height:30px}
  .ks-geser .ks-gs-poin{margin:6px 0 10px}
  .ks-geser .gs-foto{padding:7px 7px 28px}.ks-geser .gs-foto span{font-size:11px;bottom:7px}
  .ks-geser .gs-foto img{aspect-ratio:16/9}
  .ks-geser .gs-vis{max-width:330px;justify-self:end;width:100%}
  .ks-geser .gs-vis img[style]{max-height:120px}
  .ks-geser + .toko-kepala,.toko-kepala#katalog{margin-top:0}
  .toko-kepala#katalog h2{font-size:clamp(26px,2.4vw,36px)}
}
@media (min-width:761px){
  .ks-toko-satu{padding-top:96px}              /* pita hitam "Kelas pertama gratis" dibuang (Ryan 23 Okt); jarak dari menu melayang */
  .ks-geser .ks-gs-poin li{font-size:14px;line-height:1.4;padding-top:2px;padding-bottom:2px}
}
@media (max-width:760px){.ks-toko-satu{padding-top:92px}}

/* ===== Ruang belajar Kelas MOTE (js/ruang.js): tampilan setelah daftar, gelap seperti bioskop ===== */
.rg-on .ks-toko,.rg-on .ks-garis,.rg-on .ks-bab{display:none}
.rg-on .ks-bawah{grid-template-columns:1fr!important}.rg-on .ks-desk{max-width:760px}
.rg{--rg-bg:#141316;--rg-panel:#1D1C21;--rg-garis:rgba(255,255,255,.09);--rg-redup:rgba(249,238,216,.62);background:var(--rg-bg);color:var(--krem);padding:clamp(92px,8vw,112px) var(--gut) clamp(36px,4vw,56px)}
.rg[hidden]{display:none}
.rg-in{max-width:1320px;margin:0 auto}
.rg-kepala{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin-bottom:22px}
.rg-balik{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 10px;border-radius:99px;border:1px solid var(--rg-garis);color:var(--krem);font-size:13px;font-weight:700;background:transparent;transition:background .2s}
.rg-balik svg{width:16px;height:16px}
@media (hover:hover){.rg-balik:hover{background:rgba(255,255,255,.07)}}
.rg-judul small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--kun)}
.rg-judul h1{font-size:clamp(20px,1.9vw,28px);letter-spacing:-.03em;line-height:1.15;margin-top:4px;color:#fff}
.rg-oleh{display:flex;align-items:center;gap:10px}
.rg-oleh img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:top;background:var(--kun)}
.rg-oleh b{display:block;font-size:13px;color:#fff}.rg-oleh i{display:block;font-style:normal;font-size:12px;color:var(--rg-redup)}
.rg-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.rg-tab{display:flex;gap:6px;margin-bottom:12px}
.rg-tab button,.rg-tab span{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:99px;font-size:13px;font-weight:700;color:var(--rg-redup);border:1px solid var(--rg-garis);background:transparent}
.rg-tab svg{width:15px;height:15px}
.rg-tab button.on,.rg-tab.tunggal span:first-child{background:var(--kun);border-color:var(--kun);color:var(--ink)}
.rg-tab .rg-nanti{border-style:dashed}
.rg-panggung{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 0 0 1px var(--rg-garis)}
.rg[data-mode="video"] .rg-s,.rg[data-mode="slide"] .rg-v,.rg[data-mode="video"] .rg-strip,.rg[data-mode="video"] [data-daftar="slide"],.rg[data-mode="slide"] [data-daftar="video"]{display:none}
/* video: iframe dibuat lebih tinggi dari panggung, bilah judul & logo YouTube (di area hitam atas-bawah) terpotong */
.rg-v,.rg-layar{position:absolute;inset:0}
.rg-layar{overflow:hidden}
.rg-layar iframe{position:absolute;left:0;top:-70px;width:100%;height:calc(100% + 140px);pointer-events:none;border:0}
.rg-layar video{width:100%;height:100%;object-fit:contain;background:#000}
.rg-ketuk{position:absolute;inset:0 0 64px;cursor:pointer}
.rg-tirai{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;border:0;padding:0;color:#fff;font:inherit;cursor:pointer;z-index:3}
.rg-tirai[hidden]{display:none}
.rg-tirai img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.05)}
.rg-tombol{position:relative;width:clamp(64px,7vw,92px);aspect-ratio:1;border-radius:50%;background:var(--kun);color:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(252,209,45,.22),0 20px 40px -10px rgba(0,0,0,.6);transition:transform .2s var(--ease)}
.rg-tombol svg{width:42%;margin-left:6%}
.rg-tirai b{position:relative;font-size:15px;letter-spacing:.02em}
@media (hover:hover){.rg-tirai:hover .rg-tombol{transform:scale(1.06)}}
.rg-tirai:active .rg-tombol{transform:scale(.96)}
.rg-kontrol{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:6px;padding:28px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.78));transition:opacity .3s,transform .3s var(--ease)}
.rg-v:not(.main) .rg-kontrol{z-index:4}
.rg-v.idle .rg-kontrol{opacity:0;transform:translateY(8px)}
.rg-v.idle{cursor:none}
.rg-ik{width:38px;height:38px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background .15s}
.rg-ik svg{width:22px;height:22px}
@media (hover:hover){.rg-ik:hover{background:rgba(255,255,255,.14)}}
.rg-ik:active{transform:scale(.94)}
[data-main] .j,[data-main].jeda .p{display:grid}[data-main] .p,[data-main].jeda .j{display:none}
.rg-suara .silang{display:none}.rg-suara.diam .silang{display:inline}.rg-suara.diam .gel{display:none}
.rg-rentang{flex:1;min-width:60px;height:22px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;--isi:0%}
.rg-rentang::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--kun) var(--isi),rgba(255,255,255,.28) var(--isi))}
.rg-rentang::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.28)}
.rg-rentang::-moz-range-progress{height:4px;border-radius:4px;background:var(--kun)}
.rg-rentang::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--kun);border:0}
.rg-rentang::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--kun);border:0}
.rg-waktu{font-size:12px;font-variant-numeric:tabular-nums;color:#fff;min-width:86px;text-align:center}
.rg-laju{height:28px;padding:0 9px;border-radius:99px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:700 12px/1 inherit;cursor:pointer}
/* slideshow */
.rg-s{position:absolute;inset:0;background:#0d0c0f;display:grid;place-items:center}
.rg-s-img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;transition:opacity .22s ease}
.rg-s-img.ganti{opacity:.25}
.rg-s-nav{position:absolute;top:50%;translate:0 -50%;right:14px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(20,19,22,.72);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);transition:background .15s,opacity .2s}
.rg-s-nav svg{width:20px;height:20px;rotate:180deg}
.rg-s-nav.kiri{right:auto;left:14px}.rg-s-nav.kiri svg{rotate:0deg}
@media (hover:hover){.rg-s-nav:hover{background:var(--kun);color:var(--ink)}}
.rg-s-bar{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:6px;padding:4px 4px 4px 14px;border-radius:99px;background:rgba(20,19,22,.72);backdrop-filter:blur(6px);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
.rg-s-bar .rg-ik{width:32px;height:32px}.rg-s-bar .rg-ik svg{width:17px;height:17px}
.rg-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.rg-strip button{flex:none;width:104px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;background:#000;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
.rg-strip img{width:100%;height:100%;object-fit:cover;display:block}
.rg-strip button.on{opacity:1;border-color:var(--kun)}
@media (hover:hover){.rg-strip button:hover{opacity:.9}}
/* layar penuh: panggung memenuhi layar */
.rg-panggung:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0}
.rg-panggung:-webkit-full-screen{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0}
.rg.rg-penuh-semu .rg-panggung{position:fixed;inset:0;z-index:1000;aspect-ratio:auto;border-radius:0}
/* daftar isi samping */
.rg-samping{background:var(--rg-panel);border-radius:18px;border:1px solid var(--rg-garis);overflow:hidden;position:sticky;top:96px}
.rg-samping-k{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--rg-garis)}
.rg-samping-k b{font-size:14px;color:#fff}
.rg-unduh{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:99px;background:var(--kun);color:var(--ink);font-size:12px;font-weight:700}
.rg-unduh svg{width:15px;height:15px}
.rg-daftar{max-height:min(62vh,560px);overflow-y:auto;padding:6px 8px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.rg-grup summary{display:flex;align-items:center;gap:10px;padding:12px 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;cursor:pointer;list-style:none}
.rg-grup summary::-webkit-details-marker{display:none}
.rg-grup summary i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.rg-grup ol{list-style:none;padding:0 0 6px}
.rg-grup button{display:grid;grid-template-columns:52px 1fr;gap:8px;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--rg-redup);font:inherit;font-size:13px;line-height:1.4;cursor:pointer;position:relative;transition:background .15s,color .15s}
.rg-grup time{font-size:12px;font-variant-numeric:tabular-nums;color:rgba(249,238,216,.45);padding-top:1px}
@media (hover:hover){.rg-grup button:hover{background:rgba(255,255,255,.05);color:#fff}}
.rg-grup button.on{background:rgba(252,209,45,.12);color:#fff}
.rg-grup button.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--kun)}
.rg-grup button.on time{color:var(--kun)}
.rg-kisi{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px}
.rg-kisi button{position:relative;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#000;cursor:pointer;aspect-ratio:16/9}
.rg-kisi img{width:100%;height:100%;object-fit:cover;display:block;opacity:.75}
.rg-kisi span{position:absolute;left:5px;bottom:4px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);padding:1px 5px;border-radius:4px}
.rg-kisi button.on{border-color:var(--kun)}.rg-kisi button.on img{opacity:1}
@media (max-width:1000px){.rg-grid{grid-template-columns:1fr}.rg-samping{position:static}.rg-daftar{max-height:420px}.rg-kepala{grid-template-columns:auto 1fr}.rg-oleh{display:none}}
@media (max-width:760px){
  .rg{padding-top:86px}.rg-kepala{grid-template-columns:1fr;gap:12px}.rg-balik{justify-self:start}
  .rg-panggung{border-radius:12px}.rg-waktu{min-width:0;font-size:11px}.rg-laju,[data-lompat]{display:none}
  .rg-s-nav{width:38px;height:38px}.rg-strip button{width:84px}
}
@media (prefers-reduced-motion:reduce){.rg-s-img,.rg-kontrol,.rg-tombol{transition:none}}
.rg-v:not(.mulai) .rg-kontrol{display:none}
.rg-v.mulai .rg-tirai{inset:0 0 64px}            /* setelah mulai: tirai jeda tidak menutup bilah kontrol */
.rg-v.mulai .rg-tirai img{height:calc(100% + 64px)}
@media (max-width:760px){.rg-tirai b{font-size:13px}.rg-tombol{width:58px}}
.rg-kiri{min-width:0}@media (max-width:1000px){.rg-grid{grid-template-columns:minmax(0,1fr)}}/* deretan thumbnail slide jangan melebarkan kolom */
@media (max-width:1000px){.rg-kisi{display:none}.rg-samping:has(.rg-kisi):not(:has(.rg-grup)) .rg-samping-k{border-bottom:0}}/* HP: deretan thumbnail di bawah slide sudah cukup */
/* kualitas video: YouTube memilih resolusi dari UKURAN pemutar (pilihan kualitas lewat API sudah tidak berfungsi sejak 2019).
   Jadi iframe dibuat 2x lebih besar lalu diperkecil setengah: YouTube mengirim 1080p, tampilan tetap sama (bilah atas-bawah tetap terpotong). */
.rg-layar iframe{width:200%;height:calc(200% + 280px);top:-70px;transform:scale(.5);transform-origin:0 0}
.rg-on .ks-sec2 .ks-hias{display:none}/* ruang belajar: kolom teks melebar, stiker hiasan jadi menimpa teks */
.rg-kual{position:relative}
.rg-kual-menu{position:absolute;right:0;bottom:calc(100% + 10px);display:grid;min-width:120px;padding:6px;border-radius:12px;background:rgba(20,19,22,.94);backdrop-filter:blur(8px);box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
.rg-kual-menu[hidden]{display:none}
.rg-kual-menu button{border:0;background:transparent;color:#fff;font:600 13px/1 inherit;text-align:left;padding:9px 12px;border-radius:8px;cursor:pointer}
.rg-kual-menu button.on{background:var(--kun);color:var(--ink)}
@media (hover:hover){.rg-kual-menu button:not(.on):hover{background:rgba(255,255,255,.1)}}
@media (max-width:760px){.rg-kual .rg-laju{display:inline-block}}
/* bonus unduhan (ebook, template) di ruang belajar */
.rg-ekstra{border-top:1px solid var(--rg-garis);padding:12px 12px 14px;display:grid;gap:6px}
.rg-ekstra>b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:2px 4px 6px}
.rg-ekstra a{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.04);color:#fff;font-size:13px;font-weight:600;line-height:1.35;transition:background .15s}
.rg-ekstra a svg{width:30px;height:30px;padding:7px;border-radius:50%;background:var(--kun);color:var(--ink)}
.rg-ekstra i{display:block;font-style:normal;font-weight:400;font-size:12px;color:var(--rg-redup)}
@media (hover:hover){.rg-ekstra a:hover{background:rgba(255,255,255,.09)}}
.ks-ft em{left:auto;right:10px;background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.15)}/* label Gratis pindah ke panel kanan thumbnail: di kiri-atas dia menutup judul sampul deck */
.ks-sub2 mark{background:var(--kun);color:var(--ink);font-style:normal;font-weight:600;padding:0 .2em;border-radius:.2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}