/* ========== RESET & TOKENS ========== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1100px, 92%); margin-inline: auto; }

:root {
  --bg: #07090f;
  --text: #e7eaf3;
  --muted: #a7afc4;
  --card: #0f1421;
  --brand: #7c9cff;
  --brand-strong: #5d7dff;
  --border: #1a2235;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --radius-sm: 12px;
  --t-fast: .18s;
  --t-med: .35s;
}

/* LIGHT THEME */
html.light {
  --bg: #f7f8fb;
  --text: #1f2937;
  --muted: #667085;
  --card: #ffffff;
  --brand: #335cff;
  --brand-strong: #2b4fe8;
  --border: #e5e7eb;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* Global transitions setelah paint pertama */
.theme-ready body,
.theme-ready .navbar,
.theme-ready .nav-links a,
.theme-ready .btn,
.theme-ready .about-card,
.theme-ready .card,
.theme-ready .contact-card,
.theme-ready footer,
.theme-ready .chips li {
  transition:
    background-color var(--t-med) ease,
    color var(--t-med) ease,
    border-color var(--t-med) ease,
    box-shadow var(--t-med) ease;
}

/* ========== NAVBAR ========== */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(7,9,15,.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
html.light .navbar { background: rgba(247,248,251,.85); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.logo { font-weight:800; letter-spacing:.2px; font-family:'Figtree', system-ui; }
.logo span { color: var(--brand); }
.nav-links { display:flex; gap:18px; }
.nav-links a { padding:8px 12px; border-radius:10px; color:var(--muted); font-weight:600; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--text); background:var(--card); box-shadow:var(--shadow); }
#toggle-theme {
  border:1px solid var(--border); background:var(--card); color:var(--text);
  padding:8px 10px; border-radius:12px; cursor:pointer; display:inline-flex; gap:8px; box-shadow:var(--shadow);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

/* ========== HERO ========== */
.hero { position: relative; overflow: clip; }
.hero-bg::before, .hero-bg::after {
  content:""; position:absolute; width:44vw; height:44vw; border-radius:999px;
  filter: blur(70px); opacity:.5; z-index:-1;
  transition: filter var(--t-med), opacity var(--t-med);
}
.hero-bg::before { left:-10vw; top:-10vw; background: radial-gradient(closest-side, #7c9cff, transparent 70%); }
.hero-bg::after  { right:-10vw; bottom:-18vw; background: radial-gradient(closest-side, #7cefff, transparent 70%); }

.hero .inner { padding:96px 0 110px; }
.hero-grid { display:grid; gap:36px; grid-template-columns: 1.2fr .8fr; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

.eyebrow { color: var(--brand); font-weight: 700; margin:0 0 8px; }
.hero h1 { font-size: clamp(2rem, 4vw + .6rem, 3.6rem); line-height:1.08; margin:0 0 14px; font-weight:800; }
.brand { color: var(--brand); }
.highlight {
  background: linear-gradient(90deg, var(--brand), #7cefff);
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.sub { opacity:.9; margin:0 0 8px; }

/* Typing caret */
.typing-wrap { font-weight:700; letter-spacing:.2px; color:var(--muted); font-variant-ligatures:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.typing::after {
  content:''; display:inline-block; width:.6ch; height:1em; margin-left:2px;
  border-right:2px solid currentColor; transform: translateY(2px);
  animation: caretBlink 1s steps(2, start) infinite;
}
@keyframes caretBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.btn { display:inline-block; padding:12px 18px; border-radius:999px; font-weight:700; transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 10px 24px rgba(92,125,255,.35); }
.btn-primary:hover { transform: translateY(-1px); background: var(--brand-strong); }
.btn-ghost { border:2px solid var(--brand); color:var(--brand); }
.btn-ghost:hover { background: rgba(124,156,255,.1); transform: translateY(-1px); }

.hero-meta { margin-top:14px; color:var(--muted); display:flex; gap:8px; align-items:center; }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(124,156,255,.12); color:var(--brand); font-weight:700; }
.sep { opacity:.5; }

/* Foto + Flying */
.hero-photo { position:relative; display:flex; justify-content:center; }
.hero-photo img {
  width:460px; height:460px; object-fit:cover; border-radius:50%;
  border:3px solid var(--border); box-shadow: var(--shadow);
}
@media (max-width: 520px){ .hero-photo img{ width:260px; height:260px; } }

.flying-wrap { position:absolute; inset:0; pointer-events:none; }
.flying {
  position:absolute; width:64px; height:32px; background-size:contain; background-repeat:no-repeat;
  opacity:.9; animation-timing-function: linear; pointer-events:none;
}
/* malam = kelelawar, siang = burung */
.flying { background-image: url("bat-removebg-preview.png"); }
html.light .flying { background-image: url("bird.png"); }

/* posisi & durasi terbang */
.f1{ left:5%;  top:10%;   animation: fly1 8s  infinite; }
.f2{ right:5%; top:20%;   animation: fly2 10s infinite; }
.f3{ left:15%; bottom:10%;animation: fly3 12s infinite; }
.f4{ right:20%; bottom:15%;animation: fly1 9s  infinite; }
.f5{ left:40%; top:5%;    animation: fly2 11s infinite; }
.f6{ right:30%; top:40%;  animation: fly3 13s infinite; }
.f7{ left:50%; bottom:25%;animation: fly1 10s infinite; }
.f8{ right:40%; top:60%;  animation: fly2 12s infinite; }

@keyframes fly1 { 0%{transform:translate(0,0)  scale(1)} 50%{transform:translate(120%,-20%) scale(1.05)} 100%{transform:translate(0,0) scale(1)} }
@keyframes fly2 { 0%{transform:translate(0,0)  scale(.9)} 50%{transform:translate(-120%,15%) scale(.95)} 100%{transform:translate(0,0) scale(.9)} }
@keyframes fly3 { 0%{transform:translate(0,0)  scale(.75)} 50%{transform:translate(100%,-10%) scale(.78)} 100%{transform:translate(0,0) scale(.75)} }

/* ========== SECTION / REVEAL ========== */
.section { padding:72px 0; }
.section-title { font-size:clamp(1.6rem, 2vw + .5rem, 2rem); margin:0 0 16px; font-weight:800; }

.section-lead {
  text-align:left;
  opacity:0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.section-lead.is-visible { opacity:1; transform:none; }

.section-head { display:flex; justify-content:space-between; align-items:end; gap:16px; }
.link { color:var(--brand); font-weight:700; }
.link:hover { text-decoration: underline; }

.reveal { opacity:0; transform: translateY(26px); transition: opacity var(--t-med), transform var(--t-med); }
.reveal.is-visible { opacity:1; transform:none; }

/* ========== CARDS (About, Projects, etc.) ========== */
.about-cards { display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.about-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.about-card h3 { margin:0 0 8px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
  transform: translateY(0) scale(1);
  transition: transform var(--t-med), box-shadow var(--t-med);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}
.card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.card-cover img { height:220px; width:100%; object-fit:cover; }
.card-body { padding:16px; display:flex; flex-direction:column; gap:10px; }
.card-top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.card h3 { margin:0; font-size:1.12rem; }
.tags { display:flex; gap:6px; flex-wrap:wrap; }
.tag { display:inline-block; padding:5px 9px; border-radius:999px; background:rgba(124,156,255,.12); color:var(--brand); font-weight:700; font-size:.85rem; }

/* Spin saat diklik (opsional) */
.card.spin { animation: spinPop .8s cubic-bezier(.2,.8,.2,1) both; }
.card.spin:hover { transform: none !important; }
@keyframes spinPop { 0%{transform:scale(.98) rotateY(0)} 50%{transform:scale(1.02) rotateY(180deg)} 100%{transform:scale(1) rotateY(360deg)} }
@media (prefers-reduced-motion: reduce) { .card.spin { animation:none !important; } }

/* ========== PROJECTS CAROUSEL (klik untuk geser, no manual scroll) ========== */
.projects-scroll {
  display:flex; gap:22px;
  overflow: hidden;                 /* nonaktifkan scroll manual */
  cursor: pointer;                  /* tanda bisa diklik */
  transform: translate3d(0,0,0);    /* dorong ke GPU */
  will-change: transform;
  contain: layout paint style;      /* isolasi paint/layout */
}
.projects-scroll .card {
  flex: 0 0 320px;                   /* ukuran slide konsisten */
}
.projects-scroll.sliding .card { box-shadow: 0 8px 20px rgba(0,0,0,.20); }

/* ========== SKILLS ========== */
.chips { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.chips li {
  padding:10px 14px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow); font-weight:700; color:var(--text);
}

/* ========== CONTACT ========== */
.contact-grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top:8px; }
.contact-card {
  display:flex; gap:10px; align-items:center;
  padding:14px 16px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow);
  font-weight:700; transition: transform var(--t-fast);
}
.contact-card:hover { transform: translateY(-3px); }

/* ========== FOOTER ========== */
footer { border-top:1px solid var(--border); background:transparent; }
footer .inner { padding:22px 0; text-align:center; color:var(--muted); }

/* ========== RESPONSIVE / ACCESSIBILITY ========== */
@media (max-width: 640px){ .nav-links{ display:none; } }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* Hindari compositing mahal di dalam kartu */
.card, .card * { backface-visibility: hidden; transform: translateZ(0); }

/* === AWARDS === */
.awards-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.award-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.award-media img {
  width: 100%;
  aspect-ratio: 16 / 10;          /* dokumentasi biasanya landscape */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* biar foto sertifikat lebih tinggi (biasanya portrait) */
.award-media img:nth-child(2) { aspect-ratio: 3 / 4; }

.award-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Lightbox <dialog> */
#award-lightbox {
  border: none;
  padding: 0;
  background: transparent;
}

#award-lightbox::backdrop {
  background: rgba(0,0,0,.6);
}

#award-lightbox img {
  max-width: min(92vw, 980px);
  max-height: 86vh;
  display: block;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.lightbox-close {
  position: absolute;
  top: 10px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Responsive: stack dua gambar jika layar sempit */
@media (max-width: 560px) {
  .award-media { grid-template-columns: 1fr; }
  .award-media img:nth-child(2) { aspect-ratio: 16 / 10; } /* samain supaya rapi */
}

/* === Lightbox awards === */
.lightbox {
  padding: 0;
  border: none;
  background: transparent;
  width: 100vw;        /* full screen */
  max-width: none;
  height: 100vh;
  inset: 0;            /* center */
  display: grid;
  place-items: center;
  overflow: hidden;    /* jangan ada scrollbar */
}

.lightbox::backdrop {
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(2px);
}

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  border-radius: 12px;
}

.lightbox-close {
  position: fixed;       /* tetap di pojok */
  top: 14px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(0,0,0,.75); }

#award-lightbox:not([open]) {
  display: none;
}

/* kalau di dalam .award-media hanya ada 1 <img>,
   ubah jadi 1 kolom dan center */
.award-media:has(img:only-child) {
  grid-template-columns: 1fr;
  justify-items: center;   /* center horizontal */
  align-items: center;     /* center vertical */
}


/* Atau, biar gambar tunggal otomatis span penuh */
.award-media:has(img:only-child) img {
  grid-column: 1 / -1;     /* ambil lebar penuh container */
}

/* tempel di style.css setelah aturan awards */
.award-media img { aspect-ratio: 16 / 10; }
.award-media img:nth-child(2) { aspect-ratio: 16 / 10; }  /* override */

.awards-grid {
  align-items: stretch;   /* semua card ikut tinggi terbesar di baris */
}
.card {
  height: 100%;           /* biar ikut stretch */
  display: flex;
  flex-direction: column;
}

.award-media img {
  max-height: 220px;      /* atau 240px sesuai selera */
  width: 100%;
  object-fit: cover;
  aspect-ratio: auto;     /* biar patuh ke max-height */
}

.awards-grid {
  display: masonry;
  column-gap: 22px;
}
.award-media {
  display: block;
  padding: 10px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.awards-grid {
  grid-auto-flow: dense;  /* isi celah kosong */
}

.awards-scroll {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
}

.awards-scroll::-webkit-scrollbar {
  height: 8px;
}
.awards-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.awards-scroll .card {
  flex: 0 0 320px;        /* lebar tiap kartu */
  scroll-snap-align: start;
}