/* ═══════════════════════════════════════════════════════════════════
   SULTAN STYLE 2026 — Bleeding-Edge Addendum (Build 3.9.9)
   5 teknologi baru Chrome stable April 2026
   Author: Claude Opus untuk Xiao Pinpin Music
   Dibuat: 20 April 2026
   ═══════════════════════════════════════════════════════════════════

   Filosofi: Om Steve "Simplicity is the ultimate sophistication"
             Om Jony "The best design is invisible"

   1. interpolate-size: allow-keywords  (Chrome 129+)
      → Animasi height 0 → height auto real-time
   2. :target-current + :target          (Baseline)
      → Highlight link current FAQ/anchor
   3. shape() function                   (Chrome 135+)
      → Clip-path organik untuk hero
   4. field-sizing: content              (Chrome 123+)
      → Form textarea auto-grow tanpa JS
   5. @starting-style enhancement        (Build atas dasar existing)
      → Smooth enter untuk dynamic content
   ═══════════════════════════════════════════════════════════════════ */

/* === 1. INTERPOLATE-SIZE: animasi height auto yang akhirnya REAL === */
:root {
  interpolate-size: allow-keywords;
}

/* FAQ accordion: buka-tutup smooth tanpa JS max-height trick */
details.xpp-faq-item {
  transition: height 0.4s var(--ease);
  overflow: hidden;
}
details.xpp-faq-item:not([open]) {
  height: auto;
}
details.xpp-faq-item[open] {
  height: auto;
}

/* Dynamic content reveal (testimoni, section loading) */
.xpp-reveal-height {
  overflow: hidden;
  transition: height 0.5s var(--ease);
}

/* === 2. :target-current — Highlight anchor link saat dikunjungi === */
@supports selector(:target-current) {
  :target-current {
    background: rgba(184, 146, 58, 0.12);
    border-left: 3px solid var(--gold);
    padding-left: 1rem;
    border-radius: 0 12px 12px 0;
    scroll-margin-top: 100px;
    animation: xpp-targetPulse 0.6s var(--ease);
  }
  [dir="rtl"] :target-current {
    border-left: none;
    border-right: 3px solid var(--gold);
    padding-left: 0;
    padding-right: 1rem;
    border-radius: 12px 0 0 12px;
  }
}

/* Fallback untuk browser lama — :target biasa */
:target {
  scroll-margin-top: 100px;
}

@keyframes xpp-targetPulse {
  0% { background: rgba(184, 146, 58, 0.3); }
  100% { background: rgba(184, 146, 58, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
  @supports selector(:target-current) {
    :target-current {
      animation: none !important;
    }
  }
}

/* === 3. shape() — organic hero clip untuk editorial touch === */
@supports (clip-path: shape(from 0 0, line to 100% 0)) {
  .xpp-hero {
    clip-path: shape(
      from 0 0,
      line to 100% 0,
      line to 100% 92%,
      curve to 50% 100% with 75% 98%,
      curve to 0 92% with 25% 98%,
      close
    );
    transition: clip-path 0.8s var(--ease);
  }
  /* Variasi subtle untuk service pages */
  .xpp-card.xpp-shape-organic {
    clip-path: shape(
      from 4% 0,
      line to 96% 0,
      curve to 100% 4% with 98% 1%,
      line to 100% 96%,
      curve to 96% 100% with 99% 99%,
      line to 4% 100%,
      curve to 0 96% with 1% 99%,
      line to 0 4%,
      curve to 4% 0 with 1% 1%,
      close
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  @supports (clip-path: shape(from 0 0, line to 100% 0)) {
    .xpp-hero {
      transition: none !important;
    }
  }
}

/* === 4. field-sizing: content — Textarea auto-grow untuk brief form === */
@supports (field-sizing: content) {
  textarea,
  input[type="text"].xpp-autogrow,
  input[type="email"].xpp-autogrow {
    field-sizing: content;
    min-height: 3em;
    max-height: 20em;
    resize: none;
    transition: min-height 0.3s var(--ease);
  }
  /* Khusus brief form — terlihat lebih premium */
  textarea[name*="detail"],
  textarea[name*="brief"],
  textarea[name*="message"] {
    field-sizing: content;
    min-height: 5em;
  }
}

/* === 5. @starting-style enhancement — Smooth reveal untuk anchor-target === */
@supports (transition-behavior: allow-discrete) {
  /* Section yang jadi :target animasi masuk smooth */
  section:target {
    @starting-style {
      opacity: 0.6;
      transform: scale(0.98);
    }
    transition: opacity 0.4s var(--ease),
                transform 0.4s var(--ease);
  }

  /* Dialog/popover modern pattern untuk future use */
  dialog.xpp-modal {
    transition: opacity 0.35s var(--ease),
                transform 0.35s var(--ease),
                display 0.35s allow-discrete,
                overlay 0.35s allow-discrete;
    @starting-style {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @supports (transition-behavior: allow-discrete) {
    section:target,
    dialog.xpp-modal {
      transition: none !important;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   END SULTAN STYLE 2026 ADDENDUM
   Total: 5 teknologi bleeding-edge, progressive enhancement pattern
   Zero breaking changes — graceful degradation untuk browser lama
   ═══════════════════════════════════════════════════════════════════ */