/* ============================================
   Studio Nusantara — Modern Archipelago
   Light · Teal · Terracotta · Editorial
   ============================================ */

html { scroll-behavior: smooth; }

body {
  background: #FBF8F3;
  color: #1A1A1A;
}

/* ==== REVEAL ==== */
.reveal { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js .reveal-left { transform: translateX(-32px); }
.js .reveal-right { transform: translateX(32px); }
.js .reveal-left.is-visible, .js .reveal-right.is-visible { transform: translateX(0); }

/* ==== KAWUNG PATTERN (batik-inspired subtle) ==== */
.kawung-pattern {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(15,76,92,.06) 0 2px, transparent 2px),
    radial-gradient(circle at 80% 80%, rgba(227,100,20,.05) 0 2px, transparent 2px),
    radial-gradient(circle at 80% 20%, rgba(15,76,92,.04) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 20% 80%, rgba(227,100,20,.04) 0 1.5px, transparent 1.5px);
  background-size: 40px 40px;
  background-position: 0 0, 0 0, 20px 20px, 20px 20px;
}

/* ==== GRID PATTERN (tech) ==== */
.grid-tech {
  background-image:
    linear-gradient(rgba(15,76,92,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,76,92,.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ==== HERO BG ==== */
.hero-bg {
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(15,76,92,.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 85% 100%, rgba(227,100,20,.08) 0%, transparent 65%),
    linear-gradient(180deg, #FBF8F3 0%, #F5EFE5 100%);
}

/* ==== SECTION NUMBER (editorial) ==== */
.section-num {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: #E36414;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section-num::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: #E36414;
}

/* Editorial horizontal line for section heading */
.editorial-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.editorial-line .bar {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(15,76,92,.3), transparent);
}

/* ==== TERMINAL WINDOW ==== */
.terminal {
  background: #0F2A30;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(15,76,92,.5), 0 20px 40px -20px rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.06);
}
.terminal-header {
  background: #0A1E23;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.terminal-dot { width: 12px; height: 12px; border-radius: 50%; }
.terminal-title {
  margin-left: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: rgba(251,248,243,.5);
}
.terminal-body {
  padding: 20px 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(251,248,243,.9);
}
.terminal-body .kw { color: #7DD3FC; }
.terminal-body .str { color: #FDBA74; }
.terminal-body .ok { color: #86EFAC; }
.terminal-body .dim { color: rgba(251,248,243,.4); }
.terminal-body .cursor {
  display: inline-block; width: 8px; height: 15px;
  background: #E36414; vertical-align: middle; margin-left: 4px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ==== SERVICE CARD ==== */
.service-card {
  background: #FFFFFF;
  border: 1px solid #E8E0D5;
  border-radius: 12px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
}
.service-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #E36414;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.service-card:hover::after { transform: scaleY(1); transform-origin: top; }
.service-card:hover { border-color: #0F4C5C; transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(15,76,92,.2); }
.service-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #E36414;
  font-weight: 700;
}

/* ==== PORTFOLIO CARD ==== */
.portfolio-card {
  background: #FFFFFF;
  border: 1px solid #E8E0D5;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .4s ease, border-color .3s ease;
}
.portfolio-card:hover { border-color: #0F4C5C; transform: translateY(-6px); }
.portfolio-card img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.portfolio-card:hover img { transform: scale(1.05); }

/* ==== TEAM CARD (no white bg, editorial) ==== */
.team-card img { transition: transform .5s cubic-bezier(.22,1,.36,1); filter: grayscale(.15); }
.team-card:hover img { transform: scale(1.04); filter: grayscale(0); }

/* ==== BUTTONS ==== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0F4C5C;
  color: #FBF8F3;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: all .3s ease;
  border: 1px solid #0F4C5C;
}
.btn-primary:hover { background: #0A3844; border-color: #0A3844; transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(15,76,92,.4); }
.btn-primary .arrow { font-family: "JetBrains Mono", monospace; transition: transform .3s ease; }
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #1A1A1A;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid #1A1A1A;
  transition: all .3s ease;
}
.btn-secondary:hover { background: #1A1A1A; color: #FBF8F3; }

.btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #E36414;
  color: #FFFFFF;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 14px;
  transition: all .3s ease;
  border: 1px solid #E36414;
}
.btn-accent:hover { background: #C5550F; border-color: #C5550F; transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(227,100,20,.5); }

/* ==== TECH PILL ==== */
.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #E8E0D5;
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  color: #4A4A4A;
  background: #FFFFFF;
  transition: all .3s ease;
}
.tech-pill:hover { border-color: #0F4C5C; color: #0F4C5C; transform: translateY(-2px); }

/* ==== TIMELINE (proses) ==== */
.process-line {
  position: relative;
}
.process-line::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #E8E0D5 10%, #E8E0D5 90%, transparent);
}
.process-step {
  position: relative;
  background: transparent;
}
.process-step .dot {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #E8E0D5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 15px;
  color: #0F4C5C;
  position: relative;
  z-index: 1;
  transition: all .3s ease;
}
.process-step:hover .dot { border-color: #E36414; background: #E36414; color: #FFFFFF; }

/* ==== FAQ ==== */
.faq-item {
  background: #FFFFFF;
  border: 1px solid #E8E0D5;
  border-radius: 10px;
  transition: border-color .3s ease;
}
.faq-item[open] { border-color: #0F4C5C; }
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-icon { transform: rotate(45deg); color: #E36414; }
.faq-icon { transition: transform .3s ease, color .3s ease; font-family: "JetBrains Mono", monospace; }

/* ==== TESTIMONI ==== */
.testimoni-quote {
  font-size: 20px;
  line-height: 1.6;
  color: #1A1A1A;
  font-weight: 500;
}

/* ==== MOBILE MENU ==== */
#mobileMenu { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
#mobileMenu.open { max-height: 500px; }

/* ==== NAVBAR ===== */
#navbar { transition: all .3s ease; }
#navbar.scrolled {
  background: rgba(251,248,243,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #E8E0D5;
  box-shadow: 0 4px 24px -12px rgba(15,76,92,.08);
}

/* ==== REDUCED MOTION ==== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}