/*
 * Halaman Infrastruktur Digital. Dimuat sesudah beranda.css dan pilar.css (hero, pengalih,
 * kartu, tempat foto, penutup). Berkas ini menambah ilustrasi, empat lapisan, pita milik sendiri,
 * jasa digital, pelanggan, dan jalur titik awal. Elemen interaktif disorot biru.
 */

/* HERO: ilustrasi isometrik di kanan */
.pkn-infra-isi .infra-iso{width:100%;height:auto;max-height:72vh;justify-self:end}
.pkn-infra-isi .pilar-pengalih a i{background:var(--primer)}

/* Tautan teks interaktif bergaya navigasi: bingkai biru menyala saat disorot */
.pkn-infra-isi .infra-tautan,.pkn-infra-isi .infra-paket a,.pkn-infra-isi .infra-akses a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid rgba(77,168,255,.35);font:600 .82rem/1.2 var(--f-judul);text-decoration:none;transition:color .2s,background .2s,border-color .2s,box-shadow .2s;white-space:nowrap}
.pkn-infra-isi .infra-tautan:hover,.pkn-infra-isi .infra-paket a:hover,.pkn-infra-isi .infra-akses a:hover{background:rgba(18,141,247,.18);border-color:rgba(77,168,255,.75);box-shadow:0 0 0 1px rgba(18,141,247,.35),0 0 18px rgba(18,141,247,.55)}
.pkn-infra-isi .infra-tautan:focus-visible,.pkn-infra-isi .infra-paket a:focus-visible,.pkn-infra-isi .infra-akses a:focus-visible{outline:3px solid #4DA8FF;outline-offset:2px}
.pkn-infra-isi .infra-catatan{margin-top:18px;font:400 .78rem/1.5 var(--f-data);color:var(--t-redup)}
.pkn-infra-isi .terang .infra-catatan{color:var(--n4)}

/* EMPAT LAPISAN */
.pkn-infra-isi .infra-lapisan{background:linear-gradient(180deg,var(--malam) 0%,var(--malam-0) 100%)}
.pkn-infra-isi .infra-lapis{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pkn-infra-isi .infra-lapis li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:18px;align-items:center;padding:clamp(14px,2.2vh,22px) 22px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(17,40,74,.6)}
.pkn-infra-isi .infra-lapis-no{font:500 .95rem var(--f-data);color:var(--padi)}
.pkn-infra-isi .infra-lapis-teks{display:grid;gap:4px}
.pkn-infra-isi .infra-lapis h3{font-size:1.2rem;color:#fff}
.pkn-infra-isi .infra-lapis h3 a{text-decoration:none;color:inherit;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s}
.pkn-infra-isi .infra-lapis h3 a:hover{background-size:100% 1.5px}
.pkn-infra-isi .infra-lapis p{color:var(--t-terang);font-size:.95rem}
.pkn-infra-isi .infra-lapis small{font:500 .74rem/1.4 var(--f-data);color:var(--t-redup)}
.pkn-infra-isi .infra-lapis-harga{display:grid;justify-items:end;gap:8px;text-align:right}
.pkn-infra-isi .infra-lapis-harga b{font:500 .9rem var(--f-data);color:var(--padi);white-space:nowrap}
.pkn-infra-isi .infra-lapis .infra-tautan{color:var(--t-terang)}

/* MILIK SENDIRI */
.pkn-infra-isi .infra-milik{background:var(--n1)}
.pkn-infra-isi .infra-dua{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.pkn-infra-isi .infra-dua .lead p{margin:0}
.pkn-infra-isi .infra-butir{display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.pkn-infra-isi .infra-butir li{display:grid;gap:2px;padding:14px 18px;border-radius:16px;background:var(--n0);border:1px solid var(--n2);border-left:4px solid var(--primer)}
.pkn-infra-isi .infra-butir b{font:700 1rem var(--f-judul)}
.pkn-infra-isi .infra-butir span{color:var(--n4);font-size:.92rem}

/* LAPISAN PENJAGA */
.pkn-infra-isi .infra-penjaga{background:var(--malam-0)}
.pkn-infra-isi .infra-penjaga .lead p{margin:0}

/* JASA DIGITAL: delapan kartu, empat kolom di layar lebar */
.pkn-infra-isi .infra-jasa .kartu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.pkn-infra-isi .infra-jasa .kepala .lead p{margin:0}
.pkn-infra-isi .infra-jasa .lihat{margin-left:0}
.pkn-infra-isi .infra-paket{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(16px,3vh,28px)}
.pkn-infra-isi .infra-paket span{font:500 .72rem/1.3 var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--n4);margin-right:6px}
.pkn-infra-isi .infra-paket a{color:var(--tinta);border-color:var(--n2);background:var(--n0)}
.pkn-infra-isi .infra-paket a:hover{color:var(--tinta)}

/* PELANGGAN */
.pkn-infra-isi .infra-bukti{background:var(--malam)}
.pkn-infra-isi .infra-nama{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px;padding:0;list-style:none}
.pkn-infra-isi .infra-nama li{display:grid;padding:10px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.12)}
.pkn-infra-isi .infra-nama b{color:#fff;font:700 .95rem var(--f-judul)}
.pkn-infra-isi .infra-nama small{color:var(--t-redup);font:500 .7rem var(--f-data)}
.pkn-infra-isi .infra-testimoni{margin:0}
.pkn-infra-isi .infra-testimoni blockquote{margin:0;padding:0;border:0;font:600 1.2rem/1.45 var(--f-judul);color:#fff}
.pkn-infra-isi .infra-testimoni figcaption{display:grid;gap:2px;margin-top:auto;padding-left:12px;border-left:3px solid var(--primer)}
.pkn-infra-isi .infra-testimoni figcaption b{color:var(--t-terang);font:700 .95rem var(--f-judul)}
.pkn-infra-isi .infra-testimoni figcaption span{color:var(--t-redup);font-size:.85rem}

/* PILIH TITIK AWAL */
.pkn-infra-isi .infra-titik{background:var(--n1)}
.pkn-infra-isi .infra-titik-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pkn-infra-isi .infra-jalur{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3.4vh,32px);border-radius:24px;background:var(--n0);border:1px solid var(--n2);transition:transform .3s,box-shadow .3s}
.pkn-infra-isi .infra-jalur:hover,.pkn-infra-isi .infra-jalur:focus-within{transform:translateY(-4px);box-shadow:0 28px 48px -28px rgba(18,141,247,.6)}
.pkn-infra-isi .infra-jalur h3{font-size:1.35rem}
.pkn-infra-isi .infra-jalur p{color:var(--n4)}
.pkn-infra-isi .infra-harga{font:500 .85rem/1.5 var(--f-data);color:var(--primer)}
.pkn-infra-isi .infra-jalur .aksi{margin-top:auto;padding-top:6px}
.pkn-infra-isi .infra-jalur .btn{padding:13px 20px;font-size:.88rem}

/* AJAKAN: akses pelanggan */
.pkn-infra-isi .infra-akses{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:6px}
.pkn-infra-isi .infra-akses span{width:100%;font:500 .72rem/1.3 var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--t-redup)}
.pkn-infra-isi .infra-akses a{color:var(--t-terang);text-shadow:none}

@media (max-width:1100px){
  .pkn-infra-isi .infra-jasa .kartu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .pkn-infra-isi .infra-jasa .kartu-grid{grid-template-columns:none}
}
@media (min-width:600px) and (max-width:860px){
  .pkn-infra-isi .infra-jasa .kartu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .pkn-infra-isi .infra-iso{justify-self:stretch;max-height:none}
  .pkn-infra-isi .infra-lapis li{grid-template-columns:40px minmax(0,1fr)}
  .pkn-infra-isi .infra-lapis-harga{grid-column:2;justify-items:start;text-align:left}
  .pkn-infra-isi .infra-dua,.pkn-infra-isi .infra-titik-grid{grid-template-columns:1fr}
}