/* =========================================================
   nx.css — tambahan untuk versi Next animatif (CSS-FIRST, tanpa framer-motion).
   1) Ticker header (dulu inline di layout.js).
   2) Entrance & scroll-reveal (keyframes/transition — SSR selalu terlihat; reveal
      hanya disembunyikan bila html.js ada → no-JS tetap tampil penuh).
   3) Lapis animasi "kasino" (shimmer, aura, Ken Burns, shine, hover-lift).
   Semua hormati prefers-reduced-motion. Tidak mengubah konten/SEO.
========================================================= */

/* ---------- Entrance (mount) — jalan begitu CSS ter-parse, tanpa JS ---------- */
@media (prefers-reduced-motion: no-preference) {
  .nx-header-in { animation: nx-drop .5s cubic-bezier(.22, .9, .25, 1) both; }
  .nx-rise { animation: nx-rise .7s cubic-bezier(.22, .9, .25, 1) both; }   /* h1/lead: opacity tetap 1 (LCP-safe) */
  .nx-in { animation: nx-in .55s cubic-bezier(.22, .9, .25, 1) both; }
  .nx-pop { animation: nx-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }   /* aproksimasi spring overshoot */
  /* .nx-zoom: efek zoom-in banner subpage DIHAPUS (per permintaan) — banner tampil statis. */
  /* stagger hero */
  .nx-d1 { animation-delay: .08s; } .nx-d2 { animation-delay: .16s; } .nx-d3 { animation-delay: .24s; }
  .nx-d4 { animation-delay: .32s; } .nx-d5 { animation-delay: .40s; } .nx-d6 { animation-delay: .48s; }
}
@keyframes nx-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes nx-rise { from { transform: translateY(18px); } to { transform: none; } }
@keyframes nx-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nx-pop { from { opacity: 0; transform: translateY(10px) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes nx-zoom { from { transform: scale(1.04); } to { transform: none; } }

/* ---------- Scroll-reveal ([data-reveal-scroll] + boot script) ----------
   Disembunyikan HANYA bila html.js ada & user tak minta reduce motion →
   no-JS / reduced-motion / crawler = konten selalu terlihat. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal-scroll] { opacity: 0; transform: translateY(26px); transition: opacity .6s cubic-bezier(.22, .9, .25, 1), transform .6s cubic-bezier(.22, .9, .25, 1); }
  html.js [data-reveal-scroll].is-revealed { opacity: 1; transform: none; }
}

/* ---------- Micro-interaction tombol (pengganti whileHover/whileTap framer) ---------- */
.nx-btn { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, filter .2s ease; }
.nx-btn:hover { transform: translateY(-2px) scale(1.045); }
.nx-btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .nx-btn, .nx-btn:hover, .nx-btn:active { transform: none; } }

/* ---------- Ticker ---------- */
.site-ticker { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: var(--on-primary); overflow: hidden; white-space: nowrap; border-bottom: 1px solid rgba(0, 0, 0, .14); min-height: 30px; }
.site-ticker__track { display: inline-flex; padding: 6px 0; animation: nx-ticker 30s linear infinite; will-change: transform; }
.site-ticker:hover .site-ticker__track { animation-play-state: paused; }
.site-ticker__item { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .01em; padding: 0 22px; position: relative; }
.site-ticker__item::after { content: '◆'; position: absolute; right: -5px; opacity: .5; font-size: .55rem; }
@keyframes nx-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Shimmer emas untuk H1 hero ---------- */
.nx-shimmer { color: var(--text); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nx-shimmer {
    background: linear-gradient(100deg, var(--text) 0%, var(--text) 38%, var(--primary) 50%, var(--text) 62%, var(--text) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: nx-sheen 5.5s linear infinite;
  }
}
@keyframes nx-sheen { to { background-position: -220% center; } }

/* ---------- Aura hero (dekoratif, di belakang teks) ---------- */
.home-hero__content { position: relative; overflow: hidden; isolation: isolate; }
.home-hero__content > :not(.nx-aura) { position: relative; z-index: 1; }
.nx-aura {
  position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, var(--primary-glow), transparent 40%, var(--card-glow-a), transparent 75%);
  filter: blur(46px); opacity: .5; animation: nx-spin 16s linear infinite;
}
@keyframes nx-spin { to { transform: rotate(1turn); } }

/* ---------- Ken Burns banner DIHAPUS (per permintaan) — banner tampil statis ---------- */

/* ---------- Shine pada tombol CTA ---------- */
.nx-btn { position: relative; overflow: hidden; }
.nx-btn::after { content: ''; position: absolute; top: 0; left: -75%; width: 45%; height: 100%; pointer-events: none; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); }
.nx-btn:hover::after { animation: nx-shine .8s ease; }
@keyframes nx-shine { to { left: 130%; } }

/* ---------- Hover-lift kartu section ---------- */
.section-card { transition: box-shadow .3s ease, border-color .3s ease; }
.section-card:hover { border-color: var(--card-border); box-shadow: 0 22px 55px rgba(0, 0, 0, .28), 0 0 34px var(--card-glow-a); }

/* ---------- Indikator +/× FAQ: pastikan glyph benar-benar center ---------- */
.faq-question span { line-height: 1; font-size: 1.15rem; align-items: center; justify-content: center; }

/* ---------- Embed provider/ads (extra.html, non-SEO) — TETAP tampil ---------- */
#extra-root { margin: 0; display: block; }
#extra-root + .section-block { padding-top: 16px; } /* desktop: rapatkan jarak ke H2 pertama */
/* Mobile: iframe kini ukur konten akurat (tak overshoot). Beri jarak setara transisi
   antar-section normal (~46px = padding-bawah internal iframe 14px + 32px ini). */
@media (max-width: 768px) {
  #extra-root + .section-block { padding-top: 32px; }
}

/* ---------- Reveal jawaban FAQ ---------- */
.faq-item[open] .faq-answer { animation: nx-fade .32s ease; }
@keyframes nx-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Scroll-to-top floating: override app.css → lingkaran emas + chevron gelap ----------
   (.floating-actions & .floating-cta tetap pakai app.css: grid full-width teruji di mobile) */
.floating-top { border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--on-primary); box-shadow: 0 8px 22px rgba(255, 176, 32, .42), inset 0 1px 0 rgba(255, 255, 255, .35); }
.floating-top:hover { background: linear-gradient(135deg, var(--primary), var(--secondary)); border-color: transparent; color: var(--on-primary); filter: brightness(1.07); box-shadow: 0 12px 30px rgba(255, 176, 32, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.floating-top svg { width: 20px; height: 20px; stroke-width: 2.6; }

/* ---------- Reduced motion: matikan semua animasi tambahan ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-ticker__track { animation: none; white-space: normal; flex-wrap: wrap; justify-content: center; }
  .nx-shimmer { animation: none; }
  .nx-aura { animation: none; }
  .home-banner-slide.is-active img { animation: none; }
  .nx-btn:hover::after { animation: none; }
  .faq-item[open] .faq-answer { animation: none; }
}

/* =========================================================
   i828 — Thai (Noto Sans Thai, self-host, subset Thai).
   Latin tetap Outfit/Inter; browser pilih Noto utk glyph Thai
   (unicode-range). Stack di-override di :root (menang atas app.css).
========================================================= */
@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/notosansthai-400.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/notosansthai-500.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/notosansthai-600.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/notosansthai-700.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/notosansthai-800.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
:root { --font-display: 'Outfit', 'Noto Sans Thai', system-ui, sans-serif; --font-body: 'Inter', 'Noto Sans Thai', system-ui, sans-serif; }