/* ==========================================================================
   Formulir Konsultasi — tema indigo/violet dengan kartu kaca,
   plus gaya dokumen A4 resmi (serif, hitam-putih) untuk hasil cetak.
   ========================================================================== */

:root {
    --indigo: #4F46E5;
    --violet: #8B5CF6;
    --indigo-tua: #3730A3;
    --grad: linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #8B5CF6 100%);
    --grad-lembut: linear-gradient(135deg, rgba(79, 70, 229, .12), rgba(139, 92, 246, .14));
    --ink: #1F1B3A;
    --ink-2: #3A3560;
    --muted: #635F82;
    --muted-2: #8B87A8;
    --putih: #FFFFFF;
    --kaca: rgba(255, 255, 255, .62);
    --kaca-kuat: rgba(255, 255, 255, .82);
    --garis: rgba(31, 27, 58, .10);
    --garis-kuat: rgba(31, 27, 58, .16);
    --ok: #0F7A55;
    --ok-bg: #E7F8F0;
    --err: #B42318;
    --err-bg: #FDECEA;
    --warn: #B54708;
    --warn-bg: #FEF3E2;
    --r-kecil: 10px;
    --r: 14px;
    --r-besar: 20px;
    --bayang: 0 18px 40px -22px rgba(40, 26, 110, .38), 0 2px 6px rgba(40, 26, 110, .06);
    --bayang-kecil: 0 8px 20px -14px rgba(40, 26, 110, .4);
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --serif: 'Times New Roman', Times, 'Liberation Serif', serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: #F3F0FF;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

body.halaman-masuk { display: block; }

.latar-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(52vw 48vh at 8% 4%, rgba(99, 102, 241, .28), transparent 62%),
        radial-gradient(46vw 44vh at 94% 8%, rgba(236, 72, 153, .18), transparent 60%),
        radial-gradient(50vw 46vh at 78% 92%, rgba(56, 189, 248, .18), transparent 62%),
        radial-gradient(46vw 40vh at 16% 88%, rgba(139, 92, 246, .22), transparent 64%),
        #F3F0FF;
}

a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-tua); }
h1, h2, h3 { margin: 0; line-height: 1.22; letter-spacing: -.01em; }
p { margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: rgba(79, 70, 229, .09); padding: 1px 6px; border-radius: 6px; }

.svg-ikon { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ---------- Kerangka aplikasi ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px clamp(14px, 3vw, 30px);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 6px 24px -20px rgba(50, 30, 120, .5);
}

.merek { display: flex; align-items: center; gap: 12px; color: var(--ink); min-width: 0; }
.merek:hover { color: var(--ink); }
.merek-logo { height: 40px; width: auto; max-width: 130px; object-fit: contain; }
.merek-ikon {
    width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
    background: var(--grad); color: #fff; box-shadow: 0 6px 16px -8px rgba(79, 70, 229, .8);
}
.merek-ikon .svg-ikon { width: 22px; height: 22px; }
.merek-teks { display: flex; flex-direction: column; min-width: 0; }
.merek-teks strong { font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.merek-teks small { font-size: 11.5px; color: var(--muted); }

.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 13px; border-radius: 11px;
    font-size: 13.5px; font-weight: 600; color: var(--ink-2);
    border: 1px solid transparent;
}
.nav-link .svg-ikon { width: 17px; height: 17px; opacity: .8; }
.nav-link:hover { background: rgba(79, 70, 229, .08); color: var(--indigo-tua); }
.nav-link.is-aktif { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -12px rgba(79, 70, 229, .9); }
.nav-link.is-aktif .svg-ikon { opacity: 1; }
.nav-tanda {
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--indigo-tua); background: rgba(79, 70, 229, .1);
    padding: 6px 10px; border-radius: 999px;
}
.nav-keluar {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 11px;
    font-size: 13.5px; font-weight: 600; color: var(--err); border: 1px solid rgba(180, 35, 24, .18);
    background: rgba(255, 255, 255, .6);
}
.nav-keluar:hover { background: var(--err-bg); color: var(--err); }

.wadah {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 38px) clamp(14px, 3vw, 26px) 70px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kaki {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 16px clamp(14px, 3vw, 30px);
    font-size: 12px; color: var(--muted-2);
    border-top: 1px solid var(--garis);
}

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

.tombol {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 12px;
    font-family: inherit; font-size: 14px; font-weight: 650; line-height: 1.2;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
    white-space: nowrap;
}
.tombol .svg-ikon { width: 17px; height: 17px; }
.tombol:hover { transform: translateY(-1px); }
.tombol:active { transform: translateY(0); }
.tombol-utama { background: var(--grad); color: #fff; box-shadow: 0 12px 24px -14px rgba(79, 70, 229, .95); }
.tombol-utama:hover { color: #fff; box-shadow: 0 16px 30px -14px rgba(79, 70, 229, 1); }
.tombol-utama[disabled] { opacity: .65; cursor: progress; transform: none; }
.tombol-garis { background: rgba(255, 255, 255, .78); color: var(--indigo-tua); border-color: var(--garis-kuat); box-shadow: var(--bayang-kecil); }
.tombol-garis:hover { background: #fff; color: var(--indigo-tua); }
.tombol-teks { background: transparent; color: var(--muted); border-color: transparent; }
.tombol-teks:hover { background: rgba(79, 70, 229, .07); color: var(--indigo-tua); }
.tombol-bahaya { background: var(--err); color: #fff; box-shadow: 0 10px 22px -14px rgba(180, 35, 24, .9); }
.tombol-bahaya:hover { color: #fff; background: #971C13; }
.tombol-bahaya-teks { background: transparent; color: var(--err); border-color: transparent; }
.tombol-bahaya-teks:hover { background: var(--err-bg); color: var(--err); }
.tombol-kecil { padding: 8px 12px; font-size: 12.8px; border-radius: 10px; }
.tombol-kecil .svg-ikon { width: 15px; height: 15px; }
.tombol-lebar { width: 100%; padding: 13px 18px; }
.tombol-ikon {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 10px; border: 1px solid var(--garis-kuat);
    background: rgba(255, 255, 255, .8); color: var(--ink-2); cursor: pointer;
}
.tombol-ikon:hover { background: #fff; color: var(--indigo-tua); }

/* ---------- Kartu ---------- */

.kartu {
    background: var(--kaca);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: var(--r-besar);
    box-shadow: var(--bayang);
    padding: clamp(18px, 2.4vw, 26px);
    display: flex; flex-direction: column; gap: 18px;
}

.kartu h2 { font-size: 17px; }
.kartu > p { color: var(--muted); font-size: 13.8px; }

.kartu-judul { display: flex; align-items: flex-start; gap: 14px; }
.kartu-judul h2 { font-size: 17px; }
.kartu-judul p { color: var(--muted); font-size: 13.2px; margin-top: 3px; }
.kartu-nomor {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 12px; background: var(--grad-lembut); color: var(--indigo-tua);
    font-weight: 800; font-size: 15px; border: 1px solid rgba(79, 70, 229, .16);
}
.kartu-nomor .svg-ikon { width: 19px; height: 19px; }

.kartu-kepala-baris { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.kartu-kepala-baris h2 { font-size: 17px; }
.kartu-kepala-baris p { color: var(--muted); font-size: 13px; margin-top: 3px; }

.lencana {
    display: inline-flex; align-items: center; gap: 7px; width: fit-content;
    padding: 6px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--indigo-tua); background: rgba(79, 70, 229, .1);
    border: 1px solid rgba(79, 70, 229, .16);
}
.lencana .svg-ikon { width: 14px; height: 14px; }

.kartu-catatan { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ---------- Formulir ---------- */

.kolom { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kolom-label { font-size: 12.7px; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; }
.kolom-label em { color: var(--violet); font-style: normal; }
.kolom input[type="text"],
.kolom input[type="password"],
.kolom input[type="number"],
.kolom input[type="date"],
.kolom input[type="search"],
.kolom input[type="file"],
.kolom select,
.kolom textarea,
.filter input,
.filter select {
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--garis-kuat);
    border-radius: 11px;
    padding: 11px 12px;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.kolom textarea { resize: vertical; min-height: 78px; line-height: 1.55; }
.kolom input:hover, .kolom select:hover, .kolom textarea:hover { border-color: rgba(79, 70, 229, .32); }
.kolom input:focus, .kolom select:focus, .kolom textarea:focus,
.filter input:focus, .filter select:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .14);
    background: #fff;
}
.kolom input[type="file"] { padding: 9px 10px; font-size: 13px; background: #fff; }
@media (max-width: 720px) {
    .kolom input[type="text"], .kolom input[type="password"], .kolom input[type="number"],
    .kolom input[type="date"], .kolom input[type="search"], .kolom select, .kolom textarea,
    .filter input, .filter select { font-size: 16px; padding: 12px; }
    .liha-sandi { width: 42px; height: 42px; right: 2px; }
}
.kolom input::placeholder, .kolom textarea::placeholder { color: var(--muted-2); }
.kolom-petunjuk { font-size: 11.8px; color: var(--muted-2); line-height: 1.45; }
.kolom-galat { font-size: 12.2px; color: var(--err); font-weight: 600; }
.kolom.is-galat input, .kolom.is-galat select, .kolom.is-galat textarea { border-color: rgba(180, 35, 24, .6); background: #FFF9F8; }
.kolom-lebar { grid-column: 1 / -1; }

.grid-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
.grid-dua.grid-rapat { gap: 14px 16px; }

.cek { display: flex; align-items: flex-start; gap: 9px; font-size: 13.2px; color: var(--ink-2); cursor: pointer; padding-top: 4px; }
.cek input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--indigo); flex: none; }

.form-aksi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-aksi-vertikal { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.form-aksi-vertikal .kolom { width: 100%; }

/* ---------- Notifikasi ---------- */

.notif {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 15px; border-radius: 13px;
    font-size: 13.5px; font-weight: 550; line-height: 1.45;
    border: 1px solid transparent;
}
.notif .svg-ikon { width: 18px; height: 18px; margin-top: 1px; }
.notif-ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(15, 122, 85, .2); }
.notif-err { background: var(--err-bg); color: var(--err); border-color: rgba(180, 35, 24, .2); }
.notif-padat { padding: 10px 12px; font-size: 12.8px; }

/* ---------- Kepala halaman ---------- */

.kepala-halaman { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.kepala-halaman h1 { font-size: clamp(24px, 3vw, 32px); margin-top: 10px; }
.kepala-halaman p { color: var(--muted); font-size: 14px; max-width: 62ch; margin-top: 6px; }
.kepala-aksi { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Formulir konsultasi ---------- */

.form-konsul { display: flex; flex-direction: column; gap: 20px; }

.qr-kotak {
    align-self: stretch;
    border: 1px dashed rgba(79, 70, 229, .35);
    border-radius: var(--r);
    background: rgba(255, 255, 255, .55);
    padding: 12px;
    min-height: 118px;
    display: flex;
    align-items: center;
}
.qr-kosong { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.qr-kosong .svg-ikon { width: 34px; height: 34px; color: rgba(79, 70, 229, .5); }
.qr-kosong div { display: flex; flex-direction: column; gap: 2px; }
.qr-kosong strong { font-size: 13px; color: var(--ink-2); }
.qr-kosong span { font-size: 12px; line-height: 1.4; }

.qr-isi { display: flex; align-items: center; gap: 14px; width: 100%; }
.qr-isi img {
    width: 94px; height: 94px; object-fit: contain; background: #fff;
    border: 1px solid var(--garis); border-radius: 10px; padding: 5px; flex: none;
}
.qr-ket { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qr-ket strong { font-size: 13.6px; color: var(--ink); }
.qr-ket span { font-size: 12.5px; color: var(--muted); }
.qr-ket small { font-size: 11.6px; color: var(--muted-2); line-height: 1.4; margin-top: 3px; }
.qr-tanpa { font-size: 11.8px; font-weight: 650; color: var(--warn); background: var(--warn-bg); padding: 5px 8px; border-radius: 8px; margin-top: 4px; width: fit-content; }

.catatan-form { font-size: 12.2px; color: var(--muted-2); margin: 0; }

.kirim-bar {
    position: sticky;
    bottom: 14px;
    z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 13px 16px;
    border-radius: var(--r-besar);
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 20px 40px -26px rgba(40, 26, 110, .55);
}
.kirim-info { display: flex; align-items: center; gap: 9px; font-size: 12.6px; color: var(--muted); max-width: 54ch; }
.kirim-info .svg-ikon { color: var(--indigo); }
.kirim-aksi { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* ---------- Pratinjau A4 ---------- */

.lapis-pratinjau {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(24, 18, 48, .62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: clamp(10px, 2.5vw, 30px);
}
.pratinjau-kotak {
    width: min(1000px, 100%);
    max-height: 100%;
    display: flex; flex-direction: column;
    background: #F7F5FF;
    border-radius: var(--r-besar);
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
}
.pratinjau-kepala, .pratinjau-kaki {
    display: flex; align-items: center; gap: 12px; justify-content: space-between;
    padding: 14px 18px; background: rgba(255, 255, 255, .9);
}
.pratinjau-kepala { border-bottom: 1px solid var(--garis); }
.pratinjau-kaki { border-top: 1px solid var(--garis); flex-wrap: wrap; }
.pratinjau-kepala div { display: flex; flex-direction: column; }
.pratinjau-kepala strong { font-size: 14.5px; }
.pratinjau-kepala small { font-size: 12px; color: var(--muted); }
.pratinjau-isi {
    flex: 1; overflow: auto; padding: 18px;
    display: flex; justify-content: center; align-items: flex-start;
}
.pratinjau-isi .kertas { box-shadow: 0 14px 40px -20px rgba(20, 10, 60, .5); zoom: var(--skala, .62); flex: none; }
.pratinjau-muat { color: var(--muted); font-size: 13.5px; padding: 40px 0; }
.pratinjau-catatan { font-size: 12.5px; color: var(--muted); margin-right: auto; }

/* ---------- Dashboard ---------- */

.statistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.stat-kartu {
    display: flex; flex-direction: column; gap: 4px;
    padding: 18px 20px;
    background: var(--kaca);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: var(--r);
    box-shadow: var(--bayang-kecil);
    min-width: 0;
}
.stat-label { font-size: 11.6px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.stat-angka { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.stat-nama { font-size: 15.5px; font-weight: 750; color: var(--ink); line-height: 1.3; }
.stat-ket { font-size: 12.2px; color: var(--muted-2); }
.stat-dokter { background: linear-gradient(135deg, rgba(79, 70, 229, .12), rgba(255, 255, 255, .7)); }

.filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-cari { position: relative; display: flex; align-items: center; }
.filter-cari .svg-ikon { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--muted-2); pointer-events: none; }
.filter-cari input { padding-left: 34px; width: 250px; }
.filter select { width: auto; min-width: 160px; }

.tabel-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--garis); background: rgba(255, 255, 255, .72); }
.tabel { width: 100%; border-collapse: collapse; font-size: 13.4px; min-width: 760px; }
.tabel th, .tabel td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--garis); }
.tabel th { font-size: 11.4px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: rgba(79, 70, 229, .055); font-weight: 800; white-space: nowrap; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: rgba(79, 70, 229, .045); }
.tabel td strong { font-weight: 650; }
.sel-sel { display: block; font-size: 11.8px; color: var(--muted-2); margin-top: 2px; }
.kode-arsip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.4px; font-weight: 700; color: var(--indigo-tua); background: rgba(79, 70, 229, .09); padding: 3px 7px; border-radius: 7px; white-space: nowrap; }
.ta-kanan { text-align: right !important; }

.kosong-baris { display: flex; align-items: center; gap: 14px; padding: 22px; border-radius: var(--r); background: rgba(255, 255, 255, .6); border: 1px dashed var(--garis-kuat); }
.kosong-baris strong { display: block; font-size: 14.5px; }
.kosong-baris p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.kosong-ikon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-lembut); color: var(--indigo); flex: none; }
.kosong-ikon .svg-ikon { width: 22px; height: 22px; }

.rekap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.rekap-item { display: flex; flex-direction: column; gap: 2px; padding: 13px 15px; border-radius: var(--r-kecil); background: rgba(255, 255, 255, .72); border: 1px solid var(--garis); }
.rekap-item strong { font-size: 13.6px; }
.rekap-item span { font-size: 12.2px; color: var(--muted); }

/* ---------- Sukses / kosong ---------- */

.kartu-sukses { flex-direction: row; align-items: flex-start; gap: 16px; border-color: rgba(15, 122, 85, .28); background: linear-gradient(135deg, rgba(231, 248, 240, .9), rgba(255, 255, 255, .8)); }
.sukses-ikon { width: 46px; height: 46px; border-radius: 14px; background: #fff; color: var(--ok); display: grid; place-items: center; flex: none; box-shadow: var(--bayang-kecil); }
.sukses-ikon .svg-ikon { width: 24px; height: 24px; }
.sukses-isi h2 { font-size: 17px; color: #0B5C41; }
.sukses-isi p { font-size: 13.6px; color: #14614A; margin-top: 4px; max-width: 76ch; }
.kartu-kosong { align-items: center; text-align: center; gap: 10px; padding: 34px 22px; }
.kartu-kosong .kosong-ikon { width: 54px; height: 54px; }
.kartu-kosong h2 { font-size: 18px; }
.kartu-kosong p { color: var(--muted); font-size: 13.8px; max-width: 56ch; }

/* ---------- Detail / dokumen ---------- */

.toolbar-dokumen { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.toolbar-kiri { display: flex; align-items: center; gap: 14px; }
.toolbar-judul { display: flex; flex-direction: column; }
.toolbar-judul strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.6px; color: var(--indigo-tua); }
.toolbar-judul span { font-size: 12.4px; color: var(--muted); }
.toolbar-aksi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-hapus { display: inline-flex; }

.area-dokumen { display: flex; justify-content: center; padding: 6px 0 4px; overflow-x: auto; }
.petunjuk-cetak { font-size: 12.4px; color: var(--muted); text-align: center; max-width: 80ch; margin: 0 auto; }

/* ---------- Dokter ---------- */

.tata-dua { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.dokter-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dokter-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: var(--r);
    background: rgba(255, 255, 255, .74);
    border: 1px solid var(--garis);
}
.dokter-item.is-nonaktif { opacity: .72; background: rgba(255, 255, 255, .5); }
.dokter-qr { width: 62px; height: 62px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; }
.dokter-qr img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.qr-belum { color: var(--muted-2); }
.qr-belum .svg-ikon { width: 26px; height: 26px; }
.dokter-isi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; flex: 1; }
.dokter-isi strong { font-size: 14px; width: 100%; }
.dokter-unit { font-size: 12.2px; color: var(--muted); }
.pil { font-size: 10.8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.pil-ok { background: var(--ok-bg); color: var(--ok); }
.pil-off { background: rgba(99, 95, 130, .12); color: var(--muted); }
.pil-warn { background: var(--warn-bg); color: var(--warn); }
.dokter-aksi { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.dokter-aksi form { display: inline-flex; }
.qr-yang-ada { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 11px; background: rgba(255, 255, 255, .8); border: 1px solid var(--garis); }
.qr-yang-ada img { width: 70px; height: 70px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--garis); }

/* ---------- Master data ---------- */

.tata-dua.tata-master { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.form-banyak { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--garis-kuat); }
.master-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.master-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: var(--r);
    background: rgba(255, 255, 255, .74);
    border: 1px solid var(--garis);
}
.master-item.is-nonaktif { opacity: .68; background: rgba(255, 255, 255, .48); }
.master-urutan {
    flex: none; width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 9px; background: var(--grad-lembut); color: var(--indigo-tua);
    font-size: 12px; font-weight: 800;
}
.master-isi { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.master-isi strong { font-size: 14px; width: 100%; overflow-wrap: anywhere; }
.master-ket { display: flex; flex-wrap: wrap; gap: 5px; }
.master-aksi { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.master-aksi form { display: inline-flex; }
.pil-info { background: rgba(79, 70, 229, .12); color: var(--indigo-tua); }

/* ---------- Akun staf ---------- */

.sub-judul { font-size: 14.5px; margin: 6px 0 2px; }
.akun-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.akun-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 11px 14px; border-radius: var(--r); border: 1px solid var(--garis);
    background: rgba(255, 255, 255, .74);
}
.akun-isi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.akun-isi strong { font-size: 14px; }
.akun-username { font-size: 12.2px; color: var(--muted); }
.akun-aksi { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.akun-sandi { display: flex; align-items: center; gap: 6px; }
.akun-sandi input {
    font-family: inherit; font-size: 12.6px; padding: 7px 9px; width: 150px;
    border: 1px solid var(--garis-kuat); border-radius: 9px; background: #fff;
}
.akun-saya { font-size: 11.6px; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; }
.kartu-dalam { margin-top: 4px; border-radius: var(--r); padding: 14px 16px; }
.kartu-info .kartu-dalam h2 { font-size: 14.5px; }

.aksi-baris { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.akun-item .akun-aksi form { display: inline-flex; }
.pil-ranap { background: rgba(79, 70, 229, .12); color: var(--indigo-tua); }
.pil-rajal { background: rgba(15, 122, 85, .12); color: var(--ok); }
.stat-pisah { color: var(--muted-2); font-weight: 600; }

@media (max-width: 720px) {
    .akun-sandi { width: 100%; }
    .akun-sandi input { flex: 1; width: auto; }
    .akun-aksi { width: 100%; justify-content: flex-start; }
}

/* ---------- Pengaturan ---------- */

.tab-baris { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .8); width: fit-content; box-shadow: var(--bayang-kecil); }
.tab-tombol {
    font-family: inherit; font-size: 13.4px; font-weight: 650; color: var(--ink-2);
    background: transparent; border: 0; border-radius: 10px; padding: 9px 16px; cursor: pointer;
    min-height: 38px;
}
.tab-tombol:hover { background: rgba(79, 70, 229, .08); color: var(--indigo-tua); }
.tab-tombol.is-aktif { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -12px rgba(79, 70, 229, .9); }
.tab-jumlah {
    display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px;
    border-radius: 999px; font-size: 11px; font-weight: 800;
    background: rgba(79, 70, 229, .14); color: var(--indigo-tua);
}
.tab-tombol.is-aktif .tab-jumlah { background: rgba(255, 255, 255, .28); color: #fff; }
a.tab-tombol { text-decoration: none; display: inline-flex; align-items: center; }

.panel-tab { display: none; }
.panel-tab.is-aktif { display: block; }
.masuk-kartu .panel-tab.is-aktif { display: flex; flex-direction: column; gap: 14px; }
.panel-tab > .tata-dua { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.logo-pratinjau { display: flex; align-items: center; justify-content: center; min-height: 130px; border-radius: var(--r); background: rgba(255, 255, 255, .7); border: 1px dashed var(--garis-kuat); padding: 14px; }
.logo-pratinjau img { max-height: 100px; max-width: 100%; object-fit: contain; }
.logo-kosong { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted-2); }
.logo-kosong .svg-ikon { width: 28px; height: 28px; }
.logo-kosong small { font-size: 12px; }

.kop-pratinjau { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--garis); font-family: var(--serif); color: #111; }
.kop-pratinjau img { height: calc(var(--kop-tinggi, 21mm) * 1.9); width: auto; max-width: 78px; object-fit: contain; flex: none; }
.kop-pratinjau .kop-pratinjau-teks { display: flex; flex-direction: column; text-align: center; flex: 1; min-width: 0; line-height: 1.3; }
.kop-pratinjau strong { font-size: calc(var(--kop-f1, 13pt) * 1.02); font-weight: 700; }
.kop-pratinjau b { font-size: calc(var(--kop-f2, 16pt) * 1.02); font-weight: 700; }
.kop-pratinjau span { font-size: calc(var(--kop-f3, 9pt) * 1.15); }
.kop-pratinjau .kosong { font-size: 11px; color: var(--muted-2); font-family: var(--font); }

/* dua slot logo */
.logo-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.logo-slot {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px; border-radius: var(--r); border: 1px solid var(--garis);
    background: rgba(255, 255, 255, .62);
}
.logo-slot-judul { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.logo-slot-judul strong { font-size: 12.8px; }
.logo-slot-judul small { font-size: 11px; color: var(--muted-2); }
.logo-slot .logo-pratinjau { min-height: 96px; padding: 10px; }
.logo-slot .logo-pratinjau img { max-height: 76px; }
.ukuran-kop {
    border: 1px solid var(--garis); border-radius: var(--r);
    min-width: 0;
    background: rgba(255, 255, 255, .6); padding: 14px 16px 16px; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.ukuran-kop legend { font-size: 12.7px; font-weight: 700; color: var(--ink-2); padding: 0 6px; }
.ukuran-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ukuran-grid .kolom input { text-align: center; }
@media (max-width: 1000px) {
    .logo-dua { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .ukuran-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kode-besar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r); background: rgba(79, 70, 229, .07); border: 1px dashed rgba(79, 70, 229, .3); }
.kode-besar strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 19px; letter-spacing: .12em; color: var(--indigo-tua); }

.daftar-centang { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13.4px; color: var(--ink-2); }
.daftar-centang li { display: flex; align-items: flex-start; gap: 9px; }
.daftar-centang .svg-ikon { width: 17px; height: 17px; color: var(--ok); margin-top: 2px; }
.daftar-centang li.tidak .svg-ikon { color: var(--err); }
.daftar-centang li.tidak { color: var(--muted); }
.kartu-info { background: rgba(255, 255, 255, .55); }

/* ==========================================================================
   HALAMAN MASUK
   ========================================================================== */

.halaman-masuk { min-height: 100vh; background: #0F0B2A; }

.masuk {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
}

.masuk-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, #1B1140 0%, #2E1B6B 40%, #5636C8 78%, #8B5CF6 100%);
    color: #fff;
    display: flex;
    align-items: center;
    padding: clamp(26px, 5vw, 64px);
}
.masuk-aurora { position: absolute; inset: 0; pointer-events: none; }
.masuk-aurora span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.masuk-aurora span:nth-child(1) { width: 46vw; height: 46vw; left: -14vw; top: -12vw; background: #6366F1; }
.masuk-aurora span:nth-child(2) { width: 34vw; height: 34vw; right: -10vw; top: 22%; background: #EC4899; opacity: .35; }
.masuk-aurora span:nth-child(3) { width: 40vw; height: 40vw; left: 12%; bottom: -22vw; background: #22D3EE; opacity: .28; }

.masuk-panel-isi { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; max-width: 520px; width: 100%; }

.masuk-lambang { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 650; letter-spacing: .02em; }
.masuk-lambang img { height: 46px; width: auto; max-width: 92px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3)); }
.masuk-lambang .svg-ikon { width: 34px; height: 34px; opacity: .92; }
.masuk-lambang span { max-width: 260px; line-height: 1.35; }

.masuk-judul {
    font-size: clamp(42px, 5.4vw, 68px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: .98;
}
.titik-judul { color: #C4B5FD; }

.masuk-sub { font-size: clamp(13.5px, 1.3vw, 15.5px); line-height: 1.65; color: rgba(255, 255, 255, .78); max-width: 44ch; }

.masuk-fitur { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.masuk-fitur li { display: flex; align-items: flex-start; gap: 13px; }
.fitur-ikon {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px;
    background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2); color: #EDE9FE;
}
.fitur-ikon .svg-ikon { width: 19px; height: 19px; }
.masuk-fitur strong { display: block; font-size: 13.8px; font-weight: 700; }
.masuk-fitur small { font-size: 12.4px; color: rgba(255, 255, 255, .66); }

.masuk-kaki-panel { display: flex; flex-direction: column; gap: 3px; font-size: 11.6px; color: rgba(255, 255, 255, .5); margin-top: 10px; }

.masuk-kanan {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 52px);
    background:
        radial-gradient(40vw 40vw at 88% 10%, rgba(139, 92, 246, .3), transparent 62%),
        radial-gradient(38vw 38vw at 8% 90%, rgba(79, 70, 229, .22), transparent 60%),
        #F3F0FF;
}

.masuk-kartu {
    width: min(430px, 100%);
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 24px;
    box-shadow: 0 40px 80px -40px rgba(40, 20, 110, .55), 0 2px 8px rgba(40, 20, 110, .06);
    padding: clamp(22px, 3vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.kartu-kepala { display: flex; flex-direction: column; gap: 8px; }
.kartu-kepala h2 { font-size: 24px; letter-spacing: -.02em; }
.kartu-kepala p { font-size: 13.2px; color: var(--muted); line-height: 1.55; }

.tab-masuk {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    padding: 5px; border-radius: 12px;
    background: rgba(79, 70, 229, .09);
    border: 1px solid rgba(79, 70, 229, .1);
}
.tab-masuk .tab-tombol { padding: 9px 10px; font-size: 13px; border-radius: 9px; }
.tab-masuk .tab-tombol.is-aktif { background: #fff; color: var(--indigo-tua); box-shadow: 0 4px 12px -6px rgba(40, 20, 110, .4); }

.kolom-isi { position: relative; display: flex; align-items: center; }
.kolom-isi > .svg-ikon { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--muted-2); pointer-events: none; }
.kolom-isi input { padding-left: 38px; }
.kolom-isi input[type="password"], .kolom-isi input#sandi { padding-right: 42px; }
.liha-sandi {
    position: absolute; right: 4px; width: 38px; height: 38px;
    display: grid; place-items: center; border: 0; border-radius: 8px;
    background: transparent; color: var(--muted); cursor: pointer;
}
.liha-sandi:hover { background: rgba(79, 70, 229, .08); color: var(--indigo-tua); }
.liha-sandi .svg-ikon { width: 17px; height: 17px; }
.kolom-kode { text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.kolom-kode::placeholder { letter-spacing: .1em; font-weight: 600; }

.kartu-kaki { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.6px; color: var(--muted-2); border-top: 1px solid var(--garis); padding-top: 14px; }
.kartu-kaki a { font-weight: 650; }

/* ==========================================================================
   DOKUMEN A4 (formulir hasil konsultasi)
   ========================================================================== */

.kertas {
    width: 210mm;
    min-height: 297mm;
    flex: none;
    padding: 17mm 20mm 16mm;
    background: #fff;
    color: #000;
    font-family: var(--serif);
    font-size: 11.5pt;
    line-height: 1.45;
    box-shadow: 0 24px 60px -30px rgba(20, 10, 60, .55), 0 2px 8px rgba(20, 10, 60, .08);
    overflow-wrap: break-word;
}

.kertas .kop {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: calc(var(--kop-tinggi, 21mm) + 3mm);
    padding: 1mm 0;
}
.kertas .kop-logo {
    position: absolute; top: 50%; transform: translateY(-50%);
    max-height: var(--kop-tinggi, 21mm); max-width: 27mm; width: auto; object-fit: contain;
}
.kertas .kop-logo-kiri { left: 0; }
.kertas .kop-logo-kanan { right: 0; }
.kertas .kop-teks { text-align: center; padding: 0 31mm; width: 100%; }
.kertas .kop-a { font-size: var(--kop-f1, 13pt); font-weight: 700; line-height: 1.2; }
.kertas .kop-b { font-size: var(--kop-f2, 16pt); font-weight: 700; line-height: 1.2; }
.kertas .kop-c { font-size: var(--kop-f3, 9pt); line-height: 1.3; }
.kertas .kop-d { font-size: var(--kop-f4, 9pt); line-height: 1.3; }
.kertas .kop-garis { border-top: 2.5px solid #111; border-bottom: 1px solid #111; height: 2.5px; margin-top: 3mm; }

.kertas .judul {
    text-align: center;
    font-size: 14pt;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin: 9mm 0 7mm;
}

.kertas .kalimat { margin: 0 0 1.6mm; }
.kertas .data { margin: 0 0 4.5mm; }
.kertas .baris-data {
    display: grid;
    grid-template-columns: 56mm 4mm 1fr;
    align-items: start;
    line-height: 1.4;
    margin-bottom: .8mm;
}
.kertas .baris-data .lbl { white-space: normal; }
.kertas .baris-data .titik { text-align: center; }
.kertas .baris-data .val { min-height: 1.4em; }

.kertas .ttd { width: 82mm; margin: 9mm 0 0 auto; text-align: center; }
.kertas .ttd-kota { font-size: 11.5pt; }
.kertas .ttd-qr { display: block; margin: 4mm auto 2mm; height: auto; }
.kertas .ttd-kosong { display: block; }
.kertas .ttd-nama { font-weight: 700; font-size: 11.5pt; margin-top: 2mm; }

/* ==========================================================================
   Responsif
   ========================================================================== */

@media (max-width: 1000px) {
    .masuk { grid-template-columns: 1fr; }
    .masuk-panel { padding: 30px clamp(20px, 6vw, 44px); }
    .masuk-judul { font-size: clamp(34px, 9vw, 46px); }
    .masuk-sub { max-width: 52ch; }
    .masuk-fitur { display: none; }
    .masuk-kaki-panel { display: none; }
    .masuk-kanan { padding: 26px 16px 44px; }

    .tata-dua,
    .tata-dua.tata-master,
    .panel-tab > .tata-dua { grid-template-columns: minmax(0, 1fr); }
    .statistik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .topbar { gap: 10px; padding: 10px 14px; }
    .merek-teks strong { max-width: 52vw; }
    .nav { width: 100%; justify-content: flex-start; gap: 4px; }
    .nav-link { padding: 8px 10px; font-size: 12.8px; }
    .nav-link span { display: none; }
    .nav-link .svg-ikon { width: 19px; height: 19px; }
    .nav-keluar span, .nav-tanda { display: none; }
    .nav-keluar { padding: 8px; margin-left: auto; }

    .grid-dua { grid-template-columns: 1fr; }
    .ketiga { grid-template-columns: 1fr; }
    .statistik { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-angka { font-size: 26px; }
    .filter { width: 100%; }
    .filter-cari { flex: 1; }
    .filter-cari input { width: 100%; }
    .filter select { flex: 1; min-width: 0; }

    .kartu { border-radius: 16px; }
    .kirim-bar { bottom: 8px; padding: 12px; }
    .kirim-info { display: none; }
    .kirim-aksi { width: 100%; }
    .kirim-aksi .tombol { flex: 1; }

    .dokter-item { flex-wrap: wrap; }
    .dokter-aksi { width: 100%; justify-content: flex-start; }
    .master-item { flex-wrap: wrap; }
    .master-aksi { width: 100%; justify-content: flex-start; }

    .area-dokumen { justify-content: flex-start; padding-bottom: 10px; }
    .area-dokumen .kertas { zoom: .48; }

    .toolbar-aksi { width: 100%; }
    .toolbar-aksi .tombol { flex: 1; }

    .pratinjau-isi .kertas { zoom: var(--skala, .42); }
    .pratinjau-kaki .tombol { flex: 1; }
    .pratinjau-catatan { width: 100%; }
}

@media (max-width: 430px) {
    .statistik { grid-template-columns: 1fr; }
    .kode-besar strong { font-size: 16px; letter-spacing: .08em; }
    .tab-baris { width: 100%; }
    .tab-baris .tab-tombol { flex: 1; padding: 9px 10px; font-size: 12.4px; }
}

/* ==========================================================================
   Cetak — hanya kertas A4 yang tampil
   ========================================================================== */

@media print {
    @page { size: A4; margin: 0; }

    html, body { background: #fff !important; min-height: 0; }
    .latar-aurora, .topbar, .kaki, .toolbar-dokumen, .petunjuk-cetak, .notif,
    .lapis-pratinjau, .kirim-bar, .kepala-halaman { display: none !important; }
    .wadah { max-width: none; margin: 0; padding: 0; display: block; }
    .area-dokumen { display: block; padding: 0; overflow: visible; }
    .kertas {
        width: 210mm;
        min-height: 0;
        margin: 0;
        padding: 17mm 20mm 16mm;
        box-shadow: none;
        zoom: 1;
    }
    .kertas a { color: #000; text-decoration: none; }
    .kertas .baris-data, .kertas .ttd { break-inside: avoid; page-break-inside: avoid; }
}