/* ============================================================================
   CoreNet Landing v2 — 7 Okt 2026.

   Ditulis ulang saat landing berpindah dari "kelola MikroTik" ke "billing ISP +
   kelola MikroTik" (Paket Billing sejak 29 Sep 2026). Pola tata letaknya
   terinspirasi situs SaaS billing ISP (hero berangka, grid fitur, harga
   bertingkat dengan satu paket disorot), tetapi warna, teks, dan seluruh
   gambarnya milik CoreNet sendiri.

   Palet BIRU MODERN atas permintaan pemilik (7 Okt 2026), menggantikan teal:
   hero navy -> biru, warna utama #2563eb (teks putih 5,2:1), aksen cyan untuk
   tombol utama dan sorotan, cahaya violet tipis di hero. Mode gelap mengikuti
   setelan sistem pengunjung.

   Kelas milik sendiri berawalan `lp-`. Bootstrap tetap dipakai untuk grid,
   navbar, collapse, tab, dan accordion.
   ========================================================================== */

:root{
  --lp-brand:#2563eb;
  --lp-brand-2:#3b82f6;
  --lp-brand-soft:#dbeafe;
  --lp-accent:#22d3ee;
  --lp-ink:#0f172a;
  --lp-mut:#5b6b82;
  --lp-bg:#ffffff;
  --lp-bg-2:#f4f7fe;
  --lp-card:#ffffff;
  --lp-line:rgba(15,23,42,.10);
  --lp-ok:#16a34a;
  --lp-warn:#d97706;
  --lp-bad:#dc2626;
  --lp-shadow:0 1px 2px rgba(15,23,42,.05),0 14px 36px -14px rgba(37,99,235,.28);
  --lp-r:18px;
  --lp-hero-a:#070f2e;
  --lp-hero-b:#1d3fb8;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --lp-brand:#60a5fa;
    --lp-brand-2:#93c5fd;
    --lp-brand-soft:rgba(96,165,250,.14);
    --lp-ink:#e5ecf8;
    --lp-mut:#9aa8c0;
    --lp-bg:#0a0f1e;
    --lp-bg-2:#0e1528;
    --lp-card:#131c33;
    --lp-line:rgba(229,236,248,.10);
    --lp-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
    --lp-hero-a:#050a1f;
    --lp-hero-b:#142c80;
  }
}
:root[data-theme="dark"]{
  --lp-brand:#60a5fa; --lp-brand-2:#93c5fd; --lp-brand-soft:rgba(96,165,250,.14);
  --lp-ink:#e5ecf8; --lp-mut:#9aa8c0; --lp-bg:#0a0f1e; --lp-bg-2:#0e1528;
  --lp-card:#131c33; --lp-line:rgba(229,236,248,.10);
  --lp-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
  --lp-hero-a:#050a1f; --lp-hero-b:#142c80;
}

html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  background:var(--lp-bg);color:var(--lp-ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.02rem;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--lp-brand)}
a:hover{color:var(--lp-brand-2)}
.lp-mut{color:var(--lp-mut)}
.lp-ico{width:1.25em;height:1.25em;flex:none;vertical-align:-.2em}

/* ---------------------------------------------------------------- tombol */
.lp-btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  padding:.8rem 1.35rem;border-radius:12px;font-weight:600;font-size:1rem;
  border:1px solid transparent;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s;
}
.lp-btn:hover{transform:translateY(-1px)}
.lp-btn--utama{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#fff;box-shadow:0 10px 28px -10px rgba(34,211,238,.75)}
.lp-btn--utama:hover{background:linear-gradient(135deg,#67e8f9,#60a5fa);color:#fff}
.lp-btn--brand{background:#2563eb;color:#fff}
.lp-btn--brand:hover{background:#1d4ed8;color:#fff}
.lp-btn--garis{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.06)}
.lp-btn--garis:hover{background:rgba(255,255,255,.14);color:#fff}
.lp-btn--garis-gelap{border-color:var(--lp-line);color:var(--lp-ink);background:var(--lp-card)}
.lp-btn--garis-gelap:hover{border-color:var(--lp-brand);color:var(--lp-brand)}
.lp-btn--kecil{padding:.5rem .95rem;font-size:.92rem;border-radius:10px}

/* ------------------------------------------------------------------ nav */
.lp-nav{transition:background .2s,box-shadow .2s,padding .2s;padding:1rem 0}
.lp-nav .navbar-brand{color:#fff;font-weight:700;letter-spacing:-.01em}
.lp-nav .navbar-brand small{display:block;font-size:.68rem;font-weight:500;opacity:.75;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.lp-nav .nav-link{color:rgba(255,255,255,.82);font-weight:500;padding:.5rem .85rem!important}
.lp-nav .nav-link:hover{color:#fff}
.lp-nav .navbar-toggler{border-color:rgba(255,255,255,.35)}
.lp-nav .navbar-toggler-icon{filter:invert(1)}
.lp-nav.lp-nav--padat{background:rgba(7,15,46,.92);backdrop-filter:blur(10px);box-shadow:0 6px 24px -12px rgba(0,0,0,.5);padding:.55rem 0}
@media (max-width:991.98px){
  .lp-nav .navbar-collapse{background:rgba(7,15,46,.98);margin:.6rem -12px 0;padding:.75rem 1rem 1rem;border-radius:14px}
}

/* ----------------------------------------------------------------- hero */
.lp-hero{
  position:relative;overflow:hidden;color:#fff;padding:9rem 0 5rem;
  background:
    radial-gradient(900px 520px at 85% 5%,rgba(34,211,238,.30),transparent 60%),
    radial-gradient(760px 520px at 0% 100%,rgba(139,92,246,.30),transparent 60%),
    linear-gradient(160deg,var(--lp-hero-a),var(--lp-hero-b));
}
.lp-hero::after{ /* kisi tipis — kesan diagram jaringan */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.lp-hero>.container{position:relative;z-index:1}
.lp-pil{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:.85rem;font-weight:500}
.lp-pil b{color:#67e8f9}
.lp-hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.08;font-weight:800;letter-spacing:-.03em;margin:1.1rem 0 1.1rem}
.lp-hero h1 span{background:linear-gradient(90deg,#67e8f9,#a5b4fc 55%,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-hero .lp-sub{font-size:1.15rem;color:rgba(255,255,255,.82);max-width:36rem}
.lp-cek{list-style:none;padding:0;margin:1.4rem 0 2rem;display:grid;gap:.55rem}
.lp-cek li{display:flex;gap:.6rem;align-items:flex-start;color:rgba(255,255,255,.88)}
.lp-cek li svg{color:#67e8f9;margin-top:.2rem}
.lp-catatan-harga{font-size:.9rem;color:rgba(255,255,255,.7);margin-top:1rem}
.lp-catatan-harga b{color:#fff}

/* --- ilustrasi dasbor (HTML, bukan gambar) */
.lp-mock{
  background:rgba(255,255,255,.97);color:#0f172a;border-radius:20px;padding:1rem;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);transform:perspective(1400px) rotateY(-6deg) rotateX(3deg);
  font-size:.82rem;
}
@media (max-width:991.98px){.lp-mock{transform:none}}
.lp-mock__bar{display:flex;align-items:center;gap:.4rem;margin-bottom:.8rem}
.lp-mock__bar i{width:10px;height:10px;border-radius:50%;background:#e2e8e7;display:inline-block}
.lp-mock__bar span{margin-left:.5rem;font-family:ui-monospace,Consolas,monospace;font-size:.72rem;color:#6b7f7c;background:#f1f5f4;border-radius:6px;padding:.15rem .5rem}
.lp-mock__kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.8rem}
.lp-mock__kpi div{background:#f1f5ff;border-radius:12px;padding:.55rem .6rem}
.lp-mock__kpi small{display:block;color:#5d7370;font-size:.68rem}
.lp-mock__kpi b{font-size:1rem;letter-spacing:-.01em}
.lp-mock__kpi .ok{color:#15803d}.lp-mock__kpi .bad{color:#b91c1c}
.lp-mock table{width:100%;border-collapse:collapse}
.lp-mock th{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:#6b7f7c;font-weight:600;padding:.35rem .4rem;border-bottom:1px solid #e6eeed}
.lp-mock td{padding:.42rem .4rem;border-bottom:1px solid #f0f4f3;white-space:nowrap}
.lp-mock td code{font-size:.72rem;color:#2563eb}
.lp-st{font-size:.68rem;font-weight:700;padding:.12rem .45rem;border-radius:999px}
.lp-st--lunas{background:#dcfce7;color:#15803d}
.lp-st--belum{background:#fef3c7;color:#b45309}
.lp-st--isolir{background:#fee2e2;color:#b91c1c}
.lp-mock__wa{
  position:absolute;right:-12px;bottom:-58px;width:250px;background:#fff;border-radius:14px;padding:.65rem .75rem;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.45);display:flex;gap:.6rem;font-size:.78rem;color:#0f172a;
  animation:lp-ambang 4.5s ease-in-out infinite;
}
.lp-mock__wa .lp-wa{width:32px;height:32px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;flex:none}
.lp-mock__wa small{color:#6b7f7c}
@media (max-width:575.98px){.lp-mock__wa{position:static;width:auto;margin-top:.8rem}}
.lp-mock-wrap{position:relative}
.lp-mock-ket{font-size:.75rem;color:rgba(255,255,255,.6);text-align:center;margin-top:4.4rem}
@keyframes lp-ambang{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* --- strip fakta */
.lp-fakta{margin-top:4rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:767.98px){.lp-fakta{grid-template-columns:repeat(2,1fr)}}
.lp-fakta div{border-left:2px solid rgba(103,232,249,.55);padding-left:1rem}
.lp-fakta b{display:block;font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.lp-fakta span{font-size:.88rem;color:rgba(255,255,255,.72)}

/* ------------------------------------------------------------- bagian */
.lp-sec{padding:6rem 0}
.lp-sec--alt{background:var(--lp-bg-2)}
.lp-kepala{max-width:46rem;margin:0 auto 3.2rem;text-align:center}
.lp-eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lp-brand);margin-bottom:.7rem}
.lp-kepala h2,.lp-h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin-bottom:.9rem}
.lp-kepala p{color:var(--lp-mut);font-size:1.08rem}

/* --- kartu fitur */
.lp-kartu{
  background:var(--lp-card);border:1px solid var(--lp-line);border-radius:var(--lp-r);padding:1.6rem;height:100%;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.lp-kartu:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow);border-color:color-mix(in srgb,var(--lp-brand) 35%,transparent)}
.lp-kartu h3{font-size:1.08rem;font-weight:700;margin:1rem 0 .45rem}
.lp-kartu p{color:var(--lp-mut);margin:0;font-size:.96rem}
.lp-ikon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--lp-brand-soft);color:var(--lp-brand)}
.lp-ikon svg{width:24px;height:24px}
.lp-label{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.15rem .5rem;border-radius:6px;background:rgba(34,211,238,.16);color:#0e7490;margin-left:.4rem;vertical-align:.15em}

/* --- untuk siapa */
.lp-siapa{display:flex;gap:1rem;align-items:flex-start}
.lp-siapa h3{font-size:1.05rem;font-weight:700;margin:0 0 .25rem}
.lp-siapa p{color:var(--lp-mut);margin:0;font-size:.95rem}

/* --- langkah */
.lp-langkah{position:relative;counter-reset:lp}
.lp-langkah .lp-kartu{padding-top:2.2rem}
.lp-no{
  position:absolute;top:-18px;left:1.6rem;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-weight:800;box-shadow:0 8px 18px -6px rgba(37,99,235,.6)
}
.lp-langkah code{font-size:.85em;background:var(--lp-bg-2);border:1px solid var(--lp-line);padding:.05rem .35rem;border-radius:6px;color:var(--lp-brand)}

/* --- dua kolom penjelasan (keamanan) */
.lp-poin{display:flex;gap:.9rem;margin-bottom:1.4rem}
.lp-poin h3{font-size:1.02rem;font-weight:700;margin:0 0 .2rem}
.lp-poin p{margin:0;color:var(--lp-mut);font-size:.95rem}
.lp-alur{background:var(--lp-card);border:1px solid var(--lp-line);border-radius:var(--lp-r);padding:1.6rem;box-shadow:var(--lp-shadow)}
.lp-alur__baris{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:12px;background:var(--lp-bg-2)}
.lp-alur__baris b{display:block;font-size:.95rem}
.lp-alur__baris small{color:var(--lp-mut)}
.lp-alur__panah{text-align:center;color:var(--lp-brand);font-size:.8rem;font-weight:600;padding:.4rem 0}

/* ---------------------------------------------------------------- harga */
.lp-tab{display:inline-flex;gap:.3rem;padding:.3rem;border-radius:14px;background:var(--lp-bg-2);border:1px solid var(--lp-line);flex-wrap:wrap;justify-content:center}
.lp-tab .nav-link{border-radius:10px;color:var(--lp-mut);font-weight:600;padding:.55rem 1.1rem}
.lp-tab .nav-link.active{background:#2563eb;color:#fff}
.lp-harga{
  position:relative;background:var(--lp-card);border:1px solid var(--lp-line);border-radius:var(--lp-r);
  padding:1.7rem 1.4rem;height:100%;display:flex;flex-direction:column;
}
.lp-harga--sorot{border:2px solid #3b82f6;box-shadow:0 22px 54px -20px rgba(37,99,235,.55)}
.lp-pita{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .8rem;border-radius:999px;white-space:nowrap}
.lp-harga h3{font-size:1.1rem;font-weight:700;margin:0}
.lp-harga .lp-untuk{font-size:.85rem;color:var(--lp-mut);min-height:2.6em;margin:.3rem 0 1rem}
.lp-angka{font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.lp-angka small{font-size:.85rem;font-weight:500;color:var(--lp-mut);letter-spacing:0}
.lp-harga ul{list-style:none;padding:0;margin:1.2rem 0 1.5rem;display:grid;gap:.5rem;font-size:.93rem}
.lp-harga li{display:flex;gap:.5rem;align-items:flex-start}
.lp-harga li svg{color:var(--lp-ok);margin-top:.15rem}
.lp-harga .lp-btn{margin-top:auto;width:100%}
.lp-termasuk{background:var(--lp-card);border:1px dashed color-mix(in srgb,var(--lp-brand) 45%,transparent);border-radius:var(--lp-r);padding:1.4rem 1.6rem;margin-top:2rem}
.lp-termasuk h3{font-size:1rem;font-weight:700;margin-bottom:.9rem}
.lp-termasuk ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem 1.2rem;font-size:.93rem}
.lp-termasuk li{display:flex;gap:.5rem}
.lp-termasuk li svg{color:var(--lp-brand);margin-top:.15rem}
.lp-catatan{font-size:.86rem;color:var(--lp-mut);text-align:center;margin-top:1.6rem}

/* ------------------------------------------------------------------ FAQ */
.lp-faq .accordion-item{background:var(--lp-card);border:1px solid var(--lp-line);border-radius:14px!important;margin-bottom:.7rem;overflow:hidden}
.lp-faq .accordion-button{background:var(--lp-card);color:var(--lp-ink);font-weight:600;padding:1.1rem 1.3rem;box-shadow:none}
.lp-faq .accordion-button:not(.collapsed){color:var(--lp-brand);background:var(--lp-card)}
.lp-faq .accordion-button::after{filter:var(--lp-chevron,none)}
.lp-faq .accordion-body{color:var(--lp-mut);padding:0 1.3rem 1.2rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lp-faq .accordion-button::after{filter:invert(1)}}

/* --------------------------------------------------------------- penutup */
.lp-ajakan{
  border-radius:28px;padding:3.5rem 2rem;text-align:center;color:#fff;
  background:radial-gradient(600px 300px at 85% 0%,rgba(34,211,238,.32),transparent 60%),radial-gradient(500px 300px at 0% 100%,rgba(139,92,246,.35),transparent 60%),linear-gradient(135deg,#070f2e,#1d3fb8);
}
.lp-ajakan h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em}
.lp-ajakan p{color:rgba(255,255,255,.8);max-width:36rem;margin:0 auto 1.8rem}

.lp-kaki{padding:4rem 0 2rem;border-top:1px solid var(--lp-line);font-size:.93rem}
.lp-kaki h4{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lp-mut);margin-bottom:1rem}
.lp-kaki ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.lp-kaki a{color:var(--lp-ink);text-decoration:none}
.lp-kaki a:hover{color:var(--lp-brand)}
.lp-kaki__bawah{border-top:1px solid var(--lp-line);margin-top:3rem;padding-top:1.5rem;color:var(--lp-mut);font-size:.85rem}

/* ----------------------------------------------- halaman dalam (panduan) */
.lp-dalam{padding:8rem 0 4rem}
.lp-dalam h1{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em}
.lp-isi{max-width:46rem}
.lp-isi h2{font-size:1.35rem;font-weight:700;margin:2.4rem 0 .8rem;display:flex;gap:.7rem;align-items:center}
.lp-isi h2 .lp-no{position:static;width:34px;height:34px;font-size:.95rem;border-radius:10px;flex:none}
.lp-isi p,.lp-isi li{color:var(--lp-mut)}
.lp-isi strong{color:var(--lp-ink)}
.lp-isi code{color:var(--lp-brand);background:var(--lp-bg-2);border:1px solid var(--lp-line);padding:.05rem .35rem;border-radius:6px}
.lp-kotak{border-left:3px solid var(--lp-brand);background:var(--lp-bg-2);border-radius:0 12px 12px 0;padding:1rem 1.2rem;margin:1.2rem 0;color:var(--lp-mut)}
.lp-nav--solid{background:rgba(7,15,46,.97)}

/* ------------------------------------- panduan (dibangkitkan dari portal) */
.lp-remah{font-size:.88rem;color:var(--lp-mut);margin-bottom:1.2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.lp-remah a{text-decoration:none}
.lp-artikel{color:var(--lp-ink);font-size:1.02rem}
.lp-artikel h2{font-size:clamp(1.8rem,3.4vw,2.4rem)!important;font-weight:800;letter-spacing:-.025em;margin-bottom:1.2rem!important}
.lp-artikel h3{font-size:1.2rem!important;font-weight:700;color:var(--lp-ink)!important;margin-top:2.2rem!important;margin-bottom:.7rem!important}
.lp-artikel p,.lp-artikel li{color:var(--lp-mut)}
.lp-artikel strong{color:var(--lp-ink)}
.lp-artikel a{font-weight:600}
.lp-artikel code{color:var(--lp-brand);background:var(--lp-bg-2);border:1px solid var(--lp-line);padding:.05rem .35rem;border-radius:6px;font-size:.88em}
.lp-artikel pre{background:#0b1226!important;color:#dbe4ff;border-radius:12px!important;padding:1rem 1.2rem!important;overflow:auto}
.lp-artikel pre code{background:none;border:0;padding:0;color:inherit}
.lp-artikel .table{--bs-table-bg:transparent;--bs-table-color:var(--lp-ink);border-color:var(--lp-line);font-size:.93rem}
.lp-artikel .table thead th{background:var(--lp-bg-2);font-weight:700}
.lp-artikel .table-responsive{border:1px solid var(--lp-line);border-radius:12px;margin:1rem 0}
.lp-artikel .table-responsive .table{margin:0}
.lp-artikel .alert{border:0;border-left:3px solid var(--lp-brand);background:var(--lp-bg-2);color:var(--lp-mut);border-radius:0 12px 12px 0;font-size:.95rem!important;padding:.9rem 1.1rem!important}
.lp-artikel .alert-warning{border-left-color:#f59e0b}
.lp-artikel hr{border-color:var(--lp-line);opacity:1;margin:2rem 0}
.lp-artikel img{max-width:100%;border-radius:12px}
.lp-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem}
.lp-prevnext a{display:block;border:1px solid var(--lp-line);border-radius:14px;padding:1rem 1.2rem;text-decoration:none;color:var(--lp-ink);font-weight:600;background:var(--lp-card)}
.lp-prevnext a:hover{border-color:var(--lp-brand);color:var(--lp-brand)}
.lp-prevnext small{display:block;color:var(--lp-mut);font-weight:500;font-size:.8rem}
.lp-samping{position:sticky;top:90px;background:var(--lp-card);border:1px solid var(--lp-line);border-radius:var(--lp-r);padding:1.2rem 1.3rem;max-height:calc(100vh - 110px);overflow:auto}
.lp-samping summary{font-weight:700;cursor:pointer;margin-bottom:.5rem}
.lp-samping h4{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lp-mut);margin:1rem 0 .4rem}
.lp-samping ul{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.lp-samping a{display:block;padding:.3rem .5rem;border-radius:8px;text-decoration:none;color:var(--lp-ink);font-size:.92rem}
.lp-samping a:hover{background:var(--lp-bg-2);color:var(--lp-brand)}
.lp-samping a[aria-current="page"]{background:var(--lp-brand-soft);color:var(--lp-brand);font-weight:600}
@media (max-width:991.98px){.lp-samping{position:static;max-height:none}}
.lp-cari{display:flex;align-items:center;gap:.6rem;background:var(--lp-card);border:1px solid var(--lp-line);border-radius:14px;padding:.75rem 1rem;margin:1.8rem 0 1rem;max-width:40rem;box-shadow:var(--lp-shadow)}
.lp-cari svg{color:var(--lp-mut)}
.lp-cari input{border:0;outline:0;background:transparent;color:var(--lp-ink);width:100%;font-size:1rem}
.lp-pkat{margin-top:2.6rem}
.lp-pkat h2{font-size:1.25rem;font-weight:800;display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.lp-pkat h2 svg{color:var(--lp-brand);width:1.4em;height:1.4em}
.lp-kartu--tautan h3{margin-top:0;color:var(--lp-ink)}
.lp-kartu--tautan:hover h3{color:var(--lp-brand)}

/* ------------------------------------------------------- status server
   Nama kelas cn-* dipertahankan karena JavaScript status.html memasangnya. */
:root{--cn-ok:#16a34a;--cn-bad:#dc2626;--cn-mut:var(--lp-mut)}
.cn-status-band{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.4rem;border-radius:var(--lp-r);border:1px solid var(--lp-line);background:var(--lp-card);box-shadow:var(--lp-shadow)}
.cn-status-band--ok{border-color:rgba(22,163,74,.35);background:color-mix(in srgb,#16a34a 7%,var(--lp-card))}
.cn-status-band--bad{border-color:rgba(220,38,38,.4);background:color-mix(in srgb,#dc2626 8%,var(--lp-card))}
.cn-titik{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;vertical-align:.05em;background:#94a3b8}
.cn-titik--ok{background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.18)}
.cn-titik--bad{background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.18)}
.cn-titik--nihil{background:#94a3b8}
.cn-status-band .cn-titik{width:14px;height:14px}
.lp-st-h{font-size:1.15rem;font-weight:800;margin-bottom:.8rem}
.lp-st-tabel{border:1px solid var(--lp-line);border-radius:14px;background:var(--lp-card)}
.lp-st-tabel .table{--bs-table-bg:transparent;--bs-table-color:var(--lp-ink);border-color:var(--lp-line)}
.lp-st-tabel thead th{background:var(--lp-bg-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--lp-mut)}
.lp-st-tabel td,.lp-st-tabel th{padding:.8rem 1rem}

/* ------------------------------------------------------------- animasi */
.lp-muncul{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.lp-muncul.lp-tampak{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lp-muncul{opacity:1;transform:none;transition:none}
  .lp-mock,.lp-mock__wa{animation:none;transform:none}
  .lp-btn,.lp-kartu{transition:none}
}