/* ============ THEME TOKENS (dark default, .light untuk mode terang) ============ */
:root {
  --bg: #070B14; --surface: #0C1424; --surface-2: #101B31;
  --line: rgba(151, 168, 197, 0.14); --ink: #E9EEF7; --muted: #9AA7BE;
  --accent: #8AB6FF; --accent-ink: #06111F; --accent-soft: rgba(138, 182, 255, 0.10);
  --accent-shadow: rgba(138, 182, 255, 0.28); --grid-line: rgba(138, 182, 255, 0.045); --danger: #F87171;
}
.light {
  --bg: #F5F8FC; --surface: #FFFFFF; --surface-2: #EDF2FA;
  --line: rgba(16, 24, 40, 0.12); --ink: #101828; --muted: #51607A;
  --accent: #1B5FC4; --accent-ink: #FFFFFF; --accent-soft: rgba(27, 95, 196, 0.08);
  --accent-shadow: rgba(27, 95, 196, 0.22); --grid-line: rgba(16, 24, 40, 0.05); --danger: #DC2626;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: Satoshi, sans-serif; }
img { max-width: 100%; }
::selection { background: var(--accent); color: var(--accent-ink); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ============ BUTTONS ============ */
.btn-primary {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
  padding: .9rem 1.7rem; border-radius: 999px;
  box-shadow: 0 12px 32px -12px var(--accent-shadow);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 18px 40px -14px var(--accent-shadow); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line); color: var(--ink); font-weight: 600;
  padding: .9rem 1.7rem; border-radius: 999px;
  transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: .55rem 1.15rem !important; font-size: .85rem !important; }

.chip {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); white-space: nowrap;
}

/* ============ NAV ============ */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--ink); }
#site-nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }

/* Ikon tema (matahari/bulan) */
.theme-sun { display: none; } .theme-moon { display: block; }
.light .theme-sun { display: block; } .light .theme-moon { display: none; }

/* ============ HERO ============ */
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 0%, black 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 85% at 50% 0%, black 25%, transparent 78%);
}
.text-outline { color: transparent; -webkit-text-stroke: 1.5px var(--ink); transition: color .5s ease, -webkit-text-stroke-color .5s ease; }
.text-outline:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.typed-cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent); margin-left: 3px; vertical-align: -2px; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-in { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
body.ready .hero-in { opacity: 1; transform: none; }

/* ============ MARQUEE ============ */
.marquee { overflow: hidden; }
.marquee-track { display: flex; align-items: center; gap: 3rem; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .08s; } [data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; } [data-delay="4"] { transition-delay: .32s; }

/* ============ SKILL DOTS ============ */
.dot { display: inline-block; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--line); }
.dot.on { background: var(--accent); border-color: var(--accent); }

/* ============ TIMELINE ============ */
.tl-item { position: relative; padding-left: 2rem; border-left: 1px solid var(--line); }
.tl-item::before { content: ''; position: absolute; left: -5.5px; top: 7px; width: 10px; height: 10px; border-radius: 99px; background: var(--bg); border: 2px solid var(--accent); }

/* ============ FORM & TOAST ============ */
.field-input { width: 100%; background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; color: var(--ink); transition: border-color .25s ease; }
.field-input::placeholder { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.field-input:focus { outline: none; border-color: var(--accent); }
.field-input.invalid { border-color: var(--danger); }
.field-error { display: none; font-size: 12px; color: var(--danger); margin-top: 6px; }
.field-error.show { display: block; }
.toast { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; }
.toast.show { opacity: 1; transform: none; }

/* ============ MOBILE MENU ============ */
#mobile-menu { visibility: hidden; }
#mobile-menu.open { visibility: visible; }
#mobile-menu .panel { transform: translateX(100%); transition: transform .4s cubic-bezier(.22,.61,.36,1); }
#mobile-menu.open .panel { transform: translateX(0); }
#mobile-menu .backdrop { opacity: 0; transition: opacity .35s ease; }
#mobile-menu.open .backdrop { opacity: 1; }

/* ============ 404 & LOADER ============ */
#error-page { display: none; }
#error-page.show { display: flex; }
#loadbar { animation: loadgrow 1.1s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes loadgrow { from { width: 0; } to { width: 100%; } }

/* ============ RESPONSIVE TAMBAHAN (HP kecil & tablet) ============ */
@media (max-width: 380px) {
  .hero-photo { width: 100% !important; }
  .hero-badge-l { left: -.25rem !important; }
  .hero-badge-r { right: -.25rem !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-photo { max-width: 22rem; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero-in { transition: none; opacity: 1; transform: none; }
  .marquee-track, .typed-cursor { animation: none; }
  #loadbar { animation: none; width: 100%; }
}