/* Hub Layar — panel admin (mobile-first) */
@font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}

:root{
  --navy:#0a2538; --navy-2:#0f3550; --aqua:#19b5d6; --aqua-d:#0b7f97; --sun:#ffc928; --red:#d6342b; --green:#1c8a5a;
  --bg:#f2f6f8; --card:#fff; --line:#dbe4e9; --txt:#14232d; --mute:#5b6f7c;
  --r:.7rem; --body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:500 .95rem/1.55 var(--body)}
a{color:var(--aqua-d)}
h1{font:800 1.55rem/1.2 var(--display);margin:0 0 1rem;letter-spacing:-.02em}
h2{font:800 1.15rem/1.25 var(--body);margin:0 0 .6rem}
h3{font:800 1rem/1.3 var(--body);margin:0 0 .4rem}
p{margin:0 0 .8rem}
.mute{color:var(--mute)}
.small{font-size:.875rem}

/* kerangka */
.app{min-height:100vh;display:flex;flex-direction:column}
.top{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;position:sticky;top:0;z-index:20}
.logo{font:800 1.25rem/1 var(--display);color:#fff;text-decoration:none;letter-spacing:-.02em}
.logo b{color:var(--sun)}
.who{font-size:.875rem;opacity:.85}
.main{flex:1;padding:1rem 1rem 6rem;max-width:62rem;width:100%;margin:0 auto}
.nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.nav a{flex:1;text-align:center;padding:.55rem .2rem .5rem;text-decoration:none;color:var(--mute);font-weight:800;font-size:.75rem;display:flex;flex-direction:column;align-items:center;gap:.15rem}
.nav a .ico{font-size:1.3rem;line-height:1}
.nav a.on{color:var(--aqua-d)}
.nav a.secondary{display:none}
@media (min-width:900px){
  .app{display:grid;grid-template-columns:13.5rem minmax(0,1fr);grid-template-rows:auto 1fr}
  .top{grid-column:1 / -1}
  .nav{position:sticky;top:3.2rem;align-self:start;height:calc(100vh - 3.2rem);flex-direction:column;border-top:0;border-right:1px solid var(--line);padding:1rem .6rem;gap:.15rem}
  .nav a{flex:none;flex-direction:row;justify-content:flex-start;gap:.7rem;font-size:.95rem;padding:.6rem .8rem;border-radius:.6rem;text-align:left}
  .nav a.secondary{display:flex}
  .nav a.menu{display:none}
  .nav a.on{background:#e4f4f8}
  .main{padding:1.6rem 2rem 3rem}
}

/* komponen */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin-bottom:1rem}
.card.flat{padding:0;overflow:hidden}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.stack>*+*{margin-top:.8rem}
.grid2{display:grid;gap:.8rem}
@media (min-width:640px){.grid2{grid-template-columns:1fr 1fr}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.6rem;padding:.5rem 1rem;border-radius:.6rem;border:1.5px solid var(--line);background:#fff;color:var(--txt);font:800 .95rem/1 var(--body);text-decoration:none;cursor:pointer}
.btn:hover{border-color:#b7c7d0}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-2)}
.btn.sun{background:var(--sun);border-color:var(--sun);color:#1a1200}
.btn.danger{color:var(--red);border-color:#efc4c1}
.btn.small{min-height:2.1rem;padding:.35rem .7rem;font-size:.85rem}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.btns{display:flex;gap:.5rem;flex-wrap:wrap}

label{display:block;font-weight:800;font-size:.9rem;margin-bottom:.3rem}
.hint{display:block;font-weight:400;color:var(--mute);font-size:.82rem;margin-top:.25rem}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],select,textarea{width:100%;min-height:2.7rem;padding:.55rem .75rem;border:1.5px solid var(--line);border-radius:.6rem;background:#fff;font:500 .95rem/1.3 var(--body);color:var(--txt)}
textarea{min-height:5.5rem;resize:vertical}
input[type=color]{width:3.2rem;height:2.7rem;border:1.5px solid var(--line);border-radius:.6rem;padding:.15rem;background:#fff}
input[type=file]{width:100%;font:inherit;padding:.5rem;border:1.5px dashed #b7c7d0;border-radius:.6rem;background:#fafcfd}
input[type=range]{width:100%;accent-color:var(--aqua-d)}
.check{display:flex;align-items:center;gap:.55rem;font-weight:600;margin:0}
.check input{width:1.2rem;height:1.2rem;accent-color:var(--aqua-d)}
.days{display:flex;gap:.4rem;flex-wrap:wrap}
.days label{margin:0}
.days span{display:inline-block;min-width:2.9rem;text-align:center;padding:.5rem .4rem;border:1.5px solid var(--line);border-radius:.6rem;font-weight:800;font-size:.85rem;cursor:pointer;background:#fff}
.days input{position:absolute;opacity:0;width:1px;height:1px}
.days input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.days input:focus-visible+span{outline:3px solid var(--aqua);outline-offset:2px}
.opts{display:grid;gap:.5rem}
.opt{display:block;border:1.5px solid var(--line);border-radius:.7rem;padding:.7rem .9rem;cursor:pointer;background:#fff}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt b{display:block}
.opt small{color:var(--mute);font-weight:400}
.opt:has(input:checked){border-color:var(--aqua-d);background:#eaf7fa}
.opt:focus-within{outline:3px solid var(--aqua);outline-offset:2px}

.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:99rem;font-weight:800;font-size:.78rem;background:#e8eef2;color:#40535f}
.badge.ok{background:#dff3e8;color:#14724a}
.badge.warn{background:#fff1c9;color:#7a5a00}
.badge.off{background:#f0e4e3;color:#8a2e29}
.dot{width:.6rem;height:.6rem;border-radius:50%;background:currentColor;display:inline-block}

.flash{border-radius:.6rem;padding:.7rem .9rem;margin-bottom:.8rem;font-weight:600;border:1px solid}
.flash.ok{background:#e7f6ee;border-color:#bfe3cf;color:#145a3c}
.flash.err{background:#fdecea;border-color:#f3c3be;color:#8a2e29}

.item{display:flex;gap:.8rem;padding:.8rem 1rem;border-top:1px solid var(--line);align-items:flex-start}
.item:first-child{border-top:0}
.thumb{flex:none;width:6.2rem;aspect-ratio:16 / 9;border-radius:.5rem;overflow:hidden;background:var(--navy-2);position:relative;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#fff}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.item h3{margin:0}
.item .meta{color:var(--mute);font-size:.85rem}
.chipu{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .55rem;border-radius:99rem;font-size:.78rem;font-weight:800;color:#fff;background:var(--aqua-d)}
.empty{padding:1.4rem 1rem;text-align:center;color:var(--mute)}

details.edit{border-top:1px solid var(--line)}
details.edit>summary{cursor:pointer;padding:.65rem 1rem;font-weight:800;color:var(--aqua-d);list-style:none}
details.edit>summary::-webkit-details-marker{display:none}
details.edit[open]>summary{background:#f6fafb}
details.edit .body{padding:1rem}

/* pratinjau */
.pv{position:relative;width:100%;background:#000;border-radius:.7rem;overflow:hidden;border:1px solid var(--line)}
.pv iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#0a2538}
.tools{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.6rem}
.tools select{width:auto}

.copybox{display:flex;gap:.4rem}
.copybox input{font-size:.85rem;color:var(--mute)}

.big{font:800 1.9rem/1.1 var(--display);letter-spacing:-.03em}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.8rem}
.kpi .big{display:block}
.kpi span{font-size:.8rem;color:var(--mute);font-weight:600}

.auth{min-height:100vh;display:grid;place-items:center;padding:1.2rem;background:linear-gradient(160deg,var(--navy-2),var(--navy))}
.auth .box{width:100%;max-width:24rem;background:#fff;border-radius:1rem;padding:1.5rem}
.auth h1{margin-bottom:.4rem}
table.t{width:100%;border-collapse:collapse;font-size:.92rem}
table.t th,table.t td{text-align:left;padding:.55rem .6rem;border-top:1px solid var(--line);vertical-align:middle}
table.t th{font-size:.78rem;color:var(--mute);border-top:0}
.scroll{overflow-x:auto}