/* Bileşen: Sıkça Sorulan Sorular akordeonu (inc/faq.php)

   <details>/<summary> üzerine kurulu — açılma davranışı tarayıcıdan
   geliyor, JS gerekmiyor. */

.ar-sss {
  padding-block: clamp(48px, 6vw, 88px);
  background: var(--ar-bg);
}

.ar-sss__ic {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.ar-sss__baslik {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-family: var(--ar-font-heading);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  color: var(--ar-navy);
  text-align: center;
}

.ar-sss__liste {
  display: grid;
  gap: 10px;
}

.ar-sss__oge {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-md);
  transition: border-color var(--ar-transition), box-shadow var(--ar-transition);
}

.ar-sss__oge[open] {
  border-color: var(--ar-green-light);
  box-shadow: 0 6px 22px rgb(15 27 70 / 8%);
}

.ar-sss__soru {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.5vw, 24px);
  font-family: var(--ar-font-heading);
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight: 600;
  color: var(--ar-navy);
  cursor: pointer;
  list-style: none;
}

/* Webkit'in varsayılan üçgenini kaldırır. list-style:none tek başına
   Safari'de yetmiyor. */
.ar-sss__soru::-webkit-details-marker {
  display: none;
}

.ar-sss__soru:hover {
  color: var(--ar-green-deep);
}

.ar-sss__soru:focus-visible {
  outline: 2px solid var(--ar-green);
  outline-offset: -2px;
}

/* Metin flex öğesi olduğu için min-width:0 şart; yoksa uzun soru
   sarmayıp işareti kenardan taşırıyor. */
.ar-sss__soru-metin {
  min-width: 0;
}

/* İŞARET: SAĞA BAKAN OK — artı DEĞİL.
   Sitede her yerde aynı ok kullanılıyor; artı ikinci bir işaret dili
   oluşturuyordu. Açıldığında 90° dönüp aşağı bakar, yani hem "aç"
   hem "kapat" durumu tek işaretle anlaşılır. */
.ar-sss__isaret {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--ar-green);
  transition: transform 0.25s ease, color 0.25s ease;
}

.ar-sss__isaret::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  /* Sağa bakan ince ok — footer bağlantılarındakiyle aynı biçim. */
  clip-path: path("M2 7.6h9.4L8 4.2 9.6 2.6 16 9l-6.4 6.4L8 13.8l3.4-3.4H2z");
}

.ar-sss__oge[open] .ar-sss__isaret {
  color: var(--ar-green-deep);
  transform: rotate(90deg);
}

.ar-sss__cevap {
  padding: 0 clamp(16px, 2.5vw, 24px) clamp(16px, 2.5vw, 22px);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ar-muted);
}

.ar-sss__cevap > :first-child { margin-top: 0; }
.ar-sss__cevap > :last-child { margin-bottom: 0; }

.ar-sss__cevap a {
  color: var(--ar-green-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Koyu bölüm içinde kullanılırsa (ar-sahne) kutular açık kalmalı:
   akordeon beyaz zeminli, metni koyu. dark.css'in genel kuralı
   metni beyaza çevirip görünmez bırakıyordu. */
.ar-sahne.ar-sahne .ar-sss__oge :is(h2, h3, p, li, dd, dt) {
  color: var(--ar-muted);
}

.ar-sahne.ar-sahne .ar-sss__soru {
  color: var(--ar-navy);
}

@media (prefers-reduced-motion: reduce) {
  .ar-sss__isaret::before,
  .ar-sss__isaret::after { transition: none; }
}

/* =========================================================================
   YAZI İÇİNE GÖMÜLÜ SORU KUTULARI
   -------------------------------------------------------------------------
   Sorular yazının her yerine dağılmış; tek blokta toplanmıyor, her biri
   bulunduğu yerde açılır kutuya dönüşüyor. Bu yüzden görünüm bölüm
   akordeonundan farklı: daha hafif, metnin ritmini bozmayan bir kutu.
   ========================================================================= */

.ar-sss__oge--gomulu {
  margin: clamp(20px, 3vw, 30px) 0;
  background: color-mix(in srgb, var(--ar-silver-soft) 55%, #fff);
  border: 1px solid var(--ar-border);
  border-left: 3px solid var(--ar-green-light);
  border-radius: var(--ar-radius-md);
}

.ar-sss__oge--gomulu[open] {
  background: #fff;
  border-left-color: var(--ar-green);
  box-shadow: 0 6px 20px rgb(15 27 70 / 7%);
}

/* Soru başlığı bir <summary>; içerik hiyerarşisinde h2/h3 yerine
   geçtiği için tipografisi başlığa yakın tutuluyor. */
.ar-sss__oge--gomulu .ar-sss__soru {
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 22px);
  font-size: clamp(1rem, 1.7vw, 1.125rem);
  font-weight: 700;
  color: var(--ar-navy);
}

.ar-sss__oge--gomulu .ar-sss__cevap {
  padding: 0 clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 20px);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ar-muted);
}

/* Cevabın içindeki alt başlıklar korunuyor (h3 cevabının içindeki h4
   gibi); yazı akışında kaybolmasınlar diye biraz küçültülüyor. */
.ar-sss__oge--gomulu .ar-sss__cevap :is(h2, h3, h4) {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 1.0625rem;
  color: var(--ar-navy);
}

.ar-sss__oge--gomulu .ar-sss__cevap > :first-child { margin-top: 0; }
.ar-sss__oge--gomulu .ar-sss__cevap > :last-child { margin-bottom: 0; }

/* Gömülü kutu içindeki tablolar da sarmalı kalsın. */
.ar-sss__oge--gomulu .ar-tablo-kap {
  margin: 16px 0;
}