/**
* anasayfa-sss.css
*
* Anasayfa "Sıkça Sorulanlar" section'unun profesyonel accordion tasarımı.
*
* Markup (views/frontend/home.php SSS bloğu):
*
*
*
* Soru metni?
*
*
*
*
*
modern tarayıcılarda (Chrome 120+,
* Safari 17.2+, Firefox 123+) native exclusive accordion verir; bir
* açılınca diğeri kapanır. Eski tarayıcılar için anasayfa-sss.js
* polyfill yapar.
* - Soru numarası (01, 02…) CSS counter ile basılır - JSON sırasına göre
* otomatik artar, view tarafında index gerekmez.
* - Açılırken cevap chevron 180° döner, açık item ve numara rozeti brand
* yeşili ile vurgulanır.
* - .sss-cevap class adı korunuyor - JSON-LD FAQPage Speakable
* cssSelector referansı bu sınıfa bağlı.
*
* Pattern: urun-sss.css ile birebir paralel - aynı UX, ayrı namespace
* (anasayfa-sss-*) anasayfanın farklı container/spacing'iyle çakışmasın
* diye. Ortak utility class'lar (.sss-soru/.sss-cevap/.sss-icon) iki
* component'te de aynı görevi yapar.
*/
.anasayfa-sss-listesi {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
counter-reset: anasayfa-sss-counter;
}
/* Desktop (lg+) iki sütun grid - 12 soruda dikey yükseklik yarıya iner.
align-items: start ile bir item açılıp uzayınca yanındaki kart esnemez,
sadece kendi hücresi büyür. exclusive
accordion davranışı korunur; çapraz sütundan açılınca diğeri kapanır. */
@media (min-width: 992px) {
.anasayfa-sss-listesi {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 12px;
row-gap: 8px;
align-items: start;
}
}
.anasayfa-sss-item {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
counter-increment: anasayfa-sss-counter;
}
.anasayfa-sss-item:hover {
border-color: var(--brand-primary-light);
box-shadow: 0 2px 10px rgba(21, 128, 61, 0.06);
}
.anasayfa-sss-item[open] {
border-color: var(--brand-primary);
box-shadow: 0 6px 20px rgba(21, 128, 61, 0.10);
background: linear-gradient(180deg, var(--brand-primary-soft) 0%, #fff 65%);
}
/* Summary - soru başlığı. Native marker (üçgen) gizlenir, kendi chevron'umuz
sağda durur. Safari bazı sürümlerde cursor:pointer kalıtsal değil, explicit. */
.anasayfa-sss-item > .sss-soru {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
font-weight: 600;
font-size: 15.5px;
color: var(--c-text);
line-height: 1.45;
user-select: none;
transition: color 0.15s ease;
}
.anasayfa-sss-item > .sss-soru::-webkit-details-marker { display: none; }
.anasayfa-sss-item > .sss-soru::marker { display: none; content: ""; }
.anasayfa-sss-item:hover > .sss-soru,
.anasayfa-sss-item[open] > .sss-soru {
color: var(--brand-primary-dark);
}
/* Numara rozeti - CSS counter ile otomatik 01, 02… */
.anasayfa-sss-item > .sss-soru::before {
content: counter(anasayfa-sss-counter, decimal-leading-zero);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 9px;
border-radius: 10px;
background: var(--brand-primary-soft);
color: var(--brand-primary-dark);
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.5px;
flex-shrink: 0;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.anasayfa-sss-item[open] > .sss-soru::before {
background: var(--brand-primary);
color: #fff;
transform: scale(1.04);
}
.sss-soru-text {
flex: 1;
min-width: 0;
}
/* Chevron - 180° rotate açıldığında */
.anasayfa-sss-item .sss-icon {
flex-shrink: 0;
font-size: 18px;
color: var(--c-text-muted);
transition: transform 0.3s ease, color 0.2s ease;
will-change: transform;
}
.anasayfa-sss-item:hover .sss-icon {
color: var(--brand-primary);
}
.anasayfa-sss-item[open] .sss-icon {
transform: rotate(180deg);
color: var(--brand-primary);
}
/* Cevap wrapper - native render eder, biz padding/ayraç ekleriz */
.anasayfa-sss-item .sss-cevap-wrap > .sss-cevap {
padding: 0 18px 16px 68px; /* sol = 18 + 36 numara + 14 gap = 68 */
color: var(--c-text-2);
line-height: 1.65;
font-size: 14.5px;
}
/* Cevap üst kenarına ince ayraç - soru ile cevabı görsel olarak ayır */
.anasayfa-sss-item .sss-cevap-wrap > .sss-cevap::before {
content: "";
display: block;
height: 1px;
background: var(--brand-primary-light);
margin: 0 0 12px 0;
}
/* Tablet */
@media (max-width: 768px) {
.anasayfa-sss-item > .sss-soru {
padding: 16px 16px;
font-size: 15px;
gap: 12px;
}
.anasayfa-sss-item > .sss-soru::before {
min-width: 32px;
height: 32px;
font-size: 12px;
padding: 0 7px;
}
.anasayfa-sss-item .sss-cevap-wrap > .sss-cevap {
padding: 0 16px 16px 60px;
font-size: 14.5px;
}
}
/* Mobil dar */
@media (max-width: 480px) {
.anasayfa-sss-item > .sss-soru {
padding: 14px 14px;
gap: 10px;
font-size: 14.5px;
}
.anasayfa-sss-item > .sss-soru::before {
min-width: 28px;
height: 28px;
font-size: 11.5px;
padding: 0 6px;
border-radius: 8px;
}
.anasayfa-sss-item .sss-icon { font-size: 16px; }
.anasayfa-sss-item .sss-cevap-wrap > .sss-cevap {
padding: 0 14px 14px 14px; /* numara altına hizalama yerine flush */
font-size: 14px;
line-height: 1.65;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.anasayfa-sss-item,
.anasayfa-sss-item .sss-icon,
.anasayfa-sss-item > .sss-soru::before {
transition: none;
}
}