/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---- Glass primitive ---------------------------------------------------- */
.glass{
  position:relative;
  background:var(--glass-fill);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  isolation:isolate;
}
.glass::before{ /* gradient border sheen */
  content:'';
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.6; pointer-events:none;
}
.glass::after{ /* top glass reflection */
  content:'';
  position:absolute; inset:0 0 auto 0; height:45%;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events:none; opacity:.7;
}
.glass-strong{
  background:var(--glass-fill-strong);
  backdrop-filter:blur(var(--glass-blur-lg)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--glass-blur-lg)) saturate(150%);
}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.9rem;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-sm);
  border-radius:var(--r-pill);
  cursor:pointer;
  overflow:hidden;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn svg{ width:18px; height:18px; flex-shrink:0; }

.btn-primary{
  color:var(--navy-950);
  background:linear-gradient(135deg,#8bf0fa,#3fd8ec 45%,#1e8fc2);
  box-shadow:0 14px 32px -10px rgba(var(--cyan-glow),.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -12px rgba(var(--cyan-glow),.7); }

.btn-glass{
  color:var(--white);
  background:var(--glass-fill);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
}
.btn-glass:hover{ border-color:var(--glass-border-strong); transform:translateY(-2px); box-shadow:var(--shadow-glow); }

.btn-sm{ padding:.65rem 1.3rem; font-size:var(--fs-xs); }

/* ripple */
.ripple{ position:absolute; border-radius:50%; pointer-events:none; transform:scale(0); background:rgba(255,255,255,.5); animation:rippleAnim .7s var(--ease-soft); }
:root[data-theme="light"] .btn-primary .ripple{ background:rgba(11,18,32,.35); }
@keyframes rippleAnim{ to{ transform:scale(3.2); opacity:0; } }

/* ---- Navbar --------------------------------------------------------------*/
.navbar{
  position:fixed; inset:0 0 auto 0; z-index:200;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), backdrop-filter var(--dur-med) var(--ease), height var(--dur-med) var(--ease);
  border-bottom:1px solid transparent;
}
.navbar.is-scrolled{
  height:72px;
  background:var(--glass-fill-strong);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-bottom-color:var(--glass-border);
  box-shadow:0 12px 40px -20px rgba(0,0,0,.6);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; position:relative; }
/* The navbar has no backdrop until scrolled — it sits directly over the
   hero video, which is always dark regardless of site theme. Brand text
   must stay theme-invariant (readable-light) in that transparent state,
   then switch to the normal flipping color once .is-scrolled gives it an
   opaque glass backing that itself flips with the theme. */
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--hero-heading); transition:color var(--dur-med) var(--ease); }
.navbar.is-scrolled .brand{ color:var(--white); }
.brand-mark{ width:34px; height:34px; }

.nav-links{ display:flex; align-items:center; gap:var(--sp-2); }
.nav-link{
  position:relative; padding:.65rem 1.1rem; font-size:var(--fs-sm); font-weight:500;
  border-radius:var(--r-pill);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-link[aria-current="page"]{ color:var(--cyan-300); }

/* Desktop only: links sit inline in the transparent bar over the hero
   video, so they need the same forced-light treatment as .brand while
   unscrolled. On mobile/tablet the links live inside the drawer's own
   opaque panel (see responsive.css) and should just follow the theme. */
@media (min-width:981px){
  .nav-link{ color:var(--hero-body); }
  .nav-link:hover, .nav-link:focus-visible{ color:var(--hero-heading); background:rgba(255,255,255,.08); }
  .navbar.is-scrolled .nav-link{ color:var(--ink-100); }
  .navbar.is-scrolled .nav-link:hover, .navbar.is-scrolled .nav-link:focus-visible{ color:var(--white); background:rgba(255,255,255,.06); }
  .navbar.is-scrolled .nav-link[aria-current="page"]{ color:var(--cyan-300); }
}
@media (max-width:980px){
  .nav-link{ color:var(--ink-100); }
  .nav-link:hover, .nav-link:focus-visible{ color:var(--white); background:rgba(255,255,255,.06); }
}

.nav-actions{ display:flex; align-items:center; gap:.7rem; }

.icon-btn{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--glass-border);
  background:var(--glass-fill);
  color:inherit;
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.icon-btn:hover{ transform:translateY(-2px) rotate(8deg); border-color:var(--glass-border-strong); }
.icon-btn svg{ width:19px; height:19px; }

.nav-toggle{ display:none; }

/* Navbar icon buttons (theme toggle, mobile hamburger) and the EN/ID
   language pill sit directly over the hero video while the bar is
   transparent, same as .brand/.nav-link above — so they need the fixed
   hero-glass treatment there, then switch to normal flipping theme colors
   once .is-scrolled gives the bar its own opaque, theme-colored backing. */
.navbar .icon-btn{
  border-color:var(--hero-glass-border);
  background:var(--hero-glass-fill);
  color:var(--hero-heading);
}
.navbar .icon-btn:hover{ border-color:var(--hero-glass-border-strong); }
.navbar.is-scrolled .icon-btn{
  border-color:var(--glass-border);
  background:var(--glass-fill);
  color:var(--ink-100);
}
.navbar.is-scrolled .icon-btn:hover{ border-color:var(--glass-border-strong); color:var(--white); }

.lang-switch{ display:flex; gap:.3rem; }
.lang-switch button{
  padding:.4rem .75rem; border-radius:var(--r-pill);
  font-size:.7rem; font-weight:700;
  border:1px solid var(--hero-glass-border);
  color:var(--hero-body);
  transition:color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), background var(--dur-fast) var(--ease);
}
.lang-switch button:hover{ color:var(--hero-heading); border-color:var(--hero-glass-border-strong); }
.lang-switch button[aria-pressed="true"]{ color:var(--navy-950); background:var(--cyan-400); border-color:var(--cyan-400); }
.navbar.is-scrolled .lang-switch button{ color:var(--ink-300); border-color:var(--glass-border); }
.navbar.is-scrolled .lang-switch button:hover{ color:var(--white); border-color:var(--glass-border-strong); }
.navbar.is-scrolled .lang-switch button[aria-pressed="true"]{ color:var(--navy-950); background:var(--cyan-400); border-color:var(--cyan-400); }

/* ---- Mega menu -----------------------------------------------------------
   `.mega-hit` is the hover hit-zone: it sits flush against the trigger
   (top:100%, no gap) and uses padding-top to create the *visual* offset
   instead of a real gap, so moving the mouse from the link down into the
   panel never leaves the hoverable area (fixes the "closes too fast" bug).
   It is centered on `.nav-inner` (the whole navbar row, positioned via the
   rule above) rather than on the narrow trigger link, so the panel is
   centered in the viewport instead of overflowing off the left edge. */
.mega-hit{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:14px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index:210;
}
.nav-item.has-mega:hover .mega-hit,
.nav-item.has-mega:focus-within .mega-hit{
  opacity:1; visibility:visible; pointer-events:auto;
}
.mega{
  width:min(760px, 92vw);
  max-width:calc(100vw - 2.5rem);
  padding:var(--sp-6);
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2);
  transform:translateY(6px);
  transition:transform var(--dur-fast) var(--ease);
}
.nav-item.has-mega:hover .mega,
.nav-item.has-mega:focus-within .mega{
  transform:translateY(0);
}
.nav-item{ position:relative; }
.mega-link{
  display:flex; flex-direction:column; gap:.35rem;
  padding:var(--sp-3); border-radius:var(--r-sm);
  transition:background var(--dur-fast) var(--ease);
}
.mega-link:hover{ background:rgba(255,255,255,.05); }
.mega-link strong{ color:var(--white); font-size:var(--fs-sm); }
.mega-link span{ color:var(--ink-300); font-size:var(--fs-xs); }
.mega-link svg{ width:20px; height:20px; color:var(--cyan-400); margin-bottom:.2rem; }


/* ---- Badge / chip -------------------------------------------------------*/
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .9rem; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.02em;
  border:1px solid var(--glass-border); background:var(--glass-fill); color:var(--ink-100);
  cursor:pointer; transition:all var(--dur-fast) var(--ease);
}
.chip[aria-pressed="true"]{ color:var(--navy-950); background:var(--cyan-400); border-color:var(--cyan-400); }

/* ---- Card lift + glow ----------------------------------------------------*/
.card-hover{ transition:transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft), border-color var(--dur-med) var(--ease-soft); }
.card-hover:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg), var(--shadow-glow); border-color:var(--glass-border-strong); }

/* cursor glow overlay used on cards via JS setting --mx/--my */
.glow-cursor{ position:relative; overflow:hidden; }
.glow-cursor::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity var(--dur-fast) var(--ease);
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(var(--cyan-glow),.16), transparent 60%);
}
.glow-cursor:hover::after{ opacity:1; }
.glow-cursor > *{ position:relative; z-index:1; }

/* ---- Forms ---------------------------------------------------------------*/
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:var(--sp-4); }
.field label{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-300); }
.field input,.field textarea,.field select{
  padding:.9rem 1.1rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-border);
  border-radius:var(--r-sm);
  color:var(--white);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--cyan-400); background:rgba(255,255,255,.06);
}
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }

/* ---- Accordion (FAQ) ------------------------------------------------------*/
.accordion-item{ border-bottom:1px solid var(--glass-border); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.4rem .25rem; text-align:left;
  font-family:var(--font-display); font-size:var(--fs-md); color:var(--white); font-weight:500;
}
.accordion-trigger .plus{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--glass-border); display:grid; place-items:center;
  transition:transform var(--dur-med) var(--ease), background var(--dur-fast);
}
.accordion-trigger[aria-expanded="true"] .plus{ transform:rotate(135deg); background:var(--cyan-400); border-color:var(--cyan-400); color:var(--navy-950); }
.accordion-panel{
  max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease-soft);
}
.accordion-panel p{ padding:0 .25rem 1.5rem; color:var(--ink-300); max-width:65ch; }

/* ---- Modal (legal docs) --------------------------------------------------*/
.modal-overlay{
  position:fixed; inset:0; z-index:500;
  background:rgba(3,6,12,.72);
  display:flex; align-items:center; justify-content:center; padding:var(--sp-5);
  opacity:0; visibility:hidden; transition:opacity var(--dur-med) var(--ease);
}
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal{
  width:min(680px,100%); max-height:80vh; overflow-y:auto;
  padding:var(--sp-7);
  transform:translateY(24px) scale(.98); transition:transform var(--dur-med) var(--ease-soft);
}
.modal-overlay.is-open .modal{ transform:translateY(0) scale(1); }
.modal-close{ position:absolute; top:var(--sp-5); right:var(--sp-5); }
.modal h3{ font-size:var(--fs-lg); margin-bottom:var(--sp-4); }
.modal h4{ font-size:var(--fs-base); margin-top:var(--sp-5); margin-bottom:var(--sp-2); color:var(--cyan-300);}
.modal p{ color:var(--ink-300); margin-bottom:var(--sp-3); font-size:var(--fs-sm); }

/* ---- Back to top ----------------------------------------------------------*/
.back-to-top{
  position:fixed; right:var(--sp-6); bottom:var(--sp-6); z-index:150;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top svg{ width:20px; height:20px; }

/* ---- Skeleton loading ------------------------------------------------------*/
.skeleton{
  position:relative; overflow:hidden; background:var(--navy-700);
}
.skeleton::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer{ from{ transform:translateX(-100%);} to{ transform:translateX(100%);} }
img.is-loaded ~ .skeleton, img.is-loaded + .skeleton{ display:none; }

/* ---- Toast / form status ---------------------------------------------------*/
.form-status{
  display:none; align-items:center; gap:.6rem;
  padding:.9rem 1.1rem; border-radius:var(--r-sm); font-size:var(--fs-sm);
  margin-top:var(--sp-3);
}
.form-status.is-visible{ display:flex; }
.form-status.success{ background:rgba(34,197,148,.12); border:1px solid rgba(34,197,148,.3); color:#7cf0c8; }
.form-status.error{ background:rgba(240,80,80,.12); border:1px solid rgba(240,80,80,.3); color:#ff9d9d; }