/* =====================================================================
   PORTAL SISTEM ANTREAN — tata letak tengah dengan latar gradasi
   ===================================================================== */

:root {
    --bg-0:        #030b18;
    --bg-1:        #071b36;
    --bg-2:        #0b2c55;

    --kartu:       rgba(255, 255, 255, .045);
    --kartu-hover: rgba(255, 255, 255, .085);
    --garis:       rgba(255, 255, 255, .10);

    --emas:        #d4af37;
    --emas-terang: #f7d566;

    --teks:        #eef4ff;
    --teks-dim:    #a9bcd6;
    --teks-redup:  #6f88a8;

    --biru:        #38bdf8;
    --hijau:       #34d399;
}

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

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--teks);
    min-height: 100vh;
    padding: 40px 22px 48px;
    background:
        radial-gradient(1100px 620px at 15% -6%, rgba(56, 189, 248, .17), transparent 60%),
        radial-gradient(950px 560px at 88% 6%,   rgba(212, 175, 55, .13), transparent 62%),
        linear-gradient(165deg, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
    background-attachment: fixed;
}

.wadah {
    max-width: 1080px;
    margin: 0 auto;
}

/* =====================================================================
   KEPALA
   ===================================================================== */

.kepala {
    text-align: center;
    margin-bottom: 34px;
}

.lambang {
    /* Logo sudah berlatar biru tua sendiri, tidak dibungkus lingkaran emas */
    width: 96px;
    height: 96px;
    object-fit: contain;
    display: block;
    margin: 0 auto 16px;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .6));
}

.kepala h1 {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: .6px;
}

.kepala p {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--emas-terang);
    margin-top: 8px;
}

/* =====================================================================
   STATISTIK
   ===================================================================== */

.stat-baris {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.stat-kotak {
    background: var(--kartu);
    border: 1px solid var(--garis);
    border-radius: 15px;
    padding: 16px 18px;
    backdrop-filter: blur(6px);
}

.stat-kotak .angka {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat-kotak .label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--teks-redup);
    margin-top: 4px;
}

.stat-kotak.menunggu .angka { color: var(--emas-terang); }
.stat-kotak.selesai  .angka { color: var(--hijau); }
.stat-kotak.alamat   .angka { font-size: 16px; color: var(--biru); font-weight: 700; }

/* =====================================================================
   KARTU JARINGAN
   ===================================================================== */

.kartu-lan {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 17px 21px;
    margin-bottom: 30px;
    border-radius: 15px;
    background: linear-gradient(100deg, rgba(56, 189, 248, .14), rgba(56, 189, 248, .04));
    border: 1px solid rgba(56, 189, 248, .3);
}

.kartu-lan .ikon { font-size: 25px; }
.kartu-lan .isi  { flex: 1; min-width: 220px; }
.kartu-lan h3    { font-size: 14px; font-weight: 700; }
.kartu-lan p     { font-size: 12.5px; color: #9fd0f0; margin-top: 3px; }

.lan-tautan {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(56, 189, 248, .32);
    font-family: 'Consolas', monospace;
    font-size: 13.5px;
    color: var(--emas-terang);
}

.btn-salin {
    background: rgba(56, 189, 248, .18);
    color: var(--biru);
    border: none;
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.btn-salin:hover { background: var(--biru); color: #04121f; }

/* =====================================================================
   KARTU LOKET
   ===================================================================== */

.judul-seksi {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--teks-redup);
    margin-bottom: 15px;
}

.judul-seksi::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--garis);
}

.grid-loket {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 18px;
}

.kartu-loket {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px;
    border-radius: 18px;
    text-decoration: none;
    color: var(--teks);
    background: var(--kartu);
    border: 1px solid var(--garis);
    overflow: hidden;
    transition: transform .18s, border-color .18s, background .18s;
}

.kartu-loket::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--biru), var(--emas));
    opacity: .55;
    transition: opacity .18s;
}

.kartu-loket:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, .5);
    background: var(--kartu-hover);
}

.kartu-loket:hover::before { opacity: 1; }

.kl-no {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--emas-terang);
    font-variant-numeric: tabular-nums;
}

.kl-nama { font-size: 16px; font-weight: 700; margin-top: 10px; }

.kl-akun {
    font-size: 11.5px;
    color: var(--teks-redup);
    margin-top: 4px;
    font-family: 'Consolas', monospace;
}

.kl-ket {
    font-size: 12.5px;
    color: var(--teks-dim);
    line-height: 1.55;
    margin: 13px 0 18px;
}

.kl-btn {
    margin-top: auto;
    text-align: center;
    padding: 11px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    background: rgba(56, 189, 248, .16);
    color: var(--biru);
    border: 1px solid rgba(56, 189, 248, .28);
    transition: background .18s, color .18s;
}

.kartu-loket:hover .kl-btn {
    background: linear-gradient(135deg, var(--emas-terang), var(--emas));
    color: #04121f;
    border-color: transparent;
}

/* =====================================================================
   LAYAR SEMPIT
   ===================================================================== */

@media (max-width: 620px) {
    body { padding: 28px 16px 36px; }

    .lambang  { width: 76px; height: 76px; }
    .kepala h1 { font-size: 21px; }
}