/* ============================================================
   NUSA EKSPOR — Shared elegant theme
   "Simple & Elegan" corporate look: navy + charcoal + white,
   Fraunces serif headings, Inter body, refined motion.
   ============================================================ */

:root{
  color-scheme: light;
  --navy:      #1E3A5F;
  --navy-dark: #16293F;
  --navy2:     #2B4A72;
  --teal:      #2C7A7B;
  --ink:       #111827;
  --muted:     #64748B;
  --line:      #E7EAEF;
  /* Warna resmi WhatsApp — dipakai semua CTA yang mengarah ke chat WhatsApp. */
  --wa:        #1FA855;
  --wa-dark:   #15803D;
}

*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
body{ font-family:Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

h1,h2,h3,h4,.font-display{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing:auto;
  letter-spacing:-0.01em;
}

::selection{ background:var(--navy); color:#fff; }

/* ---------- Eyebrow label (replaces old mono chips) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:Inter, sans-serif;
  font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
}
.eyebrow::before{
  content:""; width:1.75rem; height:1px; background:currentColor; opacity:.5;
}
.eyebrow.no-rule::before{ display:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:Inter, sans-serif; font-weight:500; line-height:1;
  border-radius:9999px; cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), background-color .3s ease, box-shadow .3s ease, color .3s ease, border-color .3s ease;
}
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-dark); transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(30,58,95,.65); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(17,24,39,.4); }
.btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-outline:hover{ border-color:var(--navy); color:var(--navy); transform:translateY(-2px); }
.btn-outline-light{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn-wa{ background:var(--wa); color:#fff; }
.btn-wa:hover{ background:var(--wa-dark); transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(31,168,85,.6); }

/* ---------- Animated underline for inline links ---------- */
.link-underline{ position:relative; }
.link-underline::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.link-underline:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- Nav links ---------- */
.nav-link{ position:relative; transition:color .2s ease; }
.nav-link::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.3rem; height:1.5px;
  background:var(--navy); transform:scaleX(0); transform-origin:center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }
.nav-link.active{ color:var(--navy); }

/* ---------- Reveal on scroll (with optional --d stagger) ---------- */
.reveal{ opacity:0; transform:translateY(20px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d, 0s);
}

/* ---------- Card hover lift ---------- */
.card-hover{ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.card-hover:hover{ transform:translateY(-6px); box-shadow:0 30px 55px -32px rgba(17,24,39,.45); border-color:#D3DAE4; }

/* ---------- Image zoom on hover ---------- */
.img-zoom{ overflow:hidden; }
.img-zoom img{ transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.img-zoom:hover img{ transform:scale(1.06); }

/* ---------- Sticky header scroll state ---------- */
.site-header{ transition:box-shadow .3s ease, background-color .3s ease, border-color .3s ease; }
.site-header.scrolled{
  box-shadow:0 1px 0 rgba(17,24,39,.05), 0 14px 40px -28px rgba(17,24,39,.35);
  border-color:var(--line);
}

/* ---------- Country marquee ---------- */
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-track{ animation:marquee 38s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
.marquee-mask{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

/* ---------- Testimonial marquee (only used when there are more than 3 testimonials) ---------- */
@keyframes testimonial-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.testimonial-track{ animation:testimonial-marquee 60s linear infinite; }
.testimonial-track:hover{ animation-play-state:paused; }
.testimonial-mask{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}

/* ---------- FAQ accordion ---------- */
details.faq > summary{ list-style:none; cursor:pointer; }
details.faq > summary::-webkit-details-marker{ display:none; }
.faq-icon{ transition:transform .3s ease; }
details.faq[open] .faq-icon{ transform:rotate(45deg); }

/* ---------- Decorative dot grids ---------- */
.dot-grid{ background-image:radial-gradient(rgba(30,58,95,.10) 1px, transparent 1px); background-size:22px 22px; }
.dot-grid-light{ background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size:26px 26px; }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--navy); outline-offset:2px; border-radius:6px;
}

/* ---------- Utilities ---------- */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ scrollbar-width:none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .card-hover:hover, .btn:hover, .img-zoom:hover img{ transform:none; }
  .marquee-track{ animation:none; }
  .testimonial-track{ animation:none; }
}