/* ==========================================================================
   PT. Kencana Lintas Global — Landing Page Stylesheet
   Palette diambil dari logo KLG:
   --primary   : coral ring logo   #F2694F
   --secondary : maroon segitiga   #7A1F23
   --accent    : orange gradient   #ED451E
   --ink       : slate gelap       #2B2E33
   ========================================================================== */

:root{
  --primary:#F2694F;
  --primary-dark:#D94E36;
  --secondary:#7A1F23;
  --accent:#ED451E;
  --ink:#22242A;
  --ink-soft:#4A4D55;
  --bg:#FAF9F7;
  --bg-alt:#F1EEE9;
  --line:#E7E2DA;
  --card:#FFFFFF;
  --ring:245,105,79;
}

html.dark{
  --ink:#F3F1ED;
  --ink-soft:#C9C5BD;
  --bg:#191A1D;
  --bg-alt:#232427;
  --line:#33353A;
  --card:#212226;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  background:var(--bg);
  color:var(--ink);
  transition:background .4s ease, color .4s ease;
}

.font-display{ font-family:'Poppins','Manrope', ui-sans-serif, sans-serif; }

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

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Signature ring motif (from KLG logo oval) ---------- */
.klg-ring{
  position:absolute;
  border-radius:50%;
  border:2px solid rgba(var(--ring),.35);
  pointer-events:none;
}
.klg-ring::after{
  content:'';
  position:absolute; inset:-14px;
  border-radius:50%;
  border:1px dashed rgba(var(--ring),.2);
}

/* ---------- Navbar ---------- */
#navbar{
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  background:transparent;
}
#navbar.scrolled{
  background:var(--card);
  box-shadow:0 6px 24px -8px rgba(0,0,0,.12);
}
.nav-link{
  position:relative;
  color:var(--ink-soft);
  font-weight:500;
}
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  height:2px; width:0%;
  background:var(--primary);
  transition:width .25s ease;
}
.nav-link.active, .nav-link:hover{ color:var(--ink); }
.nav-link.active::after, .nav-link:hover::after{ width:100%; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; border-radius:999px;
  padding:.85rem 1.9rem;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--primary));
  color:#fff;
  box-shadow:0 10px 30px -10px rgba(237,69,30,.55);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -10px rgba(237,69,30,.6); }
.btn-outline{
  border:1.5px solid var(--line);
  color:var(--ink);
  background:transparent;
}
.btn-outline:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-3px); }

/* ---------- Reveal animations ---------- */
[data-reveal]{
  opacity:0;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change:transform,opacity;
}
[data-reveal="up"]{ transform:translateY(36px); }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal].in-view{ opacity:1; transform:none; }

/* stagger helper */
[data-reveal].in-view{ transition-delay:var(--d,0ms); }

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:1.25rem;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 48px -20px rgba(34,36,42,.18);
  border-color:transparent;
}

.icon-badge{
  width:3.25rem; height:3.25rem;
  border-radius:1rem;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(242,105,79,.14), rgba(122,31,35,.10));
  color:var(--primary);
}

/* ---------- Hero background ---------- */
.hero-bg{
  background:
    radial-gradient(ellipse at 78% 18%, rgba(242,105,79,.20), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(122,31,35,.35), transparent 50%),
    linear-gradient(160deg, #201f22 0%, #2b2a2d 45%, #201f22 100%);
}
.hero-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at center, black 40%, transparent 78%);
}

.parallax-shape{ will-change:transform; }

/* ---------- Counter ---------- */
.stat-num{ font-variant-numeric:tabular-nums; }

/* ---------- Accordion ---------- */
.faq-item .faq-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}
.faq-item.open .faq-content{ max-height:400px; }
.faq-item .faq-icon{ transition:transform .35s ease; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }

/* ---------- Gallery hover overlay ---------- */
.gallery-item{ position:relative; overflow:hidden; border-radius:1rem; }
.gallery-item img{ transition:transform .6s ease; display:block; width:100%; height:100%; object-fit:cover; }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,20,22,.92) 0%, rgba(20,20,22,.15) 60%, transparent 100%);
  display:flex; align-items:flex-end;
  padding:1.25rem;
  opacity:0; transition:opacity .35s ease;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }

/* ---------- Marquee (klien) ---------- */
.marquee-track{
  animation:marquee 28s linear infinite;
}
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Back to top ---------- */
#backToTop{
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
#backToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- Loader ---------- */
#pageLoader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#pageLoader.hide{ opacity:0; visibility:hidden; }
.loader-ring{
  width:56px; height:56px; border-radius:50%;
  border:3px solid rgba(242,105,79,.25);
  border-top-color:var(--primary);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Utility section spacing ---------- */
.section-pad{ padding-top:5.5rem; padding-bottom:5.5rem; }
@media (max-width:768px){ .section-pad{ padding-top:3.75rem; padding-bottom:3.75rem; } }

.eyebrow{
  font-size:.78rem; letter-spacing:.14em; font-weight:700; text-transform:uppercase;
  color:var(--primary);
}

/* dark mode toggle icon swap */
.sun-icon, .moon-icon{ transition:opacity .2s ease, transform .3s ease; }
html:not(.dark) .moon-icon{ display:none; }
html.dark .sun-icon{ display:none; }