:root{--bg:#020409;--ink:#F3F7FF;--muted:#B4C3DC;--blue:#0E8EE6;--f:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
html{scroll-behavior:smooth;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f);color:var(--ink);background:var(--bg);line-height:1.5;font-size:16px}
:focus-visible{outline:3px solid #fff;outline-offset:3px}
img{display:block;max-width:100%}

/* ---------- bar atas (transparan, menyatu dengan latar) ---------- */
.top{display:flex;align-items:center;gap:10px;padding:10px 18px;background:linear-gradient(to bottom,rgba(2,4,9,.78),rgba(2,4,9,0));position:absolute;top:0;left:0;right:0;z-index:5;font-size:11px;font-style:italic;font-weight:600;line-height:1.2;color:#E7F0FF;text-decoration:none}
.top img{flex:none;height:38px;width:auto;max-width:none;object-fit:contain;background:none;border-radius:0;padding:0}
.top em{margin-left:auto;font-style:normal;font-weight:400;color:#B9D0EE;white-space:nowrap}

/* ---------- bagian halaman ---------- */
.band{position:relative;overflow:hidden;padding:56px 22px}
.in{position:relative;z-index:1;max-width:1040px;margin:0 auto}
.hero{padding:0 22px}
.hero::after{content:"";position:absolute;left:-52%;top:-30%;width:112%;aspect-ratio:1;border:1.5px solid rgba(255,255,255,.3);border-radius:50%;pointer-events:none}
.hero .in{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:center;min-height:440px;padding:46px 0}
.hero h1{font-weight:300;font-size:clamp(24px,5.2vw,56px);line-height:1.08;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.hero h1 b{display:block;font-weight:700}
.hero .photo{border:3px solid rgba(255,255,255,.9);border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.5);aspect-ratio:2/3;object-fit:cover;width:100%;max-width:300px;justify-self:center}

/* latar halaman Layanan Lainnya (satu bagian) */
.sec1{background:
  radial-gradient(60% 55% at 50% 38%,rgba(14,142,230,.55),transparent 70%),
  radial-gradient(45% 60% at 0% 60%,rgba(106,180,45,.55),transparent 70%),
  radial-gradient(45% 60% at 100% 75%,rgba(232,130,30,.5),transparent 70%),#03070D}

.page{min-height:100vh;padding-top:52px;display:flex;align-items:center}
.page .in{width:100%}
.h2{text-align:center;font-weight:300;font-size:clamp(28px,5vw,44px);letter-spacing:-.02em;margin-bottom:34px;line-height:1.15}
.h2 b{font-weight:700}
.h2.sm{font-size:clamp(20px,3.6vw,28px);margin-bottom:22px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:18px}
.crumb.center{text-align:center}
.crumb a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* latar menyatu untuk seluruh beranda (tanpa batas antarbagian) */
.slide{position:relative;overflow:hidden;padding-top:52px;background:
 linear-gradient(to bottom,transparent calc(100% - 240px),#020409),
 radial-gradient(min(900px,110vw) min(700px,86vw) at 0% 7%,rgba(14,142,230,.9),transparent 70%),
 radial-gradient(min(700px,86vw) min(520px,64vw) at 100% 2%,rgba(106,180,45,.8),transparent 70%),
 radial-gradient(min(900px,110vw) min(640px,78vw) at 85% 24%,rgba(232,130,30,.7),transparent 70%),
 radial-gradient(min(800px,98vw) min(700px,86vw) at 50% 46%,rgba(14,142,230,.5),transparent 70%),
 radial-gradient(min(600px,73vw) min(600px,73vw) at 0% 60%,rgba(106,180,45,.45),transparent 70%),
 radial-gradient(min(800px,98vw) min(600px,73vw) at 100% 68%,rgba(232,130,30,.45),transparent 70%),
 radial-gradient(min(900px,110vw) min(600px,73vw) at 0% 84%,rgba(14,142,230,.45),transparent 70%),#020409}
.slide .band{background:none;overflow:visible}

/* logo Pelayanan Statistik Terpadu */
.pst{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:100%;margin:0 auto 14px;padding:8px 20px 8px 14px;border-radius:999px;background:rgba(2,28,48,.72);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pst img{flex:none;height:44px;width:auto;max-width:none;object-fit:contain;background:none;border-radius:0;padding:0}
.pst span{font-size:11px;font-weight:600;letter-spacing:.14em;line-height:1.25;text-align:left;color:#fff}

/* ---------- kartu kaca ---------- */
.glass{background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.34);border-radius:26px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 40px rgba(0,0,0,.35)}
.picks{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));max-width:900px;margin:0 auto}
.picks.two,.picks.tri{grid-template-columns:1fr 1fr;max-width:620px;gap:16px}
.picks.tri .pick:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 8px)}
.pick{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 14px 22px;color:inherit;text-decoration:none;transition:transform .2s,border-color .2s}
.pick:hover,.pick:focus-visible{transform:translateY(-4px);border-color:#fff}
.pick .t{font-weight:300;font-size:clamp(24px,4.4vw,34px);line-height:1.05;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.pick .t b{display:block;font-weight:700}
.badge{width:96px;height:96px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:18px 0 14px;overflow:hidden;color:#0A58A8}
.badge img{width:100%;height:100%;object-fit:contain;padding:10px}
.badge svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pick small{font-size:13px;line-height:1.3;color:#EAF1FF;font-weight:600}
.pick small span{display:block;font-weight:400}

/* ---------- petugas ---------- */
.staff{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:900px;margin:0 auto}
.s{display:flex;align-items:center;gap:16px;padding:18px}
.s img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6);flex:none}
.s strong{display:block;font-size:20px;font-weight:600}
.s span{display:block;font-size:14px;color:var(--muted);line-height:1.3}

.foot{padding:18px;text-align:center;font-size:12px;color:#7E8DA8}

/* ---------- HP ---------- */
@media(max-width:520px){
  .picks.two,.picks.tri{gap:12px}
  .picks.tri .pick:last-child{width:calc(50% - 6px)}
  .badge{width:80px;height:80px}
  .band{padding:44px 16px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- KOMPUTER ---------- */
@media(min-width:900px){
  .top{padding:12px 48px;font-size:12px}
  .top img{width:46px;height:46px}
  .band{padding:90px 48px}
  .in{max-width:1200px}
  .hero{padding:0 48px}
  .hero::after{left:-22%;top:-20%;width:62%}
  .hero .in{grid-template-columns:1.3fr .7fr;gap:56px;min-height:calc(100vh - 52px);padding:56px 0}
  .hero h1{font-size:clamp(44px,5vw,76px)}
  .hero .photo{max-width:380px}
  .h2{font-size:clamp(38px,3.4vw,52px);margin-bottom:48px}
  .h2.sm{font-size:clamp(24px,2.2vw,32px);margin-bottom:36px}
  .pst{margin-bottom:20px;padding:10px 24px 10px 16px}
  .pst img{height:54px;width:54px;min-width:54px}
  .pst span{font-size:12.5px}
  .picks.tri{grid-template-columns:repeat(3,1fr);max-width:1040px;gap:28px}
  .picks.tri .pick:last-child{grid-column:auto;width:auto;justify-self:stretch}
  .picks.two{max-width:820px;gap:28px}
  .pick{padding:38px 24px 34px;border-radius:32px}
  .pick .t{font-size:clamp(32px,3vw,42px)}
  .badge{width:128px;height:128px;margin:24px 0 20px}
  .badge svg{width:56px;height:56px}
  .pick small{font-size:16px}
  .staff{max-width:1100px;grid-template-columns:repeat(3,1fr);gap:24px}
  .s{padding:24px 26px;gap:20px;border-radius:30px}
  .s img{width:104px;height:104px}
  .s strong{font-size:24px}
  .s span{font-size:16px}
  .foot{padding:26px;font-size:13px}
}
/* ---------- petugas: foto keluar dari kartu ---------- */
.staff.pcs{padding-top:70px;gap:90px 18px;grid-template-columns:1fr;max-width:520px}
.pc{position:relative;display:block;min-height:220px;padding:0}
.pc .nm{position:absolute;left:24px;top:20px;font-size:20px;font-weight:400}
.pc .tg{position:absolute;left:22px;bottom:34px;max-width:52%;font-size:22px;font-weight:300;line-height:1.05;z-index:2}
.pc .tg b{display:block;font-weight:700}
.pc img{position:absolute;right:0;bottom:0;height:calc(100% + 70px);width:auto;max-width:62%;object-fit:contain;object-position:right bottom;border:0;border-radius:0}
.pc::after{content:"";position:absolute;left:34%;right:8%;bottom:8px;height:8px;border-radius:999px;background:#fff}

/* foto biasa (.jpg): mengisi sisi kanan kartu, tidak bulat */
.pc.jpg img{top:0;right:0;bottom:0;height:100%;width:50%;max-width:none;object-fit:cover;object-position:center top;border-radius:0 26px 26px 0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%);mask-image:linear-gradient(to right,transparent 0,#000 38%)}

@media(min-width:760px){
  .staff.pcs{grid-template-columns:repeat(2,1fr);max-width:980px;gap:100px 32px;padding-top:90px}
  .pc{min-height:320px}
  .pc .nm{font-size:26px;left:30px;top:26px}
  .pc .tg{font-size:26px;left:28px;bottom:42px}
  .pc img{height:calc(100% + 90px)}
}
/* ================= NOMOR ANTRIAN, TIKET, POP-UP, HALAMAN PETUGAS (sama seperti artefak) ================= */
.lead{color:var(--muted);margin:6px 0 24px;font-size:15px}
.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:26px}.actions.left{justify-content:flex-start}
.btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:600;font-size:16px;background:linear-gradient(135deg,#1AA0F5,#0A64C2);color:#fff;border:0;padding:13px 28px;border-radius:999px;cursor:pointer;box-shadow:0 8px 24px rgba(14,142,230,.35);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);box-shadow:none}
.ticket{overflow:hidden;max-width:600px;margin:0 auto}
.th{padding:22px 26px 26px;background:linear-gradient(120deg,rgba(14,142,230,.65),rgba(10,40,90,.6));border-bottom:2px dashed rgba(255,255,255,.4);position:relative}
.th::before,.th::after{content:"";position:absolute;bottom:-12px;width:22px;height:22px;border-radius:50%;background:#030710;border:1px solid rgba(255,255,255,.34);z-index:1}
.th::before{left:-12px}.th::after{right:-12px}
.th span{font-size:13px;color:#D3E5FF}.th strong{display:block;font-size:38px;font-weight:700;letter-spacing:.03em}
.ticket dl{padding:10px 26px 4px}
.ticket dl div{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.ticket dl div:last-child{border:0}
.ticket dt{color:var(--muted);font-size:14px}.ticket dd{font-weight:600;overflow-wrap:anywhere}
.tf{padding:14px 26px 22px;border-top:1px solid rgba(255,255,255,.14)}.tf svg{display:block;width:100%;height:34px}
/* nomor antrian */
.queue{max-width:1040px;margin:0 auto 44px;padding:24px 26px;display:grid;grid-template-columns:1fr;gap:20px}
.qmain{display:flex;align-items:center;gap:20px}
.qico{flex:none;width:84px;height:84px;border-radius:50%;background:#E8821E;display:grid;place-items:center;box-shadow:0 10px 26px rgba(232,130,30,.45)}
.qico svg{width:42px;height:42px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qmain small,.qitem small{display:block;font-size:15px;color:#DCE8FA}
.qmain strong{display:block;font-size:clamp(56px,13vw,92px);font-weight:700;line-height:1;letter-spacing:.01em}
.qside{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qitem{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(0,0,0,.25)}
.qitem svg{width:30px;height:30px;flex:none;fill:none;stroke:#F2992E;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qitem b{font-size:clamp(16px,3.6vw,21px);font-weight:700;line-height:1.2}
.qfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);font-size:14px;color:#DCE8FA}
.qfoot .btn{padding:13px 26px;font-size:16px}
@media(min-width:900px){
.queue{grid-template-columns:1.1fr 1fr;align-items:center;padding:30px 40px;gap:20px 40px}
.qico{width:104px;height:104px}.qico svg{width:52px;height:52px}
.qside{grid-template-columns:1fr;gap:12px}
.qfoot{grid-column:1/-1}
}
.qm{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.qm.open{display:flex}
.qm .box{width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:26px;background:linear-gradient(150deg,rgba(40,70,130,.95),rgba(8,16,36,.97))}
.qm h3{font-size:24px;font-weight:600;margin-bottom:4px}.qm h3 b{font-weight:700}

.tbwrap{max-width:1040px;margin:0 auto;overflow-x:auto;padding:6px 10px}
.tbl{width:100%;border-collapse:collapse;min-width:620px;font-size:15px}
.tbl th{text-align:left;font-weight:600;padding:12px 14px;background:rgba(255,255,255,.1);color:#fff;white-space:nowrap}
.tbl th:first-child{border-radius:12px 0 0 12px}.tbl th:last-child{border-radius:0 12px 12px 0}
.tbl td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.12);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td.empty{text-align:center;color:#B4C3DC;padding:26px}
.st{display:inline-block;padding:3px 14px;border-radius:999px;font-size:13px;font-weight:600;border:1.5px solid;white-space:nowrap}
.st.w{color:#F2992E;border-color:#C2691C;background:rgba(232,130,30,.15)}
.st.c{color:#fff;background:#1AA0F5;border-color:#1AA0F5}
.st.d{color:#fff;background:#2E9E4F;border-color:#2E9E4F}
.sb{font:inherit;font-weight:600;font-size:13px;color:#fff;border:0;border-radius:10px;padding:6px 12px;cursor:pointer;margin:2px 6px 2px 0}
.sb.b{background:#1AA0F5}.sb.g{background:#2E9E4F}.sb.r{background:#E5484D}.sb.x{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35)}
.afil{display:flex;align-items:center;gap:12px;margin:6px 0 16px}.afil label{margin:0}.afil input{width:auto}
.sumrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.sumrow span{padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.1);font-size:14px}
.page.adm{align-items:flex-start}.adm .in{max-width:1180px}
.dl{display:grid;grid-template-columns:130px 1fr;gap:10px 14px;margin:14px 0 18px}.dl dt{color:#B4C3DC}.dl dd{font-weight:600;overflow-wrap:anywhere}
.dacts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dacts .sb{padding:14px 8px;font-size:15px;margin:0;border-radius:14px}
.dacts+.sb{width:100%;margin:10px 0 0;padding:12px}

.ptg{display:inline-flex;align-items:center;gap:7px;margin-left:14px;padding:7px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);font-style:normal;font-weight:600;font-size:clamp(12px,1.1vw,14px);cursor:pointer;white-space:nowrap;color:#fff;text-decoration:none}
.ptg svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.myq{display:flex;justify-content:center;margin:-8px 0 20px}
.myq span{display:inline-block;padding:8px 20px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);font-size:15px}
.myq b{font-size:19px;margin-left:6px}.myq .warn{color:#F2992E;font-size:14px}
.th.big strong{font-size:clamp(70px,18vw,110px);line-height:1.05}
.qwrap{width:100%;max-width:480px;max-height:94vh;overflow:auto}
.qc{text-align:center;margin:14px 0 0}
#pilih{scroll-margin-top:70px}

/* ===== tambahan: bar atas (tombol Petugas) ===== */
.top .brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.top em{margin-left:auto}
@media(max-width:520px){.top em{display:none}.ptg{margin-left:auto}.actions{flex-direction:column-reverse}}
.dacts form{display:contents}
.tbl td a.qdetail{cursor:pointer;text-decoration:underline;font-weight:700;color:#fff}
.afil input{font:inherit;font-size:16px;color:var(--ink);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.3);border-radius:14px;padding:10px 14px;color-scheme:dark}
.afil label{display:block;font-size:14px;font-weight:600;margin:0}