/* ==========================================================================
   PT Sahil Media Digital - Lembar Gaya
   Tema: gelap sebagai bawaan, terang sebagai pilihan.
   ========================================================================== */

:root {
    /* Bentuk dan jarak */
    --wadah: 1180px;
    --radius-kecil: 6px;
    --radius: 10px;
    --radius-besar: 14px;
    --jarak-bagian: 96px;
    --jarak-bagian-kecil: 56px;

    /* Huruf */
    --huruf: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --huruf-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Peralihan */
    --alih: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tema gelap (bawaan) - Nuansa Emerald & Tinted Slate */
html[data-tema='gelap'] {
    --latar: #070b09;
    --latar-naik: #0d1511;
    --latar-kartu: #121c16;
    --latar-kartu-hover: #17241d;
    --garis: rgba(255, 255, 255, 0.08);
    --garis-kuat: rgba(255, 255, 255, 0.14);
    --garis-aksen: rgba(16, 185, 129, 0.25);
    --teks: #f3fbf7;
    --teks-lembut: #9db2a5;
    --teks-halus: #63776b;
    --aksen: #10b981;
    --aksen-hover: #34d399;
    --aksen-gelap: #059669;
    --aksen-lembut: rgba(16, 185, 129, 0.12);
    --aksen-garis: rgba(16, 185, 129, 0.32);
    --hijau: #10b981;
    --hijau-lembut: rgba(16, 185, 129, 0.14);
    --kuning: #f59e0b;
    --bayang: 0 1px 3px rgba(0, 0, 0, 0.5);
    --bayang-besar: 0 20px 48px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(16, 185, 129, 0.12);
    --tombol-putih-latar: #f3fbf7;
    --tombol-putih-teks: #070b09;
}

/* Tema terang - Emerald Presisi */
html[data-tema='terang'] {
    --latar: #f8faf9;
    --latar-naik: #f0f5f2;
    --latar-kartu: #ffffff;
    --latar-kartu-hover: #f4f8f5;
    --garis: rgba(6, 78, 59, 0.09);
    --garis-kuat: rgba(6, 78, 59, 0.18);
    --garis-aksen: rgba(5, 150, 105, 0.24);
    --teks: #062817;
    --teks-lembut: #354e41;
    --teks-halus: #627c6e;
    --aksen: #059669;
    --aksen-hover: #047857;
    --aksen-gelap: #064e3b;
    --aksen-lembut: rgba(5, 150, 105, 0.1);
    --aksen-garis: rgba(5, 150, 105, 0.28);
    --hijau: #059669;
    --hijau-lembut: rgba(5, 150, 105, 0.12);
    --kuning: #d97706;
    --bayang: 0 1px 3px rgba(6, 40, 23, 0.06);
    --bayang-besar: 0 18px 42px -10px rgba(6, 40, 23, 0.12), 0 0 0 1px rgba(5, 150, 105, 0.1);
    --tombol-putih-latar: #062817;
    --tombol-putih-teks: #ffffff;
}

/* ---------------------------------------------------------------- Dasar ---- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--huruf);
    font-size: 16px;
    line-height: 1.6;
    color: var(--teks);
    background: var(--latar);
    -webkit-font-smoothing: antialiased;
    transition: background var(--alih), color var(--alih);
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.18;
    text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); letter-spacing: -0.028em; }
h3 { font-size: 1.075rem; letter-spacing: -0.015em; }

p { margin: 0 0 1rem; color: var(--teks-lembut); }
p:last-child { margin-bottom: 0; }

a { color: var(--aksen); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--aksen); color: #fff; }

:focus-visible {
    outline: 2px solid var(--aksen);
    outline-offset: 3px;
    border-radius: 3px;
}

.halus { color: var(--teks-halus); font-size: 0.875rem; }
.pusat-teks { text-align: center; }
.hanya-pembaca-layar {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lewati-ke-konten {
    position: absolute; top: -60px; left: 16px; z-index: 200;
    background: var(--aksen); color: #fff;
    padding: 10px 18px; border-radius: var(--radius-kecil);
    transition: top var(--alih);
}
.lewati-ke-konten:focus { top: 12px; text-decoration: none; }

/* ---------------------------------------------------------------- Wadah ---- */

.wadah {
    width: 100%;
    max-width: var(--wadah);
    margin-inline: auto;
    padding-inline: 22px;
}

.wadah-sempit { max-width: 820px; }

/* -------------------------------------------------------- Bilah Atas ------ */

.bilah-atas {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--latar) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--garis);
}

.bilah-atas-isi {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 66px;
}

.merek {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--teks);
    text-decoration: none;
    flex-shrink: 0;
}
.merek:hover { text-decoration: none; }

.merek-lambang { color: var(--aksen); display: flex; }

.merek-teks { display: flex; flex-direction: column; line-height: 1.05; }
.merek-teks strong { font-size: 0.95rem; font-weight: 650; letter-spacing: -0.02em; }
.merek-teks small {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--teks-halus);
}

.navigasi {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
}

.navigasi a {
    color: var(--teks-lembut);
    font-size: 0.885rem;
    font-weight: 450;
    padding: 8px 12px;
    border-radius: var(--radius-kecil);
    transition: color var(--alih), background var(--alih);
}
.navigasi a:hover { color: var(--teks); background: var(--latar-naik); text-decoration: none; }
.navigasi a.aktif { color: var(--teks); font-weight: 550; background: var(--aksen-lembut); }

.bilah-aksi { display: flex; align-items: center; gap: 10px; }

.tombol-tema {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--garis-kuat);
    border-radius: var(--radius-kecil);
    background: transparent;
    color: var(--teks-lembut);
    cursor: pointer;
    transition: color var(--alih), border-color var(--alih);
}
.tombol-tema:hover { color: var(--teks); border-color: var(--teks-halus); }
.tombol-tema .ikon-matahari { display: none; }
html[data-tema='terang'] .tombol-tema .ikon-matahari { display: block; }
html[data-tema='terang'] .tombol-tema .ikon-bulan { display: none; }

.tombol-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px; height: 34px;
    padding: 0 8px;
    border: 1px solid var(--garis-kuat);
    border-radius: var(--radius-kecil);
    background: transparent;
    cursor: pointer;
}
.tombol-menu span {
    display: block; height: 1.6px; width: 100%;
    background: var(--teks-lembut);
    border-radius: 2px;
    transition: transform var(--alih), opacity var(--alih);
}
.tombol-menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.tombol-menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.tombol-menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* -------------------------------------------------------------- Tombol ---- */

.tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    min-height: 44px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--radius-kecil);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--alih), border-color var(--alih), color var(--alih), transform var(--alih), box-shadow var(--alih);
}
.tombol:hover { text-decoration: none; }
.tombol:active { transform: translateY(1px); }

.tombol-utama {
    background: var(--aksen);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
html[data-tema='gelap'] .tombol-utama {
    background: #10b981;
    color: #042617;
    font-weight: 700;
}
html[data-tema='gelap'] .tombol-utama:hover {
    background: #34d399;
    color: #021a0f;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}
html[data-tema='terang'] .tombol-utama {
    background: #059669;
    color: #ffffff;
    font-weight: 650;
}
html[data-tema='terang'] .tombol-utama:hover {
    background: #047857;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
}

.tombol-garis {
    background: transparent;
    color: var(--teks);
    border-color: var(--garis-kuat);
}
.tombol-garis:hover {
    border-color: var(--aksen);
    color: var(--aksen);
    background: var(--aksen-lembut);
}

.tombol-putih { background: var(--tombol-putih-latar); color: var(--tombol-putih-teks); }
.tombol-putih:hover { opacity: 0.88; }

.tombol-hijau { background: var(--hijau); color: #fff; }
.tombol-hijau:hover { opacity: 0.88; }

.tombol-kecil { padding: 8px 16px; min-height: 38px; font-size: 0.865rem; }
.tombol-penuh { width: 100%; }

/* ------------------------------------------------------- Kepala Halaman --- */

.kepala-halaman {
    padding: 64px 0 20px;
    border-bottom: 1px solid var(--garis);
    background:
        linear-gradient(180deg, var(--latar-naik) 0%, var(--latar) 100%);
    position: relative;
}
.kepala-halaman h1 { margin-top: 14px; font-weight: 750; }
.kepala-halaman .kepala-ringkas { max-width: 74ch; margin-top: 14px; font-size: 1.08rem; }

.remah {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-family: var(--huruf-mono);
    color: var(--teks-halus);
}
.remah a { color: var(--teks-halus); }
.remah a:hover { color: var(--aksen); }
.remah span[aria-hidden] { opacity: 0.5; }

/* ------------------------------------------------ Bagian dan Kepala ------ */

.bagian { padding: var(--jarak-bagian) 0; }
.bagian-atas-rapat { padding-top: var(--jarak-bagian-kecil); }
.bagian-berlatar {
    background: var(--latar-naik);
    border-block: 1px solid var(--garis);
}

.kepala-bagian { max-width: 70ch; margin-bottom: 40px; }
.kepala-bagian h2 { margin-bottom: 12px; font-weight: 700; }
.kepala-ringkas { font-size: 1.02rem; color: var(--teks-lembut); }

.label-bagian {
    display: inline-block;
    font-family: var(--huruf-mono);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--aksen);
    margin-bottom: 12px;
}

/* -------------------------------------------------------------- Pahlawan -- */

.pahlawan {
    padding: 88px 0 96px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 60% at 85% 15%, var(--aksen-lembut), transparent 75%),
        radial-gradient(ellipse 40% 30% at 10% 90%, rgba(16, 185, 129, 0.05), transparent 70%),
        var(--latar);
}
.pahlawan-pendek { padding: 90px 0 100px; }
.pahlawan-pendek .kode-galat {
    font-family: var(--huruf-mono);
    font-size: clamp(3.4rem, 2rem + 6vw, 5.6rem);
    font-weight: 700;
    color: var(--aksen);
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -0.05em;
}

.pahlawan-isi {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: center;
}

.pahlawan h1 {
    margin-bottom: 20px;
    font-weight: 800;
    letter-spacing: -0.038em;
}

.pahlawan-ringkas {
    font-size: 1.085rem;
    line-height: 1.7;
    max-width: 56ch;
    margin-bottom: 30px;
}

.pahlawan-tombol { display: flex; flex-wrap: wrap; gap: 12px; }
.pahlawan-tombol.pusat { justify-content: center; }

.lencana {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 11px;
    border: 1px solid var(--aksen-garis);
    border-radius: 999px;
    background: var(--aksen-lembut);
    font-size: 0.8rem;
    font-weight: 550;
    color: var(--teks);
    margin-bottom: 26px;
}

.titik-hidup {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hijau);
    box-shadow: 0 0 0 3px var(--hijau-lembut);
    animation: denyut 2.4s ease-in-out infinite;
}
@keyframes denyut {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.9); }
}

.pahlawan-kurung {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--garis);
}
.pahlawan-kurung li { display: flex; flex-direction: column; gap: 4px; }
.pahlawan-kurung strong {
    font-family: var(--huruf-mono);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--teks);
}
.pahlawan-kurung span { font-size: 0.785rem; color: var(--teks-halus); line-height: 1.35; }

/* Tiruan antarmuka pada bagian pahlawan */
.kartu-tiruan {
    border: 1px solid var(--garis-kuat);
    border-radius: var(--radius-besar);
    background: var(--latar-kartu);
    box-shadow: var(--bayang-besar);
    overflow: hidden;
}
/* Konsol Arsitektur & Rekayasa Sistem (Pengganti mockup palsu) */
.konsol-arsitektur {
    border: 1px solid var(--garis-kuat);
    border-radius: var(--radius-besar);
    background: var(--latar-kartu);
    box-shadow: var(--bayang-besar);
    overflow: hidden;
}
.konsol-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--garis);
    background: var(--latar-naik);
}
.konsol-status-kiri {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--huruf-mono);
    font-size: 0.76rem;
    color: var(--teks);
}
.konsol-status-kiri .titik-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aksen);
    box-shadow: 0 0 8px var(--aksen);
}
.konsol-badge-env {
    font-family: var(--huruf-mono);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-kecil);
    background: var(--aksen-lembut);
    color: var(--aksen);
    border: 1px solid var(--aksen-garis);
}

.konsol-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.telemetri-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.telemetri-item {
    padding: 14px;
    background: var(--latar);
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.telemetri-item .label-mini {
    font-family: var(--huruf-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teks-halus);
}
.telemetri-item .angka-besar {
    font-family: var(--huruf-mono);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--teks);
}
.telemetri-item .keterangan-mini {
    font-size: 0.72rem;
    color: var(--teks-halus);
}
.telemetri-item .keterangan-mini strong {
    color: var(--aksen);
    font-weight: 600;
}

.tabel-arsitektur {
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    background: var(--latar);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.baris-arsitektur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-family: var(--huruf-mono);
    padding: 6px 0;
    border-bottom: 1px dashed var(--garis);
}
.baris-arsitektur:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.baris-arsitektur .layanan-nama {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--teks);
    font-weight: 500;
}
.baris-arsitektur .layanan-nilai {
    color: var(--aksen);
    font-weight: 600;
}

/* Dukungan fallback untuk komponen detail studi kasus */
.kartu-tiruan {
    border: 1px solid var(--garis-kuat);
    border-radius: var(--radius-besar);
    background: var(--latar-kartu);
    box-shadow: var(--bayang-besar);
    overflow: hidden;
}
.kartu-tiruan-atas, .tiruan-atas-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--garis);
    background: var(--latar-naik);
}
.tiruan-titik {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--garis-kuat);
}
.tiruan-alamat {
    margin-inline-start: 10px;
    font-family: var(--huruf-mono);
    font-size: 0.72rem;
    color: var(--teks-halus);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kartu-tiruan-isi { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.tiruan-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--latar-naik);
    overflow: hidden;
}
.tiruan-bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--aksen), #059669);
    border-radius: 999px;
}

.tiruan-baris { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tiruan-kotak {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    background: var(--latar);
}
.tiruan-kotak small { font-size: 0.7rem; color: var(--teks-halus); }
.tiruan-kotak strong { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }
.tiruan-kotak strong.kecil { font-family: var(--huruf-mono); font-size: 0.84rem; font-weight: 600; }
.tiruan-kotak em { font-size: 0.68rem; font-style: normal; color: var(--teks-halus); }

/* ------------------------------------------------ Kisi, Kartu, Layanan --- */

.kisi-bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.kartu {
    padding: 28px;
    border: 1px solid var(--garis);
    border-radius: var(--radius-besar);
    background: var(--latar-kartu);
    transition: border-color var(--alih), background var(--alih), transform var(--alih), box-shadow var(--alih);
}
.kartu:hover {
    border-color: var(--garis-aksen);
    background: var(--latar-kartu-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.35);
}
.kartu h3 { margin-bottom: 10px; font-weight: 650; }
.kartu p { font-size: 0.93rem; }

.kartu-ikon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--radius);
    background: var(--aksen-lembut);
    color: var(--aksen);
    border: 1px solid var(--aksen-garis);
    margin-bottom: 20px;
}

.daftar-poin { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.daftar-poin li {
    position: relative;
    padding-inline-start: 20px;
    font-size: 0.885rem;
    color: var(--teks-lembut);
    line-height: 1.55;
}
.daftar-poin li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.62em;
    width: 6px; height: 6px;
    border-radius: 2px;
    background: var(--aksen);
    opacity: 0.75;
}
.daftar-poin.dua-kolom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }

.kisi-tiga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kartu-ringkas { padding: 24px; }

.pusat-tombol { display: flex; justify-content: center; margin-top: 38px; }

/* ------------------------------------------------------------ Portofolio -- */

.penyaring {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.tombol-saring {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    min-height: 38px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--teks-lembut);
    background: transparent;
    border: 1px solid var(--garis-kuat);
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--alih);
}
.tombol-saring:hover {
    color: var(--aksen);
    border-color: var(--aksen);
    background: var(--aksen-lembut);
}
.tombol-saring.aktif {
    background: var(--aksen);
    border-color: var(--aksen);
    color: #ffffff;
}
html[data-tema='gelap'] .tombol-saring.aktif {
    background: #10b981;
    color: #042617;
    font-weight: 700;
}
.jumlah {
    font-family: var(--huruf-mono);
    font-size: 0.72rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 18%, transparent);
}

.kisi-proyek {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.kartu-proyek {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    border: 1px solid var(--garis);
}
.kartu-proyek:hover {
    border-color: var(--garis-aksen);
    transform: translateY(-3px);
}
.kartu-proyek h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.kartu-proyek p { flex-grow: 0; font-size: 0.92rem; }

.proyek-atas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}
.proyek-atas .halus { font-family: var(--huruf-mono); font-size: 0.75rem; }

.lencana-kategori {
    display: inline-block;
    padding: 3px 10px;
    font-family: var(--huruf-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--aksen);
    background: var(--aksen-lembut);
    border: 1px solid var(--aksen-garis);
    border-radius: 999px;
}

.daftar-teknologi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.daftar-teknologi li {
    font-family: var(--huruf-mono);
    font-size: 0.72rem;
    padding: 3px 9px;
    color: var(--teks-lembut);
    background: var(--latar-naik);
    border: 1px solid var(--garis);
    border-radius: var(--radius-kecil);
}

.tautan-panah {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 0.885rem;
    font-weight: 600;
    color: var(--aksen);
}
.tautan-panah span { transition: transform var(--alih); }
.tautan-panah:hover span { transform: translateX(4px); }

.meta-proyek { margin: 0; font-size: 0.83rem; }
.meta-proyek div { display: flex; gap: 8px; }
.meta-proyek dt { color: var(--teks-halus); }
.meta-proyek dt::after { content: ':'; }
.meta-proyek dd { margin: 0; color: var(--teks-lembut); }

.pesan-kosong {
    text-align: center;
    padding: 48px 0;
    color: var(--teks-halus);
}

/* ------------------------------------------------ Detail Studi Kasus ---- */

.rincian-proyek {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    margin: 0 0 34px;
    background: var(--garis);
    border: 1px solid var(--garis);
    border-radius: var(--radius-besar);
    overflow: hidden;
}
.rincian-proyek > div {
    padding: 17px 20px;
    background: var(--latar-kartu);
}
.rincian-proyek dt {
    font-family: var(--huruf-mono);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--teks-halus);
    margin-bottom: 6px;
}
.rincian-proyek dd { margin: 0; font-size: 0.95rem; color: var(--teks); font-weight: 600; }

.tampilan-proyek {
    border: 1px solid var(--garis-kuat);
    border-radius: var(--radius-besar);
    background: var(--latar-kartu);
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: var(--bayang);
}
.tampilan-isi { padding: 22px; display: flex; flex-direction: column; gap: 14px; }

/* Blok spesifikasi arsitektur riil untuk studi kasus */
.arsitektur-proyek-detail {
    border: 1px solid var(--garis-kuat);
    border-radius: var(--radius-besar);
    background: var(--latar-kartu);
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: var(--bayang);
}
.arsitektur-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: var(--latar-naik);
    border-bottom: 1px solid var(--garis);
}
.arsitektur-detail-header .alamat-domain {
    font-family: var(--huruf-mono);
    font-size: 0.8rem;
    color: var(--teks);
    display: flex;
    align-items: center;
    gap: 8px;
}
.arsitektur-detail-header .status-operasional {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--huruf-mono);
    font-size: 0.72rem;
    color: var(--aksen);
    background: var(--aksen-lembut);
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--aksen-garis);
}
.arsitektur-detail-body {
    padding: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.spek-kotak {
    padding: 14px;
    background: var(--latar);
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.spek-kotak dt {
    font-family: var(--huruf-mono);
    font-size: 0.68rem;
    color: var(--teks-halus);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.spek-kotak dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--teks);
}

.blok-teks { max-width: 74ch; }
.blok-teks h2 {
    font-size: 1.3rem;
    margin-top: 40px;
    margin-bottom: 14px;
    padding-top: 28px;
    border-top: 1px solid var(--garis);
    font-weight: 700;
}
.blok-teks h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.blok-teks p { font-size: 1.02rem; line-height: 1.75; }

.daftar-dampak { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.daftar-dampak li {
    position: relative;
    padding-inline-start: 32px;
    font-size: 0.96rem;
    color: var(--teks);
    line-height: 1.6;
}
.daftar-dampak li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.32em;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--aksen-lembut);
    border: 1.5px solid var(--aksen);
}

.kartu-ajakan-dalam {
    margin-top: 48px;
    padding: 34px;
    background: var(--latar-naik);
    border: 1px solid var(--garis-aksen);
    border-radius: var(--radius-besar);
    position: relative;
    overflow: hidden;
}
.kartu-ajakan-dalam::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--aksen);
}
.kartu-ajakan-dalam h3 { margin-bottom: 10px; font-size: 1.25rem; font-weight: 700; }
.kartu-ajakan-dalam p { margin-bottom: 22px; font-size: 0.95rem; }

/* ------------------------------------------------------------- Layanan ---- */

.daftar-layanan { display: flex; flex-direction: column; }

.layanan-baris {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 24px;
    padding: 36px 0;
    border-top: 1px solid var(--garis);
}
.layanan-baris:first-child { border-top: none; padding-top: 0; }

.layanan-nomor {
    font-family: var(--huruf-mono);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--aksen);
    padding-top: 5px;
}
.layanan-isi h2 { font-size: 1.28rem; margin-bottom: 12px; }
.layanan-isi > p { font-size: 1rem; line-height: 1.7; max-width: 76ch; }
.layanan-isi .daftar-poin { max-width: 76ch; }

/* ------------------------------------------------------------ Alur Kerja -- */

.garis-alur {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--garis);
    border: 1px solid var(--garis);
    border-radius: var(--radius-besar);
    overflow: hidden;
}
.tahap { padding: 26px 22px; background: var(--latar-kartu); }
.tahap-nomor {
    display: block;
    font-family: var(--huruf-mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--aksen);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--garis);
}
.tahap h3 { font-size: 1rem; margin-bottom: 9px; }
.tahap p { font-size: 0.875rem; line-height: 1.6; }

/* ---------------------------------------------------------------- Klien --- */

.kisi-klien {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.kisi-klien-penuh { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.kartu-klien {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 22px;
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    background: var(--latar-kartu);
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter var(--alih), opacity var(--alih), border-color var(--alih), transform var(--alih);
}
.kartu-klien:hover {
    filter: grayscale(0);
    opacity: 1;
    border-color: var(--aksen-garis);
    transform: translateY(-2px);
}
.kartu-klien-besar { padding: 26px; }

.klien-monogram {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    margin-bottom: 10px;
    border-radius: var(--radius-kecil);
    background: var(--aksen-lembut);
    color: var(--aksen);
    font-size: 1.05rem;
    font-weight: 650;
}
.kartu-klien strong { font-size: 0.9rem; font-weight: 550; line-height: 1.35; }
.kartu-klien small { font-size: 0.74rem; color: var(--teks-halus); }

.catatan-kotak {
    margin-top: 44px;
    padding: 34px;
    border: 1px solid var(--garis);
    border-radius: var(--radius-besar);
    background: var(--latar-kartu);
    max-width: 74ch;
}
.catatan-kotak h2 { font-size: 1.24rem; margin-bottom: 12px; }
.catatan-kotak p { margin-bottom: 22px; }

/* --------------------------------------------------------------- Kontak --- */

.kisi-kontak {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 34px;
    align-items: start;
}

.formulir {
    padding: 32px;
    border: 1px solid var(--garis);
    border-radius: var(--radius-besar);
    background: var(--latar-kartu);
}
.formulir h2 { font-size: 1.2rem; margin-bottom: 24px; }

.baris-formulir { margin-bottom: 20px; }
.baris-formulir.dua {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.baris-formulir label {
    display: block;
    font-size: 0.845rem;
    font-weight: 500;
    margin-bottom: 7px;
    color: var(--teks);
}
.wajib { color: var(--aksen); }

.baris-formulir input,
.baris-formulir select,
.baris-formulir textarea {
    width: 100%;
    padding: 11px 13px;
    min-height: 44px;
    font-family: inherit;
    font-size: 0.925rem;
    color: var(--teks);
    background: var(--latar);
    border: 1px solid var(--garis-kuat);
    border-radius: var(--radius-kecil);
    transition: border-color var(--alih), box-shadow var(--alih);
}
.baris-formulir textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.baris-formulir input:focus,
.baris-formulir select:focus,
.baris-formulir textarea:focus {
    outline: none;
    border-color: var(--aksen);
    box-shadow: 0 0 0 3px var(--aksen-lembut);
}
.baris-formulir input::placeholder,
.baris-formulir textarea::placeholder { color: var(--teks-halus); }

.catatan-kecil { font-size: 0.78rem; color: var(--teks-halus); margin-top: 14px; }

.informasi-kontak { padding: 28px; }
.informasi-kontak h2 { font-size: 1.08rem; margin-bottom: 20px; }

.daftar-kontak { display: flex; flex-direction: column; gap: 16px; }
.daftar-kontak div { display: flex; flex-direction: column; gap: 3px; }
.daftar-kontak dt {
    font-size: 0.71rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--teks-halus);
}
.daftar-kontak dd { margin: 0; font-size: 0.915rem; color: var(--teks-lembut); }

.perkiraan-cepat {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--garis);
}
.perkiraan-cepat h3 { font-size: 0.95rem; margin-bottom: 8px; }
.perkiraan-cepat .halus { margin-bottom: 16px; font-size: 0.82rem; }

.pilihan-cepat { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.pilihan-cepat button {
    padding: 7px 13px;
    min-height: 36px;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--teks-lembut);
    background: var(--latar-naik);
    border: 1px solid var(--garis-kuat);
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--alih);
}
.pilihan-cepat button:hover { border-color: var(--aksen); color: var(--aksen); }
.pilihan-cepat button.terpilih {
    background: var(--aksen);
    border-color: var(--aksen);
    color: #ffffff;
}
html[data-tema='gelap'] .pilihan-cepat button.terpilih {
    background: #10b981;
    color: #042617;
    font-weight: 700;
}

.pesan-sukses, .pesan-galat {
    padding: 15px 20px;
    margin-bottom: 26px;
    border-radius: var(--radius);
    font-size: 0.915rem;
    line-height: 1.5;
}
.pesan-sukses {
    background: var(--aksen-lembut);
    border: 1px solid var(--aksen-garis);
    color: var(--aksen);
    font-weight: 500;
}
.pesan-galat {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #ef4444;
}

/* --------------------------------------------------- Ajakan Akhir & Kaki -- */

.ajakan-akhir {
    padding: 74px 0;
    background: var(--latar-naik);
    border-top: 1px solid var(--garis);
}
.ajakan-isi {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.ajakan-isi h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem); margin-bottom: 12px; }
.ajakan-isi p { max-width: 60ch; }
.ajakan-tombol { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

.kaki { padding: 62px 0 30px; background: var(--latar); border-top: 1px solid var(--garis); }
.kaki-isi {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 38px;
    padding-bottom: 40px;
}
.kaki-merek .merek { margin-bottom: 16px; }
.kaki-merek p { font-size: 0.875rem; line-height: 1.65; max-width: 42ch; }

.kaki-kolom h3 {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--teks-halus);
    margin-bottom: 16px;
}
.kaki-kolom ul { display: flex; flex-direction: column; gap: 10px; }
.kaki-kolom li { font-size: 0.875rem; color: var(--teks-lembut); }
.kaki-kolom a { color: var(--teks-lembut); }
.kaki-kolom a:hover { color: var(--aksen); text-decoration: none; }

.kaki-bawah {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--garis);
}
.kaki-bawah p { margin: 0; font-size: 0.8rem; color: var(--teks-halus); }

/* ------------------------------------------------------------- Tanggap ---- */

@media (max-width: 1024px) {
    .pahlawan-isi { grid-template-columns: 1fr; gap: 44px; }
    .pahlawan-visual { max-width: 560px; }
    .garis-alur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kisi-kontak { grid-template-columns: 1fr; }
    .ajakan-isi { grid-template-columns: 1fr; }
    .ajakan-tombol { justify-content: flex-start; }
    .kaki-isi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    :root { --jarak-bagian: 68px; --jarak-bagian-kecil: 42px; }

    .tombol-menu { display: flex; }
    .bilah-aksi .tombol-kecil { display: none; }

    .navigasi {
        position: fixed;
        inset: 66px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 14px 22px 20px;
        background: var(--latar);
        border-bottom: 1px solid var(--garis);
        box-shadow: var(--bayang-besar);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--alih), transform var(--alih), visibility var(--alih);
    }
    .navigasi.terbuka { opacity: 1; visibility: visible; transform: translateY(0); }
    .navigasi a { padding: 12px 14px; font-size: 0.95rem; }

    .kisi-bento { grid-template-columns: 1fr; }
    .kisi-tiga { grid-template-columns: 1fr; }
    .pahlawan-kurung { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .layanan-baris { grid-template-columns: 1fr; gap: 12px; }
    .layanan-nomor { padding-top: 0; }
    .daftar-poin.dua-kolom { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .kisi-proyek { grid-template-columns: 1fr; }
    .garis-alur { grid-template-columns: 1fr; }
    .kaki-isi { grid-template-columns: 1fr; gap: 30px; }
    .baris-formulir.dua { grid-template-columns: 1fr; }
    .formulir { padding: 24px 20px; }
    .kartu { padding: 22px; }
    .pahlawan { padding: 56px 0 68px; }
    .rincian-proyek { grid-template-columns: 1fr; }
    .tiruan-baris { grid-template-columns: 1fr; }
    .kepala-halaman { padding: 40px 0 10px; }
}

/* ------------------------------------------------- Kurangi gerakan -------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------- Cetak ---- */

@media print {
    .bilah-atas, .ajakan-akhir, .tombol-menu, .tombol-tema, .penyaring { display: none; }
    body { background: #fff; color: #000; }
    .kartu, .tahap { border-color: #ccc; break-inside: avoid; }
}