*{box-sizing:border-box} :root{--navy:#102640;--blue:#1762dc;--muted:#6d7c91;--line:#e3e9f1}body{margin:0;background:#f5f7fb;color:var(--navy);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.6}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{transition:background .18s,transform .18s}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible{outline:3px solid #72a8fc;outline-offset:4px}header{background:#0c213b;color:white;border-bottom:3px solid #d6ac60}.header-inner{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;min-height:94px;padding:16px 28px}.brand{display:flex;align-items:center;gap:14px}.brand img{width:57px;height:55px;object-fit:contain}.brand small{display:block;color:#d3b77d;font-size:10px;letter-spacing:2px;font-weight:700}.brand strong{display:block;font-size:19px;letter-spacing:-.4px}nav{display:flex;align-items:center;gap:28px;font-size:12px;font-weight:600}nav>a{color:#bdc9d8}nav>a:hover,nav>a.selected{color:white}.staff-link{border:1px solid #45556b;border-radius:7px;padding:9px 14px;color:white}.staff-link span{margin-left:14px}main{max-width:1200px;margin:auto;padding:0 28px 45px;min-height:calc(100vh - 169px)}.utility{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:11px;color:var(--muted)}.utility>span{display:flex;align-items:center;gap:8px}.dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#25a37d}.intro{text-align:center;padding:29px 0 41px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.8px;color:var(--blue)}h1{font-size:43px;line-height:1.2;letter-spacing:-1.5px;margin:17px 0}h1 span{color:var(--blue)}.intro p{color:var(--muted);font-size:14px;line-height:1.8;margin:17px 0 23px}.steps{display:flex;align-items:center;justify-content:center;gap:16px;font-size:11px;color:#61718a}.steps b{background:#e8edf5;color:#536b8c;width:23px;height:23px;border-radius:50%;display:inline-grid;place-items:center;margin-right:6px}.steps em{color:#c8d1df;font-style:normal}.section-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}.section-title h2{font-size:17px;margin:0}.section-title>span{font-size:11px;color:var(--muted)}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}.service{background:white;border:1px solid var(--line);border-radius:13px;padding:25px;box-shadow:0 5px 13px #17395c03;transition:transform .2s,box-shadow .2s}.service:hover{transform:translateY(-3px);box-shadow:0 10px 25px #17395c0c}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.prefix{display:grid;place-items:center;background:#eaf1ff;color:#2563db;font-size:27px;font-weight:750;border:1px solid #dfe9ff;width:56px;height:56px;border-radius:13px}.service-B .prefix{color:#188776;background:#e9f6f1;border-color:#d8eee7}.service-C .prefix{color:#8a5bc8;background:#f2ecfc;border-color:#e9dff9}.tag{font-size:9px;letter-spacing:1.2px;color:#8c99ac}.service h2{font-size:21px;letter-spacing:-.6px;margin:0 0 6px}.service p{color:var(--muted);font-size:12px;margin:0 0 27px;min-height:20px}.queue-meta{border-top:1px solid #eef1f6;padding:16px 0;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}.queue-meta .dot{background:#e3a344;margin-right:5px}.queue-meta strong{color:#465975;font-size:13px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:7px;padding:12px 17px;font-weight:600;font-size:12px;min-height:44px}.primary{background:var(--blue);color:#fff;border:1px solid var(--blue)}.primary:hover{background:#114fb7}.secondary{background:white;color:#314b70;border:1px solid #d5dfec}.secondary:hover{background:#edf3fc}.issue{width:100%;justify-content:space-between}.information{margin-top:23px;padding:19px 23px;display:flex;align-items:center;gap:16px;border:1px solid #dce7f7;background:#edf3fc;border-radius:9px}.info-icon{border:1.5px solid #5b82b6;color:#5b82b6;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;flex-shrink:0;font-weight:700;line-height:1}.information strong{font-size:12px;color:#395c8b}.information p{font-size:11px;color:#7284a1;margin:3px 0 0}.information a{white-space:nowrap;color:#3265a7;font-weight:600;font-size:11px;margin-left:auto}.feedback{margin-top:43px;display:flex;align-items:center;justify-content:space-between;padding:0 4px}.feedback .eyebrow{font-size:9px;color:#8a7350}.feedback h2{font-size:20px;margin:5px 0 2px;letter-spacing:-.5px}.feedback p{font-size:12px;color:var(--muted);margin:0}.feedback button{gap:20px}footer{border-top:1px solid var(--line);max-width:1144px;margin:auto;padding:24px 0;display:flex;justify-content:space-between;color:#8793a5;font-size:10px}.footer-dot{margin:0 10px;color:#c2cad6}dialog{border:1px solid var(--line);border-radius:16px;padding:34px;max-width:530px;width:calc(100% - 32px);color:var(--navy);box-shadow:0 20px 100px #071b3440}dialog::backdrop{background:#091a3b80;backdrop-filter:blur(3px)}.close{position:absolute;right:12px;top:8px;font-size:27px;border:0;background:none;color:#758399}.ratings{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:25px}.ratings button{border:1px solid var(--line);background:#f8fafc;padding:18px;border-radius:9px;color:var(--navy)}.ratings button:hover{border-color:var(--blue);background:#edf3ff}.ratings span{display:block;font-size:34px;margin-bottom:8px}#ticket-dialog{text-align:center}#ticket-number{display:block;font-size:76px;line-height:1.3;color:var(--blue);letter-spacing:-3px}#ticket-print h2{font-size:20px}#ticket-print>p{font-size:11px;color:var(--muted)}.ticket-note{padding:20px 0;margin:15px 0;border-top:1px dashed #a9b5c6;border-bottom:1px dashed #a9b5c6;font-size:12px}.muted{color:var(--muted);font-size:11px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;width:max-content;background:#102640;color:white;padding:14px 23px;border-radius:9px;box-shadow:0 8px 35px #10264030;z-index:10}.login-card{max-width:440px;margin:40px auto;padding:32px;background:white;border:1px solid var(--line);border-radius:14px}.login-card>.prefix{margin-bottom:25px}.login-card h1{font-size:29px;letter-spacing:-.8px}.login-card p{color:var(--muted)}label{display:block;font-size:12px;font-weight:600}input,select{width:100%;padding:12px;border:1px solid #d2dce9;border-radius:7px;background:white;color:var(--navy);margin:7px 0 18px}form>.primary{width:100%;margin-top:15px}form small{color:var(--muted)}.page-heading{display:flex;align-items:center;justify-content:space-between;margin:25px 0 30px}.page-heading h1{font-size:32px}.page-heading p{color:var(--muted)}.summary-grid,.counter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:25px}.summary,.counter-card{padding:24px;background:white;border:1px solid var(--line);border-radius:12px}.summary>span{display:block;color:var(--muted);font-size:12px}.summary>strong{display:block;font-size:32px}.summary small{color:var(--muted)}.operator{border:1px solid var(--line);background:white;padding:26px;border-radius:12px;margin-bottom:30px}.operator-settings{display:grid;grid-template-columns:1fr 1fr;gap:20px}.active-ticket{text-align:center;padding:20px}.active-ticket>span,.call-board>span{font-size:11px;letter-spacing:2px}.active-ticket>strong{display:block;font-size:65px;color:var(--blue)}.active-ticket p{color:var(--muted)}.operator-actions{display:flex;justify-content:center;gap:12px}.table-wrap{overflow:auto;background:white;border:1px solid var(--line);border-radius:10px}table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}th{background:#eef3fa;font-size:11px;color:#647894}td,th{padding:15px 20px;border-bottom:1px solid var(--line)}td{font-size:12px}.status-pill{background:#fff5e3;color:#a87b21;padding:4px 10px;border-radius:5px;font-size:10px}.empty{text-align:center;padding:36px;color:var(--muted)}.call-board{text-align:center;background:#102a4a;color:white;padding:40px;border-radius:16px;margin-bottom:25px}.call-board strong{display:block;font-size:110px;line-height:1.3;letter-spacing:-4px}.call-board>div{font-size:22px;color:#bcd6fa}.counter-card{text-align:center}.counter-card strong{display:block;font-size:40px;color:var(--blue)}.counter-card p{color:var(--muted);margin:5px 0}
@media(max-width:850px){nav{gap:12px}nav>a:first-child{display:none}.services{gap:12px}.service{padding:18px}.service h2{font-size:18px}.service p{min-height:38px}.information a{display:none}footer{margin:0 28px}.brand strong{font-size:16px}}
@media(max-width:620px){.header-inner{padding:15px 18px;min-height:80px}.brand{gap:9px}.brand img{width:39px;height:40px}.brand strong{font-size:13px}.brand small{font-size:8px}nav>a{display:none}.staff-link{display:block;padding:7px 9px;font-size:10px}.staff-link span{display:none}main{padding:0 18px 30px}.utility{font-size:9px;gap:12px}.intro{padding:22px 0 30px}h1{font-size:32px;letter-spacing:-1px}.intro p{font-size:12px}.steps{gap:7px;font-size:9px}.steps b{width:19px;height:19px;margin-right:3px}.services{grid-template-columns:1fr}.service{padding:22px}.card-top{margin-bottom:15px}.service h2{font-size:23px}.service p{min-height:0;margin-bottom:18px}.feedback{align-items:flex-start;gap:20px;flex-direction:column;margin-top:28px}.feedback button{width:100%}.information{padding:17px;align-items:flex-start}.section-title h2{font-size:15px}footer{margin:0 18px;gap:10px;flex-direction:column;font-size:9px}.page-heading{align-items:flex-start;gap:15px}.page-heading h1{font-size:27px}.page-heading button{font-size:10px}.summary-grid,.counter-grid{gap:9px}.summary,.counter-card{padding:15px 10px}.summary>span{font-size:10px}.summary>strong{font-size:26px}.counter-card strong{font-size:28px}.counter-card p{font-size:10px}.operator{padding:18px}.operator-actions{display:grid;grid-template-columns:1fr 1fr}.call-board strong{font-size:82px}.call-board{padding:30px 15px}.login-card{margin:20px auto;padding:24px}.desktop{display:none}}
.service-D .prefix{color:#ad7319;background:#fff5e3;border-color:#f8e8c7}.service-management{margin-top:35px}.service-form{display:grid;grid-template-columns:100px 1fr 1.5fr auto;gap:15px;align-items:center;background:white;border:1px solid var(--line);border-radius:12px;padding:20px}.service-form input{margin-bottom:0}.service-form>.primary{margin-top:25px}.service-form input[name=code]{text-transform:uppercase}.service-management td:last-child{white-space:normal;min-width:180px}@media(max-width:850px){.service-form{grid-template-columns:100px 1fr}.service-form>.primary{margin-top:24px}}@media(max-width:620px){.service-form{grid-template-columns:1fr}.service-form>.primary{margin-top:0}}

/* Halaman pengambilan antrean mengikuti tampilan referensi. */
body[data-page="home"]{background:#f2f6fb;color:#10233e;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5}
body[data-page="home"] header{background:#071a33;border:0}
body[data-page="home"] .header-inner{max-width:1320px;min-height:89px;padding:16px 12px}
body[data-page="home"] .brand{gap:16px}
body[data-page="home"] .brand img{width:52px;height:52px}
body[data-page="home"] .brand small{color:#0dcaf0;font-size:14px;letter-spacing:0;font-weight:700}
body[data-page="home"] .brand strong{font-size:24px;letter-spacing:0;font-weight:700}
body[data-page="home"] nav>a:not(.staff-link),body[data-page="home"] .staff-link span,body[data-page="home"] .utility{display:none}
body[data-page="home"] .staff-link{display:block;border:1px solid #f8f9fa;color:#f8f9fa;border-radius:12px;padding:5px 9px;font-size:14px;line-height:20px;font-weight:700}
body[data-page="home"] .staff-link:hover{background:#f8f9fa;color:#071a33}
body[data-page="home"] main{max-width:1320px;padding:48px 12px;min-height:0}
body[data-page="home"] .intro{padding:0;margin:0 0 48px}
body[data-page="home"] .intro .eyebrow{color:#0d6efd;font-size:14px;letter-spacing:0;font-weight:700}
body[data-page="home"] .intro h1{font-size:40px;line-height:1.2;letter-spacing:0;font-weight:700;margin:4px 0 8px}
body[data-page="home"] .intro p{color:#667991;font-size:16px;line-height:24px;margin:0}
body[data-page="home"] .services{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
body[data-page="home"] .service{flex:0 0 calc((100% - 48px)/3);min-width:0;display:flex;flex-direction:column;padding:24px;border:0;border-radius:22px;background:#fff;box-shadow:0 14px 35px #16365d18}
body[data-page="home"] .service:hover{transform:translateY(-4px)}
body[data-page="home"] .card-top{margin:0 0 24px}
body[data-page="home"] .service .prefix{width:60px;height:60px;background:#e7f2ff;color:#075dbc;border:0;border-radius:17px;font-size:25px;font-weight:900}
body[data-page="home"] .service h2{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:0;margin:0 0 8px;overflow-wrap:anywhere}
body[data-page="home"] .service p{flex:1;font-size:16px;color:#667991;line-height:24px;min-height:0;margin:0 0 16px;overflow-wrap:anywhere}
body[data-page="home"] .queue-meta{display:none}
body[data-page="home"] .issue{justify-content:center;background:#0d6efd;border:1px solid #0d6efd;border-radius:12px;min-height:48px;padding:8px 16px;font-size:20px;line-height:30px;font-weight:700}
body[data-page="home"] .issue:hover{background:#0b5ed7;border-color:#0a58ca}
body[data-page="home"] .feedback{display:flex;justify-content:center;align-items:center;margin:48px 0 0;padding:0}
body[data-page="home"] #open-survey{width:auto;background:transparent;border:1px solid #0d6efd;color:#0d6efd;border-radius:12px;padding:8px 24px;min-height:48px;font-size:20px;line-height:30px;font-weight:700}
body[data-page="home"] #open-survey:hover{background:#0d6efd;color:#fff}
body[data-page="home"] footer{display:block;max-width:none;border:0;margin:0;padding:24px 12px;text-align:center;color:#667991;font-size:16px}
body[data-page="home"] footer>span+span{display:none}
@media(max-width:1399px){body[data-page="home"] .header-inner,body[data-page="home"] main{max-width:1140px}}
@media(max-width:1199px){body[data-page="home"] .header-inner,body[data-page="home"] main{max-width:960px}}
@media(max-width:991px){body[data-page="home"] .header-inner,body[data-page="home"] main{max-width:720px}body[data-page="home"] .service{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:767px){body[data-page="home"] .header-inner,body[data-page="home"] main{max-width:540px}body[data-page="home"] .service{flex-basis:100%}body[data-page="home"] .brand strong{font-size:18px}body[data-page="home"] .brand small{font-size:11px}body[data-page="home"] .brand{gap:10px}body[data-page="home"] .brand img{width:44px;height:44px}body[data-page="home"] .intro h1{font-size:32px}body[data-page="home"] .staff-link{font-size:12px;white-space:nowrap}}
@media(max-width:420px){body[data-page="home"] .brand strong{font-size:15px}body[data-page="home"] .header-inner{gap:10px}body[data-page="home"] .staff-link{padding:5px 7px;font-size:11px}body[data-page="home"] .brand img{width:36px;height:40px}}

/* Warna penilaian pelayanan sesuai referensi. */
#survey-dialog{max-width:500px;padding:28px 24px 24px;border:0;border-radius:16px;background:#fff}
#survey-dialog::backdrop{background:rgba(0,0,0,.5);backdrop-filter:none}
#survey-dialog h2{margin:0 30px 2px 0;font-size:24px;line-height:1.3;letter-spacing:-.5px;font-weight:700}
#survey-dialog>p{margin:0;color:#667991;font-size:16px;line-height:24px}
#survey-dialog .close{right:18px;top:32px;color:#808080;font-size:30px;line-height:1;padding:4px}
#survey-dialog .ratings{gap:8px;margin-top:32px}
#survey-dialog .ratings button{--rating-color:#0d6efd;--rating-tint:#eef5ff;background:#fff;color:var(--rating-color);border:1px solid var(--rating-color);border-radius:12px;padding:16px 8px;min-height:106px;font-size:16px;line-height:24px;font-weight:700;transition:background .18s,box-shadow .18s}
#survey-dialog .ratings button[data-rating="4"]{--rating-color:#198754;--rating-tint:#eaf7ef}
#survey-dialog .ratings button[data-rating="3"]{--rating-color:#0d6efd;--rating-tint:#eef5ff}
#survey-dialog .ratings button[data-rating="2"]{--rating-color:#ffb700;--rating-tint:#fff8e3}
#survey-dialog .ratings button[data-rating="1"]{--rating-color:#dc3545;--rating-tint:#fff0f1}
#survey-dialog .ratings button:hover{background:var(--rating-tint)}
#survey-dialog .ratings button:focus-visible{outline:3px solid var(--rating-color);outline-offset:2px;background:var(--rating-tint)}
#survey-dialog .ratings span{display:block;font-size:32px;line-height:40px;margin-bottom:6px}
@media(max-width:420px){#survey-dialog{padding:24px 18px 18px}#survey-dialog h2{font-size:21px}#survey-dialog .close{right:12px;top:23px}#survey-dialog .ratings button{font-size:14px}}

/* Tiket termal: pratinjau dan cetak memakai susunan yang sama. */
#ticket-dialog{max-width:390px;padding:28px 24px 20px}
#ticket-print{width:100%;max-width:72mm;margin:0 auto 24px;padding:8mm 0 0;background:#fff;color:#000;text-align:center;font-family:Arial,Helvetica,sans-serif;line-height:1.35}
#ticket-print .ticket-logo{display:block;width:16mm;height:16mm;object-fit:contain;margin:0 auto 5mm;filter:grayscale(1) contrast(2)}
#ticket-print h2{margin:0;font-size:15pt;line-height:1.5;letter-spacing:.4px;font-weight:900}
#ticket-print .ticket-label{margin:1mm 0 0;font-size:12pt;color:#000}
#ticket-print #ticket-number{display:block;margin:5mm 0 4mm;font-family:Arial,Helvetica,sans-serif;font-size:48pt;line-height:1.15;letter-spacing:0;font-weight:900;color:#000;overflow-wrap:anywhere}
#ticket-print #ticket-service{margin:0 0 5mm;font-size:16pt;line-height:1.3;font-weight:700;overflow-wrap:anywhere}
#ticket-print .ticket-details{border-top:1px dashed #000;padding-top:5mm;font-size:10pt;line-height:1.55;overflow-wrap:anywhere}
#ticket-print .ticket-details p{margin:0;color:#000}
#ticket-print .ticket-note{margin:5mm 0 0;padding:0;border:0;color:#000;font-size:10pt;line-height:1.4}
@media print{
 @page{size:80mm 130mm;margin:4mm}
 html,body,body[data-page="home"]{width:auto!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;background:#fff!important;color:#000!important}
 body>*{display:none!important}
 body>#ticket-dialog[open]{display:block!important;position:absolute!important;inset:0 auto auto 0!important;width:72mm!important;max-width:100%!important;max-height:none!important;height:auto!important;overflow:visible!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
 #ticket-dialog>*:not(#ticket-print){display:none!important}
 #ticket-dialog #ticket-print{display:block!important;width:100%;max-width:none;margin:0;padding-top:8mm;break-inside:avoid;page-break-inside:avoid}
 dialog::backdrop{display:none!important}
}

/* Kontrol layar penuh tersedia pada semua halaman. */
.fullscreen-toggle{position:fixed;right:16px;bottom:16px;z-index:5;display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 14px;border:1px solid #cbd8e8;border-radius:10px;background:#fff;color:#16365d;font-size:13px;font-weight:700;box-shadow:0 3px 16px #071a3315;cursor:pointer}
.fullscreen-toggle:hover{background:#eaf2ff;border-color:#6a9ae1}
.fullscreen-toggle[aria-pressed="true"]{background:#071a33;color:#fff;border-color:#344e71}
html:fullscreen{overflow:auto;background:#f2f6fb}
@media(max-width:620px){.fullscreen-toggle{right:10px;bottom:10px;padding:8px 10px;font-size:11px}body footer{padding-bottom:68px!important}}
@media print{.fullscreen-toggle{display:none!important}}