/* ==========================================================================
   rizkybayuu.github.io - Overview Stylesheet
   Fonts: Atkinson Hyperlegible (UI) & JetBrains Mono (Technical/Title)
   ========================================================================== */

:root {
  --font-ui: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --color-text-main: #ffffff;
  --color-text-dim: rgba(255, 255, 255, 0.85);
  --color-text-sub: rgba(255, 255, 255, 0.70);
  --mx: 50%;
  --my: 50%;

  /* Linear, unconstrained rem typography scale - strictly zero clamp, zero threshold */
  --scale-title: 3.85rem;
  --scale-welcome: calc(var(--scale-title) * 0.45);
  --scale-sub: calc(var(--scale-title) * 0.28);
  --scale-gap: calc(var(--scale-title) * 0.12);
  --sub-motion-distance: calc(var(--scale-sub) * 1.6);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(56, 189, 248, 0.45);
  color: #ffffff;
}

button,
.nav-link,
.nav-back-btn,
.constellation-node,
.constellation-svg {
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000000;
  color: var(--color-text-main);
  font-family: var(--font-ui);
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --- Background Layers: Awalnya Hitam Murni, Memudar ke Biru Langit Siang --- */
#bg-base {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 0;
}

#bg-sky {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 2.8s cubic-bezier(0.25, 1, 0.5, 1);
  /* Base Layer: Langit Siang Cerah (Crisp Azure Daylight) */
  background:
    radial-gradient(ellipse 135% 95% at calc(100% - var(--mx, 50%) * 0.45) calc(100% - var(--my, 50%) * 0.35), 
      rgba(95, 190, 255, 0.28) 0%, 
      rgba(30, 95, 190, 0.16) 46%, 
      rgba(8, 28, 70, 0.06) 76%,
      transparent 100%),
    linear-gradient(180deg,
      #05152a 0%,    /* Zenith: Biru pekat atas */
      #0a2244 18%,   /* Deep navy */
      #103668 38%,   /* Biru kobalt siang */
      #184e90 58%,   /* Biru siang cerah */
      #246abd 76%,   /* Biru cerulean */
      #3582db 88%,   /* Biru langit lembut */
      #4a9bec 100%   /* Horizon siang terang (bukan putih, teks putih tetap kontras) */
    );
}

#bg-sky.active {
  opacity: 1;
}

/* Layer Pagi Hari: Semburat Hangat Kuning Keemasan Pagi (Morning Dawn & Soft Diffused Sun Glow) */
#bg-sky::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  background:
    /* Semburan lembut mentari fajar di bawah horizon (luas & memudar halus) */
    radial-gradient(ellipse 160% 85% at calc(58% - var(--mx, 50%) * 0.2) 112%, 
      rgba(251, 191, 36, 0.22) 0%, 
      rgba(245, 158, 11, 0.16) 28%, 
      rgba(217, 119, 6, 0.08) 52%, 
      rgba(14, 49, 86, 0.02) 74%, 
      transparent 90%),
    /* Gradasi difus halus vertikal tanpa batas strip padat */
    linear-gradient(180deg,
      #061426 0%,    /* Zenith: Biru fajar pekat */
      #09203a 20%,   /* Biru fajar teduh */
      #0e3156 38%,   /* Fajar transisi */
      #16446a 52%,   /* Biru pagi sejuk */
      #1f5778 64%,   /* Teal fajar tenang */
      #2f6c82 74%,   /* Semburat fajar lembut */
      #487e86 82%,   /* Sinar pagi membaur */
      #6e8c7c 88%,   /* Kabut fajar hangat */
      #969868 93%,   /* Kuning emas fajar terdistribusi lembut */
      #bfa354 97%,   /* Emas pagi hangat terdispersi */
      #d4a242 100%   /* Horizon pagi hangat alami (tanpa blok warna padat) */
    );
}

/* Layer Sore Hari: Semburat Oranye Khas Senja / Sore Hari (Vibrant Sunset Dusk & Twilight Violet) */
#bg-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  background:
    /* Semburan hangat mentari senja terbenam di bawah horizon (luas & memudar halus) */
    radial-gradient(ellipse 160% 85% at calc(42% + var(--mx, 50%) * 0.2) 112%, 
      rgba(249, 115, 22, 0.26) 0%, 
      rgba(234, 88, 12, 0.18) 30%, 
      rgba(194, 65, 12, 0.09) 54%, 
      rgba(31, 20, 72, 0.02) 76%, 
      transparent 90%),
    /* Gradasi difus halus senja vertikal */
    linear-gradient(180deg,
      #06081c 0%,    /* Zenith: Indigo pekat senja */
      #0e1032 20%,   /* Deep twilight violet */
      #181846 38%,   /* Ungu senja teduh */
      #251c58 52%,   /* Amethyst dusk */
      #382062 64%,   /* Lembayung senja */
      #522360 74%,   /* Rose twilight */
      #6f2858 82%,   /* Merah delima senja */
      #8c324c 88%,   /* Terakota senja membaur */
      #ad433c 93%,   /* Oranye senja memudar lembut */
      #c6572e 97%,   /* Hangat senja terdispersi */
      #d46326 100%   /* Horizon senja oranye hangat alami */
    );
}

#bg-sky.active::before {
  animation: skyCycleMorning 32s ease-in-out infinite;
}

#bg-sky.active::after {
  animation: skyCycleEvening 32s ease-in-out infinite;
}

/* Siklus Langit: Pagi (Kuning Emas Lembut) -> Siang (Biru Cerah) -> Sore (Oranye Senja) -> Kembali Pagi */
@keyframes skyCycleMorning {
  0%, 18% {
    opacity: 0.92; /* Pagi Hari: Kuning keemasan terbit fajar menyatu lembut dengan biru */
  }
  34%, 82% {
    opacity: 0; /* Siang & Sore: Memudar halus */
  }
  94%, 100% {
    opacity: 0.92; /* Menjelang Pagi: Fajar menyingsing kembali */
  }
}

@keyframes skyCycleEvening {
  0%, 50% {
    opacity: 0; /* Pagi & Siang: Tidak tampil */
  }
  66%, 82% {
    opacity: 0.92; /* Sore Hari: Oranye senja membaur hangat */
  }
  92%, 100% {
    opacity: 0; /* Malam & Pagi: Memudar kembali */
  }
}

@media (prefers-reduced-motion: reduce) {
  #bg-sky.active::before,
  #bg-sky.active::after {
    animation: none;
    opacity: 0;
  }
}

/* White Horizontal Parallax Small Clouds Container */
#bg-clouds {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2.2s ease-in;
}

#bg-clouds.active {
  opacity: 1;
}

.small-cloud {
  position: absolute;
  left: 0;
  pointer-events: none;
  will-change: transform;
  animation: cloudFloatHorizontal linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: blur(0.8px);
}

@keyframes cloudFloatHorizontal {
  0% {
    transform: translate3d(-260px, 0, 0);
  }
  100% {
    transform: translate3d(calc(100vw + 260px), 0, 0);
  }
}

/* --- Centered App Viewport --- */
#app {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

/* Navigation - Fixed top, minimal, transparent */
.site-nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: auto;
  padding: 0.9rem 2rem;
}

.nav-list {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease, text-shadow 0.3s ease;
  opacity: 0.7;
  position: relative;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text-main);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nav-link:hover {
  color: var(--color-text-main);
  opacity: 1;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-link.active {
  color: var(--color-text-main);
  opacity: 1;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.75), 0 0 14px rgba(255, 255, 255, 0.45);
}

.nav-link.active::after {
  transform: scaleX(1);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 14px rgba(255, 255, 255, 0.5);
}

/* Back button in nav - centered when active */
.nav-back-btn {
  display: none;
  font-family: var(--font-ui);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease, text-shadow 0.3s ease;
  opacity: 0.7;
  padding: 0;
  white-space: nowrap;
}

.nav-back-btn:hover {
  color: var(--color-text-main);
  opacity: 1;
}

/* Mode swap: hide 4 links, show back button centered */
.site-nav.nav-back-mode {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-nav.nav-back-mode .nav-list {
  display: none;
}

.site-nav.nav-back-mode .nav-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}

/* Responsive & Touch Treatment for Mobile / Android */
@media (max-width: 600px) {
  .site-nav {
    padding: 0.75rem 0.5rem;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .nav-list {
    gap: clamp(0.75rem, 3.5vw, 1.25rem);
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .nav-link {
    font-size: clamp(0.82rem, 2.5vw, 0.92rem);
    letter-spacing: 0.05em;
    padding: 0.35rem 0.2rem;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-back-btn {
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.5rem;
    margin: 0 auto;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Touch feedback for touchscreen/Android devices */
@media (hover: none) and (pointer: coarse) {
  .nav-link:active,
  .nav-back-btn:active,
  .home-credit-capsule:active {
    opacity: 1;
    transform: scale(0.96);
  }

  .home-credit-capsule:active {
    background: rgba(56, 189, 248, 0.20);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
  }
}

/* --- View System --- */
.view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.4s cubic-bezier(0,0,0.2,1), transform 0.4s cubic-bezier(0,0,0.2,1), visibility 0.4s;
  pointer-events: none;
  box-sizing: border-box;
}

.view.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 10;
}

.view.leaving {
  display: flex;
  opacity: 0;
  visibility: visible;
  transform: translateY(-28px);
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.4,0,1,1), transform 0.32s cubic-bezier(0.4,0,1,1);
}



#hero-view {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Content Card */
.content-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 60rem;
  padding: 0 1.5rem;
  gap: var(--scale-gap); /* Proportional lockup gap - scales purely with rem */
}

/* Fixed text slots to prevent any vertical or horizontal layout shifts */
.text-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  position: relative;
}

.line-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Type Caret Indicator (Sleek straight line bar, perfectly centered, blinks independently) */
.type-caret {
  display: inline-block;
  border-radius: 2px;
  background-color: var(--color-text-main);
  animation: caret-pulse 0.85s steps(2, start) infinite;
}

@keyframes caret-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Slot 1: Welcome */
.slot-welcome {
  height: calc(var(--scale-welcome) * 1.35);
}

#text-welcome {
  font-family: var(--font-ui);
  font-size: var(--scale-welcome);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--color-text-dim);
  white-space: pre;
  text-shadow: 0 2px 10px rgba(4, 18, 48, 0.7);
}

#caret-welcome {
  height: calc(var(--scale-welcome) * 0.95);
  width: calc(var(--scale-welcome) * 0.08);
  margin-left: calc(var(--scale-welcome) * 0.2);
}

/* Slot 2: Main Title (as-slabar.com) */
.slot-title {
  height: calc(var(--scale-title) * 1.25);
}

#text-title {
  font-family: var(--font-mono);
  font-size: var(--scale-title);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-main);
  white-space: pre;
  display: inline-block;
  text-shadow: 0 4px 22px rgba(4, 18, 48, 0.85), 0 0 18px rgba(255, 255, 255, 0.4);
}

#caret-title {
  height: calc(var(--scale-title) * 0.92);
  width: calc(var(--scale-title) * 0.06);
  margin-left: calc(var(--scale-title) * 0.12);
}

/* Slot 3: Subtitle (animates down-to-up into center, and center-to-up when leaving, uncropped) */
.slot-sub {
  height: calc(var(--scale-sub) * 1.45);
  overflow: visible; /* no clipping so animation glides freely without cropping */
}

#text-sub {
  font-family: var(--font-ui);
  font-size: var(--scale-sub);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-sub);
  white-space: pre;
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--sub-motion-distance));
  text-shadow: 0 2px 10px rgba(4, 18, 48, 0.65);
}

#text-sub.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.75s ease-out, transform 0.75s ease-out; /* Cepat/tajam masuk, perlahan berhenti */
}

#text-sub.leaving {
  opacity: 0;
  transform: translateY(calc(-1 * var(--sub-motion-distance)));
  transition: opacity 0.42s ease-in, transform 0.42s ease-in; /* Perlahan di awal, tajam menghilang */
}

/* Responsive Hero Typography for Mobile / Android */
@media (max-width: 768px) {
  :root {
    --scale-title: clamp(1.55rem, 6.8vw, 2.75rem);
    --scale-welcome: calc(var(--scale-title) * 0.48);
    --scale-sub: calc(var(--scale-title) * 0.35);
    --scale-gap: calc(var(--scale-title) * 0.2);
    --sub-motion-distance: calc(var(--scale-sub) * 1.6);
  }

  .content-card {
    padding: 0 1rem;
  }
}

/* --- Click Ripple Interactions --- */
.click-ripple {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-wave 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.click-ripple.left {
  background: radial-gradient(circle, rgba(255, 185, 95, 0.45) 0%, rgba(230, 90, 60, 0.2) 40%, transparent 75%);
  border: 1px solid rgba(255, 200, 130, 0.35);
}

.click-ripple.right {
  background: radial-gradient(circle, rgba(185, 130, 255, 0.45) 0%, rgba(100, 70, 220, 0.2) 40%, transparent 75%);
  border: 1px solid rgba(200, 160, 255, 0.35);
}

@keyframes ripple-wave {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.5);
    opacity: 0;
  }
}

@keyframes meteorFall {
  0% {
    transform: translate3d(0, 0, 0) rotate(45deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translate3d(calc(-100vh - 420px), calc(100vh + 420px), 0) rotate(45deg);
    opacity: 0;
  }
}

/* --- Content Views (Locked Fullscreen, Zero Scroll) --- */
#profile-view,
#katalog-view,
#lokasi-view,
#kontak-view,
#work-view,
#skills-view,
#connect-view,
#hire-view {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem 1.5rem;
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  #profile-view,
  #katalog-view,
  #lokasi-view,
  #kontak-view,
  #work-view,
  #skills-view,
  #connect-view,
  #hire-view {
    padding: 3.2rem 0.5rem 1rem 0.5rem;
  }
}

.work-container {
  position: relative;
  width: 100%;
  max-width: 76rem;
  height: 100%;
  max-height: calc(100vh - 4.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Work Header */
.work-header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.work-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.work-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--color-text-dim);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.work-back-btn:hover {
  color: var(--color-text-main);
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.12);
  transform: translateX(-2px);
}

.work-heading-group {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

.work-heading {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-main);
  margin: 0;
  text-transform: uppercase;
}

.work-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #ff9d66;
  opacity: 0.85;
}

/* ─── Constellation Map ────────────────────────────────────────── */
.constellation-map {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.02) 0%, rgba(10, 5, 18, 0.45) 70%, transparent 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.55);
}

.constellation-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  will-change: opacity;
  transform: translateZ(0);
}

.constellation-line {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
  transition: stroke 0.25s ease, stroke-width 0.25s ease, opacity 0.25s ease;
}

.constellation-line.active {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2;
}

/* Constellation Nodes - GPU accelerated & contained */
.constellation-node {
  position: absolute;
  transform: translate(-50%, -50%) translateZ(0);
  cursor: pointer;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;
  contain: layout style;
  transition: opacity 0.3s ease,
              left 0.5s cubic-bezier(0.22, 1, 0.3, 1),
              top 0.5s cubic-bezier(0.22, 1, 0.3, 1);
}

.node-ring {
  width: var(--node-base, 3.1rem);
  height: var(--node-base, 3.1rem);
  border-radius: 50%;
  padding: 2px;
  background: rgba(14, 8, 22, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), inset 0 0 6px rgba(255, 255, 255, 0.3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: width, height, border-radius;
  transform: translateZ(0);
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-radius 0.35s ease,
              border-color 0.25s ease;
}

.node-thumb {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
  filter: brightness(0.95) contrast(1.05);
  transition: filter 0.25s ease, border-radius 0.35s ease;
}

/* Hover focus: the circle itself becomes a rounded rectangle, in place */
.constellation-node.is-hovered {
  z-index: 10;
}

.constellation-node.is-closing {
  pointer-events: none;
}

.constellation-node.is-hovered .node-ring {
  border-radius: 0.9rem;
  border-color: #ffffff;
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.9),
    0 0 32px rgba(255, 255, 255, 0.4),
    inset 0 0 6px rgba(255, 255, 255, 0.35);
}

.constellation-node.is-hovered .node-thumb {
  filter: brightness(1.08) contrast(1.08);
}

/* While one node is focused, the rest of the constellation dims */
.constellation-map.map-hovering .constellation-node:not(.is-hovered) {
  opacity: 0.22;
}

.constellation-map.map-hovering .constellation-svg {
  opacity: 0.2;
}

/* Floating caption — bare text, no wrapper. Position is set inline by
   script.js layout() (left/right/top/bottom/text-align/max-width); CSS only
   owns the base geometry and the hidden → shown fade. */
.node-info {
  position: absolute;
  width: max-content;
  max-width: 25rem;
  text-align: left;
  color: #ffffff;
  font-family: var(--font-ui);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease 0.05s;
}

.node-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.node-desc {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  opacity: 0.88;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* Reveal on hover (CSS hover) and on the open box (.is-hovered). */
.constellation-node:hover .node-info,
.constellation-node.is-hovered .node-info {
  opacity: 1;
}

.constellation-node.is-hovered .node-info {
  pointer-events: auto;
  cursor: pointer;
}

/* =============================================================================
   Category detail submenu — opened by clicking the star under the pointer.
   The constellation fades to nothing first, then this panel enters; on the way
   back the panel leaves first and only then does the constellation return.
   Panel geometry mirrors the map area (position: absolute; inset: 0), so the
   layout underneath never reflows.
   ========================================================================== */
#work-detail {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s ease;
}

body.detail-open #work-detail {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

/* Return trip: the map waits for the panel to get out of the way. */
#work-view .constellation-map {
  transition: opacity 0.4s ease 0.32s, transform 0.5s ease 0.32s;
}

body.detail-open #work-view .constellation-map {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
  transition-delay: 0s, 0s;
}

.wd-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wd-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 157, 102, 0.45);
  background: rgba(255, 157, 102, 0.08);
  color: #ffd9c2;
  font: 600 0.95rem/1 var(--font-ui, sans-serif);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.wd-back:hover {
  background: rgba(255, 157, 102, 0.2);
  border-color: rgba(255, 157, 102, 0.85);
  transform: translateX(-2px);
}

.wd-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.wd-kicker {
  margin: 0 0 0.45rem;
  font: 700 0.78rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.wd-title {
  margin: 0;
  font-size: 2.35rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.wd-blurb {
  margin: 0.45rem 0 0;
  max-width: 48rem;
  font-size: 1.08rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
}

.wd-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  text-align: right;
}

.wd-count {
  font: 600 0.82rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.wd-hint {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.38);
}

/* Category switcher — jump between stars without going back */
.wd-chips {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.wd-chip {
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.6);
  font: 600 0.82rem/1 var(--font-ui, sans-serif);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.wd-chip:hover {
  color: #fff;
  border-color: var(--accent);
}

.wd-chip[aria-current="true"] {
  color: #12101a;
  background: var(--accent);
  border-color: var(--accent);
}

.wd-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.9rem 0.9rem 2rem 0;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(255, 157, 102, 0.45) transparent;
}

.wd-body::-webkit-scrollbar {
  width: 8px;
}

.wd-body::-webkit-scrollbar-thumb {
  background: rgba(255, 157, 102, 0.4);
  border-radius: 99px;
}

/* --- Per-category arrangements ------------------------------------------- */
.wd-body.layout-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: auto;
}

.wd-body.layout-rail .wd-card {
  flex: 0 0 clamp(168px, 18vw, 224px);
}

.wd-body.layout-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  align-content: start;
}

.wd-body.layout-grid.is-compact {
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.wd-body.layout-tech {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  align-content: start;
  align-items: start;
}

.wd-body.layout-cinema {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-auto-rows: min-content;
  align-content: start;
  align-items: start;
}

.wd-body.layout-cinema .wd-card:not(:first-child) {
  grid-column: 2;
}

.wd-body.layout-audio {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-content: start;
  align-items: start;
}

/* --- Cards --------------------------------------------------------------- */
.wd-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(10, 5, 18, 0.42));
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.wd-card.playable {
  cursor: pointer;
}

.wd-card.playable:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.wd-card.open {
  border-color: var(--accent);
}

.wd-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(12, 6, 20, 0.6));
}

.shape-vertical .wd-media { aspect-ratio: 9 / 16; }
.shape-portrait .wd-media { aspect-ratio: 4 / 5; }
.shape-square .wd-media { aspect-ratio: 1 / 1; }
.shape-poster .wd-media { aspect-ratio: 2 / 3; }
.shape-wide .wd-media { aspect-ratio: 16 / 9; }

.wd-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wd-card.open .wd-thumb,
.wd-card.open .wd-plate {
  visibility: hidden;
}

/* Plate art stands in for the pieces whose source platform cannot be
   thumbnailed (Instagram / TikTok): the category's own Drive thumbnail, dimmed,
   plus the platform initials — never a broken image icon. */
.wd-plate {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background-image: var(--plate-img, none);
  background-size: cover;
  background-position: center;
}

.wd-card.no-thumb .wd-plate {
  display: flex;
}

.wd-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 4, 14, 0.55), rgba(8, 4, 14, 0.92));
}

.wd-glyph {
  position: relative;
  font: 700 1.5rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 0 22px rgba(0, 0, 0, 0.8);
}

.wd-num {
  position: absolute;
  right: 0.6rem;
  bottom: 0.5rem;
  font: 700 0.66rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.wd-embed {
  position: absolute;
  inset: 0;
  display: none;
  background: #06030b;
}

.wd-card.open .wd-embed {
  display: block;
}

.wd-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.wd-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem 0.9rem;
}

.wd-p {
  align-self: flex-start;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  font: 700 0.6rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wd-p[data-p="instagram"] { border-color: rgba(224, 140, 255, 0.5); color: #e8c0ff; }
.wd-p[data-p="tiktok"]    { border-color: rgba(127, 209, 255, 0.45); color: #c4e8ff; }
.wd-p[data-p="drive"]     { border-color: rgba(255, 196, 107, 0.45); color: #ffdfb0; }
.wd-p[data-p="soundcloud"]{ border-color: rgba(255, 143, 177, 0.5); color: #ffc6d8; }
.wd-p[data-p="github"]    { border-color: rgba(255, 255, 255, 0.32); color: #ffffff; }
.wd-p[data-p="doc"]       { border-color: rgba(154, 166, 255, 0.5); color: #d2d8ff; }
.wd-p[data-p="blendkit"]  { border-color: rgba(192, 123, 255, 0.5); color: #e0c4ff; }
.wd-p[data-p="web"]       { border-color: rgba(255, 157, 102, 0.5); color: #ffd6bb; }

.wd-t {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.wd-d {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.wd-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.2rem;
}

.wd-act {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.48rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
  font: 600 0.85rem/1 var(--font-ui, sans-serif);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.wd-act:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
  color: #fff;
}

.wd-act.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #12101a;
}

.wd-act.primary:hover {
  color: #12101a;
  box-shadow: 0 0 18px var(--accent);
}

.wd-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  padding: 0 0.3rem 0.3rem;
}

.wd-strip img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0.78;
  transition: opacity 0.25s ease;
}

.wd-strip a:hover img {
  opacity: 1;
}

/* Published-asset list (Procedural Modeling) */
.wd-assets {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.wd-asset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.82rem;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.wd-asset:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
}

.wd-asset .n {
  font: 700 0.66rem/1 ui-monospace, SFMono-Regular, monospace;
  color: var(--accent);
}

@media (max-width: 900px) {
  .wd-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .wd-title {
    font-size: 1.55rem;
  }

  .wd-body.layout-cinema {
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-body.layout-cinema .wd-card:not(:first-child) {
    grid-column: 1;
  }
}

/* Show nav bar with fade-in */
.nav-bar-visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s ease-in 0.2s;
}

/* ==========================================================================
   Instagram Gallery — "3D Motion Graphics" detail view
   The five embeds and nothing else: no panel, no kicker, no titles, no chips.
   1 large centre embed, 2 stacked on each side. Everything is vh-clamped so
   the whole composition — sides 84vh, centre 86vh — always fits the screen:
   no page scroll, no scrolling inside any embed.
   ========================================================================== */
#work-detail.ig-clean {
  padding: 0;
}

/* Hide all head elements (including back button in corner) */
#work-detail.ig-clean .wd-head,
#work-detail .wd-head {
  display: none !important;
}

#work-detail.ig-clean .wd-titles,
#work-detail .wd-titles {
  display: none !important;
}

.wd-body.layout-instagram-gallery {
  --ig-gap: clamp(14px, 2.2vh, 26px);
  /* side column: two embeds + gap must stay inside 84vh; ratio 4:5 */
  --ig-side-w: min(226px, calc((84vh - 124px - var(--ig-gap)) * 4 / 20));
  /* centre embed stays clear of top/bottom edges: 86vh budget; ratio 4:5 */
  --ig-center-w: min(432px, calc((86vh - 64px) * 4 / 5));
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: var(--ig-gap);
  row-gap: var(--ig-gap);
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  padding: 0;
  scrollbar-gutter: auto;
}

.wd-body.layout-instagram-gallery .wd-item {
  width: auto;
  min-width: 0;
  max-width: none;
}

/* 2 left • 1 centre (spans both rows) • 2 right */
.wd-body.layout-instagram-gallery .wd-item:nth-child(1) { grid-area: 1 / 1; }
.wd-body.layout-instagram-gallery .wd-item:nth-child(2) { grid-area: 2 / 1; }
.wd-body.layout-instagram-gallery .wd-item:nth-child(3) { grid-area: 1 / 2 / span 2 / span 1; }
.wd-body.layout-instagram-gallery .wd-item:nth-child(4) { grid-area: 1 / 3; }
.wd-body.layout-instagram-gallery .wd-item:nth-child(5) { grid-area: 2 / 3; }

.wd-body.layout-instagram-gallery .wd-embed-wrap {
  border: none;
  border-radius: 14px;
  box-shadow: none;
  background: #000;
  min-height: 0;
  overflow: hidden; /* Crop Instagram chrome */
  position: relative;
}

.wd-body.layout-instagram-gallery .wd-embed-frame {
  position: absolute;
  top: -58px; /* Hide Instagram header (logo/username) */
  left: 0;
  width: 100%;
  height: calc(100% + 128px); /* Extend to also hide footer (like/comment/share) */
  border: none;
}

/* 9:16 media + the embed's top strip (~62px) = exact fit, zero scroll */
.wd-body.layout-instagram-gallery .wd-item:not(:nth-child(3)) .wd-embed-wrap {
  width: var(--ig-side-w);
  height: calc(var(--ig-side-w) * 16 / 9); /* Pure video ratio */
}

.wd-body.layout-instagram-gallery .wd-item:nth-child(3) .wd-embed-wrap {
  width: var(--ig-center-w);
  height: calc(var(--ig-center-w) * 16 / 9); /* Pure video ratio */
}

/* Nothing lifts or glows here; the embeds just sit there. */
.wd-body.layout-instagram-gallery .wd-item:hover .wd-embed-wrap,
.wd-body.layout-instagram-gallery .wd-item.wd-naked:hover .wd-embed-wrap {
  transform: none;
  border: none;
  box-shadow: none;
}

/* ==========================================================================
   Instagram Gallery · 16:9 — "VFX & Dynamics" detail view
   Same treatment as the 4:5 gallery above: bare embeds, no panel, no Instagram
   chrome, title + description under each, no page scroll, no scrolling inside
   any embed. Only two things differ:
     · left · centre · right — one landscape window per column (3 items),
       centre is 1.55x a side, the row is vertically centred in the viewport;
     · the window is a hard 16:9 crop.
   Widths come from fr tracks, so the three columns always fill the container
   exactly (never overflow) and the 16:9 height follows from the width.
   ========================================================================== */
.wd-body.layout-instagram-gallery-wide {
  --ig-budget: calc(100vh - 90px);
  --ig-info-h: 78px; /* title + description block reserve */
  --ig-gap: clamp(20px, 3.4vh, 48px);
  /* Instagram's own embed chrome, measured from the live iframe DOM (54/154px)
     and kept in rem so it tracks the page's rem scale. */
  --ig-head: 3.375rem;  /* 54px  — logo / username bar */
  --ig-foot: 9.625rem;  /* 154px — caption, action bar, comment box */
  --ig-crop-b: 0.5rem;  /* 8px — rounding guard only, NOT a design crop */
  display: grid;
  /* left · centre · right. centre = 1.55x side (the --ig-ratio of the 4:5
     gallery); fr units must be literal numbers, so the knob lives here. */
  grid-template-columns: 1fr 1.55fr 1fr;
  column-gap: var(--ig-gap);
  row-gap: var(--ig-gap);
  align-content: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0;
  scrollbar-gutter: auto;
}

/* stretch to the track so the wraps get a definite width to take 16:9 from */
.wd-body.layout-instagram-gallery-wide .wd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.wd-body.layout-instagram-gallery-wide .wd-embed-wrap {
  width: 100%;
  aspect-ratio: 16 / 9; /* the landscape window itself */
  border: none;
  border-radius: 14px;
  box-shadow: none;
  background: #000;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  position: relative;
}

.wd-body.layout-instagram-gallery-wide .wd-embed-frame {
  position: absolute;
  left: 0;
  width: 100%;
  border: none;
}

/* Instagram source: the emᴃed renders a fixed 4:5 media box (measured, 54px
   header + width*1.25 media + 154px footer) inside a 16:9 window. To show the
   centred band of that media with no chrome:
     overflow to hide above+below the window = (1.25W − 0.5625W) / 2 = 0.34375W
     0.34375W as a % of the window height (0.5625W) = 61.11%
     iframe height must cover the whole document: (1.25W + 208px) / 0.5625W
     = 222.3% + 54px + 154px, so the page inside never scrolls either. */
.wd-body.layout-instagram-gallery-wide .wd-item.p-instagram .wd-embed-frame {
  top: calc(-1 * var(--ig-head) - 61.11%);
  height: calc(222.3% + var(--ig-head) + var(--ig-foot));
}

/* TikTok's player sizes the video itself inside the box it is given, and its
   embed endpoint refuses this network (HTTP 503), so its inner geometry could
   not be measured — it gets the bare 16:9 box and no invented crop. */
.wd-body.layout-instagram-gallery-wide .wd-item.p-tiktok .wd-embed-frame {
  top: 0;
  height: 100%;
}

/* Item descriptions below embed — title + description, same scale as the 4:5
   gallery. */
.wd-body.layout-instagram-gallery-wide .wd-item-info {
  display: block;
  padding: 0;
  margin-top: 0.6rem;
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.wd-body.layout-instagram-gallery-wide .wd-item-info h3 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 0 0 0.25rem 0;
  line-height: 1.25;
}

.wd-body.layout-instagram-gallery-wide .wd-item-info p {
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--color-text-dim);
  margin: 0;
}

.wd-body.layout-instagram-gallery-wide .wd-item:hover .wd-embed-wrap,
.wd-body.layout-instagram-gallery-wide .wd-item.wd-naked:hover .wd-embed-wrap {
  transform: none;
  border: none;
  box-shadow: none;
}

/* Small screens: three landscape windows side by side would be unreadable, so
   they stack full width and the body scrolls instead of cropping. */
@media (max-width: 900px) {
  .wd-body.layout-instagram-gallery-wide {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    overflow-y: auto;
  }
}


/* ==========================================================================
   BARE FAMILY — one naked treatment for every non-reference detail layout.
   No panel, no "n pieces", no rounded rectangle. Each item's window follows
   its own --aspect (set inline from catalog.js); tall media never hard-crops
   because the viewport scrolls naturally. Captions float bare underneath.
   ========================================================================== */
.wd-body.layout-instagram-gallery-uniform,
.wd-body.layout-mixed-procedural,
.wd-body.layout-audio-bare,
.wd-body.layout-tech-bare,
.wd-body.layout-design-bare,
.wd-body.layout-video-bare {
  --bare-h: clamp(16rem, 44vh, 27rem);      /* media height budget */
  --bare-gap: clamp(1.5rem, 4vh, 3.2rem);
  /* Instagram embed chrome, measured from the live iframe DOM (rem-scaled). */
  --ig-head: 3.375rem;  /* 54px logo/username bar */
  --ig-foot: 9.625rem;  /* 154px caption/actions/comment box */
  --ig-crop-b: 0.5rem;  /* 8px rounding guard, not a design crop */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: var(--bare-gap);
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(1rem, 3vh, 2.4rem) clamp(0.5rem, 1.5vw, 2rem) 2.4rem;
}

.wd-body.layout-instagram-gallery-uniform .wd-item,
.wd-body.layout-mixed-procedural .wd-item,
.wd-body.layout-audio-bare .wd-item,
.wd-body.layout-tech-bare .wd-item,
.wd-body.layout-design-bare .wd-item,
.wd-body.layout-video-bare .wd-item {
  --ia: var(--aspect, 4 / 5);
  width: clamp(var(--min-w, 240px), calc(var(--bare-h) * var(--ia)), min(92vw, 36rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: none;
}

.wd-body.layout-instagram-gallery-uniform .wd-embed-wrap,
.wd-body.layout-mixed-procedural .wd-embed-wrap,
.wd-body.layout-audio-bare .wd-embed-wrap,
.wd-body.layout-tech-bare .wd-embed-wrap,
.wd-body.layout-design-bare .wd-embed-wrap,
.wd-body.layout-video-bare .wd-embed-wrap {
  width: 100%;
  height: auto;                 /* inherited definite height vetoes aspect-ratio */
  aspect-ratio: var(--aspect, 4 / 5);
  border: none;
  border-radius: 14px;
  box-shadow: none;
  background: #000;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  position: relative;
}

.wd-body.layout-instagram-gallery-uniform .wd-embed-frame,
.wd-body.layout-mixed-procedural .wd-embed-frame,
.wd-body.layout-audio-bare .wd-embed-frame,
.wd-body.layout-tech-bare .wd-embed-frame,
.wd-body.layout-design-bare .wd-embed-frame,
.wd-body.layout-video-bare .wd-embed-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Trim Instagram's own chrome (logo bar + action row) so the media sits
   edge-to-edge. Scrolling is left enabled, so a mismatched ratio degrades
   to an internal scrollbar instead of silently cropping content. */
.wd-body.layout-instagram-gallery-uniform .wd-item.p-instagram .wd-embed-frame,
.wd-body.layout-mixed-procedural .wd-item.p-instagram .wd-embed-frame,
.wd-body.layout-audio-bare .wd-item.p-instagram .wd-embed-frame,
.wd-body.layout-tech-bare .wd-item.p-instagram .wd-embed-frame,
.wd-body.layout-design-bare .wd-item.p-instagram .wd-embed-frame,
.wd-body.layout-video-bare .wd-item.p-instagram .wd-embed-frame {
  top: calc(-1 * var(--ig-head));
  height: calc(100% + var(--ig-head) + var(--ig-foot) + var(--ig-crop-b));
}

/* Force-fill (opt-in `fill` in catalog.js): Instagram paints the post's media
   at its native ratio and never crops it, so pointing a taller window at a
   shorter media can only ever letterbox it. --ig-fill = media aspect / window
   aspect (0.8 / 0.5625 = 1.4222 for a 4:5 post in a 9:16 window) + a 2% guard;
   the iframe is that much wider than the window and pulled back by half the
   overflow, so the media overflows on BOTH axes and the window shows its
   centred crop. The header trim above still applies, so the media starts flush
   at the window top. scrolling="no" (set in script.js) drops the embed's own
   scrollbar, which would otherwise thin the media by ~15px. */
.wd-body.layout-instagram-gallery-uniform .wd-item.fill-ig .wd-embed-frame,
.wd-body.layout-mixed-procedural .wd-item.fill-ig .wd-embed-frame,
.wd-body.layout-audio-bare .wd-item.fill-ig .wd-embed-frame,
.wd-body.layout-tech-bare .wd-item.fill-ig .wd-embed-frame,
.wd-body.layout-design-bare .wd-item.fill-ig .wd-embed-frame,
.wd-body.layout-video-bare .wd-item.fill-ig .wd-embed-frame {
  width: calc(var(--ig-fill, 1.45) * 100%);
  left: calc((1 - var(--ig-fill, 1.45)) * 50%);
}

/* Captions: bigger, floating, centred — no card, no border. */
.wd-body.layout-instagram-gallery-uniform .wd-item-info,
.wd-body.layout-mixed-procedural .wd-item-info,
.wd-body.layout-audio-bare .wd-item-info,
.wd-body.layout-tech-bare .wd-item-info,
.wd-body.layout-design-bare .wd-item-info,
.wd-body.layout-video-bare .wd-item-info {
  display: block;
  padding: 0;
  margin-top: 0.65rem;
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.wd-body.layout-instagram-gallery-uniform .wd-item-info h3,
.wd-body.layout-mixed-procedural .wd-item-info h3,
.wd-body.layout-audio-bare .wd-item-info h3,
.wd-body.layout-tech-bare .wd-item-info h3,
.wd-body.layout-design-bare .wd-item-info h3,
.wd-body.layout-video-bare .wd-item-info h3 {
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 0 0 0.35rem 0;
  line-height: 1.3;
}

.wd-body.layout-instagram-gallery-uniform .wd-item-info p,
.wd-body.layout-mixed-procedural .wd-item-info p,
.wd-body.layout-audio-bare .wd-item-info p,
.wd-body.layout-tech-bare .wd-item-info p,
.wd-body.layout-design-bare .wd-item-info p,
.wd-body.layout-video-bare .wd-item-info p {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--color-text-dim);
  margin: 0;
}

/* Text-only items (no embed source): naked centred block, no panel. */
.wd-body.layout-mixed-procedural .wd-item.wd-text-card,
.wd-body.layout-audio-bare .wd-item.wd-text-card,
.wd-body.layout-tech-bare .wd-item.wd-text-card,
.wd-body.layout-design-bare .wd-item.wd-text-card,
.wd-body.layout-video-bare .wd-item.wd-text-card {
  width: min(92vw, 34rem);
  text-align: center;
  padding: 0.5rem 0;
}
.wd-body.layout-mixed-procedural .wd-item.wd-text-card .wd-t,
.wd-body.layout-audio-bare .wd-item.wd-text-card .wd-t,
.wd-body.layout-tech-bare .wd-item.wd-text-card .wd-t,
.wd-body.layout-design-bare .wd-item.wd-text-card .wd-t,
.wd-body.layout-video-bare .wd-item.wd-text-card .wd-t {
  font-size: 1.55rem;
}
.wd-body.layout-mixed-procedural .wd-item.wd-text-card .wd-d,
.wd-body.layout-audio-bare .wd-item.wd-text-card .wd-d,
.wd-body.layout-tech-bare .wd-item.wd-text-card .wd-d,
.wd-body.layout-design-bare .wd-item.wd-text-card .wd-d,
.wd-body.layout-video-bare .wd-item.wd-text-card .wd-d {
  font-size: 1.15rem;
  margin: 0.4rem 0 0.9rem;
}
.wd-body.layout-mixed-procedural .wd-item.wd-text-card .wd-act,
.wd-body.layout-audio-bare .wd-item.wd-text-card .wd-act,
.wd-body.layout-tech-bare .wd-item.wd-text-card .wd-act,
.wd-body.layout-design-bare .wd-item.wd-text-card .wd-act,
.wd-body.layout-video-bare .wd-item.wd-text-card .wd-act {
  font-size: 1.05rem;
}
/* Status badge ("Upcoming" / "This site") on text-only cards. */
.wd-body.layout-mixed-procedural .wd-item.wd-text-card .wd-tag,
.wd-body.layout-audio-bare .wd-item.wd-text-card .wd-tag,
.wd-body.layout-tech-bare .wd-item.wd-text-card .wd-tag,
.wd-body.layout-design-bare .wd-item.wd-text-card .wd-tag,
.wd-body.layout-video-bare .wd-item.wd-text-card .wd-tag {
  display: inline-block;
  margin: 0.3rem 0 0.95rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 157, 102, 0.45);
  background: rgba(255, 157, 102, 0.08);
  color: #ffd6bb;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Local media (no remote embed): plain image window. */
.wd-body.layout-mixed-procedural .wd-local-wrap,
.wd-body.layout-audio-bare .wd-local-wrap,
.wd-body.layout-tech-bare .wd-local-wrap,
.wd-body.layout-design-bare .wd-local-wrap,
.wd-body.layout-video-bare .wd-local-wrap {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.wd-body.layout-mixed-procedural .wd-local-img,
.wd-body.layout-audio-bare .wd-local-img,
.wd-body.layout-tech-bare .wd-local-img,
.wd-body.layout-design-bare .wd-local-img,
.wd-body.layout-video-bare .wd-local-img {
  display: block;
  width: 100%;
  aspect-ratio: var(--aspect, 4 / 5);
  object-fit: cover;
}

.wd-local-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.wd-local-link:hover .wd-local-img {
  opacity: 0.92;
  transform: scale(1.015);
}
.wd-local-img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.wd-item-info .wd-acts {
  justify-content: center;
  margin-top: 0.65rem;
}

/* Published-asset links (BlendKit): naked rows, no boxes. */
.wd-body.layout-mixed-procedural .wd-asset-header {
  margin: 0.6rem auto 1rem;
  width: min(92vw, 56rem);
  font-size: 0.95rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.75);
}
.wd-body.layout-mixed-procedural .wd-asset-header strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}

.wd-body.layout-mixed-procedural .wd-assets {
  width: min(92vw, 56rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem 1rem;
  margin: 0.2rem auto 0;
}
.wd-body.layout-mixed-procedural .wd-asset {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.25s ease;
}
.wd-body.layout-mixed-procedural .wd-asset:hover {
  background: transparent;
  border: none;
  color: #fff;
}
.wd-body.layout-mixed-procedural .wd-asset .n {
  color: var(--accent, #c07bff);
  font: 700 0.7rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.14em;
}

/* BlendKit blocks iframing, so each published asset shows the real render
   from their public CDN (square preview) and links out to the live viewer. */
.wd-asset-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.wd-asset-meta {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  width: 100%;
}

.wd-asset-meta > span {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

/* Nothing lifts or glows in the bare family. */
.wd-body.layout-instagram-gallery-uniform .wd-item:hover .wd-embed-wrap,
.wd-body.layout-mixed-procedural .wd-item:hover .wd-embed-wrap,
.wd-body.layout-audio-bare .wd-item:hover .wd-embed-wrap,
.wd-body.layout-tech-bare .wd-item:hover .wd-embed-wrap,
.wd-body.layout-design-bare .wd-item:hover .wd-embed-wrap,
.wd-body.layout-video-bare .wd-item:hover .wd-embed-wrap {
  transform: none;
  border: none;
  box-shadow: none;
}

@media (max-width: 900px) {
  .wd-body.layout-instagram-gallery-uniform,
  .wd-body.layout-mixed-procedural,
  .wd-body.layout-audio-bare,
  .wd-body.layout-tech-bare,
  .wd-body.layout-design-bare,
  .wd-body.layout-video-bare {
    --bare-h: clamp(13rem, 40vh, 20rem);
    gap: clamp(1.2rem, 3vh, 2rem);
    align-content: start;
  }
}

/* ------------------------------------------------------------------
   TikTok embeds — force the player into the 16:9 window.
   TikTok's /embed/v2/ player ONLY renders a fixed portrait card
   (~323x560) and completely ignores how wide its iframe is. So we
   render the iframe at that exact card size, then zoom it so the card
   fills the window width. The 16:9 window therefore shows the centre
   band of the card (cover crop — the video is cropped top/bottom).
   ------------------------------------------------------------------ */
.wd-item.p-tiktok .wd-embed-wrap {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.wd-item.p-tiktok .wd-embed-wrap .wd-embed-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 325px;
  height: 560px;
  margin-left: -162.5px;
  margin-top: -280px;
  border: 0;
  transform: scale(var(--tt-zoom, 1));
  transform-origin: center center;
}

/* ==========================================================================
   SIDE STRIP + STACKED COLUMN (Code & Systems)
   An item with a `strip` carries `wd-has-side`: the extra embeds sit in a
   column BESIDE the main embed, as tall as it is, so every frame keeps 16:9
   while being roughly twice the size it gets in a row underneath. Items
   sharing `col: 'name'` stack top/bottom inside `.wd-col`, which leaves the
   wide strip item the horizontal room it needs.
   ========================================================================== */
.wd-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bare-gap, 2rem);
}

.wd-media-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
}

.wd-body .wd-item.wd-has-side {
  width: auto;
  max-width: none;
}

.wd-body .wd-item.wd-has-side .wd-embed-wrap {
  flex: none;
  width: calc(var(--bare-h, 22rem) * var(--aspect, 9 / 16));
  height: var(--bare-h, 22rem);
  border-radius: 10px;
  overflow: hidden;
}

.wd-body .wd-item.wd-has-side .wd-strip {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: auto;
  height: var(--bare-h, 22rem);
  margin-top: 0;
  gap: 0.5rem;
  padding: 0;
}

.wd-body .wd-item.wd-has-side .wd-strip-cell {
  --side-h: calc((var(--bare-h, 22rem) - 1rem) / 3);
  height: var(--side-h);
  width: calc(var(--side-h) * 16 / 9);
  flex: none;
  aspect-ratio: auto;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(14, 8, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  position: relative;
}

.wd-body .wd-item.wd-has-side .wd-strip-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.wd-body .wd-item.wd-has-side .wd-strip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.88;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease, filter 0.25s ease;
}

.wd-body .wd-item.wd-has-side .wd-strip-link:hover .wd-strip-img {
  opacity: 1;
  transform: scale(1.05);
  filter: brightness(1.12);
}

.wd-body .wd-item.wd-has-side .wd-strip-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.wd-body .wd-item.wd-has-side .wd-item-info {
  width: 100%;
}

@media (max-width: 900px) {
  .wd-body .wd-item.wd-has-side {
    width: 100%;
  }
  .wd-media-row {
    flex-direction: column;
  }
  .wd-body .wd-item.wd-has-side .wd-embed-wrap {
    width: 100%;
  }
  .wd-body .wd-item.wd-has-side .wd-strip {
    flex-direction: row;
    width: 100%;
    height: auto;
  }
  .wd-body .wd-item.wd-has-side .wd-strip-cell {
    height: auto;
    width: auto;
    flex: 1 1 0;
    aspect-ratio: 16 / 9;
  }
}



/* Naked Embeds & Dark Mode Rules */
.wd-item.wd-naked {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.wd-item.wd-naked .wd-embed-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(var(--accent-rgb, 255, 157, 102), 0.12);
}

.wd-embed-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  color-scheme: dark !important;
}

.wd-item-info {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.wd-item-info .wd-t {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}

.wd-item-info .wd-d {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-text-sub);
}


/* Placeholder display area (Skills / Connect / Hire) */

.work-display-area {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.2rem 0.75rem 3.5rem 0.75rem;
  box-sizing: border-box;
}

/* =============================================================================
   Glassmorphism View Content Wrappers (Profil, Kontak, Lokasi)
   Diadopsi 1:1 dari arsitektur wrapper transparan di rizkybayuu.github.io
   ============================================================================= */

.view-overview-content {
  width: 100%;
  max-width: 72rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-sizing: border-box;
}

/* Glass View Header */
.view-hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.view-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-cyan, #38bdf8);
}

.view-hero-title {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.view-hero-blurb {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-text-dim);
  max-width: 44rem;
  margin: 0 auto;
  line-height: 1.45;
}

/* Glass Section Container */
.view-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}

.view-section-kicker {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  padding-left: 0.35rem;
  opacity: 0.85;
}

/* Glassmorphism Panel Wrapper & Cards (Identik dengan .connect-card & .hire-container) */
.glass-panel-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: rgba(4, 16, 36, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35),
              inset 0 0 20px rgba(255, 255, 255, 0.02);
  box-sizing: border-box;
  gap: 1.25rem;
}

.glass-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 1.35rem 1.35rem;
  box-sizing: border-box;
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              backdrop-filter 0.35s ease,
              -webkit-backdrop-filter 0.35s ease,
              transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.glass-card:hover {
  backdrop-filter: brightness(1.35) blur(14px);
  -webkit-backdrop-filter: brightness(1.35) blur(14px);
  background: rgba(56, 189, 248, 0.05);
  border-color: rgba(56, 189, 248, 0.38);
  box-shadow: 0 0 32px rgba(56, 189, 248, 0.22),
              inset 0 0 20px rgba(255, 255, 255, 0.02);
  transform: translateY(-3px);
}

.card-category-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

/* Glass Card Header & Titles */
.glass-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.glass-card-title {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.glass-card-desc {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-text-dim);
  line-height: 1.5;
  margin: 0;
}

/* --- Lokasi Grid & Interactive Map --- */
.lokasi-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 1.4rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .lokasi-grid {
    grid-template-columns: 1fr;
  }
}

.lokasi-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lokasi-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}

.status-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  animation: pulseGreen 2s infinite;
}

.lokasi-store-name {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0.2rem 0 0.15rem 0;
}

.lokasi-motto {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: #38bdf8;
  margin: 0;
  font-style: italic;
}

.lokasi-meta-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.5rem 0;
}

.lokasi-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
}

.meta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  margin-top: 2px;
  flex-shrink: 0;
}

.meta-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.meta-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-dim);
}

.meta-value {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--color-text-main);
  margin: 0;
  line-height: 1.4;
}

.lokasi-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.lokasi-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.lokasi-action-btn.primary-action {
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.15);
}

.lokasi-action-btn.primary-action:hover {
  background: rgba(56, 189, 248, 0.3);
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.35);
  transform: translateY(-2px);
}

.lokasi-action-btn.secondary-action {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-text-dim);
}

.lokasi-action-btn.secondary-action:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-main);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* Glass Map Container */
.lokasi-map-container {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.map-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.map-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #38bdf8;
  text-transform: uppercase;
}

.map-pin-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 12px #38bdf8;
  animation: pulseGreen 2s infinite;
}

.map-coords-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--color-text-dim);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.map-frame-wrapper {
  position: relative;
  width: 100%;
  min-height: 380px;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45), 0 8px 30px rgba(0, 0, 0, 0.4);
  background: #091322;
}

.map-frame-wrapper iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: block;
  border: none;
  filter: saturate(1.1) brightness(0.96) contrast(1.02);
  transition: filter 0.3s ease;
}

.map-frame-wrapper:hover iframe {
  filter: saturate(1.15) brightness(1.02);
}

.map-footer-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-text-dim);
  opacity: 0.8;
}

/* --- Kontak Cards Grid --- */
.kontak-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .kontak-cards-grid {
    grid-template-columns: 1fr;
  }
}

.kontak-card-action {
  margin-top: 0.5rem;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  #text-sub {
    transform: none !important;
    opacity: 1 !important;
  }
  .type-caret {
    animation: none !important;
    opacity: 1 !important;
  }
  /* Stars stay visible at their low peak opacity without twinkling */
  .star {
    animation: none !important;
    opacity: var(--star-peak, 0.3) !important;
  }
}

/* Initially hide nav bar & footer until welcome typing completes */
.nav-bar-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

/* Show nav bar & footer with fade-in */
.nav-bar-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease-in 0.15s, visibility 0.4s ease-in 0.15s;
}

/* ============================================================ Skills View */
/* Progress bar design: level + score prominent, visual feedback */

.skills-craft,
.skills-software,
.skills-tools,
.skills-languages {
  width: 100%;
  margin-bottom: 2rem;
}

.skills-craft > h2,
.skills-software > h2,
.skills-tools > h2,
.skills-languages > h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1.2rem 0;
  color: var(--color-text-main);
}

.craft-categories,
.software-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.4rem;
  width: 100%;
}

.craft-category,
.software-category,
.tools-category,
.languages-category {
  padding: 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(var(--card-accent-rgb), 0.15);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.025), rgba(12, 6, 20, 0.6));
  box-sizing: border-box;
  transition: border-color 320ms ease, box-shadow 320ms ease;
}

.craft-category:hover,
.software-category:hover,
.tools-category:hover,
.languages-category:hover {
  border-color: rgba(var(--card-accent-rgb), 0.35);
  box-shadow: 0 0 32px rgba(var(--card-accent-rgb), 0.12);
}

.craft-category > h3,
.software-category > h3,
.tools-category > h3,
.languages-category > h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.8rem 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(var(--card-accent-rgb), 0.2);
  color: var(--color-text-main);
}

.craft-category[data-service="true"] > h3 {
  border-bottom: 1px dashed rgba(var(--card-accent-rgb), 0.2);
}

/* Skill bar: name | level + score + progress track */
.skill-bar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(var(--card-accent-rgb), 0.1);
}

.skill-bar:last-child {
  border-bottom: none;
}

.skill-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.skill-bar-name {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-main);
  flex: 1;
  line-height: 1.3;
}

.skill-bar-meta {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  white-space: nowrap;
}

.skill-bar-level {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(var(--card-accent-rgb), 0.1);
  color: rgba(var(--card-accent-rgb), 0.9);
}

.skill-bar-level[data-level="advanced"] {
  background: rgba(255, 100, 100, 0.15);
  color: #ff6464;
}

.skill-bar-level[data-level="intermediate"] {
  background: rgba(255, 180, 0, 0.15);
  color: #ffb400;
}

.skill-bar-level[data-level="beginner"] {
  background: rgba(100, 150, 255, 0.15);
  color: #6496ff;
}

.skill-bar-score {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--card-accent);
  font-variant-numeric: tabular-nums;
}

.skill-bar-wpm {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--card-accent);
  font-weight: 700;
}

/* Progress track + fill */
.skill-bar-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--card-accent-rgb), 0.1);
  overflow: hidden;
  box-sizing: border-box;
}

.skill-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--card-accent-rgb), 0.6), var(--card-accent));
  box-shadow: 0 0 12px rgba(var(--card-accent-rgb), 0.4);
  animation: fillGrow 800ms ease-out;
}

@keyframes fillGrow {
  from {
    width: 0% !important;
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

/* =============================================================================
   Skills View: Bare & Transparent (Constellation-Style)
   Top-to-Bottom Vertical Touch Typing Meter
   ============================================================================= */

.skills-container {
  position: relative;
  width: 100%;
  max-width: 76rem;
  height: 100%;
  max-height: calc(100vh - 4.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  box-sizing: border-box;
}

.skills-display-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 1rem 3.5rem 1rem;
  box-sizing: border-box;
}

.skills-overview-content {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  max-width: 72rem;
  box-sizing: border-box;
}

/* --- Bare Compact Typing Section (Left Info, Right Score, Bottom Horizontal Gauge) --- */
.skills-typing-compact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.35rem;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 18px;
  box-shadow: none;
  cursor: pointer;
  position: relative;
  transition: background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              backdrop-filter 0.35s ease,
              -webkit-backdrop-filter 0.35s ease,
              transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.skills-typing-compact:hover,
.skills-typing-compact.is-hovered {
  backdrop-filter: brightness(1.35) blur(10px);
  -webkit-backdrop-filter: brightness(1.35) blur(10px);
  background: rgba(255, 111, 94, 0.04);
  border-color: rgba(255, 111, 94, 0.32);
  box-shadow: 0 0 32px rgba(255, 111, 94, 0.22),
              inset 0 0 20px rgba(255, 255, 255, 0.03);
  transform: translateY(-3px);
}

.skills-typing-compact:active {
  transform: translateY(-1px) scale(0.99);
}

.typing-click-hint {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff9d66;
  opacity: 0.65;
  transition: opacity 0.3s ease, color 0.3s ease;
  margin-top: 0.25rem;
  pointer-events: none;
}

.skills-typing-compact:hover .typing-click-hint,
.skills-typing-compact.is-hovered .typing-click-hint {
  opacity: 1;
  color: #ffb188;
}

.typing-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.typing-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.2rem;
  flex-shrink: 0;
}

.typing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ff8a7a;
  text-transform: uppercase;
  white-space: nowrap;
}

.typing-title {
  font-family: var(--font-mono);
  font-size: 2.35rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

.typing-sub {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-text-dim);
  margin: 0;
  white-space: nowrap;
}

.typing-right-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.35rem;
  flex-shrink: 0;
}

.typing-score-cluster {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  white-space: nowrap;
}

.typing-big-num {
  font-family: var(--font-mono);
  font-size: 3.8rem;
  font-weight: 800;
  color: #ff7e6e;
  line-height: 1;
  text-shadow: 0 0 30px rgba(255, 111, 94, 0.45);
}

.typing-big-unit {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.typing-status-pill {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff9d66;
  background: rgba(255, 157, 102, 0.12);
  border: 1px solid rgba(255, 157, 102, 0.3);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Horizontal Progress Gauge */
.typing-bottom-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.55rem;
}

.typing-scale {
  position: relative;
  width: 100%;
  height: 20px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-dim);
}

.typing-scale .scale-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0.75;
}

.typing-scale .scale-mark[style*="left: 0%"] {
  transform: translateX(0);
}

.typing-scale .scale-mark[style*="left: 100%"] {
  transform: translateX(-100%);
}

.typing-scale .scale-mark.is-current {
  color: #ff8a7a;
  font-weight: 800;
  font-size: 0.92rem;
  opacity: 1;
  text-shadow: 0 0 12px rgba(255, 111, 94, 0.6);
}

.typing-track {
  position: relative;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.typing-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5238, #ff8a7a);
  box-shadow: 0 0 16px rgba(255, 111, 94, 0.6);
}

.typing-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #ff5238;
  box-shadow: 0 0 14px #ff5238;
  z-index: 2;
}

.typing-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-dim);
  opacity: 0.8;
  margin-top: 0.35rem;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .skills-typing-compact {
    padding: 1.15rem 0.85rem;
    gap: 1rem;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .typing-top-row {
    align-items: flex-end;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
  }
  .typing-left-col {
    flex: 1 1 auto;
    min-width: 0;
  }
  .typing-right-col {
    flex: 0 0 auto;
  }
  .typing-title {
    font-size: clamp(1.4rem, 6vw, 1.85rem);
    white-space: normal;
  }
  .typing-sub {
    font-size: 0.82rem;
    white-space: normal;
  }
  .typing-big-num {
    font-size: 2.5rem;
  }
  .typing-big-unit {
    font-size: 0.95rem;
  }
  .typing-status-pill {
    font-size: 0.62rem;
    padding: 0.2rem 0.6rem;
  }
  .typing-scale {
    font-size: 0.72rem;
  }
  .typing-scale .scale-mark.is-current {
    font-size: 0.85rem;
  }
  .typing-meta {
    white-space: normal;
    text-align: center;
  }
}

/* --- Donut Cards Grid (Craft, Software, Language beneath Typing) --- */
.skills-donuts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.skills-donut-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 1.35rem 1.25rem 1.15rem 1.25rem;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              backdrop-filter 0.35s ease,
              -webkit-backdrop-filter 0.35s ease,
              transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Glowing rounded rectangle on hover, identical to bare typing hover */
.skills-donut-card:hover,
.skills-donut-card.is-hovered {
  backdrop-filter: brightness(1.35) blur(10px);
  -webkit-backdrop-filter: brightness(1.35) blur(10px);
  background: rgba(var(--card-accent-rgb, 255, 157, 102), 0.04);
  border-color: rgba(var(--card-accent-rgb, 255, 157, 102), 0.32);
  box-shadow: 0 0 32px rgba(var(--card-accent-rgb, 255, 157, 102), 0.22),
              inset 0 0 20px rgba(255, 255, 255, 0.03);
  transform: translateY(-3px);
}

.skills-donut-card:active {
  transform: translateY(-1px) scale(0.99);
}

.donut-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  width: 100%;
}

.donut-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--card-accent, #ff9d66);
  text-transform: uppercase;
  white-space: nowrap;
}

.donut-kicker svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.donut-card-title {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 0;
  line-height: 1.2;
  text-align: center;
}

.donut-card-sub {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-dim);
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.donut-visual-wrap {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0.9rem auto 0.75rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.donut-hole-trigger {
  pointer-events: all;
  cursor: default;
}

.donut-slice {
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1),
              filter 0.25s ease,
              opacity 0.25s ease;
  transform-origin: 90px 90px;
  outline: none;
}

.donut-slice:hover,
.donut-slice.is-hovered {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px currentColor) brightness(1.28);
}

.donut-center-info {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

.donut-center-score {
  font-family: var(--font-mono);
  font-size: 2.85rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.45);
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
  user-select: none;
}

/* Dynamic Single Status Strip */
.donut-dynamic-strip {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.donut-dyn-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
}

.donut-dyn-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.donut-dyn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--strip-accent, var(--card-accent, #ff9d66));
  box-shadow: 0 0 8px var(--strip-accent, var(--card-accent, #ff9d66));
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.donut-dyn-title {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease;
}

.donut-dyn-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.donut-dyn-level {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--strip-accent, var(--card-accent, #ff9d66));
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.donut-dyn-score {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  transition: color 0.25s ease;
}

.donut-dyn-desc {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(245, 245, 247, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease;
}

.donut-card-action {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0;
  border-top: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-accent, #ff9d66);
  opacity: 0.65;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.skills-donut-card:hover .donut-card-action,
.skills-donut-card.is-hovered .donut-card-action {
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 960px) {
  .skills-donuts-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 26rem;
    width: 100%;
    margin: 0 auto;
  }
}

/* =============================================================================
   Dedicated Skills Detail Panel (#skills-detail)
   Layered over skills view, matching constellation detail architecture
   ============================================================================= */

#skills-detail {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: none;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s ease;
  padding: 1.5rem 1.5rem 3rem 1.5rem;
  box-sizing: border-box;
}

body.skills-detail-open #skills-detail {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* Centered content wrapper: vertically centered on spacious viewports,
   naturally aligned to top when zoomed in or on short viewports to prevent clipping */
.sd-content-wrapper {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 46rem;
  box-sizing: border-box;
}

.sd-content-wrapper.sd-detail-wide {
  max-width: 76rem;
  width: 100%;
}

.sd-content-wrapper.sd-detail-wide .sd-head {
  max-width: 58rem;
}

#skills-view .skills-display-area {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

body.skills-detail-open #skills-view .skills-display-area {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

.sd-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto 1.6rem auto;
  gap: 1.15rem;
}

.sd-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.sd-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ff8a7a;
  text-transform: uppercase;
}

.sd-title {
  font-family: var(--font-mono);
  font-size: 2.35rem;
  font-weight: 800;
  color: var(--color-text-main);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 0 24px rgba(255, 111, 94, 0.35);
}

.sd-blurb {
  font-family: var(--font-ui);
  font-size: 1.02rem;
  color: var(--color-text-dim);
  max-width: 34rem;
  line-height: 1.5;
  margin: 0;
}

/* Stats Badges */
.sd-stats-cluster {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.35rem;
}

.sd-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  min-width: 6.5rem;
}

.sd-stat-num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 800;
  color: #ff7e6e;
  line-height: 1;
}

.sd-stat-unit {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-dim);
  letter-spacing: 0.08em;
  margin-top: 0.15rem;
}

.sd-stat-label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: rgba(245, 245, 247, 0.55);
  margin-top: 0.2rem;
}

/* Proof Link Button */
.sd-proof-wrap {
  margin-top: 0.35rem;
}

.sd-proof-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 111, 94, 0.22), rgba(255, 157, 102, 0.14));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 126, 110, 0.6);
  color: #fff4f0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(255, 111, 94, 0.28), 0 0 16px rgba(255, 111, 94, 0.15);
  transition: filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.sd-proof-btn svg {
  color: #ff9d66;
}

/* Strictly NO solid colors on hover - pure brightness boost, border brightening, and soft glow */
.sd-proof-btn:hover {
  filter: brightness(1.28);
  border-color: #ffa194;
  box-shadow: 0 6px 28px rgba(255, 111, 94, 0.42), 0 0 28px rgba(255, 157, 102, 0.28);
  transform: translateY(-2px);
}

.sd-arrow-icon {
  transition: transform 0.25s ease;
}

.sd-proof-btn:hover .sd-arrow-icon {
  transform: translate(2px, -2px);
}

/* Live 60 WPM Simulator Stage */
.sd-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.sd-sim-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 46rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 1.5rem 1.8rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 111, 94, 0.08);
  box-sizing: border-box;
  gap: 1.25rem;
}

.sd-sim-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.95rem;
}

.sd-sim-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ff9d66;
}

.sd-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ffaa;
  box-shadow: 0 0 10px #00ffaa;
  animation: pulseGreen 1.5s infinite ease-in-out;
}

@keyframes pulseGreen {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.sd-telemetry {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sd-telemetry-badge {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
}

.sd-telem-val {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
}

.sd-telem-lbl {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--color-text-dim);
}

/* 2-line visible window with smooth autoscrolling and zero horizontal layout shift */
.sd-typing-stage {
  --line-h: 2.6rem;
  height: calc(2 * var(--line-h));
  max-height: calc(2 * var(--line-h));
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.sd-typing-text-flow {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  line-height: var(--line-h);
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* In-place monospace spans with zero DOM restructuring */
.type-char {
  display: inline;
  position: relative;
  box-sizing: border-box;
}

.type-char.pending {
  color: rgba(255, 255, 255, 0.22);
}

.type-char.done {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* Active underscore cursor directly beneath the character */
.type-char.active {
  color: #ffffff;
  border-bottom: 2.5px solid #ff7e6e;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
  animation: underscorePulse 0.8s ease-in-out infinite alternate;
}

@keyframes underscorePulse {
  0% {
    border-bottom-color: #ff7e6e;
    box-shadow: 0 3px 6px -1px rgba(255, 126, 110, 0.6);
  }
  100% {
    border-bottom-color: rgba(255, 126, 110, 0.35);
    box-shadow: 0 3px 6px -1px rgba(255, 126, 110, 0.15);
  }
}

/* In-place typo indication without inserting or deleting spans */
.type-char.typo {
  color: #ff5238;
  border-bottom: 2.5px solid #ff5238;
  text-shadow: 0 0 10px rgba(255, 82, 56, 0.85);
}

.sd-sim-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.85rem;
}

.sd-sim-footnote {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-dim);
  line-height: 1.4;
  opacity: 0.75;
}

/* --- Detail Grid & Cards (Craft, Software, Language) --- */
.sd-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  width: 100%;
  box-sizing: border-box;
}

.sd-grid-lang {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sd-detail-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.15rem 1.25rem;
  box-sizing: border-box;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: backdrop-filter 0.3s ease,
              -webkit-backdrop-filter 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.3s ease;
}

.sd-detail-card:hover {
  backdrop-filter: brightness(1.25) blur(16px);
  -webkit-backdrop-filter: brightness(1.25) blur(16px);
  border-color: rgba(var(--field-accent-rgb, 255, 157, 102), 0.38);
  box-shadow: 0 0 28px rgba(var(--field-accent-rgb, 255, 157, 102), 0.16);
  transform: translateY(-2px);
}

.sd-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.6rem;
}

.sd-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}

.sd-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sd-card-title {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin: 0;
  line-height: 1.25;
  text-align: left;
}

.sd-card-score-pill {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.18rem 0.5rem;
  border-radius: 8px;
  flex-shrink: 0;
}

.sd-card-score-val {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
}

.sd-card-score-lbl {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-dim);
}

.sd-card-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sd-card-bars .skill-bar {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0;
  border-bottom: none;
}

.sd-card-bars .skill-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  text-align: left;
}

.sd-card-bars .skill-bar-name {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-text-main);
  text-align: left;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.sd-card-bars .skill-bar-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-left: auto;
}

.sd-card-bars .skill-bar-level {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-text-dim);
}

.sd-card-bars .skill-bar-score {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
}

.sd-card-bars .skill-bar-track {
  height: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.sd-card-bars .skill-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--field-accent-rgb, 255, 157, 102), 0.7), var(--field-accent, #ff9d66));
  box-shadow: 0 0 10px rgba(var(--field-accent-rgb, 255, 157, 102), 0.5);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.sd-lang-card {
  gap: 0.85rem;
}

.sd-lang-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sd-lang-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--field-accent, #00e5ff);
  letter-spacing: 0.04em;
}

.sd-lang-blurb {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--color-text-dim);
  margin: 0;
}

@media (max-width: 900px) {
  .sd-grid-lang {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  #skills-detail {
    padding: 1rem 0.75rem 2.5rem 0.75rem;
  }
  .sd-head {
    gap: 0.9rem;
    margin-bottom: 1.35rem;
  }
  .sd-title {
    font-size: 1.65rem;
  }
  .sd-blurb {
    font-size: 0.92rem;
  }
  .sd-stats-cluster {
    gap: 0.5rem;
  }
  .sd-stat-pill {
    padding: 0.5rem 0.75rem;
    min-width: 5rem;
  }
  .sd-stat-num {
    font-size: 1.35rem;
  }
  .sd-proof-btn {
    font-size: 0.78rem;
    padding: 0.65rem 1.1rem;
    width: 100%;
    justify-content: center;
  }
  .sd-sim-panel {
    padding: 1.1rem 1rem;
    border-radius: 14px;
    gap: 1rem;
  }
  .sd-sim-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }
  .sd-typing-stage {
    --line-h: 2.1rem;
    height: calc(2 * var(--line-h));
    max-height: calc(2 * var(--line-h));
  }
  .sd-typing-text-flow {
    font-size: 1.15rem;
    line-height: var(--line-h);
  }
  .skills-display-area {
    padding: 1rem 0.5rem 3rem 0.5rem;
  }
  .skills-overview-content {
    gap: 1.2rem;
    width: 100%;
    margin: 0 auto;
  }
  .skills-donuts-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 26rem;
    width: 100%;
    margin: 0 auto;
  }
  .skills-donut-card {
    padding: 1.15rem 0.85rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .donut-card-sub {
    white-space: normal;
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .donut-dynamic-strip {
    padding: 0.65rem 0.75rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .donut-dyn-desc {
    white-space: normal;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.35;
  }
  .donut-visual-wrap {
    width: 144px;
    height: 144px;
  }
  .donut-center-score {
    font-size: 2rem;
  }
  .sd-grid-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .sd-detail-card {
    padding: 1.1rem 1rem;
  }
}

/* =============================================================================
   Connect View: Bare, Transparent & Interactive Brand Cards
   ============================================================================= */

.connect-container,
.profile-container,
.lokasi-container,
.kontak-container {
  position: relative;
  width: 100%;
  max-width: 76rem;
  height: 100%;
  max-height: calc(100vh - 4.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  box-sizing: border-box;
  margin: auto;
}

.connect-display-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 1rem 3.5rem 1rem;
  box-sizing: border-box;
}

.connect-overview-content {
  width: 100%;
  max-width: 72rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Connect Header */
.connect-hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.connect-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00e5ff;
}

.connect-hero-title {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.connect-hero-blurb {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-text-dim);
  max-width: 44rem;
  margin: 0;
  line-height: 1.45;
}

/* Sections & Kickers */
.connect-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}

.connect-section-kicker {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  padding-left: 0.35rem;
  opacity: 0.85;
}

/* Grid Layouts */
.connect-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.connect-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  width: 100%;
  box-sizing: border-box;
}

/* Standard Bare Card */
.connect-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.9rem;
  background: rgba(8, 26, 60, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  padding: 1.35rem 1.35rem;
  box-sizing: border-box;
  position: relative;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(4, 16, 40, 0.35);
  transition: background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              backdrop-filter 0.35s ease,
              -webkit-backdrop-filter 0.35s ease,
              transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.connect-card:hover {
  backdrop-filter: brightness(1.25) blur(16px);
  -webkit-backdrop-filter: brightness(1.25) blur(16px);
  background: rgba(var(--card-accent-rgb, 56, 189, 248), 0.14);
  border-color: rgba(var(--card-accent-rgb, 56, 189, 248), 0.45);
  box-shadow: 0 0 32px rgba(var(--card-accent-rgb, 56, 189, 248), 0.28),
              inset 0 0 20px rgba(255, 255, 255, 0.04);
  transform: translateY(-3px);
}

.connect-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.connect-kicker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.connect-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.2rem 0 0;
}

.connect-brand-row .connect-card-title {
  margin: 0;
}

.connect-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--card-accent-rgb, 255, 255, 255), 0.28);
  color: var(--card-accent);
  background: rgba(var(--card-accent-rgb, 255, 255, 255), 0.08);
  white-space: nowrap;
  max-width: 100%;
  flex-shrink: 0;
}

.connect-card-title {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0.2rem 0 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.connect-card-handle {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--card-accent);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.connect-card-blurb {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--color-text-dim);
  line-height: 1.45;
  margin: 0;
  flex: 1;
}

.connect-card-action-wrap {
  margin-top: auto;
  padding-top: 0.3rem;
}

.connect-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
  box-sizing: border-box;
}

.connect-action-btn:hover {
  background: rgba(var(--card-accent-rgb, 255, 255, 255), 0.16);
  border-color: rgba(var(--card-accent-rgb, 255, 255, 255), 0.45);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(var(--card-accent-rgb, 255, 255, 255), 0.25);
  transform: translateY(-1px);
}

.connect-copy-btn.is-copied {
  background: rgba(46, 204, 113, 0.2) !important;
  border-color: rgba(46, 204, 113, 0.5) !important;
  color: #2ecc71 !important;
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.3) !important;
}

/* Unified Instagram Card */
.connect-card-instagram {
  gap: 1.25rem;
}

.connect-card-instagram:hover {
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.05), rgba(64, 93, 230, 0.05));
  border-color: rgba(225, 48, 108, 0.4);
  box-shadow: 0 0 35px rgba(225, 48, 108, 0.22),
              0 0 60px rgba(64, 93, 230, 0.12),
              inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.connect-ig-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 0.95rem;
}

.connect-ig-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.connect-ig-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(225, 48, 108, 0.45);
  flex-shrink: 0;
}

.connect-ig-titles {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.connect-ig-main-blurb {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--color-text-dim);
  max-width: 34rem;
  line-height: 1.42;
  margin: 0;
}

.connect-ig-profiles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.05rem;
  width: 100%;
  box-sizing: border-box;
}

.connect-ig-profile-item {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.15rem 1.15rem;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.connect-ig-profile-item:hover {
  background: rgba(var(--profile-accent-rgb), 0.08);
  border-color: rgba(var(--profile-accent-rgb), 0.45);
  box-shadow: 0 0 24px rgba(var(--profile-accent-rgb), 0.25);
  transform: translateY(-3px);
}

.connect-ig-prof-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.connect-ig-prof-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid;
  flex-shrink: 0;
}

.connect-ig-prof-titlegroup {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.connect-ig-prof-name {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.connect-ig-prof-handle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--profile-accent);
}

.connect-ig-prof-arrow {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dim);
  margin-left: auto;
  transition: transform 0.25s ease, color 0.25s ease;
}

.connect-ig-profile-item:hover .connect-ig-prof-arrow {
  color: #ffffff;
  transform: translate(2px, -2px);
}

.connect-ig-prof-role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.connect-ig-prof-blurb {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-text-dim);
  line-height: 1.38;
  margin: 0;
  flex: 1;
}

.connect-ig-prof-action {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--profile-accent);
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  opacity: 0.95;
}

/* Centered Card in 3-column Grid (Fiverr on Row 2) */
.connect-card-center {
  grid-column: 2;
  grid-row: 2;
}

/* Connect Media Queries */
@media (max-width: 1024px) {
  .connect-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .connect-display-area {
    padding: 1rem 0.5rem 3rem 0.5rem;
  }
  .connect-grid-3,
  .connect-grid-4,
  .connect-ig-profiles-grid {
    grid-template-columns: 1fr;
  }
  .connect-card-center {
    grid-column: auto;
    grid-row: auto;
  }
  .connect-card {
    padding: 1.15rem 1.1rem;
  }
  .connect-ig-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* =============================================================================
   Site Footer: Home Screen Credit Capsule ("Satu Keluarga" dengan Nav Header)
   Elegan, frosted glass, zero blue link, zero underline, pearlescent celestial glow
   ============================================================================= */

.site-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 24px);
  z-index: 20;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100vw;
  box-sizing: border-box;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0, 0, 0.2, 1), visibility 0.4s cubic-bezier(0, 0, 0.2, 1), transform 0.4s cubic-bezier(0, 0, 0.2, 1);
}

.site-footer.nav-bar-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

.site-footer.nav-bar-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, 24px) !important;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 1, 1), visibility 0.32s, transform 0.32s cubic-bezier(0.4, 0, 1, 1);
}

.site-footer.nav-bar-hidden * {
  pointer-events: none !important;
  cursor: default !important;
}

.home-credit-capsule {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 0.65rem;
  padding: 0.55rem 1.25rem;
  background: rgba(8, 26, 60, 0.60);
  border: none !important;
  outline: none !important;
  border-radius: 9999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(4, 16, 40, 0.35);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: 
    background 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease,
    transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
  user-select: none;
}

.home-credit-capsule:hover {
  backdrop-filter: brightness(1.25) blur(16px);
  -webkit-backdrop-filter: brightness(1.25) blur(16px);
  background: rgba(56, 189, 248, 0.14);
  border: none !important;
  outline: none !important;
  box-shadow: 0 0 32px rgba(56, 189, 248, 0.28), 0 8px 24px rgba(4, 16, 40, 0.35);
  transform: translateY(-2px);
}

.home-credit-icon,
.home-credit-kicker,
.home-credit-sep,
.home-credit-name,
.home-credit-arrow {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.home-credit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease, filter 0.3s ease;
}

.home-credit-capsule:hover .home-credit-icon {
  transform: scale(1.15);
  color: #ffffff;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
}

.home-credit-kicker {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.home-credit-capsule:hover .home-credit-kicker {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.home-credit-sep {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.home-credit-name {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  transition: text-shadow 0.3s ease;
}

.home-credit-capsule:hover .home-credit-name {
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 0 24px rgba(56, 189, 248, 0.6);
}

.home-credit-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: 
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

.home-credit-capsule:hover .home-credit-arrow {
  transform: translate(2px, -2px);
  background: rgba(56, 189, 248, 0.25);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5), 0 1px 3px rgba(0, 0, 0, 0.8);
  color: #ffffff;
}

/* Responsiveness & Android Touch Screen Optimization */
@media (max-width: 600px) {
  .site-footer {
    padding: 0.75rem 0.5rem;
    bottom: max(0.4rem, env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .home-credit-capsule {
    padding: 0.42rem clamp(0.65rem, 2.5vw, 0.95rem);
    gap: clamp(0.35rem, 1.4vw, 0.55rem);
    max-width: calc(100vw - 1rem);
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .home-credit-icon svg {
    width: clamp(10px, 2.8vw, 12px);
    height: clamp(10px, 2.8vw, 12px);
  }

  .home-credit-kicker {
    font-size: clamp(0.6rem, 2.2vw, 0.7rem);
    letter-spacing: clamp(0.06em, 0.5vw, 0.1em);
    white-space: nowrap !important;
  }

  .home-credit-sep {
    font-size: clamp(0.65rem, 2vw, 0.8rem);
  }

  .home-credit-name {
    font-size: clamp(0.76rem, 2.6vw, 0.86rem);
    letter-spacing: clamp(0.02em, 0.3vw, 0.04em);
    white-space: nowrap !important;
  }

  .home-credit-arrow {
    width: clamp(18px, 4.5vw, 20px);
    height: clamp(18px, 4.5vw, 20px);
  }

  .home-credit-arrow svg {
    width: clamp(9px, 2.4vw, 11px);
    height: clamp(9px, 2.4vw, 11px);
  }
}

/* =============================================================================
   Hire Me View: Client Onboarding, Availability & Services
   ============================================================================= */

.hire-container {
  position: relative;
  width: 100%;
  max-width: 76rem;
  height: 100%;
  max-height: calc(100vh - 4.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  box-sizing: border-box;
}

.hire-display-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 1rem 3.5rem 1rem;
  box-sizing: border-box;
}

.hire-overview-content {
  width: 100%;
  max-width: 72rem;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  box-sizing: border-box;
}

/* Hero & Availability */
.hire-hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  padding-bottom: 0.5rem;
}

.hire-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-cyan, #00f2fe);
}

.hire-hero-title {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(0, 242, 254, 0.25);
}

.hire-hero-blurb {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-text-dim);
  max-width: 44rem;
  margin: 0 auto;
  line-height: 1.5;
}

.hire-status-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.hire-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  box-sizing: border-box;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.hire-status-tag svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.hire-status-tag.is-available {
  background: rgba(63, 185, 80, 0.08);
  border-color: rgba(63, 185, 80, 0.28);
  box-shadow: 0 0 16px rgba(63, 185, 80, 0.12);
}

.hire-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 10px #3fb950, 0 0 16px rgba(63, 185, 80, 0.6);
  animation: pulseHireDot 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulseHireDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.hire-status-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #3fb950;
}

/* Sections & Grids */
.hire-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}

.hire-section-kicker {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  padding-left: 0.35rem;
  opacity: 0.85;
}

/* Compact Toggle Card (1 Card with 5 Toggles) */
.hire-compact-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.hire-compact-card {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  width: 100%;
  max-width: 48rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 1.35rem 1.45rem;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 32px rgba(var(--card-accent-rgb, 56, 189, 248), 0.1),
              inset 0 0 20px rgba(255, 255, 255, 0.015);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.hire-toggles-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.35rem;
  box-sizing: border-box;
  overflow-x: auto;
}

.hire-toggle-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0.55rem 0.75rem;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.hire-toggle-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.hire-toggle-btn.active {
  color: #ffffff;
  background: rgba(var(--tab-accent-rgb, 255, 255, 255), 0.16);
  border-color: rgba(var(--tab-accent-rgb, 255, 255, 255), 0.4);
  box-shadow: 0 0 16px rgba(var(--tab-accent-rgb, 255, 255, 255), 0.25);
}

.hire-toggle-icon {
  display: inline-flex;
  align-items: center;
  color: var(--tab-accent);
}

.hire-channel-container {
  width: 100%;
}

.hire-channel-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  animation: hireChannelFade 0.25s ease-out;
}

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

.hire-channel-action-box {
  margin-top: 0.35rem;
}

/* Horizontal Auto-Scrolling Works Showcase */
.hire-showcase-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hire-marquee-hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-text-dim);
  opacity: 0.75;
  padding-right: 0.35rem;
}

.hire-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0.5rem 0 1rem 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

.hire-marquee-wrapper.is-dragging {
  cursor: grabbing;
}

.hire-marquee-track {
  display: flex;
  gap: 1.15rem;
  width: max-content;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.hire-showcase-card {
  display: flex;
  flex-direction: column;
  width: 250px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.hire-showcase-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(225, 48, 108, 0.5);
  box-shadow: 0 0 24px rgba(225, 48, 108, 0.25),
              inset 0 0 16px rgba(255, 255, 255, 0.03);
}

.hire-showcase-media {
  position: relative;
  width: 100%;
  height: 180px;
  background: #0d0e15;
  overflow: hidden;
}

.hire-showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
  transition: transform 0.4s ease;
}

.hire-showcase-card:hover .hire-showcase-img {
  transform: scale(1.06);
}

.hire-showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 14, 21, 0.85) 0%, transparent 60%);
  pointer-events: none;
}

.hire-showcase-badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  backdrop-filter: blur(6px);
}

.hire-showcase-info {
  padding: 0.9rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.hire-showcase-title {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hire-showcase-desc {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--color-text-dim);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.hire-showcase-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #e1306c;
  margin-top: 0.45rem;
  opacity: 0.9;
}

/* Actions in cards (Email, WhatsApp, Fiverr: perfectly symmetrical 50/50) */
.hire-split-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

.hire-split-actions .connect-action-btn {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1rem;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
}

.hire-split-actions .hire-primary-action {
  background: rgba(var(--card-accent-rgb, 255, 255, 255), 0.14);
  border-color: rgba(var(--card-accent-rgb, 255, 255, 255), 0.4);
  color: #ffffff;
  font-weight: 800;
}

.hire-split-actions .hire-primary-action:hover {
  background: rgba(var(--card-accent-rgb, 255, 255, 255), 0.24);
  border-color: rgba(var(--card-accent-rgb, 255, 255, 255), 0.65);
  box-shadow: 0 0 18px rgba(var(--card-accent-rgb, 255, 255, 255), 0.35);
  transform: translateY(-1px);
}

.hire-split-actions .hire-copy-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-text-dim);
  font-weight: 700;
}

.hire-split-actions .hire-copy-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.hire-copy-btn.is-copied {
  border-color: rgba(63, 185, 80, 0.6) !important;
  color: #3fb950 !important;
  background: rgba(63, 185, 80, 0.14) !important;
  box-shadow: 0 0 14px rgba(63, 185, 80, 0.25);
}

.hire-dual-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

.hire-dual-actions .connect-action-btn {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1rem;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Services 2x2 Grid */
.hire-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  width: 100%;
  box-sizing: border-box;
}

.hire-service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 1.35rem 1.4rem;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              backdrop-filter 0.35s ease,
              -webkit-backdrop-filter 0.35s ease,
              transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.hire-service-card:hover {
  backdrop-filter: brightness(1.35) blur(14px);
  -webkit-backdrop-filter: brightness(1.35) blur(14px);
  background: rgba(var(--card-accent-rgb, 255, 255, 255), 0.04);
  border-color: rgba(var(--card-accent-rgb, 255, 255, 255), 0.35);
  box-shadow: 0 0 32px rgba(var(--card-accent-rgb, 255, 255, 255), 0.2),
              inset 0 0 20px rgba(255, 255, 255, 0.02);
  transform: translateY(-3px);
}

.hire-service-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.hire-service-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.35);
}

.hire-service-subtitle {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hire-service-title {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.hire-service-blurb {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--color-text-dim);
  line-height: 1.45;
  margin: 0;
  flex: 1;
}

.hire-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.hire-service-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
}

/* Workflow 4-Step Grid */
.hire-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.hire-step-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.15rem 1.1rem;
  box-sizing: border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.hire-step-item:hover {
  border-color: rgba(0, 242, 254, 0.3);
  background: rgba(0, 242, 254, 0.025);
  transform: translateY(-2px);
}

.hire-step-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.hire-step-index {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--color-accent-cyan, #00f2fe);
}

.hire-step-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-dim);
}

.hire-step-title {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.hire-step-desc {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-text-dim);
  line-height: 1.42;
  margin: 0;
}

/* Principles Grid */
.hire-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.hire-principle-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.1rem;
  box-sizing: border-box;
}

.hire-principle-title {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.hire-principle-desc {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-text-dim);
  line-height: 1.42;
  margin: 0;
}

/* Hire Me Media Queries */
@media (max-width: 1024px) {
  .hire-workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .hire-display-area {
    padding: 1rem 0.5rem 3rem 0.5rem;
  }
  .hire-hero-title {
    font-size: 1.7rem;
  }
  .hire-status-strip {
    gap: 0.45rem;
    margin-top: 0.65rem;
  }
  .hire-status-tag {
    font-size: 0.68rem;
    padding: 0.3rem 0.65rem;
    gap: 0.38rem;
  }
  .hire-grid-3,
  .hire-grid-2,
  .hire-services-grid,
  .hire-workflow-grid,
  .hire-principles-grid {
    grid-template-columns: 1fr;
  }
  .hire-split-actions,
  .hire-dual-actions {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .hire-compact-card {
    padding: 1.1rem 0.95rem;
    border-radius: 16px;
  }
  .hire-toggles-bar {
    gap: 0.35rem;
    padding: 0.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hire-toggles-bar::-webkit-scrollbar {
    display: none;
  }
  .hire-toggle-btn {
    padding: 0.45rem 0.65rem;
    font-size: 0.72rem;
  }
}

/* ==========================================================================
   Toko As-Slabar — Cloud-Themed Editorial Storyline & Visual Mosaic
   ========================================================================== */

.profile-storyline,
.lokasi-storyline,
.kontak-storyline {
  position: relative;
  width: 100%;
  max-width: 76rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 2.5rem;
  box-sizing: border-box;
}

#profile-view .connect-display-area,
#lokasi-view .connect-display-area,
#kontak-view .connect-display-area {
  padding: 1.5rem 0.5rem 3.5rem 0.5rem;
}

/* Ambient Floating Decorative Clouds */
.profile-deco-cloud {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  color: #38bdf8;
  filter: blur(1px);
}

.profile-deco-cloud svg {
  display: block;
}

.cloud-top-left {
  top: -15px;
  left: -30px;
  width: 140px;
  animation: cloudDriftSlow 18s ease-in-out infinite alternate;
}

.cloud-mid-right {
  top: 42%;
  right: -25px;
  width: 160px;
  opacity: 0.15;
  animation: cloudDriftSlow 24s ease-in-out infinite alternate-reverse;
}

.cloud-mid-left {
  top: 55%;
  left: -35px;
  width: 155px;
  opacity: 0.16;
  animation: cloudDriftSlow 21s ease-in-out infinite alternate;
}

.cloud-bot-right {
  bottom: 80px;
  right: -30px;
  width: 175px;
  opacity: 0.14;
  animation: cloudDriftSlow 25s ease-in-out infinite alternate-reverse;
}

@keyframes cloudDriftSlow {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(14px, -8px) scale(1.04); }
  100% { transform: translate(-10px, 6px) scale(0.97); }
}

/* Profile, Lokasi, & Kontak Cloud Header */
.profile-header,
.lokasi-header,
.kontak-header {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 820px;
  margin: 0 auto;
  margin-bottom: 0;
  padding: 0 1rem;
}

/* Pastikan semua elemen teks dan kartu berada di layer depan (z-index: 10), tidak terhalang awan */
.profile-header > *:not(.ambient-cloud-track),
.lokasi-header > *:not(.ambient-cloud-track),
.kontak-header > *:not(.ambient-cloud-track),
.profile-story-col,
.kontak-person-card,
.profile-editorial-card,
.kontak-section-header,
.profile-counter-header,
.profile-mosaic-header,
.strategy-text-content,
.lokasi-streetview-btn-wrap,
.profile-lead-blurb,
.profile-main-title {
  position: relative;
  z-index: 10;
}

.profile-cloud-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: #38bdf8;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.profile-cloud-icon {
  width: 18px;
  height: 10px;
}

.profile-main-title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.8rem, 4.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f8fafc;
  margin: 0;
  text-shadow: 0 4px 20px rgba(56, 189, 248, 0.25);
}

.profile-lead-blurb {
  font-size: 0.96rem;
  line-height: 1.65;
  color: #94a3b8;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

/* Master Rounded Rectangle Backdrop (Pengurang Brightness Langit 2x Lipat, Tanpa Border/Shadow) */
.profile-content-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  background: rgba(3, 10, 26, 0.40);
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 24px;
  padding: 3rem 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  overflow: visible;
}

/* Acts / Story Sections */
.profile-act {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

/* Act 1: Hero Editorial Split */
.profile-hero-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.25rem;
  align-items: center;
}

@media (max-width: 820px) {
  .profile-hero-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Photo Cluster (Hero Left) */
.profile-photo-cluster {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: center;
}

.profile-vignette {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #091a33;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.12);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.profile-vignette:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 18px 40px -10px rgba(56, 189, 248, 0.28), 0 0 20px rgba(56, 189, 248, 0.15);
}

.profile-vignette-main {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
}

.profile-vignette-accent {
  width: 85%;
  max-width: 350px;
  aspect-ratio: 4 / 3;
  margin-top: -10px;
  border-color: rgba(244, 63, 94, 0.25);
  box-shadow: 0 10px 28px -6px rgba(244, 63, 94, 0.2);
}

.profile-vignette-accent:hover {
  border-color: rgba(244, 63, 94, 0.5);
  box-shadow: 0 16px 36px -8px rgba(244, 63, 94, 0.3);
}

/* Ambient Foreground Clouds (Melayang di paling depan, menutupi sudut, atas/bawah judul & gambar) */
.ambient-cloud-track {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 25;
}

.track-header {
  top: 6px;
  height: 95px;
}

.track-act1 {
  top: 15px;
  height: 140px;
}

.track-act2 {
  top: 35%;
  height: 120px;
}

.track-act3 {
  top: 58%;
  height: 120px;
}

.track-act4 {
  bottom: 80px;
  height: 120px;
}

/* Kelompok Awan (Cloud Cluster Flock) - Layer Estetika Aman (z-index: 1, di bawah teks) */
.cloud-cluster-flock {
  position: absolute;
  display: inline-block;
  will-change: transform;
  opacity: 0.82;
  pointer-events: none;
  z-index: 1;
}

.cloud-cluster-flock .cluster-cloud {
  position: absolute;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(2, 8, 20, 0.45)) drop-shadow(0 2px 8px rgba(56, 189, 248, 0.28));
}

.cloud-cluster-flock .cloud-lead {
  position: relative;
  width: 105px;
  height: 48px;
  color: rgba(255, 255, 255, 0.82);
}

.cloud-cluster-flock .cloud-top-flank {
  width: 76px;
  height: 35px;
  top: -14px;
  left: 52px;
  color: rgba(224, 242, 254, 0.70);
}

.cloud-cluster-flock .cloud-bottom-flank,
.cloud-cluster-flock .cloud-trailing {
  display: none !important;
}

/* Ukuran Variasi Flock */
.cloud-flock-sm {
  transform: scale(0.78);
  transform-origin: top left;
}

.cloud-flock-lg {
  transform: scale(1.18);
  transform-origin: top left;
}

/* Posisi Awan Berkelompok di Sudut, Margin Bersih & Area Foto (TIDAK MENGHALANGI TEKS) */
/* Header Area: Flanking di luar tepi kiri & kanan teks judul */
.drift-lane-hdr-r {
  right: -45px;
  top: -10px;
  animation: cloudEaseA 13s ease-in-out infinite alternate;
}

.drift-lane-hdr-l {
  left: -45px;
  top: -10px;
  animation: cloudEaseB 15s ease-in-out infinite alternate;
}

.drift-lane-hdr-sub {
  display: none !important;
}

/* Act 1: Fasad & Hero Media Frame (Hanya membingkai media foto / frame Street View) */
.drift-lane-act1-photo-top {
  left: -20px;
  top: -22px;
  animation: cloudEaseD 14s ease-in-out infinite alternate;
}

.drift-lane-act1-photo-mid {
  left: -30px;
  top: 42%;
  animation: cloudEaseA 16s ease-in-out infinite alternate;
}

.drift-lane-act1-photo-corner {
  left: -22px;
  bottom: 25px;
  top: auto;
  animation: cloudEaseA 16s ease-in-out infinite alternate;
}

.drift-lane-act1-title {
  display: none !important;
}

.drift-lane-act1-text {
  display: none !important;
}

/* Sudut Luar Kartu & Grid (Card Outer Corner Lanes) */
.drift-lane-card-topl,
.drift-lane-act2-topl {
  left: -28px;
  top: -24px;
  animation: cloudEaseA 15s ease-in-out infinite alternate;
}

.drift-lane-card-topr,
.drift-lane-act2-topr {
  right: -28px;
  top: -24px;
  animation: cloudEaseB 14s ease-in-out infinite alternate;
}

.drift-lane-card-botl,
.drift-lane-act2-botl {
  left: -28px;
  bottom: -28px;
  animation: cloudEaseC 17s ease-in-out infinite alternate;
}

.drift-lane-card-botr,
.drift-lane-act2-botr {
  right: -28px;
  bottom: -28px;
  animation: cloudEaseD 16s ease-in-out infinite alternate;
}

.drift-lane-act2-title {
  display: none !important;
}

.drift-lane-act2-photo {
  right: -20px;
  top: 32%;
  animation: cloudEaseB 14s ease-in-out infinite alternate;
}

/* Act 3: Kasir & Etalase */
.drift-lane-act3-title {
  right: 4%;
  top: -32px; /* Di atas header, bebas dari teks judul */
  animation: cloudEaseA 14s ease-in-out infinite alternate;
}

.drift-lane-act3-photo-l {
  left: 2%;
  top: 36%;
  animation: cloudEaseB 17s ease-in-out infinite alternate;
}

.drift-lane-act3-photo-mid {
  left: 46%;
  top: 46%;
  animation: cloudEaseD 15s ease-in-out infinite alternate;
}

.drift-lane-act3-photo-r {
  right: 2%;
  bottom: 25px;
  animation: cloudEaseC 16s ease-in-out infinite alternate;
}

/* Act 4: Mozaik Komoditas */
.drift-lane-act4-title {
  right: 4%;
  top: -32px; /* Di sudut atas luar, bebas dari badge tengah dan judul */
  left: auto;
  animation: cloudEaseA 15s ease-in-out infinite alternate;
}

.drift-lane-act4-tile1 {
  left: -18px;
  top: 210px; /* Di tepi luar kiri mozaik foto, jauh di bawah deskripsi teks */
  animation: cloudEaseB 16s ease-in-out infinite alternate;
}

.drift-lane-act4-tilemid {
  left: 36%;
  top: 52%;
  animation: cloudEaseC 18s ease-in-out infinite alternate;
}

.drift-lane-act4-tile6 {
  right: -10px;
  bottom: 12px;
  animation: cloudEaseD 14s ease-in-out infinite alternate;
}

/* Footer / Wrapper Bottom */
.drift-lane-footer-l {
  left: 4%;
  bottom: 12px;
  animation: cloudEaseA 17s ease-in-out infinite alternate;
}

.drift-lane-footer-r {
  right: 5%;
  bottom: 10px;
  animation: cloudEaseB 15s ease-in-out infinite alternate;
}

/* Keyframes: Menggeser perlahan dari kiri ke kanan lalu ke kiri lagi secara ease-in-out bolak-balik */
@keyframes cloudEaseA {
  0% {
    transform: translateX(-20px) translateY(0);
  }
  50% {
    transform: translateX(8px) translateY(-4px);
  }
  100% {
    transform: translateX(25px) translateY(2px);
  }
}

@keyframes cloudEaseB {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(20px) translateY(4px);
  }
  100% {
    transform: translateX(35px) translateY(-3px);
  }
}

@keyframes cloudEaseC {
  0% {
    transform: translateX(20px) translateY(-2px);
  }
  50% {
    transform: translateX(-6px) translateY(3px);
  }
  100% {
    transform: translateX(-25px) translateY(-2px);
  }
}

@keyframes cloudEaseD {
  0% {
    transform: translateX(-15px) translateY(2px);
  }
  50% {
    transform: translateX(15px) translateY(-3px);
  }
  100% {
    transform: translateX(28px) translateY(2px);
  }
}

/* Interaktivitas Grab / Drag untuk Gambar 4:3 */
.pannable-frame {
  position: relative;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y;
}

.pannable-frame.is-grabbing {
  cursor: grabbing !important;
}

.pannable-img {
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.04s linear;
  will-change: transform;
}

.vignette-zoom-hint {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(3, 9, 21, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  font-size: 0.72rem;
  font-weight: 500;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 5;
  transition: background 0.2s ease, transform 0.2s ease;
}

.profile-vignette:hover .vignette-zoom-hint,
.mosaic-tile:hover .vignette-zoom-hint {
  background: rgba(56, 189, 248, 0.85);
  color: #030712;
  border-color: #38bdf8;
  transform: scale(1.04);
}

.vignette-subcaption {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.45;
  margin-top: 0.45rem;
  font-style: italic;
  text-align: center;
}

/* Editorial Story Column */
.profile-story-col {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.profile-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.profile-kicker-tag {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #38bdf8;
  text-transform: uppercase;
}

.profile-manager-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.32);
  color: #38bdf8;
  font-size: 0.82rem;
  font-weight: 500;
}

.profile-manager-pill .chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.profile-story-heading {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.35;
}

/* Clean Justified Paragraphs */
.profile-narrative-p {
  font-size: 0.94rem;
  line-height: 1.78;
  color: #cbd5e1;
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.profile-narrative-p strong {
  color: #f8fafc;
  font-weight: 600;
}

/* Act 2: Philosophy & Strategy Card (Frosted Glassmorphic illuminated block with emerald halo) */
.profile-editorial-card {
  position: relative;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(6, 32, 54, 0.45) 50%, rgba(2, 14, 32, 0.68) 100%);
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  box-sizing: border-box;
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.65), 0 0 32px rgba(16, 185, 129, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.16);
}

.profile-editorial-card::before {
  content: '';
  position: absolute;
  inset: -15px;
  background: radial-gradient(ellipse 75% 65% at 50% 30%, rgba(16, 185, 129, 0.22) 0%, rgba(56, 189, 248, 0.14) 45%, transparent 75%);
  z-index: -1;
  pointer-events: none;
  filter: blur(30px);
  border-radius: 30px;
}

.strategy-badge-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}

.strategy-cloud-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #059669 0%, #0d9488 50%, #0284c7 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

.strategy-kicker {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #34d399;
  text-transform: uppercase;
}

.strategy-split-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 820px) {
  .strategy-split-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.strategy-text-content {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.strategy-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.strategy-photo-col .profile-vignette {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 3;
}

/* Act 3: Cashier Twin Showcase */
.profile-counter-act {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.profile-counter-header {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 820px;
}

.profile-counter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 720px) {
  .profile-counter-grid {
    grid-template-columns: 1fr;
  }
}

.profile-counter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.profile-counter-item .profile-vignette {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
}

/* Act 4: Curated Visual Mosaic */
.profile-mosaic-act {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.profile-mosaic-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 820px;
}

.profile-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  width: 100%;
}

@media (max-width: 860px) {
  .profile-mosaic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .profile-mosaic-grid {
    grid-template-columns: 1fr;
  }
}

.mosaic-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 24, 52, 0.65);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

.mosaic-tile:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 16px 36px -8px rgba(56, 189, 248, 0.25);
}

.mosaic-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.mosaic-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.mosaic-tile:hover .mosaic-img-wrap img {
  transform: scale(1.06);
}

.mosaic-pill {
  padding: 0.65rem 0.85rem;
  background: rgba(6, 16, 36, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #e2e8f0;
}

.mosaic-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

@media (max-width: 640px) {
  .profile-deco-cloud {
    display: none;
  }

  .profile-storyline {
    gap: 2rem;
    padding: 0 0.25rem 2rem;
  }

  .profile-editorial-card {
    padding: 1.35rem 1.15rem;
  }

  .profile-vignette-accent {
    width: 100%;
    margin-top: 0;
  }
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 9, 21, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lightbox-container {
  position: relative;
  z-index: 2;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
}

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

.lightbox-caption {
  width: 100%;
  padding: 0.9rem 1.25rem;
  background: rgba(8, 15, 30, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lightbox-close:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: rgba(239, 68, 68, 1);
  transform: scale(1.08);
}

/* =============================================================================
   LOKASI VIEW REDESIGN (PROFILE THEME & 3D VIEW MAP SYSTEM)
   ============================================================================= */

.lokasi-storyline {
  position: relative;
  width: 100%;
  max-width: 76rem;
  margin: auto;
  gap: 1.25rem;
}

.lokasi-header {
  margin-bottom: 0;
}

.lokasi-content-wrap {
  position: relative;
  width: 100%;
  background: rgba(3, 10, 26, 0.40);
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 24px;
  padding: 3rem 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  overflow: visible;
}

/* Rating Pill Resmi Google Maps */
.lokasi-google-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-family: var(--font-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  color: #fbbf24;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.lokasi-google-rating-pill:hover {
  transform: translateY(-1px);
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.6);
}

.lokasi-google-rating-pill .rating-stars {
  color: #f59e0b;
  letter-spacing: 0.05em;
}

.lokasi-google-rating-pill .rating-val {
  color: #ffffff;
  font-weight: 700;
}

.lokasi-google-rating-pill .rating-count {
  color: #cbd5e1;
  font-size: 0.74rem;
  font-weight: 500;
}

.lokasi-streetview-btn-wrap {
  margin-top: 0.5rem;
}

/* Real Google Street View 360 Embed Frame */
.lokasi-streetview-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #08162b;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(56, 189, 248, 0.12);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.lokasi-streetview-frame:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 18px 40px -10px rgba(56, 189, 248, 0.28), 0 0 20px rgba(56, 189, 248, 0.15);
}

.lokasi-streetview-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Glassmorphic Map Card */
.lokasi-map-card {
  position: relative;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(6, 32, 54, 0.45) 50%, rgba(2, 14, 32, 0.68) 100%);
  border: 1px solid rgba(56, 189, 248, 0.42);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  box-sizing: border-box;
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.65), 0 0 32px rgba(56, 189, 248, 0.20), inset 0 1px 1px rgba(255, 255, 255, 0.16);
}

.lokasi-map-card::before {
  content: '';
  position: absolute;
  inset: -15px;
  background: radial-gradient(ellipse 75% 65% at 50% 30%, rgba(56, 189, 248, 0.22) 0%, rgba(14, 165, 233, 0.12) 45%, transparent 75%);
  z-index: -1;
  pointer-events: none;
  filter: blur(30px);
  border-radius: 30px;
}

/* Map Frame Responsif */
.lokasi-map-frame {
  width: 100%;
  height: 380px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #08162b;
  position: relative;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
}

.lokasi-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Navigation Metadata Strip di Bawah Peta */
.lokasi-map-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lokasi-strip-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.82rem;
  color: #94a3b8;
}

.lokasi-strip-item strong {
  color: #f1f5f9;
}

@media (max-width: 768px) {
  .lokasi-content-wrap {
    padding: 2rem 1rem;
    gap: 2.5rem;
  }
  .lokasi-map-card {
    padding: 1.25rem 1rem;
  }
  .lokasi-map-frame,
  .lokasi-streetview-frame {
    height: 300px;
  }
  .lokasi-map-strip {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================================================
   KONTAK VIEW REDESIGN (MATCHING LOKASI THEME & 3 OFFICIAL CONTACTS)
   ============================================================================= */

.kontak-content-wrap {
  position: relative;
  width: 100%;
  background: rgba(3, 10, 26, 0.40);
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 24px;
  padding: 3rem 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  overflow: visible;
}

.kontak-person-act {
  display: flex;
  flex-direction: column;
}

.kontak-section-header {
  margin-bottom: 0.5rem;
}

.kontak-person-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  width: 100%;
}

.kontak-person-card {
  position: relative;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.7) 0%, rgba(3, 10, 26, 0.8) 100%);
  border: 1px solid rgba(var(--person-accent-rgb, 56, 189, 248), 0.25);
  border-radius: 18px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-sizing: border-box;
  text-align: left;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.kontak-person-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--person-accent-rgb, 56, 189, 248), 0.55);
  box-shadow: 0 12px 30px -8px rgba(var(--person-accent-rgb, 56, 189, 248), 0.25);
}

.kontak-card-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
}

.kontak-avatar-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kontak-person-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.25rem;
}

.kontak-role-badge {
  font-family: var(--font-ui, sans-serif);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  border: 1px solid;
  width: fit-content;
  text-align: left;
}

.kontak-person-name {
  font-family: var(--font-heading, sans-serif);
  font-size: 1.12rem;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
  text-align: left;
}

.kontak-phone-highlight {
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: #f1f5f9;
  text-align: center;
  letter-spacing: 0.02em;
}

.kontak-person-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #94a3b8;
  margin: 0;
  flex-grow: 1;
  text-align: left;
}

.kontak-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

/* Schedule Card (Babak 2) */
.kontak-schedule-card {
  position: relative;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(6, 32, 54, 0.45) 50%, rgba(2, 14, 32, 0.68) 100%);
  border: 1px solid rgba(56, 189, 248, 0.42);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  box-sizing: border-box;
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
}

.kontak-time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kontak-time-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  box-sizing: border-box;
}

.kontak-time-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kontak-time-hours {
  font-family: var(--font-heading, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #f8fafc;
}

.kontak-time-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #94a3b8;
  margin: 0;
}

/* Pengajian Routine Box */
.kontak-pengajian-box {
  background: rgba(244, 63, 94, 0.07);
  border: 1px solid rgba(244, 63, 94, 0.28);
  border-radius: 14px;
  padding: 1.15rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.kontak-pengajian-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #fb7185;
  font-family: var(--font-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.kontak-pengajian-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.kontak-pengajian-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: #cbd5e1;
}

.pengajian-day {
  font-weight: 700;
  color: #f1f5f9;
  min-width: 190px;
}

.pengajian-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
}

.status-closed {
  background: rgba(244, 63, 94, 0.2);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.4);
}

.status-flex {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.pengajian-detail {
  color: #94a3b8;
}

@media (max-width: 900px) {
  .kontak-person-grid {
    grid-template-columns: 1fr;
  }
  .kontak-time-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* 1. Global Viewport & Container Containment (Kunci kiri & kanan, cegah scroll horizontal) */
  html, body, #app, .view {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
  }

  .work-container,
  .profile-container,
  .lokasi-container,
  .kontak-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .connect-display-area {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding: 1rem 0.6rem 4rem 0.6rem !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
  }

  .profile-storyline,
  .lokasi-storyline,
  .kontak-storyline {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    flex-shrink: 0 !important;
    min-height: min-content !important;
    touch-action: pan-y !important;
  }

  /* 2. Card Wrappers (Dinamis terkunci 100% horizontal di dalam wrapper, bebas scroll vertikal) */
  .profile-content-wrap,
  .lokasi-content-wrap,
  .kontak-content-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.25rem 0.75rem !important;
    gap: 2rem !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    flex-shrink: 0 !important;
    min-height: min-content !important;
    touch-action: pan-y !important;
  }

  .profile-editorial-card,
  .lokasi-map-card,
  .kontak-schedule-card,
  .kontak-person-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.15rem 0.85rem !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* 3. Layout Grid & Kolom Konten */
  .profile-act,
  .profile-hero-split,
  .strategy-split-layout,
  .profile-photo-cluster,
  .profile-story-col,
  .strategy-text-content,
  .strategy-photo-col,
  .profile-counter-grid,
  .profile-counter-item,
  .profile-mosaic-grid,
  .mosaic-tile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .profile-counter-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .profile-mosaic-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 4. Gambar, Street View 360, & Frame (Terkunci 100% dinamis di dalam wrapper) */
  .profile-vignette,
  .profile-vignette-main,
  .profile-vignette-accent,
  .strategy-photo-col .profile-vignette,
  .profile-counter-item .profile-vignette,
  .pannable-frame,
  .mosaic-img-wrap,
  .lokasi-streetview-frame,
  .lokasi-map-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .lokasi-streetview-btn-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .connect-action-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 5. Tipografi & Text Wrapping (Cegah teks terdorong ke luar kanan) */
  .profile-story-heading {
    font-size: clamp(1.2rem, 5.2vw, 1.45rem) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .profile-narrative-p {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
  }

  .profile-meta-row {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
  }

  .profile-kicker-tag,
  .profile-manager-pill,
  .lokasi-google-rating-pill {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .lokasi-map-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .pengajian-day {
    min-width: auto !important;
  }

  /* 6. Optimasi Awan Mobile: Sembunyikan awan dekoratif flanking untuk performa ultra-ringan & hilangkan overflow */
  .cloud-cluster-flock,
  .ambient-cloud-track,
  .profile-deco-cloud {
    display: none !important;
  }
}