/* Media website KRIBAW: 9 animasi promo, slider tanpa batas, video menggugah selera, kontrol jeda & bunyi */

.md{position:relative;margin:0}
.md__img{position:relative;display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.md__video{display:block;width:100%;height:auto;background:#1a0f07}
.md__rasio{position:relative;width:100%;aspect-ratio:var(--md-rasio,16 / 9);background:#f3efe7}
.md__rasio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.md__buka{display:inline-block;margin-top:8px;font-weight:800;font-size:.9rem}
.md__kartu{display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px solid currentColor;border-radius:16px;background:#fff;color:inherit;text-decoration:none;text-align:left}
.md__ikon{font-size:2rem;line-height:1}
.md__kartu-teks{display:grid;gap:2px;min-width:0;flex:1}
.md__kartu-teks b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md__kartu-teks small{opacity:.7}
.md__kartu-tombol{flex:none;padding:6px 14px;border-radius:999px;background:#0F7A35;color:#fff;font-weight:800;font-size:.85rem}

/* ---------- bingkai & lapisan ---------- */
.md-bingkai{position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;border-radius:var(--md-radius,20px);background:#FFF7E6}
.md-bingkai::before{content:"";position:absolute;inset:-30px;z-index:-1;background:var(--md-gbr,none) center/cover no-repeat;filter:blur(28px) saturate(1.3) brightness(.92);opacity:.9}
.md-bingkai--kartu{overflow:visible;background:transparent}
.md-bingkai--kartu::before,.md-bingkai--sematan::before,.md-vid::before,.md-anim--melayang .md-bingkai::before{display:none}
.md-gerak{position:relative;z-index:1;transform-origin:50% 50%;will-change:transform}
.md-vinyet{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(74,42,20,.32) 100%),linear-gradient(180deg,rgba(255,210,30,.07),rgba(255,140,0,.09))}
.md-remah--jatuh,.md-pecah,.md-orbit{background:radial-gradient(circle,rgba(120,60,15,.5) 0 1px,transparent 1.6px) 0 0/5px 5px,linear-gradient(135deg,#F8D184,#E59E48);
  box-shadow:0 3px 5px rgba(90,45,10,.35);border-radius:2px}

/* ---------- efek masuk: tiap gaya beda ---------- */
.md-js .md-anim.md-siap:not(.is-tampil) .md-bingkai{opacity:0}
.md-anim.is-tampil .md-bingkai{animation:md-masuk-zoom 1s cubic-bezier(.2,.8,.2,1) both}
.md-anim--melayang.is-tampil .md-bingkai{animation-name:md-masuk-naik}
.md-anim--kilau.is-tampil .md-bingkai{animation-name:md-masuk-blur}
.md-anim--remah.is-tampil .md-bingkai{animation-name:md-masuk-jatuh}
.md-anim--stiker.is-tampil .md-bingkai{animation-name:md-masuk-putar}
.md-anim--miring.is-tampil .md-bingkai{animation-name:md-masuk-balik}
.md-anim--kriuk.is-tampil .md-bingkai{animation-name:md-masuk-pop}
.md-anim--denyut.is-tampil .md-bingkai{animation-name:md-masuk-lingkaran}
.md-anim--orbit.is-tampil .md-bingkai{animation-name:md-masuk-tirai}
.md-anim--video.is-tampil .md-bingkai{animation-name:md-masuk-sinema;animation-duration:1.1s}
.md-anim--bingkai.is-tampil .md-bingkai{animation:md-masuk-pop .9s cubic-bezier(.2,.8,.2,1) both,md-cahaya-bingkai 3.2s ease-in-out .9s infinite}
.md-anim--diam.is-tampil .md-bingkai{animation:md-masuk-pudar .6s ease both}
@keyframes md-masuk-zoom{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}
@keyframes md-masuk-naik{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes md-masuk-blur{from{opacity:0;filter:blur(18px);transform:scale(1.06)}to{opacity:1;filter:none;transform:none}}
@keyframes md-masuk-jatuh{0%{opacity:0;transform:translateY(-60px) rotate(-3deg)}55%{opacity:1;transform:translateY(10px) rotate(1deg)}75%{transform:translateY(-4px)}100%{opacity:1;transform:none}}
@keyframes md-masuk-putar{from{opacity:0;transform:rotate(-12deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes md-masuk-balik{from{opacity:0;transform:perspective(900px) rotateY(-70deg) translateX(-40px)}to{opacity:1;transform:none}}
@keyframes md-masuk-pop{0%{opacity:0;transform:scale(.5)}55%{opacity:1;transform:scale(1.08)}75%{transform:scale(.97)}100%{opacity:1;transform:none}}
@keyframes md-masuk-lingkaran{from{opacity:1;clip-path:circle(0% at 50% 50%)}to{opacity:1;clip-path:circle(75% at 50% 50%)}}
@keyframes md-masuk-tirai{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes md-masuk-sinema{from{opacity:0;clip-path:inset(20% 0 20% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes md-masuk-pudar{from{opacity:0}to{opacity:1}}
@keyframes md-cahaya-bingkai{0%,100%{box-shadow:0 0 0 3px #FFD21E,0 10px 30px -10px rgba(74,42,20,.5)}50%{box-shadow:0 0 0 3px #FFD21E,0 0 30px 6px rgba(255,210,30,.55)}}
.md-anim--bingkai .md-bingkai{box-shadow:0 0 0 3px #FFD21E,0 10px 30px -10px rgba(74,42,20,.5)}
.md-anim--bingkai .md-bingkai--kartu{box-shadow:none;animation:none}

/* ---------- 1. zoom sinematik + cahaya hangat ---------- */
.md-anim--zoom .md-gerak{animation:md-kenburns 9s ease-in-out infinite alternate}
@keyframes md-kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.22) translate(calc(var(--md-arah,1) * -4%),-3%)}}
.md-bocor{position:absolute;z-index:2;inset:-30%;pointer-events:none;mix-blend-mode:screen;opacity:.6;
  background:radial-gradient(26% 20% at 30% 40%,rgba(255,170,50,.8),transparent 70%),radial-gradient(20% 16% at 70% 62%,rgba(255,230,140,.7),transparent 70%);
  animation:md-bocor 7s ease-in-out infinite alternate}
@keyframes md-bocor{from{transform:translate(-10%,-5%) rotate(0)}to{transform:translate(10%,6%) rotate(10deg)}}

/* ---------- 2. melayang + sinar emas ---------- */
.md-anim--melayang .md-bingkai{background:radial-gradient(60% 55% at 50% 50%,#FFE58A,#FFF7E6 72%)}
.md-anim--melayang .md-gerak{transform:scale(.86);animation:md-melayang 4s ease-in-out infinite}
@keyframes md-melayang{0%,100%{transform:scale(.86) translateY(3%) rotate(-2deg)}50%{transform:scale(.89) translateY(-4%) rotate(2deg)}}
.md-sinar{position:absolute;z-index:0;left:50%;top:50%;width:160cqw;aspect-ratio:1;margin:-80cqw 0 0 -80cqw;pointer-events:none;opacity:.6;
  background:repeating-conic-gradient(from 0deg,rgba(255,200,30,.6) 0deg 9deg,transparent 9deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 15%,transparent 62%);mask:radial-gradient(circle,#000 15%,transparent 62%);animation:md-putar 16s linear infinite}
@keyframes md-putar{to{transform:rotate(360deg)}}
.md-bayang{position:absolute;z-index:0;left:22%;right:22%;bottom:4%;height:9%;border-radius:50%;background:rgba(74,42,20,.42);filter:blur(10px);animation:md-bayang 4s ease-in-out infinite}
@keyframes md-bayang{0%,100%{transform:scaleX(1);opacity:.6}50%{transform:scaleX(.72);opacity:.28}}

/* ---------- 3. kilau + bintang berkelip ---------- */
.md-anim--kilau .md-gerak{animation:md-denyut 3s ease-in-out infinite}
@keyframes md-denyut{0%,100%{transform:scale(1.02)}50%{transform:scale(1.08)}}
.md-kilau{position:absolute;z-index:3;top:-20%;bottom:-20%;left:0;width:38%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75) 45%,rgba(255,240,180,.5) 55%,transparent);
  transform:translateX(-160%) skewX(-18deg);animation:md-sapu 3s ease-in-out infinite}
@keyframes md-sapu{0%,10%{transform:translateX(-160%) skewX(-18deg)}55%,100%{transform:translateX(420%) skewX(-18deg)}}
.md-bintang{position:absolute;z-index:3;left:var(--x);top:var(--y);width:calc(4.5cqw * var(--s,1));aspect-ratio:1;pointer-events:none;background:#FFF6C8;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 6px rgba(255,230,120,.95));
  opacity:0;transform:scale(0) rotate(0);animation:md-kelip 2.4s ease-in-out var(--d,0s) infinite}
@keyframes md-kelip{0%,100%{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}

/* ---------- 4. hujan remah ---------- */
.md-anim--remah .md-gerak{animation:md-mantul 2.4s ease-in-out infinite}
@keyframes md-mantul{0%,100%{transform:translateY(0) scale(1.03)}50%{transform:translateY(-2%) scale(1.06)}}
.md-remah{position:absolute;z-index:3;left:var(--x);top:-8%;width:calc(3.6cqw * var(--s,1));aspect-ratio:1.2;pointer-events:none}
.md-remah--jatuh{animation:md-jatuh var(--t,5s) linear var(--d,0s) infinite}
@keyframes md-jatuh{0%{top:-8%;transform:translateX(0) rotate(0)}50%{transform:translateX(var(--geser,10px)) rotate(calc(var(--r,180deg) / 2))}100%{top:108%;transform:translateX(0) rotate(var(--r,180deg))}}
.md-remah--naik{top:auto;bottom:-6%;width:calc(1.8cqw * var(--s,1));aspect-ratio:1;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#FFF6C8,rgba(255,210,30,.75) 45%,transparent 70%);animation:md-naik var(--t,6s) ease-in var(--d,0s) infinite}
@keyframes md-naik{0%{bottom:-6%;opacity:0;transform:translateX(0)}15%{opacity:.95}100%{bottom:96%;opacity:0;transform:translateX(var(--geser,10px))}}

/* ---------- 5. stiker promo ---------- */
.md-anim--stiker .md-gerak{animation:md-goyang 4s ease-in-out infinite}
@keyframes md-goyang{0%,100%{transform:rotate(-1.5deg) scale(1.04)}50%{transform:rotate(1.5deg) scale(1.08)}}
.md-stiker{position:absolute;z-index:4;padding:.35em .85em;border-radius:999px;background:#FFD21E;color:#1C2A8E;border:3px solid #1C2A8E;box-shadow:0 4px 0 #1C2A8E;
  font-family:'Lilita One','Bricolage Grotesque',system-ui,sans-serif;font-size:clamp(.9rem,6cqw,2rem);line-height:1;white-space:nowrap;pointer-events:none;
  transform:scale(0) rotate(var(--r,-8deg));animation:md-pop 6s cubic-bezier(.2,.9,.3,1.4) infinite}
.md-stiker--1{top:7%;left:6%;--r:-10deg;animation-delay:.4s}
.md-stiker--2{top:12%;right:6%;--r:9deg;animation-delay:2.4s;background:#fff;color:#C8341F;border-color:#C8341F;box-shadow:0 4px 0 #C8341F}
.md-stiker--3{bottom:12%;left:10%;--r:-4deg;animation-delay:4.4s;background:#0F7A35;color:#fff;border-color:#0A5A27;box-shadow:0 4px 0 #0A5A27}
.md-bingkai:has(.md-promo) .md-stiker--3{bottom:auto;top:38%}
@keyframes md-pop{0%{transform:scale(0) rotate(var(--r))}7%{transform:scale(1.25) rotate(var(--r))}12%{transform:scale(.95) rotate(var(--r))}16%,40%{transform:scale(1) rotate(var(--r))}48%,100%{transform:scale(0) rotate(var(--r))}}

/* ---------- 6. miring 3D ---------- */
.md-anim--miring .md-bingkai{perspective:800px;background:radial-gradient(circle at 50% 40%,#5a3a1c,#2b1a0e)}
.md-anim--miring .md-bingkai::before{opacity:.55}
.md-anim--miring .md-gerak{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.04);transition:transform .25s ease-out;animation:md-ayun3d 6s ease-in-out infinite}
.md-anim--miring .md-bingkai.is-arah .md-gerak{animation:none}
@keyframes md-ayun3d{0%,100%{transform:rotateY(-12deg) rotateX(4deg) scale(1.04)}50%{transform:rotateY(12deg) rotateX(-4deg) scale(1.04)}}
.md-silau{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.6),transparent 45%)}

/* ---------- 7. ledakan KRIUK ---------- */
.md-anim--kriuk .md-gerak{animation:md-getar 4.5s ease-in-out infinite}
@keyframes md-getar{0%,68%,100%{transform:scale(1.03)}70%{transform:translate(-1.6%,.8%) rotate(-1deg) scale(1.07)}72%{transform:translate(1.6%,-.8%) rotate(1deg) scale(1.07)}74%{transform:translate(-1%,.5%) scale(1.05)}77%{transform:scale(1.03)}}
.md-kriuk{position:absolute;z-index:4;top:42%;left:50%;pointer-events:none;white-space:nowrap;
  font-family:'Lilita One','Bricolage Grotesque',system-ui,sans-serif;font-size:clamp(1.6rem,13cqw,5.4rem);color:#FFD21E;letter-spacing:.02em;
  text-shadow:.05em 0 0 #1C2A8E,-.05em 0 0 #1C2A8E,0 .05em 0 #1C2A8E,0 -.05em 0 #1C2A8E,.035em .035em 0 #1C2A8E,-.035em .035em 0 #1C2A8E,.035em -.035em 0 #1C2A8E,-.035em -.035em 0 #1C2A8E,0 .1em 0 #101A62;
  opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-8deg);animation:md-letus 4.5s cubic-bezier(.2,.9,.3,1.4) infinite}
@keyframes md-letus{0%,68%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-8deg)}72%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(-8deg)}86%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-6deg)}96%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.12) rotate(-6deg)}}
.md-pecah{position:absolute;z-index:3;top:46%;left:50%;width:calc(2.8cqw * var(--s,1));aspect-ratio:1.2;pointer-events:none;opacity:0;animation:md-pecah 4.5s ease-out infinite}
@keyframes md-pecah{0%,69%{opacity:0;transform:translate(-50%,-50%) rotate(0)}72%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--r))}}

/* ---------- 8. denyut bikin laper ---------- */
.md-anim--denyut .md-gerak{animation:md-detak 1.8s ease-in-out infinite}
@keyframes md-detak{0%,100%{transform:scale(1.02)}12%{transform:scale(1.1)}24%{transform:scale(1.03)}36%{transform:scale(1.08)}50%{transform:scale(1.02)}}
.md-riak{position:absolute;z-index:3;left:50%;top:50%;width:40cqw;aspect-ratio:1;margin:-20cqw 0 0 -20cqw;border-radius:50%;border:4px solid rgba(255,210,30,.9);
  pointer-events:none;opacity:0;animation:md-riak 1.8s ease-out var(--d,0s) infinite}
@keyframes md-riak{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(2.5)}}
.md-lencana{position:absolute;z-index:4;right:6%;top:8%;padding:.4em .9em;border-radius:999px;background:#C8341F;color:#fff;border:3px solid #fff;
  font-family:'Lilita One','Bricolage Grotesque',system-ui,sans-serif;font-size:clamp(.85rem,5.4cqw,1.8rem);line-height:1;box-shadow:0 4px 0 #8a1f10;
  rotate:8deg;pointer-events:none;animation:md-lencana 1.8s ease-in-out infinite}
@keyframes md-lencana{0%,100%{scale:1}12%{scale:1.18}24%{scale:1}36%{scale:1.1}50%{scale:1}}

/* ---------- 9. pusaran remah ---------- */
.md-anim--orbit .md-gerak{animation:md-pusar 10s ease-in-out infinite alternate}
@keyframes md-pusar{from{transform:scale(1.06) rotate(-2deg)}to{transform:scale(1.16) rotate(2deg)}}
.md-orbit{position:absolute;z-index:3;left:50%;top:50%;width:calc(3.6cqw * var(--s,1));aspect-ratio:1.2;margin:calc(-1.5cqw * var(--s,1)) 0 0 calc(-1.8cqw * var(--s,1));
  pointer-events:none;animation:md-orbit 9s linear var(--d,0s) infinite}
@keyframes md-orbit{from{transform:rotate(0deg) translateX(var(--rj,30cqw)) rotate(0deg)}to{transform:rotate(360deg) translateX(var(--rj,30cqw)) rotate(720deg)}}

/* ---------- video menggugah selera ---------- */
.md-vid{background:#1a0f07}
.md-vid .md__video{filter:saturate(1.28) contrast(1.08) brightness(1.05) sepia(.06);cursor:pointer}
.md-anim--polos .md-vid .md__video{filter:none}
.md-vid.is-main .md-gerak{animation:md-kenburns 14s ease-in-out infinite alternate}
.md-anim--polos .md-vid .md-gerak{animation:none}
.md-vid__main{position:absolute;z-index:5;top:50%;left:50%;width:clamp(56px,14cqw,96px);aspect-ratio:1;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,210,30,.95);transform:translate(-50%,-50%);transition:opacity .3s,transform .3s;animation:md-ajak 1.8s ease-out infinite}
.md-vid__main span{position:absolute;top:50%;left:54%;width:0;height:0;font-size:clamp(14px,3.6cqw,26px);border-style:solid;border-width:.62em 0 .62em 1.05em;
  border-color:transparent transparent transparent #1C2A8E;transform:translate(-50%,-50%)}
@keyframes md-ajak{0%{box-shadow:0 0 0 0 rgba(255,210,30,.65)}100%{box-shadow:0 0 0 24px rgba(255,210,30,0)}}
.md-vid.is-main .md-vid__main{opacity:0;transform:translate(-50%,-50%) scale(.8);animation:none}
.md-vid.is-main:hover .md-vid__main,.md-vid.is-main .md-vid__main:focus-visible{opacity:.85}
.md-vid.is-main .md-vid__main span{left:50%;width:.95em;height:1.15em;border:0;border-left:.32em solid #1C2A8E;border-right:.32em solid #1C2A8E}
.md-vid__suara{position:absolute;z-index:6;top:12px;right:12px;width:42px;height:42px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(26,15,7,.6);color:#fff;font-size:1.1rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.md-vid__progres{position:absolute;z-index:6;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.25)}
.md-vid__progres i{display:block;width:0;height:100%;background:linear-gradient(90deg,#FFD21E,#E8553A)}
.md-vid .md-stiker--1{top:12px;left:12px}
.md-vid :focus-visible{outline:3px solid #FFD21E;outline-offset:3px}

/* ---------- teks promo + tombol ---------- */
.md-promo{position:absolute;z-index:5;left:0;right:0;bottom:0;display:grid;gap:.3em;justify-items:start;text-align:left;color:#fff;pointer-events:none;
  padding:clamp(14px,4cqw,32px);padding-top:clamp(40px,12cqw,110px);background:linear-gradient(180deg,transparent,rgba(26,15,7,.55) 45%,rgba(26,15,7,.85))}
.md-promo > *{pointer-events:auto}
.md-promo__judul{font-family:'Lilita One','Bricolage Grotesque',system-ui,sans-serif;font-weight:400;font-size:clamp(1.1rem,5.4cqw,2.6rem);line-height:1.05;color:#FFD21E;text-shadow:0 2px 0 rgba(16,26,98,.75)}
.md-promo__ket{max-width:52ch;font-size:clamp(.82rem,2.4cqw,1.05rem);opacity:.92}
.md-promo__tombol{display:inline-flex;align-items:center;gap:.4em;margin-top:.4em;padding:.6em 1.2em;border-radius:999px;background:#0F7A35;color:#fff;
  font-weight:800;font-size:clamp(.82rem,2.4cqw,1rem);text-decoration:none;box-shadow:0 4px 0 #0A5A27;animation:md-tombol 2.4s ease-in-out infinite}
.md-promo__tombol:hover,.md-promo__tombol:focus-visible{background:#12893C;color:#fff}
.md-promo__tombol--wa{background:#fff;color:#0A5A27;box-shadow:0 4px 0 #0E7A3F}
.md-promo__tombol--wa:hover,.md-promo__tombol--wa:focus-visible{background:#EAF7EF;color:#0A5A27}
@keyframes md-tombol{0%,100%{translate:0 0}50%{translate:0 -4px}}
.md-js .md-anim.md-siap .md-promo > *{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.md-js .md-anim.is-tampil .md-promo > *{opacity:1;transform:none}
.md-anim.is-tampil .md-promo > :nth-child(1){transition-delay:.5s}
.md-anim.is-tampil .md-promo > :nth-child(2){transition-delay:.65s}
.md-anim.is-tampil .md-promo > :nth-child(3){transition-delay:.8s}

/* ---------- slider tanpa batas ---------- */
.md-slider{position:relative;outline:none}
.md-slider:focus-visible{outline:3px solid #1C2A8E;outline-offset:4px;border-radius:24px}
.md-slider__panggung{position:relative}
.md-slider__isi{display:grid;align-items:center;touch-action:pan-y}
.md-slider__slide{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.md-slider__slide.is-on{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.md-slider__progres{position:absolute;z-index:7;top:0;left:12px;right:12px;height:4px;border-radius:4px;overflow:hidden;background:rgba(28,42,142,.15)}
.md-slider__progres i{display:block;width:0;height:100%;background:linear-gradient(90deg,#FFD21E,#0F7A35)}
@keyframes md-isi{from{width:0}to{width:100%}}
.md-slider__panah{position:absolute;z-index:7;top:50%;width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);color:#1C2A8E;font-size:1.7rem;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.2);translate:0 -50%;transition:scale .2s}
.md-slider__panah:hover{scale:1.08}
.md-slider__panah--kiri{left:10px}
.md-slider__panah--kanan{right:10px}
.md-slider__titik{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.md-slider__titik button{width:10px;height:10px;padding:0;border:0;border-radius:999px;cursor:pointer;background:rgba(28,42,142,.25);transition:width .3s,background .3s}
.md-slider__titik button[aria-current="true"]{width:26px;background:#1C2A8E}
.md-slider__hitung{font-weight:800;font-size:.85rem;color:#1C2A8E;font-variant-numeric:tabular-nums}

/* ---------- kontrol jeda & bunyi ---------- */
.md-bawah{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;padding:12px 0 4px}
.md-kendali{display:flex;gap:8px}
.md-kendali__tombol{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:2px solid #1C2A8E;border-radius:50%;
  background:#fff;color:#1C2A8E;font-size:1rem;line-height:1;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.md-kendali__tombol:hover{background:#FFF1B3;transform:scale(1.06)}
.md-kendali__tombol[aria-pressed="true"]{background:#1C2A8E;color:#FFD21E}
.md-kendali__tombol:focus-visible{outline:3px solid #FFD21E;outline-offset:2px}
.md-kendali__tombol.is-ajak{animation:md-ajak-bunyi 1.6s ease-out infinite}
.md-kendali__tombol.is-ajak::after{content:"Bunyi kriuk!";position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 0;padding:4px 10px;border-radius:999px;
  background:#C8341F;color:#fff;font-size:.72rem;font-weight:800;white-space:nowrap;pointer-events:none}
@keyframes md-ajak-bunyi{0%{box-shadow:0 0 0 0 rgba(200,52,31,.55)}100%{box-shadow:0 0 0 14px rgba(200,52,31,0)}}

/* ---------- penempatan di halaman ---------- */
.md-slot--hero{max-width:980px;margin:0 auto}
.md-slot--hero .md-bingkai{--md-radius:26px;box-shadow:0 30px 60px -30px rgba(74,42,20,.55)}
.md-slot--hero .md__img,.md-slot--hero .md__video{max-height:78vh;object-fit:contain}
.md-slot--galeri{max-width:900px;margin:0 auto}
.md-slot--galeri .md__img{aspect-ratio:16 / 10;object-fit:cover}
.kb-rasa-kartu__media{margin:4px 0 20px}
.kb-rasa-kartu__media .md-bingkai{--md-radius:16px}
.kb-rasa-kartu__media .md__img,.kb-rasa-kartu__media .md__video{aspect-ratio:4 / 3;object-fit:cover}
.kb-kemasan__media .md-bingkai,.kb-tentang-media .md-bingkai{--md-radius:22px}
.kb-kemasan .md-slider__hitung{color:#FFD21E}
.kb-kemasan .md-slider__titik button{background:rgba(255,255,255,.35)}
.kb-kemasan .md-slider__titik button[aria-current="true"]{background:#FFD21E}
.kb-kemasan .md-kendali__tombol{background:transparent;border-color:#FFD21E;color:#FFD21E}
@media (max-width:900px){.kb-kemasan__media{order:2}}
@media (max-width:620px){.md-slider__panah{width:36px;height:36px;font-size:1.4rem}.md-kendali__tombol{width:36px;height:36px}}

/* ---------- jeda oleh pengunjung ---------- */
.md-jeda .md-anim,.md-jeda .md-anim *{animation-play-state:paused!important}

/* ---------- perangkat minta "kurangi gerakan": versi kalem ---------- */
html.md-gerak-kalem .md-anim.is-tampil .md-bingkai{animation:md-masuk-pudar .8s ease both}
html.md-gerak-kalem .md-anim .md-gerak{animation-duration:24s!important}
html.md-gerak-kalem .md-anim--kriuk .md-gerak,html.md-gerak-kalem .md-anim--miring .md-gerak,html.md-gerak-kalem .md-anim--denyut .md-gerak,html.md-gerak-kalem .md-anim--remah .md-gerak{animation:none}
html.md-gerak-kalem .md-kriuk,html.md-gerak-kalem .md-pecah,html.md-gerak-kalem .md-remah--jatuh,html.md-gerak-kalem .md-orbit,html.md-gerak-kalem .md-riak{display:none}
html.md-gerak-kalem .md-stiker,html.md-gerak-kalem .md-lencana{animation:none;transform:rotate(var(--r,-8deg))}
html.md-gerak-kalem .md-kilau{animation-duration:9s}
html.md-gerak-kalem .md-sinar{animation-duration:60s}

/* ---------- tanpa animasi ---------- */
html.md-gerak-mati .md-anim,html.md-gerak-mati .md-anim *{animation:none!important;transition:none!important}
html.md-gerak-mati .md-kriuk,html.md-gerak-mati .md-pecah,html.md-gerak-mati .md-remah,html.md-gerak-mati .md-orbit,html.md-gerak-mati .md-kilau,html.md-gerak-mati .md-riak,html.md-gerak-mati .md-bintang{display:none}
html.md-gerak-mati .md-stiker{transform:rotate(var(--r,-8deg))}
html.md-gerak-mati .md-anim.md-siap .md-bingkai{opacity:1}
html.md-gerak-mati .md-anim .md-promo > *{opacity:1!important;transform:none!important}

/* ---------- tanpa JavaScript + perangkat minta kurangi gerakan ---------- */
@media (prefers-reduced-motion:reduce){
  html:not(.md-js) .md-anim .md-gerak,html:not(.md-js) .md-stiker{animation:none}
  html:not(.md-js) .md-kriuk,html:not(.md-js) .md-pecah,html:not(.md-js) .md-remah,html:not(.md-js) .md-orbit{display:none}
}