Saf CSS ve JavaScript ile Erişilebilir Akordeon

<div class="acc">
  <h3><button aria-expanded="true" aria-controls="p1">Teslimat ne kadar sürer?</button></h3>
  <div id="p1" class="panel open"><p>Hazır temalar anında, özel tasarımlar 5–15 iş günü içinde teslim edilir.</p></div>
  <h3><button aria-expanded="false" aria-controls="p2">Kaynak kodlar dahil mi?</button></h3>
  <div id="p2" class="panel"><p>Evet. Tüm dosyalar düzenlenebilir ve yorum satırlarıyla açıklanmıştır.</p></div>
  <h3><button aria-expanded="false" aria-controls="p3">Destek veriyor musunuz?</button></h3>
  <div id="p3" class="panel"><p>Satın alma sonrası destek talebi açarak bize ulaşabilirsin.</p></div>
</div>

body{margin:0;padding:24px;background:#f1f5f9;font-family:system-ui,sans-serif}
.acc{max-width:480px;margin:auto;background:#fff;border-radius:18px;padding:8px;box-shadow:0 18px 40px -22px rgba(15,23,42,.45)}
h3{margin:0}
button{width:100%;text-align:left;padding:16px 18px;border:0;background:none;font:600 15px system-ui;color:#0f172a;cursor:pointer;display:flex;justify-content:space-between;border-radius:12px}
button:hover{background:#eef2ff}button:focus-visible{outline:3px solid #818cf8}
button::after{content:"+";font-size:20px;line-height:1;transition:transform .25s}
button[aria-expanded=true]::after{transform:rotate(45deg)}
.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.panel.open{grid-template-rows:1fr}
.panel p{overflow:hidden;margin:0;padding:0 18px;color:#475569;line-height:1.6}
.panel.open p{padding-bottom:16px}

document.querySelectorAll('.acc button').forEach((btn) => {
  btn.addEventListener('click', () => {
    const open = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!open));
    document.getElementById(btn.getAttribute('aria-controls')).classList.toggle('open', !open);
  });
});