:root{--bg:#050914;--bg-soft:#0b1220;--card:rgba(15,23,42,.78);--card-border:rgba(148,163,184,.18);--text:#f8fafc;--muted:#94a3b8;--primary:#7c3aed;--primary-2:#06b6d4;--accent:#22c55e;--danger:#ef4444;--warning:#f59e0b;--shadow:rgba(0,0,0,.45);--input:rgba(2,6,23,.6);--line:rgba(148,163,184,.22);--glass:rgba(15,23,42,.62)}[data-theme=light]{--bg:#f7f8fc;--bg-soft:#fff;--card:rgba(255,255,255,.88);--card-border:rgba(15,23,42,.12);--text:#0f172a;--muted:#64748b;--primary:#6d28d9;--primary-2:#0284c7;--accent:#16a34a;--danger:#dc2626;--warning:#d97706;--shadow:rgba(15,23,42,.12);--input:rgba(255,255,255,.82);--line:rgba(15,23,42,.12);--glass:rgba(255,255,255,.68)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(124,58,237,.28),transparent 32rem),radial-gradient(circle at top right,rgba(6,182,212,.2),transparent 28rem),linear-gradient(180deg,var(--bg),var(--bg-soft));min-height:100vh;overflow-x:hidden;transition:background .35s ease,color .35s ease}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.orb{position:fixed;width:28rem;height:28rem;border-radius:999px;pointer-events:none;filter:blur(35px);opacity:.18;z-index:-1;background:conic-gradient(from 180deg,var(--primary),var(--primary-2),var(--accent),var(--primary));transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform .12s ease-out}.layout{max-width:1240px;width:min(100% - 32px,1240px);margin:0 auto}.navbar{position:sticky;top:14px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 14px;margin-top:14px;border:1px solid var(--card-border);border-radius:24px;background:var(--glass);box-shadow:0 18px 55px var(--shadow);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;min-width:145px}.brand.side{margin-bottom:18px}.logo{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,58,237,.95),rgba(6,182,212,.9)),radial-gradient(circle at 35% 35%,rgba(255,255,255,.6),transparent 24px);box-shadow:0 12px 28px rgba(124,58,237,.35);font-weight:900;color:white}.brand strong{letter-spacing:-.03em;font-size:1.12rem}.navlinks{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.92rem}.navlinks a{padding:10px 12px;border-radius:12px;transition:.2s ease}.navlinks a:hover{color:var(--text);background:rgba(124,58,237,.12)}.nav-actions{display:flex;align-items:center;gap:10px}.theme-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--card-border);color:var(--text);background:var(--card);padding:10px 12px;border-radius:16px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}.btn{border:none;outline:none;color:#fff;background:linear-gradient(135deg,var(--primary),#4f46e5);padding:11px 18px;border-radius:15px;cursor:pointer;box-shadow:0 16px 30px rgba(124,58,237,.28);transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(124,58,237,.36)}.btn.secondary{color:var(--text);background:transparent;border:1px solid var(--card-border);box-shadow:none}.btn.small{padding:9px 12px;border-radius:12px;font-size:.88rem}.btn.full{width:100%}.hero{min-height:calc(100vh - 92px);display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:34px;padding:54px 0 34px}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(124,58,237,.25);border-radius:999px;color:#c4b5fd;background:rgba(124,58,237,.12);font-size:.88rem;font-weight:700;margin-bottom:18px}[data-theme=light] .eyebrow{color:#5b21b6;background:rgba(124,58,237,.08)}h1{margin:0;font-size:clamp(2.6rem,6vw,5.8rem);line-height:.95;letter-spacing:-.075em}.gradient-text{background:linear-gradient(135deg,#a78bfa,#22d3ee 58%,#86efac);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{max-width:590px;color:var(--muted);font-size:1.08rem;line-height:1.75;margin:22px 0 28px}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:720px}.metric{padding:16px;border:1px solid var(--card-border);background:var(--glass);border-radius:20px;box-shadow:0 14px 38px var(--shadow);backdrop-filter:blur(14px)}.metric strong{display:block;font-size:1.42rem;color:#c4b5fd;letter-spacing:-.03em}[data-theme=light] .metric strong{color:#6d28d9}.metric span{color:var(--muted);font-size:.83rem}.hero-visual{position:relative;min-height:580px;display:grid;place-items:center;perspective:1200px}.visual-card{position:relative;width:min(100%,560px);height:520px;border:1px solid var(--card-border);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.09),transparent),radial-gradient(circle at 50% 38%,rgba(124,58,237,.34),transparent 14rem),var(--glass);box-shadow:0 34px 80px var(--shadow);backdrop-filter:blur(22px);overflow:hidden;transform-style:preserve-3d;transition:transform .12s ease-out}.visual-grid{position:absolute;inset:0;opacity:.34;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at center,#000,transparent 78%)}.cube-wrap{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}.cube{width:156px;height:156px;transform-style:preserve-3d;animation:spin 10s linear infinite}.face{position:absolute;width:156px;height:156px;border:1px solid rgba(167,139,250,.5);background:linear-gradient(135deg,rgba(124,58,237,.38),rgba(6,182,212,.22));box-shadow:inset 0 0 42px rgba(124,58,237,.28),0 0 38px rgba(124,58,237,.25);border-radius:24px;display:grid;place-items:center;color:white;font-size:2.2rem}.front{transform:translateZ(78px)}.back{transform:rotateY(180deg) translateZ(78px)}.right{transform:rotateY(90deg) translateZ(78px)}.left{transform:rotateY(-90deg) translateZ(78px)}.top{transform:rotateX(90deg) translateZ(78px)}.bottom{transform:rotateX(-90deg) translateZ(78px)}@keyframes spin{from{transform:rotateX(-18deg) rotateY(0)}to{transform:rotateX(-18deg) rotateY(360deg)}}.ring{position:absolute;width:370px;height:370px;border:1px dashed rgba(167,139,250,.38);border-radius:50%;animation:orbit 18s linear infinite;transform-style:preserve-3d}.ring.two{width:470px;height:470px;animation-duration:26s;animation-direction:reverse;opacity:.7}@keyframes orbit{to{transform:rotateZ(360deg)}}.mini-app{position:absolute;width:82px;height:82px;border:1px solid rgba(148,163,184,.25);border-radius:24px;display:grid;place-items:center;background:rgba(15,23,42,.72);box-shadow:0 16px 32px rgba(0,0,0,.24);font-size:1.8rem;transform:translateZ(40px)}[data-theme=light] .mini-app{background:rgba(255,255,255,.78)}.app1{top:78px;left:50%;transform:translateX(-50%) translateZ(40px)}.app2{top:176px;right:52px}.app3{bottom:118px;right:86px}.app4{bottom:88px;left:96px}.app5{top:176px;left:52px}.status-pill{position:absolute;bottom:26px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;padding:14px;background:rgba(2,6,23,.58);border:1px solid rgba(148,163,184,.18);border-radius:22px;backdrop-filter:blur(16px);color:#e2e8f0}[data-theme=light] .status-pill{color:#0f172a;background:rgba(255,255,255,.72)}.pulse{width:12px;height:12px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 8px rgba(34,197,94,.16)}section{padding:46px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:22px}.section-head h2{margin:0;font-size:clamp(1.7rem,3vw,2.8rem);letter-spacing:-.05em}.section-head p,.welcome p{margin:8px 0 0;color:var(--muted);max-width:640px;line-height:1.7}.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.feature-card,.tier,.dashboard-card,.plugin-card,.flyer-card,.sidebar,.auth-card{border:1px solid var(--card-border);background:var(--glass);border-radius:26px;box-shadow:0 18px 55px var(--shadow);backdrop-filter:blur(18px)}.feature-card{padding:22px;min-height:188px}.iconbox{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(6,182,212,.16));border:1px solid rgba(148,163,184,.15);font-size:1.45rem;margin-bottom:20px}.feature-card h3,.tier h3,.dashboard-card h3,.flyer-card h3{margin:0 0 10px;letter-spacing:-.03em}.feature-card p,.tier p,.dashboard-card p,.flyer-card p{margin:0;color:var(--muted);line-height:1.65;font-size:.94rem}.ecosystem{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:stretch}.diagram{padding:26px;min-height:460px;display:grid;place-items:center;position:relative;overflow:hidden}.node{width:min(100%,330px);padding:18px;border:1px solid var(--card-border);border-radius:24px;background:rgba(124,58,237,.12);text-align:center;position:relative;z-index:2}.node strong{display:block;font-size:1.1rem;margin-bottom:6px}.node span{color:var(--muted);font-size:.88rem}.plugin-grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}.plugin-card{padding:16px;display:flex;align-items:center;gap:12px}.plugin-emoji{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:rgba(6,182,212,.12);border:1px solid var(--card-border);flex:0 0 auto}.plugin-card strong{display:block;font-size:.95rem}.plugin-card span{display:block;color:var(--muted);font-size:.78rem;margin-top:3px}.dashboard-preview{padding:18px;display:grid;grid-template-columns:220px 1fr;gap:16px;min-height:460px}.sidebar-preview,.sidebar{border:1px solid var(--card-border);background:rgba(2,6,23,.24);border-radius:22px;padding:14px}[data-theme=light] .sidebar-preview,[data-theme=light] .sidebar{background:rgba(255,255,255,.5)}.menu-item{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:14px;color:var(--muted);font-size:.9rem;margin:4px 0}.menu-item.active{background:linear-gradient(135deg,rgba(124,58,237,.82),rgba(79,70,229,.88));color:#fff;box-shadow:0 12px 22px rgba(124,58,237,.22)}.dash-main{display:grid;gap:14px}.welcome{padding:18px;border:1px solid var(--card-border);border-radius:24px;background:rgba(124,58,237,.1);display:flex;justify-content:space-between;gap:12px;align-items:center}.welcome.big{padding:26px}.welcome.big h1{font-size:clamp(2rem,3vw,3.2rem)}.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:7px 10px;background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.2);font-weight:800;font-size:.78rem;white-space:nowrap}.badge.muted{background:rgba(148,163,184,.12);color:var(--muted)}[data-theme=light] .badge{color:#15803d}.dash-plugins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.dash-plugins.live{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.dash-plugin{border:1px solid var(--card-border);border-radius:20px;padding:16px;background:rgba(2,6,23,.22);display:block;transition:.18s ease}[data-theme=light] .dash-plugin{background:rgba(255,255,255,.54)}.dash-plugin:hover{transform:translateY(-3px);border-color:rgba(124,58,237,.45)}.dash-plugin strong{display:block;margin-top:10px;font-size:.92rem}.dash-plugin span{font-size:1.35rem}.dash-plugin small,.dash-plugin span+strong+small{color:var(--muted);font-size:.78rem;display:block;margin-top:3px}.activity{border:1px solid var(--card-border);border-radius:22px;padding:16px;background:rgba(2,6,23,.18)}[data-theme=light] .activity{background:rgba(255,255,255,.54)}.activity-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.88rem}.activity-row:last-child{border-bottom:0}.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.tier{padding:24px;position:relative;overflow:hidden}.tier.recommended{border-color:rgba(124,58,237,.55);background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(6,182,212,.07)),var(--glass)}.price{font-size:2rem;font-weight:900;letter-spacing:-.05em;margin:16px 0 4px}.price span{font-size:.9rem;font-weight:600;color:var(--muted)}.list{display:grid;gap:10px;margin:18px 0 0;color:var(--muted);font-size:.92rem}.list div{display:flex;align-items:flex-start;gap:8px}.list div:before{content:"✓";color:var(--accent);font-weight:900}.flyers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.flyer-card{min-height:280px;padding:22px;position:relative;overflow:hidden}.flyer-art{position:absolute;width:180px;height:180px;right:-42px;bottom:-42px;border-radius:40px;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.55),transparent 28px),linear-gradient(135deg,rgba(124,58,237,.88),rgba(6,182,212,.78));transform:rotate(14deg);opacity:.82}.flyer-card h3{font-size:1.45rem;max-width:230px;margin-bottom:12px}.tag{display:inline-flex;border:1px solid var(--card-border);border-radius:999px;padding:6px 10px;color:var(--muted);margin-top:18px;font-size:.8rem}.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.admin-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 16px}.stat-box{border:1px solid var(--card-border);border-radius:20px;padding:16px;background:rgba(2,6,23,.2)}[data-theme=light] .stat-box{background:rgba(255,255,255,.55)}.stat-box strong{display:block;font-size:1.55rem;letter-spacing:-.04em}.stat-box span{color:var(--muted);font-size:.8rem}.modal-backdrop{position:fixed;inset:0;z-index:80;background:rgba(2,6,23,.72);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(16px)}.modal-backdrop.show{display:flex}.auth-modal{width:min(100%,980px);max-height:min(92vh,780px);overflow:auto;border:1px solid var(--card-border);border-radius:34px;background:radial-gradient(circle at top right,rgba(124,58,237,.16),transparent 24rem),var(--bg-soft);box-shadow:0 38px 110px rgba(0,0,0,.5);padding:18px}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 16px;gap:12px}.close{width:42px;height:42px;border-radius:16px;border:1px solid var(--card-border);background:var(--card);color:var(--text);cursor:pointer;font-size:1.15rem}.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.auth-card{padding:24px}.auth-card.standalone{max-width:560px;margin:40px auto}.auth-card h2{margin:0 0 6px;letter-spacing:-.04em}.auth-card p{margin:0 0 18px;color:var(--muted);line-height:1.6}.form-row{display:grid;gap:8px;margin-bottom:14px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}label{color:var(--muted);font-size:.86rem;font-weight:700}.input-wrap{position:relative}input,select,textarea{width:100%;border:1px solid var(--card-border);background:var(--input);color:var(--text);border-radius:15px;padding:13px;outline:none;transition:border-color .18s ease,box-shadow .18s ease}select option{color:#0f172a}.input-wrap input{padding-right:44px}input:focus,select:focus,textarea:focus{border-color:rgba(124,58,237,.62);box-shadow:0 0 0 4px rgba(124,58,237,.12)}.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--muted);cursor:pointer;padding:6px}.forgot-line{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.86rem;margin:8px 0 16px}.forgot-line label{display:flex;gap:8px;align-items:center}.forgot-line input{width:auto}.textlink{color:#a78bfa;font-weight:800;cursor:pointer}.textlink.danger,.danger{color:var(--danger)}.reset-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 16px}.option{border:1px solid var(--card-border);border-radius:16px;padding:12px;background:var(--input);color:var(--text);cursor:pointer;text-align:center;font-weight:800}.option.active{border-color:rgba(124,58,237,.7);background:rgba(124,58,237,.16)}.option input{width:auto;margin-right:8px}.auth-note{border:1px solid rgba(34,197,94,.18);background:rgba(34,197,94,.08);color:var(--muted);padding:14px;border-radius:18px;margin-top:14px;font-size:.86rem;line-height:1.6}.flash-wrap{margin-top:14px}.flash{border:1px solid var(--card-border);border-radius:18px;padding:14px 16px;margin-bottom:8px;background:var(--glass);box-shadow:0 16px 35px var(--shadow)}.flash.success{border-color:rgba(34,197,94,.35)}.flash.error{border-color:rgba(239,68,68,.35)}.flash.info{border-color:rgba(6,182,212,.35)}.page-narrow{padding:50px 0}.dashboard-layout{display:grid;grid-template-columns:260px 1fr;gap:18px;padding:34px 0}.sidebar{height:max-content;position:sticky;top:100px}.dash-content{min-width:0}.form-card,.table-card{padding:24px}.table-responsive{width:100%;overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:13px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-size:.83rem;font-weight:800}td{font-size:.9rem;color:var(--text)}td small{color:var(--muted)}.searchbar{display:flex;gap:10px;margin-bottom:16px}.package-edit{border:1px solid var(--card-border);padding:16px;border-radius:20px;margin:14px 0;background:rgba(2,6,23,.13)}.error-box{white-space:pre-wrap;overflow:auto;border:1px solid rgba(239,68,68,.25);background:rgba(239,68,68,.08);border-radius:16px;padding:14px;color:var(--muted)}footer{padding:46px 0 34px;color:var(--muted)}.footer-box{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}@media(max-width:980px){.navlinks{display:none}.hero,.ecosystem{grid-template-columns:1fr}.hero{padding-top:34px}.hero-visual{min-height:500px}.features{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-preview{grid-template-columns:1fr}.sidebar-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.dash-plugins,.tiers,.flyers,.admin-stats{grid-template-columns:1fr}.auth-grid{grid-template-columns:1fr}.dashboard-layout{grid-template-columns:1fr}.sidebar{position:relative;top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.brand.side{grid-column:1/-1}.form-grid{grid-template-columns:1fr}}@media(max-width:640px){.layout{width:min(100% - 22px,1240px)}.navbar{border-radius:18px}.brand strong{display:none}.theme-toggle span{display:none}h1{font-size:clamp(2.35rem,16vw,4rem)}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-visual{min-height:410px}.visual-card{height:390px;border-radius:26px}.ring{width:270px;height:270px}.ring.two{width:330px;height:330px}.cube,.face{width:112px;height:112px}.front{transform:translateZ(56px)}.back{transform:rotateY(180deg) translateZ(56px)}.right{transform:rotateY(90deg) translateZ(56px)}.left{transform:rotateY(-90deg) translateZ(56px)}.top{transform:rotateX(90deg) translateZ(56px)}.bottom{transform:rotateX(-90deg) translateZ(56px)}.mini-app{width:58px;height:58px;border-radius:18px;font-size:1.25rem}.app2{right:24px}.app3{right:44px;bottom:86px}.app4{left:44px;bottom:74px}.app5{left:24px}.features,.plugin-grid,.stats{grid-template-columns:1fr}.sidebar,.sidebar-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome{align-items:flex-start;flex-direction:column}.searchbar{flex-direction:column}}


/* =========================================================
   V4 FIX - Animasi lembut + sidebar responsive stabil
   ========================================================= */
html { scroll-padding-top: 110px; }
body {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(5px);
  transition:
    opacity .72s cubic-bezier(.16, 1, .3, 1),
    transform .72s cubic-bezier(.16, 1, .3, 1),
    filter .72s cubic-bezier(.16, 1, .3, 1),
    background .35s ease,
    color .35s ease;
  will-change: opacity, transform, filter;
}
body.page-loaded {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
body.page-leaving {
  opacity: .2;
  transform: translate3d(0, -12px, 0) scale(.992);
  filter: blur(8px);
}
body.page-leaving .navbar,
body.page-leaving main,
body.page-leaving footer {
  transition: opacity .34s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1), filter .34s cubic-bezier(.16,1,.3,1);
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  filter: blur(6px);
}

.navbar { animation: navSoftIn .72s cubic-bezier(.16,1,.3,1) both; }
.hero > div:first-child { animation: contentSoftIn .82s cubic-bezier(.16,1,.3,1) .08s both; }
.hero-visual { animation: visualSoftIn .92s cubic-bezier(.16,1,.3,1) .16s both; }
.flash { animation: navSoftIn .52s cubic-bezier(.16,1,.3,1) both; }

@keyframes navSoftIn {
  from { opacity: 0; transform: translate3d(0,-22px,0); filter: blur(10px); }
  to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
}
@keyframes contentSoftIn {
  from { opacity: 0; transform: translate3d(0,38px,0) scale(.985); filter: blur(12px); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}
@keyframes visualSoftIn {
  from { opacity: 0; transform: translate3d(0,42px,0) scale(.955); filter: blur(12px); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}

.reveal-soft {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.985);
  filter: blur(10px);
  transition:
    opacity .82s cubic-bezier(.16,1,.3,1),
    transform .82s cubic-bezier(.16,1,.3,1),
    filter .82s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
.reveal-soft.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

.mobile-menu-btn,
.dashboard-menu-float,
.drawer-close,
.sidebar-close {
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 14px 34px var(--shadow);
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
.mobile-menu-btn span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .22s ease;
}
body.mobile-nav-open .mobile-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.mobile-nav-open .mobile-menu-btn span:nth-child(2) { opacity: 0; }
body.mobile-nav-open .mobile-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: min(88vw, 370px) !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 130 !important;
  padding: 18px !important;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.20), transparent 18rem),
    linear-gradient(180deg, var(--bg-soft), var(--bg)) !important;
  border-left: 1px solid var(--card-border) !important;
  box-shadow: -34px 0 90px rgba(0,0,0,.38) !important;
  transform: translate3d(112%,0,0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    transform .52s cubic-bezier(.16,1,.3,1),
    opacity .38s ease,
    visibility .38s ease !important;
  overflow-y: auto !important;
  border-radius: 28px 0 0 28px !important;
}
body.mobile-nav-open .mobile-drawer {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.drawer-close,
.sidebar-close {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  font-size: 1.35rem;
  line-height: 1;
  display: inline-grid;
  place-items: center;
}
.mobile-drawer-links {
  display: grid;
  gap: 10px;
}
.mobile-drawer-links a,
.mobile-drawer-links button {
  width: 100%;
  text-align: left;
  border: 1px solid var(--card-border);
  border-radius: 17px;
  padding: 14px 15px;
  background: var(--glass);
  color: var(--text);
  font-weight: 800;
  backdrop-filter: blur(14px);
  transition: transform .24s cubic-bezier(.16,1,.3,1), background .24s ease, border-color .24s ease;
}
.mobile-drawer-links a:hover,
.mobile-drawer-links button:hover {
  transform: translateX(-3px);
  background: rgba(124,58,237,.14);
  border-color: rgba(124,58,237,.35);
}
.mobile-drawer-links button {
  text-align: center;
  justify-content: center;
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(2,6,23,.58);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .34s ease;
}
body.mobile-nav-open .drawer-backdrop,
body.sidebar-open .drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-head-mobile {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 900;
}
.dashboard-menu-float {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 105;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), #4f46e5);
  color: #fff;
}
.desktop-only { display: inline-flex; }
.btn.full { width: 100%; justify-content: center; text-align: center; }

/* Desktop/tablet besar: drawer dan tombol mobile benar-benar disembunyikan */
@media (min-width: 1101px) {
  .mobile-menu-btn,
  .mobile-drawer,
  .drawer-backdrop,
  .dashboard-menu-float,
  .sidebar-head-mobile { display: none !important; }
  .dashboard-layout { display: grid !important; grid-template-columns: 260px minmax(0,1fr) !important; gap: 18px !important; }
  .dashboard-layout .sidebar {
    position: sticky !important;
    top: 100px !important;
    left: auto !important;
    width: auto !important;
    height: max-content !important;
    z-index: 1 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
    border-radius: 26px !important;
  }
}

/* Tablet dan handphone: menu utama menjadi drawer kanan, menu dashboard menjadi sidebar kiri */
@media (max-width: 1100px) {
  .navlinks { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; }
  .hero { grid-template-columns: 1fr !important; gap: 20px; padding-top: 34px; }
  .hero-visual { min-height: 500px; }
  .ecosystem { grid-template-columns: 1fr !important; }
  .admin-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-layout { display: block !important; padding-top: 24px; }
  .dashboard-layout .dash-content { width: 100%; }
  .dashboard-layout .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(86vw, 340px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 125 !important;
    overflow-y: auto !important;
    padding: 18px !important;
    border-radius: 0 28px 28px 0 !important;
    transform: translate3d(-112%,0,0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      transform .52s cubic-bezier(.16,1,.3,1),
      opacity .38s ease,
      visibility .38s ease !important;
    display: block !important;
    background:
      radial-gradient(circle at top left, rgba(124,58,237,.20), transparent 18rem),
      linear-gradient(180deg, var(--bg-soft), var(--bg)) !important;
    border: 0 !important;
    border-right: 1px solid var(--card-border) !important;
    box-shadow: 34px 0 90px rgba(0,0,0,.38) !important;
  }
  body.sidebar-open .dashboard-layout .sidebar {
    transform: translate3d(0,0,0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .sidebar-head-mobile { display: flex !important; }
  .dashboard-menu-float { display: inline-flex !important; align-items: center; justify-content: center; }
  .sidebar .brand.side { margin-bottom: 12px; display: flex; }
  .sidebar .brand.side strong { display: block; }
  .sidebar .menu-item { margin: 8px 0; display: flex; }
  .table-card { padding: 18px; }
  .welcome.big h1 { font-size: clamp(1.8rem, 7vw, 3.2rem); }
}

@media (max-width: 760px) {
  .layout { width: min(100% - 22px, 1240px); }
  .navbar { top: 10px; padding: 10px; border-radius: 20px; }
  .desktop-only { display: none !important; }
  .nav-actions { gap: 8px; }
  .theme-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 15px; }
  .theme-toggle span { display: none; }
  .navbar > .brand strong { display: none; }
  .mobile-drawer .brand strong,
  .sidebar .brand strong { display: block; }
  .hero { min-height: auto; padding: 36px 0 24px; }
  h1 { font-size: clamp(2.35rem, 15vw, 4.2rem); }
  .hero p { font-size: 1rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
  .metrics,
  .features,
  .plugin-grid,
  .dash-plugins,
  .tiers,
  .flyers,
  .stats,
  .admin-stats,
  .form-grid { grid-template-columns: 1fr !important; }
  .dashboard-preview { grid-template-columns: 1fr; padding: 12px; }
  .sidebar-preview { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .auth-modal { padding: 12px; border-radius: 24px; }
  .auth-card { padding: 18px; }
  .auth-grid { grid-template-columns: 1fr; }
  .form-card, .table-card { padding: 16px; border-radius: 22px; }
  .searchbar { flex-direction: column; }
  .searchbar .btn { width: 100%; }
  table { min-width: 680px; }
  th, td { padding: 11px; }
}

@media (max-width: 420px) {
  .logo { width: 34px; height: 34px; border-radius: 12px; }
  .mobile-menu-btn, .theme-toggle { width: 40px; height: 40px; }
  .hero-visual { min-height: 360px; }
  .visual-card { height: 348px; }
  .status-pill { left: 14px; right: 14px; bottom: 14px; }
  .dashboard-layout .sidebar,
  .mobile-drawer { width: min(92vw, 340px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body,
  body.page-loaded,
  body.page-leaving,
  .reveal-soft,
  .reveal-soft.is-visible { opacity: 1 !important; transform: none !important; filter: none !important; }
}


/* =========================================================
   V5 FIX - popup/sidebar selalu mengikuti layar saat ini
   Catatan penting: body tidak boleh diberi transform/filter karena
   elemen position: fixed akan ikut posisi dokumen, bukan viewport.
   ========================================================= */
body,
body.page-loaded,
body.page-leaving {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

body.ui-lock-scroll {
  overflow: hidden !important;
  touch-action: none;
}

/* Animasi masuk tetap lembut, tetapi diterapkan ke isi halaman,
   bukan ke body supaya sidebar/modal fixed tetap stabil. */
.navbar {
  animation: navSoftIn .68s cubic-bezier(.16,1,.3,1) both !important;
}
.hero > div:first-child,
.hero-visual,
.dash-content,
.page-narrow > .dashboard-card {
  will-change: opacity, transform, filter;
}
.dash-content {
  animation: contentSoftIn .78s cubic-bezier(.16,1,.3,1) .06s both;
}

/* Animasi keluar halaman tanpa mengubah body. */
body.page-leaving .navbar,
body.page-leaving main,
body.page-leaving footer {
  opacity: 0 !important;
  transform: translate3d(0, -14px, 0) scale(.992) !important;
  filter: blur(7px) !important;
  transition:
    opacity .38s cubic-bezier(.16,1,.3,1),
    transform .38s cubic-bezier(.16,1,.3,1),
    filter .38s cubic-bezier(.16,1,.3,1) !important;
}

/* Backdrop drawer/sidebar: selalu menutup viewport saat ini. */
.drawer-backdrop {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 1600 !important;
}

/* Drawer menu utama: selalu muncul dari sisi kanan layar yang sedang dilihat. */
.mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(88vw, 380px) !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  z-index: 1700 !important;
  transform: translate3d(108%, 0, 0) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
body.mobile-nav-open .mobile-drawer {
  transform: translate3d(0, 0, 0) !important;
}

/* Sidebar dashboard: selalu muncul dari sisi kiri layar yang sedang dilihat. */
@media (max-width: 1100px) {
  .dashboard-layout .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 360px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 1700 !important;
    transform: translate3d(-108%, 0, 0) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.sidebar-open .dashboard-layout .sidebar {
    transform: translate3d(0, 0, 0) !important;
  }
}

.dashboard-menu-float {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 1500 !important;
}

/* Modal login/register: selalu berada di tengah viewport, bukan tengah dokumen. */
#authModal.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  z-index: 2200 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 3vw, 24px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
#authModal.modal-backdrop.show {
  display: flex !important;
}
#authModal .auth-modal {
  position: relative !important;
  width: min(980px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 28px) !important;
  margin: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  transform: translate3d(0, 18px, 0) scale(.975);
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity .46s cubic-bezier(.16,1,.3,1),
    transform .46s cubic-bezier(.16,1,.3,1),
    filter .46s cubic-bezier(.16,1,.3,1);
}
#authModal.show .auth-modal {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  filter: blur(0);
}

@media (max-width: 760px) {
  #authModal.modal-backdrop {
    align-items: flex-start !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  #authModal .auth-modal {
    width: calc(100vw - 22px) !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 24px !important;
  }
}


/* =========================================================
   V6 FIX - jarak kotak dashboard + tombol bantuan user login
   ========================================================= */
.dash-content {
  display: grid;
  align-content: start;
  gap: clamp(18px, 2.4vw, 28px) !important;
}

.member-dashboard-content,
.admin-dashboard-content {
  gap: clamp(20px, 2.8vw, 32px) !important;
}

.welcome.big,
.member-welcome {
  margin: 0 !important;
  padding: clamp(24px, 4vw, 42px) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(124, 58, 237, .24) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 58, 237, .16), transparent 28rem),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(6,182,212,.06)),
    var(--glass) !important;
  box-shadow: 0 22px 70px rgba(15, 23, 42, .10) !important;
}

[data-theme="light"] .welcome.big,
[data-theme="light"] .member-welcome {
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 58, 237, .13), transparent 28rem),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(237,242,255,.72)) !important;
}

.support-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 24px) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(135deg, rgba(34,197,94,.10), rgba(6,182,212,.08)),
    var(--glass) !important;
}

.support-actions strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -.03em;
  margin-bottom: 5px;
}

.support-actions p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .92rem;
}

.support-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.support-buttons .btn {
  white-space: nowrap;
}

.plugin-section,
.dash-plugins.live {
  gap: clamp(16px, 2vw, 22px) !important;
  margin: 0 !important;
}

.dash-plugin,
.plugin-tile {
  position: relative;
  min-height: 142px;
  padding: clamp(18px, 2.4vw, 24px) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(15,23,42,.24) !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  box-shadow: 0 18px 46px rgba(15,23,42,.10) !important;
}

[data-theme="light"] .dash-plugin,
[data-theme="light"] .plugin-tile {
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,250,252,.76)) !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.08) !important;
}

.dash-plugin::after,
.plugin-tile::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.05);
  pointer-events: none;
}

.dash-plugin:hover,
.plugin-tile:hover {
  transform: translate3d(0, -5px, 0) !important;
  border-color: rgba(124,58,237,.48) !important;
  box-shadow: 0 24px 60px rgba(124,58,237,.15) !important;
}

.activity-card,
.activity {
  margin: 0 !important;
  padding: clamp(20px, 2.6vw, 26px) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    var(--glass) !important;
  box-shadow: 0 18px 46px rgba(15,23,42,.08) !important;
}

.activity-card > strong,
.activity > strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.admin-stats {
  gap: clamp(14px, 1.8vw, 20px) !important;
  margin: 0 !important;
}

.stat-box,
.table-card,
.form-card,
.dashboard-card {
  box-shadow: 0 18px 50px rgba(15,23,42,.08);
}

@media (max-width: 760px) {
  .dash-content {
    gap: 16px !important;
  }
  .support-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .support-buttons {
    justify-content: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }
  .support-buttons .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .dash-plugin,
  .plugin-tile {
    min-height: 124px;
  }
}

/* =========================================================
   V8 FIX - Tukar Posisi Customer Service dan Panduan
   ========================================================= */
.floating-help-actions {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 170;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  pointer-events: auto;
}

.guide-fab,
.customer-fab {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  box-shadow: 0 18px 42px rgba(15,23,42,.24);
  cursor: pointer;
  transition:
    transform .26s cubic-bezier(.16,1,.3,1),
    box-shadow .26s cubic-bezier(.16,1,.3,1),
    filter .26s ease;
  -webkit-tap-highlight-color: transparent;
}

.guide-fab {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  font-size: 1.35rem;
}

.customer-fab {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  order: 1;
}

.guide-fab {
  order: 2;
}

.customer-fab .cs-svg {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
}

.customer-fab svg {
  width: 31px;
  height: 31px;
  display: block;
}

.guide-fab:hover,
.customer-fab:hover,
.guide-fab:focus-visible,
.customer-fab:focus-visible {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 24px 60px rgba(15,23,42,.30);
  filter: saturate(1.08);
  outline: none;
}

.guide-fab::before,
.customer-fab::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  background: currentColor;
  opacity: .10;
  animation: helpPulse 2.6s ease-in-out infinite;
  z-index: -1;
}

.customer-fab::before { color: #22c55e; }
.guide-fab::before { color: #7c3aed; animation-delay: .45s; }

@keyframes helpPulse {
  0%, 100% { transform: scale(.84); opacity: .08; }
  50% { transform: scale(1.1); opacity: .18; }
}

.fab-label {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 180px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(15,23,42,.90);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 34px rgba(15,23,42,.22);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
}

.guide-fab:hover .fab-label,
.customer-fab:hover .fab-label,
.guide-fab:focus-visible .fab-label,
.customer-fab:focus-visible .fab-label {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 145;
  background: rgba(2,6,23,.42);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}

body.guide-open .guide-overlay {
  opacity: 1;
  pointer-events: auto;
}

.guide-panel {
  position: fixed;
  right: 22px;
  bottom: 96px;
  width: min(460px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 130px));
  overflow-y: auto;
  z-index: 155;
  padding: 22px;
  border: 1px solid var(--card-border);
  border-radius: 28px;
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.16), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    var(--bg-soft);
  box-shadow: 0 28px 90px rgba(15,23,42,.34);
  backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 22px, 0) scale(.965);
  pointer-events: none;
  transition:
    opacity .42s cubic-bezier(.16,1,.3,1),
    transform .42s cubic-bezier(.16,1,.3,1),
    visibility .42s ease;
}

body.guide-open .guide-panel {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

.guide-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.guide-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124,58,237,.12);
  color: #a78bfa;
  border: 1px solid rgba(124,58,237,.20);
  font-size: .74rem;
  font-weight: 900;
  margin-bottom: 10px;
}

[data-theme="light"] .guide-kicker { color: #6d28d9; }

.guide-panel h3 {
  margin: 0;
  font-size: clamp(1.22rem, 3vw, 1.55rem);
  letter-spacing: -.045em;
}

.guide-close {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.guide-intro {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.65;
  font-size: .94rem;
}

.guide-list {
  display: grid;
  gap: 11px;
}

.guide-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
}

[data-theme="light"] .guide-item { background: rgba(255,255,255,.72); }

.guide-item > span {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(6,182,212,.12));
  border: 1px solid var(--card-border);
  font-size: 1.18rem;
}

.guide-item strong {
  display: block;
  font-size: .96rem;
  margin-bottom: 4px;
}

.guide-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .86rem;
}

.guide-note {
  margin-top: 14px;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid rgba(34,197,94,.18);
  background: rgba(34,197,94,.08);
  color: var(--muted);
  line-height: 1.55;
  font-size: .86rem;
}

.guide-note strong { color: var(--text); }

/* Tombol menu dashboard dipindah ke kiri bawah agar tidak menabrak tombol panduan/CS. */
@media (max-width: 1100px) {
  .dashboard-menu-float {
    left: max(16px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    z-index: 106 !important;
  }
  .floating-help-actions {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    gap: 10px;
  }
  .guide-fab,
  .customer-fab {
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 620px) {
  .floating-help-actions {
    right: 13px;
    bottom: max(16px, env(safe-area-inset-bottom));
    gap: 9px;
  }
  .guide-fab,
  .customer-fab {
    width: 52px;
    height: 52px;
  }
  .customer-fab .cs-svg,
  .customer-fab svg {
    width: 28px;
    height: 28px;
  }
  .fab-label {
    display: none;
  }
  .guide-panel {
    left: 10px;
    right: 10px;
    bottom: 86px;
    width: auto;
    max-height: min(72dvh, 680px);
    border-radius: 26px;
    padding: 18px;
  }
  .guide-panel-head {
    gap: 12px;
  }
  .guide-item {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 12px;
  }
  .guide-item > span {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-fab::before,
  .customer-fab::before { animation: none !important; }
}


/* =========================================================
   V9 FIX - Posisi tombol: Menu kanan, CS + Panduan kiri
   ========================================================= */
@media (max-width: 1100px) {
  .dashboard-menu-float {
    right: max(16px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    z-index: 160 !important;
  }

  .floating-help-actions {
    left: max(14px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    justify-content: flex-start !important;
    z-index: 170 !important;
  }

  .fab-label {
    left: 0 !important;
    right: auto !important;
  }

  .guide-panel {
    left: max(14px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: 96px !important;
  }
}

@media (max-width: 620px) {
  .dashboard-menu-float {
    right: max(13px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  .floating-help-actions {
    left: 13px !important;
    right: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  .guide-panel {
    left: 10px !important;
    right: 10px !important;
    bottom: 86px !important;
    width: auto !important;
  }
}

/* =========================================================
   V10 FIX - Responsif mobile/tablet halaman dashboard & tabel
   ========================================================= */
html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

main,
.layout,
.dashboard-layout,
.dash-content,
.dashboard-card,
.table-card,
.form-card,
.searchbar,
.table-responsive {
  min-width: 0 !important;
  max-width: 100% !important;
}

.table-responsive {
  border-radius: 22px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
}

th,
td {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 860px) {
  .layout {
    width: min(100% - 20px, 1240px) !important;
  }

  .dashboard-layout {
    padding: 20px 0 104px !important;
  }

  .dash-content {
    gap: 18px !important;
    overflow: visible !important;
  }

  .section-head {
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  .section-head h2 {
    font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.055em !important;
  }

  .section-head p {
    font-size: .95rem !important;
    line-height: 1.55 !important;
  }

  .section-head .btn,
  .section-head > .btn,
  .section-head > a.btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .searchbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .searchbar input,
  .searchbar .btn,
  .searchbar button {
    width: 100% !important;
  }

  .table-card {
    padding: 12px !important;
    border-radius: 24px !important;
    overflow: visible !important;
  }

  .table-card h2,
  .table-card h3 {
    font-size: 1.12rem !important;
    margin-bottom: 12px !important;
  }

  .table-responsive {
    overflow: visible !important;
    border-radius: 20px !important;
  }

  .table-responsive table,
  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive tfoot,
  .table-responsive tr,
  .table-responsive th,
  .table-responsive td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .table-responsive table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .table-responsive thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .table-responsive tbody {
    display: grid !important;
    gap: 12px !important;
  }

  .table-responsive tr {
    padding: 13px !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
      var(--glass) !important;
    box-shadow: 0 14px 32px rgba(15,23,42,.08) !important;
  }

  [data-theme="light"] .table-responsive tr {
    background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.75)) !important;
  }

  .table-responsive td {
    display: grid !important;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: .9rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .table-responsive td:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .table-responsive td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    text-transform: none;
    line-height: 1.35;
  }

  .table-responsive td:empty::after {
    content: "-";
    color: var(--muted);
  }

  .table-responsive td a.textlink {
    display: inline-flex;
    margin: 0 8px 6px 0;
    white-space: nowrap;
  }

  .table-responsive .badge {
    width: fit-content;
  }

  .admin-stats {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  .stat-box {
    padding: 14px !important;
  }

  .form-card,
  .dashboard-card {
    max-width: 100% !important;
  }

  input,
  select,
  textarea,
  .btn {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  .navbar {
    width: calc(100% - 20px) !important;
    margin-top: 10px !important;
  }

  .navbar .logo {
    width: 38px;
    height: 38px;
  }

  .theme-toggle,
  .mobile-menu-btn {
    width: 42px !important;
    height: 42px !important;
  }

  .dashboard-layout {
    padding-top: 18px !important;
  }

  .section-head {
    padding-top: 4px;
  }

  .table-responsive td {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .admin-stats {
    grid-template-columns: 1fr !important;
  }

  .welcome.big,
  .member-welcome {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  .welcome.big h1 {
    font-size: clamp(1.7rem, 10vw, 2.45rem) !important;
    line-height: 1.02 !important;
  }

  .floating-help-actions {
    left: 12px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  .dashboard-menu-float {
    right: 12px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    min-height: 48px !important;
    padding: 0 16px !important;
  }

  .guide-fab,
  .customer-fab {
    width: 50px !important;
    height: 50px !important;
  }
}

@media (max-width: 390px) {
  .layout {
    width: calc(100% - 16px) !important;
  }

  .navbar {
    width: calc(100% - 16px) !important;
    padding: 8px !important;
  }

  .table-card {
    padding: 10px !important;
  }

  .table-responsive tr {
    padding: 12px !important;
  }

  .table-responsive td {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .table-responsive td::before {
    font-size: .72rem;
  }
}

/* =========================================================
   V11 - CMS homepage: artikel, poster event, logo admin
   ========================================================= */
.logo.logo-image,
.logo-image {
  overflow: hidden;
  background: rgba(255,255,255,.88) !important;
}
.logo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.preview-logo {
  width: 64px !important;
  height: 64px !important;
  border-radius: 20px !important;
  flex: 0 0 auto;
}
.logo-setting-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px dashed var(--card-border);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
}
.logo-setting-preview input[type=file] {
  padding: 12px;
}
.settings-cms-form {
  display: grid;
  gap: 18px;
}
.section-head.compact {
  margin-bottom: 0;
}
.settings-block {
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: clamp(16px, 2vw, 22px);
  background: rgba(255,255,255,.04);
}
[data-theme="light"] .settings-block { background: rgba(255,255,255,.62); }
.settings-block > h3 {
  margin: 0 0 16px;
  letter-spacing: -.04em;
}
.form-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.form-row small {
  color: var(--muted);
  line-height: 1.5;
  display: block;
  margin-top: 7px;
}
.check-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  border: 1px solid var(--card-border);
  border-radius: 15px;
  background: var(--input);
  padding: 12px 14px;
  color: var(--text);
  font-weight: 800;
}
.check-card input { width: auto; }

.slider-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 14px 34px var(--shadow);
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.16,1,.3,1), background .22s ease;
}
.slider-btn:hover { transform: translateY(-2px); background: rgba(124,58,237,.16); }
.event-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 420px);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 22px;
  -webkit-overflow-scrolling: touch;
}
.event-slider::-webkit-scrollbar { height: 8px; }
.event-slider::-webkit-scrollbar-thumb { background: rgba(124,58,237,.35); border-radius: 999px; }
.event-poster-card {
  scroll-snap-align: start;
  border: 1px solid var(--card-border);
  border-radius: 30px;
  overflow: hidden;
  background: var(--glass);
  box-shadow: 0 22px 65px rgba(15,23,42,.12);
  backdrop-filter: blur(18px);
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.event-poster-card:hover {
  transform: translateY(-8px);
  border-color: rgba(124,58,237,.42);
  box-shadow: 0 30px 90px rgba(124,58,237,.18);
}
.event-poster-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: radial-gradient(circle at 20% 10%, rgba(124,58,237,.35), transparent 12rem), linear-gradient(135deg, rgba(124,58,237,.32), rgba(6,182,212,.16));
  overflow: hidden;
}
.event-poster-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.event-poster-card:hover .event-poster-media img { transform: scale(1.045); }
.event-poster-placeholder,
.article-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 3.8rem;
  background: radial-gradient(circle at 40% 25%, rgba(255,255,255,.35), transparent 5rem), linear-gradient(135deg, rgba(124,58,237,.55), rgba(6,182,212,.32));
}
.event-poster-placeholder.large { min-height: 360px; border-radius: 24px; }
.event-date-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.82);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(12px);
}
.event-poster-body {
  padding: 20px;
}
.event-kicker,
.article-meta span:first-child {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124,58,237,.12);
  border: 1px solid rgba(124,58,237,.18);
  color: #a78bfa;
  font-size: .75rem;
  font-weight: 900;
}
[data-theme="light"] .event-kicker,
[data-theme="light"] .article-meta span:first-child { color: #6d28d9; }
.event-poster-body h3,
.article-card h3 {
  margin: 12px 0 8px;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  line-height: 1.08;
  letter-spacing: -.05em;
}
.event-poster-body p,
.article-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: .94rem;
}
.read-more {
  display: inline-flex;
  margin-top: 16px;
  color: #a78bfa;
  font-weight: 900;
  font-size: .9rem;
}
[data-theme="light"] .read-more { color: #6d28d9; }

.article-layout {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 18px;
}
.article-card {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--card-border);
  border-radius: 28px;
  background: var(--glass);
  overflow: hidden;
  box-shadow: 0 20px 58px rgba(15,23,42,.10);
  backdrop-filter: blur(18px);
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.article-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124,58,237,.4);
  box-shadow: 0 28px 78px rgba(124,58,237,.14);
}
.article-card.featured-article {
  grid-row: span 2;
  grid-template-columns: 1fr;
}
.article-layout .article-card:not(.featured-article) {
  min-height: 205px;
}
.article-layout .article-card:nth-child(n+2) { grid-column: 2; }
.article-image {
  min-height: 180px;
  background: linear-gradient(135deg, rgba(124,58,237,.24), rgba(6,182,212,.14));
  overflow: hidden;
}
.article-image img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.article-card:hover .article-image img { transform: scale(1.045); }
.featured-article .article-image { aspect-ratio: 16/9; min-height: 310px; }
.article-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}
.empty-state {
  padding: 24px;
}
.contact-card {
  padding: clamp(20px, 3vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.contact-card strong { display: block; font-size: 1.2rem; margin-bottom: 6px; }
.contact-card p { margin: 0; color: var(--muted); line-height: 1.6; }

.article-detail-page,
.event-detail-page { padding: 50px 0; }
.article-detail-card,
.event-detail-card { padding: clamp(22px, 4vw, 46px); }
.article-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 800;
  margin-bottom: 18px;
}
.article-detail-card h1,
.event-detail-card h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  letter-spacing: -.07em;
  line-height: .98;
}
.article-detail-excerpt {
  max-width: 840px;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.75;
  margin: 18px 0 26px;
}
.article-detail-image {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid var(--card-border);
  margin-bottom: 28px;
}
.article-content {
  color: var(--text);
  line-height: 1.86;
  font-size: 1.02rem;
  margin-bottom: 28px;
}
.event-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) 1.15fr;
  gap: 28px;
  align-items: start;
}
.event-detail-poster img {
  width: 100%;
  border-radius: 28px;
  border: 1px solid var(--card-border);
  box-shadow: 0 20px 54px rgba(15,23,42,.12);
}
.event-detail-info > p {
  color: var(--muted);
  line-height: 1.75;
  font-size: 1.05rem;
}
.event-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin: 20px 0;
}
.event-facts div {
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.045);
}
.event-facts strong { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 5px; }
.event-facts span { font-weight: 900; }
.admin-media-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}
.admin-media-cell img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .article-layout,
  .event-detail-grid { grid-template-columns: 1fr; }
  .article-layout .article-card:nth-child(n+2) { grid-column: auto; }
  .article-card,
  .article-card.featured-article { grid-template-columns: 1fr; }
  .featured-article .article-image { min-height: 240px; }
  .form-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .event-facts { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .event-slider { grid-auto-columns: minmax(82vw, 1fr); gap: 14px; }
  .slider-controls { width: 100%; justify-content: flex-end; }
  .article-image { min-height: 210px; }
  .contact-card { align-items: stretch; flex-direction: column; }
  .contact-card .btn { width: 100%; }
  .logo-setting-preview { align-items: stretch; flex-direction: column; }
  .form-grid.four { grid-template-columns: 1fr !important; }
  .article-detail-page,
  .event-detail-page { padding: 28px 0; }
  .article-detail-card h1,
  .event-detail-card h1 { font-size: clamp(2rem, 12vw, 3rem); }
}

/* V13: profile completion, subscription upgrade, vouchers */
.profile-form-head,
.subscription-current {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.profile-form-head h2,
.profile-form-head p,
.subscription-current p { margin: 0; }
.profile-form-head p,
.subscription-current p { color: var(--muted); line-height: 1.6; margin-top: 5px; }
.profile-avatar,
.mini-avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(124, 58, 237, .24);
  flex: 0 0 auto;
}
.profile-avatar.large { width: 92px; height: 92px; border-radius: 28px; font-size: 2rem; }
.mini-avatar { width: 44px; height: 44px; border-radius: 15px; font-size: 1rem; }
.profile-avatar img,
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-initial { letter-spacing: -.04em; }
.muted-text { color: var(--muted); }
.badge.warning { background: rgba(245, 158, 11, .12); color: #f59e0b; border-color: rgba(245, 158, 11, .22); }
.badge.danger { background: rgba(239, 68, 68, .12); color: #ef4444; border-color: rgba(239, 68, 68, .22); }
.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 24px;
}
.upgrade-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upgrade-card .list { margin: 10px 0; }
.package-period {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, .10);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.subscription-current {
  padding: 20px;
  border: 1px solid var(--card-border);
}
.settings-block,
.package-edit {
  scroll-margin-top: 110px;
}
.admin-media-cell .mini-avatar { margin-right: 0; }
.form-card small,
.form-row small {
  color: var(--muted);
  display: block;
  margin-top: 6px;
  line-height: 1.5;
}
.btn.full[disabled],
.btn[disabled] {
  cursor: not-allowed;
  opacity: .62;
  transform: none !important;
  box-shadow: none !important;
}
@media (max-width: 1100px) {
  .upgrade-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .profile-form-head,
  .subscription-current {
    align-items: flex-start;
    flex-direction: column;
  }
  .profile-avatar.large { width: 78px; height: 78px; border-radius: 24px; }
  .table-responsive table thead { display: none; }
  .table-responsive table,
  .table-responsive tbody,
  .table-responsive tr,
  .table-responsive td {
    display: block;
    width: 100%;
  }
  .table-responsive tr {
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 12px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.035);
  }
  .table-responsive td {
    border-bottom: 1px solid var(--line);
    padding: 10px 0 !important;
    white-space: normal !important;
  }
  .table-responsive td:last-child { border-bottom: 0; }
  .table-responsive td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 5px;
  }
  .admin-media-cell { min-width: 0; }
}


/* =========================================================
   V14 - Logo situs/favicon lebih stabil dan mengikuti setting admin
   ========================================================= */
.logo.logo-image,
.logo-image {
  overflow: hidden !important;
  background: rgba(255,255,255,.94) !important;
  color: transparent !important;
  flex: 0 0 auto;
}
.logo-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 3px !important;
  border-radius: inherit !important;
}
.preview-logo img {
  padding: 5px !important;
}
.mobile-drawer .logo-image,
.sidebar .logo-image,
.auth-modal .logo-image {
  box-shadow: 0 12px 28px rgba(124, 58, 237, .26) !important;
}