/**
 * urun-sss.css
 *
 * Ürün detay sayfasındaki "Sıkça Sorulan Sorular" tab'ı için profesyonel
 * accordion tasarımı.
 *
 * Markup (views/frontend/urun.php tab-sss bloğu):
 *   <div class="urun-sss-listesi">
 *       <details class="urun-sss-item" name="urun-sss">
 *           <summary class="sss-soru">
 *               <span class="sss-soru-numara">01</span>
 *               <span class="sss-soru-text">Soru metni?</span>
 *               <i class="bi bi-chevron-down sss-icon" aria-hidden="true"></i>
 *           </summary>
 *           <div class="sss-cevap-wrap">
 *               <div class="sss-cevap">Cevap metni…</div>
 *           </div>
 *       </details>
 *   </div>
 *
 * Tasarım notları:
 *   - Her item ayrı kart: yumuşak border + 16px radius + hover'da brand
 *     yeşili lift. Tek tek hissetsin diye 10px gap.
 *   - <details name="urun-sss"> modern tarayıcılarda (Chrome 120+, Safari
 *     17.2+, Firefox 123+) doğal accordion davranışı verir; bir açılınca
 *     diğerleri kapanır. Eski tarayıcılar için urun-sss.js polyfill.
 *   - Soru numarası (01, 02…) markup'tan CSS counter ile basılır — JSON
 *     sırasına göre otomatik artar, view tarafında elle index gerekmez.
 *   - Açılırken cevap için grid-template-rows 0fr→1fr smooth animasyon;
 *     chevron 180° döner.
 *   - .sss-cevap class adı korunuyor — JSON-LD FAQPage Speakable
 *     cssSelector referansı bu sınıfa bağlı (urun.php yorum bloğu).
 */

.urun-sss-listesi {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    /* Numaralandırma için counter */
    counter-reset: sss-counter;
}

.urun-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, transform 0.2s ease;
    counter-increment: sss-counter;
}

.urun-sss-item:hover {
    border-color: var(--brand-primary-light);
    box-shadow: 0 2px 8px rgba(21, 128, 61, 0.06);
}

.urun-sss-item[open] {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 16px rgba(21, 128, 61, 0.10);
    background: linear-gradient(180deg, var(--brand-primary-soft) 0%, #fff 60%);
}

/* Summary — soru başlığı. Native marker (üçgen) gizlenir, kendi chevron'umuz
   sağda durur. Cursor pointer kalıtsal değil bazı Safari sürümlerinde,
   bu yüzden explicit. */
.urun-sss-item > .sss-soru {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--c-text);
    line-height: 1.5;
    user-select: none;
    /* Tıklanabilir alanın görsel feedback'i */
    transition: color 0.15s ease;
}

/* Firefox marker */
.urun-sss-item > .sss-soru::-webkit-details-marker { display: none; }
.urun-sss-item > .sss-soru::marker { display: none; content: ""; }

.urun-sss-item:hover > .sss-soru {
    color: var(--brand-primary-dark);
}

.urun-sss-item[open] > .sss-soru {
    color: var(--brand-primary-dark);
}

/* Numara rozeti — CSS counter ile otomatik 01, 02… */
.urun-sss-item > .sss-soru::before {
    content: counter(sss-counter, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--brand-primary-soft);
    color: var(--brand-primary-dark);
    font-size: 12.5px;
    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;
}

.urun-sss-item[open] > .sss-soru::before {
    background: var(--brand-primary);
    color: #fff;
}

.sss-soru-text {
    flex: 1;
    min-width: 0;
}

/* Chevron - 180° rotate on open */
.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;
}

.urun-sss-item:hover .sss-icon {
    color: var(--brand-primary);
}

.urun-sss-item[open] .sss-icon {
    transform: rotate(180deg);
    color: var(--brand-primary);
}

/* Cevap wrapper — grid 0fr/1fr trick smooth open/close.
   <details> native olarak content'i display:none yapmaz açıkken; biz
   wrapper'ı grid-row collapse ile gizleriz. Açıldığında JS de yardımcı
   olabilir ama saf CSS de yeterli çünkü browser <details>'ın children'ını
   render ediyor. */
.sss-cevap-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.sss-cevap-wrap > .sss-cevap {
    overflow: hidden;
    padding: 0 18px 18px 64px; /* sol padding 18 + 32 numara + 14 gap = 64 */
    color: var(--c-text-2);
    line-height: 1.7;
    font-size: 14.5px;
}

/* Cevap üst kenarına ince ayraç — soru ile cevabı görsel olarak ayır */
.sss-cevap-wrap > .sss-cevap::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--brand-primary-light);
    margin: 0 0 14px 0;
}

/* Tablet/mobil */
@media (max-width: 640px) {
    .urun-sss-item > .sss-soru {
        padding: 14px 14px;
        font-size: 14.5px;
        gap: 10px;
    }
    .urun-sss-item > .sss-soru::before {
        min-width: 28px;
        height: 28px;
        font-size: 11.5px;
        padding: 0 6px;
    }
    .sss-icon { font-size: 16px; }

    .sss-cevap-wrap > .sss-cevap {
        padding: 0 14px 14px 52px;
        font-size: 14px;
        line-height: 1.65;
    }
}

@media (max-width: 420px) {
    .sss-cevap-wrap > .sss-cevap {
        /* Çok dar ekranda numara altına hizalı padding'i biraz azalt. */
        padding-left: 14px;
    }
}

/* Reduced motion — animasyon kapalı, görsel kayıp yok */
@media (prefers-reduced-motion: reduce) {
    .urun-sss-item,
    .sss-icon,
    .urun-sss-item > .sss-soru::before {
        transition: none;
    }
    .sss-cevap-wrap {
        transition: none;
    }
}