/* =========================================================
   ROKET GOLD — Custom styles (complements Tailwind utilities)
   ========================================================= */

:root {
  --gold: #D4AF37;
  --gold-2: #C5A059;
  --gold-dark: #A8862F;
  --ink: #0F172A;
  --ink-2: #1E293B;
  --soft: #F8FAFC;
  --danger: #EF4444;
  --header-h: 81px;
}

html { scroll-behavior: smooth; }
h1, h2, h3 { letter-spacing: -0.02em; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Cegah scroll horizontal dari elemen yang masuk dari samping (clip tidak merusak position: sticky) */
main, footer { overflow-x: clip; }

::selection { background: rgba(212, 175, 55, .3); color: var(--ink); }

/* ---------- Text & surface helpers ---------- */
.text-gold-gradient {
  background: linear-gradient(120deg, #F3DE95 0%, #D4AF37 45%, #A8862F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-gold-shine {
  background: linear-gradient(135deg, #F3DE95 0%, #D4AF37 45%, #A8862F 100%);
}
.btn-gold {
  background: linear-gradient(135deg, #E9CE7A 0%, #D4AF37 50%, #B8913A 100%);
  background-size: 200% 200%;
  transition: background-position .5s ease, transform .2s ease, box-shadow .3s ease;
}
.btn-gold:hover { background-position: 100% 0; box-shadow: 0 18px 40px -16px rgba(197,160,89,.7); }

.glass {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}
.glass-dark {
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.grid-pattern {
  background-image:
    linear-gradient(rgba(212,175,55,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.08) 1px, transparent 1px);
  background-size: 48px 48px;
}
.noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
#site-header { transition: box-shadow .3s ease, background-color .3s ease, border-color .3s ease; }
#site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(15,23,42,.35); }
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--ink); }

/* Header di atas section gelap (diatur main.js → initHeaderTheme):
   - di atas hero gelap (belum scroll): menyatu dengan hero
   - menimpa section gelap saat scroll: gelap transparan + blur */
#site-header.is-dark { background-color: rgba(15, 23, 42, .62); border-color: rgba(255, 255, 255, .08); }
#site-header.is-dark:not(.is-scrolled) { background-color: var(--ink); border-color: transparent; }
#site-header.is-dark.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); }
#site-header .nav-link, #site-header #menu-toggle { transition: color .3s ease, background-color .3s ease; }
#site-header.is-dark .nav-link { color: rgba(255, 255, 255, .72); }
#site-header.is-dark .nav-link:hover,
#site-header.is-dark .nav-link.is-active { color: #fff; }
#site-header.is-dark #menu-toggle { color: #fff; }
#site-header.is-dark #menu-toggle:hover { background-color: rgba(255, 255, 255, .1); }

/* ---------- WhatsApp floating button ---------- */
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #10B981;
  z-index: -1; animation: waPulse 2s ease-out infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------- Floating 3D assets ---------- */
.float-y { animation: floatY 6s ease-in-out infinite; }
.float-y-slow { animation: floatY 9s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-18px) rotate(var(--r, 0deg)); } }
.spin-slow { animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.gold-glow { filter: drop-shadow(0 30px 40px rgba(168,134,47,.35)); }

/* ---------- Scroll reveal ----------
   Varian: data-reveal="up|down|left|right|zoom|zoom-out|fade|tilt" (kosong = up)
   Memakai properti individual translate/scale/rotate agar tidak bentrok dengan
   kelas transform Tailwind maupun parallax GSAP. Kelas .is-revealed dipasang/dilepas
   oleh IntersectionObserver di main.js sehingga animasi diulang setiap kali di-scroll. */
html.js [data-reveal] {
  opacity: 0;
  translate: var(--rv-x, 0) var(--rv-y, 0);
  scale: var(--rv-s, 1);
  rotate: var(--rv-r, 0deg);
}
html.js [data-reveal=""], html.js [data-reveal="up"] { --rv-y: 56px; }
html.js [data-reveal="down"] { --rv-y: -56px; }
html.js [data-reveal="left"] { --rv-x: -72px; }
html.js [data-reveal="right"] { --rv-x: 72px; }
html.js [data-reveal="zoom"] { --rv-s: .9; }
html.js [data-reveal="zoom-out"] { --rv-s: 1.08; }
html.js [data-reveal="tilt"] { --rv-y: 48px; --rv-r: -3deg; }
html.js [data-reveal="fade"] { filter: blur(8px); }
html.js [data-reveal].is-revealed { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: none; }

/* ---------- Product card ---------- */
.product-card .product-media { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.product-card:hover .product-media { transform: translateY(-6px) scale(1.04); }

/* ---------- Image zoom viewer ---------- */
.zoom-viewer { cursor: zoom-in; overflow: hidden; }
.zoom-viewer .zoom-target { transition: transform .2s ease-out; transform-origin: center; }
.zoom-viewer.is-zooming .zoom-target { transform: scale(2); }

/* ---------- Tabs / Accordion ---------- */
.tab-btn[aria-selected="true"] { color: var(--ink); border-color: var(--gold); }
.accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.accordion-panel > div { overflow: hidden; }
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-item.is-open .accordion-icon { transform: rotate(45deg); }
.accordion-icon { transition: transform .3s ease; }

/* ---------- Rich text (blog article) ---------- */
.prose-rg { color: #334155; font-size: 1.0625rem; line-height: 1.85; }
.prose-rg > * + * { margin-top: 1.25em; }
.prose-rg .lead { font-size: 1.25rem; line-height: 1.75; color: #475569; }
.prose-rg .lead::first-letter { float: left; margin: .1em .6rem 0 0; font-size: 4.5rem; line-height: .8; font-weight: 800; color: var(--gold-dark); }
.prose-rg h2 { font-size: 1.875rem; line-height: 1.25; color: var(--ink); font-weight: 700; margin-top: 2em; }
.prose-rg h3 { font-size: 1.375rem; color: var(--ink); font-weight: 700; margin-top: 1.75em; }
.prose-rg ul { list-style: none; padding-left: 0; }
.prose-rg ul li { position: relative; padding-left: 1.75em; margin-top: .6em; }
.prose-rg ul li::before {
  content: ""; position: absolute; left: .35em; top: .7em; width: .5em; height: .5em;
  background: var(--gold); transform: rotate(45deg); border-radius: 1px;
}
.prose-rg ol { list-style: decimal; padding-left: 1.4em; }
.prose-rg ol li { margin-top: .6em; padding-left: .3em; }
.prose-rg ol li::marker { color: var(--gold-dark); font-weight: 700; }
.prose-rg blockquote {
  border-left: 3px solid var(--gold); padding: .5em 0 .5em 1.5em;
  font-size: 1.25rem; font-weight: 600; font-style: italic; color: var(--ink); line-height: 1.6;
}
.prose-rg :where(p, li) > a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.prose-rg strong { color: var(--ink); }

/* ---------- Timeline ---------- */
.timeline-progress { transform-origin: top; transform: scaleY(0); }
.milestone.is-active .milestone-dot { background: var(--gold); box-shadow: 0 0 0 6px rgba(212,175,55,.2); }
.milestone.is-active .milestone-card { border-color: rgba(212,175,55,.6); }

/* ---------- Forms ---------- */
.input-rg {
  width: 100%; border-radius: .875rem; border: 1px solid #E2E8F0; background: #fff; padding: .85rem 1rem;
  font-size: .95rem; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease;
}
.input-rg:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212,175,55,.18); }
.input-rg.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
.field-error { display: none; color: var(--danger); font-size: .8rem; margin-top: .35rem; }
.field-error.is-visible { display: block; }

/* ---------- Map ---------- */
.map-dark iframe { filter: grayscale(1) invert(.92) contrast(.9) hue-rotate(180deg); }

/* ---------- Misc ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.img-fallback { background: linear-gradient(135deg, #1E293B 0%, #0F172A 60%, #3B2F10 100%); }

.toast { transform: translateY(20px); opacity: 0; transition: all .35s ease; }
.toast.is-visible { transform: translateY(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}