@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
/* Identitas visual PLN khusus halaman pengambilan antrean. */
.customer-page{background:linear-gradient(145deg,#e8f7fc 0,#f8fcfe 55%,#e6f3f8 100%)}
.customer-page .ambient{background:radial-gradient(circle at 8% 18%,rgba(0,169,206,.22),transparent 32%),radial-gradient(circle at 92% 78%,rgba(255,209,0,.2),transparent 28%);pointer-events:none}
.customer-page .customer-topbar{height:104px;padding:0 clamp(18px,5vw,72px);border-bottom:5px solid transparent;border-image:linear-gradient(90deg,#ffd100 0 35%,#00a9ce 35% 100%) 1;box-shadow:0 8px 28px rgba(7,59,99,.1);position:relative;z-index:2}
.customer-page .customer-brand{gap:clamp(12px,2vw,28px);min-width:0}
.customer-page .customer-logos{display:flex!important;flex-direction:row!important;align-items:center;gap:clamp(10px,1.4vw,22px);height:72px;min-width:0}
.customer-page .customer-logos i{display:block;width:1px;height:48px;background:#c4d9e3;flex:0 0 auto}
.customer-page .customer-logos img{display:block;width:auto;height:54px;object-fit:contain}
.customer-page .customer-logos .customer-pln-logo{max-width:170px}
.customer-page .customer-logos .customer-danantara-logo{width:clamp(175px,20vw,290px);max-width:290px;height:82px}
.customer-page .customer-brand-title{padding-left:clamp(2px,.5vw,8px);border-left:0}
.customer-page .customer-brand-title b{font-size:clamp(17px,1.4vw,23px);color:#0077b6}
.customer-page .customer-brand-title small{font-size:clamp(10px,.78vw,13px)}
.customer-page .hero h1{color:#073b63}.customer-page .hero h1 span{color:#0077b6}
.customer-page .take-card{position:relative;overflow:hidden;border-top:7px solid #ffd100;box-shadow:0 22px 60px rgba(7,59,99,.16)}
.customer-page .take-card:before{content:"";display:block;position:absolute;right:-50px;bottom:-65px;width:150px;height:150px;border:28px solid rgba(0,169,206,.07);border-radius:50%;pointer-events:none}
.customer-page .queue-icon{background:#ffd100;color:#0077b6;box-shadow:0 8px 20px rgba(255,209,0,.3)}
.customer-page .btn.primary{background:linear-gradient(135deg,#0077b6,#00a9ce);box-shadow:0 8px 20px rgba(0,119,182,.24)}
.customer-page footer{color:#527184;font-weight:600}
@media(max-width:700px){.customer-page .customer-topbar{height:auto;min-height:100px;padding:12px 16px}.customer-page .customer-brand{gap:8px}.customer-page .customer-logos{height:72px;gap:8px}.customer-page .customer-logos img{height:44px}.customer-page .customer-logos .customer-pln-logo{max-width:112px}.customer-page .customer-logos .customer-danantara-logo{width:136px;height:64px}.customer-page .customer-logos i{height:40px}.customer-page .customer-brand-title{display:none!important}.customer-page .badge{padding:8px 10px;font-size:11px;white-space:nowrap}}
@media(max-width:390px){.customer-page .customer-logos .customer-danantara-logo{width:108px;height:58px}.customer-page .customer-logos .customer-pln-logo{max-width:86px}.customer-page .customer-logos{gap:4px}.customer-page .customer-topbar{padding-inline:8px}}
.counter-picker{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;color:var(--muted)}.counter-picker select{padding:9px 12px;border:1px solid #cadde6;border-radius:9px;background:#fff;color:var(--navy);font-weight:700}
:root{--blue:#0077b6;--navy:#073b63;--cyan:#00a9ce;--yellow:#ffd100;--bg:#eef7fb;--white:#fff;--text:#12324a;--muted:#668092;--danger:#dc3545;--green:#119c68;--shadow:0 20px 60px rgba(7,59,99,.14)}*{box-sizing:border-box}body{margin:0;font-family:Manrope,Arial,sans-serif;color:var(--text);background:var(--bg)}button,input{font:inherit}.hidden{display:none!important}.topbar{height:82px;padding:0 clamp(20px,5vw,70px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #dbeaf2}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}.brand span:last-child{display:flex;flex-direction:column}.brand small{color:var(--muted)}.logo-slot{width:48px;height:48px;border-radius:12px;background:var(--yellow);color:var(--blue);display:grid;place-items:center;font-weight:900;font-size:13px}.logo-slot.big{width:70px;height:70px;margin:auto}.badge{padding:9px 14px;border-radius:99px;background:#edf2f5;color:#58707e;font-size:13px;font-weight:700}.badge.open{background:#daf7e9;color:#08724a}.badge.closed{background:#ffe4e5;color:#a51f2b}.btn{border:0;border-radius:12px;padding:13px 18px;font-weight:800;cursor:pointer;transition:.2s;display:inline-flex;gap:8px;align-items:center;justify-content:center}.btn:hover{transform:translateY(-1px);filter:brightness(.97)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.primary{background:linear-gradient(135deg,var(--blue),var(--cyan));color:white}.warning{background:#ffda44;color:#684f00}.success{background:var(--green);color:white}.danger{background:var(--danger);color:white}.ghost{background:#edf5f8;color:var(--navy)}.small{padding:9px 13px;margin-left:8px}.giant{width:100%;padding:18px;font-size:17px}.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--blue)}.muted{color:var(--muted);font-size:13px}.customer-page{min-height:100vh}.ambient{position:fixed;inset:0;background:radial-gradient(circle at 10% 20%,#c8f0fb 0,transparent 35%),radial-gradient(circle at 85% 75%,#d7ebfa 0,transparent 30%);z-index:-1}.customer-main{max-width:1120px;margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:center}.hero h1{font-size:clamp(38px,5vw,66px);line-height:1.08;margin:14px 0}.hero h1 span{color:var(--blue)}.hero>p:last-child{font-size:18px;color:var(--muted);max-width:590px}.take-card,.ticket{background:#fff;border-radius:26px;padding:36px;text-align:center;box-shadow:var(--shadow);border:1px solid #dbeaf2}.take-card h2{margin:14px 0 5px}.take-card>p{color:var(--muted);margin-bottom:25px}.take-card>small{display:block;color:var(--muted);margin-top:16px}.queue-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:18px;background:#dcf5fb;color:var(--blue);font-size:32px;font-weight:800;margin:auto}.ticket-head,.ticket-stats,.ticket-actions{display:flex;justify-content:space-between;gap:12px}.ticket>p{font-size:12px;letter-spacing:.15em;margin-top:40px}.ticket>strong{display:block;font-size:76px;color:var(--blue);line-height:1.2}.ticket-stats{border-top:2px dashed #d4e3e9;border-bottom:2px dashed #d4e3e9;padding:20px 0;margin:20px 0}.ticket-stats span{display:flex;flex-direction:column}.ticket-actions .btn{flex:1}footer{text-align:center;color:var(--muted);padding:20px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#e1f4fa,#f8fbfc)}.login-card{background:#fff;padding:38px;border-radius:24px;width:min(430px,100%);box-shadow:var(--shadow);text-align:center}.login-card label{display:block;text-align:left;font-size:13px;font-weight:700;margin:18px 0}.login-card input{display:block;width:100%;padding:14px;border:1px solid #cadde6;border-radius:11px;margin-top:7px;outline:none}.login-card input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #d9f4fa}.login-card .btn{width:100%}.dashboard{max-width:1180px;margin:auto;padding:40px 24px;display:grid;grid-template-columns:2fr 1fr;gap:24px}.current-card,.stat-card,.list-card,.admin-card{background:white;border-radius:22px;padding:28px;box-shadow:0 10px 35px rgba(7,59,99,.08)}.current-card>strong{font-size:clamp(70px,10vw,130px);color:var(--blue);display:block;text-align:center;margin:25px}.current-card>p{text-align:center;color:var(--muted)}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.side-stack{display:flex;flex-direction:column;gap:24px}.stat-card b{display:block;font-size:64px;color:var(--blue)}.stat-card span,.stat-card small{color:var(--muted)}.list-row{display:flex;justify-content:space-between;border-top:1px solid #e6eff3;padding:13px 0}.status{font-size:11px;padding:5px 8px;border-radius:20px;background:#edf2f5}.status.serving{background:#d5f2fa;color:#00708b}.status.completed{background:#dff5e9;color:#08724a}.status.skipped{background:#ffe1e3;color:#9a2630}.admin-card{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.display-page{height:100vh;overflow:hidden;background:#062c4a;color:white}.display-head{height:13vh;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:#fff;color:var(--navy)}.display-head .logo-slot{width:58px;height:58px}.clock{text-align:right;display:flex;flex-direction:column}.clock b{font-size:32px}.display-main{height:77vh;padding:3vh 4vw;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:2vw;background:radial-gradient(circle at top,#0b527e,#062c4a 60%)}.counter-board{border:2px solid rgba(255,255,255,.2);border-radius:25px;display:flex;flex-direction:column;text-align:center;overflow:hidden;background:rgba(255,255,255,.06)}.counter-title{display:flex;justify-content:space-between;padding:18px 25px;background:rgba(0,0,0,.18);font-size:23px;font-weight:800}.counter-board strong{font-size:clamp(90px,13vw,190px);line-height:1.2;margin:auto;color:#fff}.counter-board.active strong{color:var(--yellow);text-shadow:0 0 40px rgba(255,209,0,.25)}.counter-board p{font-size:18px}.display-bottom{grid-column:1/-1;background:white;color:var(--navy);border-radius:20px;padding:16px 22px;display:grid;grid-template-columns:1fr 220px;gap:20px}.display-bottom h3{margin:0 0 10px}.history-row{display:flex;gap:14px}.history-row div{background:#edf7fb;border-radius:10px;padding:9px 18px;display:flex;gap:10px;align-items:center}.history-row b{font-size:22px}.history-row span{font-size:11px}.waiting-box{background:var(--yellow);border-radius:13px;padding:8px 15px;display:flex;align-items:center;justify-content:space-between}.waiting-box span{font-size:12px;font-weight:800}.waiting-box b{font-size:45px}.ticker{height:10vh;background:var(--yellow);color:var(--navy);display:flex;align-items:center;gap:35px;padding:0 4vw}.ticker span{font-weight:900;font-size:20px;white-space:nowrap}.sound-gate{position:fixed;right:25px;bottom:12vh;border:0;border-radius:99px;padding:15px 22px;background:#fff;color:var(--navy);font-weight:900;box-shadow:var(--shadow);cursor:pointer}.call-overlay{position:fixed;inset:0;background:rgba(3,34,56,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;animation:flash .6s 3}.call-overlay span{letter-spacing:.2em}.call-overlay strong{font-size:20vw;color:var(--yellow);line-height:1}.call-overlay p{font-size:3vw}.toast{position:fixed;right:20px;top:20px;background:#163d55;color:#fff;padding:14px 20px;border-radius:12px;z-index:20;box-shadow:var(--shadow)}.toast.error{background:#b92d3b}.toast.success{background:#087a50}.spinner{width:16px;height:16px;border:2px solid #ffffff80;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes flash{50%{background:#087ca5}}@media(max-width:760px){.customer-main,.dashboard{grid-template-columns:1fr;padding-top:35px}.hero{text-align:center}.admin-card{flex-direction:column;align-items:flex-start;gap:15px}.topbar{padding:0 15px}.display-main{grid-template-columns:1fr}.display-page{overflow:auto}.counter-board strong{font-size:80px}.display-bottom{grid-column:auto}.display-head,.ticker{min-height:90px}.display-main{height:auto}.customer-main{gap:25px}}@media print{body *{visibility:hidden}.ticket,.ticket *{visibility:visible}.ticket{position:absolute;inset:0;margin:auto;box-shadow:none;width:80mm}.ticket-actions{display:none}}