/* ============================================================================
   CoreNet Landing — lapisan tema di atas Bootstrap 5.

   Seluruh kelas milik sendiri berawalan `cn-` supaya tidak pernah bertabrakan
   dengan kelas Bootstrap. Bootstrap dipakai untuk grid, navbar, accordion, dan
   tombol; berkas ini yang memberi wajahnya.

   ARAH VISUAL

   Versi pertama terasa gepeng: latarnya gelap pekat, tipografinya kurang besar,
   dan jarak antar bagian terlalu rapat sehingga semuanya menumpuk. Tiga hal itu
   yang diperbaiki di sini, bukan penggantian kerangka kerja:

     1. Bidang biru cerah, bukan navy gelap. Warna gelap membuat halaman terasa
        berat dan sempit; biru terang memberi ruang dan kesan segar.
     2. Tipografi jauh lebih besar. Judul hero naik sampai 3,6rem, judul bagian
        sampai 2,6rem, dan keduanya rapat leading-nya supaya tetap padat.
     3. Jarak antar bagian dinaikkan dari 5rem menjadi 6,5rem, dan kartu diberi
        padding lebih longgar. Ruang kosong itulah yang membuat halaman bernapas.
   ========================================================================== */

/* PALET — teal, 8 Agustus 2026.

   Sebelumnya biru #3d5bf5. Masalahnya bukan "biru" melainkan biru yang mana:
   itu biru SaaS generik yang sama dengan Indihome, Biznet, dan First Media,
   sehingga halaman ini tidak pernah tertinggal di ingatan orang. Teal tetap
   dingin dan tenang seperti biru — jadi kesan "dapat dipercaya" tidak hilang —
   tetapi hampir tidak dipakai pesaing lokal, dan maknanya lebih tepat: ia warna
   sinyal dan diagram jaringan, bukan warna bank. Teal juga sudah ada di portal
   (#1fa2a6 pada kartu statistik), jadi ini menegaskan yang sudah ada.

   Nama variabelnya sengaja tetap `--cn-biru`. Isinya kini teal, dan itu memang
   janggal dibaca, tetapi mengganti nama berarti menyentuh 19 baris lain dan
   membuat pembatalan jadi berisik. Selama palet ini masih dicoba, satu berkas
   ini yang dipulihkan untuk kembali ke biru. Bila teal dipertahankan, barulah
   namanya layak dirapikan.

   Dua penyesuaian ikutan yang wajib, bukan selera:

     - --cn-ok dulu #16a97b, hijau yang condong ke teal. Berdampingan dengan
       merek teal ia berbaur, padahal titik status harus terbaca seketika.
       Digeser ke #16a34a, hijau sejati — justru lebih jelas dari sebelumnya.
     - --cn-biru dipilih #0f766e, bukan teal yang lebih cerah, agar teks putih
       di atas tombol tetap berkontras 5,5:1 (biru lama 5,2:1). Teal terang
       seperti #0d9488 hanya 3,7:1 dan gagal untuk teks berukuran normal.
*/
:root{
  --cn-biru:#0f766e;         /* teal utama — pengganti biru #3d5bf5 */
  --cn-biru-t:#2dd4bf;
  --cn-biru-d:#0b5852;
  --cn-indigo:#4353c4;       /* indigo portal — dicatat karena portal masih indigo */
  --cn-tinta:#0f2321;
  --cn-mut:#566b69;
  --cn-bg:#ffffff;
  --cn-bg2:#f1faf8;
  --cn-garis:rgba(15,35,33,.10);
  --cn-ok:#16a34a;
  --cn-warn:#e0a63b;
  --cn-bad:#dc5b57;
  --cn-r:18px;
  --cn-bayang:0 18px 48px rgba(15,35,33,.09);
  --cn-bayang-kuat:0 26px 70px rgba(15,35,33,.16);
}

body{
  background:var(--cn-bg); color:var(--cn-tinta);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-size:16px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{letter-spacing:-.025em; line-height:1.14; text-wrap:balance; font-weight:800}
a{text-decoration:none}
:focus-visible{outline:3px solid var(--cn-biru-t); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} html{scroll-behavior:auto} }
html{scroll-behavior:smooth}

/* Jarak antar bagian. Inilah obat utama "gepeng" — bukan warnanya. */
.cn-sec{padding:6.5rem 0}
.cn-sec--rapat{padding:4.5rem 0}
@media (max-width:768px){ .cn-sec{padding:4rem 0} .cn-sec--rapat{padding:3rem 0} }
.cn-bg2{background:var(--cn-bg2)}

.cn-eyebrow{
  display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cn-biru); margin-bottom:.85rem;
}
.cn-h2{font-size:clamp(1.85rem,4vw,2.6rem); font-weight:850}
.cn-lead{color:var(--cn-mut); font-size:1.08rem; max-width:62ch}

/* ------------------------------------------------------------------ navbar */
.cn-nav{background:transparent; transition:background .2s ease, box-shadow .2s ease}
.cn-nav.cn-nav--pekat{background:var(--cn-biru); box-shadow:0 6px 24px rgba(15,35,33,.16)}
.cn-nav .navbar-brand{color:#fff; font-weight:850; font-size:1.2rem; letter-spacing:-.02em}
/* "Remote Platform" dua kali lebih panjang daripada "Tunnel" yang digantikannya.
   Dengan letter-spacing .24em ia melebihi lebar kata "CoreNet" di atasnya dan
   merek jadi tampak berat sebelah — jaraknya dirapatkan dan barisnya dinaikkan
   sedikit supaya kedua baris berakhir kira-kira sejajar. */
.cn-nav .navbar-brand small{display:block; font-size:.55rem; letter-spacing:.14em; opacity:.6;
  font-weight:600; line-height:1.1; margin-top:.1rem}
@media (max-width:575.98px){
  .cn-nav .navbar-brand{font-size:1.1rem}
  .cn-nav .navbar-brand small{font-size:.5rem; letter-spacing:.1em}
}
.cn-nav .navbar-brand svg{color:#fff}
.cn-nav .nav-link{color:rgba(255,255,255,.86)!important; font-weight:550; font-size:.94rem; padding:.5rem .95rem!important; border-radius:10px}
.cn-nav .nav-link:hover,.cn-nav .nav-link.active{color:#fff!important; background:rgba(255,255,255,.14)}
.cn-nav .navbar-toggler{border-color:rgba(255,255,255,.35); padding:.35rem .6rem}
.cn-nav .navbar-toggler-icon{filter:invert(1) brightness(2)}
@media (max-width:991px){
  .cn-nav .navbar-collapse{background:var(--cn-biru-d); margin:.75rem -.5rem -.5rem; padding:.75rem; border-radius:14px}
}

/* -------------------------------------------------------------------- hero */
.cn-hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(155deg,var(--cn-biru) 0%,#0d9488 45%,#14b8a6 100%);
  padding-bottom:7rem;
}
/* Bidang lengkung di kaki hero — pemisah lembut menuju bagian putih.
   Lebih ramah daripada garis lurus, dan itulah yang membuat halaman terasa
   "segar" alih-alih terpotong-potong. */
.cn-hero::after{
  content:''; position:absolute; left:-5%; right:-5%; bottom:-1px; height:90px;
  background:var(--cn-bg); border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.cn-hero::before{
  content:''; position:absolute; inset:0; opacity:.55;
  background-image:radial-gradient(circle,rgba(255,255,255,.16) 1.5px,transparent 1.5px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 20%,#000 10%,transparent 70%);
  mask-image:radial-gradient(ellipse 70% 70% at 70% 20%,#000 10%,transparent 70%);
}
.cn-hero__in{position:relative; z-index:2; padding-top:4.5rem}
.cn-hero h1{font-size:clamp(2.3rem,5.4vw,3.6rem); font-weight:850}
.cn-hero p.cn-sub{color:rgba(255,255,255,.85); font-size:1.1rem; margin-top:1.15rem; max-width:52ch}

.cn-cek{list-style:none; padding:0; margin:1.9rem 0 0}
/* Ikon dipasang sebagai lapisan mutlak, bukan flex item.

   Sebelumnya baris ini `display:flex; gap:.7rem`, dan itu keliru: SETIAP
   elemen sebaris di dalam teks — <b>, <a>, <em> — ikut menjadi flex item
   tersendiri dan menerima jarak .7rem di kedua sisinya. Begitu bullet kedua
   diberi <b>Hotspot</b> dan <b>PPPoE</b>, keduanya tampil dengan celah
   menganga yang terlihat seperti salah ketik.

   Dengan blok biasa + padding kiri, teks mengalir normal dan menambah markup
   sebaris di kemudian hari tidak akan mengulang bug yang sama. */
.cn-cek li{display:block; position:relative; padding-left:1.9rem; margin-bottom:.7rem;
  font-size:1rem; color:rgba(255,255,255,.94)}
.cn-cek svg{position:absolute; left:0; top:.34rem; color:#86efac}

.cn-pill{
  display:inline-flex; align-items:center; gap:.55rem; padding:.42rem 1rem; border-radius:30px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  font-size:.82rem; font-weight:650; color:#fff;
}
.cn-pill i{width:8px; height:8px; border-radius:50%; background:#4ade80; display:inline-block;
  box-shadow:0 0 0 4px rgba(74,222,128,.28)}

/* Kartu putih mengambang di atas biru — titik kontras utama halaman. */
.cn-kartu-apung{
  background:#fff; border-radius:22px; box-shadow:var(--cn-bayang-kuat);
  padding:1.9rem; color:var(--cn-tinta);
}
.cn-kartu-apung h3{font-size:1.12rem; font-weight:800; margin-bottom:.25rem}
.cn-baris{display:flex; align-items:center; gap:.85rem; padding:.85rem 0; border-bottom:1px solid var(--cn-garis)}
.cn-baris:last-of-type{border-bottom:0}
.cn-baris__ico{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  background:rgba(15,118,110,.1); color:var(--cn-biru)}
/* Keduanya WAJIB block. Sebagai inline, nama layanan dan keterangannya
   menempel jadi satu baris ("VPN Remote1 port, akses Winbox"). */
.cn-baris__t{display:block; font-weight:700; font-size:.94rem; line-height:1.3}
.cn-baris__s{display:block; font-size:.8rem; color:var(--cn-mut); line-height:1.35}
.cn-baris__h{margin-left:auto; text-align:right; white-space:nowrap}
.cn-baris__h b{display:block; font-size:.98rem; font-weight:800; color:var(--cn-biru); font-variant-numeric:tabular-nums}
.cn-baris__h span{font-size:.72rem; color:var(--cn-mut)}

/* ------------------------------------------------------------------ statistik */
.cn-stat{text-align:center; padding:1.25rem .75rem}
.cn-stat b{display:block; font-size:2.1rem; font-weight:850; color:var(--cn-biru); font-variant-numeric:tabular-nums; line-height:1}
.cn-stat span{font-size:.85rem; color:var(--cn-mut)}

/* ------------------------------------------------------------------- kartu */
.cn-card{
  background:#fff; border:1px solid var(--cn-garis); border-radius:var(--cn-r);
  padding:2rem 1.75rem; height:100%; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cn-card:hover{transform:translateY(-4px); box-shadow:var(--cn-bayang); border-color:rgba(15,118,110,.3)}
.cn-card__ico{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:1.15rem;
  background:linear-gradient(135deg,rgba(15,118,110,.12),rgba(45,212,191,.18)); color:var(--cn-biru);
}
.cn-card h3{font-size:1.1rem; font-weight:800; margin-bottom:.5rem}
.cn-card p{color:var(--cn-mut); font-size:.94rem; margin:0}
.cn-card ul{margin:1rem 0 0; padding-left:1.15rem; color:var(--cn-mut); font-size:.9rem}
.cn-card li{margin-bottom:.35rem}

.cn-tag{display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:7px; background:rgba(22,163,74,.14); color:#15803d; vertical-align:middle; margin-left:.4rem}
.cn-tag--soon{background:rgba(224,166,59,.16); color:#a5761f}

/* ------------------------------------------------------------------- harga */
.cn-harga{
  background:#fff; border:1px solid var(--cn-garis); border-radius:var(--cn-r);
  padding:2rem 1.75rem; height:100%; display:flex; flex-direction:column;
}
.cn-harga--unggul{border:2px solid var(--cn-biru); box-shadow:var(--cn-bayang-kuat); position:relative}
.cn-harga--unggul::before{
  content:'PALING BANYAK DIPILIH'; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--cn-biru); color:#fff; font-size:.63rem; font-weight:850; letter-spacing:.1em;
  padding:.3rem .85rem; border-radius:20px; white-space:nowrap;
}
.cn-harga h3{font-size:1.05rem; font-weight:800}
.cn-harga__mulai{font-size:.8rem; color:var(--cn-mut); margin-top:1.15rem}
.cn-harga__p{font-size:2.25rem; font-weight:850; color:var(--cn-biru); font-variant-numeric:tabular-nums; line-height:1.1}
.cn-harga__p sup{font-size:.9rem; font-weight:700; vertical-align:super}
.cn-harga__p span{font-size:.85rem; font-weight:600; color:var(--cn-mut)}
.cn-harga ul{list-style:none; margin:1.35rem 0 1.75rem; padding:0; font-size:.92rem; color:var(--cn-mut)}
.cn-harga li{display:flex; gap:.6rem; margin-bottom:.6rem; align-items:flex-start}
.cn-harga li svg{flex:0 0 auto; margin-top:.3rem; color:var(--cn-ok)}
.cn-harga .btn{margin-top:auto}

/* ------------------------------------------------------------------ tombol */
.btn-cn{background:var(--cn-biru); color:#fff; font-weight:700; border-radius:12px; padding:.85rem 1.7rem; border:0}
.btn-cn:hover{background:var(--cn-biru-d); color:#fff}
.btn-cn-putih{background:#fff; color:var(--cn-biru); font-weight:700; border-radius:12px; padding:.85rem 1.7rem; border:0}
.btn-cn-putih:hover{background:#e9f7f5; color:var(--cn-biru-d)}
.btn-cn-garis{background:transparent; color:#fff; font-weight:700; border-radius:12px; padding:.85rem 1.7rem;
  border:1.5px solid rgba(255,255,255,.45)}
.btn-cn-garis:hover{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.7)}
.btn-cn-tipis{background:#fff; color:var(--cn-tinta); font-weight:700; border-radius:12px; padding:.8rem 1.6rem;
  border:1.5px solid var(--cn-garis)}
.btn-cn-tipis:hover{border-color:var(--cn-biru); color:var(--cn-biru)}
.btn-cn-sm{padding:.55rem 1.15rem; font-size:.88rem; border-radius:10px}

/* ----------------------------------------------------------------- langkah */
.cn-step__n{
  width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,var(--cn-biru),var(--cn-biru-t));
  color:#fff; display:grid; place-items:center; font-weight:850; font-size:1.05rem; flex:0 0 auto;
  box-shadow:0 8px 20px rgba(15,118,110,.3);
}

/* --------------------------------------------------------------- accordion */
.accordion-item{border:1px solid var(--cn-garis)!important; border-radius:14px!important; margin-bottom:.85rem; overflow:hidden}
.accordion-button{font-weight:700; font-size:1rem; padding:1.15rem 1.35rem; background:#fff!important; box-shadow:none!important}
.accordion-button:not(.collapsed){color:var(--cn-biru)!important; background:#f2fbfa!important}
.accordion-button:focus{box-shadow:0 0 0 3px rgba(15,118,110,.2)!important}
.accordion-body{color:var(--cn-mut); font-size:.96rem; padding:0 1.35rem 1.35rem; max-width:78ch}

/* --------------------------------------------------------------------- cta */
.cn-cta{
  background:linear-gradient(135deg,var(--cn-biru),#14b8a6); border-radius:26px;
  padding:4rem 2rem; text-align:center; color:#fff; position:relative; overflow:hidden;
}
.cn-cta::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(circle,rgba(255,255,255,.18) 1.5px,transparent 1.5px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 72%);
}
.cn-cta > *{position:relative; z-index:2}
.cn-cta h2{font-size:clamp(1.7rem,3.6vw,2.4rem); font-weight:850}
.cn-cta p{color:rgba(255,255,255,.9); margin:.85rem auto 0; max-width:54ch}

/* ------------------------------------------------------------------ status */
.cn-status-band{border-radius:16px; padding:1.5rem 1.75rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.cn-status-band--ok{background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.3)}
.cn-status-band--warn{background:rgba(224,166,59,.12); border:1px solid rgba(224,166,59,.35)}
.cn-status-band--bad{background:rgba(220,91,87,.1); border:1px solid rgba(220,91,87,.3)}
.cn-titik{width:11px; height:11px; border-radius:50%; flex:0 0 auto; display:inline-block}
.cn-titik--ok{background:var(--cn-ok); box-shadow:0 0 0 4px rgba(22,163,74,.2)}
.cn-titik--warn{background:var(--cn-warn); box-shadow:0 0 0 4px rgba(224,166,59,.2)}
.cn-titik--bad{background:var(--cn-bad); box-shadow:0 0 0 4px rgba(220,91,87,.2)}

/* ------------------------------------------------------------------- tabel */
/* overflow-x:auto, BUKAN overflow:hidden. Tabelnya ber-min-width 520 px; dengan
   `hidden` kolom terakhir (harga) terpotong di ponsel dan tidak dapat dijangkau
   sama sekali — pengunjung melihat daftar layanan tanpa harganya. Dengan `auto`
   tabelnya bergulir sendiri di dalam kartunya, dan halaman tetap tidak dapat
   digeser ke samping. Sudut membulatnya tetap terpotong rapi. */
.cn-tabel{background:#fff; border:1px solid var(--cn-garis); border-radius:var(--cn-r);
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch}
.cn-tabel table{width:100%; margin:0; font-size:.94rem; min-width:520px}
.cn-tabel th{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--cn-mut);
  font-weight:800; padding:1rem 1.35rem; border-bottom:1px solid var(--cn-garis); white-space:nowrap; text-align:left}
.cn-tabel td{padding:.9rem 1.35rem; border-bottom:1px solid var(--cn-garis)}
.cn-tabel tbody tr:last-child td{border-bottom:0}
.cn-tabel tbody tr:hover{background:var(--cn-bg2)}
.cn-num{font-variant-numeric:tabular-nums; text-align:right}

/* ------------------------------------------------------------------ footer */
.cn-ftr{background:#0b2422; color:rgba(255,255,255,.68); padding:4.5rem 0 1.75rem; font-size:.94rem}
.cn-ftr h4{color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:1.15rem; font-weight:800}
.cn-ftr a{color:rgba(255,255,255,.68); display:block; padding:.28rem 0}
.cn-ftr a:hover{color:#fff}
.cn-ftr__brand{display:flex; align-items:center; gap:.65rem; color:#fff; font-weight:850; font-size:1.15rem; margin-bottom:1.15rem}
.cn-ftr__brand small{display:block; font-size:.56rem; letter-spacing:.24em; opacity:.55; font-weight:600}
.cn-ftr__bawah{border-top:1px solid rgba(255,255,255,.1); margin-top:3rem; padding-top:1.75rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.86rem; color:rgba(255,255,255,.45)}

/* --------------------------------------------------------- halaman dalam */
.cn-head-dalam{
  background:linear-gradient(150deg,var(--cn-biru),#14b8a6); color:#fff;
  padding:8rem 0 4.5rem; position:relative; overflow:hidden;
}
.cn-head-dalam::after{
  content:''; position:absolute; left:-5%; right:-5%; bottom:-1px; height:70px;
  background:var(--cn-bg); border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.cn-head-dalam h1{font-size:clamp(1.9rem,4.2vw,2.9rem); position:relative; z-index:2}
.cn-head-dalam p{color:rgba(255,255,255,.85); margin-top:.9rem; max-width:56ch; position:relative; z-index:2}

.cn-toc{position:sticky; top:92px; border:1px solid var(--cn-garis); border-radius:var(--cn-r); padding:1.35rem; background:#fff}
.cn-toc h4{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--cn-mut); font-weight:800; margin-bottom:.85rem}
.cn-toc a{display:block; padding:.4rem 0; color:var(--cn-mut); font-size:.92rem; font-weight:550}
.cn-toc a:hover{color:var(--cn-biru)}

.cn-artikel h2{font-size:1.5rem; font-weight:850; margin:3rem 0 .85rem; scroll-margin-top:100px}
.cn-artikel h2:first-child{margin-top:0}
.cn-artikel h3{font-size:1.1rem; font-weight:800; margin:1.85rem 0 .6rem}
.cn-artikel p{color:var(--cn-mut); margin-bottom:1rem; max-width:74ch}
.cn-artikel ul,.cn-artikel ol{color:var(--cn-mut); max-width:74ch; padding-left:1.3rem}
.cn-artikel li{margin-bottom:.45rem}
.cn-artikel code{background:var(--cn-bg2); border:1px solid var(--cn-garis); border-radius:6px;
  padding:.12rem .4rem; font-size:.88em; color:var(--cn-tinta)}
.cn-artikel pre{background:#0b2422; color:#dcf2ee; border-radius:12px; padding:1.15rem 1.35rem;
  overflow-x:auto; font-size:.86rem; line-height:1.6}
.cn-artikel pre code{background:none; border:0; padding:0; color:inherit}
.cn-catatan{border-left:4px solid var(--cn-biru); background:var(--cn-bg2); border-radius:0 12px 12px 0;
  padding:1.1rem 1.35rem; margin:1.5rem 0; font-size:.94rem; color:var(--cn-mut); max-width:74ch}
.cn-catatan strong{color:var(--cn-tinta)}
.cn-catatan--awas{border-left-color:var(--cn-warn); background:rgba(224,166,59,.08)}

/* ============================================================================
   GAYA LEMBUT & LAPANG — 8 Agustus 2026

   Menyelaraskan landing dengan portal dan dengan acuan yang diberikan: bidang
   terang bergradien tipis, sudut lebih besar, bayangan menyebar. Blok tambahan
   di ujung berkas — membatalkannya cukup dengan menghapus blok ini.
   ========================================================================== */

/* Bagian berlatar terang diberi semburat teal yang sangat tipis. Bidang datar
   satu warna terlihat mati; gradien selebar ini tidak terbaca sebagai warna,
   hanya sebagai ruang. */
.cn-bg2{
  background-image:radial-gradient(900px 520px at 88% 0%,rgba(20,184,166,.13),transparent 62%);
}

/* Sudut sedikit lebih besar, mengikuti acuan. Kartu apung paling menonjol
   sehingga sudutnya paling besar. */
.cn-card,.cn-harga,.cn-tabel,.cn-toc{border-radius:22px;}
.cn-kartu-apung{border-radius:26px;}

/* ============================================================================
   KOMPONEN BARU — 8 Agustus 2026 (penyusunan ulang jadi 13 bagian)
   ========================================================================== */

/* Diagram alur "Bagaimana CoreNet bekerja". Sengaja bukan gambar: teksnya
   dapat dipilih, dibaca pembaca layar, dan tidak pecah saat diperbesar. */
.cn-alur{text-align:center}
.cn-alur__k{
  background:#fff; border:1px solid var(--cn-garis); border-radius:16px;
  padding:1rem 1.1rem; font-weight:700; font-size:.98rem; box-shadow:var(--cn-bayang);
}
.cn-alur__p{
  position:relative; padding:1.45rem 0; font-size:.78rem; color:var(--cn-mut);
}
/* Garis penghubung di belakang keterangan panah. */
.cn-alur__p::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px;
  transform:translateX(-50%); background:linear-gradient(var(--cn-biru),rgba(20,184,166,.25));
  z-index:0;
}
.cn-alur__p span,.cn-alur__p{position:relative}
.cn-alur__p{background:transparent}

/* Tangga harga di dalam kartu — bukan .cn-tabel yang berbingkai penuh. */
.cn-tabel-mini{width:100%; font-size:.9rem; color:var(--cn-mut); margin:.35rem 0 0}
.cn-tabel-mini td{padding:.42rem 0; border-bottom:1px dashed var(--cn-garis)}
.cn-tabel-mini tr:last-child td{border-bottom:0}
.cn-tabel-mini .cn-num{text-align:right; font-weight:700; color:var(--cn-tinta)}

/* ============================================================================
   TITIK HENTI PONSEL

   Mengikuti sebaran perangkat nyata, bukan angka bulat:

     <= 359px   ponsel kecil    (Galaxy A0x, iPhone SE lama)
     360-389    ponsel standar  (paling umum di Indonesia)
     390-479    ponsel besar    (iPhone 14/15, Pixel)
     480-767    tablet kecil
     768-1023   tablet
     >= 1024    desktop

   Yang benar-benar berubah hanya tiga hal: ukuran huruf judul, kerapatan
   padding, dan jumlah kolom. Sisanya sudah ditangani grid Bootstrap, jadi
   menambah aturan di sini hanya akan menduplikasi pekerjaannya.
   ========================================================================== */

@media (max-width:767.98px){
  /* 7,5rem = 120 px, dan itu BUKAN angka selera: lengkungan putih di kaki hero
     (.cn-hero::after) tingginya 90 px dan menumpang di atas isi. Nilai lama
     5rem = 80 px lebih PENDEK daripada lengkungan itu, sehingga baris terakhir
     hero tertutup — dulu tidak terlihat karena yang paling bawah adalah kartu
     harga yang tinggi, sekarang terlihat karena yang paling bawah baris harga
     setipis satu kalimat. Jangan diturunkan di bawah 6rem. */
  .cn-hero{padding-bottom:7.5rem}
  /* 5,5rem, bukan 3,5rem. Navigasi ini `fixed-top` setinggi ±72 px; dengan
     3,5rem (56 px) judul hero berhimpit dan sebagian tersembunyi di baliknya.
     Dulu tidak terasa karena ada pil "Jaringan beroperasi normal" sebagai
     penyangga di atas judul — pil itu sudah dihapus. */
  .cn-hero__in{padding-top:5.5rem}
  .cn-kartu-apung{padding:1.45rem}
  .cn-cta{padding:2.75rem 1.5rem; border-radius:22px}
  .cn-alur{margin-bottom:2.5rem}
}

@media (max-width:575.98px){
  .cn-sec{padding:3.25rem 0}
  .cn-sec--rapat{padding:2.5rem 0}
  .cn-stat{padding:1rem .5rem}
  .cn-stat b{font-size:1.7rem}
  .cn-stat span{font-size:.78rem}
  .cn-h2{font-size:1.55rem}
  .cn-lead{font-size:1rem}
}

@media (max-width:389.98px){
  .cn-hero h1{font-size:1.95rem}
  .cn-sub{font-size:1rem}
  .cn-cek li{font-size:.94rem}
  .cn-stat b{font-size:1.5rem}
  .cn-baris__h b{font-size:.92rem}
  .cn-harga__p{font-size:1.85rem}
}

/* Ponsel kecil. Ikon pada baris harga dibuang — pada lebar ini ruangnya
   lebih berguna untuk nama layanan daripada untuk hiasan. */
@media (max-width:359.98px){
  .cn-sec{padding:2.75rem 0}
  .cn-hero h1{font-size:1.78rem}
  .cn-kartu-apung{padding:1.15rem}
  .cn-baris__ico{display:none}
  .cn-baris{gap:.55rem}
  .btn-cn,.btn-cn-putih,.btn-cn-garis{padding:.75rem 1.1rem; font-size:.92rem}
}

/* Keadaan "tidak diketahui" untuk halaman status.

   Ini bukan pemanis: halaman status memakainya sebagai keadaan BAWAAN.
   Hijau hanya boleh muncul setelah data segar benar-benar terbaca, sehingga
   JavaScript yang gagal, JSON yang basi, atau cron yang mati semuanya
   berakhir abu-abu — bukan hijau palsu yang menyesatkan tepat saat
   pelanggan paling butuh jawaban jujur. */
.cn-status-band--nihil{background:rgba(86,107,105,.08); border:1px solid rgba(86,107,105,.22)}
.cn-titik--nihil{background:var(--cn-mut); box-shadow:0 0 0 4px rgba(86,107,105,.16)}

/* ------------------------------------------------------------ footer ponsel

   Footer sebelumnya tidak punya SATU PUN aturan untuk layar sempit, dan itu
   terlihat. Tiga hal yang diperbaiki:

   1. `max-width:38ch` pada paragraf merek. Di layar 390px, 38ch kira-kira
      304px — LEBIH SEMPIT daripada ruang yang tersedia. Akibatnya paragraf
      dipaksa memanjang menjadi enam baris dengan sisa kosong menganga di
      kanannya. Pembatas itu berguna untuk kolom desktop yang lebar, dan
      justru merugikan begitu layarnya sudah sempit dengan sendirinya.

   2. Padding atas 4,5rem (72px) — hampir seperlima tinggi layar ponsel
      terpakai untuk ruang kosong sebelum ada satu pun kata.

   3. Tautan dengan padding .28rem menghasilkan sasaran sentuh sekitar 28px,
      di bawah anjuran 44px. Di footer ini seluruh isinya tautan.
   -------------------------------------------------------------------------- */
@media (max-width:575.98px){
  .cn-ftr{padding:3rem 0 1.5rem; font-size:.9rem}
  .cn-ftr p{max-width:none}
  .cn-ftr__brand{font-size:1.05rem; margin-bottom:.9rem}
  .cn-ftr h4{font-size:.74rem; margin-bottom:.7rem; letter-spacing:.12em}
  .cn-ftr a{padding:.45rem 0}
  .cn-ftr__bawah{margin-top:2rem; padding-top:1.25rem; gap:.35rem; font-size:.8rem}
}

/* Ponsel kecil: dua kolom tautan berdesakan, jadi ditumpuk saja. */
@media (max-width:359.98px){
  .cn-ftr .col-6{flex:0 0 100%; max-width:100%}
  .cn-ftr{padding:2.5rem 0 1.25rem}
}

/* ==========================================================================
   GALERI TAMPILAN — carousel layar portal di bagian "Solusinya"
   --------------------------------------------------------------------------
   Menggantikan kartu daftar bernomor yang dulu berdiri di kolom itu. Daftar
   menyebutkan kemampuan; galeri ini menunjukkannya.

   Bingkainya jendela peramban palsu — tiga titik dan bilah alamat. Itu
   memberi tahu dalam sekejap bahwa yang dilihat aplikasi web, bukan
   ilustrasi pemasaran. Bingkainya GELAP di atas bagian putih supaya
   tangkapan layar yang berlatar terang tidak menyatu dengan halaman dan
   berhenti terbaca sebagai "layar".
   ========================================================================== */
.cn-layar{background:#0b2a28;border:1px solid rgba(255,255,255,.10);border-radius:14px;
  overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.38)}
.cn-layar__bar{display:flex;align-items:center;gap:.45rem;padding:.6rem .8rem;
  background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08)}
.cn-layar__titik{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22);flex:0 0 auto}
.cn-layar__url{margin-left:.5rem;flex:1;background:rgba(0,0,0,.28);border-radius:7px;
  padding:.2rem .7rem;font-size:.72rem;color:#9ec8c3;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-layar img{display:block;width:100%;height:auto}

/* Tinggi keterangan dikunci. Kalimat tiap slide berbeda panjang, dan tanpa
   tinggi tetap seluruh bagian ikut naik-turun tiap kali slide berganti —
   termasuk teks di kolom sebelahnya. */
.cn-galeri__ket{min-height:5.25rem;padding-top:1.1rem;text-align:center}
.cn-galeri__ket h3{font-size:1.05rem;font-weight:700;color:var(--cn-tinta);margin:0 0 .3rem}
.cn-galeri__ket p{color:var(--cn-mut);font-size:.88rem;line-height:1.5;margin:0}

/* Tombol dibiarkan MENUMPANG di atas gambar, tidak digeser keluar seperti
   versi lebar penuh: di sebelah kiri ada kolom teks, dan tombol yang keluar
   bingkai akan mendarat di atas paragrafnya. */
.cn-galeri .carousel-control-prev,.cn-galeri .carousel-control-next{width:auto;opacity:1;padding:0 .5rem;align-items:flex-start;padding-top:22%}
.cn-galeri .carousel-control-prev-icon,.cn-galeri .carousel-control-next-icon{
  width:2.3rem;height:2.3rem;background-color:rgba(8,26,25,.62);border-radius:50%;
  background-size:1rem;border:1px solid rgba(255,255,255,.18)}
.cn-galeri .carousel-control-prev-icon:hover,.cn-galeri .carousel-control-next-icon:hover{
  background-color:rgba(8,26,25,.85)}
.cn-galeri .carousel-indicators{position:static;margin:.25rem 0 0}
.cn-galeri .carousel-indicators [data-bs-target]{width:8px;height:8px;border-radius:50%;
  border:0;background-color:rgba(15,35,33,.20);opacity:1;margin:0 5px}
.cn-galeri .carousel-indicators .active{background-color:var(--cn-biru)}

.cn-galeri__catatan{color:var(--cn-mut);font-size:.76rem;text-align:center;margin:1rem 0 0;opacity:.85}

/* GIF di hero — keterangan dan baris harga di bawahnya. Warnanya terang karena
   latar hero teal pekat, bukan putih seperti bagian Solusinya. */
.cn-hero__ket{color:#fff;font-size:.88rem;margin:.9rem 0 .35rem;text-align:center;line-height:1.45}
.cn-hero__ket span{display:block;color:rgba(255,255,255,.62);font-size:.72rem;margin-top:.15rem}
.cn-hero__harga{color:rgba(255,255,255,.86);font-size:.84rem;text-align:center;margin:0}
.cn-hero__harga b{color:#fff}
.cn-hero__harga a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cn-hero__harga a:hover{color:var(--cn-biru-t)}

/* --- layar sedang (tablet & ponsel besar) --------------------------------
   Kolomnya melebar menjadi selebar layar, jadi keterangan yang tadinya satu
   baris kini kerap menjadi dua atau tiga. Tinggi minimumnya dinaikkan supaya
   pergantian slide tidak menggeser isi halaman di bawahnya. */
@media (max-width:991.98px){
  .cn-galeri__ket{min-height:6.5rem}
  .cn-galeri .carousel-control-prev,.cn-galeri .carousel-control-next{padding-top:20%}
}

@media (max-width:575.98px){
  /* Alamat pada bilah jendela tidak muat dan terpotong di tengah kata;
     tiga titiknya sudah cukup menandakan "ini jendela peramban". */
  .cn-layar__url{display:none}
  .cn-layar__bar{padding:.45rem .6rem}
  .cn-layar{border-radius:11px}
  .cn-galeri__ket{min-height:7.5rem;padding-top:.9rem}
  .cn-galeri__ket h3{font-size:1rem}
  .cn-galeri__ket p{font-size:.85rem}
  .cn-galeri__catatan{font-size:.72rem}
  /* Tombol samping memakan lebar gambar di layar sempit; indikator titik
     dan geser jari sudah cukup untuk berpindah. */
  .cn-galeri .carousel-control-prev,.cn-galeri .carousel-control-next{display:none}
  .cn-hero__ket{font-size:.84rem;margin-top:.75rem}
  .cn-hero__harga{font-size:.8rem}
}

/* Jaring pengaman: bingkai dan isinya tidak boleh pernah melebihi kolomnya.
   Satu gambar yang meluber membuat SELURUH halaman dapat digeser ke samping,
   dan di ponsel itu terasa seperti situs yang rusak. */
.cn-layar,.cn-layar img{max-width:100%}
.cn-galeri .carousel-inner{overflow:hidden}