/* ============================================================
   SIM GKI Via Dolorosa Polimak IV — Situs Publik
   Palet dari logo GKI: hijau tua & emas
   ============================================================ */

:root {
    --hijau-tua: #04251c;
    --hijau: #0a3d2c;
    --hijau-muda: #1a5c45;
    --emas: #d9ae4e;
    --emas-tua: #b8862b;
    --krem: #faf9f7;
    --teks: #1a2e26;
    --teks-lembut: #4b5f57;
    --teks-samar: #8a9a93;
    --garis: #e4e7e5;
    --serif: Georgia, 'Times New Roman', 'Noto Serif', serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--teks);
    background: var(--krem);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── Kepala halaman ───────────────────────────────────── */

.kop {
    background: var(--hijau-tua);
    border-bottom: 3px solid var(--emas);
    padding: 18px 0;
}

.kop-isi {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.kop img {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}

.kop-garis {
    width: 1px;
    height: 32px;
    background: rgba(217, 174, 78, .4);
}

.kop-teks-kecil {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(217, 174, 78, .85);
    line-height: 1.5;
}

.kop-nama {
    font-family: var(--serif);
    font-size: 17px;
    color: #eef3f0;
    line-height: 1.3;
    margin-top: 2px;
}

/* ─── Badan ────────────────────────────────────────────── */

.badan {
    flex: 1;
    max-width: 62rem;
    width: 100%;
    margin: 0 auto;
    padding: 40px 24px 56px;
}

.badan-sempit { max-width: 30rem; }

/* ─── Kartu ────────────────────────────────────────────── */

.kartu {
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(4, 37, 28, .03), 0 12px 32px -20px rgba(4, 37, 28, .14);
    position: relative;
    overflow: hidden;
}

.kartu::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--emas), var(--emas-tua));
}

.kartu-isi { padding: 32px; }

@media (max-width: 640px) {
    .kartu-isi { padding: 24px 20px; }
}

.kartu + .kartu { margin-top: 24px; }

/* ─── Judul ────────────────────────────────────────────── */

.label-kecil {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--teks-samar);
}

h1 {
    font-family: var(--serif);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 10px 0 0;
    color: var(--teks);
}

h2 {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 4px;
    color: var(--teks);
}

.sub {
    color: var(--teks-lembut);
    margin: 10px 0 0;
    font-size: 14.5px;
}

.pembatas {
    height: 1px;
    background: var(--garis);
    margin: 26px 0;
    border: none;
}

/* ─── Formulir ─────────────────────────────────────────── */

.bidang { margin-bottom: 18px; }

.bidang label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--teks-lembut);
    margin-bottom: 7px;
}

.bidang input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    font-family: var(--sans);
    color: var(--teks);
    background: #fcfcfb;
    border: 1px solid var(--garis);
    border-radius: 4px;
    transition: border-color .12s, box-shadow .12s;
}

.bidang input:focus {
    outline: none;
    border-color: var(--emas);
    box-shadow: 0 0 0 3px rgba(217, 174, 78, .16);
    background: #fff;
}

.bidang .petunjuk {
    font-size: 12.5px;
    color: var(--teks-samar);
    margin-top: 6px;
}

.bidang .galat {
    font-size: 13px;
    color: #b91c1c;
    margin-top: 6px;
}

.input-otp {
    text-align: center;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
    font-size: 26px !important;
    letter-spacing: .34em;
    padding: 14px !important;
}

/* ─── Tombol ───────────────────────────────────────────── */

.tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--sans);
    color: #fff;
    background: var(--hijau);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background .14s;
}

.tombol:hover { background: var(--hijau-muda); }

.tombol-samar {
    background: none;
    color: var(--teks-lembut);
    border: 1px solid var(--garis);
    width: auto;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 500;
}

.tombol-samar:hover { background: #f3f5f4; color: var(--teks); }

.tautan {
    color: var(--emas-tua);
    text-decoration: none;
    font-weight: 500;
}

.tautan:hover { text-decoration: underline; }

/* ─── Pesan ────────────────────────────────────────────── */

.pesan {
    padding: 13px 16px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 22px;
    line-height: 1.6;
}

.pesan-info {
    background: #f0f7f4;
    border-left: 3px solid var(--hijau-muda);
    color: #14513c;
}

.pesan-galat {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    color: #991b1b;
}

/* ─── Data diri ────────────────────────────────────────── */

.nomor-besar {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--hijau);
    line-height: 1;
}

.daftar-data {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px 32px;
    margin: 0;
}

@media (min-width: 560px) {
    .daftar-data { grid-template-columns: 1fr 1fr; }
}

.data-baris dt {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teks-samar);
}

.data-baris dd {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--teks);
}

.data-baris dd.kosong { color: var(--teks-samar); }

/* ─── Lencana ──────────────────────────────────────────── */

.lencana {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.lencana-hijau { background: #dcf3e8; color: #14603f; }
.lencana-kuning { background: #fdf3d7; color: #8a5a10; }
.lencana-abu { background: #f0f2f1; color: #6b7a74; }

/* ─── Kelengkapan ──────────────────────────────────────── */

.bar-luar {
    height: 6px;
    background: #eceeed;
    border-radius: 3px;
    overflow: hidden;
    margin: 12px 0 20px;
}

.bar-dalam {
    height: 100%;
    background: linear-gradient(90deg, var(--emas), var(--emas-tua));
    border-radius: 3px;
    transition: width .4s;
}

.daftar-lengkap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px 28px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 560px) {
    .daftar-lengkap { grid-template-columns: 1fr 1fr; }
}

.daftar-lengkap li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
}

.tanda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.tanda-ada { background: #dcf3e8; color: #14603f; }
.tanda-kosong { background: #fdf3d7; color: #8a5a10; }

.daftar-lengkap li.belum { color: var(--teks-lembut); }

/* ─── Tabel keluarga ───────────────────────────────────── */

.gulir { overflow-x: auto; margin: 0 -4px; }

table.jemaat {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.jemaat th {
    text-align: left;
    padding: 9px 14px 9px 4px;
    border-bottom: 1px solid var(--garis);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teks-samar);
    white-space: nowrap;
}

table.jemaat td {
    padding: 13px 14px 13px 4px;
    border-bottom: 1px solid #f2f4f3;
    vertical-align: middle;
}

table.jemaat tr:last-child td { border-bottom: none; }

table.jemaat tr.saya { background: #fcfaf3; }

.nama-tebal { font-weight: 600; }

/* ─── Sisa waktu ───────────────────────────────────────── */

.sisa-waktu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: #f0f7f4;
    border-radius: 4px;
    font-size: 13.5px;
    color: #14513c;
    margin-bottom: 24px;
}

/* ─── Kaki halaman ─────────────────────────────────────── */

.kaki {
    background: var(--hijau-tua);
    color: rgba(238, 243, 240, .5);
    padding: 26px 0;
    font-size: 12.5px;
}

.kaki-isi {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    line-height: 1.8;
}

.kaki a { color: rgba(217, 174, 78, .8); text-decoration: none; }
.kaki a:hover { text-decoration: underline; }