/* ===== Tambahan: navigasi aktif, panel tema berlabel, animasi ganti warna ===== */

/* Offset scroll agar judul section tidak tertutup header sticky.
   Section punya padding-atas 80px, jadi cukup ~36px agar isi mendarat tepat di bawah header. */
main section[id] { scroll-margin-top: 36px; }
#about-card { scroll-margin-top: 110px; }

/* ---------- Navigasi ---------- */
header nav {
  position: relative;
  /* ruang untuk bayangan "sticker" pill aktif (overflow-x membuat overflow-y ikut terpotong) */
  padding: 6px 4px 9px;
  margin: -6px -4px -9px;
  scrollbar-width: none;
}
.nav-pill { flex: 0 0 auto; -webkit-tap-highlight-color: transparent; }
.nav-pill.is-active {
  background: var(--nav-active-bg, var(--c-cream));
  color: var(--nav-active-fg, var(--c-ink));
  border-color: color-mix(in srgb, var(--c-ink) 14%, transparent);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c-soft-pink) 55%, transparent),
              0 10px 18px -10px rgba(0, 0, 0, .35);
}
/* Di layar kecil label disembunyikan; tampilkan hanya untuk pill aktif */
.nav-pill.is-active span {
  display: inline !important;
  animation: navLabel .35s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes navLabel { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* Garis progres scroll di dasar header */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.scroll-progress span {
  display: block; height: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--c-soft-pink), var(--c-lavender));
}

/* Tombol hero kini <a> */
a.hover-pop, a.shine { text-decoration: none; }

/* ---------- Panel pilihan warna ---------- */
.theme-panel {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: min(272px, calc(100vw - 40px));
  max-height: calc(100vh - 140px); overflow-y: auto;
  padding: 14px; border-radius: 26px;
  background: var(--c-cream); color: var(--c-ink);
  border: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c-ink) 8%, transparent), 0 28px 48px -18px rgba(0, 0, 0, .4);
  transform-origin: 100% 100%;
  opacity: 0; transform: translateY(10px) scale(.92);
  visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s;
  z-index: 60;
}
.theme-panel.is-open {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition-delay: 0s;
}
.theme-title {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  color: var(--c-ink-soft); margin: 2px 4px 10px;
}
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9999px;
  border: 1.5px solid transparent;
  background: color-mix(in srgb, var(--c-ink) 6%, transparent);
  color: inherit; cursor: pointer; text-align: left;
  font-size: 11px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-opt:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c-ink) 11%, transparent); }
.theme-opt:focus-visible { outline: 2px solid var(--c-soft-pink); outline-offset: 2px; }
.theme-opt[aria-checked="true"] {
  border-color: var(--c-soft-pink);
  background: color-mix(in srgb, var(--c-soft-pink) 16%, transparent);
}
.theme-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.theme-dot[data-c="gradient"] { background: linear-gradient(135deg, #ff9ad5, #a347ff, #2f9bff); }
.theme-dot[data-c="black"]    { background: #0b0b0f; }
.theme-dot[data-c="white"]    { background: #ffffff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.theme-dot[data-c="red"]      { background: #ff3d24; }
.theme-dot[data-c="orange"]   { background: #ff7a1a; }
.theme-dot[data-c="yellow"]   { background: #facc15; }
.theme-dot[data-c="green"]    { background: #22c55e; }
.theme-dot[data-c="teal"]     { background: #0fb5a8; }
.theme-dot[data-c="blue"]     { background: #2f9bff; }
.theme-dot[data-c="purple"]   { background: #a347ff; }
.theme-dot[data-c="pink"]     { background: #ff4fa3; }
.theme-dot[data-c="brown"]    { background: #b5651d; }

/* ---------- Animasi pergantian warna ---------- */
/* View Transitions API: warna baru "meluas" dari tombol palet (klip-path dianimasikan di app.js) */
::view-transition-group(root) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
/* Fallback untuk browser tanpa View Transitions: cross-fade warna */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after {
  transition: background-color .55s ease, color .55s ease, border-color .55s ease,
              fill .55s ease, stroke .55s ease, box-shadow .55s ease !important;
}

/* ---------- Tema tambahan ---------- */
[data-theme="black"] {
  --c-ink: #f1f1f4; --c-ink-soft: #a3a3b2; --c-cream: #15151b; --c-lavender: #24242e;
  --c-baby-blue: #1e2433; --c-soft-pink: #6366f1; --c-pastel-yellow: #2b2836; --c-bg: #09090c;
  --nav-active-bg: #f1f1f4; --nav-active-fg: #15151b;
  color-scheme: dark;
}
[data-theme="black"] .sticker { box-shadow: 0 6px rgba(0, 0, 0, .65); }
[data-theme="teal"] {
  --c-ink: #032a2a; --c-ink-soft: #2b7a78; --c-cream: #f2fffd; --c-lavender: #a6f0e6;
  --c-baby-blue: #7fe0d4; --c-soft-pink: #0fb5a8; --c-pastel-yellow: #c0f5ee; --c-bg: #def9f5;
}
[data-theme="brown"] {
  --c-ink: #2a160a; --c-ink-soft: #8a5a3a; --c-cream: #fff8f0; --c-lavender: #ecc9a4;
  --c-baby-blue: #dcae85; --c-soft-pink: #b5651d; --c-pastel-yellow: #f3d9b8; --c-bg: #f6e6d3;
}

@media (prefers-reduced-motion: reduce) {
  .theme-panel, .theme-opt { transition: none; }
  .nav-pill.is-active span { animation: none; }
  .theme-fade, .theme-fade * { transition: none !important; }
}