/* ============================================================
   KYRVEX STORE — Global Stylesheet
   File: shared/style.css
   Tema default: kuning #FFD93D + hitam + putih (neo-brutalism)
   Semua warna di bawah ini BISA DIUBAH dari Admin Panel > Tema
   ============================================================ */

/* ============ CSS VARIABLES (dikontrol dari admin) ============ */
:root{
  /* Warna utama — diubah dari admin panel > tema */
  --primary:#FFD93D;
  --primary-soft:#FFE680;
  --primary-dark:#E5C330;
  --bg:#F4F4F0;
  --bg-card:#FFFFFF;
  --bg-alt:#EEEEE8;
  --text:#0A0A0A;
  --text-muted:#666666;
  --text-inv:#FFFFFF;
  --border:#0A0A0A;

  /* Status colors */
  --red:#FF3B5C;
  --blue:#3D5BFF;
  --green:#19C37D;
  --orange:#FF6B3D;
  --purple:#8B5CF6;
  --pink:#EC4899;

  /* Neon (untuk efek modern) */
  --neon-1:#FF5EA8;
  --neon-2:#A855F7;

  /* Shadow */
  --shadow:4px 4px 0 var(--border);
  --shadow-sm:3px 3px 0 var(--border);
  --shadow-lg:6px 6px 0 var(--border);
  --shadow-neon:0 0 20px var(--neon-1), 0 0 40px var(--neon-2);

  /* Radius */
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;

  /* Typography */
  --font-mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-sans:'Space Grotesk', system-ui, sans-serif;

  /* Layout */
  --max-w:1200px;
  --app-max-w:560px;
  --header-h:64px;

  /* Transitions */
  --t-fast:.15s ease;
  --t-med:.3s ease;
  --t-slow:.5s ease;
}

/* Mode dark override */
[data-theme="dark"]{
  --bg:#0A0A0F;
  --bg-card:#14141E;
  --bg-alt:#1C1C28;
  --text:#F4F4F8;
  --text-muted:#8A8A95;
  --border:#F4F4F8;
}

/* ============ RESET ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
html,body{height:100%;}
body{
  font-family:var(--font-mono);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  transition:background var(--t-med), color var(--t-med);
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul,ol{list-style:none;}
table{border-collapse:collapse;width:100%;}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ============ LAYOUT WRAPPERS ============ */
.container{max-width:var(--max-w);margin:0 auto;padding:0 16px;}
.app-shell{max-width:var(--app-max-w);margin:0 auto;min-height:100vh;padding-bottom:24px;position:relative;}
@media(min-width:900px){
  .app-shell{border-left:2.5px solid var(--border);border-right:2.5px solid var(--border);box-shadow:0 0 60px rgba(0,0,0,.08);}
}

.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:640px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:420px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

.flex{display:flex;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.flex-col{display:flex;flex-direction:column;}
.gap-4{gap:4px;}.gap-8{gap:8px;}.gap-12{gap:12px;}.gap-16{gap:16px;}.gap-20{gap:20px;}
.mb-8{margin-bottom:8px;}.mb-12{margin-bottom:12px;}.mb-16{margin-bottom:16px;}.mb-20{margin-bottom:20px;}.mb-24{margin-bottom:24px;}
.mt-8{margin-top:8px;}.mt-12{margin-top:12px;}.mt-16{margin-top:16px;}.mt-20{margin-top:20px;}
.text-center{text-align:center;}
.text-muted{color:var(--text-muted);}
.text-sm{font-size:11px;}
.text-xs{font-size:10px;}
.text-lg{font-size:18px;}
.text-xl{font-size:24px;}
.font-sans{font-family:var(--font-sans);}
.fw-700{font-weight:700;}.fw-800{font-weight:800;}
.hidden{display:none !important;}
.relative{position:relative;}
.w-full{width:100%;}
/* ============ SPLASH SCREEN ============ */
#splash{
  position:fixed;inset:0;z-index:9999;
  background:var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .5s ease, visibility .5s ease;
}
#splash.hide{opacity:0;visibility:hidden;}
.splash-logo{
  background:var(--primary);color:var(--text);
  padding:20px 38px;border-radius:16px;
  font-weight:800;font-size:28px;letter-spacing:6px;
  box-shadow:8px 8px 0 rgba(255,217,61,.25);
  animation:pop .7s cubic-bezier(.2,1.4,.4,1);
}
.splash-logo.brand{font-family:var(--font-sans);}
@keyframes pop{0%{transform:scale(.5) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.splash-bar{width:180px;height:6px;background:rgba(255,255,255,.15);border-radius:6px;overflow:hidden;}
.splash-bar > i{display:block;height:100%;width:0;background:var(--primary);animation:load 1.8s ease forwards;}
@keyframes load{to{width:100%}}
.splash-sub{color:var(--text-muted);font-size:11px;letter-spacing:2px;}

/* ============ HEADER ============ */
.app-header{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;
  background:var(--bg);
  border-bottom:2.5px solid var(--border);
  backdrop-filter:blur(8px);
}
.header-brand{
  background:var(--border);color:var(--primary);
  padding:8px 14px;border-radius:8px;
  font-weight:800;letter-spacing:2.5px;font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw;
}
.header-actions{display:flex;gap:6px;align-items:center;}

.icon-btn{
  width:40px;height:40px;
  border:2.5px solid var(--border);
  background:var(--bg-card);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  position:relative;flex-shrink:0;
}
.icon-btn:hover{background:var(--primary);}
.icon-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--border);}
.icon-btn svg{width:20px;height:20px;stroke:var(--text);}
.icon-btn .dot{
  position:absolute;top:-4px;right:-4px;width:12px;height:12px;
  background:var(--red);border:2px solid var(--border);border-radius:50%;
}

/* ============ MARQUEE (running text dari admin) ============ */
.marquee-bar{
  background:var(--blue);color:#fff;
  padding:8px 0;
  font-size:11px;font-weight:700;letter-spacing:.5px;
  overflow:hidden;white-space:nowrap;
  border-bottom:2.5px solid var(--border);
  position:relative;
}
.marquee-bar .track{
  display:inline-block;padding-left:100%;
  animation:marquee 25s linear infinite;
}
.marquee-bar .track span{padding:0 40px;}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ============ PAGE TRANSITION ============ */
.page{display:none;padding:14px;animation:fadeUp .3s ease;}
.page.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeUp .4s ease;}

/* ============ HERO ============ */
.hero{
  background:linear-gradient(135deg, var(--border) 0%, color-mix(in srgb, var(--border) 85%, var(--primary)) 100%);
  color:#fff;
  border-radius:var(--radius);
  border:2.5px solid var(--border);
  box-shadow:var(--shadow-lg);
  padding:26px 20px;margin-bottom:18px;
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 10px, transparent 10px 20px);
  animation:heroBg 20s linear infinite;
}
@keyframes heroBg{to{background-position:200px 200px, 0 0;}}
.hero > *{position:relative;z-index:1;}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--primary);color:var(--text);
  font-size:10px;font-weight:800;letter-spacing:1.5px;
  padding:6px 12px;border-radius:6px;border:2px solid var(--border);
  margin-bottom:14px;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{50%{transform:scale(1.04)}}
.hero-badge i{width:6px;height:6px;background:var(--green);border-radius:50%;animation:blink 1s infinite;}
@keyframes blink{50%{opacity:.3}}
.hero h1{font-family:var(--font-sans);font-size:30px;font-weight:700;line-height:1.1;margin-bottom:10px;letter-spacing:.5px;}
.hero h1 .y{color:var(--primary);}
.hero p{font-size:13px;color:rgba(255,255,255,.75);line-height:1.6;margin-bottom:18px;max-width:90%;}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;}

.btn-hero{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:10px;
  font-weight:800;font-size:12px;letter-spacing:1px;
  border:2.5px solid var(--border);
  box-shadow:3px 3px 0 var(--border);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-hero:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--border);}
.btn-hero.primary{background:var(--primary);color:var(--text);}
.btn-hero.ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:3px 3px 0 rgba(255,255,255,.2);}
.btn-hero svg{width:16px;height:16px;}

/* ============ CARD ============ */
.card{
  background:var(--bg-card);
  border:2.5px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;margin-bottom:16px;
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-med);
}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg);}
.card.tight{padding:12px;}
.card.flat{box-shadow:none;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.card-title{
  display:flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:1.5px;font-size:13px;
}
.card-title .sq{
  width:30px;height:30px;background:var(--border);color:var(--primary);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.card-title .sq svg{width:16px;height:16px;stroke:var(--primary);}

/* ============ SECTION TITLE ============ */
.section-title{
  display:flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:2px;font-size:13px;
  margin:22px 4px 14px;
}
.section-title::before{
  content:"";width:4px;height:18px;
  background:var(--primary);
  border-radius:3px;border:1.5px solid var(--border);
}
.section-title.sm{font-size:11px;margin:12px 4px 10px;letter-spacing:1.5px;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;
  border:2.5px solid var(--border);border-radius:10px;
  font-weight:800;font-size:12px;letter-spacing:1px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  white-space:nowrap;
}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border);}
.btn svg{width:16px;height:16px;}
.btn.primary{background:var(--primary);color:var(--text);}
.btn.dark{background:var(--border);color:var(--primary);}
.btn.ghost{background:var(--bg-card);}
.btn.danger{background:var(--red);color:#fff;}
.btn.success{background:var(--green);color:#fff;}
.btn.info{background:var(--blue);color:#fff;}
.btn.sm{padding:8px 14px;font-size:11px;}
.btn.lg{padding:16px 26px;font-size:13px;}
.btn.block{width:100%;}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;}

.btn-primary{
  width:100%;
  background:var(--primary);color:var(--text);
  border:2.5px solid var(--border);border-radius:12px;
  padding:16px;font-weight:800;letter-spacing:2px;font-size:13px;
  box-shadow:var(--shadow);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.btn-primary:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--border);}
.btn-primary[disabled]{opacity:.55;cursor:not-allowed;transform:none;}
.btn-primary svg{width:18px;height:18px;}

/* ============ PILL / CHIP / BADGE ============ */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border:2px solid var(--border);border-radius:8px;
  background:var(--bg-card);
  font-weight:700;font-size:10px;letter-spacing:.5px;
  box-shadow:2px 2px 0 var(--border);
  transition:transform var(--t-fast);
}
.pill:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border);}
.pill.dark{background:var(--border);color:var(--primary);}
.pill.yellow{background:var(--primary);}
.pill.green{background:var(--green);color:#fff;}
.pill.red{background:var(--red);color:#fff;}
.pill.blue{background:var(--blue);color:#fff;}
.pill.purple{background:var(--purple);color:#fff;}
.pill svg{width:12px;height:12px;}

.chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:800;letter-spacing:.5px;
  padding:4px 9px;border-radius:6px;
  border:2px solid var(--border);
}
.chip.yellow{background:var(--primary);color:var(--text);}
.chip.blue{background:var(--blue);color:#fff;}
.chip.green{background:var(--green);color:#fff;}
.chip.red{background:var(--red);color:#fff;}

.badge{
  font-size:9px;font-weight:800;letter-spacing:1px;
  padding:4px 8px;border-radius:5px;
  border:2px solid var(--border);
  background:var(--green);color:#fff;
}
.badge.hot{background:var(--red);}
.badge.new{background:var(--blue);}
.badge.vip{background:var(--purple);}
/* ============ FORM ============ */
.form-card{
  background:var(--bg-card);
  border:2.5px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;margin-bottom:18px;
}
.form-card h3{font-family:var(--font-sans);font-size:16px;font-weight:700;margin-bottom:14px;letter-spacing:.3px;}

.field{margin-bottom:14px;}
.field label{
  display:block;
  font-size:10px;font-weight:800;letter-spacing:1.5px;
  margin-bottom:6px;color:var(--text);
}
.field label .req{color:var(--red);}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 14px;
  background:var(--bg);
  border:2.5px solid var(--border);
  border-radius:10px;
  font-size:13px;font-weight:600;letter-spacing:.3px;
  color:var(--text);
  outline:none;
  transition:background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  background:var(--bg-card);
  box-shadow:3px 3px 0 var(--blue);
}
.field input.err,
.field select.err,
.field textarea.err{
  background:#FFE0E6;
  border-color:var(--red);
  box-shadow:3px 3px 0 var(--red);
}
.field .hint{font-size:10px;color:var(--text-muted);margin-top:5px;}
.field .err-msg{
  font-size:10px;color:var(--red);
  margin-top:5px;font-weight:700;
  display:none;
}
.field .err-msg.show{display:block;}
.field textarea{resize:vertical;min-height:80px;font-family:var(--font-mono);}
.field .input-group{display:flex;gap:8px;}
.field .input-group input{flex:1;}
.field .input-group button{
  border:2.5px solid var(--border);
  background:var(--bg-card);
  border-radius:10px;
  padding:0 16px;
  font-weight:700;font-size:11px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast);
}
.field .input-group button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border);}

/* Checkbox custom */
.check-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;cursor:pointer;}
.check-row input[type="checkbox"]{
  width:20px;height:20px;
  border:2.5px solid var(--border);
  border-radius:5px;
  appearance:none;
  background:var(--bg-card);
  position:relative;
  cursor:pointer;
  transition:background var(--t-fast);
}
.check-row input[type="checkbox"]:checked{background:var(--primary);}
.check-row input[type="checkbox"]:checked::after{
  content:"";position:absolute;
  left:5px;top:1px;
  width:5px;height:10px;
  border:solid var(--border);
  border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
.check-row span{font-size:12.5px;font-weight:700;}

/* Switch (toggle) */
.switch-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
  border-bottom:2px dashed color-mix(in srgb, var(--border) 15%, transparent);
}
.switch-row:last-child{border-bottom:none;}
.switch-row .txt{flex:1;min-width:0;}
.switch-row .txt .t{font-weight:800;font-size:12.5px;}
.switch-row .txt .d{font-size:10px;color:var(--text-muted);margin-top:3px;}

.switch{
  width:52px;height:30px;
  background:#ccc;
  border:2.5px solid var(--border);border-radius:20px;
  position:relative;cursor:pointer;
  transition:background var(--t-med);
  flex-shrink:0;
}
.switch::after{
  content:"";position:absolute;
  top:2px;left:2px;
  width:22px;height:22px;
  background:var(--bg-card);
  border:2px solid var(--border);border-radius:50%;
  transition:transform var(--t-med);
}
.switch.on{background:var(--green);}
.switch.on::after{transform:translateX(22px);}

/* ============ TAB SWITCH ============ */
.tab-switch{
  display:flex;
  background:var(--border);
  border-radius:10px;padding:4px;
  margin-bottom:16px;
  border:2.5px solid var(--border);
}
.tab-switch button{
  flex:1;padding:10px;
  border-radius:7px;
  font-weight:800;font-size:11px;letter-spacing:1.5px;
  color:var(--text-muted);
  transition:all var(--t-fast);
}
.tab-switch button.active{background:var(--primary);color:var(--text);}

/* ============ USER BAR ============ */
.user-bar{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:var(--radius);
  padding:12px 14px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}
.user-bar .av{
  width:44px;height:44px;
  background:var(--primary);
  border:2.5px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-sans);font-weight:700;font-size:20px;
  flex-shrink:0;
}
.user-bar .info{flex:1;min-width:0;}
.user-bar .info .name{font-weight:800;font-size:13px;letter-spacing:.3px;}
.user-bar .info .role{font-size:10px;color:var(--text-muted);letter-spacing:.5px;margin-top:2px;}

/* ============ STATS ============ */
.stats-mini{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:18px;
  overflow:hidden;
}
.stats-mini > div{
  padding:14px 6px;text-align:center;
  border-right:2px solid var(--border);
  transition:background var(--t-fast);
}
.stats-mini > div:last-child{border-right:none;}
.stats-mini > div:hover{background:var(--primary-soft);}
.stats-mini .val{font-family:var(--font-sans);font-size:20px;font-weight:700;line-height:1;}
.stats-mini .lbl{font-size:9px;color:var(--text-muted);letter-spacing:1px;margin-top:5px;font-weight:700;}

/* ============ PRODUCT CARD ============ */
.product-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:20px;}
@media(min-width:520px){.product-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:900px){.product-grid{grid-template-columns:repeat(3,1fr);}}

.product-card{
  background:var(--bg-card);
  border:2.5px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  position:relative;overflow:hidden;
}
.product-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg);}
.product-card .p-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.product-card .p-ic{
  width:48px;height:48px;
  border-radius:10px;
  border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  background:var(--primary);
  flex-shrink:0;
  overflow:hidden;
}
.product-card .p-ic img{width:100%;height:100%;object-fit:cover;}
.product-card h3{font-family:var(--font-sans);font-size:16px;font-weight:700;letter-spacing:.3px;line-height:1.25;}
.product-card .p-desc{font-size:11.5px;color:var(--text-muted);line-height:1.5;flex:1;}
.product-card .p-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;}
.product-card .price{font-family:var(--font-sans);font-size:18px;font-weight:700;color:var(--text);}
.product-card .price small{font-size:10px;color:var(--text-muted);font-weight:500;text-decoration:line-through;margin-right:5px;}

.btn-order{
  background:var(--primary);
  border:2px solid var(--border);border-radius:8px;
  padding:8px 14px;
  font-weight:800;font-size:11px;letter-spacing:1px;
  box-shadow:2px 2px 0 var(--border);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  display:flex;align-items:center;gap:6px;
  color:var(--text);
}
.btn-order:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border);}
.btn-order svg{width:12px;height:12px;}

/* ============ EMPTY / SKELETON ============ */
.empty-box{
  text-align:center;
  color:var(--text-muted);
  font-size:12px;font-weight:600;
  padding:36px 20px;
  background:var(--bg-card);
  border:2.5px dashed var(--border);
  border-radius:12px;
  opacity:.7;
}
.skeleton{
  background:linear-gradient(90deg, var(--bg-alt) 25%, color-mix(in srgb, var(--bg-alt) 60%, var(--border) 5%) 50%, var(--bg-alt) 75%);
  background-size:200% 100%;
  animation:skel 1.4s infinite;
  border-radius:8px;
}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============ DATA LIST (order/chat/visitor) ============ */
.data-list{display:flex;flex-direction:column;gap:10px;}
.data-item{
  background:var(--bg-card);
  border:2.5px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  box-shadow:var(--shadow-sm);
  position:relative;
  transition:transform var(--t-fast);
}
.data-item .row{display:flex;align-items:flex-start;gap:10px;}
.data-item .row .dot{
  width:10px;height:10px;border-radius:50%;
  flex-shrink:0;margin-top:5px;
  border:2px solid var(--border);
  background:var(--text-muted);
}
.data-item .row .dot.g{background:var(--green);}
.data-item .row .dot.y{background:var(--primary);}
.data-item .row .dot.r{background:var(--red);}
.data-item .row .dot.b{background:var(--blue);}
.data-item .row .dot.p{background:var(--purple);}
.data-item .row .main{flex:1;min-width:0;}
.data-item .row .main .ttl{
  font-weight:800;font-size:12.5px;letter-spacing:.2px;
  word-break:break-word;
}
.data-item .row .main .meta{
  font-size:10.5px;color:var(--text-muted);
  margin-top:4px;line-height:1.5;
  word-break:break-word;
}
.data-item .row .main .meta b{color:var(--text);}
.data-item .row .time{
  font-size:10px;color:var(--text-muted);
  font-weight:700;white-space:nowrap;
}
.data-item .actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.data-item .actions button{
  font-size:10px;font-weight:800;letter-spacing:.5px;
  padding:6px 10px;
  border:2px solid var(--border);border-radius:6px;
  background:var(--bg-card);color:var(--text);
  box-shadow:2px 2px 0 var(--border);
  transition:transform var(--t-fast);
}
.data-item .actions button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border);}
.data-item .actions button.danger{background:var(--red);color:#fff;}
.data-item .actions button.ok{background:var(--green);color:#fff;}
.data-item .actions button.y{background:var(--primary);color:var(--text);}
.data-item .actions button.b{background:var(--blue);color:#fff;}
/* ============ MODAL ============ */
.modal-mask{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  z-index:9996;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-med), visibility var(--t-med);
  display:flex;align-items:flex-end;justify-content:center;
}
.modal-mask.open{opacity:1;visibility:visible;}
.modal-mask.center{align-items:center;padding:16px;}
.modal{
  width:100%;max-width:560px;
  background:var(--bg);
  border-top-left-radius:20px;border-top-right-radius:20px;
  border:2.5px solid var(--border);border-bottom:none;
  padding:20px 18px 28px;
  transform:translateY(100%);
  transition:transform var(--t-med) cubic-bezier(.2,.8,.2,1);
  max-height:88vh;overflow-y:auto;
}
.modal-mask.center .modal{
  border-radius:20px;border-bottom:2.5px solid var(--border);
  transform:translateY(30px) scale(.95);
}
.modal-mask.open .modal{transform:translateY(0) scale(1);}
.modal .grab{width:44px;height:5px;background:var(--text-muted);opacity:.3;border-radius:5px;margin:0 auto 14px;}
.modal h3{font-family:var(--font-sans);font-size:18px;font-weight:700;margin-bottom:8px;letter-spacing:.3px;}
.modal p.sub{font-size:12px;color:var(--text-muted);line-height:1.6;margin-bottom:16px;}
.modal-actions{display:flex;gap:10px;margin-top:16px;}

.modal-btn{
  flex:1;padding:14px;
  border:2.5px solid var(--border);border-radius:10px;
  font-weight:800;letter-spacing:1px;font-size:12px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  color:var(--text);
}
.modal-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border);}
.modal-btn.ghost{background:var(--bg-card);}
.modal-btn.primary{background:var(--primary);}
.modal-btn.danger{background:var(--red);color:#fff;}

/* ============ DRAWER ============ */
.drawer-mask{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  z-index:9996;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-med), visibility var(--t-med);
}
.drawer-mask.open{opacity:1;visibility:visible;}
.drawer{
  position:fixed;top:0;left:0;bottom:0;
  width:82%;max-width:320px;
  background:var(--bg);
  border-right:2.5px solid var(--border);
  padding:20px 18px;
  overflow-y:auto;
  z-index:9997;
  transform:translateX(-100%);
  transition:transform var(--t-med) cubic-bezier(.2,.8,.2,1);
}
.drawer.open{transform:translateX(0);}
.drawer-brand{
  display:flex;align-items:center;gap:12px;
  padding-bottom:18px;
  border-bottom:2px solid var(--border);
  margin-bottom:18px;
}
.drawer-brand .logo{
  background:var(--primary);color:var(--text);
  border:2.5px solid var(--border);border-radius:10px;
  padding:8px 14px;
  font-weight:800;letter-spacing:3px;font-size:14px;
  box-shadow:var(--shadow-sm);
}
.drawer-user{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-card);
  border:2px solid var(--border);border-radius:10px;
  padding:12px;margin-bottom:18px;
  box-shadow:3px 3px 0 var(--border);
}
.drawer-user .av{
  width:42px;height:42px;
  background:var(--primary);color:var(--text);
  border:2px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  flex-shrink:0;
}
.drawer-user .info .name{font-weight:800;font-size:13px;}
.drawer-user .info .role{font-size:10px;color:var(--text-muted);}
.drawer-list{display:flex;flex-direction:column;gap:6px;}
.drawer-list li{
  display:flex;align-items:center;gap:12px;
  padding:12px 10px;border-radius:8px;
  font-weight:700;font-size:13px;letter-spacing:.5px;
  cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast);
}
.drawer-list li:hover,
.drawer-list li:active{background:var(--border);color:var(--primary);}
.drawer-list li svg{width:18px;height:18px;}
.drawer-list .sep{height:2px;background:var(--border);opacity:.1;margin:10px 0;border-radius:2px;}

/* ============ TOAST ============ */
#toast-wrap{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  z-index:9998;
  width:92%;max-width:440px;
  pointer-events:none;
}
.toast{
  background:var(--border);color:#fff;
  border:2.5px solid var(--primary);
  border-radius:10px;
  padding:12px 14px;
  font-size:12px;font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:flex;align-items:center;gap:10px;
  margin-bottom:8px;
  animation:slideDown .3s ease, fadeOut .3s ease 3s forwards;
}
.toast.success{border-color:var(--green);}
.toast.error{border-color:var(--red);}
.toast.info{border-color:var(--blue);}
.toast .ic{
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.toast.success .ic{background:var(--green);}
.toast.error .ic{background:var(--red);}
.toast.info .ic{background:var(--blue);}
.toast .ic svg{width:12px;height:12px;stroke:#fff;}
@keyframes slideDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fadeOut{to{opacity:0;transform:translateY(-8px)}}

/* ============ LOADING OVERLAY ============ */
#loading{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:9997;
  display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(3px);
}
#loading.show{display:flex;}
.loader-box{
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:14px;
  padding:24px 30px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:var(--shadow-lg);
}
.spinner{
  width:38px;height:38px;
  border:3.5px solid color-mix(in srgb, var(--border) 20%, transparent);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-box span{font-size:11px;font-weight:800;letter-spacing:1.5px;}

/* ============ CHAT ============ */
.chat-modal{display:flex;flex-direction:column;gap:10px;}
.chat-bubble{
  padding:10px 14px;border-radius:12px;
  font-size:12.5px;line-height:1.5;
  max-width:82%;
  word-break:break-word;
  border:2px solid var(--border);
}
.chat-bubble.me{
  align-self:flex-end;
  background:var(--primary);color:var(--text);
  border-bottom-right-radius:3px;
}
.chat-bubble.other{
  align-self:flex-start;
  background:var(--bg-card);color:var(--text);
  border-bottom-left-radius:3px;
}
.chat-input-row{display:flex;gap:8px;margin-top:8px;}
.chat-input-row input{
  flex:1;padding:12px;
  border:2.5px solid var(--border);border-radius:10px;
  background:var(--bg-card);color:var(--text);
  font-size:12.5px;outline:none;
}
.chat-input-row button{
  width:48px;
  background:var(--primary);color:var(--text);
  border:2.5px solid var(--border);border-radius:10px;
  box-shadow:2px 2px 0 var(--border);
  display:flex;align-items:center;justify-content:center;
}
.chat-input-row button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border);}
.chat-input-row button svg{width:18px;height:18px;stroke:var(--text);}

/* ============ CHAT FAB ============ */
.chat-fab{
  position:fixed;bottom:24px;right:20px;
  z-index:90;
  width:56px;height:56px;
  background:var(--primary);color:var(--text);
  border:2.5px solid var(--border);border-radius:50%;
  box-shadow:4px 4px 0 var(--border);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  animation:float 3s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-6px)}}
.chat-fab:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--border);animation:none;}
.chat-fab svg{width:24px;height:24px;stroke:var(--text);}
@media(min-width:900px){.chat-fab{right:calc(50% - 300px);}}

/* ============ UPLOAD ============ */
.upload-box{
  border:2.5px dashed var(--border);
  border-radius:12px;
  padding:22px 16px;
  text-align:center;
  background:var(--bg-card);
  cursor:pointer;
  transition:background var(--t-fast);
}
.upload-box:hover{background:var(--primary-soft);}
.upload-box .ic{font-size:32px;margin-bottom:8px;}
.upload-box .t{font-weight:800;font-size:12.5px;letter-spacing:.5px;}
.upload-box .d{font-size:10px;color:var(--text-muted);margin-top:4px;}
.upload-box input{display:none;}
.upload-preview{
  margin-top:12px;
  display:flex;flex-wrap:wrap;gap:8px;
}
.upload-preview .item{
  position:relative;
  width:80px;height:80px;
  border:2px solid var(--border);border-radius:8px;
  overflow:hidden;
  background:var(--bg-alt);
}
.upload-preview .item img,
.upload-preview .item video{width:100%;height:100%;object-fit:cover;}
.upload-preview .item .x{
  position:absolute;top:2px;right:2px;
  width:20px;height:20px;
  background:var(--red);color:#fff;
  border:1.5px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;
  cursor:pointer;
}

/* ============ PROGRESS BAR ============ */
.progress{
  width:100%;height:8px;
  background:var(--bg-alt);
  border:2px solid var(--border);border-radius:10px;
  overflow:hidden;
}
.progress > i{
  display:block;height:100%;
  background:var(--primary);
  transition:width var(--t-med);
}

/* ============ SLIDER RANGE ============ */
input[type="range"]{
  width:100%;
  height:6px;
  border-radius:6px;
  background:var(--bg-alt);
  appearance:none;
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:20px;height:20px;
  background:var(--primary);
  border:2.5px solid var(--border);border-radius:50%;
  cursor:pointer;
  box-shadow:2px 2px 0 var(--border);
}
input[type="range"]::-moz-range-thumb{
  width:20px;height:20px;
  background:var(--primary);
  border:2.5px solid var(--border);border-radius:50%;
  cursor:pointer;
}

/* ============ COLOR PICKER ============ */
input[type="color"]{
  width:100%;height:44px;
  border:2.5px solid var(--border);border-radius:10px;
  background:var(--bg-card);
  cursor:pointer;
  padding:3px;
}
/* ============ ADMIN PANEL ============ */
.admin-hero{
  background:var(--border);color:var(--primary);
  border:2.5px solid var(--border);border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-lg);
  margin-bottom:18px;
  text-align:center;
}
.admin-hero h2{font-family:var(--font-sans);font-size:22px;font-weight:700;letter-spacing:2px;}
.admin-hero p{font-size:11px;color:var(--text-muted);margin-top:6px;letter-spacing:1px;}

.admin-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px;}
@media(min-width:520px){.admin-stats{grid-template-columns:repeat(4,1fr);}}
.admin-stat{
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:12px;
  padding:14px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast);
}
.admin-stat:hover{transform:translate(-2px,-2px);}
.admin-stat .ic{
  width:34px;height:34px;border-radius:8px;
  border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;margin-bottom:10px;
  background:var(--primary);color:var(--text);
}
.admin-stat .val{font-family:var(--font-sans);font-size:22px;font-weight:700;line-height:1;}
.admin-stat .lbl{font-size:9px;color:var(--text-muted);letter-spacing:1px;margin-top:5px;font-weight:700;}

.admin-menu{display:flex;flex-direction:column;gap:10px;}
.admin-menu-item{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:12px;
  padding:14px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  cursor:pointer;
}
.admin-menu-item:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border);}
.admin-menu-item .ic{
  width:42px;height:42px;border-radius:10px;
  border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.admin-menu-item .ic.y{background:var(--primary);color:var(--text);}
.admin-menu-item .ic.g{background:var(--green);color:#fff;}
.admin-menu-item .ic.b{background:var(--blue);color:#fff;}
.admin-menu-item .ic.r{background:var(--red);color:#fff;}
.admin-menu-item .ic.p{background:var(--purple);color:#fff;}
.admin-menu-item .ic.o{background:var(--orange);color:#fff;}
.admin-menu-item .txt{flex:1;min-width:0;}
.admin-menu-item .txt .t{font-weight:800;font-size:13px;letter-spacing:.3px;}
.admin-menu-item .txt .d{font-size:10px;color:var(--text-muted);margin-top:3px;}
.admin-menu-item .arr{color:var(--text-muted);font-size:18px;}

/* ============ ADMIN TABS (horizontal scroll) ============ */
.admin-tabs{
  display:flex;gap:8px;
  overflow-x:auto;
  padding:4px 2px 10px;
  margin-bottom:12px;
  scrollbar-width:none;
}
.admin-tabs::-webkit-scrollbar{display:none;}
.admin-tabs .tab{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:var(--bg-card);
  border:2px solid var(--border);border-radius:20px;
  font-size:11px;font-weight:800;letter-spacing:.5px;
  color:var(--text);
  cursor:pointer;
  transition:all var(--t-fast);
  white-space:nowrap;
}
.admin-tabs .tab:hover{background:var(--primary-soft);}
.admin-tabs .tab.active{
  background:var(--primary);
  color:var(--text);
  box-shadow:2px 2px 0 var(--border);
}
.admin-tabs .tab svg{width:14px;height:14px;}

/* ============ TABLE ============ */
.table-wrap{
  overflow-x:auto;
  border:2.5px solid var(--border);border-radius:12px;
  background:var(--bg-card);
  box-shadow:var(--shadow-sm);
}
table.tbl{width:100%;border-collapse:collapse;font-size:12px;}
table.tbl th{
  background:var(--border);color:var(--primary);
  padding:10px 12px;
  text-align:left;
  font-weight:800;font-size:10px;letter-spacing:1px;
  white-space:nowrap;
}
table.tbl td{
  padding:10px 12px;
  border-bottom:1.5px solid color-mix(in srgb, var(--border) 12%, transparent);
  color:var(--text);
}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl tr:hover td{background:var(--primary-soft);}

/* ============ STATISTIK BOX ============ */
.stat-box{
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:12px;
  padding:16px;
  box-shadow:var(--shadow-sm);
}
.stat-box .title{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:6px;}
.stat-box .value{font-family:var(--font-sans);font-size:28px;font-weight:700;line-height:1;}
.stat-box .delta{font-size:10px;margin-top:6px;font-weight:700;}
.stat-box .delta.up{color:var(--green);}
.stat-box .delta.down{color:var(--red);}

/* ============ REVIEW CARD ============ */
.review-card{
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:12px;
  padding:14px;
  box-shadow:var(--shadow-sm);
  margin-bottom:10px;
}
.review-card .head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.review-card .head .av{
  width:38px;height:38px;
  background:var(--primary);
  border:2px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;
  flex-shrink:0;
}
.review-card .head .info{flex:1;min-width:0;}
.review-card .head .info .name{font-weight:800;font-size:12.5px;}
.review-card .head .info .stars{font-size:11px;letter-spacing:1px;margin-top:2px;}
.review-card .head .actions{display:flex;gap:6px;}
.review-card .head .actions button{
  width:32px;height:32px;
  border:2px solid var(--border);border-radius:8px;
  background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;
  box-shadow:2px 2px 0 var(--border);
  transition:transform var(--t-fast);
}
.review-card .head .actions button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border);}
.review-card .head .actions button.danger{color:var(--red);}
.review-card .body{
  font-size:12px;color:var(--text);
  line-height:1.6;
  padding-top:6px;
  border-top:1.5px dashed color-mix(in srgb, var(--border) 20%, transparent);
}

/* ============ TESTIMONI CARD ============ */
.testi-card{
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:12px;
  padding:16px;
  box-shadow:var(--shadow-sm);
  margin-bottom:12px;
  position:relative;
}
.testi-card .quote{
  position:absolute;top:10px;right:14px;
  font-size:36px;font-weight:800;
  color:var(--primary);opacity:.35;
  font-family:Georgia,serif;
  line-height:1;
}
.testi-card .stars{font-size:13px;letter-spacing:1px;margin-bottom:8px;}
.testi-card .text{font-size:12.5px;line-height:1.6;margin-bottom:12px;font-style:italic;}
.testi-card .author{display:flex;align-items:center;gap:10px;}
.testi-card .author .av{
  width:36px;height:36px;
  background:var(--primary);
  border:2px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;
  flex-shrink:0;
}
.testi-card .author .info .name{font-weight:800;font-size:12px;}
.testi-card .author .info .role{font-size:10px;color:var(--text-muted);}

/* ============ KATEGORI CARD ============ */
.kategori-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media(min-width:520px){.kategori-grid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:768px){.kategori-grid{grid-template-columns:repeat(6,1fr);}}

.kategori-item{
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:12px;
  padding:14px 8px;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;
  transition:transform var(--t-fast), background var(--t-fast);
  text-align:center;
}
.kategori-item:hover{background:var(--primary-soft);transform:translate(-2px,-2px);}
.kategori-item .ic{
  width:40px;height:40px;
  background:var(--primary);
  border:2px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;
  color:var(--text);
}
.kategori-item .name{font-size:10.5px;font-weight:800;letter-spacing:.3px;}

/* ============ SLIDESHOW HERO ============ */
.slideshow{
  position:relative;
  border:2.5px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
  background:var(--border);
  aspect-ratio:16/9;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}
.slideshow .slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .6s ease;
  display:flex;align-items:flex-end;
}
.slideshow .slide.active{opacity:1;}
.slideshow .slide img,
.slideshow .slide video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.slideshow .slide .caption{
  position:relative;z-index:2;
  width:100%;
  padding:16px;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
  color:#fff;
}
.slideshow .slide .caption h3{font-family:var(--font-sans);font-size:16px;font-weight:700;margin-bottom:4px;}
.slideshow .slide .caption p{font-size:11px;opacity:.85;}
.slideshow .dots{
  position:absolute;bottom:10px;right:14px;
  z-index:3;
  display:flex;gap:5px;
}
.slideshow .dots i{
  width:8px;height:8px;
  background:rgba(255,255,255,.4);
  border-radius:50%;
  cursor:pointer;
  transition:background var(--t-fast);
}
.slideshow .dots i.on{background:var(--primary);}

/* ============ IKLAN / BANNER ============ */
.iklan-box{
  display:block;
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  margin-bottom:14px;
  transition:transform var(--t-fast);
  cursor:pointer;
}
.iklan-box:hover{transform:translate(-2px,-2px);}
.iklan-box img{width:100%;height:auto;display:block;}
.iklan-box .body{padding:12px 14px;}
.iklan-box .body .ttl{font-weight:800;font-size:13px;margin-bottom:4px;}
.iklan-box .body .desc{font-size:11px;color:var(--text-muted);line-height:1.5;}
.iklan-box .body .cta{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;
  background:var(--primary);
  border:2px solid var(--border);border-radius:6px;
  padding:6px 12px;
  font-size:10px;font-weight:800;letter-spacing:1px;
  color:var(--text);
}

/* ============ POPUP PROMO ============ */
.promo-mask{
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  z-index:9995;
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
}
.promo-mask.show{display:flex;}
.promo-box{
  width:100%;max-width:420px;
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow-lg);
  position:relative;
  animation:pop .4s cubic-bezier(.2,1.4,.4,1);
  text-align:center;
}
.promo-box .close{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;
  border:2px solid var(--border);border-radius:50%;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;
  cursor:pointer;
}
.promo-box h3{font-family:var(--font-sans);font-size:20px;font-weight:700;margin-bottom:10px;}
.promo-box p{font-size:12.5px;color:var(--text-muted);line-height:1.6;margin-bottom:16px;}

/* ============ ONLINE USERS WIDGET ============ */
.online-widget{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg-card);
  border:2px solid var(--border);border-radius:20px;
  padding:6px 12px;
  font-size:11px;font-weight:800;
  box-shadow:2px 2px 0 var(--border);
}
.online-widget .dot{
  width:8px;height:8px;
  background:var(--green);border-radius:50%;
  animation:blink 1.4s infinite;
}

/* ============ MAINTENANCE MODE ============ */
.maintenance-screen{
  position:fixed;inset:0;
  z-index:99990;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px;text-align:center;
  gap:20px;
}
.maintenance-screen .ic{font-size:64px;}
.maintenance-screen h1{font-family:var(--font-sans);font-size:26px;font-weight:700;}
.maintenance-screen p{font-size:13px;color:var(--text-muted);max-width:400px;line-height:1.6;}

/* ============ MUSIK BG WIDGET ============ */
.music-widget{
  position:fixed;bottom:24px;left:20px;
  z-index:90;
  width:48px;height:48px;
  background:var(--bg-card);
  border:2.5px solid var(--border);border-radius:50%;
  box-shadow:3px 3px 0 var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform var(--t-fast);
}
.music-widget:hover{background:var(--primary);}
.music-widget.playing{animation:spin 4s linear infinite;}
.music-widget svg{width:20px;height:20px;stroke:var(--text);}
@media(min-width:900px){.music-widget{left:calc(50% - 300px);}}
/* ============ EFEK MODERN & FUTURISTIK ============ */
/* Semua efek di bawah ini bisa dimatikan dari Admin > Efek Modern */

/* Particle background canvas */
#particle-bg{
  position:fixed;inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity 1s ease;
}
#particle-bg.active{opacity:1;}

/* Cursor glow (desktop only) */
#cursor-glow{
  position:fixed;
  top:0;left:0;
  width:400px;height:400px;
  border-radius:50%;
  background:radial-gradient(circle, var(--neon-1) 0%, transparent 60%);
  opacity:0;
  pointer-events:none;
  z-index:-1;
  transform:translate(-50%,-50%);
  transition:opacity var(--t-med);
  mix-blend-mode:screen;
  filter:blur(40px);
}
#cursor-glow.active{opacity:.4;}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

/* 3D Tilt on hover (product cards, dsb) */
.tilt-3d{
  transform-style:preserve-3d;
  transition:transform .25s ease;
  will-change:transform;
}
.tilt-3d:hover{transform:perspective(1000px) rotateX(2deg) rotateY(-2deg) scale(1.02);}

/* Neon glow */
.neon-glow{
  box-shadow:0 0 8px var(--neon-1), 0 0 20px var(--neon-2);
  transition:box-shadow var(--t-med);
}
.neon-glow:hover{
  box-shadow:0 0 16px var(--neon-1), 0 0 40px var(--neon-2);
}

/* Cyber mode (dark + neon) */
[data-cyber="on"]{
  --primary:var(--neon-1);
  --bg:#05050A;
  --bg-card:#0F0F1A;
  --bg-alt:#1A1A2A;
  --text:#F0F0FF;
  --text-muted:#8888A0;
  --border:var(--neon-2);
  --shadow:4px 4px 0 var(--neon-2);
  --shadow-sm:3px 3px 0 var(--neon-2);
  --shadow-lg:6px 6px 0 var(--neon-2);
}
[data-cyber="on"] body{
  background-image:
    linear-gradient(rgba(168,85,247,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.04) 1px, transparent 1px);
  background-size:40px 40px;
}

/* Easter egg: cyber mode auto-aktif saat konami code */
body.cyber-flash{
  animation:cyberFlash .8s ease;
}
@keyframes cyberFlash{
  0%,100%{filter:none;}
  25%{filter:hue-rotate(90deg) saturate(2);}
  50%{filter:hue-rotate(180deg) saturate(3) brightness(1.3);}
  75%{filter:hue-rotate(270deg) saturate(2);}
}

/* Gradient text */
.grad-text{
  background:linear-gradient(90deg, var(--primary), var(--neon-1), var(--neon-2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  background-size:200% 100%;
  animation:gradShift 4s ease infinite;
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

/* Loading screen futuristik (sekali per sesi) */
#boot-screen{
  position:fixed;inset:0;
  z-index:99999;
  background:#05050A;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;
  color:#F0F0FF;
  font-family:var(--font-mono);
  transition:opacity .5s ease, visibility .5s ease;
}
#boot-screen.hide{opacity:0;visibility:hidden;}
#boot-screen .logo-boot{
  font-family:var(--font-sans);font-size:36px;font-weight:700;letter-spacing:8px;
  background:linear-gradient(90deg, var(--neon-1), var(--neon-2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:pulse 2s ease-in-out infinite;
}
#boot-screen .lines{
  font-size:10.5px;line-height:1.9;
  color:#6A6A80;
  min-height:120px;min-width:260px;
}
#boot-screen .lines .ok{color:var(--green);}
#boot-screen .progress{
  width:260px;height:4px;
  background:#1A1A2A;
  border:none;
  border-radius:4px;
}
#boot-screen .progress > i{
  background:linear-gradient(90deg, var(--neon-1), var(--neon-2));
  box-shadow:0 0 12px var(--neon-1);
}

/* Activity feed (bukan popup beli palsu) */
.activity-feed{
  position:fixed;
  bottom:20px;left:20px;
  max-width:280px;
  z-index:80;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.activity-feed .item{
  background:var(--bg-card);
  border:2px solid var(--border);border-radius:10px;
  padding:10px 12px;
  font-size:11px;font-weight:700;
  box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:10px;
  animation:slideRight .4s ease, fadeOut .4s ease 5s forwards;
  pointer-events:auto;
}
.activity-feed .item .ic{
  width:24px;height:24px;
  background:var(--primary);
  border:1.5px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  flex-shrink:0;
}
@keyframes slideRight{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:none;}}

/* ============ RESPONSIVE ============ */
@media(max-width:640px){
  .app-header{padding:10px 12px;}
  .header-brand{font-size:11px;padding:6px 10px;letter-spacing:2px;}
  .icon-btn{width:36px;height:36px;}
  .icon-btn svg{width:18px;height:18px;}
  .page{padding:12px;}
  .hero{padding:20px 16px;}
  .hero h1{font-size:24px;}
  .hero p{font-size:12px;}
  .form-card{padding:14px;}
  .modal{padding:16px 14px 22px;}
  .modal h3{font-size:16px;}
  .admin-stat .val{font-size:18px;}
  .admin-hero h2{font-size:18px;}
  .stat-box .value{font-size:22px;}
  .chat-fab{width:52px;height:52px;bottom:20px;right:14px;}
  .chat-fab svg{width:22px;height:22px;}
  .music-widget{width:44px;height:44px;bottom:20px;left:14px;}
  .toast{font-size:11px;padding:10px 12px;}
}

@media(max-width:420px){
  .stats-mini .val{font-size:16px;}
  .product-card h3{font-size:14px;}
  .product-card .price{font-size:16px;}
  .btn{padding:10px 16px;font-size:11px;}
  .btn-primary{padding:14px;font-size:12px;}
}

/* Prevent layout shift on iOS notch */
@supports(padding:max(0px)){
  .app-header{
    padding-top:max(12px, env(safe-area-inset-top));
  }
  .chat-fab{
    bottom:max(20px, env(safe-area-inset-bottom));
  }
  .bottom-nav-safe{
    padding-bottom:env(safe-area-inset-bottom);
  }
}

/* Print */
@media print{
  .app-header,.chat-fab,.music-widget,.bottom-nav,.drawer,.modal-mask,.chat-fab{display:none !important;}
  body{background:#fff;color:#000;}
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Utility: hide scrollbar */
.no-scrollbar{scrollbar-width:none;}
.no-scrollbar::-webkit-scrollbar{display:none;}

/* Utility: sticky bottom action */
.sticky-bottom{
  position:sticky;bottom:0;
  background:var(--bg);
  padding:12px 0;
  border-top:2px solid var(--border);
  margin:0 -16px;
  padding-left:16px;padding-right:16px;
  z-index:10;
}

/* End of style.css */