@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* =========================================================
   THEME TOKENS
   Dark mode = default. Tambahkan class "light" di <html>
   untuk switch ke light mode (lihat js/script.js).
   Semua warna dipakai di index.html lewat Tailwind arbitrary
   value, contoh: class="bg-[var(--bg)] text-[var(--text)]"
   ========================================================= */
:root{
  --bg: #0a0e18;
  --bg-panel: #10182b;
  --bg-panel-2: #131b2e;
  --orange: #f5821f;
  --orange-dim: #c96a19;
  --text: #f5f6f8;
  --text-soft: #c7cedb;
  --muted: #93a0b4;
  --line: rgba(255,255,255,0.08);
  --input-bg: #0a0e18;
  --placeholder: #5b6579;
  --overlay: rgba(6,8,14,0.6);
  --texture-line: rgba(245,130,31,0.035);
  --card-pattern-line: #1c2338;
}

html.light{
  --bg: #f6f7fa;
  --bg-panel: #ffffff;
  --bg-panel-2: #eef0f5;
  --orange: #e2680a;
  --orange-dim: #c96a19;
  --text: #12151c;
  --text-soft: #333b4a;
  --muted: #5b6579;
  --line: rgba(10,14,24,0.09);
  --input-bg: #ffffff;
  --placeholder: #9aa3b4;
  --overlay: rgba(20,22,30,0.45);
  --texture-line: rgba(226,104,10,0.05);
  --card-pattern-line: #e7e9ef;
}

*{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
/* Supaya konten section tidak ketutup header sticky saat lompat via anchor/nav */
#home, #about, #services, #portfolio, #contact{ scroll-margin-top:84px; }
body{
  background: var(--bg);
  color: var(--text);
  font-family:'Manrope', sans-serif;
  -webkit-font-smoothing:antialiased;
  transition: background-color .25s ease, color .25s ease;
}
h1,h2,h3,.brand{ font-family:'Space Grotesk', sans-serif; }

/* Warna aksen "em" di judul (mis. <em>Drilling-Blasting</em>) */
h1 em, h2 em{ font-style:normal; color:var(--orange); }

/* Tekstur garis diagonal halus (dipakai di background body & panel) */
.texture{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.35;
  background: repeating-linear-gradient(115deg, var(--texture-line) 0px, var(--texture-line) 1px, transparent 1px, transparent 90px);
}
.texture-panel{
  background-image: repeating-linear-gradient(115deg, var(--texture-line) 0px, var(--texture-line) 1px, transparent 1px, transparent 46px);
}
.texture-card::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:0.5;
  background: repeating-linear-gradient(120deg, var(--card-pattern-line) 0px, var(--card-pattern-line) 3px, transparent 3px, transparent 40px);
}
.texture-card > *{ position:relative; z-index:1; }

/* ===== HERO SLIDESHOW ===== */
.hero-slides{ position:absolute; inset:0; z-index:-3; }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.6s ease-in-out;
}
.hero-slide.active{ opacity:1; }
/* Foto dokumentasi lapangan asli NAKATO (lihat juga section Portofolio).
   Kegelapan untuk keterbacaan teks judul sudah ditangani .hero::before. */
.hero-slide:nth-child(1){ background-image: url('../images/TMB_Main%20Dam.jpeg'); }
.hero-slide:nth-child(2){ background-image: url('../images/Drilling%20Quarry_9.jpeg'); }
.hero-slide:nth-child(3){ background-image: url('../images/Open%20Pit_Exca.jpeg'); }
.hero-slide:nth-child(4){ background-image: url('../images/Tunnel_Jumbo.jpg'); }

.hero::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(8,10,16,0.55) 0%, rgba(8,10,16,0.85) 55%, var(--bg) 100%),
    radial-gradient(ellipse 90% 60% at 70% 20%, rgba(245,130,31,0.10), transparent 60%);
}
.hero::after{
  content:''; position:absolute; z-index:-1; right:-10%; bottom:-30%;
  width:900px; height:900px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, rgba(245,130,31,0.09), transparent 65%);
}

.hero-dots span{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.3);
  cursor:pointer; transition:background .2s, transform .2s;
}
.hero-dots span.active{ background:var(--orange); transform:scale(1.25); }

/* ===== NAV ACTIVE LINK =====
   Class "active" digeser antar link oleh js/script.js (scrollspy)
   tiap kali section yang sedang dilihat berubah.
   Desktop: warna teks berubah oranye; garis bawahnya sendiri adalah
   satu elemen (#navIndicator) yang meluncur ke posisi link aktif.
   Mobile: warna teks + background panel yang berubah, dengan transisi
   halus (transition-colors sudah dipasang di HTML). */
nav a.active{ color:var(--orange); }
.mobile-nav [data-nav-link].active{
  background:var(--line);
  color:var(--orange);
}

/* ===== CTA BAND background glow ===== */
.cta-band{
  background: radial-gradient(ellipse 80% 100% at 30% 0%, rgba(245,130,31,0.16), transparent 60%), var(--bg-panel-2);
}

/* ===== SERVICE CARD image overlay ===== */
.service-card::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(10,14,24,0.15) 0%, rgba(10,14,24,0.92) 78%),
    repeating-linear-gradient(120deg, var(--card-pattern-line) 0px, var(--card-pattern-line) 3px, transparent 3px, transparent 40px);
}
.service-card > *{ position:relative; z-index:1; }

/* ===== MOBILE NAV OVERLAY ===== */
.mobile-nav{ display:none; }
.mobile-nav.open{ display:flex; }

/* ===== PORTFOLIO LIGHTBOX ===== */
.lightbox{ display:none; }
.lightbox.open{ display:flex; }

/* Placeholder input text color */
.themed-input::placeholder{ color:var(--placeholder); }

/* Toggle tema: geser icon */
.theme-toggle i{ transition: opacity .15s ease, transform .25s ease; }

/* =========================================================
   SCROLL REVEAL
   Elemen ber-class "reveal" mulai tersembunyi (turun+transparan),
   lalu js/script.js menambahkan "reveal-visible" begitu elemen itu
   masuk viewport saat discroll. Di dalam ".reveal-group", tiap anak
   "reveal" mendapat jeda (delay) berurutan supaya muncul bergantian,
   bukan serentak.
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.84,.32,1), transform .7s cubic-bezier(.16,.84,.32,1);
  will-change:opacity, transform;
}
.reveal.reveal-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-group > .reveal:nth-child(1){ transition-delay:.05s; }
.reveal-group > .reveal:nth-child(2){ transition-delay:.12s; }
.reveal-group > .reveal:nth-child(3){ transition-delay:.19s; }
.reveal-group > .reveal:nth-child(4){ transition-delay:.26s; }
.reveal-group > .reveal:nth-child(5){ transition-delay:.33s; }
.reveal-group > .reveal:nth-child(6){ transition-delay:.40s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}