/* ===== Xomage S.S.S. kalemi — akordeon soru/cevap kutusu ===== */

/*
 * "Web S.S.S 1" (11:662, hepsi kapalı) ve "Web S.S.S 2" (11:797, hepsi açık)
 * frame'lerinden, 1920 tasarım genişliği:
 *   soru kutusu 1500x80 @x=210, bg #dfeff1, 1px #006673 kenarlık, radius 16
 *   soru metni Poppins Medium 26/42, yatay iç boşluk 73px → dikey (80-42)/2 = 19px
 *   cevap kutusu 1500 genişlik, beyaz, 1px #63c1c2 kenarlık, radius 16
 *   cevap metni Poppins Regular 26/42, iç boşluk 38px 73px
 *   soru ile cevap arası 14px
 * Mobil ("Mobil S.S.S 1" 74:424, 900 geniş): kutu 794x80 @x=53, iç boşluk 51px,
 * tipografi web ile birebir aynı (26/42) — telefon pikseli değil, dar bir düzen.
 *
 * Kalemler arası mesafe iki frame'de farklı: kapalıyken 16px, açıkken 40px.
 * Tek bir `gap` bunu veremez; fark cevabın 24px alt boşluğuyla karşılanıyor —
 * cevap gizliyken 16px, görünürken 24 + 16 = 40px. Böylece iki frame de birebir
 * çıkar. Boşluk `gap` yerine kalemin kendi `margin-bottom`'undadır, çünkü
 * IkasComponentRenderer çocukları üç sarmalayıcı içine koyuyor (bkz. Features).
 *
 * Renkler section'dan (XomageFaq) CSS değişkeni olarak iner; değişken yoksa
 * tasarım token'ına düşülür.
 */

.cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item {
  margin-bottom: 1rem;
}

.cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__heading {
  margin: 0;
}

.cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__question {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  border: 1px solid var(--xomage-faq-question-border, var(--xomage-link));
  border-radius: 16px;
  background: var(--xomage-faq-question-bg, var(--xomage-teal-tint));
  color: var(--xomage-faq-question-color, var(--xomage-link));
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

/*
 * Renkler prop'tan geldiği için hover/odak sabit bir renk seçemez; ikisi de
 * kutunun kendi kenarlık rengini kalınlaştırır.
 */
.cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__question:hover {
  box-shadow: 0 0 0 1px var(--xomage-faq-question-border, var(--xomage-link));
}

.cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__question:focus-visible {
  outline: 2px solid var(--xomage-faq-question-border, var(--xomage-link));
  outline-offset: 2px;
}

.cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__answer {
  margin-top: 0.875rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--xomage-faq-answer-border, var(--xomage-teal));
  border-radius: 16px;
  background: var(--xomage-faq-answer-bg, var(--kombos-white));
  color: var(--xomage-faq-answer-color, var(--xomage-ink));
}

.cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__collapse {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.42s var(--xomage-science-ease, cubic-bezier(.22, 1, .36, 1)), visibility 0s 0.42s;
}

.cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__collapse[data-open="true"] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__clip {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__collapse { transition: none; }
}

.cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__answer p {
  margin: 0 0 1rem;
}

.cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__answer p:last-child {
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__question {
    padding-inline: 2.4375rem;
  }

  .cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__answer {
    padding: 2rem 2.4375rem;
  }
}

@media (min-width: 1024px) {
  .cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__question {
    /* 80px kutu, 42px satır → (80-42)/2 = 19px dikey iç boşluk */
    padding: 1.1875rem 4.5625rem;
  }

  .cc_mfkw8zzp_W1T9uLlQsX .xomage-faq-item__answer {
    padding: 2.375rem 4.5625rem;
  }
}