/* ============================================================
   Efek bersama landing & launchpad: kursor, butiran film,
   kartu miring berkilau, pita teks berjalan.
   ============================================================ */

/* ---------- kursor ---------- */
.has-cursor body, .has-cursor a, .has-cursor button, .has-cursor summary, .has-cursor label { cursor: none; }
.has-cursor textarea, .has-cursor input { cursor: text; }
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.cur-on .cur-dot, .cur-on .cur-ring { opacity: 1; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b, 0 0 20px rgba(255, 59, 59, 0.6); }
.cur-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.cur-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 220, 215, 0.55); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s, box-shadow 0.3s; }
.cur-ring.hot::before { transform: scale(1.7); background: rgba(255, 59, 59, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.9); }
.cur-ring.txt::before { transform: scale(0.5); }
.cur-ring.down::before { transform: scale(0.8); }
.cur-ring.lbl::before { transform: scale(1.9); background: rgba(255, 59, 59, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 120, 110, 0.9); backdrop-filter: blur(2px); }
.cur-ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 9px/1 "Inter Tight", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity 0.2s; }
.cur-ring.lbl span { opacity: 1; }

/* ---------- butiran film ---------- */
.grain { position: fixed; inset: -50%; z-index: 9998; pointer-events: none; opacity: 0.075; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.9s steps(6) infinite; }
@keyframes grainShift { 0% { transform: translate(0, 0); } 20% { transform: translate(-8%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-4%, -9%); } 80% { transform: translate(9%, 3%); } 100% { transform: translate(0, 0); } }

/* ---------- kartu miring + kilau ---------- */
.tilt { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s; transform-style: preserve-3d; will-change: transform; }
.tilt.tilting { transition: transform 0.12s linear, box-shadow 0.4s; }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 190, 180, 0.16), transparent 45%); }
.tilt.tilting::after { opacity: 1; }

/* ---------- pita teks raksasa berjalan ---------- */
.mq { position: relative; z-index: 4; overflow: hidden; padding: clamp(18px, 3vw, 34px) 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mq-track { display: flex; width: max-content; will-change: transform; }
.mq-track span { flex: none; display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding-right: clamp(20px, 3vw, 44px);
  font: 700 clamp(44px, 7vw, 110px)/1 "Syncopate", "Inter Tight", sans-serif; letter-spacing: 0.02em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255, 90, 80, 0.55); white-space: nowrap; }
.mq-track span b { color: #fff; -webkit-text-stroke: 0; font-weight: 700; }
.mq-track span i { width: clamp(22px, 3vw, 40px); height: clamp(22px, 3vw, 40px); flex: none; background: url(/brand/logo.webp) center / contain no-repeat; filter: brightness(1.4) drop-shadow(0 0 10px rgba(255, 59, 59, 0.6)); }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* ============================================================
   NAVBAR MELENGKUNG (landing & launchpad)
   Kanvas SVG 760×140: busur jari-jari 960, puncak di y=40.
   ============================================================ */
.arcnav { position: fixed; z-index: 50; top: 0; left: 50%; width: min(760px, 54vw); aspect-ratio: 760 / 140; transform: translateX(-50%); pointer-events: none; }
.an-band { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.an-fill { fill: none; stroke: rgba(16, 3, 5, 0.66); stroke-width: 52; }
.an-ind { fill: none; stroke: rgba(255, 59, 59, 0.32); stroke-width: 40; stroke-linecap: round; stroke-dasharray: 6.4 200; stroke-dashoffset: -16.8;
  filter: drop-shadow(0 0 12px rgba(255, 59, 59, 0.7)); transition: stroke-dashoffset 0.75s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s; }
.an-edge { fill: none; stroke: rgba(255, 235, 235, 0.34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.an-edge.in { stroke: rgba(255, 90, 80, 0.45); }
.an-ticks { fill: none; stroke: rgba(255, 220, 215, 0.3); stroke-width: 3; stroke-dasharray: 0.07 0.93; }
.arcnav .nav-links { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.arcnav .nav-links li { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); pointer-events: auto; }
.arcnav .nav-links a { display: block; padding: 8px 8px; background: none; font: 500 13px/1 "Inter Tight", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 232, 230, 0.66); text-decoration: none; white-space: nowrap; transition: color 0.3s, text-shadow 0.3s; }
.arcnav .nav-links a:hover { color: #fff; }
.arcnav .nav-links a.on, .arcnav .nav-links a.active { color: #fff; text-shadow: 0 0 14px rgba(255, 59, 59, 0.95); }
/* medali logo di puncak busur */
.an-logo { position: absolute; left: 50%; top: 28.57%; width: 66px; height: 66px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; pointer-events: auto;
  background: radial-gradient(circle at 50% 32%, #3d0c11, #0b0203 72%); box-shadow: inset 0 0 0 1px rgba(255, 90, 80, 0.65), 0 0 0 6px rgba(16, 3, 5, 0.7), 0 0 34px rgba(255, 59, 59, 0.35); transition: box-shadow 0.4s; }
.an-logo::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; border: 1px dashed rgba(255, 90, 80, 0.55); animation: anSpin 24s linear infinite; }
.an-logo img { width: auto; height: 44px; filter: brightness(1.55) drop-shadow(0 0 8px rgba(255, 59, 59, 0.6)); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.an-logo:hover { box-shadow: inset 0 0 0 1px #ff3b3b, 0 0 0 6px rgba(16, 3, 5, 0.7), 0 0 50px rgba(255, 59, 59, 0.6); }
.an-logo:hover img { transform: scale(1.08); }
@keyframes anSpin { to { transform: rotate(360deg); } }

/* tombol sosial bulat di kanan atas */
.soc-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(20, 4, 6, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.3s, box-shadow 0.3s, transform 0.3s; }
.soc-btn svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.soc-btn:hover { background: #ff3b3b; box-shadow: 0 0 24px rgba(255, 59, 59, 0.6); transform: translateY(-2px); }
.soc-btn:not([href]) { display: none; }
.soc-left { position: fixed; z-index: 50; top: 18px; left: var(--side, 32px); display: flex; gap: 8px; pointer-events: auto; }

/* layar sedang: busur mengecil, teks ikut mengecil */
@media (max-width: 1180px) { .arcnav .nav-links a { font-size: 11.5px; letter-spacing: 0.05em; padding: 6px; } }
/* HP: landing = medali + tombol menu (daftar jatuh ke bawah); app = tab bar di bawah layar */
@media (max-width: 900px) {
  .arcnav { width: 86px; aspect-ratio: 1; top: 8px; transform: none; left: calc(50% - 43px); }
  .soc-btn { display: none; }
  .an-band { display: none; }
  .an-logo { top: 50%; width: 58px; height: 58px; }
  .an-logo img { height: 38px; }
  .page-landing .arcnav .nav-links { display: none; position: fixed; top: 92px; left: 50%; right: auto; bottom: auto; inset-inline: auto; transform: translateX(-50%); min-width: 220px; padding: 8px; border-radius: 22px; background: rgba(20, 4, 6, 0.94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); flex-direction: column; }
  .page-landing .nav.open .arcnav .nav-links { display: flex; }
  .page-landing .arcnav .nav-links li { position: static; transform: none; }
  .page-landing .arcnav .nav-links a { padding: 13px 16px; border-radius: 14px; font-size: 13px; }
  .page-landing .nav-menu { display: block; position: fixed; top: 22px; left: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(20, 4, 6, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); pointer-events: auto; }
  .page-landing .nav-menu i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: #fff; transition: transform 0.3s; }
  .page-landing .nav-menu i:nth-child(1) { top: 18px; } .page-landing .nav-menu i:nth-child(2) { top: 25px; }
  .page-landing .nav.open .nav-menu i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .page-landing .nav.open .nav-menu i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  body.app .arcnav .nav-links { position: fixed; inset: auto auto 14px 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(20, 4, 6, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  body.app .arcnav .nav-links li { position: static; transform: none; }
  body.app .arcnav .nav-links a { padding: 11px 13px; border-radius: 999px; font-size: 11px; }
  body.app .arcnav .nav-links a.active { background: rgba(255, 240, 240, 0.9); color: #2a0709; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .an-logo::after { animation: none; } .an-ind { transition: none; } }