/* ============================================================
   LIBERTAAD SFA SUPPORT — PWA
   Tema: Coffee (brown) + Gold + WhatsApp green (untuk chat)
   ============================================================ */
:root{
  --coffee-900:#0d0d0d;
  --coffee-800:#141414;
  --coffee-700:#1f1f1f;
  --coffee-600:#2b2b2b;
  --brand:#141414;
  --gold-600:#b98a2f;
  --gold-500:#d2a94f;
  --gold-400:#e5c078;
  --gold-100:#f8eed6;
  --brand-green:#2f7d5f;
  --wa-green:#075e54;
  --wa-green-dark:#054b42;
  --wa-bubble:#d9fdd3;
  --wa-accent:#00a884;
  --wa-tick:#53bdeb;
  --paper:#f4f1ea;
  --card:#ffffff;
  --ink:#241a12;
  --muted:#8a796a;
  --line:#e8e0d3;
  --red:#c0392b;
  --radius:14px;
  --shadow:0 1px 3px rgba(47,27,16,.08), 0 4px 14px rgba(47,27,16,.06);
  --nav-h:62px;
  --top-h:58px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit;font-size:15px}
.hidden{display:none !important}

/* ============ LAYOUT SHELL ============ */
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:1200px;margin:0 auto;background:var(--paper)}
main{flex:1;min-height:0;display:flex;flex-direction:column}
.view{flex:1;min-height:0;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.view.active{display:block;animation:viewIn .18s ease}
#view-chat.active{display:flex;flex-direction:column;overflow:hidden}
body.in-chat .topbar{display:none}
@keyframes viewIn{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ============ TOP BAR ============ */
.topbar{
  flex:0 0 auto;height:var(--top-h);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 14px;padding-top:env(safe-area-inset-top);
  background:linear-gradient(135deg,var(--brand) 0%,var(--coffee-700) 70%,#101b16);
  color:#fff;box-shadow:var(--shadow);z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo{width:36px;height:36px;border-radius:10px;box-shadow:0 0 0 2px var(--gold-500)}
.brand-text h1{font-size:15px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.brand-text p{font-size:11px;color:var(--gold-400);white-space:nowrap}
.net-chip{
  display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  background:rgba(255,255,255,.12);padding:5px 10px;border-radius:999px;white-space:nowrap;
}
.net-dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 6px #3ddc84}
.net-chip.offline .net-dot{background:#ff7043;box-shadow:0 0 6px #ff7043}

/* ============ BOTTOM NAV ============ */
.bottomnav{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);z-index:20;box-shadow:0 -2px 12px rgba(47,27,16,.06);
}
.bnav-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 2px 7px;color:var(--muted);font-size:10.5px;font-weight:600;
  position:relative;transition:color .15s;
}
.bnav-btn svg{opacity:.85}
.bnav-btn.active{color:var(--coffee-700)}
.bnav-btn.active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34px;height:3px;border-radius:0 0 4px 4px;background:var(--gold-500);
}

/* ============ TOAST ============ */
.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--coffee-800);color:#fff;padding:10px 16px;border-radius:999px;
  font-size:13px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:all .25s ease;z-index:99;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============ BERANDA ============ */
.home{padding:18px 16px 30px;max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.hero{
  background:linear-gradient(150deg,var(--brand) 0%,var(--coffee-700) 55%,#152419 100%);
  color:#fff;border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-70px;bottom:-90px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(210,169,79,.16),transparent 70%);
}
.hero-logo{width:56px;height:56px;border-radius:16px;box-shadow:0 0 0 3px var(--gold-500),0 8px 18px rgba(0,0,0,.3);margin-bottom:12px}
.hero h2{font-size:20px;margin-bottom:6px}
.hero-sub{font-size:13.5px;color:#e9dcc9;max-width:52ch;position:relative}
.badges{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;position:relative}
.chip{
  font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2);
}
.chip.gold{background:var(--gold-500);color:var(--coffee-900);border-color:var(--gold-400)}

.home-search,.searchbar{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 16px;box-shadow:var(--shadow);color:var(--muted);
}
.home-search input,.searchbar input{flex:1;border:none;outline:none;background:transparent;font-size:14.5px;color:var(--ink);min-width:0}
.clear-btn{color:var(--muted);font-size:15px;font-weight:700;padding:2px 6px;border-radius:50%}
.clear-btn:active{background:var(--line)}

.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qcard{
  display:flex;align-items:flex-start;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 14px;text-align:left;box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
.qcard:active{transform:scale(.97)}
.qicon{font-size:26px;line-height:1}
.qcard b{display:block;font-size:14px;margin-bottom:2px}
.qcard small{color:var(--muted);font-size:11.5px;line-height:1.35;display:block}

.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.contact-card h4{font-size:14px;margin-bottom:10px;color:var(--coffee-700)}
.contact-card ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.contact-card li{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.contact-card li:last-of-type{border-bottom:none;padding-bottom:0}
.contact-card li b{color:var(--muted);font-weight:600;flex:1}
.contact-card li span{font-weight:700;color:var(--ink);text-align:right}
.btn-gold{
  margin-top:14px;width:100%;background:linear-gradient(135deg,var(--gold-500),var(--gold-600));
  color:var(--coffee-900);font-weight:800;font-size:14px;padding:12px;border-radius:999px;
  box-shadow:0 4px 12px rgba(185,130,47,.35);
}
.home-foot{text-align:center;color:var(--muted);font-size:11.5px}

/* ============ PANDUAN ============ */
.manual-layout{display:block}
.toc{padding:14px 16px 0}
.toc-details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.toc-details summary{
  cursor:pointer;font-weight:800;font-size:14px;padding:13px 16px;color:var(--coffee-700);
  list-style:none;display:flex;align-items:center;justify-content:space-between;
}
.toc-details summary::after{content:"▾";color:var(--gold-600);transition:transform .2s}
.toc-details[open] summary::after{transform:rotate(180deg)}
.toc-nav{max-height:220px;overflow-y:auto;padding:0 8px 10px}
.toc-nav a{
  display:block;padding:7px 10px;font-size:12.5px;color:var(--ink);text-decoration:none;
  border-radius:8px;line-height:1.35;border-left:2px solid transparent;
}
.toc-nav a:hover,.toc-nav a:focus{background:var(--gold-100);border-left-color:var(--gold-500);outline:none}

.manual-main{padding:14px 16px 40px}
.search-info{
  background:var(--gold-100);border:1px solid var(--gold-400);color:var(--coffee-700);
  font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:10px;margin:0 0 12px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.search-info button{color:var(--gold-600);font-weight:800;font-size:12px;text-decoration:underline}

.manual-body{display:flex;flex-direction:column;gap:14px}
.msec{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 14px;box-shadow:var(--shadow);scroll-margin-top:12px;
}
.msec.flash{animation:flash 1.6s ease}
@keyframes flash{0%,60%{box-shadow:0 0 0 3px var(--gold-400)}100%{box-shadow:var(--shadow)}}
.msec > h2{
  font-size:16.5px;color:var(--coffee-800);letter-spacing:.01em;
  padding-left:12px;border-left:4px solid var(--gold-500);margin-bottom:12px;line-height:1.4;
}
.msec h3{font-size:14px;color:var(--coffee-600);margin:16px 0 8px}
.msec h4{font-size:13.5px;margin:12px 0 6px}
.msec p{margin:8px 0;font-size:13.8px}
.msec ul,.msec ol{margin:8px 0 8px 20px;font-size:13.8px}
.msec li{margin:5px 0}
.msec ul.sub{margin:5px 0 5px 18px}
.msec strong{color:var(--coffee-800)}
.msec hr{border:none;border-top:1px dashed var(--line);margin:14px 0}
.msec a{color:var(--wa-accent);text-decoration:none;font-weight:600}
.msec code{
  background:var(--gold-100);color:var(--coffee-700);border:1px solid var(--gold-400);
  padding:1px 7px;border-radius:6px;font-size:12.5px;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;
}
.msec table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px;overflow:hidden;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.msec thead th{background:var(--coffee-800);color:#fff;padding:10px 12px;font-size:12.5px;letter-spacing:.02em}
.msec tbody td{padding:9px 12px;border-top:1px solid var(--line)}
.msec tbody tr:nth-child(even){background:#faf7f1}
.msec blockquote{
  background:#fdf6e8;border-left:4px solid var(--gold-500);border-radius:0 10px 10px 0;
  padding:12px 14px;margin:12px 0;font-size:13.5px;
}
.msec blockquote p{margin:6px 0}
.msec blockquote ul,.msec blockquote ol{margin:6px 0 6px 18px}
.formula{display:flex;justify-content:center;margin:14px 0}
.formula > span{
  background:var(--coffee-800);color:var(--gold-400);font-weight:800;font-size:15px;
  padding:11px 22px;border-radius:999px;letter-spacing:.02em;box-shadow:var(--shadow);text-align:center;
}
.math{font-weight:700;color:var(--coffee-600)}
.manual-intro{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.manual-intro h1{font-size:19px;color:var(--coffee-800);line-height:1.4;margin-bottom:4px}
.manual-intro h3{font-size:13px;color:var(--gold-600);font-style:italic;margin:2px 0 10px;font-weight:600}

/* ============ TANYA JAWAB ============ */
.qa-wrap{padding:16px 16px 40px;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.qa-head h3{font-size:18px;color:var(--coffee-800)}
.qa-head p{font-size:13px;color:var(--muted)}
.cat-pills{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.cat-pill{
  flex:0 0 auto;font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:999px;
  background:#fff;border:1.5px solid var(--line);color:var(--muted);transition:all .15s;
}
.cat-pill.active{background:var(--coffee-800);border-color:var(--coffee-800);color:#fff}
.qa-list{display:flex;flex-direction:column;gap:10px}
.qa-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.qa-q{
  width:100%;display:flex;align-items:flex-start;gap:10px;text-align:left;padding:14px;
}
.qa-num{
  flex:0 0 auto;background:var(--gold-100);color:var(--coffee-700);border:1px solid var(--gold-400);
  font-size:11px;font-weight:800;padding:3px 8px;border-radius:7px;margin-top:1px;
}
.qa-qt{flex:1;font-size:13.8px;font-weight:700;line-height:1.45;color:var(--ink)}
.qa-chev{flex:0 0 auto;color:var(--muted);transition:transform .2s;margin-top:2px}
.qa-card.open .qa-chev{transform:rotate(180deg)}
.qa-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.qa-card.open .qa-a{max-height:900px}
.qa-cbody{
  border-top:1px dashed var(--line);padding:14px;font-size:13.5px;color:#3a2c1f;
  background:#fdfbf7;
}
.qa-cbody p{margin:6px 0}
.qa-cbody .b-list{margin:6px 0 6px 2px}
.qa-cbody .b-li{padding:2.5px 0 2.5px 2px}
.qa-ask{
  margin-top:12px;display:inline-flex;align-items:center;gap:6px;
  background:var(--wa-bubble);color:#0b5e3d;border:1px solid #b8e6bf;
  font-size:12.5px;font-weight:800;padding:8px 14px;border-radius:999px;
}
.qa-ask:active{transform:scale(.97)}
.qa-cat-badge{display:inline-block;font-size:10.5px;font-weight:800;color:var(--wa-accent);background:#e7f6f0;border-radius:5px;padding:2px 7px;margin-bottom:7px;letter-spacing:.02em}
.qa-empty{text-align:center;color:var(--muted);font-size:13.5px;padding:30px 10px}
.linklike{color:var(--wa-accent);font-weight:800;text-decoration:underline}

/* ============ CHAT (gaya WhatsApp) ============ */
.chat-header{
  flex:0 0 auto;display:flex;align-items:center;gap:11px;
  background:linear-gradient(135deg,var(--wa-green),var(--wa-green-dark));
  color:#fff;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top));
  box-shadow:0 2px 8px rgba(0,0,0,.18);z-index:5;
}
.chat-avatar{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 2px var(--gold-500)}
.chat-id{flex:1;min-width:0;line-height:1.25}
.chat-id b{font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-id span{font-size:12px;opacity:.85}
.icon-btn{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  color:inherit;transition:background .15s;
}
.icon-btn:active{background:rgba(255,255,255,.15)}
.icon-btn.ghost{color:var(--muted);width:34px;height:34px;font-size:19px;background:transparent}

.chat-body{
  flex:1;min-height:0;overflow-y:auto;padding:14px 12px 8px;
  background-color:#ece5dd;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96'><g fill='%236b4a2b' fill-opacity='0.055'><circle cx='16' cy='22' r='6'/><ellipse cx='66' cy='16' rx='10' ry='5' transform='rotate(-22 66 16)'/><circle cx='52' cy='62' r='4'/><ellipse cx='22' cy='74' rx='8' ry='4.5' transform='rotate(16 22 74)'/><circle cx='80' cy='76' r='5'/><circle cx='46' cy='38' r='2.5'/></g></svg>");
}
.chat-note{
  background:#fdf3d0;border:1px solid #f0dca0;color:#6b5416;font-size:11.5px;line-height:1.45;
  border-radius:10px;padding:9px 12px;margin:0 auto 12px;max-width:92%;
}
.day-pill{
  width:max-content;max-width:85%;background:#fff;color:#7a6a5c;font-size:11.5px;font-weight:600;
  padding:5px 13px;border-radius:999px;margin:4px auto 14px;box-shadow:0 1px 2px rgba(0,0,0,.08);text-align:center;
}
.msg{display:flex;margin:3px 0;animation:msgIn .2s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.user{justify-content:flex-end}
.bubble{
  max-width:82%;padding:7px 9px 6px;border-radius:10px;position:relative;
  font-size:14px;line-height:1.45;box-shadow:0 1px 1.5px rgba(0,0,0,.12);word-wrap:break-word;
}
.msg.bot .bubble{background:#fff;border-top-left-radius:4px}
.msg.user .bubble{background:var(--wa-bubble);border-top-right-radius:4px}
.bubble p{margin:2px 0}
.bubble .b-list{margin:2px 0}
.bubble .b-li{padding:1px 0}
.bubble strong{font-weight:700}
.meta{
  display:inline-flex;align-items:center;gap:3px;float:right;margin:8px 0 0 8px;
  font-size:10.5px;color:#8f8477;white-space:nowrap;
}
.msg.user .meta{color:#5e7d64}
.ticks{color:var(--wa-tick);font-size:11.5px;letter-spacing:-2.5px;font-weight:700}
.b-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.b-action{
  background:#fff;color:var(--wa-accent);border:1.5px solid var(--wa-accent);
  font-size:12.5px;font-weight:800;padding:7px 13px;border-radius:999px;
}
.msg.user .b-action{border-color:var(--coffee-700);color:var(--coffee-700);background:var(--gold-100)}
.b-action:active{transform:scale(.96)}

.msg.typing .bubble{display:flex;gap:5px;align-items:center;padding:13px 15px}
.msg.typing .dot{width:7px;height:7px;border-radius:50%;background:#9aa89e;animation:blink 1.2s infinite}
.msg.typing .dot:nth-child(2){animation-delay:.18s}
.msg.typing .dot:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}

.chat-chips{
  flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding:8px 12px 4px;
  background:#f5f1ea;border-top:1px solid #e0d8cc;scrollbar-width:none;
}
.chat-chips::-webkit-scrollbar{display:none}
.chat-chip{
  flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--wa-accent);
  background:#fff;border:1.5px solid var(--wa-accent);border-radius:999px;padding:7px 13px;
  transition:all .12s;
}
.chat-chip:active{background:var(--wa-bubble);transform:scale(.96)}

.chat-inputbar{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 10px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
  background:#f5f1ea;
}
.chat-inputbar input{
  flex:1;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:11px 16px;font-size:14.5px;outline:none;min-width:0;
}
.chat-inputbar input:focus{border-color:var(--wa-accent)}
.send-btn{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#00c192,var(--wa-accent));color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(0,168,132,.4);
}
.send-btn:active{transform:scale(.92)}

/* ============ RESPONSIVE ============ */
@media (min-width:900px){
  .manual-layout{display:grid;grid-template-columns:270px 1fr;gap:16px;align-items:start}
  .toc{position:sticky;top:12px}
  .toc-details summary{padding:14px 16px}
  .toc-nav{max-height:calc(100vh - 180px)}
  .msec > h2{font-size:18px}
}
@media (max-width:380px){
  .qcard{padding:12px}
  .qcard b{font-size:13px}
  .bubble{max-width:88%}
}

/* ============ ADMIN: KELOLA KONTEN ============ */
.topbar-actions{display:flex;align-items:center;gap:9px}
.topbar-icon{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  color:var(--gold-400);transition:background .15s, transform .15s;
}
.topbar-icon:active{background:rgba(255,255,255,.12);transform:rotate(40deg)}

.admin-view{display:none}
#view-admin.active{display:block}
.admin-head{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;
  background:var(--paper);padding:12px 14px 8px;border-bottom:1px solid var(--line);
}
.back-btn{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);
  font-size:16px;font-weight:800;color:var(--coffee-700);box-shadow:var(--shadow);
}
.admin-title{flex:1;min-width:0;line-height:1.25}
.admin-title b{font-size:15px}
.admin-title small{display:block;color:var(--muted);font-size:10.5px}
.chip.ok{background:#e7f6f0;color:#0b7a55;border-color:#bfe5d4}
.chip.warn{background:#fdf3d0;color:#8a6d1a;border-color:#efdca4}

.admin-tabs{display:flex;gap:8px;padding:10px 14px 0}
.atab{
  font-size:13px;font-weight:800;padding:9px 14px;border-radius:11px 11px 0 0;
  background:#eee8dc;color:var(--muted);border:1px solid var(--line);border-bottom:none;
}
.atab.active{background:#fff;color:var(--coffee-800)}
.ccount{background:var(--gold-100);color:var(--coffee-700);border:1px solid var(--gold-400);border-radius:999px;padding:1px 7px;font-size:11px}

.apanel{padding:0 14px 40px;border-top:1px solid var(--line);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.03);min-height:200px}
.admin-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px 2px;border-bottom:1px dashed var(--line);
}
.toolbar-note{color:var(--muted);font-size:11px}
.searchbar.small{padding:7px 13px;font-size:13px;min-width:170px;flex:0 1 220px}

.btn-primary{
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:#1c1408;
  font-weight:800;font-size:13px;padding:10px 16px;border-radius:999px;box-shadow:0 3px 10px rgba(185,138,47,.3);
}
.btn-secondary{
  background:#fff;border:1.5px solid var(--line);color:var(--coffee-700);
  font-weight:700;font-size:12.5px;padding:9px 14px;border-radius:999px;
}
.btn-danger{background:#fdecec;color:#b03030;border:1.5px solid #f3c1c1;font-weight:800;font-size:12.5px;padding:9px 14px;border-radius:999px}
.btn-primary:active,.btn-secondary:active,.btn-danger:active{transform:scale(.97)}

.admin-list{padding:6px 2px}
.arow{
  display:flex;align-items:flex-start;gap:10px;padding:12px 4px;border-bottom:1px solid #f1ece1;
}
.arow:last-child{border-bottom:none}
.arow-main{flex:1;min-width:0}
.arow-q{font-size:13.5px;font-weight:700;line-height:1.4}
.arow-meta{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.abadge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:5px;letter-spacing:.02em}
.abadge.resmi{background:#eef0f2;color:#5c6670}
.abadge.diubah{background:#e7f0fb;color:#2f5f9e}
.abadge.tambahan{background:#e7f6f0;color:#0b7a55}
.abadge.cat{background:var(--gold-100);color:var(--coffee-700);border:1px solid var(--gold-400)}
.arow-actions{display:flex;gap:6px;flex:0 0 auto}
.abtn{
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);font-size:14px;
}
.abtn.del{color:#b03030;border-color:#f0c9c9}
.abtn:active{transform:scale(.92)}

.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:14px}
.adcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px}
.adcard h5{font-size:13px;margin-bottom:7px}
.adcard p{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.adcard p b{color:var(--ink)}
.adcard.danger{background:#fdf6f6;border-color:#f0d3d3}
.adbtn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pin-input{
  flex:1;min-width:110px;border:1.5px solid var(--line);border-radius:999px;padding:9px 14px;
  font-size:14px;font-weight:800;letter-spacing:.25em;text-align:center;outline:none;background:#fff;
}
.pin-input:focus{border-color:var(--gold-500)}

/* modal */
.modal{
  position:fixed;inset:0;z-index:80;background:rgba(10,8,4,.55);backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  width:100%;max-width:640px;background:#fff;border-radius:18px 18px 0 0;
  max-height:92vh;display:flex;flex-direction:column;animation:slideUp .2s ease;
}
@keyframes slideUp{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
.modal-box.tall{max-height:94vh}
.modal-box.narrow{max-width:380px}
@media (min-width:700px){
  .modal{align-items:center}
  .modal-box{border-radius:18px}
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 18px;border-bottom:1px solid var(--line);font-size:15px;
}
.modal-x{font-size:15px;color:var(--muted);width:32px;height:32px;border-radius:50%}
.modal-x:active{background:var(--line)}
.modal-body{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.modal-body label{font-size:12px;font-weight:800;color:var(--muted);margin-top:6px}
.modal-body input,.modal-body textarea{
  width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:14px;outline:none;resize:vertical;background:#fdfcf9;
}
.modal-body input:focus,.modal-body textarea:focus{border-color:var(--gold-500)}
.modal-foot{
  display:flex;justify-content:flex-end;gap:9px;padding:13px 18px;
  border-top:1px solid var(--line);padding-bottom:calc(13px + env(safe-area-inset-bottom));
}
.pin-err{color:#b03030;font-size:12px;font-weight:700}
.pin-input.big{letter-spacing:.35em;font-size:17px}

.editor-switch{display:flex;gap:8px}
.esw{
  font-size:12.5px;font-weight:800;padding:8px 14px;border-radius:999px;
  background:#eee8dc;color:var(--muted);
}
.esw.active{background:var(--coffee-800);color:#fff}
.md-area{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  min-height:260px;line-height:1.5;
}
.md-preview{
  border:1.5px dashed var(--line);border-radius:10px;padding:14px;min-height:260px;
  background:#fdfcf9;
}
.md-preview > h2{font-size:16px;color:var(--coffee-800);padding-left:12px;border-left:4px solid var(--gold-500);margin-bottom:10px}
.md-preview > h3{font-size:13.5px;color:var(--coffee-600);margin:12px 0 6px}
.md-preview p{font-size:13px;margin:7px 0}
.md-preview ul,.md-preview ol{margin:7px 0 7px 20px;font-size:13px}
.md-preview blockquote{background:#fdf6e8;border-left:4px solid var(--gold-500);border-radius:0 10px 10px 0;padding:10px 12px;margin:10px 0;font-size:12.5px}
.md-preview table{width:100%;border-collapse:collapse;margin:10px 0;font-size:12px}
.md-preview thead th{background:var(--coffee-800);color:#fff;padding:8px 10px}
.md-preview tbody td{padding:7px 10px;border-top:1px solid var(--line)}
.md-preview code{background:var(--gold-100);color:var(--coffee-700);border:1px solid var(--gold-400);padding:1px 6px;border-radius:6px;font-size:11.5px;font-weight:700}
.md-preview hr{border:none;border-top:1px dashed var(--line);margin:12px 0}
.formula{display:flex;justify-content:center;margin:12px 0}
.formula > span{background:var(--brand);color:var(--gold-400);font-weight:800;font-size:14px;padding:10px 18px;border-radius:999px}

/* ============ FORM IDENTITAS (branding) ============ */
.brand-intro{font-size:12.5px;color:var(--muted);padding:12px 2px 0;line-height:1.5}
.formcard label{font-size:11.5px;font-weight:800;color:var(--muted);margin-top:9px;display:block}
.formcard input:not([type="color"]),.formcard textarea{
  width:100%;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;
  font-size:13.5px;outline:none;background:#fff;resize:vertical;
}
.formcard input:not([type="color"]):focus,.formcard textarea:focus{border-color:var(--gold-500)}
.formcard input[type="color"]{
  width:58px;height:40px;border:1.5px solid var(--line);border-radius:10px;
  padding:3px;background:#fff;cursor:pointer;
}

/* ================= HELPDESK HUB — kartu direktori ================= */
.section-title {
  font-size: 15px;
  color: var(--coffee-900);
  margin: 18px 4px 10px;
}
.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.appcard {
  display: flex;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.appcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.12);
  border-color: rgba(210, 169, 79, 0.55);
}
.appcard-icon {
  font-size: 30px;
  line-height: 1;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #141414 0%, #2b2b2b 100%);
  border-radius: 14px;
}
.appcard-body { flex: 1; min-width: 0; }
.appcard-body b { font-size: 15px; color: var(--coffee-900); display: block; }
.appcard-role {
  display: inline-block;
  margin: 3px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #8a6d2c;
  background: rgba(210, 169, 79, 0.16);
  border-radius: 999px;
  padding: 2px 9px;
}
.appcard-body p {
  font-size: 12.5px;
  color: #5c564c;
  margin: 0 0 8px;
  line-height: 1.45;
}
.appcard-go {
  font-size: 12px;
  font-weight: 700;
  color: var(--green, #2f7d5f);
}
.appcard.soon {
  opacity: 0.65;
  cursor: default;
  background: #f6f4ef;
}
.appcard.soon:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.06);
  border-color: rgba(20, 20, 20, 0.08);
}
@media (max-width: 640px) {
  .cardgrid { grid-template-columns: 1fr; }
}

/* ============================================================
   HELPDESK HUB — PANEL PENGATURAN (CRUD link bagian)
   ============================================================ */
.noscroll{overflow:hidden !important}

.set-overlay{
  position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(13,13,13,.55);backdrop-filter:blur(2px);
}
.set-panel{
  background:var(--paper);width:100%;max-width:760px;max-height:92vh;overflow-y:auto;
  border-radius:18px 18px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.35);
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  animation:setup .18s ease-out;
}
@keyframes setup{from{transform:translateY(24px);opacity:.4}to{transform:translateY(0);opacity:1}}
.set-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.set-head h3{font-size:17px;font-weight:800;color:var(--coffee-900);margin:0}
.set-close{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);
  font-size:15px;cursor:pointer;color:var(--muted);flex:0 0 auto;
}
.set-close:active{transform:scale(.94)}
.set-hint{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.set-counts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.set-counts .chip{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.set-counts .chip b{font-weight:800}
.set-counts .chip.ok{background:#e7f6f0;color:#0b7a55;border-color:#bfe5d4}
.set-counts .chip.warn{background:#fdf3d0;color:#8a6d1a;border-color:#efdca4}

.set-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.set-row{
  display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);
}
.set-row-icon{font-size:24px;line-height:1;flex:0 0 auto;width:34px;text-align:center}
.set-row-body{flex:1 1 auto;min-width:0}
.set-row-body b{display:block;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-row-body small{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-row-chips{margin-top:4px}
.set-row-actions{display:flex;flex-direction:column;gap:5px;flex:0 0 auto;align-items:stretch}
.set-toggle{
  font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;cursor:pointer;
  background:#e7f6f0;color:#0b7a55;border:1.5px solid #bfe5d4;white-space:nowrap;
}
.set-toggle:active{transform:scale(.96)}
.set-btn{
  font-size:13px;padding:4px 10px;border-radius:9px;cursor:pointer;background:var(--card);
  border:1.5px solid var(--line);color:var(--ink);white-space:nowrap;
}
.set-btn:active{transform:scale(.95)}
.set-btn.danger{color:var(--red);border-color:#f0c9c3}

.set-form{
  background:var(--card);border:1.5px solid var(--gold-400);border-radius:14px;
  padding:14px;margin-bottom:14px;box-shadow:var(--shadow);
}
.set-form h4{margin:0 0 10px;font-size:14px;color:var(--coffee-900)}
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.set-grid label{font-size:11.5px;font-weight:700;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.set-grid .span2{grid-column:1 / -1}
.set-grid input[type="text"],.set-grid textarea{
  font:inherit;font-size:13px;color:var(--ink);background:#fbfaf7;
  border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;width:100%;
}
.set-grid input:focus,.set-grid textarea:focus{outline:none;border-color:var(--gold-500);background:#fff}
.set-grid .chk{flex-direction:row;align-items:center;gap:8px;font-weight:600;color:var(--ink);padding-top:4px}
.set-grid .chk input{width:17px;height:17px;accent-color:var(--gold-600)}
.set-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.btn-ghost{
  font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--muted);border:1.5px solid var(--line);
}
.btn-ghost:active{transform:scale(.97)}
.set-foot{display:flex;gap:8px;flex-wrap:wrap}
.set-foot .btn-gold{flex:1 1 auto;text-align:center}
.set-foot .btn-danger{flex:1 1 auto}

@media (min-width:700px){
  .set-overlay{align-items:center;padding:20px}
  .set-panel{border-radius:18px;max-height:88vh;animation:setup-c .18s ease-out}
  @keyframes setup-c{from{transform:scale(.97);opacity:.4}to{transform:scale(1);opacity:1}}
}
@media (max-width:640px){
  .set-row{flex-wrap:wrap}
  .set-row-actions{flex-direction:row;width:100%;justify-content:flex-end}
  .set-grid{grid-template-columns:1fr}
}

/* ============================================================
   HELPDESK HUB v1.2 — PIN GATE + WARNA TEMA PER BAGIAN
   ============================================================ */
.appcard{border-top:4px solid var(--card-accent, #8a796a)}
.appcard-icon{
  background:color-mix(in srgb, var(--card-accent, #8a796a) 14%, #fff);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--card-accent, #8a796a) 35%, transparent);
}
.appcard-go{color:var(--card-accent, #2f7d5f)}
@supports not (background:color-mix(in srgb, red 10%, white)){
  .appcard-icon{background:rgba(0,0,0,.05);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12)}
}

.pin-gate{text-align:center;padding:26px 8px 10px}
.pin-gate-icon{font-size:40px;line-height:1;margin-bottom:8px}
.pin-gate h4{margin:0 0 4px;font-size:16px;color:var(--coffee-900)}
.pin-gate p{font-size:12.5px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.pin-gate input{
  font:inherit;font-size:20px;letter-spacing:8px;text-align:center;font-weight:800;
  width:150px;padding:10px 8px;margin-bottom:12px;color:var(--ink);
  background:#fbfaf7;border:2px solid var(--line);border-radius:12px;
}
.pin-gate input:focus{outline:none;border-color:var(--gold-500);background:#fff}
.pin-gate .btn-gold{min-width:150px}
.pin-gate.shake{animation:pshake .3s}
@keyframes pshake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

.set-sec{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px;margin-bottom:14px;box-shadow:var(--shadow);
}
.set-sec h4{margin:0 0 10px;font-size:13.5px;color:var(--coffee-900)}
.set-sec .btn-gold{font-size:12.5px;padding:9px 14px;border-radius:999px}

.color-input{
  -webkit-appearance:none;appearance:none;width:56px;height:34px;padding:2px;cursor:pointer;
  background:#fbfaf7;border:1.5px solid var(--line);border-radius:9px;
}
.color-input::-webkit-color-swatch-wrapper{padding:2px}
.color-input::-webkit-color-swatch{border:none;border-radius:5px}
.swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.swatch{
  width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid rgba(0,0,0,.12);
  padding:0;
}
.swatch:active{transform:scale(.92)}
.swatch.active{border-color:var(--coffee-900);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--coffee-900)}

.set-ver{
  font-size:10.5px;font-weight:700;color:var(--muted);background:var(--card);
  border:1px solid var(--line);padding:2px 8px;border-radius:999px;
  vertical-align:middle;margin-left:6px;white-space:nowrap;
}

.home-foot a{color:var(--gold-600);font-weight:800;text-decoration:none}
.home-foot a:hover{text-decoration:underline}