/* ==========================================================================
   LSP Mitra Akuntansi Profesional
   Sistem desain: "buku besar & sertifikat"
   - Garis rapi, kolom angka rata, sertifikat bersegel.
   - Warna diambil dari logo: navy, biru langit, amber.
   ========================================================================== */

:root {
    /* --- Palet inti --- */
    --tinta:        #123A63;   /* biru tinta, dipakai untuk TEKS/aksen — bukan blok latar */
    --tinta-lembut: #1D4E82;
    --biru:         #1F6FB2;   /* biru kerja, tautan */
    --langit:       #4FC3E8;   /* biru langit dari logo */
    --langit-pucat: #EFF9FC;
    --amber:        #F5A623;   /* amber dari logo, dipakai sebagai aksen tipis */
    --amber-tua:    #B97708;
    --amber-pucat:  #FFF8EC;
    --kertas:       #FFFFFF;
    --kertas-dingin:#F7F9FB;   /* variasi putih kebiruan, dipakai gantikan blok warna pekat */
    --garis:        #E2E8EE;
    --garis-tipis:  #EFF3F7;
    --teks:         #3B4D61;
    --teks-redup:   #7488A1;

    /* Gradasi lembut & transparan — dipakai sebagai pengganti blok navy/amber pekat */
    --gradasi-lembut: linear-gradient(120deg, rgba(79,195,232,0.10), rgba(245,166,35,0.07));
    --gradasi-halus:  linear-gradient(120deg, rgba(79,195,232,0.06), rgba(245,166,35,0.05));

    /* --- Ukuran & ritme --- */
    --kolom:        1180px;
    --prosa:        66ch;
    --sudut:        4px;       /* sudut tajam: kesan dokumen, bukan kartu aplikasi */
    --sudut-lembut: 10px;
    --rusuk:        1px solid var(--garis);

    /* --- Alias lama (dipakai panel admin & halaman yang belum dirombak) --- */
    --biru-navy:        var(--tinta);
    --biru-navy-gelap:  #0D2C4D;
    --biru-langit:      var(--langit);
    --biru-langit-muda: var(--langit-pucat);
    --oranye:           var(--amber);
    --oranye-gelap:     var(--amber-tua);
    --abu-teks:         var(--teks);
    --abu-muda:         var(--kertas-dingin);
    --putih:            var(--kertas);
    --radius-kecil:     var(--sudut);
    --radius:           var(--sudut);
    --radius-besar:     var(--sudut-lembut);
    --bayangan:         0 1px 2px rgba(18, 58, 99, 0.05);
    --bayangan-kuat:    0 18px 40px -24px rgba(18, 58, 99, 0.28);
    --transisi:         160ms ease;
}

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

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

body {
    font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--teks);
    background: var(--kertas);
    font-variant-numeric: tabular-nums;
}

/* ===== Tipografi ===== */
h1, h2, h3, h4 {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    color: var(--tinta);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.012em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.15rem); }
h3 { font-size: 1.16rem; line-height: 1.3; }
h4 { font-size: 1rem; }

h5, h6 {
    font-family: 'Archivo', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tinta);
}

p { max-width: var(--prosa); }
ul, ol { list-style: none; }

a { color: var(--biru); text-decoration: none; transition: color var(--transisi); }
a:hover { color: var(--amber-tua); }

img { max-width: 100%; display: block; }

strong { font-weight: 600; color: var(--tinta); }

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

.container {
    width: 100%;
    max-width: var(--kolom);
    margin-inline: auto;
    padding-inline: 24px;
}

.prosa p + p { margin-top: 1em; }

/* Teks pengantar di bawah judul bagian */
.pengantar {
    font-size: 1.04rem;
    color: var(--teks-redup);
    max-width: 58ch;
}

/* ===== Tombol ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    font-family: 'Archivo', sans-serif;
    font-size: 0.93rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--sudut);
    cursor: pointer;
    transition: background var(--transisi), color var(--transisi), border-color var(--transisi);
}
.btn-primer {
    background: linear-gradient(135deg, #FFC15C, var(--amber));
    color: #4A2C00;
    border-color: transparent;
}
.btn-primer:hover { background: var(--amber-tua); color: #fff; }

.btn-tinta { background: linear-gradient(135deg, var(--tinta-lembut), var(--tinta)); color: #fff; border-color: transparent; }
.btn-tinta:hover { background: var(--biru); color: #fff; }

.btn-garis { background: transparent; color: var(--tinta); border-color: var(--garis); }
.btn-garis:hover { border-color: var(--biru); color: var(--biru); background: var(--langit-pucat); }

.btn-terang { background: var(--kertas); color: var(--biru); border-color: var(--garis); }
.btn-terang:hover { border-color: var(--biru); background: var(--langit-pucat); }

/* alias lama */
.btn-outline { background: var(--kertas); color: var(--biru); border-color: var(--garis); }
.btn-outline:hover { border-color: var(--biru); background: var(--langit-pucat); }
.btn-daftar { background: var(--tinta); color: #fff; border-color: var(--tinta); padding: 11px 20px; }
.btn-daftar:hover { background: var(--biru); color: #fff; }

/* ==========================================================================
   KEPALA SITUS
   ========================================================================== */
.bar-atas {
    background: var(--kertas-dingin);
    color: var(--teks-redup);
    font-size: 0.8rem;
    border-bottom: var(--rusuk);
}
.bar-atas-isi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-block: 9px;
    flex-wrap: wrap;
}
.bar-atas a { color: var(--biru); }
.bar-atas a:hover { color: var(--amber-tua); }
.bar-atas-kontak { display: flex; gap: 22px; flex-wrap: wrap; }

.navigasi {
    background: var(--kertas);
    border-bottom: var(--rusuk);
    position: sticky;
    top: 0;
    z-index: 100;
}
.navigasi-isi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 12px;
}
.merek { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.merek img { width: 46px; height: 46px; object-fit: contain; }
.merek-teks { display: flex; flex-direction: column; line-height: 1.25; }
.merek-nama {
    font-family: 'Source Serif 4', serif;
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--tinta);
}
.merek-sub { font-size: 0.72rem; color: var(--teks-redup); }

.menu { display: flex; align-items: center; gap: 26px; }
.menu-daftar { display: flex; align-items: center; gap: 4px; }
.menu-daftar > li { position: relative; }
.menu-daftar > li > a {
    display: block;
    padding: 9px 11px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--tinta);
    border-radius: var(--sudut);
}
.menu-daftar > li > a:hover { background: var(--kertas-dingin); color: var(--tinta); }
.menu-daftar > li > a.kini {
    color: var(--tinta);
    box-shadow: inset 0 -2px 0 var(--amber);
    border-radius: 0;
}

.submenu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 262px;
    background: var(--kertas);
    border: var(--rusuk);
    border-top: 2px solid var(--amber);
    border-radius: var(--sudut);
    box-shadow: var(--bayangan-kuat);
    padding: 6px;
}
.punya-submenu:hover .submenu,
.punya-submenu:focus-within .submenu { display: block; }
.submenu a {
    display: block;
    padding: 9px 12px;
    font-size: 0.88rem;
    color: var(--teks);
    border-radius: var(--sudut);
}
.submenu a:hover { background: var(--kertas-dingin); color: var(--tinta); }

.tombol-menu {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}
.tombol-menu span { width: 24px; height: 2px; background: var(--tinta); }

/* ==========================================================================
   BERANDA — hero asimetris dengan artefak sertifikat
   ========================================================================== */
.hero {
    background:
        radial-gradient(720px 420px at 8% -10%, rgba(79,195,232,0.14), transparent 60%),
        radial-gradient(640px 420px at 100% 110%, rgba(245,166,35,0.12), transparent 60%),
        var(--kertas);
    color: var(--teks);
    padding-block: clamp(56px, 8vw, 92px);
    position: relative;
    overflow: hidden;
    border-bottom: var(--rusuk);
}
/* garis-garis buku besar yang sangat samar */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 47px,
        rgba(18,58,99,0.028) 47px 48px
    );
    pointer-events: none;
}
.hero-isi {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
    gap: clamp(36px, 6vw, 72px);
    align-items: center;
}
.hero h1 { color: var(--tinta); max-width: 15ch; }
.hero-teks p {
    margin-top: 20px;
    font-size: 1.06rem;
    color: var(--teks-redup);
    max-width: 46ch;
}
.hero-aksi { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.hero-fakta {
    display: flex;
    gap: 34px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--garis);
    flex-wrap: wrap;
}
.hero-fakta dt { font-size: 0.78rem; color: var(--teks-redup); }
.hero-fakta dd {
    font-family: 'Source Serif 4', serif;
    font-size: 1.5rem;
    color: var(--tinta);
    line-height: 1.2;
    margin-top: 2px;
}

/* --- Artefak: kartu sertifikat --- */
.sertifikat {
    background: var(--kertas);
    color: var(--teks);
    border: 1px solid var(--garis);
    border-radius: 2px;
    padding: 26px 26px 22px;
    box-shadow: 0 30px 60px -30px rgba(18,58,99,0.35);
    position: relative;
    /* sudut kanan atas terpotong, seperti dokumen yang dicap */
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.sertifikat-kepala {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--tinta);
}
.sertifikat-kepala h2 {
    font-size: 1.02rem;
    line-height: 1.35;
    max-width: 22ch;
}
.sertifikat-kepala img { width: 38px; height: 38px; flex-shrink: 0; }

.sertifikat-baris {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 10px;
    padding-block: 11px;
    border-bottom: 1px solid var(--garis-tipis);
    font-size: 0.88rem;
}
.sertifikat-baris dt { color: var(--teks-redup); }
.sertifikat-baris dd { color: var(--tinta); font-weight: 500; }

.sertifikat-kaki {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}
.segel {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border: 2px solid var(--amber);
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 0.56rem;
    font-weight: 700;
    color: var(--amber-tua);
    line-height: 1.25;
    transform: rotate(-9deg);
}
.sertifikat-kaki p { font-size: 0.8rem; color: var(--teks-redup); margin: 0; }

/* ==========================================================================
   BAGIAN & JUDUL
   ========================================================================== */
.bagian { padding-block: clamp(52px, 7vw, 84px); }
.bagian-dingin { background: var(--kertas-dingin); }
.bagian-tinta {
    background: var(--gradasi-lembut), var(--kertas-dingin);
    color: var(--teks);
    border-block: var(--rusuk);
}
.bagian-tinta h2, .bagian-tinta h3 { color: var(--tinta); }

.judul-bagian { max-width: 62ch; margin-bottom: 38px; }
.judul-bagian p { margin-top: 12px; color: var(--teks-redup); }

/* Judul dengan garis pemisah di atas: penanda pergantian topik */
.judul-terpisah {
    border-top: 2px solid var(--tinta);
    padding-top: 20px;
}

/* Judul + aksi sejajar */
.judul-sejajar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}
.judul-sejajar .judul-bagian { margin-bottom: 0; }

/* alias lama */
.section { padding-block: clamp(52px, 7vw, 84px); }
.section-abu { background: var(--kertas-dingin); }
.section-judul { max-width: 62ch; margin-bottom: 38px; }
.section-judul p { margin-top: 12px; color: var(--teks-redup); }
.section-eyebrow { display: none; }

/* ==========================================================================
   BARIS BERGARIS — tulang punggung situs ini.
   Dipakai untuk daftar skema, unit kompetensi, misi, pengumuman.
   ========================================================================== */
.arsip { border-top: 2px solid var(--tinta); }
.arsip-baris {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    gap: 20px;
    align-items: baseline;
    padding-block: 22px;
    border-bottom: var(--rusuk);
}
.arsip-nomor {
    font-family: 'Source Serif 4', serif;
    font-size: 1.2rem;
    color: var(--amber-tua);
    font-variant-numeric: tabular-nums;
}
.arsip-judul { font-size: 1.1rem; }
.arsip-ket { margin-top: 6px; color: var(--teks-redup); font-size: 0.92rem; }
.arsip-sisi { font-size: 0.85rem; color: var(--teks-redup); white-space: nowrap; }

/* varian tanpa nomor */
.arsip-baris.tanpa-nomor { grid-template-columns: minmax(0, 1fr) auto; }

a.arsip-baris { color: inherit; }
a.arsip-baris:hover { background: var(--langit-pucat); color: inherit; }
a.arsip-baris:hover .arsip-judul { color: var(--biru); }

/* ==========================================================================
   KARTU — dipakai terbatas, hanya untuk isi yang benar-benar setara
   ========================================================================== */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.grid-kartu { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }

.kartu {
    background: var(--kertas);
    border: var(--rusuk);
    border-radius: var(--sudut);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.kartu-gambar { aspect-ratio: 16 / 10; background: var(--langit-pucat); }
.kartu-gambar img { width: 100%; height: 100%; object-fit: cover; }
.kartu-isi { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.kartu-isi h3 { font-size: 1.06rem; }
.kartu-isi p { font-size: 0.92rem; color: var(--teks); }
.kartu-meta { font-size: 0.8rem; color: var(--teks-redup); }
.kartu-tag {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--biru);
    background: var(--langit-pucat);
    padding: 3px 9px;
    border-radius: 2px;
}
.kartu-link { margin-top: auto; padding-top: 4px; font-weight: 600; font-size: 0.9rem; }

/* Kartu yang seluruhnya dapat diklik */
a.kartu { color: inherit; transition: border-color var(--transisi); }
a.kartu:hover { border-color: var(--tinta); color: inherit; }

/* Kartu keterangan tanpa gambar, dengan angka di sisi kiri */
.catatan {
    border-left: 3px solid var(--langit);
    padding: 4px 0 4px 20px;
}
.catatan h3 { margin-bottom: 8px; }
.catatan p { font-size: 0.94rem; }

/* ==========================================================================
   MASTHEAD HALAMAN — rata kiri, bukan spanduk tengah
   ========================================================================== */
.masthead {
    background: var(--gradasi-halus), var(--kertas-dingin);
    color: var(--teks);
    padding-block: clamp(42px, 6vw, 66px);
    border-bottom: var(--rusuk);
}
.masthead h1 { color: var(--tinta); }
.masthead p { margin-top: 14px; color: var(--teks-redup); max-width: 54ch; }
.remah { font-size: 0.82rem; color: var(--teks-redup); margin-bottom: 16px; }
.remah a { color: var(--biru); }
.remah a:hover { color: var(--amber-tua); }

/* varian terang: sama seperti masthead standar, disimpan untuk kompatibilitas */
.masthead-terang {
    background: var(--kertas-dingin);
    color: var(--teks);
    border-bottom: var(--rusuk);
}
.masthead-terang h1 { color: var(--tinta); }
.masthead-terang p { color: var(--teks-redup); }
.masthead-terang .remah { color: var(--teks-redup); }
.masthead-terang .remah a { color: var(--biru); }

/* alias lama */
.header-halaman {
    background: var(--gradasi-halus), var(--kertas-dingin);
    color: var(--teks);
    padding-block: clamp(42px, 6vw, 66px);
    border-bottom: var(--rusuk);
}
.header-halaman h1 { color: var(--tinta); }
.breadcrumb { font-size: 0.82rem; color: var(--teks-redup); margin-top: 14px; }
.breadcrumb a { color: var(--biru); }
.breadcrumb a:hover { color: var(--amber-tua); }

/* ==========================================================================
   LEMBAR DATA — daftar istilah bergaris untuk identitas lembaga
   ========================================================================== */
.lembar-data { border-top: 2px solid var(--tinta); }
.lembar-baris {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 24px;
    padding-block: 16px;
    border-bottom: var(--rusuk);
}
.lembar-baris dt { color: var(--teks-redup); font-size: 0.9rem; }
.lembar-baris dd { color: var(--tinta); }

.tanda {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 2px;
}
.tanda-tunggu { background: #FDF0DA; color: var(--amber-tua); }
.tanda-sah { background: #E3F5EA; color: #15704A; }

/* ==========================================================================
   TABEL
   ========================================================================== */
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td {
    padding: 13px 14px;
    text-align: left;
    border-bottom: var(--rusuk);
    font-size: 0.92rem;
    vertical-align: top;
}
.tabel thead th {
    font-family: 'Archivo', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tinta);
    border-bottom: 2px solid var(--tinta);
    white-space: nowrap;
}
.tabel tbody tr:hover td { background: var(--kertas-dingin); }
.pembungkus-tabel { overflow-x: auto; }

/* alias lama */
table.tabel-data { width: 100%; border-collapse: collapse; }
table.tabel-data th, table.tabel-data td {
    padding: 13px 14px; text-align: left; border-bottom: var(--rusuk);
    font-size: 0.92rem; vertical-align: top;
}
table.tabel-data thead th {
    font-size: 0.8rem; color: var(--tinta); background: transparent;
    border-bottom: 2px solid var(--tinta);
}
table.tabel-data tr:hover td { background: var(--kertas-dingin); }

/* ==========================================================================
   GARIS WAKTU — khusus alur uji kompetensi (isinya memang berurutan)
   ========================================================================== */
.alur { position: relative; padding-left: 0; }
.alur-langkah {
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr);
    gap: 24px;
    position: relative;
    padding-bottom: 34px;
}
.alur-langkah:last-child { padding-bottom: 0; }
.alur-langkah::before {
    content: "";
    position: absolute;
    left: 1.42rem;
    top: 2.6rem;
    bottom: -0.4rem;
    width: 1px;
    background: var(--garis);
}
.alur-langkah:last-child::before { display: none; }
.alur-tanda {
    width: 2.85rem;
    height: 2.85rem;
    border: 1px solid var(--tinta);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Source Serif 4', serif;
    font-size: 1.05rem;
    color: var(--tinta);
    background: var(--kertas);
    position: relative;
    z-index: 1;
}
.alur-langkah.kunci .alur-tanda { background: linear-gradient(135deg, #FFC15C, var(--amber)); border-color: var(--amber); color: #4A2C00; }
.alur-isi h3 { margin-bottom: 7px; }
.alur-isi p { font-size: 0.95rem; }

/* ==========================================================================
   FORMULIR
   ========================================================================== */
.kotak-form {
    background: var(--kertas);
    border: var(--rusuk);
    border-radius: var(--sudut);
    padding: clamp(22px, 3vw, 32px);
}
.form-grup { margin-bottom: 18px; }
.form-grup label {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--tinta);
    margin-bottom: 7px;
}
.form-grup input,
.form-grup select,
.form-grup textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--tinta);
    background: var(--kertas);
    border: 1px solid var(--garis);
    border-radius: var(--sudut);
    transition: border-color var(--transisi), box-shadow var(--transisi);
}
.form-grup input:focus,
.form-grup select:focus,
.form-grup textarea:focus {
    outline: none;
    border-color: var(--biru);
    box-shadow: 0 0 0 3px rgba(20, 80, 140, 0.13);
}
.form-grup input[type="file"] { padding: 9px 11px; font-size: 0.86rem; }
.form-grup textarea { min-height: 120px; resize: vertical; }
.bantuan { font-size: 0.8rem; color: var(--teks-redup); margin-top: 6px; }

.form-baris-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.pemisah-form {
    border: none;
    border-top: var(--rusuk);
    margin-block: 26px 22px;
}
.legenda {
    font-family: 'Archivo', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 16px;
}

/* alias lama */
.form-kotak {
    background: var(--kertas);
    border: var(--rusuk);
    border-radius: var(--sudut);
    padding: clamp(22px, 3vw, 32px);
}

/* ===== Notifikasi ===== */
.alert {
    padding: 13px 16px;
    border-radius: var(--sudut);
    font-size: 0.9rem;
    margin-bottom: 20px;
    border-left: 3px solid;
}
.alert-sukses { background: #E9F7EF; color: #15704A; border-color: #15704A; }
.alert-gagal  { background: #FCEDEC; color: #A32019; border-color: #A32019; }
.alert-info   { background: var(--langit-pucat); color: var(--biru); border-color: var(--biru); }

/* ==========================================================================
   KAKI SITUS
   ========================================================================== */
.kaki {
    background: var(--kertas-dingin);
    color: var(--teks-redup);
    padding-top: 58px;
    font-size: 0.9rem;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--langit), var(--amber)) 1;
}
.kaki-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.25fr;
    gap: 40px;
    padding-bottom: 44px;
}
.kaki-merek { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.kaki-merek img { width: 46px; }
.kaki-merek strong { display: block; color: var(--tinta); font-family: 'Source Serif 4', serif; font-size: 1.05rem; }
.kaki-merek span { font-size: 0.8rem; color: var(--teks-redup); }
.kaki p { color: var(--teks-redup); max-width: 40ch; }
.kaki h5 {
    color: var(--tinta);
    font-size: 0.8rem;
    margin-bottom: 15px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--garis);
}
.kaki li { margin-bottom: 10px; }
.kaki a { color: var(--teks-redup); }
.kaki a:hover { color: var(--amber-tua); }
.kaki-kontak li { display: flex; gap: 9px; line-height: 1.5; }
.kaki-kontak span { color: var(--teks-redup); flex-shrink: 0; }
.kaki-bawah {
    border-top: var(--rusuk);
    padding-block: 18px;
    font-size: 0.82rem;
    color: var(--teks-redup);
}
.kaki-bawah-isi { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* alias lama */
.site-footer {
    background: var(--kertas-dingin);
    color: var(--teks-redup);
    padding-top: 58px;
    font-size: 0.9rem;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--langit), var(--amber)) 1;
}
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: 40px; padding-bottom: 44px; }
.footer-brand img { width: 46px; margin-bottom: 14px; }
.footer-brand h4 { color: var(--tinta); font-size: 1rem; margin-bottom: 10px; }
.footer-brand p { font-size: 0.88rem; color: var(--teks-redup); }
.footer-kolom h5 { color: var(--tinta); font-size: 0.8rem; margin-bottom: 15px; padding-bottom: 9px; border-bottom: 1px solid var(--garis); }
.footer-kolom ul li { margin-bottom: 10px; font-size: 0.88rem; }
.footer-kolom a { color: var(--teks-redup); }
.footer-kolom a:hover { color: var(--amber-tua); }
.footer-kontak li { display: flex; gap: 8px; }
.footer-bawah { border-top: var(--rusuk); padding-block: 18px; }
.footer-bawah-isi { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--teks-redup); }

/* ===== Tombol kembali ke atas ===== */
.ke-atas, .btn-ke-atas {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--tinta-lembut), var(--tinta));
    color: #fff !important;
    border: none;
    border-radius: var(--sudut);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    box-shadow: var(--bayangan-kuat);
    transition: opacity var(--transisi), visibility var(--transisi);
    z-index: 90;
}
.ke-atas.tampil, .btn-ke-atas.tampil { opacity: 1; visibility: visible; }
.ke-atas:hover, .btn-ke-atas:hover { background: var(--biru); }

/* ==========================================================================
   RESPONSIF
   ========================================================================== */
@media (max-width: 980px) {
    .hero-isi { grid-template-columns: 1fr; }
    .sertifikat { max-width: 460px; }
    .grid-3, .grid-kartu { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .kaki-grid, .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .lembar-baris { grid-template-columns: 11rem minmax(0,1fr); gap: 16px; }
}

@media (max-width: 760px) {
    .tombol-menu { display: flex; }
    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--kertas);
        border-bottom: var(--rusuk);
        box-shadow: var(--bayangan-kuat);
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 24px 22px;
    }
    .menu.terbuka { display: flex; }
    .menu-daftar { flex-direction: column; align-items: stretch; gap: 0; }
    .menu-daftar > li > a { padding: 11px 0; border-bottom: 1px solid var(--garis-tipis); border-radius: 0; }
    .submenu {
        position: static;
        display: none;
        border: none;
        box-shadow: none;
        padding: 4px 0 8px 14px;
        min-width: 0;
    }
    .punya-submenu.terbuka .submenu { display: block; }
    .punya-submenu:hover .submenu { display: none; }
    .punya-submenu.terbuka:hover .submenu { display: block; }

    .grid-2, .grid-3, .grid-kartu { grid-template-columns: 1fr; }
    .form-baris-2 { grid-template-columns: 1fr; }
    .kaki-grid, .footer-grid { grid-template-columns: 1fr; }
    .lembar-baris { grid-template-columns: 1fr; gap: 4px; padding-block: 14px; }
    .arsip-baris { grid-template-columns: 2.4rem minmax(0,1fr); }
    .arsip-sisi { grid-column: 2; }
    .alur-langkah { grid-template-columns: 3.2rem minmax(0,1fr); gap: 16px; }
    .alur-langkah::before { left: 1.42rem; }
    .hero-fakta { gap: 24px; }
    .sertifikat-baris { grid-template-columns: 7rem 1fr; }
}

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

@media print {
    .navigasi, .bar-atas, .kaki, .site-footer, .ke-atas, .btn-ke-atas { display: none; }
    body { color: #000; }
}