/* =========================================================
   Beranda Enigma IoT — tema gelap modern
   Warna utama mengikuti identitas Enigma IoT (biru toska), aksen cyan
   ========================================================= */
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/PlusJakartaSans.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/JetBrainsMono.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
:root{
  --latar:#05070d; --latar2:#0a0f1a; --panel:#0e1524; --panel2:#131c2f; --garis:#1f2a40;
  --teks:#eef2f8; --redup:#94a3b8; --redup2:#64748b;
  --utama:#0290bc; --cyan:#22d3ee; --hijau:#34d399; --ungu:#818cf8;
  --gradasi:linear-gradient(120deg,#22d3ee 0%,#0290bc 45%,#818cf8 100%);
  --radius:18px; --lebar:1200px;
  --font:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--font);background:var(--latar);color:var(--teks);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wadah{width:min(var(--lebar),100% - 40px);margin-inline:auto}
svg{flex:none}

/* ---- tombol ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;font-weight:700;font-size:.92rem;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .25s,background .25s,border-color .25s,color .2s;white-space:nowrap;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-utama{background:var(--gradasi);background-size:150% 150%;color:#03131c;box-shadow:0 8px 28px -8px #22d3ee88}
.btn-utama:hover{background-position:100% 0;box-shadow:0 12px 36px -8px #22d3eeaa}
.btn-hantu{color:var(--teks);background:transparent}
.btn-hantu:hover{background:#ffffff0f}
.btn-garis{color:var(--teks);border-color:#ffffff2e;background:#ffffff08;backdrop-filter:blur(6px)}
.btn-garis:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-besar{padding:14px 26px;font-size:1rem;border-radius:14px}
.btn.kecil{padding:8px 14px;font-size:.84rem;border-radius:10px}
.btn-ikon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:transparent;border:1px solid transparent;color:var(--teks);cursor:pointer}
.btn-ikon:hover{background:#ffffff12}

/* ---- header ---- */
.kepala{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.kepala.kaca{background:#05070dcc;backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:#ffffff12}
.kepala-isi{display:flex;align-items:center;gap:28px;height:72px}
.merek{display:flex;align-items:center;gap:10px;flex:none}
.merek img{width:38px;height:38px;border-radius:10px;object-fit:contain}
.merek b{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.merek small{display:block;font-size:.66rem;color:var(--redup);letter-spacing:.12em;text-transform:uppercase}
.nav{display:flex;gap:4px;flex:1;justify-content:center}
.nav a{position:relative;padding:8px 13px;border-radius:10px;color:var(--redup);font-weight:600;font-size:.9rem;transition:color .2s,background .2s}
.nav a:hover{color:var(--teks);background:#ffffff0a}
.nav a.aktif{color:var(--teks)}
.nav a.aktif::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--gradasi)}
.kepala-aksi{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.tombol-menu{display:none}

/* ---- hero ---- */
.hero{position:relative;padding:150px 0 70px;overflow:hidden}
.hero-latar{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:apung 14s ease-in-out infinite}
.o1{width:520px;height:520px;background:#0290bc;top:-160px;left:-120px}
.o2{width:420px;height:420px;background:#818cf8;top:80px;right:-140px;opacity:.35;animation-delay:-5s}
.o3{width:360px;height:360px;background:#22d3ee;bottom:-180px;left:40%;opacity:.3;animation-delay:-9s}
@keyframes apung{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
.grid-latar{position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 40%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 40%,transparent 80%)}
.hero-isi{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.hero-isi>*,.dok>*,.tentang>*,.statistik>*,.kartu-grid>*,.blog-grid>*{min-width:0}
.lencana{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;border:1px solid #22d3ee44;background:#22d3ee12;color:var(--cyan);
  font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lencana i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 #22d3ee;animation:denyut 2s infinite}
@keyframes denyut{0%{box-shadow:0 0 0 0 #22d3eeaa}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{margin:22px 0 18px;font-size:clamp(2.3rem,5.2vw,4.1rem);line-height:1.05;font-weight:800;letter-spacing:-.035em}
.sorot{background:var(--gradasi);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-desk{font-size:clamp(1rem,1.4vw,1.14rem);color:var(--redup);max-width:560px}
.hero-tombol{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.statistik{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px;border:1px solid var(--garis);border-radius:var(--radius);background:#0a0f1acc;backdrop-filter:blur(8px)}
.statistik div{padding:22px 24px;display:flex;flex-direction:column;gap:2px}
.statistik div+div{border-left:1px solid var(--garis)}
.statistik b{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.02em;background:var(--gradasi);-webkit-background-clip:text;background-clip:text;color:transparent}
.statistik span{color:var(--redup);font-size:.86rem}

/* ---- bagian umum ---- */
.bagian{padding:110px 0;position:relative}
.bagian-gelap{background:linear-gradient(180deg,transparent,#0a0f1a 15%,#0a0f1a 85%,transparent)}
.bagian-kepala{text-align:center;max-width:680px;margin:0 auto 56px}
.bagian-kepala.kiri{text-align:left;margin:0}
.label{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.bagian h2{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.12;letter-spacing:-.03em;font-weight:800;margin:12px 0 14px}
.bagian-kepala p,.tentang-teks{color:var(--redup);font-size:1.05rem}
.kartu-ikon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(140deg,#22d3ee26,#818cf81f);border:1px solid #22d3ee33;color:var(--cyan);flex:none}
.kartu-ikon.kecil{width:36px;height:36px;border-radius:10px}
.kartu-panah{color:var(--redup2);transition:transform .25s,color .25s}

/* ---- produk ---- */
.kartu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* ---- halaman Harga ---- */
.harga-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.harga-grid>*{min-width:0}
.harga-kartu{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 24px 24px;border-radius:var(--radius);background:linear-gradient(170deg,var(--panel),var(--latar2));border:1px solid var(--garis);transition:transform .3s,border-color .3s,box-shadow .3s}
.harga-kartu:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px #22d3ee55;border-color:#22d3ee55}
.harga-kartu.unggulan{border-color:var(--cyan);box-shadow:0 0 0 1px #22d3ee55,0 30px 60px -30px #22d3ee66}
.harga-pita{position:absolute;top:-12px;left:24px;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:999px;background:var(--gradasi);color:#06121a}
.harga-kartu h3{font-size:1.25rem;margin:0}
.harga-ket{color:var(--redup);font-size:.92rem;min-height:2.6em;margin:0}
.harga-nilai{display:flex;align-items:baseline;gap:6px;margin:6px 0 4px}
.harga-nilai b{font-size:1.9rem;font-weight:800;letter-spacing:-.03em}
.harga-nilai span{color:var(--redup);font-size:.88rem}
.harga-fitur{list-style:none;padding:0;margin:4px 0 18px;display:flex;flex-direction:column;gap:9px;font-size:.92rem;flex:1}
.harga-fitur li{display:flex;gap:9px;align-items:flex-start}
.harga-fitur svg{flex:none;color:var(--cyan);margin-top:3px}
.harga-kartu .btn{justify-content:center}
.harga-catatan{text-align:center;color:var(--redup);font-size:.88rem;margin:26px auto 0;max-width:720px}
.harga-memuat{grid-column:1/-1;text-align:center;color:var(--redup)}
@media(max-width:1000px){.harga-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.harga-grid{grid-template-columns:1fr}}
.kartu{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--radius);background:linear-gradient(170deg,var(--panel),var(--latar2));border:1px solid var(--garis);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.kartu::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--gradasi);opacity:0;transition:opacity .3s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.kartu:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px #22d3ee55}
.kartu:hover::before{opacity:1}
.kartu h3{font-size:1.16rem;letter-spacing:-.01em}
.kartu p{color:var(--redup);font-size:.93rem;flex:1}
.kartu .kartu-panah{position:absolute;top:26px;right:24px}
.kartu:hover .kartu-panah{transform:translateX(4px);color:var(--cyan)}
.langkah{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px;counter-reset:l}
.langkah-item{position:relative;padding:24px 24px 24px 26px;border-left:2px solid var(--garis)}
.langkah-item::before{content:"";position:absolute;left:-2px;top:24px;height:42px;width:2px;background:var(--gradasi)}
.langkah-no{font-family:var(--mono);font-weight:700;font-size:.85rem;color:var(--cyan)}
.langkah-item h4{font-size:1.1rem;margin:6px 0 6px}
.langkah-item p{color:var(--redup);font-size:.92rem}

/* ---- dokumentasi ---- */
.dok{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.kode{margin-top:26px;padding:20px 22px;border-radius:16px;background:#060a12;border:1px solid var(--garis);font-family:var(--mono);font-size:.84rem;line-height:1.75;overflow-x:auto;color:#cbd5e1;box-shadow:0 20px 50px -30px #22d3ee66}
.kode .k{color:#c084fc}.kode .s{color:#86efac}.kode .f{color:#22d3ee}.kode .c{color:#64748b}
.dok-daftar{display:flex;flex-direction:column;gap:14px}
.dok-item{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--garis);transition:border-color .25s,transform .25s,background .25s}
.dok-item:hover{border-color:#22d3ee66;transform:translateX(6px);background:var(--panel2)}
.dok-item > span:nth-child(2){flex:1}
.dok-item h4{font-size:1.04rem}
.dok-item p{color:var(--redup);font-size:.9rem}
.dok-item:hover .kartu-panah{color:var(--cyan);transform:translateX(4px)}

/* ---- blog ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog-kartu{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--panel);border:1px solid var(--garis);transition:transform .3s,border-color .3s}
.blog-kartu:hover{transform:translateY(-6px);border-color:#22d3ee55}
.blog-gambar{height:150px;position:relative;display:flex;align-items:flex-start;padding:14px}
.blog-gambar.g0{background:radial-gradient(circle at 20% 20%,#22d3ee66,transparent 55%),radial-gradient(circle at 85% 80%,#818cf866,transparent 55%),#0b1222}
.blog-gambar.g1{background:radial-gradient(circle at 80% 20%,#34d39966,transparent 55%),radial-gradient(circle at 10% 90%,#0290bc77,transparent 55%),#0b1222}
.blog-gambar.g2{background:radial-gradient(circle at 50% 10%,#f59e0b55,transparent 55%),radial-gradient(circle at 90% 90%,#22d3ee55,transparent 55%),#0b1222}
.blog-gambar span{padding:4px 10px;border-radius:8px;background:#05070dcc;border:1px solid #ffffff1f;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.blog-isi{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.blog-isi time{font-size:.78rem;color:var(--redup2);font-weight:600}
.blog-isi h3{font-size:1.08rem;line-height:1.35}
.blog-isi p{color:var(--redup);font-size:.9rem;flex:1}
.baca{display:inline-flex;align-items:center;gap:6px;color:var(--cyan);font-weight:700;font-size:.86rem}

/* ---- tentang ---- */
.tentang{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.tentang-visual{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:28px;background:radial-gradient(circle,#0290bc33,transparent 65%)}
.tentang-visual img{width:42%;z-index:1;filter:drop-shadow(0 18px 40px #0290bc88)}
.cincin{position:absolute;border-radius:50%;border:1px dashed #22d3ee44;animation:putar 28s linear infinite}
.c1{inset:14%}.c2{inset:2%;border-style:solid;border-color:#818cf822;animation-duration:44s;animation-direction:reverse}
@keyframes putar{to{transform:rotate(360deg)}}
.pendiri{display:flex;align-items:center;gap:14px;margin-top:28px;padding:14px 18px;border-radius:16px;background:var(--panel);border:1px solid var(--garis);width:fit-content}
.pendiri > span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.2rem;background:var(--gradasi);color:#03131c}
.pendiri b{display:block}
.pendiri small{color:var(--redup)}

/* ---- kontak ---- */
.kontak-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;max-width:980px;margin:0 auto}
.kontak-kartu{display:flex;align-items:center;gap:14px;padding:20px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--garis);transition:border-color .25s,transform .25s}
a.kontak-kartu:hover{border-color:#22d3ee66;transform:translateY(-4px)}
.kontak-kartu small{display:block;color:var(--redup);font-size:.78rem}
.kontak-kartu b{word-break:break-word}
.kosong-info{text-align:center;color:var(--redup2);grid-column:1/-1}

/* ---- ajakan ---- */
.cta-wadah{padding:20px 0 100px}
.cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:48px 52px;border-radius:28px;overflow:hidden;
  background:radial-gradient(circle at 0% 0%,#22d3ee33,transparent 50%),radial-gradient(circle at 100% 100%,#818cf833,transparent 50%),var(--panel);border:1px solid #22d3ee33}
.cta h2{font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.03em;line-height:1.15}
.cta p{color:var(--redup);margin-top:8px}

/* ---- footer ---- */
.kaki{border-top:1px solid var(--garis);background:#04060b}
.kaki-atas{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:56px 0 40px}
.kaki-atas:not(:has(.kaki-sosmed)){grid-template-columns:2fr 1fr 1fr}
.kaki-sosmed a{display:inline-flex;align-items:center;gap:9px}
.kaki-sosmed svg{color:var(--cyan)}
.kaki-merek p{color:var(--redup);margin-top:14px;font-weight:600}
.kaki-kolom{display:flex;flex-direction:column;gap:9px}
.kaki-kolom h5{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--redup2);margin-bottom:4px}
.kaki-kolom a{color:var(--redup);font-size:.92rem;width:fit-content;transition:color .2s}
.kaki-kolom a:hover{color:var(--cyan)}
.kaki-legal{display:flex;flex-wrap:wrap;gap:6px 22px;padding:16px 0 14px;border-top:1px solid var(--garis);font-size:.86rem}
.kaki-legal a{color:var(--redup)}
.kaki-legal a:hover{color:var(--cyan)}
.kaki-legal + .kaki-bawah{border-top:0;padding-top:4px}
.legal .artikel-isi ul{margin:0 0 18px;padding-left:22px;display:grid;gap:6px}
.legal .artikel-isi a{color:var(--cyan)}
.legal-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:24px;border-top:1px solid var(--garis)}
.legal-nav a{padding:10px 16px;border-radius:12px;border:1px solid var(--garis);background:var(--panel);font-weight:600;font-size:.9rem}
.legal-nav a:hover{border-color:#22d3ee66;color:var(--cyan)}
.kaki-bawah{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 0 28px;border-top:1px solid var(--garis);color:var(--redup2);font-size:.86rem}

/* ---- pergantian halaman: memudar halus ---- */
body{animation:halusMuncul .2s ease-out}
body.keluar{opacity:0;transition:opacity .12s ease-in}
@keyframes halusMuncul{from{opacity:0}}
@media (prefers-reduced-motion:reduce){body{animation:none}body.keluar{transition:none}}

/* ---- animasi muncul ---- */
.muncul{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms)}
.muncul.tampil{opacity:1;transform:none}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;z-index:90;padding:12px 18px;border-radius:12px;background:#0f172a;border:1px solid var(--garis);font-weight:600;font-size:.9rem;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.tampil{opacity:1;transform:translate(-50%,0)}
.toast.salah{border-color:#f87171}

/* ---- layar sedang & HP ---- */
@media (max-width:1080px){
  .nav a{padding:8px 9px;font-size:.86rem}
  .kepala-isi{gap:16px}
}
@media (max-width:960px){
  .tombol-menu{display:grid}
  .nav{position:fixed;top:72px;left:12px;right:12px;flex-direction:column;gap:2px;padding:10px;border-radius:18px;background:#0b1120f5;backdrop-filter:blur(16px);border:1px solid var(--garis);
    box-shadow:0 30px 60px -20px #000;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s,transform .25s}
  .menu-buka .nav{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding:12px 14px;font-size:1rem}
  .nav a.aktif::after{display:none}
  .menu-buka .kepala{background:#05070df2}
  .hero{padding-top:120px}
  .hero-isi,.dok,.tentang{grid-template-columns:1fr}
  .kartu-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .statistik{grid-template-columns:repeat(2,1fr)}
  .statistik div:nth-child(3){border-left:none}
  .statistik div:nth-child(n+3){border-top:1px solid var(--garis)}
  .tentang-visual{max-width:320px;width:100%;margin:0 auto}
  .kaki-atas{grid-template-columns:1fr 1fr}
  .kaki-merek{grid-column:1/-1}
}
@media (max-width:620px){
  .statistik div{padding:16px}
  .kepala-aksi .btn-hantu{display:none}
  .kepala-aksi .btn-utama span{display:none}
  .kepala-aksi .btn-utama{padding:10px 12px}
  .merek small{display:none}
  .kartu-grid,.blog-grid,.langkah{grid-template-columns:1fr}
  .bagian{padding:80px 0}
  .cta{flex-direction:column;align-items:flex-start;padding:32px 26px}
  .hero-tombol .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.muncul{opacity:1;transform:none}}

/* ---- About: tim (banyak anggota, dengan foto) ---- */
.tim-judul{font-size:1rem;margin:30px 0 14px;color:var(--redup);font-weight:700;letter-spacing:.02em}
.tim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.anggota{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--garis);transition:border-color .25s,transform .25s}
.anggota:hover{border-color:#22d3ee55;transform:translateY(-3px)}
.anggota img,.anggota .inisial{width:54px;height:54px;border-radius:50%;flex:none;object-fit:cover;box-shadow:0 0 0 2px var(--latar),0 0 0 4px #22d3ee66}
.anggota .inisial{display:grid;place-items:center;font-weight:800;font-size:1.1rem;background:var(--gradasi);color:#03131c}
.anggota div{min-width:0}
.anggota b{display:block;line-height:1.3;overflow-wrap:anywhere}
.anggota small{display:block;color:var(--redup);font-size:.84rem;line-height:1.4}


/* ---- halaman per menu (Produk, Dokumentasi, Blog, About, Kontak) ---- */
html{scroll-behavior:auto}
.halaman-dalam{position:relative;min-height:70vh;overflow:hidden}
.halaman-dalam .bagian{padding-top:150px}
.dalam-latar{position:absolute;inset:0;pointer-events:none}
.dalam-latar .o1{width:460px;height:460px;top:-220px;left:-140px;opacity:.4}
.dalam-latar .o2{width:380px;height:380px;top:-160px;right:-160px;opacity:.25}
.halaman-dalam .wadah{position:relative}
@media (max-width:620px){.halaman-dalam .bagian{padding-top:120px}}

/* =========================================================
   LATAR JARINGAN IoT (halaman Beranda)
   ========================================================= */
.hal-beranda{background:radial-gradient(ellipse 120% 70% at 50% 0%,#071a26 0%,#050b14 50%,var(--latar) 78%)}
.hero-latar.iot{overflow:hidden}
#jaringan{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,#0004 0%,#0003 38%,#000c 62%,#000 100%);mask-image:linear-gradient(90deg,#0004 0%,#0003 38%,#000c 62%,#000 100%)}
@media (max-width:960px){#jaringan{-webkit-mask-image:linear-gradient(180deg,#0003 0%,#0003 40%,#000a 60%,#000 100%);mask-image:linear-gradient(180deg,#0003 0%,#0003 40%,#000a 60%,#000 100%)}}
/* jalur sirkuit PCB samar */
.sirkuit{position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%2322d3ee' stroke-opacity='.22' stroke-width='1.2'%3E%3Cpath d='M0 40h60l20 20h60M140 60v50l30 30h70M30 240v-60l30-30h40M100 150h40v-40M200 0v40l-20 20M180 240v-50l20-20h40M0 120h30l20 20v40'/%3E%3Cg fill='%2322d3ee' fill-opacity='.35' stroke='none'%3E%3Ccircle cx='140' cy='60' r='3'/%3E%3Ccircle cx='60' cy='150' r='3'/%3E%3Ccircle cx='140' cy='110' r='3'/%3E%3Ccircle cx='200' cy='40' r='3'/%3E%3Ccircle cx='50' cy='140' r='3'/%3E%3Ccircle cx='200' cy='170' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:240px 240px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 20%,transparent 75%);
  animation:sirkuitGeser 60s linear infinite}
@keyframes sirkuitGeser{to{background-position:240px 240px}}
.cahaya{position:absolute;border-radius:50%;filter:blur(90px);animation:apung 18s ease-in-out infinite}
.c-a{width:560px;height:460px;top:-140px;left:-120px;background:radial-gradient(circle,#0290bc77,transparent 70%)}
.c-b{width:520px;height:460px;top:60px;right:-140px;background:radial-gradient(circle,#10b98144,#22d3ee22 50%,transparent 72%);animation-delay:-7s}
.pudar-bawah{position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(transparent,var(--latar))}

/* ---- tema jaringan IoT juga di halaman menu (Produk, Dokumentasi, Blog, About, Kontak) ---- */
.halaman-dalam{background:radial-gradient(ellipse 120% 60% at 50% 0%,#071a26 0%,#050b14 50%,var(--latar) 80%)}
.halaman-dalam .hero-latar.dalam{position:absolute;inset:0;pointer-events:none}
.hero-latar.dalam #jaringan{-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,#0003 0%,#0005 45%,#000 100%);mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,#0003 0%,#0005 45%,#000 100%)}
.hero-latar.dalam .sirkuit{-webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 20%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 90% 60% at 50% 20%,#000 10%,transparent 75%)}
.hero-latar.dalam .pudar-bawah{height:220px}

/* ---- halaman artikel (Dokumentasi & Blog) ---- */
.artikel-wadah{max-width:780px}
.artikel .kembali{display:inline-flex;align-items:center;gap:8px;color:var(--redup);font-weight:600;font-size:.9rem;margin-bottom:22px}
.artikel .kembali svg{transform:rotate(180deg)}
.artikel .kembali:hover{color:var(--cyan)}
.artikel h1{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.12;letter-spacing:-.03em;margin:12px 0 12px}
.artikel-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--redup2);font-size:.88rem;font-weight:600}
.artikel-meta > *+*::before{content:"•";margin-right:14px}
.artikel-sampul{width:100%;border-radius:20px;margin:26px 0 6px;border:1px solid var(--garis);max-height:440px;object-fit:cover}
.artikel-lead{font-size:1.15rem;color:var(--teks);opacity:.9;margin:22px 0 4px;line-height:1.7}
.artikel-isi{margin-top:18px;font-size:1.04rem;line-height:1.85;color:#cbd5e1}
.artikel-isi p{margin:0 0 18px}
.artikel-isi h2{font-size:1.5rem;color:var(--teks);letter-spacing:-.02em;margin:34px 0 12px}
.artikel-isi figure{margin:26px 0}
.artikel-isi figure img,.artikel-isi .video-file{width:100%;border-radius:16px;border:1px solid var(--garis);background:#000}
.artikel-isi figcaption{text-align:center;color:var(--redup2);font-size:.86rem;margin-top:10px}
.artikel-isi .kode{margin:20px 0}
.video-bungkus{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--garis);background:#000}
.video-bungkus iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.artikel-kosong{color:var(--redup2);font-style:italic}
.artikel-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:46px;padding-top:26px;border-top:1px solid var(--garis)}
.artikel-nav a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--garis);transition:border-color .2s}
.artikel-nav a:hover{border-color:#22d3ee66}
.artikel-nav a.kanan{text-align:right;grid-column:2}
.artikel-nav small{color:var(--redup2);font-weight:600}
.blog-gambar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-gambar span{position:relative;z-index:1}

@media (max-width:620px){.artikel-nav{grid-template-columns:1fr}.artikel-nav a.kanan{grid-column:auto}}
.artikel .kembali{display:flex;width:fit-content}

/* =========================================================
   MODE SIANG (data-theme="light")
   Mockup dashboard, kode, dan toast tetap gelap (seperti layar perangkat)
   ========================================================= */
html.ganti-tema *,html.ganti-tema *::before,html.ganti-tema *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease!important}
.tombol-tema{color:var(--redup)}
.tombol-tema:hover{color:var(--teks)}
.toast,.kode{--latar:#05070d;--latar2:#0a0f1a;--panel:#0e1524;--panel2:#131c2f;--garis:#1f2a40;--teks:#eef2f8;--redup:#94a3b8;--redup2:#64748b;--cyan:#22d3ee;color:var(--teks)}
[data-theme="light"]{
  --latar:#f6f8fc; --latar2:#eef3f9; --panel:#ffffff; --panel2:#f1f5f9; --garis:#dbe3ee;
  --teks:#0f172a; --redup:#475569; --redup2:#64748b; --cyan:#0891b2; --hijau:#059669;
  --gradasi:linear-gradient(120deg,#06b6d4 0%,#0290bc 45%,#6366f1 100%);
}
[data-theme="light"] body{background:var(--latar)}
[data-theme="light"] .kepala.kaca,[data-theme="light"].menu-buka .kepala,[data-theme="light"] .menu-buka .kepala{background:#ffffffd9;border-bottom-color:#0f172a14}
[data-theme="light"] .btn-hantu:hover,[data-theme="light"] .btn-ikon:hover{background:#0f172a0d}
[data-theme="light"] .btn-garis{border-color:#0f172a26;background:#ffffffb3}
[data-theme="light"] .btn-utama{color:#fff;box-shadow:0 8px 26px -10px #0290bc99}
[data-theme="light"] .nav a:hover{background:#0f172a0a}
[data-theme="light"] .lencana{border-color:#0891b255;background:#0891b214}
[data-theme="light"] .hal-beranda{background:radial-gradient(ellipse 120% 70% at 50% 0%,#dff4fb 0%,#eef6fb 45%,var(--latar) 78%)}
[data-theme="light"] .halaman-dalam{background:radial-gradient(ellipse 120% 60% at 50% 0%,#dff4fb 0%,#eef6fb 50%,var(--latar) 82%)}
[data-theme="light"] .c-a{background:radial-gradient(circle,#22d3ee55,transparent 70%)}
[data-theme="light"] .c-b{background:radial-gradient(circle,#34d39940,#6366f122 50%,transparent 72%)}
[data-theme="light"] .sirkuit{opacity:.7;filter:saturate(1.4) brightness(.8)}
[data-theme="light"] .statistik{background:#ffffffcc;box-shadow:0 18px 40px -26px #0f172a40}
[data-theme="light"] .bagian-gelap{background:linear-gradient(180deg,transparent,#eaf1f8 15%,#eaf1f8 85%,transparent)}
[data-theme="light"] .kartu,[data-theme="light"] .dok-item,[data-theme="light"] .blog-kartu,[data-theme="light"] .kontak-kartu,
[data-theme="light"] .anggota,[data-theme="light"] .artikel-nav a,[data-theme="light"] .langkah-item{box-shadow:0 10px 30px -22px #0f172a55}
[data-theme="light"] .kartu{background:linear-gradient(170deg,#ffffff,#f4f8fc)}
[data-theme="light"] .kartu-ikon{background:linear-gradient(140deg,#06b6d41f,#6366f11a);border-color:#0891b233}
[data-theme="light"] .blog-gambar span{background:#ffffffe6;border-color:#0f172a1a;color:#0f172a}
[data-theme="light"] .blog-gambar.g0{background:radial-gradient(circle at 20% 20%,#22d3ee66,transparent 55%),radial-gradient(circle at 85% 80%,#818cf866,transparent 55%),#e0f2fe}
[data-theme="light"] .blog-gambar.g1{background:radial-gradient(circle at 80% 20%,#34d39966,transparent 55%),radial-gradient(circle at 10% 90%,#0290bc55,transparent 55%),#ecfdf5}
[data-theme="light"] .blog-gambar.g2{background:radial-gradient(circle at 50% 10%,#f59e0b55,transparent 55%),radial-gradient(circle at 90% 90%,#22d3ee55,transparent 55%),#fff7ed}
[data-theme="light"] .tentang-visual{background:radial-gradient(circle,#0290bc22,transparent 65%)}
[data-theme="light"] .cta{background:radial-gradient(circle at 0% 0%,#22d3ee26,transparent 50%),radial-gradient(circle at 100% 100%,#6366f122,transparent 50%),#ffffff;border-color:#0891b233;box-shadow:0 30px 60px -40px #0f172a55}
[data-theme="light"] .kaki{background:#eef3f9}
[data-theme="light"] .artikel-isi{color:#334155}
[data-theme="light"] .artikel-sampul,[data-theme="light"] .artikel-isi figure img{box-shadow:0 20px 40px -28px #0f172a66}
@media (max-width:960px){[data-theme="light"] .nav{background:#fffffff5;box-shadow:0 30px 60px -20px #0f172a40}}

/* animasi latar berhenti saat bagiannya tidak terlihat di layar (hemat CPU & baterai) */
.jeda .cahaya,.jeda .sirkuit,.jeda .mock *,.jeda .mock-notif{animation-play-state:paused!important}

/* =========================================================
   DESAIN BERANDA v2 — header kapsul, hero terpusat, panggung perangkat
   Aksen cyan → mint (identitas Enigma IoT), bukan gradasi biru-ungu
   ========================================================= */
:root{--gradasi:linear-gradient(120deg,#22d3ee 0%,#2dd4bf 50%,#34d399 100%);--mint:#34d399}

/* ---- header kapsul mengambang ---- */
.kepala{padding-top:14px;background:none!important;border-bottom:0!important;backdrop-filter:none!important}
.kepala-isi{height:60px;padding:0 10px 0 16px;border-radius:999px;border:1px solid #ffffff14;background:#0a1018b3;
  backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 18px 40px -24px #000c;transition:background .3s,box-shadow .3s,border-color .3s}
.kepala.kaca .kepala-isi{background:#0a1018e8;border-color:#ffffff1f;box-shadow:0 20px 50px -20px #000e}
.kepala .merek img{width:34px;height:34px}
.nav{gap:2px}
.nav a{border-radius:999px;padding:8px 14px}
.nav a.aktif{color:#03131c;background:var(--gradasi)}
.nav a.aktif::after{display:none}
.kepala-aksi .btn{border-radius:999px}
.kepala-aksi .btn-ikon{border-radius:50%}
.tombol-bahasa{display:inline-flex;align-items:center;padding:3px;border-radius:999px;border:1px solid #ffffff1f;background:#ffffff08;cursor:pointer;font-family:var(--mono)}
.tombol-bahasa b{padding:4px 8px;border-radius:999px;font-size:.72rem;letter-spacing:.06em;color:var(--redup);transition:background .2s,color .2s}
.tombol-bahasa b.aktif{background:var(--teks);color:var(--latar)}
.tombol-bahasa:hover{border-color:var(--cyan)}

/* ---- tombol ---- */
.btn-utama{background:var(--gradasi);color:#03131c;box-shadow:0 10px 30px -10px #2dd4bf99}
.btn-besar{border-radius:999px;padding:15px 26px}
.btn-utama .ik,.btn-utama svg{transition:transform .25s}
.btn-utama:hover svg{transform:translateX(3px)}
.tautan-panah{display:inline-flex;align-items:center;gap:8px;padding:14px 8px;font-weight:700;color:var(--teks);border-bottom:1px solid transparent}
.tautan-panah svg{transition:transform .25s;color:var(--cyan)}
.tautan-panah:hover{color:var(--cyan)}
.tautan-panah:hover svg{transform:translateX(4px)}

/* ---- hero terpusat ---- */
.hero2{padding:150px 0 40px;text-align:center}
.h2-latar .aurora{position:absolute;border-radius:50%;filter:blur(100px);opacity:.55;animation:apung 16s ease-in-out infinite}
.au1{width:720px;height:420px;left:50%;top:-180px;margin-left:-360px;background:radial-gradient(closest-side,#0e7490,transparent)}
.au2{width:520px;height:360px;left:62%;top:120px;background:radial-gradient(closest-side,#047857aa,transparent);animation-delay:-6s}
.h2-latar .sirkuit{-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 35%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 70% 55% at 50% 35%,#000 15%,transparent 72%)}
.h2-isi{position:relative;display:flex;flex-direction:column;align-items:center}
.h2-prompt{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.82rem;color:var(--redup);letter-spacing:.02em}
.h2-tanda{color:var(--mint);font-weight:700}
.h2-ketik{color:var(--teks)}
.h2-caret{width:8px;height:16px;background:var(--cyan);border-radius:1px;animation:kedip 1.1s steps(1) infinite}
@keyframes kedip{50%{opacity:0}}
.h2-judul{max-width:920px;margin:20px auto 18px;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.04;font-weight:800;letter-spacing:-.04em}
.sorot2{position:relative;display:inline-block;color:var(--cyan);white-space:nowrap}
.sorot2 .sinyal{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.32em;overflow:visible}
.sorot2 .sinyal path{fill:none;stroke:var(--mint);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:420;stroke-dashoffset:420;animation:gambarSinyal 1.6s .5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes gambarSinyal{to{stroke-dashoffset:0}}
.h2-desk{max-width:640px;margin:0 auto;color:var(--redup);font-size:clamp(1rem,1.4vw,1.14rem)}
.h2-tombol{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---- panggung perangkat ---- */
.panggung-wadah{width:100%}
.panggung{position:relative;width:min(1000px,100%);height:380px;margin:46px auto 0}
.panggung-garis{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jl{fill:none;stroke:#22d3ee33;stroke-width:1.6;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.jl.kirim{stroke:var(--mint);stroke-dasharray:none;animation:jlKirim .9s ease}
@keyframes jlKirim{from{stroke-width:4;filter:drop-shadow(0 0 6px #34d399)}to{stroke-width:1.6}}
.paket{fill:#a5f3fc;filter:drop-shadow(0 0 5px #22d3ee)}
.jl-utama{stroke:#22d3ee66;stroke-width:2;stroke-dasharray:none}
.jl-ke-esp{stroke:#34d39955}
/* cloud Platform Enigma IoT di atas ESP32 */
.panggung{--awan1:#12304a;--awan2:#0b1a2a}
.hub-awan-wadah{position:absolute;left:var(--x);top:var(--y);width:220px;height:130px;transform:translate(-50%,-50%);animation:awanApung 6s ease-in-out infinite}
.awan-bentuk{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.awan-bentuk path{stroke:#22d3ee77;stroke-width:1.4;filter:drop-shadow(0 0 18px #22d3ee44)}
.awan-isi{position:absolute;inset:34px 0 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center}
.awan-isi img{width:30px;height:30px}
.awan-isi b{font-size:.86rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.awan-isi small{font-size:.58rem;color:var(--redup);letter-spacing:.1em;text-transform:uppercase}
@keyframes awanApung{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
.jalur-label{position:absolute;left:50%;top:48%;transform:translate(26px,-50%);font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  color:var(--cyan);background:#0a131ccc;border:1px solid #22d3ee33;padding:3px 9px;border-radius:999px;white-space:nowrap}
.tahap{position:absolute;top:-28px;transform:translateX(-50%);font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--redup2)}
.tahap-1{left:10%}.tahap-4{left:90%}
.paket{transition:none}
.hub-cincin{animation-timing-function:cubic-bezier(.22,.61,.36,1)}
.alat{transition:border-color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
.hub{position:absolute;left:var(--x,50%);top:var(--y,50%);width:150px;height:150px;margin:-75px 0 0 -75px;display:grid;place-items:center}
.hub-cincin{position:absolute;inset:0;border-radius:50%;border:1px solid #22d3ee44;animation:cincin 3.2s ease-out infinite}
.hub-cincin.c2{animation-delay:1.6s}
@keyframes cincin{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}
.hub-chip{position:relative;width:104px;height:104px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(150deg,#0f2330,#0a1520);border:1px solid #22d3ee55;box-shadow:0 0 0 6px #22d3ee0d,0 20px 50px -18px #22d3ee66}
.hub-chip b{font-family:var(--mono);font-size:1.05rem;letter-spacing:.06em}
.hub-chip small{font-size:.62rem;color:var(--redup);letter-spacing:.1em;text-transform:uppercase}
.hub-chip .pin{position:absolute;top:18px;bottom:18px;width:6px;background:repeating-linear-gradient(180deg,#94a3b8 0 4px,transparent 4px 10px);opacity:.6}
.hub-chip .pin.kiri{left:-7px}.hub-chip .pin.kanan{right:-7px}
.alat{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;
  border-radius:16px;border:1px solid #ffffff14;background:#0c1520e6;backdrop-filter:blur(8px);color:var(--teks);font:inherit;text-align:left;
  box-shadow:0 16px 36px -20px #000;cursor:default;transition:border-color .25s,box-shadow .25s,transform .25s}
.alat.bisa{cursor:pointer}
.alat.bisa:hover{border-color:#22d3ee66;transform:translate(-50%,-50%) translateY(-3px)}
.alat.bisa:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.alat-ikon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#22d3ee14;color:var(--cyan);transition:background .3s,color .3s,box-shadow .3s}
.alat-teks small{display:block;font-size:.7rem;color:var(--redup);font-weight:600;white-space:nowrap}
.alat-teks b{display:block;font-size:1.02rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.alat-teks b em{font-style:normal;font-size:.72rem;color:var(--redup);margin-left:1px}
.alat-lampu.nyala .alat-ikon{background:#fbbf2426;color:#fbbf24;box-shadow:0 0 22px #fbbf2466}
.alat-kipas.nyala .alat-ikon svg{animation:putar 1.1s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}
.alat.bisa:not(.nyala) .alat-teks b{color:var(--redup2)}
.rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:6px;vertical-align:middle;animation:kedip 1.4s steps(1) infinite}
.panggung-notif{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:#0f172af2;border:1px solid #34d39955;font-size:.82rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none}
.panggung-notif svg{color:var(--mint)}
.panggung-notif.muncul-notif{animation:notifMuncul 3.4s ease forwards}
@keyframes notifMuncul{0%{opacity:0;transform:translate(-50%,10px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}

/* ---- deret angka ---- */
.angka2{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:56px auto 0;width:100%;max-width:980px}
.angka2 div{flex:1 1 200px;padding:6px 24px;text-align:center}
.angka2 div+div{border-left:1px solid var(--garis)}
.angka2 dt{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.02em;background:var(--gradasi);-webkit-background-clip:text;background-clip:text;color:transparent}
.angka2 dd{color:var(--redup);font-size:.86rem}

/* ---- cara memulai: garis waktu ---- */
.langkah{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.langkah::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:2px;background:linear-gradient(90deg,transparent,#22d3ee55 15%,#34d39955 85%,transparent)}
.langkah-item{position:relative;text-align:center;background:none!important;border:0!important;box-shadow:none!important;padding:0 10px}
.langkah-item::before{display:none}
.langkah-no{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:var(--latar);border:2px solid #22d3ee66;
  color:var(--cyan);font-size:1rem;box-shadow:0 0 0 6px var(--latar)}
.langkah-item:hover .langkah-no{border-color:var(--mint);color:var(--mint)}
.langkah-item h4{font-size:1.1rem;margin-bottom:6px}
.langkah-item p{color:var(--redup);font-size:.94rem;max-width:300px;margin:0 auto}

/* ---- mode siang ---- */
[data-theme="light"] .kepala-isi{background:#ffffffc7;border-color:#0f172a14;box-shadow:0 18px 40px -26px #0f172a55}
[data-theme="light"] .kepala.kaca .kepala-isi{background:#ffffffef}
[data-theme="light"] .nav a.aktif{color:#03131c}
[data-theme="light"] .tombol-bahasa{border-color:#0f172a1f;background:#0f172a08}
[data-theme="light"] .au1{background:radial-gradient(closest-side,#a5f3fc,transparent)}
[data-theme="light"] .au2{background:radial-gradient(closest-side,#a7f3d0,transparent)}
[data-theme="light"] .sorot2{color:#0891b2}
[data-theme="light"] .sorot2 .sinyal path{stroke:#059669}
[data-theme="light"] .h2-tanda{color:#059669}
[data-theme="light"] .hub-chip{background:linear-gradient(150deg,#ffffff,#ecfeff);border-color:#0891b255;box-shadow:0 0 0 6px #0891b20f,0 20px 50px -22px #0891b288}
[data-theme="light"] .alat{background:#ffffffeb;border-color:#0f172a14;box-shadow:0 16px 36px -24px #0f172a66}
[data-theme="light"] .jl{stroke:#0891b244}
[data-theme="light"] .panggung{--awan1:#ffffff;--awan2:#e0f7fb}
[data-theme="light"] .awan-bentuk path{stroke:#0891b277;filter:drop-shadow(0 10px 22px #0891b233)}
[data-theme="light"] .jalur-label{background:#ffffffe6;color:#0e7490;border-color:#0891b244}
[data-theme="light"] .jl-utama{stroke:#0891b288}
[data-theme="light"] [data-theme="light"] [data-theme="light"] .paket{fill:#0891b2;filter:none}
[data-theme="light"] .panggung-notif{background:#fffffff2;border-color:#05966955;box-shadow:0 10px 30px -18px #0f172a66}
[data-theme="light"] .btn-utama{color:#03131c}
[data-theme="light"] .langkah-no{background:var(--latar)}

/* ---- HP & tablet ---- */
@media (max-width:960px){
  .kepala{padding:10px 10px 0}
  .kepala-isi{width:100%}
  .nav{top:80px}
  .nav a.aktif{color:#03131c}
  .hero2{padding-top:120px}
}
@media (max-width:760px){
  .panggung{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:34px;padding-top:130px}
  .panggung-garis,.tahap{display:none}
  .hub{top:0;margin-top:0;width:120px;height:120px;margin-left:-60px}
  .hub-esp{left:30%}
  .hub-awan-wadah{left:70%;top:58px;width:170px;height:100px}
  .awan-isi{inset:26px 0 6px}.awan-isi img{width:24px;height:24px}
  .jalur-label{display:none}
  .hub-chip{width:88px;height:88px}
    .alat{position:static;transform:none;width:100%}
  .alat.bisa:hover{transform:translateY(-2px)}
  .panggung-notif{position:static;transform:none;grid-column:1/-1;justify-self:center;margin-top:6px}
  @keyframes notifMuncul{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}}
  .angka2 div{flex:1 1 45%;padding:12px}
  .angka2 div+div{border-left:0}
  .langkah{grid-template-columns:1fr;gap:22px}
  .langkah::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:linear-gradient(180deg,#22d3ee55,#34d39955)}
  .langkah-item{display:grid;grid-template-columns:56px 1fr;column-gap:16px;text-align:left;padding:0}
  .langkah-no{grid-row:span 2;margin:0}
  .langkah-item p{margin:0}
}
@media (max-width:620px){
  .tombol-bahasa b{padding:4px 6px}
  .h2-tombol{flex-direction:column;width:100%}
  .h2-tombol .btn{width:100%}
}

/* =========================================================
   UKURAN LEBIH BESAR hanya di monitor besar / TV (lebar >= 1600px DAN tinggi >= 860px):
   huruf dasar naik, wadah lebih lebar, header & panggung diperbesar. Laptop memakai ukuran normal.
   ========================================================= */
@media (min-width:1600px) and (min-height:860px){
  html{font-size:18.5px}
  :root{--lebar:1440px}
  .kepala{padding-top:16px}
  .kepala-isi{height:70px;padding:0 12px 0 20px}
  .kepala .merek img{width:40px;height:40px}
  .nav a{padding:10px 17px;font-size:.95rem}
  .kepala-aksi .btn{padding:11px 20px}
  .kepala-aksi .btn-ikon{width:44px;height:44px}
  .tombol-bahasa b{padding:5px 10px;font-size:.74rem}
  .hero2{padding-top:170px}
  .h2-judul{max-width:1040px;font-size:clamp(2.6rem,5.4vw,5rem)}
  .h2-desk{max-width:720px}
  .btn-besar{padding:17px 30px;font-size:1.05rem}
  .panggung{width:min(1120px,100%);height:440px;margin-top:56px}
  .hub{width:170px;height:170px;margin:-85px 0 0 -85px}
  .hub-chip{width:118px;height:118px}
  .hub-awan-wadah{width:250px;height:148px}
  .awan-isi{inset:40px 0 12px}
  .alat{padding:12px 18px 12px 12px;gap:12px;border-radius:18px}
  .alat-ikon{width:42px;height:42px;border-radius:13px}
  .angka2{max-width:1120px}
  .langkah-no{width:62px;height:62px}
  .langkah::before{top:30px}
}
/* laptop (layar pendek): hero lebih rapat agar judul & panggung terlihat tanpa banyak menggulir */
@media (min-width:961px) and (max-height:860px){
  .hero2{padding-top:120px}
  .h2-judul{font-size:clamp(2.2rem,4.4vw,3.6rem)}
  .panggung{height:360px;margin-top:36px}
}
/* tombol unduh panduan lengkap (halaman Dokumentasi) */
.unduh-dok{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 18px;border-radius:16px;border:1px solid #22d3ee44;
  background:linear-gradient(120deg,#22d3ee14,#34d39910);transition:border-color .25s,transform .25s,box-shadow .25s;text-align:left}
.unduh-dok:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 14px 30px -18px #22d3ee88}
.unduh-dok b{display:block;font-size:1rem}
.unduh-dok small{display:block;color:var(--redup);font-size:.82rem}
[data-theme="light"] .unduh-dok{background:linear-gradient(120deg,#ecfeff,#ecfdf5);border-color:#0891b244}