/* ZENHOST Panel — design system (WHMCS 9-ish) */
:root{
  --blue:#1b4ce0; --blue-d:#1540bd; --blue-l:#eef2ff;
  --ink:#0d1526; --ink-2:#3c4658; --mut:#6b7688; --line:#e6e9ef;
  --bg:#f7f8fb; --card:#fff;
  --ok:#1f9254; --ok-l:#e8f7ee;
  --warn:#b7791f; --warn-l:#fdf5e4;
  --bad:#c0392b; --bad-l:#fdeceb;
  --pink:#d6336c; --amber:#e8a020; --violet:#6741d9;
  --r:12px; --r-s:8px; --r-l:18px;
  --sh:0 1px 2px rgba(13,21,38,.05), 0 8px 24px -12px rgba(13,21,38,.12);
  --sh-s:0 1px 3px rgba(13,21,38,.08);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.2;letter-spacing:-.02em;font-weight:700}
h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.15rem}
p{margin:0 0 .8rem}
img{max-width:100%}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.muted{color:var(--mut)}
.small{font-size:.86rem}
.tiny{font-size:.78rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.center{text-align:center}
.right{text-align:right}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}.mt4{margin-top:2.5rem}
.mb0{margin-bottom:0}.mb1{margin-bottom:.5rem}.mb2{margin-bottom:1rem}.mb3{margin-bottom:1.5rem}
.row{display:flex;gap:12px;align-items:center}
.row.wrap{flex-wrap:wrap}
.spread{justify-content:space-between}
.grow{flex:1}
.hide{display:none!important}

/* ---------------- topbar ---------------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.topbar-in{display:flex;align-items:center;gap:26px;height:68px;max-width:1240px;margin:0 auto;padding:0 20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.18rem;letter-spacing:-.03em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--blue),#5b8def);display:grid;place-items:center;color:#fff;font-size:.82rem;font-weight:800}
.brand small{font-weight:600;color:var(--mut);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;display:block;line-height:1}
.nav{display:flex;gap:22px;align-items:center;flex:1}
.nav a{color:var(--ink-2);font-weight:500;font-size:.94rem}
.nav a:hover{color:var(--blue);text-decoration:none}
.nav a.on{color:var(--blue);font-weight:600}
.topbar-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-s);padding:7px 10px;cursor:pointer}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r-s);
  padding:10px 18px;font-size:.92rem;font-weight:600;cursor:pointer;font-family:inherit;transition:.14s;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-d)}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:#eef0f5}
.btn-danger{background:var(--bad);color:#fff}
.btn-ok{background:var(--ok);color:#fff}
.btn-sm{padding:6px 12px;font-size:.84rem}
.btn-lg{padding:13px 26px;font-size:1rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------------- hero (marketing) ---------------- */
.hero{padding:64px 0 56px;background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--bg) 100%)}
.hero-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1240px;margin:0 auto;padding:0 20px}
.hero h1{font-size:3.1rem;font-weight:800;letter-spacing:-.035em;margin-bottom:1rem}
.hero p.lead{font-size:1.12rem;color:var(--ink-2);max-width:34rem}
.hero-art{position:relative}
.shot{border-radius:var(--r-l);padding:3px;background:linear-gradient(140deg,#3b6ff5,#b06ee8 45%,#f7a1c4);box-shadow:0 24px 60px -20px rgba(27,76,224,.35)}
.shot-in{background:#fff;border-radius:15px;padding:16px}
.dash-h{font-weight:700;font-size:.95rem;margin:0 0 10px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{border-radius:10px;padding:12px 14px;color:#fff;display:flex;gap:10px;align-items:center;min-height:62px}
.tile b{font-size:1.35rem;display:block;line-height:1.1}
.tile span{font-size:.74rem;opacity:.95;display:block}
.tile-ok{background:linear-gradient(135deg,#22a35f,#1f8f54)}
.tile-pink{background:linear-gradient(135deg,#e64a86,#cf2f6c)}
.tile-amber{background:linear-gradient(135deg,#f0ae2e,#dd9410)}
.tile-blue{background:linear-gradient(135deg,#3b6ff5,#2050d8)}
.tile-ic{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:.9rem}
.sparkbox{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:12px}
.sparkbox .sh-h{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--mut);font-weight:600;margin-bottom:6px}
.spark{width:100%;height:120px;display:block}

/* ---------------- sections ---------------- */
.section{padding:56px 0}
.section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:44rem;margin:0 auto 34px;text-align:center}
.sec-head h2{font-size:1.9rem}
.sec-head p{color:var(--mut)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.feat-ic{width:40px;height:40px;border-radius:10px;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;font-size:1.05rem;margin-bottom:12px}
.feat h3{margin-bottom:6px}
.feat p{color:var(--mut);margin:0;font-size:.92rem}
.logostrip{display:flex;flex-wrap:wrap;gap:26px 40px;align-items:center;justify-content:center;padding:26px 0;border-top:1px solid var(--line);margin-top:14px}
.logostrip span{font-weight:700;color:#9aa4b5;font-size:.95rem;letter-spacing:-.01em}

/* ---------------- pricing / plans ---------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:26px;display:flex;flex-direction:column;position:relative}
.plan.best{border-color:var(--blue);box-shadow:0 16px 44px -20px rgba(27,76,224,.4)}
.plan-badge{position:absolute;top:-12px;left:26px;background:var(--blue);color:#fff;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.03em}
.plan h3{font-size:1.1rem}
.plan .tag{color:var(--mut);font-size:.88rem;min-height:2.6em}
.plan-price{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin:10px 0 2px}
.plan-price small{font-size:.85rem;font-weight:600;color:var(--mut)}
.plan-feats{list-style:none;margin:16px 0 20px;padding:0;flex:1}
.plan-feats li{padding:6px 0 6px 24px;position:relative;font-size:.9rem;color:var(--ink-2);border-bottom:1px dashed var(--line)}
.plan-feats li:last-child{border-bottom:0}
.plan-feats li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}

/* ---------------- generic card / table ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-s);margin-bottom:20px}
.card-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-head h3{margin:0;font-size:1rem}
.card-body{padding:18px}
.card-body.tight{padding:12px 18px}
table.table{width:100%;border-collapse:collapse;font-size:.9rem}
table.table th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
  padding:11px 14px;border-bottom:1px solid var(--line);background:#fafbfd;font-weight:700;white-space:nowrap}
table.table td{padding:12px 14px;border-bottom:1px solid #f0f2f6;vertical-align:middle}
table.table tr:last-child td{border-bottom:0}
table.table tr:hover td{background:#fafbfd}
.table-wrap{overflow-x:auto}

/* pills */
.pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:.73rem;font-weight:700;white-space:nowrap}
.pill-ok{background:var(--ok-l);color:var(--ok)}
.pill-warn{background:var(--warn-l);color:var(--warn)}
.pill-bad{background:var(--bad-l);color:var(--bad)}
.pill-info{background:var(--blue-l);color:var(--blue)}
.pill-muted{background:#eef0f4;color:var(--mut)}

/* ---------------- forms ---------------- */
.field{margin-bottom:15px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.field .hint{font-size:.78rem;color:var(--mut);margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=search],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);font-family:inherit;font-size:.92rem;
  background:#fff;color:var(--ink);transition:.12s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,76,224,.13)}
textarea{min-height:110px;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-grid .full{grid-column:1/-1}
.check{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:var(--ink-2)}
.check input{width:auto;margin-top:3px}
.alert{padding:12px 15px;border-radius:var(--r-s);font-size:.9rem;margin-bottom:16px;border:1px solid transparent}
.alert-ok{background:var(--ok-l);color:#14603a;border-color:#bfe6ce}
.alert-bad{background:var(--bad-l);color:#8e2a1e;border-color:#f3c9c3}
.alert-warn{background:var(--warn-l);color:#7a5310;border-color:#f0dfb4}
.alert-info{background:var(--blue-l);color:#14357f;border-color:#ccd8fb}

/* ---------------- app shell (client area) ---------------- */
.page-head{padding:26px 0 6px}
.page-head h1{font-size:1.6rem;margin-bottom:2px}
.crumb{font-size:.82rem;color:var(--mut);margin-bottom:6px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;gap:13px;align-items:center}
.stat-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.1rem;flex:0 0 auto}
.stat-ic.ok{background:var(--ok-l);color:var(--ok)}
.stat-ic.warn{background:var(--warn-l);color:var(--warn)}
.stat-ic.blue{background:var(--blue-l);color:var(--blue)}
.stat-ic.pink{background:#fdeaf2;color:var(--pink)}
.stat-ic.bad{background:var(--bad-l);color:var(--bad)}
.stat-val{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.stat-lbl{font-size:.79rem;color:var(--mut);font-weight:600}
.empty{padding:44px 20px;text-align:center;color:var(--mut)}
.empty .big{font-size:2rem;opacity:.5}
.pager{display:flex;gap:6px;justify-content:flex-end;padding:12px 16px}
.pager a,.pager span{padding:5px 10px;border:1px solid var(--line);border-radius:6px;font-size:.84rem;background:#fff}
.pager span.cur{background:var(--blue);color:#fff;border-color:var(--blue)}
.field-inline{display:flex;gap:8px;align-items:center}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filters .field{margin-bottom:0;min-width:160px}

/* ticket thread */
.thread{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.msg{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff}
.msg.staff{background:#f4f7ff;border-color:#d6e0fb}
.msg-h{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;color:var(--mut);margin-bottom:8px}
.msg-body{white-space:pre-wrap;font-size:.93rem}
.msg.staff .msg-h b{color:var(--blue)}

/* invoice document */
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;max-width:800px;margin:0 auto}
.doc-h{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:20px}
.doc-tot{margin-left:auto;width:280px}
.doc-tot div{display:flex;justify-content:space-between;padding:6px 0;font-size:.9rem}
.doc-tot .grand{border-top:2px solid var(--ink);margin-top:8px;padding-top:10px;font-weight:800;font-size:1.1rem}

/* ---------------- admin ---------------- */
.admin-shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.admin-side{background:#0d1526;color:#c3cad9;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-brand{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid #1c2740;color:#fff;font-weight:800}
.admin-brand .brand-mark{background:linear-gradient(135deg,#2f6bf6,#7ea3ff)}
.admin-menu{padding:12px 10px}
.admin-menu .grp{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#5f6b83;padding:14px 12px 6px;font-weight:700}
.admin-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:#c3cad9;font-size:.9rem;font-weight:500}
.admin-menu a:hover{background:#16203a;color:#fff;text-decoration:none}
.admin-menu a.on{background:var(--blue);color:#fff}
.admin-menu .ic{width:17px;text-align:center;opacity:.9}
.admin-main{background:var(--bg);min-width:0}
.admin-top{background:#fff;border-bottom:1px solid var(--line);padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:40}
.admin-top h2{font-size:1.02rem;margin:0}
.admin-body{padding:22px 24px 44px;max-width:1500px}
.badge-txt{background:var(--bad);color:#fff;border-radius:20px;padding:1px 7px;font-size:.7rem;font-weight:700;margin-left:auto}

/* sparkline card */
.chartcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:20px}
.chartcard .ch-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.chartcard .ch-h h3{margin:0;font-size:.98rem}
.chartcard .ch-h .muted{font-size:.8rem}
.chartcard svg{width:100%;height:200px;display:block}

/* ---------------- footer ---------------- */
.footer{background:#0d1526;color:#9aa4b5;padding:46px 0 26px;margin-top:40px;font-size:.88rem}
.footer a{color:#c3cad9}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:26px}
.footer h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{padding:3px 0}
.footer .bot{border-top:1px solid #1c2740;padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* auth pages */
.auth-wrap{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:44px 20px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh);padding:32px;width:100%;max-width:430px}
.auth-card h1{font-size:1.35rem;margin-bottom:4px}
.auth-side{width:100%;max-width:430px}

@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:38px}
  .hero h1{font-size:2.3rem}
  .g4,.stat-grid{grid-template-columns:repeat(2,1fr)}
  .g3,.plans{grid-template-columns:1fr}
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:static;height:auto}
  .admin-menu{display:flex;flex-wrap:wrap;gap:4px}
  .admin-menu .grp{display:none}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;
    padding:14px 20px;border-bottom:1px solid var(--line);gap:14px}
  .burger{display:block}
  .form-grid{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .hero h1{font-size:2rem}
  .doc{padding:18px}
}


/* ======================================================================
 * CHROME WHMCS — bar atas navy + sidebar ringkas (admin)
 * dan header/strip/nav/sidebar (client area).
 * Warna & struktur diambil dari frame video tour resmi WHMCS.
 * ==================================================================== */
:root{
  --whm-navy:#17395e; --whm-navy-d:#122c49;
  --whm-side:#eef1f5; --whm-side-line:#dbe1e9; --whm-side-txt:#3b4b63;
  --whm-green:#22a35f; --whm-green-d:#1c8a50;
  --whm-pink:#e8447f; --whm-orange:#e8931e; --whm-cyan:#46b8c8;
  --whm-strip:#2f3a48;
}

/* ---------- admin: top navy bar ---------- */
.whm-top{background:var(--whm-navy);color:#fff;height:46px;display:flex;align-items:center;gap:4px;
  padding:0 10px;position:sticky;top:0;z-index:70}
.whm-top .whm-logo{font-weight:800;letter-spacing:-.02em;font-size:1.22rem;color:#fff;margin-right:10px;
  white-space:nowrap;display:flex;align-items:center;gap:6px}
.whm-top .whm-logo i{width:14px;height:14px;border-radius:50%;
  background:conic-gradient(#22a35f,#46b8c8,#e8931e,#e8447f,#22a35f);display:inline-block}
.whm-add{width:26px;height:26px;border-radius:5px;background:var(--whm-green);color:#fff;display:grid;
  place-items:center;font-weight:800;font-size:1rem;line-height:1;margin-right:8px;flex:0 0 auto}
.whm-add:hover{background:var(--whm-green-d);color:#fff;text-decoration:none}
.whm-menu{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.whm-menu::-webkit-scrollbar{display:none}
.whm-menu>a{color:#e7edf6;font-size:.875rem;font-weight:600;padding:7px 12px;border-radius:5px;white-space:nowrap}
.whm-menu>a:hover{background:var(--whm-navy-d);color:#fff;text-decoration:none}
.whm-menu>a.on{background:var(--whm-navy-d);color:#fff;box-shadow:inset 0 -2px 0 var(--whm-green)}
.whm-icons{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.whm-icons a{color:#cfdaea;padding:6px 8px;border-radius:5px;font-size:1rem;line-height:1}
.whm-icons a:hover{background:var(--whm-navy-d);color:#fff;text-decoration:none}
.whm-icons .avatar{width:26px;height:26px;border-radius:50%;background:#46648c;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;color:#fff}

/* ---------- admin: sidebar ---------- */
.whm-side{background:var(--whm-side);border-right:1px solid var(--whm-side-line);padding:10px;width:236px;
  flex:0 0 236px;min-height:calc(100vh - 46px)}
.whm-panel{background:#fff;border:1px solid var(--whm-side-line);border-radius:5px;margin-bottom:10px;overflow:hidden}
.whm-panel-h{background:#e4e9f0;border-bottom:1px solid var(--whm-side-line);padding:7px 10px;font-size:.78rem;
  font-weight:700;color:#44566f;display:flex;align-items:center;gap:7px;text-transform:none}
.whm-panel-b{padding:8px 10px}
.whm-link{display:flex;align-items:center;gap:7px;padding:4px 0;font-size:.82rem;color:var(--whm-side-txt)}
.whm-link:hover{color:var(--whm-blue);text-decoration:none}
.whm-link .ic{width:14px;text-align:center;opacity:.75;font-size:.8rem}
.whm-side .kv{font-size:.78rem;color:#55647c;padding:2px 0}
.whm-side .kv b{color:#2f3d52}
.whm-side select,.whm-side input[type=text]{font-size:.82rem;padding:5px 7px;margin-bottom:6px}
.whm-min{display:block;text-align:center;background:#41546e;color:#fff;font-size:.78rem;font-weight:600;
  padding:6px;border-radius:4px}
.whm-min:hover{background:#33445c;color:#fff;text-decoration:none}

/* ---------- admin: layout ---------- */
.whm-body{display:flex;align-items:flex-start}
.whm-main{flex:1;min-width:0;padding:18px 20px 60px;background:var(--bg)}
.whm-pageh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.whm-pageh h1{font-size:1.6rem;font-weight:700;margin:0}

/* ---------- admin: colored stat tiles ---------- */
.whm-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.whm-tile{border-radius:5px;padding:14px 16px;color:#fff;display:flex;align-items:center;gap:14px;min-height:78px}
.whm-tile .big{font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.whm-tile .lbl{font-size:.86rem;font-weight:600;opacity:.97;margin-top:3px}
.whm-tile .ic{font-size:1.9rem;opacity:.95}
.t-green{background:linear-gradient(180deg,#2fae68,#249553)}
.t-pink{background:linear-gradient(180deg,#ea4d86,#d92d6d)}
.t-orange{background:linear-gradient(180deg,#eda22c,#dc8b0d)}
.t-cyan{background:linear-gradient(180deg,#4cbccb,#37a5b5)}

/* ---------- admin: widgets ---------- */
.whm-grid{display:grid;gap:14px;grid-template-columns:2fr 1fr}
.whm-widget{background:#fff;border:1px solid var(--line);border-radius:5px;margin-bottom:14px}
.whm-widget-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;
  border-bottom:1px solid var(--line)}
.whm-widget-h h3{margin:0;font-size:.92rem;font-weight:700;color:#2f3d52}
.whm-widget-tools{display:flex;gap:8px;color:#9aa7b8;font-size:.85rem}
.whm-widget-tools span{cursor:pointer}
.whm-widget-b{padding:14px}
.whm-period{display:flex;gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.whm-period a{padding:4px 11px;font-size:.78rem;color:#4a5a72;background:#fff;border-right:1px solid var(--line)}
.whm-period a:last-child{border-right:0}
.whm-period a.on{background:#e8eef7;color:#1b3a5f;font-weight:700}
.whm-period a:hover{text-decoration:none;background:#f2f5fa}
.whm-legend{display:flex;gap:16px;font-size:.76rem;color:#5c6b82;margin-bottom:6px}
.whm-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px}
.big-money{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.big-money small{display:block;font-size:.78rem;font-weight:600;color:var(--mut);letter-spacing:0}
.m-g{color:var(--whm-green)} .m-o{color:var(--whm-orange)} .m-p{color:var(--whm-pink)} .m-k{color:var(--ink)}
.money-4{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.act-circles{display:flex;gap:18px;margin-bottom:12px}
.act-c{border:2px solid var(--line);border-radius:50%;width:76px;height:76px;display:grid;place-items:center;
  text-align:center;font-size:.72rem;font-weight:700;color:#41546e;line-height:1.2}
.act-c.o{border-color:#f0b349} .act-c.g{border-color:#7fd0a0}
.act-list{list-style:none;margin:0;padding:0}
.act-list li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #f1f4f8;font-size:.84rem}
.act-list li:last-child{border-bottom:0}
.whm-panelgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* ---------- client area chrome ---------- */
.ca-strip{background:var(--whm-strip);color:#c8d2de;font-size:.8rem;padding:6px 0}
.ca-strip .in{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.ca-strip a{color:#dbe4ee}
.ca-head{background:#fff;border-bottom:1px solid var(--line)}
.ca-head .in{max-width:1180px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:20px}
.ca-logo{font-weight:800;font-size:1.9rem;letter-spacing:-.04em;color:#1c2b3a;line-height:1;display:flex;align-items:center;gap:2px}
.ca-logo i{width:20px;height:20px;border-radius:50%;display:inline-block;
  background:conic-gradient(#22a35f,#46b8c8,#e8931e,#e8447f,#22a35f)}
.ca-search{flex:1;max-width:430px}
.ca-search input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:4px;font-size:.86rem}
.ca-cart{position:relative;width:40px;height:36px;border:1px solid var(--line);border-radius:4px;display:grid;
  place-items:center;color:#41546e}
.ca-cart .badge{position:absolute;top:-6px;right:-6px;background:var(--whm-cyan);color:#fff;font-size:.68rem;
  font-weight:700;border-radius:20px;padding:1px 6px}
.ca-nav{background:#fff;border-bottom:1px solid var(--line)}
.ca-nav .in{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ca-nav a{color:#2f3b4c;font-size:.9rem;font-weight:600;padding:12px 12px;border-bottom:3px solid transparent}
.ca-nav a:hover{color:var(--blue);text-decoration:none}
.ca-nav a.on{color:var(--blue);border-bottom-color:var(--blue)}
.ca-nav .right{margin-left:auto}
.ca-crumb{background:#f2f4f7;border-bottom:1px solid var(--line);font-size:.8rem;color:#5c6b82;padding:7px 0}
.ca-crumb .in{max-width:1180px;margin:0 auto;padding:0 16px}
.ca-layout{max-width:1180px;margin:0 auto;padding:20px 16px 60px;display:grid;grid-template-columns:242px 1fr;gap:22px;align-items:start}
.ca-side{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-bottom:14px}
.ca-side-h{background:#f6f8fa;border-bottom:1px solid var(--line);padding:11px 14px;font-weight:700;font-size:.88rem;
  color:#2f3b4c;display:flex;align-items:center;justify-content:space-between;gap:8px}
.ca-side-b a{display:block;padding:9px 14px;font-size:.85rem;color:#3c4b60;border-bottom:1px solid #f2f4f7}
.ca-side-b a:last-child{border-bottom:0}
.ca-side-b a:hover{background:#f7f9fc;color:var(--blue);text-decoration:none}
.ca-side-b a.on{background:#eef3fb;color:var(--blue);font-weight:600}

/* choice rows (register / transfer / nameserver) */
.choice{display:flex;gap:10px;align-items:center;padding:11px 14px;background:#fff;border:1px solid var(--line);
  border-radius:4px;margin-bottom:9px;font-size:.9rem}
.choice input{width:auto}
.tld-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.tld{border:1px solid var(--line);border-radius:4px;background:#fff;padding:18px 10px;text-align:center;position:relative}
.tld b{display:block;font-size:1.05rem;color:#2f3b4c}
.tld .ribbon{position:absolute;top:0;right:0;background:var(--whm-pink);color:#fff;font-size:.66rem;font-weight:700;
  padding:2px 8px;border-radius:0 4px 0 4px}
.tld .ribbon.y{background:var(--whm-orange)}

@media (max-width:1100px){
  .whm-tiles,.whm-panelgrid{grid-template-columns:repeat(2,1fr)}
  .whm-grid{grid-template-columns:1fr}
  .ca-layout{grid-template-columns:1fr}
  .whm-side{display:none}
}

/* dropdown menu di nav client area */
.ca-drop{position:relative;display:inline-block}
.ca-drop>summary{list-style:none;cursor:pointer;color:#2f3b4c;font-size:.9rem;font-weight:600;
  padding:12px 12px;border-bottom:3px solid transparent;display:inline-block}
.ca-drop>summary::-webkit-details-marker{display:none}
.ca-drop>summary:hover{color:var(--blue)}
.ca-drop>summary.on{color:var(--blue);border-bottom-color:var(--blue)}
.ca-drop[open]>summary{color:var(--blue);border-bottom-color:var(--blue)}
.ca-dropmenu{position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--line);
  border-radius:0 0 5px 5px;box-shadow:0 12px 28px -12px rgba(13,21,38,.28);z-index:80;padding:6px 0}
.ca-dropmenu a{display:block;padding:9px 16px;font-size:.87rem;color:#3c4b60;font-weight:500}
.ca-dropmenu a:hover{background:#f2f6fc;color:var(--blue);text-decoration:none}

/* domain search */
.domrow{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.domrow .pre{background:#f2f4f7;border:1px solid var(--line);border-right:0;border-radius:4px 0 0 4px;
  padding:9px 12px;font-size:.9rem;color:#5c6b82;display:flex;align-items:center}
.domrow input[type=text]{flex:1;min-width:180px;border-radius:0}
.domrow select{width:auto;min-width:110px;border-radius:0}
.domrow .btn{border-radius:0 4px 4px 0}
.domres{font-size:.86rem;padding:6px 0}
.domres .av{color:var(--whm-green);font-weight:700}
.domres .tk{color:var(--bad);font-weight:700}