/* Xiao Pinpin Music – Aksesibel, ringan, Apple-style (2026.3 Beta Engine + SEO BUSTER) */
:root{
  --bg:#ffffff; --fg:#0a0a0a; --muted:#525252; --accent:#0050c7; --accent-ink:#ffffff; --border:#e5e5e7; --focus-ink:#111111; --focus-halo:#ffbf00;
  --maxw:72rem;
  
  /* 2026.3 Beta: Enhanced color system with OKLCH support */
  --brand-hue: 220;
  --brand-oklch: oklch(0.6 0.15 var(--brand-hue));
  --accent-oklch: oklch(0.65 0.18 var(--brand-hue));
  
  /* SEO BUSTER: Core Web Vitals optimization */
  --transition-fast: 150ms ease-out;
  --transition-base: 300ms ease-out;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f0f10; --fg:#f5f5f7; --muted:#c2c2c2; --border:#2a2a2c; --accent:#52a8ff; --accent-ink:#0a0a0a; --focus-ink:#ffffff; --focus-halo:#ffd60a; }
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0; font:16px/1.6 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--fg);}
a{color:var(--accent); text-decoration:underline}
a:focus{outline:3px solid var(--focus); outline-offset:2px}
img{max-width:100%; height:auto}
.container{max-width:var(--maxw); margin-inline:auto; padding:24px}
.header{border-bottom:1px solid var(--border); background:transparent}
.brand{display:flex; align-items:center; gap:16px; padding:16px 24px}
.brand .text{display:flex; flex-direction:column}
.brand h1{font-size:28px; margin:0}
.brand .subtitle{color:var(--muted); font-size:16px}
nav{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:transparent}
nav .navwrap{display:flex; gap:16px; flex-wrap:wrap; padding:12px 24px}
nav a{padding:8px 12px; border-radius:12px; text-decoration:none; border:1px solid transparent; transition: all var(--transition-fast)}
nav a:focus, nav a[aria-current="page"]{border-color:var(--border); background:rgba(100,100,100,0.06)}

/* 2026.3 Beta: Sibling-index animations for navigation */
nav a {
  transition-delay: calc((sibling-index() - 1) * 50ms);
  @starting-style {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* 2026.3 Beta: Container scroll-state for sticky navigation */
nav {
  container-type: scroll-state;
  position: sticky;
  top: 0;
  z-index: 100;
}

@container scroll-state(stuck) {
  nav {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.8);
  }
  @media (prefers-color-scheme: dark) {
    nav {
      background: rgba(15, 15, 16, 0.8);
    }
  }
}

main{padding:24px}
footer{border-top:1px solid var(--border); padding:24px; color:var(--muted)}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:static; width:auto; height:auto; margin:8px; padding:8px 12px; background:var(--accent); color:white; border-radius:12px}
.btn{display:inline-block; padding:12px 16px; border-radius:14px; border:1px solid var(--border); text-decoration:none}
.btn:focus{outline:3px solid var(--focus); outline-offset:2px}
.lang-switch{margin-top:24px}
figure{margin:0}

/* Salam & Doa di beranda */
.hero-salam{padding:24px; margin-top:8px; border-bottom:1px solid var(--border)}
.hero-salam .salam{font-size:22px; font-weight:700; margin:0 0 8px 0}
.hero-salam .doa{margin:0; color:var(--muted)}

/* Responsive embeds (V2.0) */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* 2026.3 Beta: Enhanced responsive design with modern CSS */
@media (max-width: 768px) {
  .container {
    padding: 16px;
  }
  
  .brand {
    padding: 12px 16px;
    gap: 12px;
  }
  
  .brand h1 {
    font-size: 24px;
  }
  
  .brand .subtitle {
    font-size: 14px;
  }
  
  nav .navwrap {
    padding: 8px 16px;
    gap: 8px;
  }
  
  nav a {
    padding: 6px 10px;
    font-size: 14px;
    transition-delay: calc((sibling-index() - 1) * 25ms);
  }
  
  main {
    padding: 16px;
  }
  
  footer {
    padding: 16px;
  }
  
  .hero-salam {
    padding: 16px;
    margin-top: 0;
  }
  
  .hero-salam .salam {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .brand {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  .brand h1 {
    font-size: 20px;
  }
  
  nav .navwrap {
    flex-direction: column;
    gap: 4px;
  }
  
  nav a {
    width: 100%;
    text-align: center;
    padding: 8px;
  }
}

/* 2026.3 Beta: Container queries for modern responsive design */
@container (max-width: 400px) {
  .btn {
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* 2026.3 Beta: Enhanced dark mode with OKLCH */
@media (prefers-color-scheme: dark) {
  :root{ 
    --bg:#0f0f10; 
    --fg:#f5f5f7; 
    --muted:#c2c2c2; 
    --border:#2a2a2c; 
    --accent:#52a8ff; 
    --accent-ink:#0a0a0a; 
    --focus-ink:#ffffff; 
    --focus-halo:#ffd60a;
    
    /* Enhanced dark mode with OKLCH */
    --brand-oklch: oklch(0.7 0.12 var(--brand-hue));
    --accent-oklch: oklch(0.75 0.15 var(--brand-hue));
  }
}

/* 2026.3 Beta: WCAG AAA Screen Reader Support */
.xpp-sr-only{
  position:absolute!important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* 2026.3 Beta: Enhanced VoiceOver support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 2026.3 Beta: Focus management for screen readers */
:focus-visible {
  outline: 3px solid var(--focus-halo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 2026.3 Beta: Enhanced landmark navigation */
[role="banner"], [role="navigation"], [role="main"], [role="contentinfo"] {
  position: relative;
}

[role="banner"]::before,
[role="navigation"]::before,
[role="main"]::before,
[role="contentinfo"]::before {
  content: attr(aria-label);
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* 2026.3 Beta: VoiceOver-friendly language switcher */
.xpp-langbtn {
  /* Enhanced touch target for VoiceOver */
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xpp-langlist a {
  /* Better spacing for VoiceOver navigation */
  padding: 12px 16px;
  margin: 2px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* 2026.3 Beta: Skip link enhancement */
.skip-link:focus {
  /* VoiceOver announcement enhancement */
  transform: scale(1.05);
  box-shadow: 0 0 0 4px var(--focus-halo);
}

/* 2026.3 Beta: Enhanced form inputs */
input, textarea, select, button {
  /* Better touch targets for accessibility */
  min-height: 44px;
  font-size: 16px; /* Prevent zoom on iOS */
}

/* 2026.3 Beta: Link spacing for VoiceOver */
nav a {
  margin: 2px;
  padding: 12px 16px;
  min-height: 44px;
}

/* 2026.3 Beta: Reading order indicators */
main {
  /* Clear reading order for screen readers */
  position: relative;
  z-index: 1;
}

/* 2026.3 Beta: Enhanced contrast for WCAG AAA */
@media (prefers-contrast: high) {
  :root {
    --bg: #000000;
    --fg: #ffffff;
    --accent: #ffff00;
    --border: #ffffff;
    --focus-halo: #00ff00;
  }
}

/* Premium keyboard focus */
:focus{ outline:none; }
:focus-visible{
  outline:3px solid var(--focus-ink);
  outline-offset:3px;
  box-shadow:0 0 0 6px var(--focus-halo);
}

/* Skip link: always high contrast in both modes */
.skip-link:focus{
  background:var(--accent);
  color:var(--accent-ink);
}

/* SEO helper links: keep for crawlers, hide from humans and screen readers */
.seo-langlinks{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}