/* Xiao Pinpin Music – Aksesibel, ringan, Apple-ish */
:root{
  --bg:#ffffff; --fg:#0a0a0a; --muted:#5a5a5a; --accent:#0071e3; --border:#e5e5e7; --focus:#ff9500;
  --maxw:72rem;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f0f10; --fg:#f5f5f7; --muted:#c2c2c2; --border:#2a2a2c; --accent:#0a84ff; --focus:#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}
nav a:focus, nav a[aria-current="page"]{border-color:var(--border); background:rgba(100,100,100,0.06)}
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)}