/* ==============================================================================
   WEBSITE4 MAIN DESIGN SYSTEM (Warm Editorial Magazine — Anti AI-Slop)
   Inspirasi: Editorial Layout, Human Craft, Warm Paper & Modern Typography
   ============================================================================== */

/* Google Fonts is loaded asynchronously in index.html to eliminate render-blocking chain */

:root {
  /* Warm Editorial Canvas Tokens */
  --bg-canvas-tone: #FAF7F2;
  --bg-paper: #FDFBF7;
  
  /* White Popup Panel dengan Opacity Lebih Transparan */
  --bg-panel-white: rgba(255, 255, 255, 0.55);
  --bg-card-subtle: rgba(255, 255, 255, 0.48);
  --bg-card-hover: rgba(255, 255, 255, 0.72);

  --border-panel: rgba(255, 255, 255, 0.45);
  --border-subtle: rgba(28, 25, 23, 0.08);
  --border-strong: rgba(28, 25, 23, 0.16);
  
  /* Editorial Color Accents dari Foto Referensi */
  --color-ink: #18181B;
  --color-body: #3F3F46;
  --color-muted: #71717A;
  --color-terracotta: #E85A4F;   /* "Brighter Days" coral terracotta */
  --color-rust: #9E3A2B;         /* "REAL CONVERSATIONS..." tracked eyebrow */
  --color-burgundy: #3B1422;     /* "LISTEN ON SPOTIFY" wine pill */
  --color-lime: #D4F65B;         /* "LISTEN ON APPLE" chartreuse pill */
  --color-lime-text: #18181B;

  /* Fonts */
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-script: 'Caveat', cursive;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
}

/* CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body);
  background-color: var(--bg-canvas-tone);
  color: var(--color-ink);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background-color: var(--bg-canvas-tone);
  color: var(--color-ink);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-canvas-tone);
}
::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.15);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(28, 25, 23, 0.3);
}

/* ==============================================================================
   TOP HEADER (Clean Editorial Ivory Glass)
   ============================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  background: rgba(253, 251, 247, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 2px 12px rgba(28, 25, 23, 0.03);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-ink);
}

.brand-monogram {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #18181B;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 0 4px 12px rgba(24, 24, 27, 0.15);
}

.brand-info {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
}

.brand-role {
  font-size: 0.72rem;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-weight: 500;
}

.header-center-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-rust);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.header-right-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-body);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.header-nav-btn:hover {
  color: var(--color-ink);
  background: rgba(28, 25, 23, 0.05);
}

.header-nav-btn.primary {
  color: #FFFFFF;
  background: var(--color-burgundy);
  border-color: var(--color-burgundy);
  box-shadow: 0 4px 12px rgba(59, 20, 34, 0.2);
}

.header-nav-btn.primary:hover {
  background: #250C16;
  transform: translateY(-1px);
}

/* ==============================================================================
   EDITORIAL PILL BUTTONS (Matching Reference Image)
   ============================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Wine / Burgundy Pill */
.btn-burgundy {
  background: var(--color-burgundy);
  color: #FFFFFF;
}

.btn-burgundy:hover {
  background: #270D17;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 20, 34, 0.25);
}

/* Lime / Chartreuse Pill */
.btn-lime {
  background: var(--color-lime);
  color: var(--color-lime-text);
  box-shadow: 0 4px 14px rgba(212, 246, 91, 0.35);
}

.btn-lime:hover {
  background: #C4EA45;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(212, 246, 91, 0.45);
}

.btn-ghost-editorial {
  background: #FFFFFF;
  color: var(--color-ink);
  border: 1px solid var(--border-subtle);
}

.btn-ghost-editorial:hover {
  background: #F4F1EA;
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* ==============================================================================
   TYPOGRAPHY & ACCENTS
   ============================================================================== */
.text-terracotta {
  color: var(--color-terracotta);
}

.handwritten-accent {
  font-family: var(--font-script);
  font-size: 1.55rem;
  color: var(--color-body);
  line-height: 1.1;
  display: inline-block;
  letter-spacing: 0.02em;
}

/* Circular Stamp Badge from reference image */
.stamp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px dashed rgba(28, 25, 23, 0.25);
  background: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-ink);
  text-align: center;
  letter-spacing: 0.08em;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

/* Tag Pills */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--color-body);
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.tag-pill:hover {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

.tags-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Keyboard hint in footer (moved to bottom right) */
.desktop-keyboard-hint {
  position: fixed;
  bottom: 20px;
  right: 32px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  pointer-events: none;
}

.desktop-keyboard-hint kbd {
  background: #FFFFFF;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-ink);
  font-size: 0.7rem;
  border: 1px solid var(--border-subtle);
}

/* Website Version Badge */
.website-version-badge {
  position: fixed;
  bottom: 20px;
  left: 32px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  letter-spacing: 0.02em;
  user-select: none;
}

.website-version-badge .version-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-terracotta);
  display: inline-block;
}

.website-version-badge .version-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  font-weight: 600;
}

.website-version-badge .version-tag {
  color: var(--color-terracotta);
  font-weight: 600;
}

@media (max-width: 900px) {
  .site-header {
    padding: 0 18px;
  }
  .header-center-tag {
    display: none;
  }
  .desktop-keyboard-hint {
    display: none;
  }
  .website-version-badge {
    bottom: 12px;
    left: 16px;
    padding: 4px 10px;
    font-size: 0.68rem;
  }
}
/* ==============================================================================
   WEBSITE4 CANVAS HERO & WARM DAYLIGHT ASYMMETRIC MASK
   ============================================================================== */

/* Fixed Viewport Container for Canvas & Poster */
#bg-canvas-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--bg-canvas-tone);
}

/* Instant Fallback Poster for LCP (shifted 100px right on desktop) */
.canvas-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(50% + 100px) center;
  z-index: 2;
  transition: opacity 0.5s ease-out;
}

@media (max-width: 1024px) {
  .canvas-poster {
    object-position: center center;
  }
}

/* HTML5 Canvas Scrub Surface (Sekuens gambar saat discroll) */
#bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* Video Animasi Awal saat di Posisi Paling Atas (Waving at camera) */
.intro-video-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(50% + 100px) center;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.4s ease;
}

.intro-video-layer.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .intro-video-layer {
    object-position: center center;
  }
}

/* Warm Asymmetric Gradient Mask:
   Meredam kontras di sisi kiri untuk membaca teks,
   sementara figur orang yang sedang mengetik di sisi kanan 100% terang dan jernih! */
.canvas-overlay-left-mask {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(
    90deg,
    rgba(250, 247, 242, 0.78) 0%,
    rgba(250, 247, 242, 0.60) 35%,
    rgba(250, 247, 242, 0.20) 55%,
    transparent 78%
  );
  pointer-events: none;
}

/* Subtle Top & Bottom Fades */
.canvas-overlay-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  z-index: 4;
  background: linear-gradient(0deg, rgba(250, 247, 242, 0.6) 0%, transparent 100%);
  pointer-events: none;
}

.canvas-overlay-top-fade {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 90px;
  z-index: 4;
  background: linear-gradient(180deg, rgba(250, 247, 242, 0.45) 0%, transparent 100%);
  pointer-events: none;
}

.character-spotlight-frame {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50vw;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 900px) {
  .canvas-overlay-left-mask {
    background: linear-gradient(
      180deg,
      rgba(250, 247, 242, 0.7) 0%,
      rgba(250, 247, 242, 0.88) 50%,
      rgba(250, 247, 242, 0.95) 100%
    );
  }
}

/* ==============================================================================
   WEBSITE4 RIGHT-SIDE VERTICAL SCROLL INDICATOR RAIL (Warm Editorial)
   ============================================================================== */

.scroll-indicator-rail {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
}

.indicator-track-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Background Vertical Track Line */
.indicator-line-bg {
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(28, 25, 23, 0.12);
  border-radius: 999px;
  z-index: 1;
}

/* Dynamic Filling Progress Line */
.indicator-line-fill {
  position: absolute;
  top: 10px;
  width: 2px;
  height: 0%;
  background: linear-gradient(180deg, var(--color-terracotta) 0%, var(--color-burgundy) 100%);
  border-radius: 999px;
  z-index: 2;
  transition: height 0.15s ease-out;
  box-shadow: 0 0 6px rgba(232, 90, 79, 0.4);
}

/* Navigation List */
.indicator-list {
  position: relative;
  z-index: 3;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.indicator-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none;
  color: var(--color-muted);
  outline: none;
  cursor: pointer;
  padding: 6px;
}

/* Dot Marker */
.indicator-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid rgba(28, 25, 23, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.indicator-item:hover .indicator-dot {
  transform: scale(1.3);
  border-color: var(--color-terracotta);
  background: #FFFFFF;
  box-shadow: 0 0 8px rgba(232, 90, 79, 0.35);
}

/* Sonar Beacon Pulse on Active Dot (Profile s/d Contact Form) */
.indicator-item.active .indicator-dot {
  transform: scale(1.4);
  background: var(--color-terracotta);
  border-color: #FFFFFF;
  box-shadow: 0 0 12px rgba(232, 90, 79, 0.65);
  animation: dot-breathe 2.4s ease-in-out infinite;
}

/* Sonar Ripple Ring Animation */
.indicator-item.active .indicator-dot::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--color-terracotta);
  opacity: 0.9;
  animation: dot-pulse-ripple 2.2s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
  pointer-events: none;
}

/* Sonar Ambient Glow Halo */
.indicator-item.active .indicator-dot::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 90, 79, 0.38) 0%, rgba(232, 90, 79, 0) 70%);
  animation: dot-pulse-glow 2.2s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* Floating Label Tooltip (Warm White Box with Opacity) */
.indicator-label {
  position: absolute;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(28, 25, 23, 0.08);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.label-index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-terracotta);
  font-weight: 700;
}

/* Hover and Active Tooltip States */
.indicator-item:hover .indicator-label,
.indicator-item.active .indicator-label {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.indicator-item.active .indicator-label {
  color: var(--color-ink);
  border-color: rgba(232, 90, 79, 0.35);
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(232, 90, 79, 0.14);
  animation: label-soft-pulse 3s ease-in-out infinite;
}

/* ==============================================================================
   SONAR BEACON PULSE KEYFRAMES (GPU-Accelerated 60fps)
   ============================================================================== */

@keyframes dot-breathe {
  0%, 100% {
    transform: scale(1.35);
    box-shadow: 0 0 10px rgba(232, 90, 79, 0.6), 0 0 2px rgba(232, 90, 79, 0.9);
  }
  50% {
    transform: scale(1.55);
    box-shadow: 0 0 18px rgba(232, 90, 79, 0.85), 0 0 5px rgba(232, 90, 79, 1);
  }
}

@keyframes dot-pulse-ripple {
  0% {
    transform: scale(0.6);
    opacity: 0.95;
  }
  60% {
    opacity: 0.45;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes dot-pulse-glow {
  0% {
    transform: scale(0.5);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes label-soft-pulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(232, 90, 79, 0.12);
  }
  50% {
    box-shadow: 0 8px 28px rgba(232, 90, 79, 0.22), 0 0 14px rgba(232, 90, 79, 0.12);
  }
}

@media (max-width: 900px) {
  .scroll-indicator-rail {
    right: 12px;
  }
  .indicator-label {
    display: none;
  }
}
/* ==============================================================================
   WEBSITE4 POPUP SECTIONS & LEFT STAGE (Kotak Putih dengan Opacity)
   Aesthetic: Warm Editorial Magazine (Sesuai Referensi Gambar)
   ============================================================================== */

/* Scroll Track Virtual Canvas (5 Sections = 500vh) */
#scroll-track {
  position: relative;
  height: 500vh;
  width: 100%;
}

/* Invisible Anchors for Scroll Triggers */
.section-anchor {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

#anchor-profile { top: 0vh; }
#anchor-education-skill { top: 100vh; }
#anchor-experience { top: 200vh; }
#anchor-portfolio { top: 300vh; }
#anchor-contact { top: 400vh; }

/* ==============================================================================
   LEFT-SIDE STAGE CONTAINER (Unobstructed View of Right Side!)
   ============================================================================== */
/* ==============================================================================
   LEFT-SIDE STAGE CONTAINER (Kotak Full Height & 50% Width di Desktop)
   Figur orang di sisi kanan tetap terlihat bebas & tidak tertutup
   ============================================================================== */
#popup-stage {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50vw;
  height: 100vh;
  z-index: 20;
  pointer-events: none;
}

/* ==============================================================================
   POPUP PANEL: KOTAK PUTIH DENGAN OPACITY & FULL HEIGHT
   Background di belakangnya tetap terlihat samar-samar
   ============================================================================== */
.popup-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid rgba(255, 255, 255, 0.45);
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-radius: 0;
  box-shadow: 16px 0 48px rgba(28, 25, 23, 0.04);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  visibility: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.4s ease;
}

/* Active State: Card pops up into view! */
.popup-panel.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

/* Exit Transition States */
.popup-panel.is-exiting-up {
  opacity: 0;
  transform: translateY(-24px) scale(0.98);
}

.popup-panel.is-exiting-down {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
}

/* Container Slot Structure (Ensures Sticky Header & Scrollable Body) */
.panel-inner-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* Panel Header & Section Headings (Fixed / Retained at Top) */
.panel-header,
.panel-section-head {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 15;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}

.panel-header {
  padding: 24px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-section-head {
  padding: 24px 44px 18px;
}

.panel-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-rust);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.panel-title {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.panel-subtitle {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--color-body);
  line-height: 1.55;
}

/* Scrollable Inner Body of Popup (Retaining Fixed Header) */
.panel-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 44px 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 25, 23, 0.18) transparent;
}

.panel-scroll-body::-webkit-scrollbar {
  width: 6px;
}
.panel-scroll-body::-webkit-scrollbar-track {
  background: transparent;
}
.panel-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.18);
  border-radius: 999px;
}
.panel-scroll-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-terracotta);
}

/* ==============================================================================
   SECTION 01: PROFILE STYLES (Magazine Editorial Layout)
   ============================================================================== */
/* Desktop: Hilangkan scroll, tata letak fit sempurna dalam 100vh */
#panel-profile .panel-scroll-body {
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: clamp(24px, 3.5vh, 40px) clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(12px, 2vh, 20px);
}

#panel-profile .panel-scroll-body::-webkit-scrollbar {
  display: none;
}

.profile-hero-block {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 16px);
}

.profile-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar-ring {
  width: clamp(56px, 6.5vh, 66px);
  height: clamp(56px, 6.5vh, 66px);
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--color-terracotta) 0%, #D4A373 100%);
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(232, 90, 79, 0.2);
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: #FFFFFF;
}

.profile-name {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.15;
}

.profile-title {
  font-size: clamp(0.82rem, 1vw, 0.9rem);
  font-weight: 600;
  color: var(--color-terracotta);
}

.profile-subrole {
  font-size: clamp(0.72rem, 0.9vw, 0.78rem);
  color: var(--color-muted);
  font-family: var(--font-mono);
}

/* Editorial Headline: Sesuai Referensi Gambar ("Good Ideas Brighter Days") */
.editorial-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 2.5vw, 2.2rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.profile-lead-narrative {
  font-size: clamp(0.84rem, 1.05vw, 0.94rem);
  line-height: 1.55;
  color: var(--color-body);
  font-weight: 400;
}

.profile-handwritten-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.panel-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 0 4px;
}

.metric-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: clamp(10px, 1.4vh, 14px) clamp(12px, 1.4vw, 16px);
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.metric-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.metric-val-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.metric-val {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.2vw, 1.95rem);
  font-weight: 700;
  color: var(--color-terracotta);
  line-height: 1;
}

.metric-unit {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-muted);
  font-weight: 600;
}

.metric-lbl {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-top: 3px;
}

.metric-sub {
  font-size: 0.72rem;
  color: var(--color-muted);
  line-height: 1.35;
  margin-top: 2px;
}


/* ==============================================================================
   SECTION 02: EDUCATION & SKILL STYLES
   ============================================================================== */
.edu-awards-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.edu-col,
.awards-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.col-heading {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.edu-card, .award-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.edu-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.edu-icon {
  color: var(--color-terracotta);
  flex-shrink: 0;
  margin-top: 2px;
}

.edu-inst {
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--color-ink);
}

.edu-degree {
  font-size: 0.84rem;
  color: var(--color-terracotta);
  font-family: var(--font-mono);
}

.edu-period {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.edu-detail {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--color-body);
  line-height: 1.55;
}

.award-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #B45309;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.award-event {
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-ink);
}

.award-org {
  color: var(--color-muted);
  font-weight: 400;
}

.award-desc {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--color-body);
  line-height: 1.55;
}

.award-link-row {
  margin-top: 10px;
}

.award-external-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-rust);
  text-decoration: none;
  background: rgba(232, 90, 79, 0.08);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(232, 90, 79, 0.2);
  transition: all 0.2s ease;
}

.award-external-link:hover {
  background: var(--color-terracotta);
  color: #FFFFFF;
}

.skills-taxonomy-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skills-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skill-category-block {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.skill-cat-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-ink);
}

.skill-cat-summary {
  font-size: 0.8rem;
  color: var(--color-body);
  margin: 4px 0 10px;
}

/* ==============================================================================
   SECTION 03: EXPERIENCE TIMELINE STYLES
   ============================================================================== */
.timeline-track-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 20px;
}

.timeline-line {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 6px;
  width: 2px;
  background: rgba(28, 25, 23, 0.1);
}

.timeline-item {
  position: relative;
}

.timeline-dot-wrap {
  position: absolute;
  left: -20px;
  top: 20px;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-terracotta);
  box-shadow: 0 0 6px rgba(232, 90, 79, 0.5);
}

.timeline-content-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.timeline-content-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.timeline-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.timeline-period {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-terracotta);
  font-weight: 700;
}

.timeline-type {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 2px 8px;
  background: #F4F1EA;
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  margin-left: 8px;
}

.timeline-location {
  font-size: 0.74rem;
  color: var(--color-muted);
}

.timeline-role {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-ink);
}

.timeline-company {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-body);
  margin-bottom: 8px;
}

.timeline-summary {
  font-size: 0.84rem;
  color: var(--color-body);
  line-height: 1.55;
  margin-bottom: 10px;
}

.timeline-achievements {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline-achievements li {
  font-size: 0.8rem;
  color: var(--color-body);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.bullet-check {
  color: #059669;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ==============================================================================
   SECTION 04: PORTOFOLIO STYLES
   ============================================================================== */
.portfolio-head-flex {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portfolio-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-btn {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  color: var(--color-body);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.filter-btn:hover {
  color: var(--color-ink);
  background: #F4F1EA;
}

.filter-btn.active {
  background: var(--color-burgundy);
  border-color: var(--color-burgundy);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(59, 20, 34, 0.2);
}

.projects-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.project-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.08);
}

.project-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.project-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-rust);
  background: #FDF2F0;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid #F8D7DA;
  font-weight: 600;
}

.project-year {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
}

.project-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 2px;
}

.project-role-text {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  color: var(--color-rust);
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.35;
}

.project-summary {
  font-size: 0.84rem;
  color: var(--color-body);
  line-height: 1.55;
  margin-bottom: 12px;
}

.project-tech-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.tech-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 8px;
  background: #FFFFFF;
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  border: 1px solid var(--border-subtle);
}

.tech-tag.more {
  color: var(--color-terracotta);
  font-weight: 700;
}

.btn-inspect-project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-rust);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: gap 0.2s ease;
}

.project-card:hover .btn-inspect-project {
  gap: 10px;
}

/* ==============================================================================
   SECTION 05: CONTACT FORM STYLES
   ============================================================================== */
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.collab-form {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-body);
}

.form-input, .form-select, .form-textarea {
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.86rem;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(232, 90, 79, 0.15);
}

/* --- Anti-Bot Math Captcha Styling --- */
.hp-field {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

.captcha-group {
  margin-top: 2px;
  margin-bottom: 6px;
}

.captcha-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-ink);
}

.captcha-badge {
  background: rgba(232, 90, 79, 0.12);
  color: var(--color-terracotta);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.captcha-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.captcha-math-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-ink);
  user-select: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}

.math-num {
  color: var(--color-burgundy);
  min-width: 14px;
  text-align: center;
}

.math-op, .math-eq {
  color: var(--color-terracotta);
  font-weight: 800;
}

.captcha-input {
  width: 90px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 10px;
  color: var(--text-ink);
}

.btn-refresh-captcha {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--trans-fast);
  flex-shrink: 0;
}

.btn-refresh-captcha:hover {
  background: #FFFFFF;
  color: var(--color-terracotta);
  border-color: var(--color-terracotta);
  transform: rotate(45deg);
}

.form-buttons-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.form-feedback {
  font-size: 0.85rem;
  margin-top: 10px;
}

.form-feedback:empty {
  display: none;
}

.feedback-box {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card-subtle);
  animation: fadeInFeedback 0.25s ease-out;
}

@keyframes fadeInFeedback {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feedback-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 6px;
}

.feedback-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

.feedback-hint {
  font-size: 0.78rem;
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.04);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  margin: 8px 0;
  color: var(--color-terracotta);
}

.form-feedback.is-loading .feedback-box {
  background: rgba(244, 241, 234, 0.8);
  border-color: rgba(232, 90, 79, 0.3);
  color: var(--text-ink);
}

.form-feedback.is-success .feedback-box {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.4);
  color: #065F46;
}

.form-feedback.is-success .feedback-header svg {
  color: #10B981;
}

.form-feedback.is-error .feedback-box {
  background: rgba(232, 90, 79, 0.08);
  border-color: rgba(232, 90, 79, 0.35);
  color: #991B1B;
}

.form-feedback.is-error .feedback-header svg {
  color: var(--color-terracotta);
}

.feedback-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.btn-fallback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: all var(--trans-fast);
}

.btn-fallback-mail {
  background: var(--color-burgundy);
  color: #FFFFFF;
}

.btn-fallback-mail:hover {
  background: #250A14;
  transform: translateY(-1px);
}

.btn-fallback-wa {
  background: #25D366;
  color: #FFFFFF;
}

.btn-fallback-wa:hover {
  background: #1EBE5D;
  transform: translateY(-1px);
}

.icon-spinner {
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.direct-connect-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.direct-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.direct-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.direct-icon {
  color: var(--color-terracotta);
  display: flex;
  align-items: center;
}

.direct-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-ink);
}

.direct-value {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--color-muted);
}

.direct-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-rust);
  text-decoration: none;
}

.direct-link:hover {
  text-decoration: underline;
}

/* ==============================================================================
   RESPONSIVE LAYOUT (Mobile & Tablet: Full Width & Full Height)
   ============================================================================== */
@media (max-width: 1024px) {
  #popup-stage {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
  }

  .popup-panel {
    border-radius: 0;
    border: none;
    background: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .panel-header, .panel-section-head {
    padding: 18px 20px 14px;
  }

  .panel-scroll-body {
    padding: 16px 20px 32px;
  }

  /* Tablet & Mobile: Panel Profile Tetap Scrollable */
  #panel-profile .panel-scroll-body {
    overflow-y: auto !important;
    scrollbar-width: thin;
    -ms-overflow-style: auto;
    justify-content: flex-start;
    padding: 24px 20px 36px;
    gap: 20px;
    -webkit-overflow-scrolling: touch;
  }

  #panel-profile .panel-scroll-body::-webkit-scrollbar {
    display: block;
    width: 6px;
  }

  .editorial-headline {
    font-size: 1.85rem;
  }

  .metrics-grid {
    padding: 0 0 16px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .profile-hero-block {
    padding: 0 0 14px;
    gap: 16px;
  }
}

/* Fallback: Layar desktop dengan ketinggian sangat pendek (<= 620px) tetap dapat digulir */
@media (min-width: 1025px) and (max-height: 620px) {
  #panel-profile .panel-scroll-body {
    overflow-y: auto !important;
    scrollbar-width: thin;
  }
  #panel-profile .panel-scroll-body::-webkit-scrollbar {
    display: block;
    width: 6px;
  }
}

/* ==============================================================================
   WEBSITE4 PROJECT CASE STUDY MODAL LIGHTBOX (Warm Editorial White Box)
   ============================================================================== */

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-root.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.modal-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-xl);
  box-shadow: 0 32px 90px rgba(28, 25, 23, 0.12), 0 2px 8px rgba(28, 25, 23, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--color-ink);
}

.modal-root.is-open .modal-dialog {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  color: var(--color-body);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.modal-close-btn:hover {
  background: #F4F1EA;
  color: var(--color-ink);
  transform: scale(1.05);
}

.modal-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 88vh;
  min-height: 0;
  flex: 1;
}

/* Pinned Modal Header (Kategori, Nama Proyek & Peran) */
.modal-dialog-header {
  flex-shrink: 0;
  padding: 24px 64px 18px 32px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  z-index: 5;
}

.modal-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.modal-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-rust);
  background: #FDF2F0;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid #F8D7DA;
  font-weight: 700;
}

.modal-cat {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-muted);
}

.modal-title {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
}

.modal-role-pill {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-rust);
  background: rgba(232, 90, 79, 0.08);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(232, 90, 79, 0.2);
}

/* Scrollable Inner Content Body */
.modal-dialog-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 25, 23, 0.18) transparent;
}

.modal-dialog-scroll-body::-webkit-scrollbar {
  width: 6px;
}
.modal-dialog-scroll-body::-webkit-scrollbar-track {
  background: transparent;
}
.modal-dialog-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.18);
  border-radius: 999px;
}
.modal-dialog-scroll-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-terracotta);
}

.modal-summary {
  font-size: 0.92rem;
  color: var(--color-body);
  line-height: 1.6;
}

.modal-banner-wrap {
  width: 100%;
  max-height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: #F4F1EA;
}

.modal-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-sections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.modal-section-card {
  background: #FDFBF7;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.modal-section-card.impact-card {
  border-left: 3px solid #059669;
  background: #F0FDF4;
}

.modal-sec-title {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.modal-sec-text {
  font-size: 0.84rem;
  color: var(--color-body);
  line-height: 1.55;
}

.modal-sec-text.highlight {
  color: #065F46;
  font-weight: 600;
}

.modal-tech-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Pinned Modal Footer (Tombol Kunjungi) */
.modal-dialog-footer {
  flex-shrink: 0;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.03);
  position: relative;
  z-index: 5;
}

.modal-action-btn {
  width: 100%;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--radius-pill);
}

.modal-no-link-badge {
  width: 100%;
  text-align: center;
  padding: 10px 16px;
  background: #F4F1EA;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* Responsive Layout: Mobile & Tablet View Full Height, Full Width Tanpa Rounded */
@media (max-width: 1024px) {
  .modal-root {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .modal-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0 !important;
    border: none;
    box-shadow: none;
    transform: translateY(20px);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .modal-root.is-open .modal-dialog {
    transform: translateY(0);
  }

  .modal-body {
    max-height: 100% !important;
    height: 100%;
    flex: 1;
  }

  .modal-dialog-header {
    border-radius: 0 !important;
    padding: 20px 60px 14px 24px;
    padding-top: max(18px, env(safe-area-inset-top, 18px));
  }

  .modal-dialog-scroll-body {
    padding: 20px 24px 28px;
  }

  .modal-dialog-footer {
    border-radius: 0 !important;
    padding: 14px 24px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
  }

  .modal-close-btn {
    top: max(16px, env(safe-area-inset-top, 16px));
    right: 16px;
  }
}

@media (max-width: 640px) {
  .modal-dialog-header {
    padding: 18px 52px 14px 18px;
    padding-top: max(16px, env(safe-area-inset-top, 16px));
  }

  .modal-title {
    font-size: 1.45rem;
  }

  .modal-dialog-scroll-body {
    padding: 16px 18px 24px;
  }

  .modal-dialog-footer {
    padding: 12px 18px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }

  .modal-sections-grid {
    grid-template-columns: 1fr;
  }
}

/* ==============================================================================
   HORIZONTAL SCROLLABLE PROJECT GALLERY (1 Row Horizontal Scroll)
   ============================================================================== */
.modal-gallery-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: -4px;
}

.modal-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-gallery-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-gallery-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-rust);
}

.modal-gallery-heading {
  font-family: var(--font-serif);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.modal-gallery-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-rust);
  background: #FDF2F0;
  border: 1px solid #F8D7DA;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.modal-gallery-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-gallery-hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-muted);
  user-select: none;
}

.gallery-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: #FFFFFF;
  color: var(--color-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.gallery-nav-btn:hover {
  background: #F4F1EA;
  color: var(--color-ink);
  border-color: var(--color-rust);
  transform: scale(1.05);
}

/* 1 Baris Horizontal Scroll Track */
.modal-gallery-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  gap: 14px;
  padding: 4px 2px 10px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(158, 58, 43, 0.35) rgba(28, 25, 23, 0.05);
}

.modal-gallery-track::-webkit-scrollbar {
  height: 6px;
}

.modal-gallery-track::-webkit-scrollbar-track {
  background: rgba(28, 25, 23, 0.05);
  border-radius: var(--radius-pill);
}

.modal-gallery-track::-webkit-scrollbar-thumb {
  background: rgba(158, 58, 43, 0.35);
  border-radius: var(--radius-pill);
  transition: background 0.2s ease;
}

.modal-gallery-track::-webkit-scrollbar-thumb:hover {
  background: var(--color-rust);
}

/* Kartu Galeri Gambar */
.modal-gallery-card {
  flex: 0 0 310px;
  min-width: 310px;
  max-width: 310px;
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.modal-gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(28, 25, 23, 0.08);
  border-color: rgba(158, 58, 43, 0.35);
}

.modal-gallery-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #F4F1EA;
  overflow: hidden;
}

.modal-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-gallery-card:hover .modal-gallery-img {
  transform: scale(1.04);
}

.modal-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal-gallery-card:hover .modal-gallery-overlay {
  opacity: 1;
}

.modal-gallery-zoom-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFFFFF;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-gallery-number-pill {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(24, 24, 27, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.modal-gallery-info {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.modal-gallery-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-rust);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.modal-gallery-card-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.25;
}

.modal-gallery-card-desc {
  font-size: 0.78rem;
  color: var(--color-body);
  line-height: 1.45;
}

/* ==============================================================================
   IMAGE LIGHTBOX PREVIEW MODAL
   ============================================================================== */
.gallery-lightbox-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gallery-lightbox-root.is-open {
  opacity: 1;
  visibility: visible;
}

.gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 15, 14, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.gallery-lightbox-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 980px;
  max-height: 90vh;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-lightbox-root.is-open .gallery-lightbox-dialog {
  transform: scale(1);
}

.gallery-lightbox-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-subtle);
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.gallery-lightbox-close-btn:hover {
  background: #FFFFFF;
  transform: scale(1.08);
}

.gallery-lightbox-nav-btn {
  position: absolute;
  top: 45%;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-subtle);
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.gallery-lightbox-nav-btn.prev {
  left: 16px;
}

.gallery-lightbox-nav-btn.next {
  right: 16px;
}

.gallery-lightbox-nav-btn:hover {
  background: #FFFFFF;
  transform: scale(1.08);
}

.gallery-lightbox-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.gallery-lightbox-media-wrap {
  width: 100%;
  background: #18181B;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 68vh;
  min-height: 280px;
  overflow: hidden;
}

.gallery-lightbox-img {
  width: 100%;
  height: auto;
  max-height: 68vh;
  object-fit: contain;
  display: block;
}

.gallery-lightbox-caption-bar {
  padding: 16px 24px;
  background: #FDFBF7;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gallery-lightbox-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.gallery-lightbox-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-rust);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gallery-lightbox-counter {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
  background: #F4F1EA;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.gallery-lightbox-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.25;
}

.gallery-lightbox-desc {
  font-size: 0.86rem;
  color: var(--color-body);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .modal-gallery-card {
    flex: 0 0 82%;
    min-width: 250px;
    max-width: 82%;
  }

  .gallery-lightbox-root {
    padding: 0;
  }

  .gallery-lightbox-dialog {
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .gallery-lightbox-media-wrap {
    max-height: 60vh;
  }

  .gallery-lightbox-nav-btn {
    width: 36px;
    height: 36px;
    top: auto;
    bottom: 90px;
  }

  .gallery-lightbox-nav-btn.prev {
    left: 14px;
  }

  .gallery-lightbox-nav-btn.next {
    right: 14px;
  }
}