@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --background: #f5f3ef;
  --foreground: #16202e;
  --card: #ffffff;
  --muted: #e9e6e0;
  --muted-foreground: #5a6472;
  --primary: #1a2740;          /* navy */
  --primary-foreground: #f8f6f2;
  --accent: #f6811f;           /* orange */
  --accent-foreground: #ffffff;
  --border: #d3d7dd;
  --destructive: #c62828;
  --emerald: #047857;
  --radius: 0.25rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", sans-serif;
  background: var(--background);
  color: var(--foreground);
  overflow-x: clip;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.font-display { font-family: "Barlow Condensed", "Inter", sans-serif; letter-spacing: 0.01em; }
.uppercase { text-transform: uppercase; }
.container { width: 100%; max-width: 90rem; margin: 0 auto; padding: 0 1.25rem; }
.container-md { max-width: 72rem; }
.container-sm { max-width: 56rem; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: 0 1.6rem; border-radius: var(--radius); font-weight: 600;
  font-size: .95rem; cursor: pointer; border: none; transition: transform .12s ease, background-color .2s ease, opacity .2s; }
.btn:active { transform: scale(.98); }
.btn-accent { background: var(--accent); color: var(--accent-foreground); }
.btn-accent:hover { background: #e0740f; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.btn-ghost-light { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.1); }
.btn-wa { background: #25D366; color: #fff; }
.btn-google { background:#fff; color:#1f2733; border:1px solid var(--border); }
.btn-google:hover { background:#f7f7f7; }
.btn:disabled { opacity:.55; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-sm { min-height: 2.75rem; padding: 0 1.1rem; font-size: .85rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--primary); color: var(--primary-foreground); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 4rem; }
.logo { display: flex; align-items: center; gap: .6rem; }
.logo-badge { display:flex; height:2.5rem; width:2.5rem; align-items:center; justify-content:center;
  border-radius:9999px; background:#fff; padding:.35rem; box-shadow:0 1px 2px rgba(0,0,0,.2); flex-shrink:0; }
.logo-badge img { height:100%; width:100%; object-fit:contain; }
.logo .brand { font-family:"Barlow Condensed"; font-size:1.5rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.brand .brand-accent { color: var(--accent); }
.main-nav { margin-left:auto; display:flex; align-items:center; gap:1.75rem; }
.main-nav a { font-size:.9rem; font-weight:500; color:rgba(248,246,242,.8); transition:color .2s; }
.main-nav a:hover, .main-nav a.active { color: var(--accent); }
.header-actions { display:flex; align-items:center; gap:.75rem; }
.cart-link { position:relative; padding:.5rem; border-radius:var(--radius); }
.cart-link:hover { background: rgba(255,255,255,.1); }
.lang-toggle { display:inline-flex; align-items:center; justify-content:center; min-width:2.2rem; height:2.2rem; padding:0 .5rem; border-radius:var(--radius); border:1px solid var(--border); font-size:.75rem; font-weight:700; letter-spacing:.03em; color:inherit; text-decoration:none; }
.lang-toggle:hover { background: rgba(255,255,255,.1); }
.cart-badge { position:absolute; top:-2px; right:-2px; display:flex; height:1.25rem; min-width:1.25rem;
  align-items:center; justify-content:center; border-radius:9999px; background:var(--accent);
  padding:0 .25rem; font-size:.7rem; font-weight:700; color:var(--accent-foreground); }
.hazard-stripe { height:.25rem; background-image: repeating-linear-gradient(-45deg,var(--accent) 0 14px, transparent 14px 28px); }

/* ---- Pencarian produk ---- */
.header-search { display:flex; align-items:center; gap:.5rem; height:2.4rem; padding:0 .75rem;
  border-radius:9999px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); }
.header-search svg { width:16px; height:16px; flex:none; }
.header-search input { border:none; background:none; outline:none; color:#fff; font-size:.85rem; width:9rem; }
.header-search input::placeholder { color:rgba(255,255,255,.55); }
.product-search { display:flex; align-items:center; gap:.5rem; height:3rem; padding:0 .5rem 0 1rem;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--card); max-width:32rem; }
.product-search-icon { display:flex; color:var(--muted-foreground); flex:none; }
.product-search input[type="search"] { flex:1; border:none; background:none; outline:none; font-size:.9rem;
  height:100%; color:var(--foreground); font-family:inherit; }
.product-search-clear { display:flex; padding:.25rem; color:var(--muted-foreground); flex:none; }
.product-search-clear:hover { color:var(--destructive); }
.product-search-clear svg { width:16px; height:16px; }
.product-search-item { display:contents; }
@media (max-width:900px) { .product-search { max-width:none; } }

/* ---- Tab navigasi halaman legal ---- */
.legal-tabs { display:flex; flex-wrap:wrap; gap:.5rem; padding:.4rem; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--card); }
.legal-tab { display:flex; align-items:center; gap:.5rem; padding:.65rem 1.1rem; border-radius:calc(var(--radius) - 4px);
  font-size:.85rem; font-weight:600; color:var(--muted-foreground); text-decoration:none;
  transition:background .18s ease, color .18s ease; flex:1; justify-content:center; white-space:nowrap; }
.legal-tab svg { width:16px; height:16px; flex:none; }
.legal-tab:hover { color:var(--foreground); background:rgba(0,0,0,.04); }
.legal-tab.active { background:var(--primary); color:var(--primary-foreground); }
.legal-tab.active:hover { color:var(--primary-foreground); }
@media (max-width:640px) { .legal-tabs { flex-direction:column; } .legal-tab { justify-content:flex-start; } }


/* Avatar profil (header & halaman profil) */
.avatar-img { border-radius:9999px; object-fit:cover; flex-shrink:0; border:2px solid rgba(255,255,255,.25); }
.avatar-fallback { display:inline-flex; align-items:center; justify-content:center; border-radius:9999px;
  background:var(--accent); color:var(--accent-foreground); font-weight:700; flex-shrink:0; }
.user-menu { position:relative; }
.user-menu-trigger { display:flex; align-items:center; gap:.4rem; background:none; border:none; cursor:pointer; padding:.25rem; border-radius:var(--radius); }
.user-menu-trigger:hover { background: rgba(255,255,255,.1); }
.user-menu-dropdown { position:absolute; right:0; top:calc(100% + .5rem); min-width:12rem; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.15); overflow:hidden; z-index:50; }
.user-menu-dropdown a, .user-menu-dropdown .um-name { display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; font-size:.85rem; color:var(--foreground); }
.user-menu-dropdown a:hover { background: rgba(0,0,0,.04); }
.user-menu-dropdown .um-name { border-bottom:1px solid var(--border); font-weight:600; color:var(--muted-foreground); font-size:.78rem; }
.menu-toggle { display:none; background:none; border:none; color:#fff; padding:.5rem; cursor:pointer; }
.mobile-nav { display:none; flex-direction:column; gap:.25rem; border-top:1px solid rgba(255,255,255,.1); padding:.5rem 1.25rem 1rem; }
.mobile-nav a, .mobile-nav button { padding:.6rem 0; font-size:.9rem; color:#fff; background:none; border:none; text-align:left; cursor:pointer; }

/* ---------- hero ---------- */
.hero { position:relative; display:flex; align-items:center; overflow:hidden; background:var(--primary);
  color:var(--primary-foreground); min-height: 88vh; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, var(--primary), rgba(26,39,64,.85) 45%, rgba(26,39,64,.3)); }
.hero-content { position:relative; width:100%; max-width:80rem; margin:0 auto; padding:6rem 1.25rem; }
.badge-pill { display:inline-flex; align-items:center; gap:.5rem; border-radius:var(--radius); background:var(--accent);
  padding:.35rem .75rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--accent-foreground); }
.hero h1 { margin-top:1.5rem; max-width:48rem; font-family:"Barlow Condensed"; font-size:clamp(2.75rem,6vw,4.5rem);
  font-weight:800; text-transform:uppercase; line-height:.95; }
.hero h1 .hl { display:block; color:var(--accent); }
.hero p.lead { margin-top:1.5rem; max-width:36rem; font-size:1.1rem; color:rgba(248,246,242,.85); }
.hero-cta { margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:1rem; }

/* ---------- ticker ---------- */
.ticker-wrap { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--accent); color:var(--accent-foreground); padding:.75rem 0; }
.ticker { display:flex; width:max-content; gap:2.5rem; white-space:nowrap; font-family:"Barlow Condensed";
  font-size:1.15rem; font-weight:700; text-transform:uppercase; animation:ticker 26s linear infinite; }
@keyframes ticker { from { transform:translateX(0);} to { transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce) { .ticker { animation:none; } }

/* ---------- sections ---------- */
.section { max-width:80rem; margin:0 auto; padding:5rem 1.25rem; }
.section-title { font-family:"Barlow Condensed"; font-size:2.25rem; font-weight:800; text-transform:uppercase; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--accent); }

.feature-grid { display:grid; gap:2.5rem; grid-template-columns:repeat(3,1fr); }
.feature { border-top:2px solid var(--accent); padding-top:1.25rem; }
.feature h3 { font-family:"Barlow Condensed"; font-size:1.5rem; font-weight:700; text-transform:uppercase; margin-top:1rem; }
.feature p { margin-top:.5rem; font-size:.9rem; color:var(--muted-foreground); }
.feature svg { color: var(--accent); }

.split { max-width:90rem; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.split img { height:100%; width:100%; object-fit:cover; min-height:18rem; }
.split-body { padding:3.5rem; }
.stats { margin-top:2.25rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; font-family:"Barlow Condensed"; }
.stats dt { font-size:1.9rem; font-weight:800; color:var(--accent); }
.stats dd { margin-top:.25rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-foreground); }

.band { background:var(--primary); color:var(--primary-foreground); padding:4rem 0; }
.band-inner { max-width:72rem; margin:0 auto; padding:0 1.25rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }

.bg-card-section { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--card); }

/* ---------- product grid ---------- */
.filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.filters .chip { animation:chipIn .4s ease backwards; }
.filters .chip:nth-child(1){animation-delay:.02s}.filters .chip:nth-child(2){animation-delay:.06s}
.filters .chip:nth-child(3){animation-delay:.1s}.filters .chip:nth-child(4){animation-delay:.14s}
.filters .chip:nth-child(5){animation-delay:.18s}.filters .chip:nth-child(6){animation-delay:.22s}
.filters .chip:nth-child(7){animation-delay:.26s}.filters .chip:nth-child(8){animation-delay:.3s}
@keyframes chipIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.chip { display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:2.75rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card);
  padding:0 1.1rem; font-size:.85rem; font-weight:500; color:var(--muted-foreground); cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; }
.chip:hover { border-color:var(--accent); color:var(--foreground); transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.08); }
.chip:active { transform:translateY(0) scale(.97); }
.chip.active { border-color:var(--primary); background:var(--primary); color:var(--primary-foreground); }
.chip.active:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.15); }
.product-grid { margin-top:2rem; display:grid; gap:1.5rem; grid-template-columns:repeat(3,1fr); }
.product-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .35s ease; }
.product-card:hover { transform:translateY(-8px) scale(1.015); box-shadow:0 20px 32px rgba(0,0,0,.12); border-color:rgba(246,129,31,.5); }
.product-media { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--muted); }
.product-media img { height:100%; width:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.product-card:hover .product-media img { transform:scale(1.09); }
.product-cat { position:absolute; left:.75rem; top:.75rem; border-radius:var(--radius); background:rgba(246,129,31,.92);
  padding:.25rem .5rem; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#fff; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.product-card:hover .product-cat { transform:translateY(-2px); }
.product-body { display:flex; flex:1; flex-direction:column; padding:1.25rem; }
.product-body h3 { font-family:"Barlow Condensed"; font-size:1.25rem; font-weight:700; text-transform:uppercase; line-height:1.15; transition:color .25s ease; }
.product-card:hover .product-body h3 { color:var(--accent); }
.product-desc { margin-top:.5rem; font-size:.85rem; color:var(--muted-foreground);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-foot { margin-top:1rem; display:flex; align-items:flex-end; justify-content:space-between; }
.price { font-family:"Barlow Condensed"; font-size:1.5rem; font-weight:800; }
.price small { font-size:.85rem; font-weight:500; color:var(--muted-foreground); }
.stock-ok { font-size:.75rem; font-weight:600; color:var(--emerald); }
.stock-no { font-size:.75rem; font-weight:600; color:var(--destructive); }

/* ---------- scroll reveal (fade-in + slide-up saat elemen masuk viewport) ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.reveal-visible { opacity:1; transform:translateY(0); }
.product-grid .reveal:nth-child(3n+1) { transition-delay:0s; }
.product-grid .reveal:nth-child(3n+2) { transition-delay:.08s; }
.product-grid .reveal:nth-child(3n+3) { transition-delay:.16s; }


/* ---------- generic cards / forms ---------- */
.card { border:1px solid var(--border); border-radius:var(--radius); background:var(--card); padding:1.5rem; }
.grid { display:grid; gap:1.5rem; }
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.field { display:flex; flex-direction:column; gap:.4rem; margin-top:1rem; }
.field label { font-size:.78rem; font-weight:500; text-transform:uppercase; color:var(--muted-foreground); }
.input, .field input, .field textarea, .field select, select.input, input.input {
  height:2.75rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--background);
  padding:0 .75rem; font-size:.9rem; font-family:inherit; color:var(--foreground); width:100%; }
.field textarea, textarea.input { height:auto; padding:.6rem .75rem; }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.form-title { font-family:"Barlow Condensed"; font-size:1.5rem; font-weight:700; text-transform:uppercase; }
.error-box { margin:1rem 0 1.5rem; border:1px solid rgba(198,40,40,.4); background:rgba(198,40,40,.06);
  padding:.75rem 1rem; border-radius:var(--radius); font-size:.85rem; color:var(--destructive); animation:flashIn .35s ease; }
.notice-box { margin:1rem 0 1.5rem; border:1px solid rgba(246,129,31,.4); background:rgba(246,129,31,.1);
  padding:.75rem 1rem; border-radius:var(--radius); font-size:.85rem; animation:flashIn .35s ease; }
.success-box { margin:1rem 0 1.5rem; border:1px solid rgba(4,120,87,.35); background:rgba(4,120,87,.08);
  padding:.75rem 1rem; border-radius:var(--radius); font-size:.85rem; color:var(--emerald); animation:flashIn .35s ease; }
@keyframes flashIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* Toast notifikasi keranjang (ajax add-to-cart) */
.cart-toast { position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%,1rem); z-index:200;
  min-width:16rem; max-width:90vw; padding:.85rem 1.25rem; border-radius:var(--radius); font-size:.88rem; font-weight:500;
  text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.18); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; }
.cart-toast.show { opacity:1; transform:translate(-50%,0); }
.cart-toast.success { background:#047857; color:#fff; }
.cart-toast.error { background:#c62828; color:#fff; }
.muted { color:var(--muted-foreground); }
.text-accent { color:var(--accent); }
.text-center { text-align:center; }
.divider { border-top:1px solid var(--border); }

/* ---------- table ---------- */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
thead { background:var(--muted); text-align:left; }
th { padding:.75rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-foreground); }
td { padding:.75rem; border-top:1px solid var(--border); vertical-align:middle; }

/* ---------- page hero (interior) ---------- */
.page-hero { border-bottom:1px solid var(--border); background:var(--primary); color:var(--primary-foreground); padding:4rem 0; }
.page-hero h1 { font-family:"Barlow Condensed"; font-size:clamp(2.25rem,5vw,3rem); font-weight:800; text-transform:uppercase; margin-top:.75rem; }
.page-hero p { margin-top:.75rem; max-width:42rem; color:rgba(248,246,242,.8); }

/* ---------- steps / timeline ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:1.5rem; }
.step {
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:.4rem; text-align:center; border-top:2px solid var(--border); padding-top:.65rem;
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  line-height:1.25; color:var(--muted-foreground);
}
.step.active { border-color:var(--accent); color:var(--foreground); }
.step svg { width:20px; height:20px; flex-shrink:0; color:var(--muted-foreground); }
.step.active svg { color:var(--accent); }
@media (max-width: 560px) {
  .step { font-size:.62rem; gap:.3rem; }
  .step svg { width:18px; height:18px; }
}

/* ---------- badges ---------- */
.badge { display:inline-flex; align-items:center; justify-content:center; text-align:center; border-radius:var(--radius); padding:.35rem .75rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1.2; }
.badge-paid { background:#d1fae5; color:#065f46; }
.badge-wait { background:rgba(246,129,31,.12); color:var(--accent); }
.badge-neutral { background:var(--muted); color:var(--muted-foreground); }
.badge-danger { background:#fee2e2; color:#991b1b; }

/* ---------- admin panel ---------- */
.admin-tabs { display:flex; gap:.5rem; border-bottom:1px solid var(--border); padding-bottom:0; }
.admin-tabs a { padding:.85rem 1.1rem; font-size:.85rem; font-weight:600; color:var(--muted-foreground); border-bottom:2px solid transparent; margin-bottom:-1px; }
.admin-tabs a.active { color:var(--accent); border-color:var(--accent); }
.admin-tabs a:hover:not(.active) { color:var(--foreground); }

.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.5rem; }
.admin-stat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.25rem; display:flex; align-items:center; gap:.9rem; }
.admin-stat-card .icon-wrap { height:2.75rem; width:2.75rem; border-radius:9999px; background:rgba(246,129,31,.12); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.admin-stat-card .icon-wrap svg { height:1.25rem; width:1.25rem; }
.admin-stat-card .num { font-family:"Barlow Condensed"; font-size:1.6rem; font-weight:700; line-height:1; }
.admin-stat-card .lbl { font-size:.76rem; color:var(--muted-foreground); margin-top:.2rem; }

.admin-panel-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.admin-panel-header h2 { font-family:"Barlow Condensed"; font-size:1.3rem; font-weight:700; text-transform:uppercase; }

.product-row-list { display:flex; flex-direction:column; gap:.75rem; margin-top:1rem; }
.product-row { display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); flex-wrap:wrap; transition:box-shadow .15s,border-color .15s; }
.product-row:hover { box-shadow:0 3px 14px rgba(0,0,0,.07); border-color:rgba(246,129,31,.35); }
.product-row .p-thumb { height:3.5rem; width:3.5rem; border-radius:var(--radius); object-fit:cover; flex:none; background:var(--muted); }
.product-row .p-info { min-width:9rem; flex:1 1 11rem; }
.product-row .p-form { display:flex; align-items:flex-end; gap:.6rem; flex-wrap:wrap; margin-left:auto; }
.mini-field { display:flex; flex-direction:column; gap:.3rem; }
.mini-field label { font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted-foreground); font-weight:700; }
.mini-field input[type=number] { width:6.5rem; }
.mini-field input[type=file] { width:9.5rem; font-size:.72rem; padding:.3rem; }
.product-row .del-btn { background:none; border:none; color:var(--muted-foreground); cursor:pointer; padding:.4rem; border-radius:var(--radius); }
.product-row .del-btn:hover { color:var(--destructive); background:#fee2e2; }

.order-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.customer-row { display:flex; align-items:center; gap:1rem; }
.order-badges { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.4rem; }
.order-update-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-top:1rem; }
.order-update-grid .field { margin-top:0; }

@media (max-width:900px) {
  .admin-stats { grid-template-columns:repeat(2,1fr); }
  .product-row .p-form { margin-left:0; width:100%; }
  .order-update-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .admin-stats { grid-template-columns:1fr; }
  .order-update-grid { grid-template-columns:1fr; }
}

/* ---------- checkout: payment methods ---------- */
.checkout-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:start; }
.co-item { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--border); }
.co-item:first-child { padding-top:0; }
.co-item img { height:4rem; width:5rem; object-fit:cover; border-radius:var(--radius); flex:none; background:var(--muted); }
.co-item .name { font-weight:600; font-size:.92rem; }
.co-item .meta { font-size:.78rem; color:var(--muted-foreground); margin-top:.15rem; }
.co-item .line-total { font-weight:700; font-size:.92rem; white-space:nowrap; }
.co-summary-row { display:flex; justify-content:space-between; font-size:.88rem; padding:.4rem 0; }
.co-summary-row.total { border-top:1px solid var(--border); margin-top:.5rem; padding-top:.85rem; font-family:"Barlow Condensed"; }
.co-summary-row.total .lbl { font-size:1.05rem; font-weight:700; text-transform:uppercase; }
.co-summary-row.total .val { font-size:1.45rem; font-weight:800; font-family:"Barlow Condensed"; }
.co-card-head { display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.co-card-head .caret { transition:transform .2s ease; color:var(--muted-foreground); }
.co-card-head.collapsed .caret { transform:rotate(180deg); }
.co-card-body { margin-top:1rem; overflow:hidden; }
.co-card-body.collapsed { display:none; }
.eyebrow-sm { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-foreground); }
.pay-method { display:flex; align-items:center; gap:.85rem; border:1px solid var(--border); border-radius:var(--radius);
  padding:.85rem 1rem; cursor:pointer; transition:border-color .15s,background-color .15s; margin-top:.6rem; }
.pay-method:first-of-type { margin-top:1rem; }
.pay-method:hover { border-color:rgba(246,129,31,.5); }
.pay-method.active { border-color:var(--accent); background:rgba(246,129,31,.06); }
.pay-method input[type=radio] { flex:none; accent-color:var(--accent); width:1.1rem; height:1.1rem; }
.pay-method .pm-label { flex:1; font-weight:600; font-size:.9rem; }
.pay-method .pm-badges { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:flex-end; }
.pm-badge { font-size:.64rem; font-weight:700; color:var(--muted-foreground); border:1px solid var(--border);
  border-radius:.2rem; padding:.15rem .4rem; background:var(--background); white-space:nowrap; }
.co-secure-note { display:flex; gap:.6rem; margin-top:1rem; padding:.85rem 1rem; border-radius:var(--radius);
  background:var(--muted); font-size:.78rem; color:var(--muted-foreground); }
.co-secure-note svg { flex:none; color:var(--muted-foreground); margin-top:.1rem; }
@media (max-width:900px) { .checkout-grid { grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.site-footer { margin-top:5rem; background:var(--primary); color:rgba(248,246,242,.8); }
.footer-grid { max-width:72rem; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; padding:3.5rem 1.25rem; }
.footer-grid h4 { font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--primary-foreground); }
.footer-grid ul { list-style:none; margin-top:.75rem; display:flex; flex-direction:column; gap:.5rem; font-size:.88rem; }
.footer-grid a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:1.25rem; text-align:center; font-size:.75rem; }

/* ---------- gallery ---------- */
.gallery-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); }
.gallery-item { aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.08); cursor:zoom-in; }
.gallery-item img { height:100%; width:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.gallery-item:hover img { transform:scale(1.06); }
@media (max-width:560px) { .gallery-grid { grid-template-columns:repeat(2,1fr); gap:.75rem; } }
.gallery-admin-item { position:relative; }
.gallery-del-form { position:absolute; top:.5rem; right:.5rem; margin:0; }
.gallery-del-btn { background:rgba(0,0,0,.55); border:none; color:#fff; cursor:pointer; padding:.45rem; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.gallery-del-btn svg { width:16px; height:16px; }
.gallery-del-btn:hover { background:var(--destructive,#dc2626); }
.lightbox { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(10,14,22,.92); padding:1.5rem; cursor:zoom-out; }
.lightbox img { max-width:100%; max-height:100%; border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.5); }

/* ---------- modal sesi berakhir (inactivity timeout) ---------- */
.session-timeout-overlay {
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(10,14,22,.72); padding:1.25rem;
}
.session-timeout-modal {
  background:var(--card); border-radius:.5rem; max-width:26rem; width:100%; text-align:center;
  padding:2.25rem 2rem 2rem; box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.session-timeout-modal .sto-icon { font-size:2.75rem; line-height:1; margin-bottom:.75rem; }
.session-timeout-modal h3 { font-size:1.3rem; font-weight:800; color:var(--foreground); }
.session-timeout-modal p { margin-top:.65rem; font-size:.9rem; color:var(--muted-foreground); line-height:1.6; }
.session-timeout-modal .btn { margin-top:1.5rem; min-width:9rem; }

/* ---------- struktur organisasi (org chart) ---------- */
.orgchart-scroll { overflow-x:auto; padding:1rem 0 .5rem; }
.orgchart { display:flex; justify-content:center; min-width:min-content; }
.orgchart ul { display:flex; padding-top:1.5rem; position:relative; }
.orgchart li { list-style:none; position:relative; padding:1.5rem .75rem 0; }
.orgchart li::before, .orgchart li::after {
  content:''; position:absolute; top:0; right:50%; width:50%; height:1.5rem; border-top:2px solid var(--border);
}
.orgchart li::after { right:auto; left:50%; border-left:2px solid var(--border); }
.orgchart li:first-child::before { border:0 none; }
.orgchart li:last-child::after { border:0 none; }
.orgchart li:only-child { padding-top:0; }
.orgchart li:only-child::before, .orgchart li:only-child::after { display:none; }
.orgchart > ul { padding-top:0; }
.orgchart > ul::before, .orgchart > ul::after { display:none; }
.orgchart > ul > li { padding-top:0; }
.orgchart-box {
  display:flex; align-items:center; gap:.75rem; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:.85rem 1.1rem; box-shadow:0 2px 8px rgba(0,0,0,.06);
  white-space:nowrap; text-align:left;
}
.orgchart-box .orgchart-icon {
  flex-shrink:0; width:2.5rem; height:2.5rem; border-radius:var(--radius); background:var(--accent);
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.orgchart-box .orgchart-icon svg { width:1.35rem; height:1.35rem; }
.orgchart-box .orgchart-name { font-weight:700; font-size:.88rem; color:var(--foreground); line-height:1.2; }
.orgchart-box .orgchart-role { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--accent); margin-top:.15rem; }
.orgchart-box.orgchart-lead { border:2px solid var(--primary); box-shadow:0 4px 14px rgba(22,32,46,.15); }
.orgchart-box.orgchart-lead .orgchart-icon { background:var(--primary); }
.orgchart-box.orgchart-lead .orgchart-name { font-size:1rem; }
@media (max-width:768px) {
  .orgchart-box { padding:.65rem .85rem; gap:.6rem; }
  .orgchart-box .orgchart-icon { width:2.1rem; height:2.1rem; }
  .orgchart-box .orgchart-icon svg { width:1.1rem; height:1.1rem; }
  .orgchart-box .orgchart-name { font-size:.8rem; }
  .orgchart-box .orgchart-role { font-size:.65rem; }
}

/* ---------- CS widget ---------- */
.cs-widget { position:fixed; bottom:1.25rem; right:1.25rem; z-index:50; display:flex; flex-direction:column; align-items:flex-end; gap:.75rem; }
.cs-panel { width:18rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); padding:1.25rem; box-shadow:0 10px 25px rgba(0,0,0,.15); }
.cs-fab { display:flex; height:3.5rem; width:3.5rem; align-items:center; justify-content:center; border-radius:9999px;
  background:var(--accent); color:#fff; border:none; box-shadow:0 8px 20px rgba(0,0,0,.2); cursor:pointer; transition:transform .12s; }
.cs-fab:active { transform:scale(.95); }

/* ---------- Trust badges (checkout) ---------- */
.trust-badges { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.trust-badge { display:flex; align-items:center; gap:.6rem; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); padding:.75rem; font-size:.75rem; line-height:1.35; color:var(--muted-foreground); }
.trust-badge svg { flex-shrink:0; width:1.4rem; height:1.4rem; color:var(--accent); }
.trust-badge span { font-weight:600; color:var(--foreground); }
.trust-badge small { font-weight:400; color:var(--muted-foreground); }

/* ---------- Star ratings ---------- */
.star-rating { display:inline-flex; gap:.15rem; }
.star-rating svg { width:1rem; height:1rem; }
.star-on { color:var(--accent); }
.star-on svg { fill:var(--accent); stroke:var(--accent); }
.star-off { color:var(--border); }
.star-off svg { fill:none; stroke:var(--border); }
.star-picker { display:inline-flex; gap:.25rem; }
.star-picker input { position:absolute; opacity:0; pointer-events:none; }
.star-picker label { cursor:pointer; }
.star-picker label svg { width:1.7rem; height:1.7rem; fill:none; stroke:var(--border); transition:.1s; }
.star-picker label.sp-on svg { fill:var(--accent); stroke:var(--accent); }

/* ---------- Testimonials ---------- */
.testimonial-grid { margin-top:2rem; display:grid; gap:1.5rem; grid-template-columns:repeat(3,1fr); }
.testimonial-card { position:relative; }
.testimonial-quote { display:block; width:2rem; height:2rem; color:var(--accent); opacity:.5; margin-bottom:.5rem; }
.testimonial-quote svg { width:100%; height:100%; }
.testimonial-comment { font-size:.9rem; line-height:1.6; color:var(--foreground); }
.testimonial-author { display:flex; align-items:center; gap:.6rem; padding-top:1rem; border-top:1px solid var(--border); }
.testimonial-avatar { display:flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:9999px;
  background:var(--primary); color:var(--primary-foreground); font-weight:700; font-size:.85rem; flex-shrink:0; }
.testimonial-name { font-weight:600; font-size:.85rem; }

/* ---------- utilities ---------- */
.flex{display:flex}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.hidden{display:none}
.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;align-items:start}
.qty-box{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius)}
.qty-box button{height:2rem;width:2rem;background:none;border:none;cursor:pointer;color:var(--muted-foreground);font-size:1rem}
.qty-box span{width:2.5rem;text-align:center;font-size:.9rem}
.qty-box input[type="number"]{width:2.5rem;text-align:center;font-size:.9rem;border:none;background:none;padding:0;-moz-appearance:textfield}
.qty-box input[type="number"]::-webkit-outer-spin-button,.qty-box input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

@media (max-width: 900px) {
  .feature-grid, .product-grid { grid-template-columns:repeat(2,1fr); }
  .split { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .two-col { grid-template-columns:1fr !important; }
  .grid-3, .grid-4 { grid-template-columns:repeat(2,1fr); }
  .main-nav, .header-actions .desktop-only { display:none; }
  .menu-toggle { display:block; }
  .mobile-nav:not(.hidden) { display:flex; }
  .header-actions { margin-left:auto; }
}
@media (max-width: 560px) {
  .product-grid, .feature-grid, .grid-2, .grid-3, .grid-4, .stats { grid-template-columns:1fr; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .split-body { padding:2rem 1.25rem; }
}
@media (max-width: 640px) {
  body { overflow-x:hidden; }
}

/* ---------- scroll reveal (dipakai lewat class .reveal, di-observe via JS di layout.php) ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .product-card, .product-media img { transition:none; }
}