/* =========================
   FINAL CSS (no Tailwind config here)
   ========================= */

/* Base reset (opsional tapi aman) */
* { box-sizing: border-box; }
html, body { height: 100%; }
img { max-width: 100%; display: block; }

/* Optional: smoother text rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   Custom Utilities
   ========================= */
.glass-nav {
  background: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* optional feel */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.text-shadow {
  text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.55);
}

/* Hide scrollbar for gallery but allow scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* =========================
   Better section spacing feel
   (bikin home terlihat panjang & lega)
   ========================= */
section {
  scroll-margin-top: 88px; /* biar anchor ga ketutup navbar */
}

/* =========================
   Card polish (untuk box Latest/Updates/Exclusive dll)
   ========================= */
.home-card {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.home-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(212,175,55,0.35); /* brand gold */
}

/* =========================
   Optional: subtle hero overlay (kalau kamu pakai hero bg image)
   ========================= */
.hero-overlay {
  background: linear-gradient(to top, rgba(17,17,17,1), rgba(17,17,17,0.35), rgba(17,17,17,0));
}

/* =========================
   Optional: button micro-interactions
   ========================= */
.btn-lift {
  transition: transform .2s ease, filter .2s ease;
}
.btn-lift:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* =========================
   Optional: nicer focus (aksesibilitas)
   ========================= */
a:focus, button:focus, input:focus {
  outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid rgba(212,175,55,0.9);
  outline-offset: 3px;
  border-radius: 10px;
}