/* ==========================================================
   OTOMATA LAB — base theme
   Diturunkan dari palet & tipografi template "Aurora Flow"
   Palet, font, dan animasi inti TIDAK diubah.
   ========================================================== */

:root{
  --dark-teal: #001a26;
  --teal: #004d66;
  --cyan: #0099b3;
  --bright-cyan: #33ccdd;
  --green: #00b366;
  --text: #eafcff;
  --text-dim: rgba(234,252,255,0.72);

  --surface: rgba(0, 77, 102, 0.18);
  --surface-solid: #002230;
  --border: rgba(234,252,255,0.14);
  --radius: 18px;
}

/* Light mode override (toggled via body.light-mode) */
body.light-mode{
  --dark-teal: #eafcff;
  --teal: #cfeff5;
  --cyan: #0099b3;
  --bright-cyan: #007a8f;
  --green: #00915a;
  --text: #012530;
  --text-dim: rgba(1,37,48,0.72);
  --surface: rgba(0, 153, 179, 0.08);
  --surface-solid: #ffffff;
  --border: rgba(1,37,48,0.12);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior: smooth; }

html, body{
  width:100%;
  min-height:100%;
  background: var(--dark-teal);
  font-family:'Inter', sans-serif;
  color: var(--text);
  transition: background 0.4s ease, color 0.4s ease;
}

body{ overflow-x:hidden; }

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }

#canvas-container{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
}
#canvas-container canvas{ display:block; }

.page-wrapper{
  position:relative;
  z-index:1;
}

/* ---------- Typography helpers ---------- */
.font-display{ font-family:'Space Grotesk', sans-serif; }

.eyebrow{
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:0.8rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color: var(--bright-cyan);
  margin-bottom: 1.5rem;
}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.1rem 5%;
  background: rgba(0, 26, 38, 0.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: padding 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.navbar.scrolled{
  padding: 0.7rem 5%;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  background: rgba(0, 26, 38, 0.82);
}
body.light-mode .navbar.scrolled{ background: rgba(255,255,255,0.9); }
body.light-mode .navbar{ background: rgba(255,255,255,0.7); }

.navbar-brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:-0.01em;
  color: var(--text);
}
.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--text);
}
.navbar-brand i{ color: var(--bright-cyan); font-size:1.4rem; }

.navbar-links{
  display:flex;
  align-items:center;
  gap:2.1rem;
}
.navbar-links a{
  font-size:0.92rem;
  font-weight:500;
  color: var(--text-dim);
  position:relative;
  padding: 0.3rem 0;
  transition: color 0.25s ease;
}
.navbar-links a:hover,
.navbar-links a.active{ color: var(--text); }
.navbar-links a.active::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:100%; height:2px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  border-radius:2px;
}

.navbar-actions{ display:flex; align-items:center; gap:0.9rem; }

.theme-toggle{
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: all 0.25s ease;
}
.theme-toggle:hover{ border-color: var(--bright-cyan); transform: translateY(-2px); }

.navbar-toggle{
  display:none;
  width:40px; height:40px;
  border-radius:8px;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  align-items:center; justify-content:center;
  cursor:pointer;
}

@media (max-width: 900px){
  .navbar-links{
    position:fixed;
    top:70px; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:1.1rem;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 0 0 0 var(--radius);
    padding: 1.5rem 1.8rem;
    transform: translateX(110%);
    transition: transform 0.35s ease;
  }
  .navbar-links.open{ transform: translateX(0); }
  .navbar-toggle{ display:flex; }
}

/* ---------- Buttons (kept from Aurora Flow) ---------- */
.btn{
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size: 0.95rem;
  padding: 0.9rem 2.1rem;
  border-radius: 999px;
  cursor:pointer;
  border: 1px solid rgba(234,252,255,0.25);
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}

.btn-primary{
  background: linear-gradient(135deg, var(--cyan), var(--green));
  color: #001a26;
  border: none;
  box-shadow: 0 0 30px rgba(0,153,179,0.4);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 45px rgba(51,204,221,0.6);
}

.btn-secondary{
  background: transparent;
  color: var(--text);
}
.btn-secondary:hover{
  background: rgba(234,252,255,0.08);
  border-color: rgba(234,252,255,0.5);
}

.btn-sm{ padding:0.55rem 1.3rem; font-size:0.85rem; }

/* ---------- Hero (kept animation timing from Aurora Flow) ---------- */
.hero{
  position:relative;
  z-index:1;
  width:100%;
  min-height: 90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 4rem 24px 3rem;
}

.hero .title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--text);
  text-shadow: 0 0 40px rgba(51,204,221,0.35);
  opacity:0;
  animation: fadeUp 1.1s ease-out 0.4s forwards;
}

.hero .subtitle{
  font-family:'Space Grotesk', sans-serif;
  font-weight:400;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  color: var(--text-dim);
  margin-top: 0.5rem;
  letter-spacing: 0.03em;
  opacity:0;
  animation: fadeUp 1.1s ease-out 0.6s forwards;
}

.hero .description{
  max-width: 620px;
  margin: 1.8rem auto 0;
  font-size: 1.02rem;
  font-weight:300;
  line-height:1.7;
  color: var(--text-dim);
  opacity:0;
  animation: fadeUp 1.1s ease-out 0.8s forwards;
}

.hero .eyebrow{
  opacity:0;
  animation: fadeUp 1s ease-out 0.2s forwards;
}

.hero .actions{
  margin-top: 2.5rem;
  display:flex;
  gap: 1rem;
  opacity:0;
  animation: fadeUp 1.1s ease-out 1s forwards;
}

.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap: 2.4rem;
  justify-content:center;
  margin-top: 3.2rem;
  opacity:0;
  animation: fadeUp 1.1s ease-out 1.15s forwards;
}
.hero-stat{ text-align:center; }
.hero-stat .num{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.9rem;
  color: var(--bright-cyan);
}
.hero-stat .label{
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--text-dim);
  margin-top:0.3rem;
}

.scroll-hint{
  position:relative;
  margin: 3rem auto 2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 0.6rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity:0;
  animation: fadeUp 1s ease-out 1.3s forwards;
}
.scroll-line{
  width:1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--bright-cyan), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}

@keyframes scrollPulse{
  0%, 100%{ opacity:0.3; transform: scaleY(0.7); transform-origin: top; }
  50%{ opacity:1; transform: scaleY(1); transform-origin: top; }
}

@media (prefers-reduced-motion: reduce){
  .hero *, .scroll-hint, .scroll-line{ animation: none !important; opacity:1 !important; }
}

/* ---------- Sections ---------- */
.section{
  position:relative;
  z-index:1;
  padding: 5rem 6% ;
  max-width: 1280px;
  margin: 0 auto;
}
.section-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.8rem;
}
.section-sub{
  color: var(--text-dim);
  max-width: 640px;
  margin-bottom: 3rem;
  line-height:1.7;
}

/* ---------- Cards ---------- */
.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
}

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.7rem;
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  opacity:0;
  transform: translateY(24px);
}
.card.reveal{ opacity:1; transform: translateY(0); }

.card:hover{
  transform: translateY(-8px);
  border-color: var(--bright-cyan);
  box-shadow: 0 12px 40px rgba(0,153,179,0.25);
}

.card-icon{
  width:54px; height:54px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  color: var(--dark-teal);
  background: linear-gradient(135deg, var(--cyan), var(--green));
  margin-bottom: 1.3rem;
}

.card h3{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.2rem;
  margin-bottom:0.6rem;
}
.card p{ color: var(--text-dim); font-size:0.92rem; line-height:1.65; margin-bottom:1.2rem; }
.card .card-link{
  font-size:0.85rem;
  font-weight:600;
  color: var(--bright-cyan);
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
}
.card .card-link i{ transition: transform 0.25s ease; }
.card:hover .card-link i{ transform: translateX(4px); }

/* ---------- Developer / About cards ---------- */
.dev-card{
  display:flex;
  align-items:center;
  gap:1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  max-width: 480px;
}
.dev-avatar{
  width:64px; height:64px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.4rem;
  color: var(--dark-teal);
}

/* ---------- Footer ---------- */
.footer{
  position:relative;
  z-index:1;
  border-top: 1px solid var(--border);
  padding: 3rem 6% 2rem;
  background: rgba(0,26,38,0.4);
}
body.light-mode .footer{ background: rgba(255,255,255,0.5); }

.footer-grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  max-width:1280px;
  margin:0 auto;
}
.footer-brand{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.25rem;
  margin-bottom:0.8rem;
}
.footer p{ color: var(--text-dim); font-size:0.9rem; line-height:1.7; }
.footer h4{ font-size:0.9rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:1rem; color: var(--text-dim); }
.footer ul li{ margin-bottom:0.6rem; }
.footer ul li a{ color: var(--text-dim); font-size:0.9rem; transition: color 0.2s ease; }
.footer ul li a:hover{ color: var(--bright-cyan); }
.footer-bottom{
  max-width:1280px;
  margin: 2.2rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.6rem;
  font-size:0.82rem;
  color: var(--text-dim);
}

@media (max-width: 760px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ---------- Toast ---------- */
.toast-container{
  position:fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 999;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
}
.toast{
  min-width: 260px;
  max-width: 340px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cyan);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  font-size:0.88rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  animation: toastIn 0.3s ease-out forwards;
}
.toast.success{ border-left-color: var(--green); }
.toast.error{ border-left-color:#e5484d; }
.toast.fade-out{ animation: toastOut 0.3s ease-in forwards; }

@keyframes toastIn{ from{ opacity:0; transform: translateX(30px);} to{opacity:1; transform:translateX(0);} }
@keyframes toastOut{ from{ opacity:1; } to{ opacity:0; transform: translateX(30px);} }

/* ---------- Loading spinner ---------- */
.spinner{
  width: 22px; height:22px;
  border-radius:50%;
  border: 3px solid rgba(234,252,255,0.25);
  border-top-color: var(--bright-cyan);
  animation: spin 0.8s linear infinite;
  display:inline-block;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.page-loading{
  position:fixed; inset:0;
  z-index: 2000;
  display:flex; align-items:center; justify-content:center;
  background: var(--dark-teal);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.page-loading .spinner{ width:34px; height:34px; border-width:4px; }
.page-loading.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

/* ---------- Placeholder page (module belum diisi) ---------- */
.placeholder-box{
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 4rem 2rem;
  text-align:center;
  color: var(--text-dim);
}