/* Panel LajuPay — identitas lajupay.id: judul Figtree 700, isi Plus Jakarta Sans, angka PJS ExtraBold tabular.
   Huruf di-host sendiri (OFL), tanpa pihak ketiga. Jingga hanya untuk aksi utama. */
@font-face{font-family:"Figtree";font-weight:700;font-display:swap;src:url(huruf/figtree-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-display:swap;src:url(huruf/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-display:swap;src:url(huruf/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url(huruf/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-display:swap;src:url(huruf/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}

:root{
  --laut:#0B4F5C;--laut-tua:#083D47;--muda:#9FD3E0;--jingga:#C2410C;--jingga-tua:#A3370A;
  --latar:#F5F8F7;--kartu:#FFFFFF;--tinta:#17262B;--redup:#52646A;--garis:#D7E0E0;--sorot:#EEF5F6;
  --ok:#1F7A4D;--ok-bg:#E3F3EA;--tunggu:#8A5A00;--tunggu-bg:#FDF1D6;--lewat:#56636B;--lewat-bg:#ECEFF1;
  --gagal:#B3261E;--gagal-bg:#FBE4E2;--pita:#F2C230;
  --judul:"Figtree",system-ui,sans-serif;--huruf:"Plus Jakarta Sans",system-ui,sans-serif;
  color-scheme:light;             /* selalu terang (Pak Deny 8 Okt 2026 04.10) */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--latar);color:var(--tinta);font:400 15px/1.55 var(--huruf)}
a{color:var(--laut)}
:focus-visible{outline:3px solid var(--muda);outline-offset:2px}
h1,h2{font-family:var(--judul);font-weight:700;letter-spacing:normal;margin:0}
h1{font-size:clamp(1.45rem,3.2vw,1.85rem);line-height:1.15}
h2{font-size:1.15rem;line-height:1.25}
.angka,.uang{font-variant-numeric:tabular-nums}
.uang{font-weight:700;white-space:nowrap}
.uang .rp{font-size:.72em;font-weight:700;margin-right:.15em;vertical-align:.35em;color:var(--redup)}

/* pita sandbox — sama dengan pita tinjauan lajupay.id */
.pita{background:repeating-linear-gradient(-45deg,var(--pita) 0 14px,#E9B820 14px 28px);color:#17262B;text-align:center;font-size:.8125rem;font-weight:600;padding:5px 16px}

/* kepala */
.kepala{background:var(--laut);color:#fff}
.kepala .isi{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;min-height:60px}
.merek{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex-shrink:0}
.merek img{display:block;height:30px;width:auto}
.merek span{font:600 .75rem/1 var(--huruf);color:var(--muda);border-left:1px solid rgba(255,255,255,.25);padding-left:10px}
.nav{display:flex;gap:4px;flex:1;min-width:0}
.nav a{color:#D6E9ED;text-decoration:none;font-weight:600;font-size:.9375rem;padding:18px 10px 16px;border-bottom:3px solid transparent;white-space:nowrap}
.nav a:hover{color:#fff}
.nav a[aria-current=page]{color:#fff;border-bottom-color:var(--muda)}
.kepala form{margin:0 0 0 auto}
.tombol-keluar{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;padding:7px 14px;border-radius:8px;font:600 .875rem var(--huruf);cursor:pointer}
.tombol-keluar:hover{background:rgba(255,255,255,.1)}
@media (max-width:639px){
  .kepala .isi{padding-top:10px;gap:0 12px}
  .nav{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 6px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:12px 10px 10px}
  .merek span{display:none}
}

/* kerangka */
main{max-width:1180px;margin:0 auto;padding:20px 16px 48px}
.kepala-hal{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 16px}
.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:12px;padding:18px;margin-bottom:16px}
.kartu > h2{margin-bottom:12px}
.redup{color:var(--redup)}
.kecil{font-size:.8125rem}
.kembali{display:inline-block;margin:0 0 10px;font-weight:600;font-size:.875rem;text-decoration:none}
.kembali:hover{text-decoration:underline}

/* pesan */
.pesan{padding:11px 14px;border-radius:10px;margin-bottom:16px;background:var(--ok-bg);color:var(--ok);font-weight:600;border:1px solid currentColor}
.pesan.galat{background:var(--gagal-bg);color:var(--gagal)}

/* status */
.status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:99px;font:700 .72rem/1.4 var(--huruf);letter-spacing:.03em;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-LUNAS{color:var(--ok);background:var(--ok-bg)}
.s-MENUNGGU{color:var(--tunggu);background:var(--tunggu-bg)}
.s-KEDALUWARSA{color:var(--lewat);background:var(--lewat-bg)}
.s-GAGAL,.s-BATAL{color:var(--gagal);background:var(--gagal-bg)}
.tanda-uji{display:inline-block;font:700 .68rem/1.4 var(--huruf);padding:1px 6px;border-radius:4px;background:var(--pita);color:#17262B;vertical-align:.1em}

/* ringkasan per status */
.ringkas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
.ringkas a{display:block;background:var(--kartu);border:1px solid var(--garis);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--tinta)}
.ringkas a:hover{border-color:var(--laut)}
.ringkas a[aria-current=true]{border-color:var(--laut);box-shadow:inset 0 0 0 1px var(--laut)}
.ringkas .n{display:block;font:800 1.9rem/1.1 var(--huruf);font-variant-numeric:tabular-nums;margin:10px 0 2px}
.ringkas .uang{font-weight:600;color:var(--redup);font-size:.875rem}
@media (max-width:899px){.ringkas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:519px){.ringkas{grid-template-columns:repeat(2,minmax(0,1fr))}.ringkas .n{font-size:1.5rem}}

/* formulir */
.baris{display:flex;gap:10px 12px;flex-wrap:wrap;align-items:flex-end}
label{display:flex;flex-direction:column;gap:4px;font-size:.8125rem;font-weight:600;color:var(--redup)}
input,select{font:400 .9375rem var(--huruf);color:var(--tinta);background:var(--kartu);border:1px solid var(--garis);border-radius:8px;padding:8px 11px;min-height:40px;width:100%}
input:focus,select:focus{border-color:var(--laut);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--muda) 55%,transparent)}
.baris label{flex:1 1 150px;min-width:0}
.baris label.lebar{flex:2 1 220px}
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 16px;border-radius:8px;font:700 .9375rem var(--huruf);cursor:pointer;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.tombol-utama{background:var(--jingga);color:#fff}
.tombol-utama:hover{background:var(--jingga-tua)}
.tombol-kedua{background:var(--kartu);color:var(--laut);border-color:var(--laut)}
.tombol-kedua:hover{background:var(--sorot)}
.alat{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* tabel → kartu di bawah 640px */
.tabel{width:100%;border-collapse:collapse}
.tabel th{font:600 .75rem var(--huruf);color:var(--redup);text-align:left;padding:10px 12px;border-bottom:1px solid var(--garis);white-space:nowrap}
.tabel td{padding:12px;border-bottom:1px solid var(--garis);vertical-align:top}
.tabel tbody tr:last-child td{border-bottom:0}
.tabel tbody tr:hover td{background:var(--sorot)}
.tabel .kanan{text-align:right}
.tabel .kode{font-weight:700;font-variant-numeric:tabular-nums;text-decoration:none}
.tabel .kode:hover{text-decoration:underline}
.tabel .kosong{text-align:center;color:var(--redup);padding:28px 12px}
.kartu.tabel-wadah{padding:0;overflow:hidden}
.kartu.tabel-wadah .saring{padding:16px 18px;border-bottom:1px solid var(--garis)}
.gulir{overflow-x:auto}
@media (max-width:639px){
  .tabel thead{display:none}
  .tabel,.tabel tbody,.tabel tr,.tabel td{display:block;width:100%}
  .tabel tr{padding:12px 16px;border-bottom:1px solid var(--garis)}
  .tabel tbody tr:last-child{border-bottom:0}
  .tabel tbody tr:hover td{background:none}
  .tabel td{border:0;padding:3px 0;display:flex;gap:12px;justify-content:space-between;text-align:right}
  .tabel td::before{content:attr(data-label);font-size:.8125rem;color:var(--redup);text-align:left;flex-shrink:0}
  .tabel td.utama{justify-content:space-between;align-items:center;padding-bottom:6px}
  .tabel td.utama::before{display:none}
  .tabel td.utama{text-align:left}
  .tabel .kanan{text-align:right}
  .tabel td.panjang{display:block;text-align:left}
  .tabel td.panjang::before{display:block;margin-bottom:2px}
  .tabel .kosong{display:block}
}

/* halaman */
.halaman{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--garis);font-size:.875rem}
.halaman .alat a,.halaman .alat span{min-height:36px;padding:6px 14px;font-size:.875rem}
.halaman span.tombol{color:var(--redup);border-color:var(--garis);cursor:default}

/* detail */
.detail-kepala{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 24px}
.detail-kepala h1{font-family:var(--huruf);font-weight:800;font-variant-numeric:tabular-nums;font-size:clamp(1.2rem,3vw,1.5rem);word-break:break-all}
.detail-kepala .tanda{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.jumlah-besar{font:800 clamp(1.7rem,4.5vw,2.2rem)/1 var(--huruf);font-variant-numeric:tabular-nums;white-space:nowrap}
.jumlah-besar .rp{font-size:.5em;vertical-align:.7em;margin-right:.15em;color:var(--redup)}
.fakta{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:18px 0 0;border-top:1px solid var(--garis)}
.fakta div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px;padding:10px 0;border-bottom:1px solid var(--garis)}
.fakta dt{color:var(--redup);font-size:.875rem}
.fakta dd{margin:0;overflow-wrap:anywhere}
@media (min-width:900px){.fakta{grid-template-columns:1fr 1fr;column-gap:32px}}
@media (max-width:519px){.fakta div{grid-template-columns:minmax(0,1fr)}}
.detail-alat{margin-top:16px}

/* log */
details summary{cursor:pointer;color:var(--laut);font-weight:600;font-size:.8125rem;margin-top:4px}
pre{white-space:pre-wrap;word-break:break-all;font-size:.75rem;line-height:1.5;background:var(--latar);border:1px solid var(--garis);padding:10px;border-radius:8px;margin:6px 0 0;text-align:left}
.ttd-ok{color:var(--ok);font-weight:700}.ttd-tidak{color:var(--gagal);font-weight:700}
.arah{display:inline-block;font:700 .7rem/1.4 var(--huruf);padding:1px 7px;border-radius:4px;background:var(--sorot);color:var(--redup)}

/* kesehatan */
.cek{list-style:none;margin:0;padding:0}
.cek li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--garis)}
.cek li:last-child{border-bottom:0}
.cek b{display:block}
.cek .ket{grid-column:2;color:var(--redup);font-size:.875rem;overflow-wrap:anywhere}
.lampu{display:inline-flex;align-items:center;gap:6px;font:700 .72rem/1.4 var(--huruf);padding:3px 10px 3px 8px;border-radius:99px;white-space:nowrap}
.lampu::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.lampu.ok{color:var(--ok);background:var(--ok-bg)}.lampu.masalah{color:var(--gagal);background:var(--gagal-bg)}

/* masuk */
.hal-masuk{min-height:100vh;display:flex;flex-direction:column}
.hal-masuk main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;padding:8px 16px 48px}
.kotak-masuk{width:100%;max-width:400px;background:var(--kartu);border:1px solid var(--garis);border-radius:16px;padding:28px 24px;box-shadow:0 12px 32px -18px rgba(11,79,92,.35)}
.kotak-masuk .logo{display:block;height:40px;width:auto;margin:0 0 22px}
.kotak-masuk h1{margin-bottom:4px}
.kotak-masuk p{margin:0 0 20px}
.kotak-masuk form{display:flex;flex-direction:column;gap:14px}
.kotak-masuk .tombol{width:100%;min-height:44px;margin-top:4px}
.kotak-masuk .pesan{margin:0}

/* yang tampil hanya di ponsel / hanya di layar lebar (kolom status & arah pindah ke baris utama kartu) */
.status.hanya-ponsel,.arah.hanya-ponsel{display:none}
@media (max-width:639px){.status.hanya-ponsel,.arah.hanya-ponsel{display:inline-flex}.tabel td.hanya-layar{display:none}}
.blok{display:block}
.sel{min-width:0;overflow-wrap:anywhere}

/* /masuk berlatar foto (Pulau Padar — Jakub Hałun, CC BY 4.0; kredit di halaman). Lapisan laut supaya kartu terbaca. */
.hal-masuk{position:relative;background:linear-gradient(180deg,rgba(8,61,71,.55),rgba(8,61,71,.78)),url(latar-masuk.webp) center 40%/cover no-repeat var(--laut-tua)}
@media (max-width:640px){.hal-masuk{background-image:linear-gradient(180deg,rgba(8,61,71,.55),rgba(8,61,71,.78)),url(latar-masuk-800.webp)}}
.hal-masuk .kotak-masuk{border-color:transparent;box-shadow:0 24px 60px -20px rgba(0,0,0,.55)}
.kredit-latar{position:absolute;right:12px;bottom:8px;left:12px;margin:0;text-align:right;font-size:.6875rem;color:rgba(255,255,255,.75)}
.kredit-latar a{color:inherit}
/* /masuk: kembali ke situs + Powered by DOKU (Pak Deny 8 Okt 2026 04.09). Logo DOKU = berkas resmi, tidak diubah. */
/* tombol kembali di luar kartu, pola halaman masuk DESTARA (Pak Deny 8 Okt 2026 04.14) */
.atas{display:flex;align-items:center;padding:16px}
@media (min-width:768px){.atas{padding:24px 32px}}
.atas .kembali{display:inline-flex;margin:0;align-items:center;gap:8px;min-height:44px;padding:8px 16px 8px 12px;border-radius:9999px;color:#fff;font-weight:700;font-size:.875rem;text-decoration:none;
  background:color-mix(in srgb,var(--laut-tua) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 28%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.atas .kembali:hover{background:color-mix(in srgb,var(--laut-tua) 70%,transparent)}
.atas .kembali:focus-visible{outline-color:#fff}
.atas .kembali svg{width:18px;height:18px;flex:none}
.didukung{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 14px;border-radius:10px;background:var(--kartu);font-size:.75rem;color:var(--redup);text-decoration:none}
.didukung img{display:block;height:36px;width:auto}
/* isian sandi dengan ikon mata (Pak Deny 8 Okt 2026 04.16) */
.kolom-isian{display:flex;flex-direction:column;gap:4px}
.kolom-isian label{display:block}
.sandi{position:relative;display:block}
.sandi input{padding-right:48px}
.lihat-sandi{position:absolute;top:0;right:0;bottom:0;width:44px;display:flex;align-items:center;justify-content:center;padding:0;background:none;border:0;border-radius:0 8px 8px 0;color:var(--redup);cursor:pointer}
.lihat-sandi[hidden]{display:none}
.lihat-sandi:hover{color:var(--laut)}
.lihat-sandi:focus-visible{outline:2px solid var(--laut);outline-offset:-4px}
.lihat-sandi svg{width:20px;height:20px}
.lihat-sandi .ikon-tutup,.lihat-sandi[aria-pressed="true"] .ikon-buka{display:none}
.lihat-sandi[aria-pressed="true"] .ikon-tutup{display:block}