:root {
  --bg: #0b0b10;
  --panel: rgba(255, 255, 255, .06);
  --text: #e9e9f1;
  --muted: rgba(233, 233, 241, .7);
  --accent: #7f5af0;
  --accent2: #2cb67d;
  --border: rgba(255, 255, 255, .12);
  --shadow: 0 18px 60px rgba(0, 0, 0, .45);
  --radius: 16px;
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(127, 90, 240, .25), transparent),
    radial-gradient(900px 500px at 80% 30%, rgba(44, 182, 125, .18), transparent),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(11, 11, 16, .65);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: 1180px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .5px;
}

.brand .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(127, 90, 240, .8);
}

.nav-links {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pill {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
}

.pill:hover {
  border-color: rgba(127, 90, 240, .6)
}

/* =========================
   Buttons
   ========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  /* Purple → Blue gradient (lebih konsisten dengan tombol Download) */
  background: linear-gradient(135deg, rgba(127, 90, 240, 1), rgba(59, 130, 246, .95));
  border: 0;
  color: #0b0b10;
  font-weight: 800;
  box-shadow: 0 16px 50px rgba(59, 130, 246, .14);
  cursor: pointer;

  /* [Tambahan] hover anim siap tempur */
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.btn.secondary {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}

/* [Tambahan] Hover anim GLOBAL (jadi jalan walau gak pakai .download-actions) */
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
}

.btn.secondary:hover {
  border-color: rgba(127, 90, 240, .55);
  background: rgba(255, 255, 255, .08);
  filter: brightness(1.03);
}

.btn:active {
  transform: translateY(0px) scale(0.99);
  filter: brightness(1.02);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
}

.btn:focus-visible {
  outline: 2px solid rgba(120, 160, 255, .55);
  outline-offset: 2px;
}

/* [Tambahan] efek shine halus pas hover */
.btn::after {
  content: "";
  position: absolute;
  inset: -60%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .18), transparent 55%);
  opacity: 0;
  transform: translate(-6%, -6%);
  transition: opacity .18s ease, transform .22s ease;
  pointer-events: none;
}

.btn:hover::after {
  opacity: 1;
  transform: translate(0%, 0%);
}

/* =========================
   Hero
   ========================= */
.hero {
  padding: 34px 0 18px;
}

.hero-card {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  box-shadow: var(--shadow);
}

@media(max-width:900px) {
  .hero-card {
    grid-template-columns: 1fr;
  }
}

.hero h1 {
  margin: 0;
  font-size: 40px;
  letter-spacing: .6px;
}

.hero p {
  margin: 10px 0 14px;
  color: var(--muted);
  line-height: 1.5;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media(max-width:720px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

.stat {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
}

.stat .num {
  font-size: 22px;
  font-weight: 900;
}

.stat .lbl {
  font-size: 13px;
  color: var(--muted);
}

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 22px;
}

.section-title h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: .3px;
}

.section-title .hint {
  color: var(--muted);
  font-size: 13px;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}

.input,
select,
textarea {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  outline: none;
}

textarea {
  resize: vertical;
}

.input {
  min-width: 240px;
}

/* Fix: dropdown options invisible on Windows/Chrome */
select {
  color-scheme: dark;
}

select option {
  background: #0b0b10;
  color: var(--text);
}

/* nicer focus */
.input:focus,
select:focus,
textarea:focus {
  border-color: rgba(127, 90, 240, .6);
  box-shadow: 0 0 0 3px rgba(127, 90, 240, .18);
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 12px 0 24px;
  align-items: start;
}

@media(max-width:1100px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:760px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:460px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.card {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .03);
  position: relative;
  transition: transform .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-2px);
  border-color: rgba(127, 90, 240, .55);
}

.card img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.badge {
  color: #fff;
  font-weight: 700;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .15);
  font-size: 12px;
}


/* ===== [Tambahan] Card aspect formats ===== */
.card .thumb{ position: relative; }
.card.ar-1x1{ --ar: 1 / 1; }
.card.ar-16x9{ --ar: 16 / 9; }
.card.ar-9x16{ --ar: 9 / 16; }

.ar-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
  color: #fff;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  z-index: 2;
}
html[data-theme="light"] .ar-badge{ background: rgba(17,24,39,.62); }
.card .meta {
  padding: 10px 12px;
  margin-top: auto;
}

.card .meta .title {
  font-weight: 900;
}

.card .meta .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card .meta .sub .sub-format{
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .4px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
}
html[data-theme="light"] .card .meta .sub .sub-format{
  border-color: rgba(15,23,42,.18);
  background: rgba(15,23,42,.04);
}

.footer {
  padding: 24px 0 34px;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, .12);
}

.detail {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  padding: 18px 0 30px;
}

@media(max-width:980px) {
  .detail {
    grid-template-columns: 1fr;
  }
}

.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel .p {
  padding: 16px;
}

.detail img {
  width: 100%;
  display: block;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.tag {
  font-size: 12px;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .03);
}

.small {
  font-size: 12px;
  color: var(--muted);
}

.hr {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

table th,
table td {
  vertical-align: top;
}

/* =========================
   [Tambahan] Preview sebelum upload
   ========================= */
.upload-preview{
  display:none;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.upload-preview.show{
  display:grid;
}

.upload-preview-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
}

.upload-preview-item img {
  width: 100%;
  height: 120px;
  display: block;
  object-fit: cover;
}

.upload-preview-meta {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   [Tambahan] Download buttons spacing
   ========================= */
.download-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* jarak antar tombol */
  margin-top: 12px;
}
/* =========================
   [Tambahan] Download success toast/modal
   ========================= */
.dl-toast{
  position: fixed;
  inset: 0;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  z-index: 9999;
}

.dl-toast[hidden]{ display:none !important; }

.dl-toast.show{ opacity: 1; pointer-events: auto; }

.dl-toast-card{
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  width: min(520px, 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(11, 11, 16, .92);
  box-shadow: var(--shadow);
  padding: 18px;
}

.dl-toast.show .dl-toast-card{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.dl-toast-img{
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: 4px auto 10px;
  border-radius: 16px;
}

.dl-toast-title{
  text-align: center;
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: .2px;
}

.dl-toast-msg{
  text-align: center;
}

.dl-toast-support{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.dl-toast-btns{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.dl-toast-actions{
  display:flex;
  justify-content:center;
  margin-top: 14px;
}


/* ===== [Tambahan] Theme Toggle (Dark/Light) ===== */
html { color-scheme: dark; }

/* Add extra variables without breaking existing design */
:root{
  --nav-bg: rgba(11, 11, 16, .65);
  --pill-bg: rgba(255, 255, 255, .04);
  --panel-strong: rgba(11, 11, 16, .92);
  --overlay: rgba(0, 0, 0, .55);
}

/* Re-map a few hardcoded backgrounds to variables (safe overrides) */
.nav{ background: var(--nav-bg); }
.pill{ background: var(--pill-bg); }
.card{ background: var(--panel); }
.dl-toast{ background: var(--overlay); }
.dl-toast-card{ background: var(--panel-strong); }

.theme-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

/* Light mode overrides */
html[data-theme="light"]{
  color-scheme: light;
  --bg: #f6f7fb;
  --panel: rgba(17, 24, 39, .04);
  --text: #111827;
  --muted: rgba(17, 24, 39, .65);
  --border: rgba(17, 24, 39, .14);
  --shadow: 0 18px 40px rgba(17, 24, 39, .10);

  --nav-bg: rgba(246, 247, 251, .78);
  --pill-bg: rgba(17, 24, 39, .06);
  --panel-strong: rgba(255, 255, 255, .92);
  --overlay: rgba(17, 24, 39, .35);
}

html[data-theme="light"] body{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(127, 90, 240, .12), transparent),
    radial-gradient(900px 500px at 80% 30%, rgba(44, 182, 125, .10), transparent),
    var(--bg);
}

html[data-theme="light"] select{ color-scheme: light; }


/* =========================
   [Tambahan] Drawer Menu (Hamburger)
   ========================= */
.nav-burger{
  width: 42px;
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.nav-spacer{ width: 42px; }

.no-scroll{ overflow: hidden; }

.nav-overlay{
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 60;
}

.nav-drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: min(340px, 88vw);
  z-index: 70;
  background: var(--panel-strong);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-drawer-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.nav-drawer-title{
  font-weight: 900;
  letter-spacing: .4px;
}

.nav-drawer-close{
  width: 42px;
  padding: 10px 0;
  font-size: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.nav-drawer-body{
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.nav-item{
  display: block;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--pill-bg);
  outline: none;
}

.nav-item:hover{
  border-color: rgba(127, 90, 240, .6);
}

.nav-item:focus{
  box-shadow: 0 0 0 3px rgba(127, 90, 240, .25);
}

.nav-item-btn{
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.nav-drawer-foot{
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* FAQ */
.faq-q{ font-weight: 800; margin-bottom: 6px; }
.faq-a{ color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ===== [Tambahan] Nav Drawer Fix: hidden must actually hide ===== */
.nav-drawer[hidden],
.nav-overlay[hidden]{
  display:none !important;
}

/* Public navbar: hamburger-only (hide legacy right links if any) */
.nav.nav-public .nav-links{
  display:none !important;
}

.nav-spacer{
  flex: 1;
}

/* Better alignment for hamburger navbar */
.nav.nav-public .nav-inner{
  justify-content: flex-start;
}

/* Touch-friendly burger */
.nav-burger{
  min-width: 44px;
  min-height: 44px;
}

/* Mobile polish */
@media (max-width: 600px){
  .nav-inner{
    padding: 10px 12px;
    gap: 10px;
  }
  .brand{
    font-size: 14px;
    letter-spacing: .3px;
  }
  .nav-drawer{
    width: min(320px, 88vw);
    padding: 12px;
  }
  .nav-item{
    padding: 12px 12px;
    border-radius: 14px;
    font-size: 15px;
  }
  .nav-drawer-foot{
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ===== [Tambahan] Navbar Right Links (Home/Search/Admin/Theme) ===== */
.nav.nav-public .nav-links{
  display:flex !important;
  align-items:center;
  gap: 8px;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
}

.nav-link-icon{
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 600px){
  .nav-link-text{ display:none !important; }
  .nav.nav-public .nav-links{ gap: 6px; }
  .nav-link{ padding: 8px 9px; min-width: 40px; justify-content:center; }
  .theme-toggle [data-theme-text]{ display:none !important; }
}

/* ===== [Tambahan] Docs pages (About / FAQ / Privacy) ===== */
.doc { padding: 14px; }
.doc-title { font-weight: 900; font-size: 20px; line-height: 1.1; }
.doc-sub { margin-top: 4px; color: var(--muted); }
.doc-hero { display:flex; justify-content:space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.doc-badges { display:flex; gap:8px; flex-wrap: wrap; }
.pill-lite { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: 12px; color: var(--muted); }
.doc-block { margin-top: 14px; }
.doc-block h3 { margin: 0 0 8px; font-size: 16px; }
.doc-block p { margin: 0 0 10px; line-height: 1.65; }
.doc-block ul { margin: 0; padding-left: 18px; line-height: 1.7; color: var(--text); }
.doc-actions { display:flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.doc-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* FAQ accordion */
.faq-accordion details { border: 1px solid var(--border); background: var(--card); border-radius: 14px; padding: 10px 12px; }
.faq-accordion details + details { margin-top: 10px; }
.faq-accordion summary { cursor: pointer; font-weight: 800; list-style: none; }
.faq-accordion summary::-webkit-details-marker { display:none; }
.faq-accordion summary:after { content: '▾'; float: right; opacity: .7; }
.faq-accordion details[open] summary:after { content: '▴'; }
.faq-body { margin-top: 10px; color: var(--text); }
.faq-body p { margin: 0 0 10px; color: var(--muted); }
.faq-body ul { margin: 0; padding-left: 18px; color: var(--muted); }

/* Recommendations on detail */
.reco-grid { margin-top: 10px; }
@media (max-width: 600px){
  .doc { padding: 12px; }
  .doc-title { font-size: 18px; }
}


/* ===== [Tambahan] Detail back button ===== */
.detail-topbar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:10px;}
.btn-back{min-height:36px;display:inline-flex;align-items:center;gap:6px;}
@media (max-width:600px){.detail-topbar{justify-content:space-between;}}


/* ===== [Tambahan] Badge contrast in Light mode ===== */
html[data-theme="light"] .badge{
  background: rgba(17, 24, 39, .60);
  border-color: rgba(255,255,255,.35);
  color:#fff;
}


/* ===== [Tambahan] Docs pages centered + spacing ===== */
.section-title.section-title-center{ text-align:center; }
.section-title.section-title-center .hint{ max-width: 720px; margin: 6px auto 0; }
.panel.doc{ max-width: 920px; margin: 0 auto; padding: 18px; }
.doc-block{ margin-top: 18px; }
.doc-block p{ margin: 0 0 14px; }
.doc-block ul{ margin-top: 8px; }

/* ===== [Tambahan] Brand caps ZEEEEHUB ===== */
.brand span{
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 900;
  font-size: 16px;
}
@media (max-width: 600px){
  .brand span{ font-size: 15px; letter-spacing: .8px; }
}


/* ===== [Tambahan] Docs header spacing ===== */
.docs-gap{ height: 22px; } /* "2 space" yang kamu minta */
.section-title.section-title-center{ margin-top: 18px; margin-bottom: 0; }

/* Docs title */
.docs-title{
  text-align:center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0;
}

/* ===== [Tambahan] Hide End hint in Gallery ===== */
.end-hint, .gallery-end, .hint-end { display:none !important; }

/* ===== [Tambahan] Icons theme filter + hover ===== */
:root{
  /* icon PNG kamu default hitam -> di dark mode kita invert jadi putih */
  --icon-filter: invert(1);
}
html[data-theme="light"]{
  --icon-filter: invert(0);
}

.nav-icon{
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: var(--icon-filter);
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.nav-link:hover .nav-icon,
.nav-item:hover .nav-icon,
.nav-item-btn:hover .nav-icon{
  transform: scale(1.10);
}

/* Biar teks tetap rapih */
.nav-link{ gap: 8px; }
.nav-item{ gap: 10px; display:flex; align-items:center; }
.nav-item-text{ display:inline-block; }

/* Mobile: icon sedikit lebih besar biar enak tap */
@media (max-width: 600px){
  .nav-icon{ width: 18px; height: 18px; }
}

/* ===== [Tambahan] UI modal overlay (replace localhost says) ===== */
.ui-modal-overlay{
  position: fixed;
  inset: 0;
  background: var(--overlay, rgba(0,0,0,.55));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.ui-modal-card{
  width: min(520px, 96vw);
  background: var(--card, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.10));
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
  padding: 14px;
}
.ui-modal-title{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 8px;
}
.ui-modal-msg{
  color: var(--muted, rgba(255,255,255,.75));
  line-height: 1.6;
  margin-bottom: 12px;
  white-space: pre-line;
}
.ui-modal-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.btn.danger{
  border: 1px solid rgba(255,80,80,.35);
  background: rgba(255,80,80,.12);
}

/* ===== [Tambahan] Admin mobile UI polish ===== */
.nav:not(.nav-public) .nav-inner{
  flex-wrap: wrap;
  gap: 10px;
}
.nav:not(.nav-public) .nav-links{
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}
@media (max-width: 700px){
  .nav:not(.nav-public) .nav-links{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 6px;
  }
  .nav:not(.nav-public) .nav-links .pill{
    font-size: 13px;
    padding: 8px 10px;
  }
  .container{ padding: 14px; }
  .panel{ padding: 12px; }
  .controls{ flex-direction: column; align-items: stretch; }
  .controls select, .controls input, .controls textarea, .controls button{ width: 100%; }
  input, select, textarea{ font-size: 16px; } /* avoid iOS zoom */
}

/* ===== [Tambahan] UI Modal Upgrade ===== */
.ui-modal-overlay[hidden]{ display:none !important; }
.ui-modal-overlay{
  position: fixed;
  inset: 0;
  background: var(--overlay, rgba(0,0,0,.55));
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.ui-modal-overlay.show .ui-modal-card{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.ui-modal-card{
  width: min(520px, 96vw);
  background: var(--card, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.10));
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  padding: 14px;
  transform: translateY(6px) scale(.98);
  opacity: .98;
  transition: transform .18s ease, opacity .18s ease;
}
.ui-modal-card.danger{
  border-color: rgba(255,80,80,.35);
  box-shadow: 0 22px 60px rgba(255,80,80,.10), 0 22px 60px rgba(0,0,0,.32);
}

.ui-modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ui-modal-title{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .4px;
}
.ui-modal-close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,.10));
  background: rgba(255,255,255,.04);
  color: var(--text, #fff);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .15s ease, background .15s ease;
}
.ui-modal-close:hover{ transform: scale(1.06); background: rgba(255,255,255,.07); }

.ui-modal-msg{
  color: var(--muted, rgba(255,255,255,.75));
  line-height: 1.6;
  margin-bottom: 14px;
  white-space: pre-line;
}

.ui-modal-actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.ui-modal-actions .btn{
  min-width: 130px;
}
@media (max-width: 420px){
  .ui-modal-actions{ justify-content: stretch; }
  .ui-modal-actions .btn{ width: 100%; }
}

/* ===== [Tambahan] Modal palette + select options fix ===== */
:root{
  --modal-bg: rgba(16, 20, 30, .94);
  --modal-border: rgba(255,255,255,.10);
  --modal-title: var(--text, #fff);
  --modal-muted: rgba(232,238,252,.70);
  --modal-close-bg: rgba(255,255,255,.06);
  --modal-close-border: rgba(255,255,255,.10);
}

html[data-theme="light"]{
  --modal-bg: rgba(255,255,255,.98);
  --modal-border: rgba(17,24,39,.14);
  --modal-title: #0f172a;
  --modal-muted: rgba(15,23,42,.65);
  --modal-close-bg: rgba(17,24,39,.06);
  --modal-close-border: rgba(17,24,39,.12);
}

/* Modal look */
.ui-modal-overlay{
  background: var(--overlay, rgba(0,0,0,.55));
}
html[data-theme="light"] .ui-modal-overlay{
  background: rgba(17,24,39,.28);
}

.ui-modal-card{
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
}
.ui-modal-title{
  color: var(--modal-title);
  text-transform: uppercase;
  letter-spacing: .9px;
  font-size: 18px;
}
.ui-modal-msg{
  color: var(--modal-muted);
  text-align: center;
  font-size: 15px;
}
.ui-modal-close{
  background: var(--modal-close-bg);
  border: 1px solid var(--modal-close-border);
}
.ui-modal-illu{
  width: 160px;
  height: auto;
  display:block;
  margin: 4px auto 10px;
}

/* Modal buttons closer to sample */
.ui-modal-actions{
  justify-content: center;
}
.ui-modal-actions .btn{
  min-width: 220px;
  padding: 12px 16px;
  border-radius: 16px;
  font-weight: 900;
  letter-spacing: .8px;
}

/* ===== Select dropdown readability (Light mode) ===== */
select{
  color: var(--text);
}
html[data-theme="light"] select{
  color: #111827;
}
html[data-theme="light"] select option{
  color: #111827;
  background: #ffffff;
}
html[data-theme="dark"] select option{
  color: #e8eefc;
  background: #0b0f17;
}

/* ===== [Tambahan] About profile avatar ===== */
.doc-hero{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.doc-avatar{ display:flex; align-items:center; justify-content:center; }
.avatar{
  width: 84px;
  height: 84px;
  border-radius: 22px;
  object-fit: cover;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
html[data-theme="light"] .avatar{ border-color: rgba(17,24,39,.12); }

/* ===== [Tambahan] Admin profile cards UI ===== */
.admin-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.admin-col-12{ grid-column: span 12; }
.admin-col-6{ grid-column: span 6; }
@media (max-width: 900px){
  .admin-col-6{ grid-column: span 12; }
}

.admin-card{
  position: relative;
  overflow: hidden;
}
.admin-card::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(124,58,237,.08), rgba(16,185,129,.06));
  pointer-events:none;
}
html[data-theme="light"] .admin-card::before{
  background: linear-gradient(120deg, rgba(124,58,237,.10), rgba(16,185,129,.08));
}
.admin-card > *{ position: relative; }

.admin-card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-card-title{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .5px;
  margin: 0;
  text-transform: uppercase;
}
.admin-card-sub{
  margin-top: 4px;
  color: var(--muted, rgba(255,255,255,.70));
  font-size: 13px;
  line-height: 1.45;
}
.admin-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255,255,255,.10));
  background: rgba(255,255,255,.04);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .6px;
  white-space: nowrap;
}
html[data-theme="light"] .admin-badge{
  background: rgba(17,24,39,.04);
  border-color: rgba(17,24,39,.12);
  color: #111827;
}

.admin-fields{ display:flex; flex-direction:column; gap:10px; }
.admin-fields label.small{ margin:0; }
.admin-row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px){
  .admin-row2{ grid-template-columns: 1fr; }
}

.preview-box{
  border: 1px dashed var(--border, rgba(255,255,255,.14));
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}
html[data-theme="light"] .preview-box{
  background: rgba(17,24,39,.02);
}
.preview-box img{
  display:block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.form-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}
.form-actions .pill{ min-height: 40px; }
.form-actions .hint{ margin:0; }

/* ===== [Tambahan] Tag view grid ===== */
.tag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media (max-width:1100px){.tag-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:800px){.tag-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.tag-grid{grid-template-columns:1fr;}}
.tag-item{display:block;border:1px solid var(--border, rgba(255,255,255,.10));background:rgba(255,255,255,.03);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease, background .15s ease;}
html[data-theme="light"] .tag-item{background:rgba(17,24,39,.03);}
.tag-item:hover{transform:translateY(-2px) scale(1.01);background:rgba(255,255,255,.05);}
.tag-item img{width:100%;height:170px;object-fit:cover;display:block;}
.tag-item-meta{padding:10px;}

/* ===== [Tambahan] Profile preview sizing ===== */
.preview-box img{max-height:240px;object-fit:contain;background:rgba(0,0,0,.06);border-radius:14px;padding:8px;}
html[data-theme="dark"] .preview-box img{background:rgba(255,255,255,.03);}


/* ===== [Tambahan] Admin spacing + form comfort ===== */
.panel.admin-card{ padding: 18px; }
@media (max-width: 700px){ .panel.admin-card{ padding: 14px; } }

/* Make plain inputs match theme (many admin pages use <input> without .input class) */
.admin-card input:not([type]),
.admin-card input[type="text"],
.admin-card input[type="url"],
.admin-card input[type="number"],
.admin-card input[type="file"],
.admin-card textarea,
.admin-card select{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  outline: none;
}
html[data-theme="light"] .admin-card input:not([type]),
html[data-theme="light"] .admin-card input[type="text"],
html[data-theme="light"] .admin-card input[type="url"],
html[data-theme="light"] .admin-card input[type="number"],
html[data-theme="light"] .admin-card input[type="file"],
html[data-theme="light"] .admin-card textarea,
html[data-theme="light"] .admin-card select{
  background: rgba(17, 24, 39, .04);
  border-color: rgba(17, 24, 39, .12);
  color: #111827;
}

/* Labels: more breathing */
.admin-card label.small{
  display:block;
  margin: 0 0 6px;
}
.admin-card .admin-fields{ gap: 14px; }
.admin-row2{ gap: 16px; }
.admin-grid{ gap: 18px; }

/* Card header spacing */
.admin-card-head{ margin-bottom: 14px; }
.admin-card-sub{ margin-top: 6px; line-height: 1.55; }

/* Inside preview-box, keep fields readable */
.preview-box{ padding: 14px; }
.preview-box label.small{ margin-top: 10px; }
.preview-box textarea{ margin-top: 6px; }

/* More space at bottom of admin pages */
.container{ padding-bottom: 42px; }

/* ===== [Tambahan] Search empty state ===== */
.empty-state{
  margin-top: 18px;
  padding: 18px 14px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  text-align: center;
}
html[data-theme="light"] .empty-state{
  border-color: rgba(17,24,39,.18);
  background: rgba(17,24,39,.03);
}
.empty-state img{
  width: 170px;
  max-width: 60vw;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}
.empty-title{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.empty-msg{
  margin-top: 6px;
  color: var(--muted, rgba(255,255,255,.72));
  font-size: 14px;
  line-height: 1.5;
}
html[data-theme="light"] .empty-msg{
  color: rgba(15,23,42,.65);
}


/* ===== [Tambahan] Gallery format aspect ratios ===== */
.grid.format-1x1 .card img, .grid.format-1x1 .card .card-media{ aspect-ratio: 1 / 1; }
.grid.format-16x9 .card img, .grid.format-16x9 .card .card-media{ aspect-ratio: 16 / 9; }
.grid.format-9x16 .card img, .grid.format-9x16 .card .card-media{ aspect-ratio: 9 / 16; }

/* layout tweaks for different formats */
.grid.format-16x9{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px){ .grid.format-16x9{ grid-template-columns: 1fr; } }

.grid.format-9x16{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px){ .grid.format-9x16{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px){ .grid.format-9x16{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .grid.format-9x16{ grid-template-columns: 1fr; } }

/* ===== [Tambahan] Format badge (top-right like Featured) ===== */
.badge-format{
  right: 10px;
  left: auto;
  top: 10px;
  opacity: .92;
}
.card.has-featured .badge-format{
  top: 44px; /* turun biar nggak nabrak Featured */
}

/* ===== [Tambahan] Detail stats row format right ===== */
.stats-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.stats-row .stats-format{padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-weight:900;letter-spacing:.4px;}
html[data-theme="light"] .stats-row .stats-format{border-color:rgba(15,23,42,.18);background:rgba(15,23,42,.04);}


/* ===== [Tambahan] Lazy + Skeleton loading ===== */
.img-skel{opacity:0;transition:opacity .28s ease, transform .35s ease;display:block;background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05));background-size:220% 100%;animation:zeShimmer 1.15s linear infinite;transform:scale(1.02);}
.img-skel.is-loaded{opacity:1;animation:none;background:none;transform:scale(1);}
@keyframes zeShimmer{0%{background-position:200% 0}100%{background-position:-20% 0}}
.thumb.skeleton-wrap{background:rgba(255,255,255,.03);}
.detail .panel > img.img-skel{min-height:220px;}
.card-media{position:relative;width:100%;aspect-ratio:1 / 1;overflow:hidden;background:radial-gradient(circle at 20% 20%, rgba(127,90,240,.16), transparent 36%), linear-gradient(135deg, rgba(20,24,38,.92), rgba(10,14,24,.98));}
.card-media.loaded .img-loader{opacity:0;visibility:hidden;pointer-events:none;}
.card-media.loaded .img-skel,.card-media .img-skel.is-loaded{opacity:1;transform:scale(1);}
.img-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;background:linear-gradient(90deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 100%);background-size:220% 100%;animation:skeletonShimmer 1.4s linear infinite;transition:opacity .28s ease, visibility .28s ease;}
.img-loader-box{min-width:92px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(12,16,28,.68);border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 30px rgba(0,0,0,.22);backdrop-filter:blur(8px);}
.img-loader-dots{display:inline-flex;align-items:center;gap:8px;}
.img-loader-dots span{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.92);animation:loaderBounce 1s infinite ease-in-out;}
.img-loader-dots span:nth-child(2){animation-delay:.15s;}
.img-loader-dots span:nth-child(3){animation-delay:.3s;}
@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes loaderBounce{0%,80%,100%{transform:translateY(0) scale(.85);opacity:.45;}40%{transform:translateY(-6px) scale(1);opacity:1;}}
.detail-media{aspect-ratio:auto;min-height:280px;}
.detail-media .img-skel{width:100%;height:auto;object-fit:contain;aspect-ratio:auto;}
.share-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
@media (max-width:760px){.share-row .btn{width:100%;}}


/* ===== ZEEEEHUB Animations ===== */
[data-anim]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
[data-anim].in-view{
  opacity: 1;
  transform: translateY(0);
}

[data-anim-delay="1"]{ transition-delay:.06s; }
[data-anim-delay="2"]{ transition-delay:.12s; }
[data-anim-delay="3"]{ transition-delay:.18s; }
[data-anim-delay="4"]{ transition-delay:.24s; }

.card, .zw-card, .gallery-card, .item-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover, .zw-card:hover, .gallery-card:hover, .item-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.14);
}

.btn, button, .nav-btn, a.btn{
  transition: transform .12s ease, filter .12s ease;
}
.btn:active, button:active, .nav-btn:active, a.btn:active{
  transform: scale(.98);
}

@media (prefers-reduced-motion: reduce){
  [data-anim]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .card, .zw-card, .gallery-card, .item-card,
  .btn, button, .nav-btn, a.btn{
    transition: none !important;
  }
}


/* Admin nav active state */
.pill.active{border-color: rgba(127, 90, 240, .65); background: rgba(127, 90, 240, .12);} 


/* =============================================
   ZEEEEHUB ENHANCED ANIMATIONS v2
   ============================================= */

/* --- Google Fonts import --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&display=swap');

body, .brand, .section-title, .card .meta .title, .empty-title, .admin-card-title, .docs-title {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
}

/* --- Aurora animated background --- */
@keyframes aurora-shift {
  0%   { transform: translateX(0%)    translateY(0%)    scale(1);    }
  25%  { transform: translateX(2.5%)  translateY(-1.5%) scale(1.03); }
  50%  { transform: translateX(-1.5%) translateY(2%)    scale(0.98); }
  75%  { transform: translateX(1%)    translateY(-1%)   scale(1.02); }
  100% { transform: translateX(0%)    translateY(0%)    scale(1);    }
}

body::before {
  content: '';
  position: fixed;
  inset: -12%;
  background:
    radial-gradient(ellipse 900px 600px at 12% 18%, rgba(127,90,240,.22), transparent 55%),
    radial-gradient(ellipse 700px 500px at 88% 22%, rgba(44,182,125,.16), transparent 55%),
    radial-gradient(ellipse 600px 400px at 50% 85%, rgba(59,130,246,.13), transparent 55%);
  animation: aurora-shift 18s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 900px 600px at 12% 18%, rgba(127,90,240,.10), transparent 55%),
    radial-gradient(ellipse 700px 500px at 88% 22%, rgba(44,182,125,.08), transparent 55%),
    radial-gradient(ellipse 600px 400px at 50% 85%, rgba(59,130,246,.07), transparent 55%);
}

/* --- Nav entrance --- */
@keyframes nav-enter {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.nav { animation: nav-enter .5s cubic-bezier(.34,1.2,.64,1) both; }

/* --- Brand dot pulse --- */
@keyframes dot-pulse {
  0%,100% { box-shadow: 0 0 8px  rgba(127,90,240,.8); transform: scale(1);    }
  50%     { box-shadow: 0 0 22px rgba(127,90,240,1), 0 0 44px rgba(127,90,240,.35); transform: scale(1.18); }
}
.brand .dot { animation: dot-pulse 3.2s ease-in-out infinite; }

/* --- Brand hover: gradient loop + scale --- */
@keyframes brand-gradient-flow {
  0%   { background-position: 0%   center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0%   center; }
}

.brand {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}

.brand:hover {
  transform: scale(1.06);
}

.brand span:not(.dot) {
  transition:
    -webkit-text-fill-color .18s ease,
    background-position .18s ease;
}

.brand:hover span:not(.dot) {
  background: linear-gradient(90deg,
    #7f5af0 0%,
    #a78bfa 22%,
    #60a5fa 44%,
    #818cf8 66%,
    #a855f7 82%,
    #7f5af0 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: brand-gradient-flow 1.8s linear infinite;
}

/* --- Nav link hover glow --- */
.pill:hover, .nav-link:hover {
  box-shadow: 0 0 14px rgba(127,90,240,.22);
}

/* --- Page container fade-in --- */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.container { animation: page-fade-in .55s cubic-bezier(.22,1,.36,1) both; }

/* --- Enhanced card hover with glow --- */
.card {
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform .22s cubic-bezier(.34,1.56,.64,1),
    border-color .22s ease,
    box-shadow .22s ease;
}
.card:hover {
  transform: translateY(-7px) scale(1.018);
  border-color: rgba(127,90,240,.75);
  box-shadow:
    0 0 0 1px rgba(127,90,240,.25),
    0 20px 50px rgba(127,90,240,.2),
    0 8px 20px rgba(0,0,0,.4);
}

/* --- Card image zoom on hover --- */
.card .thumb, .card > a > .thumb { overflow: hidden; }
.card img {
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}
.card:hover img { transform: scale(1.07); }

/* --- Card staggered entrance (safe fallback: cards remain visible even if JS fails) --- */
.card {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.34,1.3,.64,1),
    border-color .22s ease,
    box-shadow .22s ease;
}
.card.card-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.card.card-visible:hover {
  transform: translateY(-7px) scale(1.018);
}

/* --- Badge shimmer --- */
@keyframes badge-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.badge {
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(127,90,240,.5) 50%, rgba(0,0,0,.55) 100%);
  background-size: 200% auto;
  animation: badge-shimmer 5s linear infinite;
}

/* --- Section title animated underline --- */
.section-title h2 { position: relative; display: inline-block; }
.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
  transition: width .55s cubic-bezier(.34,1.2,.64,1);
}
.section-title h2.title-visible::after { width: 100%; }

/* --- Tag hover --- */
.tag {
  transition: transform .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.tag:hover {
  transform: scale(1.06) translateY(-1px);
  border-color: rgba(127,90,240,.65);
  color: var(--accent);
  box-shadow: 0 4px 14px rgba(127,90,240,.22);
}

/* --- Stat card hover --- */
.stat {
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  cursor: default;
}
.stat:hover {
  transform: translateY(-3px);
  border-color: rgba(127,90,240,.5);
  background: rgba(127,90,240,.09);
  box-shadow: 0 8px 24px rgba(127,90,240,.15);
}

/* --- Stat number glow --- */
.stat .num {
  background: linear-gradient(135deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Footer accent top border --- */
.footer { position: relative; }
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 55%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
}

/* --- Panel hover --- */
.panel {
  transition: box-shadow .25s ease;
}
.panel:hover {
  box-shadow: 0 28px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(127,90,240,.1);
}

/* --- Input glow enhanced --- */
.input:focus, select:focus, textarea:focus {
  border-color: rgba(127,90,240,.7);
  box-shadow: 0 0 0 3px rgba(127,90,240,.2), 0 0 22px rgba(127,90,240,.1);
}

/* --- Custom scrollbar --- */
::-webkit-scrollbar            { width: 5px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: rgba(127,90,240,.4); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(127,90,240,.72); }

/* --- Particle canvas layer --- */
#fx-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.container { position: relative; z-index: 1; }
.nav       { position: sticky; z-index: 20; }
.nav-drawer, .nav-overlay { z-index: 70; }

/* --- Hero card entrance --- */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.hero-card { animation: hero-enter .65s cubic-bezier(.22,1,.36,1) .15s both; }

/* --- Btn pulse on CTAs --- */
@keyframes btn-glow-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(127,90,240,.0), 0 16px 50px rgba(59,130,246,.14); }
  50%     { box-shadow: 0 0 0 6px rgba(127,90,240,.15), 0 16px 50px rgba(59,130,246,.22); }
}
.btn:not(.secondary) { animation: btn-glow-pulse 3.5s ease-in-out infinite; }
.btn:not(.secondary):hover { animation: none; }

/* --- Empty state bounce --- */
@keyframes empty-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
.empty-state img { animation: empty-bounce 3s ease-in-out infinite; }

/* --- Nav drawer item stagger --- */
@keyframes drawer-item-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.nav-drawer .nav-item {
  animation: drawer-item-in .3s ease both;
}
.nav-drawer .nav-item:nth-child(1){ animation-delay:.05s; }
.nav-drawer .nav-item:nth-child(2){ animation-delay:.10s; }
.nav-drawer .nav-item:nth-child(3){ animation-delay:.15s; }
.nav-drawer .nav-item:nth-child(4){ animation-delay:.20s; }
.nav-drawer .nav-item:nth-child(5){ animation-delay:.25s; }
.nav-drawer .nav-item:nth-child(6){ animation-delay:.30s; }
.nav-drawer .nav-item:nth-child(7){ animation-delay:.35s; }

/* --- Tooltip-style AR badge hover --- */
.ar-badge, .badge-format {
  transition: transform .15s ease, opacity .15s ease;
}
.card:hover .ar-badge,
.card:hover .badge-format { transform: scale(1.08); opacity: 1; }

/* --- Card overlay shimmer on hover --- */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.04) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.card:hover::after { opacity: 1; }

/* --- Pill active bounce --- */
.pill:active, .nav-link:active {
  transform: scale(.96);
  transition: transform .08s ease;
}

/* --- Detail panel image reveal --- */
.detail .panel img {
  transition: filter .4s ease;
  filter: brightness(.92);
}
.detail .panel img.is-loaded { filter: brightness(1); }

/* --- reduce-motion safety --- */
@media (prefers-reduced-motion: reduce) {
  body::before, .brand .dot,
  .hero-card, .container,
  .btn:not(.secondary), .empty-state img { animation: none !important; }
  .card {
    opacity: 1 !important;
    transform: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
  }
  .card:hover { transform: translateY(-3px) !important; }
  .card img { transition: none !important; }
}


/* =============================================
   LIGHT MODE NAV — readable, clean, not smoky
   ============================================= */

/* Base light nav: putih cukup solid dari awal */
html[data-theme="light"] .nav {
  background: rgba(246, 247, 251, 0.82) !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.10);
  /* teks tetap gelap */
  color: #111827;
}

/* Pastikan semua teks di dalam nav tetap gelap di light mode */
html[data-theme="light"] .nav .brand span,
html[data-theme="light"] .nav .nav-link,
html[data-theme="light"] .nav .pill,
html[data-theme="light"] .nav .nav-link-text,
html[data-theme="light"] .nav [data-theme-text] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827;
}

/* brand gradient hover tetap jalan di light mode */
html[data-theme="light"] .nav .brand:hover span:not(.dot) {
  -webkit-text-fill-color: transparent !important;
}

/* pill / nav-link di light mode */
html[data-theme="light"] .nav .pill,
html[data-theme="light"] .nav .nav-link {
  background: rgba(17, 24, 39, 0.05);
  border-color: rgba(17, 24, 39, 0.12);
}
html[data-theme="light"] .nav .pill:hover,
html[data-theme="light"] .nav .nav-link:hover {
  background: rgba(127, 90, 240, 0.08);
  border-color: rgba(127, 90, 240, 0.4);
  color: #4f46e5 !important;
}


/* ===== Loader / mobile safety patch ===== */
.card .meta .sub .sub-left{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.badge-format{left:auto;right:10px;z-index:3;}
@media (max-width:760px){
  .card .meta .sub{gap:8px;}
  .card .meta .sub .sub-left{font-size:11px;}
  .img-loader-box{min-width:82px;height:50px;}
}


.card.is-placeholder{pointer-events:none;}
.card.is-placeholder .meta{padding:10px 12px;}
.card.is-placeholder .meta::before,.card.is-placeholder .meta::after{content:"";display:block;border-radius:999px;background:rgba(255,255,255,.08);}
.card.is-placeholder .meta::before{height:14px;width:68%;margin-bottom:8px;}
.card.is-placeholder .meta::after{height:11px;width:52%;opacity:.8;}

/* ===================================================
   ZEEEEHUB V2 - Additional Styles
   Add this to the BOTTOM of your existing style.css
   =================================================== */

/* ===== Search Autocomplete Dropdown ===== */
.search-wrap{position:relative;margin:14px 0 6px}
.suggestions-dropdown{
  position:absolute;top:100%;left:0;right:0;z-index:50;
  border:1px solid var(--border);border-radius:14px;
  background:rgba(11,11,16,.96);backdrop-filter:blur(12px);
  box-shadow:0 16px 50px rgba(0,0,0,.4);
  max-height:320px;overflow-y:auto;
  margin-top:4px;
}
.suggestions-dropdown[hidden]{display:none}
.suggest-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;
  transition:background .12s ease;
}
.suggest-item:hover{background:rgba(127,90,240,.1)}
.suggest-item:first-child{border-radius:14px 14px 0 0}
.suggest-item:last-child{border-radius:0 0 14px 14px}
.suggest-icon{font-size:16px;flex-shrink:0}
.suggest-text{flex:1;font-weight:600;font-size:14px}
.suggest-type{
  font-size:10px;font-weight:700;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:var(--muted);
}

html[data-theme="light"] .suggestions-dropdown{
  background:rgba(255,255,255,.96);
  border-color:rgba(0,0,0,.1);
}
html[data-theme="light"] .suggest-item:hover{
  background:rgba(127,90,240,.06);
}

/* ===== Color Palette Filter ===== */
.color-filter{
  display:flex;align-items:center;gap:8px;
  margin:8px 0 4px;padding:8px 0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.color-filter::-webkit-scrollbar{display:none}
.color-filter-label{
  font-size:12px;font-weight:700;color:var(--muted);
  white-space:nowrap;flex-shrink:0;
}
.color-btn{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);font-size:12px;font-weight:700;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:all .15s ease;
}
.color-btn:hover{border-color:rgba(127,90,240,.4)}
.color-btn.active{
  border-color:rgba(127,90,240,.55);
  background:rgba(127,90,240,.12);
  color:#c4b5fd;
}
.color-swatch{
  width:16px;height:16px;border-radius:6px;
  border:1px solid rgba(255,255,255,.15);
  flex-shrink:0;
}

/* ===== Color Dot (on cards) ===== */
.color-dot{
  display:inline-block;width:10px;height:10px;
  border-radius:4px;vertical-align:middle;margin-left:6px;
  border:1px solid rgba(255,255,255,.2);
}

/* ===== Install PWA Banner ===== */
.pwa-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:9990;
  padding:12px 16px;
  background:rgba(11,11,16,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  display:none;align-items:center;gap:12px;
  animation:slideUpPwa .3s ease;
}
.pwa-banner.show{display:flex}
.pwa-banner-text{flex:1;font-size:13px;font-weight:600}
.pwa-banner .btn{font-size:12px;padding:8px 14px}
@keyframes slideUpPwa{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* ===== Skeleton Shimmer Upgrade ===== */
@keyframes shimmer-v2 {
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.skeleton-wrap{
  background:linear-gradient(90deg,
    rgba(255,255,255,.03) 25%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.03) 75%
  );
  background-size:200% 100%;
  animation:shimmer-v2 1.8s ease-in-out infinite;
}
.skeleton-wrap.loaded{
  animation:none;
  background:none;
}

html[data-theme="light"] .skeleton-wrap{
  background:linear-gradient(90deg,
    rgba(0,0,0,.03) 25%,
    rgba(0,0,0,.07) 50%,
    rgba(0,0,0,.03) 75%
  );
  background-size:200% 100%;
  animation:shimmer-v2 1.8s ease-in-out infinite;
}
html[data-theme="light"] .skeleton-wrap.loaded{
  animation:none;
  background:none;
}

/* ===== Tabs ===== */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tab{
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,.03);
  color:var(--text);font-weight:700;font-size:13px;
  cursor:pointer;transition:all .15s ease;
}
.tab:hover{border-color:rgba(127,90,240,.4)}
.tab.active{
  border-color:rgba(127,90,240,.55);
  background:rgba(127,90,240,.15);color:#c4b5fd;
}
.tab-content{display:none}
.tab-content.active{display:block}

/* ===== Image Zoom on Detail ===== */
.zoom-container{position:relative;cursor:zoom-in;overflow:hidden}
.zoom-container.zoomed{cursor:grab}
.zoom-container.zoomed.dragging{cursor:grabbing}
.zoom-container img{transition:transform .3s ease}
.zoom-hint{
  position:absolute;bottom:10px;right:10px;
  padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.6);color:#fff;
  font-size:11px;font-weight:700;pointer-events:none;
  opacity:1;transition:opacity .3s ease;
}
.zoom-container.zoomed .zoom-hint{opacity:0}

/* ===== Share row ===== */
.share-row{margin-top:10px}

/* ===== Responsive mobile fixes for new features ===== */
@media (max-width:760px){
  .color-filter{padding:6px 0}
  .color-btn{padding:5px 8px;font-size:11px}
  .color-swatch{width:14px;height:14px}
  .suggest-item{padding:8px 12px}
  .suggest-text{font-size:13px}
}

@media (max-width:460px){
  .tabs{gap:4px}
  .tab{padding:6px 10px;font-size:12px}
}

/* ===== V3 FIXES ===== */

/* Nav emoji icon - show on mobile */
.nav-icon-emoji{font-size:16px;line-height:1}

/* Trending home cards - hide title on mobile, show on desktop */
.trending-home-meta .title{font-size:13px;font-weight:800}
@media(max-width:760px){
  .trending-home-meta{display:none}
}

/* Mobile nav: ensure emoji shows */
@media(max-width:760px){
  .nav-link .nav-link-text{display:none}
  .nav-link .nav-icon-emoji{display:inline}
}

/* Most Popular page - mobile title */
@media(max-width:760px){
  .section-title h2{font-size:16px}
}

/* FNF toast uses same style as dl-toast */
#fnfToast .dl-toast-card{border-color:rgba(239,68,68,.3)}

/* ===== ICON SYSTEM ===== */

/* Fire/trending icon = colored red, never filter */
.nav-icon-fire{width:20px;height:20px;vertical-align:middle;flex-shrink:0}

/* Series icon = black on transparent, invert in dark mode */
.nav-icon-invertable{filter:invert(1);opacity:.9}
html[data-theme="light"] .nav-icon-invertable{filter:none;opacity:.85}

/* Series tag in detail page */
.series-tag{display:inline-flex!important;align-items:center;gap:6px}
.series-icon{
  width:18px;height:18px;flex-shrink:0;display:inline-block;
  filter:invert(1);opacity:.9;
}
html[data-theme="light"] .series-icon{filter:none;opacity:.8}

/* Mobile dashboard chart fix */
@media(max-width:760px){
  .chart-wrap{padding:10px;overflow-x:auto}
  .chart-wrap canvas{min-width:500px;height:200px!important}
  .dash-wrap .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-wrap .two-col{grid-template-columns:1fr}
}
@media(max-width:460px){
  .dash-wrap .stat-grid{grid-template-columns:1fr}
}