/* ============================================================
   Anasayfa - Sikca Sorulan Sorular bolumu
   Tarih: 2026-08-28

   Tailwind sinifiyla ifade edilemeyen kisimlar burada: yumusak
   acilma animasyonu, sayi rozeti ve acik durumun vurgusu.
============================================================ */

/* ---------- Kart ---------- */
.sss-oge{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sss-oge:hover{
  border-color:#c7d2fe;
}
/* Acik olan oge one cikar: kullanici nerede oldugunu kaybetmesin. */
.sss-oge:not(.sss-kapali){
  border-color:#bfdbfe;
  box-shadow:0 8px 24px -12px rgb(37 99 235 / .35);
}

/* ---------- Baslik dugmesi ---------- */
.sss-baslik{ margin:0; }
.sss-dugme{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:.875rem;
  padding:1.15rem 1.25rem;
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:#111827;
}
.sss-dugme:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:-2px;
  border-radius:1rem;
}

/* Sira rozeti - acikken markalanir */
.sss-no{
  flex:0 0 auto;
  width:1.75rem;
  height:1.75rem;
  margin-top:.05rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:.5rem;
  background:#f3f4f6;
  color:#9ca3af;
  font-size:.7rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  transition:background-color .25s ease, color .25s ease;
}
.sss-oge:not(.sss-kapali) .sss-no{
  background:#2563eb;
  color:#fff;
}

.sss-metin{
  flex:1 1 auto;
  font-size:.975rem;
  font-weight:700;
  line-height:1.5;
  transition:color .2s ease;
}
.sss-dugme:hover .sss-metin{ color:#2563eb; }

.sss-ok{
  flex:0 0 auto;
  width:1.75rem;
  height:1.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  background:#f3f4f6;
  color:#6b7280;
  font-size:.7rem;
  transition:transform .3s ease, background-color .25s ease, color .25s ease;
}
.sss-oge:not(.sss-kapali) .sss-ok{
  transform:rotate(180deg);
  background:#dbeafe;
  color:#2563eb;
}

/* ---------- Yumusak acilma ----------
   ONCE grid-template-rows 0fr<->1fr denendi (CSS'te daha temiz,
   yukseklik olcmeye gerek yok). TARAYICIDA TEST EDILDI: gecis
   tamamlanmiyor, deger eski halinde takili kaliyor ve akordiyon
   gorsel olarak hic acilmiyordu. CSS.supports('grid-template-rows',
   '0fr') true donuyor ama bu yalnizca DEGERIN ayristirilabildigini
   soyluyor, ANIMASYON edilebildigini degil -- tuzak burasi.

   Bu yuzden max-height'e donuldu: JS acilirken scrollHeight'i
   yaziyor, gecis bitince 'none' yapiyor (icerik sonradan buyurse
   kirpilmasin diye).

   VARSAYILAN ACIK: JavaScript calismazsa .sss-js sinifi hic
   eklenmez, asagidaki kurallar devreye girmez ve butun cevaplar
   okunabilir kalir. */
.sss-govde{
  overflow:hidden;
}
.sss-js .sss-govde{
  transition:max-height .32s cubic-bezier(.4,0,.2,1);
}
.sss-js .sss-oge.sss-kapali .sss-govde{
  max-height:0;
}
.sss-ic > div{
  padding:0 1.25rem 1.25rem 3.9rem;   /* sol: rozet genisligi kadar hizali */
  color:#4b5563;
  line-height:1.7;
  font-size:.9375rem;
}
.sss-ic p{ margin:0 0 .75rem; }
.sss-ic p:last-child{ margin-bottom:0; }
.sss-ic a{ color:#2563eb; text-decoration:underline; text-underline-offset:2px; }
.sss-ic ul,.sss-ic ol{ margin:.25rem 0 .75rem 1.1rem; }
.sss-ic li{ margin-bottom:.3rem; }

@media (max-width:640px){
  .sss-ic > div{ padding-left:1.25rem; }   /* dar ekranda girinti yer yiyor */
}

/* Hareket azaltma tercihi: animasyon yok, durum degisimi aninda. */
@media (prefers-reduced-motion: reduce){
  .sss-oge,.sss-govde,.sss-ok,.sss-no,.sss-metin{ transition:none; }
}