/* ============================================================
   style.css — Advanced (Dark-mode, Skeleton, Carousel, Tokens)
   All design tokens in :root — ubah angka/warna di sini.
   ============================================================ */

/* -------------------------
   1. DESIGN TOKENS (ubah di sini)
   ------------------------- */
:root{
  --color-bg: #ffffff;
  --color-surface: #f7f9fc;
  --color-text: #0f1724;
  --color-muted: #556070;
  --color-accent: #0b74de;
  --container-max: 1280px;

  --section-padding: 2.4rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --shadow-soft: 0 6px 20px rgba(16,24,40,0.06);
  --shadow-strong: 0 20px 50px rgba(2,6,23,0.15);

  --transition: 0.28s ease;
  --transition-fast: 0.12s ease;
}

/* dark mode tokens */
:root[data-theme="dark"]{
  --color-bg: #071024;
  --color-surface: #0f1724;
  --color-text: #e6eef9;
  --color-muted: #b7c3d6;
  --color-accent: #5fc0ff;
  --shadow-soft: 0 8px 30px rgba(2,6,23,0.6);
}

/* -------------------------
   2. RESET & BASE
   ------------------------- */
*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto; background:var(--color-bg); color:var(--color-text); -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
.container{ width:100%; max-width:var(--container-max); margin:0 auto; padding: clamp(1rem,2vw,1.6rem); }

/* -------------------------
   3. UTILITY CLASSES
   ------------------------- */
.hidden{ display:none !important; }
.center{ text-align:center; }

/* -------------------------
   4. LINKS & BUTTONS
   ------------------------- */
a{ color:var(--color-accent); text-decoration:none }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:var(--space-2) var(--space-4); border-radius:var(--radius-md); cursor:pointer; font-weight:600; border:1px solid transparent; background:transparent; transition:var(--transition) }
.btn-primary{ background:var(--color-accent); color: #fff; }
.btn-outline{ border:1px solid rgba(11,116,222,0.12); }

/* -------------------------
   5. HEADER
   ------------------------- */
.site-header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.85); backdrop-filter: blur(6px); border-bottom:1px solid rgba(15,23,36,0.04) }
:root[data-theme="dark"] .site-header{ background: linear-gradient(180deg, rgba(7,16,36,0.6), rgba(7,16,36,0.45)); border-bottom:1px solid rgba(255,255,255,0.03) }

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4) }
.brand .logo{ font-weight:700; letter-spacing:.5px; color:var(--color-text) }

/* nav & toggles */
.header-controls{ display:flex; align-items:center; gap:var(--space-2) }
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: .4rem;
  z-index: 9999; /* agar tidak ketutup */
}
.hamburger {
  width: 22px;
  height: 2px;
  background: #fff !important; /* selalu terlihat */
  position: relative;
}
.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff !important; /* selalu terlihat */
}

.hamburger::before {
  top: -6px;
}

.hamburger::after {
  top: 6px;
}

.site-nav ul{ list-style:none; display:flex; gap:var(--space-3); margin:0; padding:0 }
.site-nav a{ padding: .5rem .6rem; border-radius:var(--radius-sm) }

/* -------------------------
   6. HERO
   ------------------------- */
.hero{ display:grid; grid-template-columns:1fr 420px; gap:var(--space-6); padding-block:var(--section-padding) }
.hero h1{ font-size: clamp(1.6rem, 3.2vw, 2.6rem); margin:0 }
.lead{ color:var(--color-muted); margin-top:var(--space-2); max-width:58ch }
.hero-media img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); display:block }

#heroName {
  color: #0b74de; /* blue-500 */
}

/* -------------------------
   7. SECTIONS
   ------------------------- */
.section{ padding-block:var(--section-padding) }
.section-title{ margin:0 0 var(--space-3) 0; font-size:1.08rem }
.muted{ color:var(--color-muted) }

/* -------------------------
   8. SKILLS
   ------------------------- */
.skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:var(--space-3) }
.skill{ background:var(--color-surface); padding:var(--space-3); border-radius:var(--radius-md); display:flex; align-items:center; gap:var(--space-3) }

/* -------------------------
   9. PROJECT GRID + SKELETON
   ------------------------- */
.projects-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-3) }

.project-card{ background:var(--color-surface); border-radius:var(--radius-md); padding:var(--space-4); box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:var(--space-3); transition:transform var(--transition) }
.project-card:focus-within, .project-card:hover{ transform: translateY(-6px) }

.project-thumb{ width:100%; height:160px; object-fit:cover; border-radius:var(--radius-md); background:#e9eef8 }

/* SKELETON - tampil saat data belum siap */
.skeleton {
  position:relative;
  overflow:hidden;
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 100%);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 100%);
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.2s linear infinite;
}
@keyframes skeleton-shimmer {
  to { transform: translateX(100%); }
}

/* small skeleton helpers */
.card-skel { height: 160px; border-radius: var(--radius-md); background: linear-gradient(180deg, #f0f2f8, #e9eef8); }

/* -------------------------
   10. ABOUT / TESTIMONIALS / CONTACT
   ------------------------- */
.about-inner{ display:flex; gap:var(--space-4); align-items:center }
.avatar{ width:120px; height:120px; border-radius:var(--radius-full); object-fit:cover; box-shadow:var(--shadow-soft) }

.testimonials{ display:flex; gap:var(--space-4); flex-wrap:wrap }
.testimonials blockquote{ background:var(--color-surface); padding:var(--space-4); border-radius:var(--radius-md); min-width:220px; flex:1 }

.contact-grid{ display:grid; grid-template-columns:1fr 320px; gap:var(--space-4) }
.contact-form input, .contact-form textarea{ width:100%; padding:var(--space-3); border-radius:var(--radius-md); border:1px solid rgba(15,23,36,0.08) }

/* -------------------------
   11. MODAL + CAROUSEL (improved)
   ------------------------- */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:100 }
.modal[aria-hidden="false"]{ display:flex }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.5) }
.modal-panel{ position:relative; width:min(940px,95%); background:var(--color-bg); border-radius:var(--radius-lg); box-shadow:var(--shadow-strong); max-height:90vh; overflow:auto; animation:popup .22s var(--transition) }
@keyframes popup { from{ opacity:0; transform:scale(.98) } to{ opacity:1; transform:scale(1) } }
.modal-close{ position:absolute; right:10px; top:10px; border:0; background:transparent; font-size:1.6rem; cursor:pointer }
.modal-body{ padding:var(--space-4) }

/* carousel viewport */
.carousel{ display:flex; align-items:center; gap:var(--space-3) }
.carousel-viewport{ overflow:hidden; width:100% }
.carousel-track{ display:flex; gap:var(--space-3); will-change:transform; transition: transform 0.4s cubic-bezier(.22,.9,.34,1) }
.carousel-track img{ width:100%; max-width:560px; height:300px; object-fit:cover; border-radius:var(--radius-md) }
.carousel-btn{ background:transparent; border:0; font-size:1.3rem; cursor:pointer }

/* -------------------------
   12. RESPONSIVE
   ------------------------- */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; text-align:center }
  .projects-grid{ grid-template-columns: repeat(2,1fr) }
  .skills-grid{ grid-template-columns: repeat(2,1fr) }
  .contact-grid{ grid-template-columns: 1fr }
}

@media (max-width:900px){
  .nav-toggle {
    display: block !important; 
  }
  .site-nav{ position:absolute; top:64px; left:0; width:100%; background:var(--color-bg); padding:var(--space-4); border-top:1px solid rgba(15,23,36,0.05); box-shadow:var(--shadow-soft); opacity:0; pointer-events:none; transform:translateY(-10px); transition:var(--transition) }
  .site-nav.open{ opacity:1; pointer-events:auto; transform:translateY(0) }
  .site-nav ul{ flex-direction:column; align-items:flex-start }
  .projects-grid{ grid-template-columns:1fr }
}

/* -------------------------
   13. PREFERS-REDUCED-MOTION
   ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition:none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
/* === PROJECT TAG STYLE (Modern Soft Pills) === */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 10px;
}

.project-tags .tag {
  padding: 4px 10px;
  background: #f1f5ff;      /* soft blue */
  color: #3b82f6;            /* blue text */
  font-size: 0.82rem;
  border-radius: 999px;      /* pill shape */
  border: 1px solid #e0e7ff; /* subtle outline */
  display: inline-block;
  user-select: none;
  font-weight: 500;
  transition: 0.25s ease;
}

/* Hover effect */
.project-tags .tag:hover {
  background: #e0ebff;
  border-color: #c7d7ff;
}