/* digiwebs.media/demo/… — lapisan bersama untuk demo tema (magazine, news, blog, landing) & kit sosmed (v110).
   Isi: (1) pita "demo" kaca bertanda ubin DIGIWEBS, (2) penghalusan editorial yang TIDAK mengganti identitas tema (judul seimbang, paragraf rapi,
   angka tabular di meta, sorotan :target, fokus terlihat, gerak hormat "kurangi gerakan"), (3) halaman kit desain sosmed bergaya DIGIWEBS.
   Demo industri (demo/<slug>/) punya gaya sendiri dan sejak v110 juga memuat berkas ini untuk (4) elemen ala ponsel — semua aturan bagian 4
   berlingkup body.hp (hanya demo industri) dan TIDAK menyentuh demo tema. */

/* ---------------------------------------------------------------- 1. pita demo */
.demo-pita{position:fixed;left:12px;bottom:12px;z-index:9999;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;max-width:calc(100% - 88px);
  padding:8px 16px 8px 10px;border-radius:18px;background:rgba(16,21,28,.84);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  color:#F0F6FC;font:600 13px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;border:1px solid rgba(148,163,184,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 32px -8px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3)}
.demo-pita::before{content:"";flex:none;width:20px;height:20px;border-radius:6px;
  background:radial-gradient(120% 75% at 50% -8%,rgba(255,255,255,.55),rgba(255,255,255,0) 58%),linear-gradient(145deg,#E4FFB5,#A3E635 45%,#22C55E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.demo-pita a{color:#D9FF9E;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:3px 0;min-height:24px;box-sizing:border-box}
.demo-pita a:hover{color:#fff}
.demo-pita a:focus-visible{outline:2px solid #D9FF9E;outline-offset:2px;border-radius:4px}
@media print{.demo-pita{display:none}}
/* v66/v67: tombol "ke atas" naik di atas pita; isi terakhir tidak tertutup pita (WCAG 2.5.8 & audit tata letak di ujung halaman) */
body:has(.demo-pita) .ke-atas{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
body:has(.demo-pita){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body:has(.demo-pita) .muncul{bottom:calc(78px + env(safe-area-inset-bottom,0px))}

/* ---------------------------------------------------------------- 2. penghalusan editorial (tanpa mengganti warna/huruf tema) */
body:has(.demo-pita) :is(h1,h2,h3,.entry-title,.kartu-judul){text-wrap:balance}
body:has(.demo-pita) :is(p,li,figcaption){text-wrap:pretty}
body:has(.demo-pita) :is(.meta,time,.tanggal){font-variant-numeric:tabular-nums}
body:has(.demo-pita) :target{scroll-margin-top:96px}
body:has(.demo-pita) :is(h2,h3,section):target{animation:demo-sorot 1.6s ease-out}
@keyframes demo-sorot{0%{box-shadow:0 0 0 6px rgba(163,230,53,.45)}100%{box-shadow:0 0 0 6px rgba(163,230,53,0)}}
body:has(.demo-pita) a:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media (prefers-reduced-motion:reduce){body:has(.demo-pita) :target{animation:none}}

/* ---------------------------------------------------------------- 3. kit desain sosmed (demo/social/) */
.sos-tubuh{margin:0;min-height:100vh;color:#F0F6FC;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:radial-gradient(50% 40% at 85% 0%,rgba(124,58,237,.28),transparent 70%),radial-gradient(40% 35% at 0% 30%,rgba(14,165,233,.16),transparent 70%),#10151C}
.sos-isi{max-width:1180px;margin:0 auto;padding:56px 16px 96px}
.sos-isi h1{font-size:clamp(32px,5.4vw,58px);line-height:1.02;letter-spacing:-.035em;margin:0 0 14px;font-weight:800;text-wrap:balance}
.sos-lead{max-width:62ch;color:#AAB4C3;font-size:clamp(16px,1.4vw,18px);margin:0 0 36px}
.sos-kisi{columns:4 240px;column-gap:18px}
.sos-kartu{break-inside:avoid;margin:0 0 18px;background:#151C24;border:1px solid rgba(148,163,184,.2);border-radius:22px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 32px -8px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s,box-shadow .18s}
.sos-kartu:hover{transform:translateY(-4px);border-color:rgba(182,242,94,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 50px -16px rgba(0,0,0,.7)}
.sos-kartu a{display:block;overflow:hidden}
.sos-kartu img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.sos-kartu:hover img{transform:scale(1.035)}
.sos-kartu figcaption{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;font-size:14px;border-top:1px solid rgba(148,163,184,.12)}
.sos-kartu figcaption b{align-self:flex-start;padding:3px 9px;border-radius:999px;font-size:12.5px;color:#D9FF9E;background:rgba(182,242,94,.1);border:1px solid rgba(182,242,94,.25)}
.sos-kartu figcaption span{color:#AAB4C3}
.sos-kartu a:focus-visible{outline:3px solid #B6F25E;outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.sos-kartu,.sos-kartu img{transition:none}.sos-kartu:hover{transform:none}.sos-kartu:hover img{transform:none}}

/* ================================================================ 4. demo industri: elemen ala ponsel (v110, Direktur 02/11 16:50–16:53)
   Dibuat lp/_alat/demo_hp.py. Berlingkup body.hp. Warna dari token situs (--acc, --acc2, --card, --line, --fg, --muted, --ink) sehingga
   24 demo tetap berbeda; model kartu per demo: .hp-m-ios · .hp-m-poster · .hp-m-hud · .hp-m-neon · .hp-m-split.
   Adaptif platform TANPA JS & tanpa geser tata letak: iOS → @supports (-webkit-touch-callout:none); Android/sentuh lain → (pointer:coarse) +
   @supports not (…) → gaya Material 3. Gerak hanya transform/opacity dan hanya bila prefers-reduced-motion: no-preference. */
body.hp{--hp-r:clamp(10px,calc(var(--r,12px) * 1.8),26px);--hp-huruf:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --hp-acc2:var(--acc2,var(--acc));--hp-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace}

/* ---- bagian "Sekilas" (layar beranda ponsel) */
.hp-sekilas{padding-block:clamp(28px,5vw,56px) 0}
.hp-atas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
body.hp .hp-judul{margin:0;font:700 13px/1.2 var(--hp-huruf);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hp-kisi{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.hp-kartu{position:relative;isolation:isolate;flex:1 1 250px;min-width:0;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--hp-r);
  background:linear-gradient(180deg,color-mix(in srgb,#fff 5%,transparent),transparent 55%),var(--card);color:var(--fg);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 14px 32px -20px rgba(0,0,0,.45);font-family:var(--hp-huruf);container-type:inline-size}
.hp-minggu{flex-basis:320px}.hp-kal{flex-basis:340px}.hp-kontak{flex-basis:290px}
.hp-k-atas{display:flex;align-items:center;gap:10px;min-height:28px}
body.hp .hp-k-atas h3{margin:0;font:700 15px/1.25 var(--hp-huruf);letter-spacing:-.005em;min-width:0}
.hp-contoh{margin-left:auto;flex:none;padding:3px 8px;border-radius:999px;font:700 11px/1.2 var(--hp-huruf);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px dashed color-mix(in srgb,var(--muted) 60%,transparent)}
.hp-kartu p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}

/* ubin ikon aplikasi: squircle gradien + glif putih + kilap atas */
.hp-ikon{--s:56px;position:relative;flex:none;display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .28);color:#fff;
  --t1:color-mix(in srgb,var(--acc) 55%,#fff);--t2:var(--acc);--t3:color-mix(in srgb,var(--acc) 68%,#000);
  background:radial-gradient(120% 75% at 50% -8%,rgba(255,255,255,.5),rgba(255,255,255,0) 58%),linear-gradient(145deg,var(--t1) 0%,var(--t2) 46%,var(--t3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(0,0,0,.18),0 8px 16px -8px rgba(0,0,0,.5)}
.hp-ikon::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);pointer-events:none}
body.hp .hp-ikon svg{width:54%;height:54%;max-width:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1.2px rgba(0,0,0,.3))}
.hp-t2{--t1:color-mix(in srgb,var(--hp-acc2) 55%,#fff);--t2:var(--hp-acc2);--t3:color-mix(in srgb,var(--hp-acc2) 62%,#000)}
.hp-t3{--t1:color-mix(in srgb,var(--acc) 45%,var(--hp-acc2));--t2:color-mix(in srgb,var(--acc) 60%,#1E3A8A);--t3:color-mix(in srgb,var(--acc) 40%,#0B1020)}
.hp-t4{--t1:color-mix(in srgb,#64748B 80%,var(--acc));--t2:color-mix(in srgb,#1F2937 88%,var(--acc));--t3:#0B0F15}
.hp-kecil{--s:28px;border-radius:9px}.hp-mini{--s:26px;border-radius:8px}
.hp-app ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px}
.hp-app a{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:44px;padding:4px 2px;border-radius:14px;color:var(--fg);text-decoration:none;
  font:600 12.5px/1.25 var(--hp-huruf);text-align:center}
.hp-app a:focus-visible{outline:3px solid var(--acc-t);outline-offset:2px}
.hp-label{max-width:100%;overflow-wrap:normal;hyphens:manual}
@container (min-width:480px){.hp-app ul{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* jam buka minggu ini */
.hp-hari{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.hp-hari li{display:grid;place-items:center;min-height:44px;border-radius:12px;font:700 12px/1 var(--hp-huruf)}
.hp-hari abbr{text-decoration:none}
.hp-hari .buka{background:color-mix(in srgb,var(--acc) 16%,var(--card));color:var(--acc-t);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}
.hp-hari .tutup{color:var(--muted);background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--line) 85%,transparent) 5px 7px)}
.hp-minggu:has(input:checked) .hp-hari .tutup{color:var(--fg);box-shadow:inset 0 0 0 2px var(--acc-t)}
.hp-waktu{font-weight:600}

/* sakelar (gaya dasar; iOS & Material 3 di bawah) — kotak centang asli tetap bisa difokus & diklik */
body.hp .hp-saklar{position:relative;display:flex;flex-direction:row;align-items:center;gap:10px;margin-top:auto;font:600 13.5px/1.3 var(--hp-huruf);color:var(--fg);cursor:pointer}
body.hp .hp-saklar input{position:absolute;left:0;top:50%;width:44px;height:26px;min-height:0;margin:-13px 0 0;padding:0;border:0;opacity:0;cursor:pointer}
.hp-saklar-jalur{--lb:44px;--tg:26px;--jempol:20px;position:relative;flex:none;width:var(--lb);height:var(--tg);border-radius:999px;background:color-mix(in srgb,var(--muted) 35%,var(--card));
  transition:background-color .2s}
.hp-saklar-jalur::after{content:"";position:absolute;left:3px;top:calc((var(--tg) - var(--jempol)) / 2);width:var(--jempol);height:var(--jempol);border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
.hp-saklar input:checked+.hp-saklar-jalur{background:var(--acc)}
.hp-saklar input:checked+.hp-saklar-jalur::after{transform:translateX(calc(var(--lb) - var(--jempol) - 6px))}
.hp-saklar input:focus-visible+.hp-saklar-jalur{outline:3px solid var(--acc-t);outline-offset:2px}

/* kalender reservasi contoh */
.hp-kal-hari,.hp-kal-tgl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.hp-kal-hari li{font:700 11px/1 var(--hp-huruf);color:var(--muted);letter-spacing:.02em}
.hp-kal-hari abbr{text-decoration:none}
.hp-kal-tgl li{display:grid;place-items:center;height:30px;border-radius:50%;font:600 13px/1 var(--hp-huruf);font-variant-numeric:tabular-nums}
.hp-awal-2 li:first-child{grid-column-start:2}.hp-awal-3 li:first-child{grid-column-start:3}.hp-awal-4 li:first-child{grid-column-start:4}
.hp-awal-5 li:first-child{grid-column-start:5}.hp-awal-6 li:first-child{grid-column-start:6}.hp-awal-7 li:first-child{grid-column-start:7}
.hp-kal-tgl .tutup{color:color-mix(in srgb,var(--muted) 70%,transparent);text-decoration:line-through;text-decoration-thickness:1px}
.hp-kal-tgl .dipilih{background:var(--acc);color:var(--ink);box-shadow:0 6px 14px -6px var(--acc)}
.hp-kal-ket{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font:600 12px/1.3 var(--hp-huruf);color:var(--muted)}
.hp-kal-ket li{display:inline-flex;align-items:center;gap:6px}
.hp-kal-ket li::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--fg)}
.hp-kal-ket .tutup::before{border-style:dashed;border-color:var(--muted)}
.hp-kal-ket .dipilih::before{border-color:var(--acc);background:var(--acc)}

/* lokasi */
.hp-peta{display:block;width:100%;height:auto;max-height:120px;border-radius:calc(var(--hp-r) * .6);background:color-mix(in srgb,var(--line) 45%,var(--card))}
.hp-peta path{fill:none;stroke:var(--card);stroke-width:9;stroke-linecap:round}
.hp-peta .pin{fill:var(--acc)}.hp-peta .inti{fill:var(--ink)}
/* kontak */
.hp-kontak ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hp-kontak li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.hp-kontak li .hp-ikon{grid-row:span 2}
.hp-kontak li b{color:var(--fg);font-size:13px;overflow-wrap:anywhere}
.hp-tombol{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--acc);color:var(--ink);
  font:700 14px/1.2 var(--hp-huruf);text-decoration:none;text-align:center}
.hp-tombol:focus-visible{outline:3px solid var(--acc-t);outline-offset:2px}
/* info jadwal */
.hp-besar{font:700 clamp(18px,2vw,22px)/1.25 var(--fh)!important;color:var(--fg)!important}

/* ---- tautan bagikan (tanpa JS: mailto) dengan glif per platform */
.hp-bagi{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);
  font:600 13.5px/1 var(--hp-huruf);text-decoration:none;flex:none}
.hp-bagi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hp-bagi .g-and{display:none}
.hp-bagi:focus-visible{outline:3px solid var(--acc-t);outline-offset:2px}

/* ---- model kartu */
/* poster: gambar + selubung gradien + huruf besar */
.hp-poster{padding:0;min-height:230px;overflow:hidden;justify-content:flex-end;border:0;color:#fff;background:#111}
.hp-poster .hp-poster-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;display:block}
.hp-poster::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 18%,rgba(0,0,0,.35) 48%,rgba(0,0,0,.82) 100%)}
.hp-poster-isi{display:flex;flex-direction:column;gap:6px;padding:18px}
body.hp .hp-poster h3{margin:0;font:800 clamp(24px,12cqi,40px)/1.08 var(--fh);letter-spacing:-.02em;color:#fff;overflow-wrap:normal}
.hp-poster p{color:rgba(255,255,255,.9)!important}
body.hp .hp-m-poster .hp-k-atas h3{font:800 20px/1.1 var(--fh);letter-spacing:-.01em}
/* HUD: braket sudut digambar dengan latar gradien */
.hp-m-hud .hp-kartu{border-radius:4px;border-color:color-mix(in srgb,var(--acc) 28%,var(--line));
  --b:var(--acc);background:
  linear-gradient(var(--b),var(--b)) left top/18px 2px no-repeat,linear-gradient(var(--b),var(--b)) left top/2px 18px no-repeat,
  linear-gradient(var(--b),var(--b)) right top/18px 2px no-repeat,linear-gradient(var(--b),var(--b)) right top/2px 18px no-repeat,
  linear-gradient(var(--b),var(--b)) left bottom/18px 2px no-repeat,linear-gradient(var(--b),var(--b)) left bottom/2px 18px no-repeat,
  linear-gradient(var(--b),var(--b)) right bottom/18px 2px no-repeat,linear-gradient(var(--b),var(--b)) right bottom/2px 18px no-repeat,
  repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--line) 30%,transparent) 3px 4px),var(--card)}
body.hp .hp-m-hud .hp-k-atas h3{font:700 12.5px/1.2 var(--hp-mono);letter-spacing:.1em;text-transform:uppercase}
.hp-m-hud .hp-contoh{border-radius:2px;font-family:var(--hp-mono)}
/* neon bergaris */
.hp-m-neon .hp-kartu{background:color-mix(in srgb,var(--card) 90%,#000);border:1.5px solid var(--acc);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent),0 0 24px -4px color-mix(in srgb,var(--acc) 60%,transparent),inset 0 0 20px -8px color-mix(in srgb,var(--acc) 55%,transparent)}
body.hp .hp-m-neon .hp-k-atas h3{text-shadow:0 0 14px color-mix(in srgb,var(--acc) 70%,transparent)}
/* split majalah: blok warna + judul serif besar | isi */
body.hp .hp-m-split .hp-kartu:not(.hp-app):not(.hp-kal) .hp-k-atas{margin:-16px -16px 2px;padding:14px 16px;border-radius:var(--hp-r) var(--hp-r) 0 0;background:var(--acc);color:var(--ink)}
body.hp .hp-m-split .hp-kartu:not(.hp-app):not(.hp-kal) .hp-k-atas h3{font:700 clamp(21px,2.2vw,26px)/1.05 var(--fh);letter-spacing:-.01em;color:var(--ink)}
.hp-m-split .hp-kartu:not(.hp-app):not(.hp-kal){border-top:0}
.hp-m-split .hp-kartu:not(.hp-app):not(.hp-kal) .hp-k-atas .hp-ikon{display:none}
.hp-m-split .hp-kartu:not(.hp-app):not(.hp-kal) .hp-contoh{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 60%,transparent)}

/* ---- pil aksi mengambang (HP) + pita demo dua baris tetap */
.hp-dok{display:none}
@media (max-width:760px){
  .hp-dok{position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:998;display:flex;gap:4px;height:56px;padding:4px;border-radius:999px;
    background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid var(--line);box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
    -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);font:600 14.5px/1.2 var(--hp-huruf)}
  .hp-dok a{display:flex;align-items:center;justify-content:center;gap:8px;min-width:48px;padding:0 12px;border-radius:999px;color:var(--fg);text-decoration:none}
  .hp-dok a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hp-dok .hp-dok-utama{flex:1 1 auto;min-width:0;background:var(--acc);color:var(--ink)}
  .hp-dok .hp-dok-utama span{position:static;width:auto;height:auto;clip:auto;overflow:hidden;text-overflow:ellipsis}
  .hp-dok svg{flex:none;width:21px;height:21px;max-width:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .hp-dok a:focus-visible{outline:3px solid var(--acc-t);outline-offset:2px}
  body.hp:has(.hp-dok){padding-bottom:calc(164px + env(safe-area-inset-bottom,0px))}
  body.hp .dw-pita{display:grid;grid-template-columns:20px auto minmax(0,1fr) auto auto;grid-template-rows:20px 32px;gap:4px 10px;align-items:center;right:12px;max-width:none;
    height:74px;box-sizing:border-box;padding:7px 8px 7px 12px}
  body.hp .dw-pita::before{grid-area:1/1}
  body.hp .dw-pita>span{grid-area:1/2/2/6;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.hp .dw-pita>a{grid-area:2/1/3/3;white-space:nowrap}
  body.hp .dw-pita .dw-bahasa{grid-area:2/4}
  body.hp .dw-pita .dw-tema{grid-area:2/5}
}

/* ---- iOS: bilah beku, squircle, sakelar hijau, glif bagikan iOS */
@supports (-webkit-touch-callout:none){
  body.hp .kp{background:color-mix(in srgb,var(--bg) 68%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
  body.hp .hp-dok{background:color-mix(in srgb,var(--bg) 60%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(22px);backdrop-filter:saturate(1.8) blur(22px);
    border:.5px solid color-mix(in srgb,var(--fg) 20%,transparent)}
  .hp-saklar-jalur{--lb:51px;--tg:31px;--jempol:27px;background:color-mix(in srgb,var(--muted) 28%,var(--card))}
  .hp-saklar-jalur::after{left:2px;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06)}
  .hp-saklar input:checked+.hp-saklar-jalur{background:#34C759}
  .hp-saklar input:checked+.hp-saklar-jalur::after{transform:translateX(calc(var(--lb) - var(--jempol) - 4px))}
  body.hp .hp-saklar input{width:51px;height:31px;margin-top:-15.5px}
  .hp-m-ios .hp-kartu{border-color:transparent;box-shadow:0 2px 6px rgba(0,0,0,.06),0 18px 36px -22px rgba(0,0,0,.45)}
}
/* ---- Android & layar sentuh lain: Material 3 (ikon bulat, permukaan tonal, indikator pil, sakelar M3, glif bagikan Android) */
@media (pointer:coarse){@supports not (-webkit-touch-callout:none){
  body.hp .hp-ikon{border-radius:50%;background:linear-gradient(145deg,var(--t2),var(--t3));box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15)}
  body.hp .hp-ikon::after{display:none}
  body.hp .hp-ikon svg{filter:none}
  body.hp .hp-kecil,body.hp .hp-mini{border-radius:50%}
  .hp-m-ios .hp-kartu{border:0;border-radius:24px;background:color-mix(in srgb,var(--acc) 7%,var(--card));box-shadow:none}
  body.hp .hp-dok{border-radius:16px;border:0;background:color-mix(in srgb,var(--acc) 12%,var(--card));-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 1px 3px rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15)}
  body.hp .hp-dok a{border-radius:12px}
  body.hp .hp-dok .hp-dok-utama{border-radius:12px;background:color-mix(in srgb,var(--acc) 26%,var(--card));color:var(--fg)}
  body.hp .hp-dok .hp-dok-utama svg{color:var(--acc-t)}
  body.hp .mm>div a{border-radius:999px}
  body.hp .mm>div a:hover,body.hp .mm>div a:focus-visible{background:color-mix(in srgb,var(--acc) 16%,transparent)}
  .hp-saklar-jalur{--lb:52px;--tg:32px;--jempol:16px;background:transparent;box-shadow:inset 0 0 0 2px var(--muted)}
  .hp-saklar-jalur::after{left:6px;background:var(--muted);box-shadow:none;transition:transform .2s,width .2s,height .2s}
  .hp-saklar input:checked+.hp-saklar-jalur{background:var(--acc);box-shadow:none}
  .hp-saklar input:checked+.hp-saklar-jalur::after{background:var(--ink);transform:translate(20px,-4px) scale(1.5)}
  body.hp .hp-saklar input{width:52px;height:32px;margin-top:-16px}
  .hp-bagi{border-radius:12px}
  .hp-bagi .g-ios{display:none}.hp-bagi .g-and{display:block}
}}

/* ---- gerak ala video (hanya transform/opacity; tidak pada hero/LCP) */
@media (prefers-reduced-motion:no-preference){
  body.hp main>section:not(:first-child) svg.foto>*,.hp-poster .hp-poster-foto>*{transform-box:view-box;transform-origin:50% 50%;transition:transform 6s cubic-bezier(.2,.6,.2,1)}
  body.hp main>section:not(:first-child) :is(a,div,figure,article):hover>svg.foto>*,body.hp main>section:not(:first-child) svg.foto:hover>*,.hp-poster:hover .hp-poster-foto>*{transform:scale(1.09) translate(-1.5%,-1%)}
  .hp-poster .hp-poster-foto>*{animation:hp-kenburns 16s ease-in-out infinite alternate}
  @keyframes hp-kenburns{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,-1.5%)}}
  body.hp .btn{position:relative;overflow:hidden;isolation:isolate}
  body.hp .btn::after{content:"";position:absolute;top:-2px;bottom:-2px;left:-60%;width:45%;z-index:1;pointer-events:none;opacity:0;transform:skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
  body.hp .btn:hover::after,.hp-tombol:hover::after{animation:hp-sapu .62s cubic-bezier(.22,1,.36,1)}
  .hp-tombol{position:relative;overflow:hidden;isolation:isolate}
  .hp-tombol::after{content:"";position:absolute;top:-2px;bottom:-2px;left:-60%;width:45%;pointer-events:none;opacity:0;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
  @keyframes hp-sapu{0%{transform:skewX(-20deg) translateX(0);opacity:0}15%{opacity:1}100%{transform:skewX(-20deg) translateX(420%);opacity:0}}
  body.hp .nv a{position:relative}
  body.hp .nv a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.22,1,.36,1)}
  body.hp .nv a:hover::after,body.hp .nv a:focus-visible::after{transform:scaleX(1)}
  .hp-app a .hp-ikon{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
  .hp-app a:hover .hp-ikon{transform:translateY(-3px) scale(1.06)}
  .hp-app a:active .hp-ikon{transform:scale(.92)}
  /* satu penampakan teratur per bagian (scroll-driven, tanpa JS); elemen yang sudah terlihat saat dimuat langsung utuh */
  @supports (animation-timeline:view()){
    .hp-kisi>*{animation:hp-naik linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .hp-kisi>:nth-child(2){animation-range:entry 6% entry 86%}.hp-kisi>:nth-child(3){animation-range:entry 12% entry 92%}
    .hp-kisi>:nth-child(4){animation-range:entry 18% entry 98%}.hp-kisi>:nth-child(n+5){animation-range:entry 22% entry 100%}
    body.hp main>section:not(:first-child):not(.hp-sekilas) .bag-judul{animation:hp-naik linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes hp-naik{from{opacity:0;transform:translateY(26px) scale(.98)}}
  }
}
@media print{.hp-dok{display:none}}