/* DIGIWEBS Motion (v62) — bahasa gerak & cahaya merek: hitam pekat + SATU cahaya hijau terang.
   Primitif: cahaya ambient, kaca bertepi neon, pita cahaya (light sweep), ketikan, dial jaringan, dorongan kamera saat digulir.
   Semua animasi hanya transform/opacity/filter (ramah kompositor); prefers-reduced-motion mematikan gerak; tanpa JS konten tetap utuh. */
:root{--cahaya:#01F36D;--cahaya-2:#8CFFBC;--cahaya-redup:rgba(1,243,109,.16);--kaca:rgba(6,26,15,.58);--kaca-tepi:rgba(140,255,188,.22);--hitam:#000}
:root:not([data-theme="dark"]){--cahaya:#019343;--cahaya-2:#01B954;--cahaya-redup:rgba(1,147,67,.14);--kaca:rgba(255,255,255,.62);--kaca-tepi:rgba(1,120,60,.22)}

/* ---- panggung: lapisan cahaya ambient di belakang hero ---- */
.panggung{position:relative;isolation:isolate;overflow:hidden}
.panggung::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;z-index:-2;pointer-events:none;
  background:radial-gradient(60% 50% at 70% 35%,color-mix(in srgb,var(--cahaya) 22%,transparent),transparent 70%),
             radial-gradient(40% 40% at 15% 80%,color-mix(in srgb,var(--cahaya) 12%,transparent),transparent 70%);
  animation:panggung-napas 18s ease-in-out infinite alternate}
.kontur{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  -webkit-mask-image:radial-gradient(70% 70% at 68% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(70% 70% at 68% 40%,#000 30%,transparent 75%)}
.kontur svg{width:100%;height:100%}
.kontur rect{fill:none;stroke:color-mix(in srgb,var(--cahaya) 30%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.kontur g{transform-origin:68% 40%;animation:kontur-mekar 14s linear infinite}
@keyframes panggung-napas{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
@keyframes kontur-mekar{from{transform:scale(.92);opacity:.55}50%{opacity:.85}to{transform:scale(1.08);opacity:.55}}

/* ---- kaca bertepi neon ---- */
.kaca{position:relative;background:var(--kaca);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--kaca-tepi);border-radius:24px;box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.kaca::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,color-mix(in srgb,var(--cahaya) 80%,transparent),transparent 34%,transparent 66%,color-mix(in srgb,var(--cahaya) 55%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.kaca::after{content:"";position:absolute;inset:auto 8% -18px;height:36px;border-radius:50%;pointer-events:none;z-index:-1;
  background:color-mix(in srgb,var(--cahaya) 45%,transparent);filter:blur(28px);opacity:.55}

/* ---- konsol hero (kartu bukti) ---- */
.konsol{max-width:480px}
.konsol .dial{display:block;width:132px;height:132px;margin:2px auto 10px}
.dial .cincin{fill:none;stroke:color-mix(in srgb,var(--cahaya) 22%,transparent);stroke-width:1}
.dial .tik{stroke:color-mix(in srgb,var(--cahaya) 45%,transparent);stroke-width:1.2}
.dial .sapu{transform-origin:66px 66px;animation:dial-putar 6s linear infinite}
.dial .sapu path{fill:url(#dial-sapu)}
.dial .jarum{stroke:var(--cahaya);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--cahaya))}
.dial .inti{fill:var(--cahaya);filter:drop-shadow(0 0 10px var(--cahaya))}
@keyframes dial-putar{to{transform:rotate(360deg)}}
.konsol .gelembung{margin-top:14px;padding:12px 14px;border-radius:16px 16px 16px 6px;font-size:.92rem;line-height:1.45;color:var(--teks);
  background:color-mix(in srgb,var(--cahaya) 9%,transparent);border:1px solid var(--kaca-tepi);min-height:3.2em}
.konsol .gelembung small{display:block;font-size:.72rem;color:var(--redup);margin-bottom:4px}
.ketik::after{content:"";display:inline-block;width:.5em;height:1.05em;vertical-align:-.15em;margin-left:2px;background:var(--cahaya);animation:kursor-kedip 1s steps(1) infinite}
.ketik.selesai::after{display:none}
@keyframes kursor-kedip{50%{opacity:0}}

/* ---- judul: kilau sekali saat tampil ---- */
.kilau-judul{background:linear-gradient(100deg,var(--teks) 0 40%,var(--cahaya-2) 50%,var(--teks) 60% 100%);background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:kilau-lewat 2.6s .4s cubic-bezier(.3,.6,.2,1) both}
@keyframes kilau-lewat{to{background-position:0 0}}

/* ---- pita cahaya (light sweep) dengan kata kemampuan bergantian ---- */
.pita-sapu{position:relative;height:84px;margin:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pita-sapu::before{content:"";position:absolute;left:-10%;right:-10%;top:50%;height:46px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cahaya) 55%,transparent) 30%,color-mix(in srgb,var(--cahaya-2) 75%,transparent) 50%,color-mix(in srgb,var(--cahaya) 55%,transparent) 70%,transparent);
  filter:blur(10px);opacity:.55;animation:pita-denyut 3s ease-in-out infinite}
.pita-sapu::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,var(--cahaya-2),transparent);box-shadow:0 0 18px var(--cahaya)}
.pita-sapu ol{list-style:none;margin:0;padding:0;position:relative;z-index:1;width:100%;height:100%}
.pita-sapu li{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 clamp(22px,3vw,34px)/1 Unbounded,system-ui,sans-serif;
  letter-spacing:-.01em;color:#fff;text-shadow:0 0 18px color-mix(in srgb,var(--cahaya) 80%,transparent);opacity:0;animation:pita-kata 18s infinite}
:root:not([data-theme="dark"]) .pita-sapu li{color:#04170C;text-shadow:0 0 16px rgba(255,255,255,.9)}
.pita-sapu li:nth-child(2){animation-delay:3s}.pita-sapu li:nth-child(3){animation-delay:6s}.pita-sapu li:nth-child(4){animation-delay:9s}
.pita-sapu li:nth-child(5){animation-delay:12s}.pita-sapu li:nth-child(6){animation-delay:15s}
@keyframes pita-kata{0%{opacity:0;transform:translateX(18%) scale(.96);filter:blur(8px)}4%,13%{opacity:1;transform:none;filter:none}
  17%,100%{opacity:0;transform:translateX(-18%) scale(.96);filter:blur(8px)}}
@keyframes pita-denyut{50%{opacity:.85;transform:translateY(-50%) scaleY(1.15)}}

/* ---- dorongan kamera saat digulir (scroll-driven; peramban lama: diam) ---- */
@supports (animation-timeline:view()){
  .dorong{animation:dorong-masuk linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
  @keyframes dorong-masuk{from{opacity:.15;transform:perspective(1200px) translateZ(-140px) translateY(40px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
}

/* ---- transisi antarhalaman (View Transitions lintas dokumen; peramban lain: pindah biasa) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-keluar .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-masuk .42s cubic-bezier(0,0,.2,1) both}
@keyframes vt-keluar{to{opacity:0;filter:blur(6px);transform:scale(.985)}}
@keyframes vt-masuk{from{opacity:0;filter:blur(8px);transform:scale(1.015)}}

@media (prefers-reduced-motion:reduce){
  .panggung::before,.kontur g,.dial .sapu,.pita-sapu::before,.ketik::after,.kilau-judul{animation:none}
  .kilau-judul{background:none;color:inherit}
  .pita-sapu li{animation:none;opacity:0}.pita-sapu li:first-child{opacity:1}
  .dorong{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---- v62: komponen layanan & cek situs ---- */
.hal-kepala{position:relative;isolation:isolate;overflow:hidden}
.hal-kepala::after{content:"";position:absolute;inset:-30% -10% auto 40%;height:160%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 60% 40%,color-mix(in srgb,var(--cahaya) 18%,transparent),transparent 70%);animation:panggung-napas 18s ease-in-out infinite alternate}
.kartu-layanan svg{color:var(--sinyal);margin-bottom:10px}
:root[data-theme="dark"] .kartu-layanan,:root[data-theme="dark"] .pintu,:root[data-theme="dark"] .kisi-kartu .kartu-3d{background:linear-gradient(180deg,rgba(4,23,12,.85),rgba(2,12,6,.85));border-color:var(--kaca-tepi)}
:root[data-theme="dark"] .kartu-layanan:hover,:root[data-theme="dark"] .kisi-kartu .kartu-3d:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--cahaya) 35%,transparent),0 24px 50px -28px color-mix(in srgb,var(--cahaya) 55%,transparent)}
.ajak-cek{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin:26px 0 8px;padding:22px 24px}
.ajak-cek > div{flex:1 1 420px;min-width:0}
.ajak-cek-judul{font-family:Unbounded,system-ui,sans-serif;font-weight:600;font-size:clamp(1.05rem,2vw,1.35rem);margin:0 0 6px;color:var(--teks)}
.ajak-cek p:not(.ajak-cek-judul){margin:0;color:var(--kabut)}
.dua-kolom-layanan{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:28px 48px;align-items:start}
.daftar-cek{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.daftar-cek li{display:flex;gap:10px;align-items:flex-start;color:var(--kabut)}
.daftar-cek svg{color:var(--sinyal);flex:none;margin-top:3px}
.layanan-lain{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;color:var(--redup);font-size:.9rem}
/* cek situs */
.cek-wadah{display:grid;gap:22px}
.cek-form{padding:clamp(18px,3vw,28px)}
.cek-label{display:block;font-weight:600;margin-bottom:8px}
.cek-baris{display:flex;flex-wrap:wrap;gap:10px}
.cek-baris input{flex:1 1 320px;min-width:0;font:inherit;font-size:1.05rem;padding:14px 16px;border-radius:14px;border:1px solid var(--batas);background:var(--panel);color:var(--teks)}
.cek-baris input:focus{outline:2px solid var(--sinyal);outline-offset:2px}
.cek-jalur{border:0;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px}
.cek-jalur legend{font-weight:600;margin-bottom:8px}
.cek-jalur label{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--garis-2);border-radius:14px;cursor:pointer}
.cek-jalur label:has(input:checked){border-color:var(--sinyal);box-shadow:0 0 0 3px color-mix(in srgb,var(--sinyal) 18%,transparent)}
.cek-jalur input{margin-top:4px;accent-color:var(--sinyal)}
.cek-jalur span{display:flex;flex-direction:column;gap:2px}.cek-jalur small{color:var(--redup)}
.cek-privasi{font-size:.82rem;color:var(--redup);margin:14px 0 0}
.madu{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.sembunyi-visual{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cek-hasil{padding:clamp(18px,3vw,28px)}
.cek-pindai{display:flex;align-items:center;gap:16px;color:var(--kabut)}
.cek-pindai .dial{width:72px;height:72px;margin:0}
.cek-ringkas{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-bottom:18px}
.cek-skor{position:relative;width:120px;height:120px;flex:none}
.cek-skor svg{width:100%;height:100%;transform:rotate(-90deg)}
.cek-skor .jejak{fill:none;stroke:var(--garis-2);stroke-width:9}
.cek-skor .isi{fill:none;stroke:var(--cahaya);stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--cahaya) 60%,transparent));
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.cek-skor b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 1.9rem Unbounded,system-ui,sans-serif;color:var(--teks)}
.cek-ringkas h2{margin:0 0 4px}.cek-ringkas p{margin:0;color:var(--kabut)}
.cek-daftar{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cek-daftar li{display:grid;grid-template-columns:28px 1fr;gap:4px 10px;padding:12px 14px;border:1px solid var(--garis);border-radius:12px;background:color-mix(in srgb,var(--panel) 70%,transparent);
  animation:cek-masuk .4s cubic-bezier(.2,.7,.2,1) both}
.cek-daftar li .tanda{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.cek-daftar li.lulus .tanda{background:color-mix(in srgb,var(--sinyal) 20%,transparent);color:var(--sinyal)}
.cek-daftar li.perlu .tanda{background:rgba(242,165,65,.18);color:#F2A541}
.cek-daftar li.info .tanda{background:var(--garis-2);color:var(--kabut)}
.cek-daftar b{font-weight:600}.cek-daftar small{grid-column:2;color:var(--redup)}
@keyframes cek-masuk{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cek-galat{color:#F2A541}
@media (prefers-reduced-motion:reduce){.hal-kepala::after,.cek-daftar li{animation:none}.cek-skor .isi{transition:none}}
.cek-ringkas > div:last-child{flex:1 1 300px;min-width:0}
.cek-ringkas h2{font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.3;margin:0 0 6px;overflow-wrap:anywhere}
.cek-hasil .baris-tombol{margin-top:18px}
.kisi-dapat{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.alur.panjang{grid-template-columns:repeat(auto-fit,minmax(min(100%,138px),1fr))}
/* muncul saat digulir: sedikit kabur → tajam (kesan "kamera fokus"), tetap ringan */
.js .muncul{filter:blur(5px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s cubic-bezier(.2,.7,.2,1)}
.js .muncul.tampak{filter:none}
@media (prefers-reduced-motion:reduce){.js .muncul{filter:none}}

/* v63 — cek situs v2: gerbang kritis, pilar, 3 teratas */
.cek-gerbang{border-radius:14px;padding:12px 16px;margin:6px 0 14px;border:1px solid}
.cek-gerbang.gagal{background:rgba(255,92,92,.1);border-color:rgba(255,92,92,.45)}.cek-gerbang.lulus{background:rgba(1,243,109,.08);border-color:rgba(1,243,109,.35)}
.cek-gerbang ul{margin:6px 0 0;padding-left:18px}.cek-gerbang small{color:var(--kabut,#B9C9BF)}
.cek-pilar{display:grid;gap:8px;margin:0 0 12px}
.cek-pilar-baris{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.92rem}
.cek-pilar-baris i{display:block;height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.cek-pilar-baris em{display:block;height:100%;background:linear-gradient(90deg,#01F36D,#8CFFBC);border-radius:5px}
.cek-sub{margin:14px 0 6px;font-size:1.02rem}
.cek-daftar li.sebagian .tanda{background:rgba(255,184,77,.16);color:#FFB84D}.cek-daftar li.peluang .tanda{background:rgba(1,243,109,.14);color:#01F36D}
.cek-semua summary{cursor:pointer;margin:12px 0 6px;font-weight:600}
[data-theme="light"] .cek-gerbang small{color:#4D5D53}[data-theme="light"] .cek-pilar-baris i{background:rgba(0,0,0,.08)}
@media (max-width:560px){.cek-pilar-baris{grid-template-columns:1fr auto}.cek-pilar-baris i{grid-column:1/-1;order:3}}