/* 10-sss.css — bölüm 10: <details> listesi, özel ok işareti, odak halkası. */

.sahne-sss {
  min-height: 100vh;
  display: grid; gap: 28px;
  padding: 110px clamp(16px, 7vw, 120px) 90px;
  max-width: 760px; margin: 0 auto;
}

.sss-liste { display: grid; gap: 10px; }

.sss-soru {
  border: 1px solid var(--cizgi); border-radius: 16px;
  background: color-mix(in srgb, var(--kart-zemin) 92%, transparent);
  overflow: hidden;
}
.sss-soru summary {
  list-style: none; cursor: pointer; font: 700 16px var(--govde-font); color: #1e1a16;
  padding: 16px 46px 16px 18px; min-height: 44px; display: flex; align-items: center;
  position: relative;
}
.sss-soru summary::-webkit-details-marker { display: none; }
.sss-soru summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--kor); border-bottom: 2px solid var(--kor);
  transform: translateY(-65%) rotate(45deg); transition: transform 0.25s var(--yay);
}
.sss-soru[open] summary::after { transform: translateY(-35%) rotate(-135deg); }
.sss-soru summary:focus-visible { outline: 2px solid var(--altin); outline-offset: -2px; border-radius: 12px; }

.sss-soru p {
  margin: 0; padding: 0 18px 18px; font-size: 14.5px; line-height: 1.55; color: #4a4136;
}

@media (prefers-reduced-motion: reduce) {
  .sss-soru summary::after { transition: none; }
}

@media (max-width: 480px) {
  .sahne-sss { padding-top: 100px; }
}

/* Cevap içi bağlantı (Normo Web) — gizlilik notuyla aynı renk. */
.sahne-sss details a { color: var(--altin); }
.sahne-sss details a:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; }