/* =========================================================
 *  FixService — gaya tampilan (mengikuti desain E-Cuti)
 * ========================================================= */
:root{
  --pri:#0f6e8c;--pri-2:#0b5a73;--pri-soft:#e4f2f6;--acc:#1592a8;
  --bg:#f2f5f9;--card:#fff;--text:#1d2433;--muted:#6b7485;--line:#e5e9f0;
  --ok:#15803d;--ok-soft:#e5f5eb;--warn:#b45309;--warn-soft:#fdf2df;
  --err:#c0392b;--err-soft:#fdeceb;--info:#4f46e5;--info-soft:#eceafd;
  --r:14px;--sh:0 2px 10px rgba(20,30,50,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-tap-highlight-color:transparent}
a{color:var(--pri);text-decoration:none}
img{max-width:100%}
h1,h2,h3{line-height:1.25}
.wrap-wide{max-width:1180px;margin:0 auto;padding:16px 20px}
main.wrap-wide{padding-top:20px;min-height:calc(100vh - 140px)}
.muted{color:var(--muted)}.small{font-size:13px}
.mt{margin-top:14px}.mt0{margin-top:0}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.right{text-align:right}.nowrap{white-space:nowrap}

.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:20px;margin-bottom:16px}
.card h2{font-size:16px;margin:0 0 14px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 2px 10px}
.card-head h2{font-size:16px;margin:0}

label{display:block;font-weight:600;font-size:13.5px;margin:14px 0 6px}
label .req{color:var(--err)}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=url],input[type=search],select,textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--text);outline:0;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--pri)}
textarea{min-height:90px;resize:vertical}
.hint{font-size:12.5px;color:var(--muted);margin-top:4px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font:inherit;font-weight:600;cursor:pointer;background:var(--pri);color:#fff;text-align:center;line-height:1.2}
.btn:hover{background:var(--pri-2)}
.btn.block{width:100%;padding:15px;font-size:16px}
.btn.ghost{background:var(--pri-soft);color:var(--pri)}
.btn.light{background:#fff;color:var(--text);border:1.5px solid var(--line)}
.btn.ok{background:var(--ok)}.btn.danger{background:var(--err)}.btn.warn{background:var(--warn)}
.btn.wa{background:#25a244}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn svg{flex:none}

.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.alert.ok{background:var(--ok-soft);color:var(--ok)}.alert.err{background:var(--err-soft);color:var(--err)}
.alert.warn{background:var(--warn-soft);color:var(--warn)}.alert.info{background:var(--pri-soft);color:var(--pri)}

dl.info{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;margin:0}
dl.info dt{color:var(--muted)}dl.info dd{margin:0;font-weight:500;word-break:break-word}
@media(max-width:520px){dl.info{grid-template-columns:1fr;gap:0}dl.info dt{font-size:12px;margin-top:8px}}

/* Badge status */
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.st-menunggu{background:var(--warn-soft);color:var(--warn)}
.st-dijadwalkan{background:var(--pri-soft);color:var(--pri)}
.st-berangkat,.st-dikerjakan{background:var(--info-soft);color:var(--info)}
.st-selesai{background:var(--ok-soft);color:var(--ok)}
.st-dibatalkan{background:#eef0f4;color:var(--muted)}
.badge.role{background:var(--pri-soft);color:var(--pri)}.badge.gray{background:#eef0f4;color:var(--muted)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.err{background:var(--err-soft);color:var(--err)}
.count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--err);color:#fff;font-size:11px;font-weight:700;line-height:1}

.avatar{width:34px;height:34px;border-radius:50%;background:var(--pri);color:#fff;display:inline-grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.avatar.lg{width:56px;height:56px;font-size:20px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 16px}
.page-head h1{font-size:22px;margin:0}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px;display:flex;gap:12px;align-items:center;color:var(--text)}
.stat i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--pri-soft);color:var(--pri)}
.stat i.w{background:var(--warn-soft);color:var(--warn)}.stat i.o{background:var(--ok-soft);color:var(--ok)}.stat i.v{background:var(--info-soft);color:var(--info)}
.stat .n{font-size:24px;font-weight:700;line-height:1.1}.stat .l{color:var(--muted);font-size:13px}
a.stat:hover{outline:2px solid var(--pri)}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#fafbfd}
tr:hover td{background:#fafbfd}
td .sub{display:block;font-size:12.5px;color:var(--muted)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.filters>div{flex:1 1 140px;min-width:0}.filters input,.filters select{min-width:0}.filters label{margin-top:0}
.pager{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.pager a,.pager span{padding:6px 12px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--text)}
.pager .on{background:var(--pri);color:#fff;border-color:var(--pri)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:8px 14px;border-radius:99px;background:#fff;color:var(--muted);font-weight:600;font-size:13.5px;white-space:nowrap;box-shadow:var(--sh);display:flex;gap:6px;align-items:center}
.tabs a.on{background:var(--pri);color:#fff}
.tabs a .count{background:rgba(0,0,0,.15)}
.tabs a:not(.on) .count{background:var(--err)}

/* Pilih layanan */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.svc{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 8px;text-align:center;cursor:pointer;color:var(--text);font-weight:600;font-size:13.5px;transition:.15s}
.svc i{width:52px;height:52px;border-radius:14px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center}
.svc small{font-weight:500;color:var(--muted);font-size:11.5px}
.svc input{position:absolute;opacity:0;pointer-events:none}
.svc:has(input:checked){border-color:var(--pri);background:#f3fafc;box-shadow:0 0 0 3px var(--pri-soft)}
.svc:has(input:checked) i{background:var(--pri);color:#fff}
a.svc:hover{border-color:var(--pri)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.slot{position:relative;border:1.5px solid var(--line);border-radius:10px;padding:10px;text-align:center;font-weight:600;font-size:14px;cursor:pointer;background:#fff}
.slot input{position:absolute;opacity:0}
.slot:has(input:checked){border-color:var(--pri);background:var(--pri);color:#fff}
.step-t{display:flex;gap:10px;align-items:center;font-size:15px;margin:0 0 12px}
.step-t b{width:26px;height:26px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font-size:13px;flex:none}
.foto-prev{display:none;margin-top:10px;max-height:180px;border-radius:10px}
.upload-box{display:flex;gap:10px;align-items:center;border:1.5px dashed #c7cfdb;border-radius:12px;padding:14px;cursor:pointer;color:var(--muted);font-size:14px}
.upload-box input{display:none}
.upload-box i{width:42px;height:42px;border-radius:10px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center;flex:none}

/* Detail order */
.o-head{display:flex;gap:14px;align-items:center}
.o-ic{width:54px;height:54px;border-radius:14px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center;flex:none}
.o-head h2{margin:0;font-size:18px}
.flow{display:flex;justify-content:space-between;position:relative;margin:20px 4px 4px}
.flow:before{content:"";position:absolute;left:8%;right:8%;top:14px;height:3px;background:var(--line);z-index:0}
.flow .s{position:relative;z-index:1;text-align:center;flex:1;font-size:12px;color:var(--muted)}
.flow .s i{width:31px;height:31px;border-radius:50%;background:#fff;border:3px solid var(--line);display:grid;place-items:center;margin:0 auto 6px;color:#fff}
.flow .s.done i{background:var(--pri);border-color:var(--pri)}
.flow .s.now i{background:#fff;border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-soft)}
.flow .s.done,.flow .s.now{color:var(--text);font-weight:600}
.flow.batal .s.now i{border-color:var(--err);background:var(--err)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 14px 24px;font-size:14px}
.timeline li:before{content:"";position:absolute;left:4px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--pri)}
.timeline li:after{content:"";position:absolute;left:8px;top:18px;bottom:0;width:1.5px;background:var(--line)}
.timeline li:last-child:after{display:none}
.timeline .w{font-size:12px;color:var(--muted)}
.tek-card{display:flex;gap:12px;align-items:center}
.tek-card .d{flex:1;min-width:0}
.biaya td{padding:8px 6px}
.biaya tr.tot td{font-weight:700;font-size:16px;border-bottom:0}
.item-row{display:grid;grid-template-columns:90px 1fr 70px 120px 36px;gap:6px;margin-bottom:6px}
.item-row input,.item-row select{padding:9px 10px}
.item-row .rm{border:0;background:var(--err-soft);color:var(--err);border-radius:8px;cursor:pointer;font-size:18px}
@media(max-width:620px){.item-row{grid-template-columns:1fr 1fr 36px}.item-row .nm{grid-column:1/-1;order:-1}}
.stars{display:flex;gap:4px;flex-direction:row-reverse;justify-content:flex-end}
.stars input{display:none}
.stars label{margin:0;cursor:pointer;color:#d3d8e0}
.stars label svg{width:34px;height:34px;fill:currentColor}
.stars input:checked~label,.stars label:hover,.stars label:hover~label{color:#f5a524}
.star-v{color:#f5a524;font-weight:700}
.foto-o{max-width:100%;max-height:280px;border-radius:12px;display:block}
.actions{display:grid;gap:8px}
.actions form{margin:0}
details.box{border:1.5px solid var(--line);border-radius:12px;padding:0;margin-top:8px}
details.box summary{padding:12px 14px;font-weight:600;cursor:pointer;list-style:none}
details.box summary::-webkit-details-marker{display:none}
details.box>div{padding:0 14px 14px}

/* Notifikasi */
.notif{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--text)}
.notif:last-child{border-bottom:0}
.notif.baru{background:#f3fafc}
.notif .dot{width:8px;height:8px;border-radius:50%;background:var(--pri);margin-top:7px;flex:none}
.notif:not(.baru) .dot{background:transparent}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:linear-gradient(160deg,var(--pri) 0,var(--acc) 40%,var(--bg) 40.1%)}
.login .card{width:100%;max-width:410px;padding:28px 24px}
.login .lg-logo{width:72px;height:72px;border-radius:20px;margin:0 auto 10px;display:block;box-shadow:0 8px 20px rgba(15,110,140,.25)}
.login h1{text-align:center;margin:0;font-size:24px}
.login p.sub{text-align:center;color:var(--muted);margin:4px 0 8px}

.install-bar{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));background:#1d2433;color:#fff;border-radius:12px;padding:12px 14px;display:none;align-items:center;gap:10px;z-index:50;box-shadow:0 8px 30px rgba(0,0,0,.25)}
@media(min-width:821px){.install-bar{bottom:16px;left:auto;max-width:440px}}
.install-bar.show{display:flex}.install-bar span{flex:1;font-size:14px}
footer.foot{text-align:center;color:var(--muted);font-size:12px;padding:20px 16px 30px}

/* Popup konfirmasi */
.pop-bg{position:fixed;inset:0;background:rgba(15,20,30,.45);display:grid;place-items:center;z-index:100;padding:20px}
.pop-bg[hidden]{display:none}
.pop{background:#fff;border-radius:18px;padding:26px 22px 18px;max-width:380px;width:100%;text-align:center;animation:pop .18s ease-out}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.pop-ic{width:62px;height:62px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:var(--pri-soft);color:var(--pri)}
.pop-ic.err{background:var(--err-soft);color:var(--err)}.pop-ic.ok{background:var(--ok-soft);color:var(--ok)}
.pop h3{margin:0 0 6px;font-size:17px}.pop-msg{color:var(--muted);font-size:14px}
.pop-btn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}

/* Kartu daftar (HP) */
.list{display:grid;gap:10px}
.item{display:block;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;color:var(--text)}
.item .h{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.item .h b{font-size:15px}
.item .row{display:flex;gap:12px;align-items:center}
.item .ic{width:44px;height:44px;border-radius:12px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center;flex:none}
.item .m{font-size:13px;color:var(--muted);margin-top:3px;display:flex;gap:5px;align-items:center}
.item .m svg{flex:none}
.item .f{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px}
.empty{text-align:center;padding:36px 16px;color:var(--muted)}
.empty i{width:64px;height:64px;border-radius:50%;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center;margin:0 auto 10px}

/* Menu grid (HP) */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.menu-grid a{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border-radius:14px;box-shadow:var(--sh);padding:14px 6px;color:var(--text);font-size:12px;font-weight:600;text-align:center}
.menu-grid a i{width:44px;height:44px;border-radius:12px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center}
.menu-sec{margin:18px 4px 8px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.prof{display:flex;gap:14px;align-items:center}

/* Banner promo beranda */
.promo{background:linear-gradient(135deg,#fff,#eef8fb);border:1px solid #d8eef4;border-radius:var(--r);padding:16px;display:flex;gap:14px;align-items:center}
.promo i{width:48px;height:48px;border-radius:14px;background:var(--pri);color:#fff;display:grid;place-items:center;flex:none}
.promo b{display:block}

/* Jadwal */
.jd-row{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.jd-row:last-child{border-bottom:0}
.jd-jobs{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.jd-job{border-left:4px solid var(--pri);background:#f7fafc;border-radius:8px;padding:8px 10px;font-size:13px;color:var(--text)}
.jd-job.st-menunggu{border-color:var(--warn)}.jd-job.st-selesai{border-color:var(--ok)}
.jd-job.st-berangkat,.jd-job.st-dikerjakan{border-color:var(--info)}
@media(max-width:620px){.jd-row{grid-template-columns:1fr;gap:6px}}

/* Invoice */
.inv{background:#fff;max-width:780px;margin:0 auto;padding:36px 40px;box-shadow:var(--sh);border-radius:6px;font-size:14px}
.inv-h{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--pri);padding-bottom:14px}
.inv-h img{width:46px;height:46px;border-radius:10px}
.inv-h h2{margin:0;color:var(--pri);font-size:26px;letter-spacing:.05em}
.inv table th{background:var(--pri-soft);color:var(--pri)}
.lunas{display:inline-block;border:3px solid var(--ok);color:var(--ok);font-weight:800;font-size:20px;padding:4px 16px;border-radius:8px;transform:rotate(-8deg);letter-spacing:.1em}
.belum{border-color:var(--err);color:var(--err)}

/* ============ Tampilan desktop vs HP ============ */
.m-hero,.tabbar,.mob{display:none}
@media(max-width:820px){
  .sidebar,.dhead,.dfoot,.desk{display:none!important}
  .dmain{margin-left:0!important}
  .m-hero{display:block}
  .tabbar{display:flex}
  .mob{display:block}
  .grid2,.grid3{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:12px;gap:10px}.stat i{width:38px;height:38px}.stat .n{font-size:20px}
  .wrap-wide{padding:12px 14px}
  .page-head.hide-m{display:none}
}

/* ============ HP: tampilan aplikasi PWA ============ */
.m-hero{background:linear-gradient(135deg,var(--pri),var(--acc));color:#fff;padding:18px 16px 60px;padding-top:calc(16px + env(safe-area-inset-top))}
.m-hero .top{display:flex;align-items:center;gap:10px}
.m-hero .logo{width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none;overflow:hidden}
.m-hero .logo img{width:40px;height:40px}
.m-hero .t{flex:1;min-width:0}
.m-hero .t b{display:block;font-size:17px}
.m-hero .t span{font-size:12.5px;opacity:.9;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-hero .bell{position:relative;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff}
.m-hero .bell .count{position:absolute;top:-4px;right:-4px;border:2px solid #0f6e8c}
.m-hero .back{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;flex:none}
.m-hero h1{font-size:21px;margin:16px 0 0}
.m-hero .greet{margin-top:14px;font-size:14px;opacity:.95}
.m-hero .greet b{display:block;font-size:20px}
@media(max-width:820px){
  body.app{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  body.app main.wrap-wide{margin-top:-44px;padding-top:0;min-height:0}
  .card{padding:16px}
  .page-head h1{font-size:19px}
  .svc-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .svc{padding:12px 4px;font-size:12px}.svc i{width:44px;height:44px}.svc small{display:none}
  .slots{grid-template-columns:repeat(2,1fr)}
  .inv{padding:20px 16px}
  .flow .s{font-size:10.5px}
}
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);z-index:40;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 16px rgba(20,30,50,.06)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 2px 5px;min-height:56px;color:var(--muted);font-size:10.5px;font-weight:600;position:relative}
.tabbar a.on{color:var(--pri)}
.tabbar a .count{position:absolute;top:3px;left:calc(50% + 5px)}
.tabbar a.fab{margin-top:-18px;justify-content:flex-start}
.tabbar a.fab i{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--acc));color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(15,110,140,.4);border:3px solid #fff}
@media(max-width:380px){.menu-grid{grid-template-columns:repeat(3,1fr)}}

@media print{
  body{background:#fff!important;padding:0!important}
  .no-print,.sidebar,.dhead,.dfoot,.tabbar,.m-hero,.install-bar,footer.foot{display:none!important}
  .dmain{margin-left:0!important}
  main.wrap-wide{margin:0!important;padding:0!important}
  .inv{box-shadow:none;padding:0}
  .inv table th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* =========================================================
 *  DESKTOP: sidebar gelap + header (seperti E-Cuti)
 * ========================================================= */
:root{--sb:256px;--sb-bg:#0d2830;--sb-bg2:#0a2027;--sb-tx:#b9c9ce}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sb);background:linear-gradient(180deg,var(--sb-bg),var(--sb-bg2));color:var(--sb-tx);display:flex;flex-direction:column;z-index:30;transition:width .2s}
.sb-brand{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
.sb-logo{width:40px;height:40px;border-radius:11px;background:#fff;display:grid;place-items:center;flex:none;overflow:hidden}
.sb-logo img{width:40px;height:40px}
.sb-brand .lbl{min-width:0}
.sb-brand b{display:block;font-size:16px;line-height:1.2}
.sb-brand small{display:block;font-size:11px;color:#8fa6ad;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-nav{flex:1;overflow-y:auto;padding:14px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
.sb-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#dce7ea;font-weight:600;font-size:14.5px;cursor:pointer;list-style:none;margin-bottom:2px;white-space:nowrap}
.sb-link::-webkit-details-marker{display:none}
.sb-link svg{flex:none;opacity:.9}
.sb-link .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sb-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-link.on{background:linear-gradient(135deg,var(--pri),#13819c);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.sb-link .chev{flex:none;width:16px;transition:transform .2s;opacity:.6}
.sb-grp[open]>.sb-link .chev{transform:rotate(180deg)}
.sb-sub{margin:2px 0 8px 22px;padding-left:12px;border-left:1px solid rgba(255,255,255,.1)}
.sb-sub a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:9px;color:var(--sb-tx);font-size:13.8px;font-weight:500;margin-bottom:1px}
.sb-sub a:hover{color:#fff;background:rgba(255,255,255,.05)}
.sb-sub a.on{background:linear-gradient(135deg,var(--pri),#13819c);color:#fff;font-weight:600}
.sb-sub a.on:before{content:"";position:absolute;left:-15px;top:6px;bottom:6px;width:3px;border-radius:3px;background:#fff}
.sb-cnt{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#22a06b;color:#fff;font-size:11px;font-weight:700;flex:none!important}
.sb-out{margin:8px 12px 14px;border-top:1px solid rgba(255,255,255,.06);border-radius:0;padding-top:16px}
.sb-out:hover{background:none;color:#fff}

.dmain{margin-left:var(--sb);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .2s}
.dhead{position:sticky;top:0;z-index:20;height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px}
.dh-btn{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text);display:grid;place-items:center;cursor:pointer;flex:none}
.dh-btn:hover{background:#f5f7fa}
.dh-btn.ic{border-color:transparent;color:#4b5565}
.dh-btn .count{position:absolute;top:2px;right:2px;min-width:17px;height:17px;font-size:10px}
.crumb{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--muted);min-width:0;white-space:nowrap}
.crumb a{color:var(--muted);display:grid}
.crumb a:hover{color:var(--pri)}
.crumb b{color:var(--text);overflow:hidden;text-overflow:ellipsis}
.crumb span{flex:none}
.dhead .sp{flex:1}
.clock{display:flex;align-items:center;gap:6px;background:#f1f4f8;border-radius:10px;padding:8px 12px;color:#3c4556}
.clock b{font-size:15px;font-variant-numeric:tabular-nums}
.clock small{font-size:10px;font-weight:700;color:var(--muted)}
.dh-user{position:relative;margin-left:4px}
.dh-user summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:4px 6px;border-radius:12px;color:var(--muted)}
.dh-user summary::-webkit-details-marker{display:none}
.dh-user summary:hover{background:#f5f7fa}
.dh-user .avatar{width:38px;height:38px}
.dh-user .who{line-height:1.2;text-align:left}
.dh-user .who b{display:block;color:var(--text);font-size:14.5px}
.dh-user .who small{font-size:12px;color:var(--muted)}
.dh-user .drop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(20,30,50,.14);padding:6px;min-width:230px;z-index:40}
.dh-user .drop-h{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.dh-user .drop-h b{display:block;font-size:14px}.dh-user .drop-h small{color:var(--muted)}
.dh-user .drop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--text);font-size:14px}
.dh-user .drop a:hover{background:var(--pri-soft);color:var(--pri)}
.dh-user .drop a.out{color:var(--err)}.dh-user .drop a.out:hover{background:var(--err-soft)}
.dmain>main.wrap-wide{max-width:none;width:100%;margin:0;padding:24px;flex:1}
.dfoot{display:flex;justify-content:space-between;gap:12px;padding:16px 24px;border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:13px}

/* Sidebar ringkas (tombol ☰) */
.sb-mini{--sb:76px}
.sb-mini .sidebar .lbl,.sb-mini .sidebar .sb-sub,.sb-mini .sidebar .sb-cnt{display:none!important}
.sb-mini .sb-brand{justify-content:center;padding:18px 0 16px}
.sb-mini .sb-link{justify-content:center;padding:12px 0}
.sb-mini .sb-grp>.sb-link.cur{background:rgba(255,255,255,.08);color:#fff}
@media(min-width:821px) and (max-width:1080px){
  .dh-user .who,.clock small{display:none}
  .dmain>main.wrap-wide{padding:20px}
}
@media(min-width:821px){
  .page-head h1{font-size:23px}
  .stats{grid-template-columns:repeat(4,1fr)}
}

/* =========================================================
 *  Halaman masuk / daftar — layar terbelah (desktop)
 * ========================================================= */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;position:relative;background:#eef3f6 var(--auth-bg) center/cover no-repeat}
.auth:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(236,243,247,.78),rgba(240,245,248,.88) 50%,rgba(245,248,250,.92));backdrop-filter:blur(1.5px)}
.auth>*{position:relative}
.auth-l{display:flex;flex-direction:column;justify-content:center;padding:60px 9vw 60px 12%;border-right:1px solid rgba(15,40,60,.08)}
.auth-logo{width:112px;height:76px;border-radius:18px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(20,40,60,.08);margin-bottom:26px}
.auth-logo img{width:46px;height:46px;border-radius:12px}
.auth-co{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pri)}
.auth-l h1{font-size:46px;margin:8px 0 6px;letter-spacing:-.02em;color:#122631}
.auth-tag{font-size:20px;color:#6b7a88;margin:0 0 28px}
.auth-feat{display:grid;gap:18px;max-width:470px}
.auth-feat div{display:flex;gap:14px}
.auth-feat i{width:32px;height:32px;border-radius:9px;background:rgba(15,110,140,.1);color:var(--pri);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px;flex:none}
.auth-feat b{display:block;font-size:15.5px}
.auth-feat span{font-size:14px;color:#5f6c7a}
.auth-r{display:flex;align-items:center;padding:40px 6vw}
.auth-form{width:100%;max-width:420px}
.auth-form h2{font-size:27px;margin:0 0 6px;color:#122631}
.auth-form .sub{color:#6b7a88;margin:0 0 22px;font-size:15px}
.auth-form label{margin-top:16px}
.inp{position:relative}
.inp>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#8a96a3;pointer-events:none}
.inp input{padding:13px 44px 13px 44px;background:#fff;border-radius:11px}
.inp .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:#8a96a3;cursor:pointer;padding:6px;display:grid}
.btn-grad{background:linear-gradient(135deg,var(--pri),var(--acc));box-shadow:0 8px 20px rgba(15,110,140,.25)}
.btn-grad:hover{filter:brightness(1.05)}
.btn-out{background:transparent;border:1.5px solid #c9d3dc;color:var(--pri)}
.btn-out:hover{background:rgba(255,255,255,.6)}
.auth-foot{margin-top:26px;font-size:12.5px;color:#8a96a3;line-height:1.7}
.auth-foot b{color:#4b5565}
.auth-m{display:none}
main.bare{padding:0;max-width:none;margin:0}
/* ---------- Masuk / Daftar di HP: layar penuh tanpa kotak, gaya aplikasi ---------- */
@media(max-width:820px){
  .auth{display:block;min-height:100vh;min-height:100dvh;background:#fff!important;padding:0;overflow:hidden}
  .auth-l{display:none}
  /* cahaya lembut di pojok atas, bukan latar terbelah */
  .auth:before{display:block;content:"";position:absolute;inset:auto;top:-160px;right:-140px;width:380px;height:380px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(21,146,168,.22),rgba(21,146,168,.08) 55%,rgba(21,146,168,0));backdrop-filter:none}
  .auth:after{content:"";position:absolute;bottom:-180px;left:-160px;width:340px;height:340px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(15,110,140,.08),rgba(15,110,140,0));pointer-events:none}
  .auth-r{position:relative;z-index:1;display:block;max-width:480px;margin:0 auto;
    padding:calc(14px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom))}
  .auth-form{background:none;box-shadow:none;border-radius:0;padding:0;max-width:none}

  .auth-back{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border-radius:99px;background:#f2f5f8;color:#3c4a55;font-size:14px;margin:0}
  .auth-m{display:flex;align-items:center;gap:14px;text-align:left;margin:30px 0 26px}
  .auth-m img{width:54px;height:54px;border-radius:16px;box-shadow:0 10px 24px rgba(15,110,140,.28);flex:none}
  .auth-m b{display:block;font-size:19px;letter-spacing:-.01em}
  .auth-m small{display:block;color:#7a8792;font-size:13px;margin-top:1px}

  .auth-form h2{font-size:27px;line-height:1.2;letter-spacing:-.02em;text-align:left;margin:0 0 6px}
  .auth-form .sub{text-align:left;font-size:15px;margin:0 0 20px;color:#6b7884}
  .auth-form label{font-size:13.5px;color:#3c4a55;margin:16px 0 7px}
  .inp input{background:#f3f6f9;border:1.5px solid transparent;border-radius:14px;padding:15px 46px;font-size:16px;transition:.15s}
  .inp input::placeholder{color:#9aa5af}
  .inp input:focus{background:#fff;border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-soft)}
  .inp>svg{left:15px}
  .auth-form .btn-grad{border-radius:14px;padding:16px;font-size:16.5px;margin-top:26px!important}
  .auth-form .alert{border-radius:12px}
  .auth-swap{text-align:center;margin-top:20px!important}
  #installLogin{background:none;border:0;color:var(--pri);padding:10px!important;margin-top:14px!important;font-size:14.5px!important;font-weight:600}
  .auth-foot{text-align:center;margin-top:18px;font-size:12px}
}

/* Tombol cari pada filter tidak boleh menyusut / keluar layar */
.filters>.f-btn{flex:none;min-width:0}
.filters>.f-btn .btn{height:46px;padding:0 16px}
@media(max-width:820px){
  .filters>div[style]{flex:1 1 0!important;min-width:0!important}
  .filters>.f-btn{align-self:flex-end}
}

/* Halaman tetap: tanpa zoom & tanpa geser ke samping */
html,body{max-width:100%;overflow-x:hidden}
html{touch-action:manipulation;-ms-touch-action:manipulation}
body{overscroll-behavior-x:none}
@media(max-width:820px){
  input,select,textarea{font-size:16px!important}  /* cegah iPhone zoom otomatis saat mengetik */
  .card,.item,.table-wrap{max-width:100%}
  img{max-width:100%;height:auto}
}
/* Kartu order tidak boleh melebar karena alamat panjang */
.list{grid-template-columns:minmax(0,1fr)}
.item,.item .row{min-width:0}
.item .m{min-width:0}
.item .m span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .f span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid2>*,.grid3>*{min-width:0}

/* Slot jam yang sudah lewat */
.slot.off,.slot:has(input:disabled){opacity:.4;background:#f3f5f8;cursor:not-allowed;text-decoration:line-through}
.slots{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.slots .slot{margin:0}

.auth-back{display:inline-flex;align-items:center;gap:4px;color:#5f6c7a;font-size:14px;font-weight:600;margin-bottom:18px}
.auth-back:hover{color:var(--pri)}


/* Lupa password, verifikasi Cloudflare, kolom jebakan bot */
.lbl-row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.lbl-row label{margin-bottom:7px}
.lupa{font-size:13.5px;font-weight:600;color:var(--pri);margin-bottom:7px}
.ts-box{margin-top:18px;min-height:65px}
.ts-box .cf-turnstile{width:100%}
.hp-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.wa-prev{margin-top:20px;background:#eef8f1;border-radius:14px;padding:12px 14px;border:1px solid #d5efdc}
.wa-prev small{display:block;color:#3f7d52;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.wa-prev div{white-space:pre-line;font-size:14px;color:#1f3a28;line-height:1.5}
.btn.wa-btn{background:#25a244;box-shadow:0 8px 20px rgba(37,162,68,.25)}