/* FuelGuard FAQ Widget

   Prefix: sss-

   ======================================== */



/* Ana Kapsayıcı */

.sss-kapsayici {

    width: 100%;

    margin: 0;

    padding: 0;

    background-color: transparent;

}



/* Her Bir Soru Alanı (details) */

.sss-kapsayici details {

    background-color: #ffffff;

    border: 1px solid #dee2e6;

    border-right: none;

    border-left: none;

    margin-bottom: 12px;

    transition: all 0.3s ease;

    padding: 0;

}



/* Açık Durumda Vurgu */

.sss-kapsayici details[open] {

    border-color: #bb0a07;

    box-shadow: 0 2px 8px rgba(187, 10, 7, 0.1);

    border-left: 5px solid #bb0a07;

}



/* Soru Başlığı (Summary) */

.sss-kapsayici summary {

    display: block;

    padding: 15px 20px;

    font-weight: 600;

    font-size: 1.1em;

    color: #343a40;

    cursor: pointer;

    position: relative;

    list-style: none;

}



/* Varsayılan ok işaretini gizle */

.sss-kapsayici summary::-webkit-details-marker {

    display: none;

}



.sss-kapsayici summary::marker {

    display: none;

}



/* Özel artı/eksi ikonu */

.sss-kapsayici summary::after {

    content: '+';

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 1.5em;

    font-weight: 300;

    color: #bb0a07;

    transition: transform 0.3s ease;

}



/* Açık Durumda İkon Değişimi */

.sss-kapsayici details[open] summary::after {

    content: '−';

    transform: translateY(-50%) rotate(180deg);

}



/* Cevap İçeriği */

.sss-kapsayici .sss-cevap {

    padding: 0 20px 15px 20px;

    font-size: 1em;

    line-height: 1.6;

    color: #6c757d;

    overflow: hidden;

    max-height: 0;

    opacity: 0;

    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;

}



/* details açıldığında içeriği göster */

.sss-kapsayici details[open] .sss-cevap {

    max-height: 1000px;

    opacity: 1;

    transition: max-height 0.4s ease-in, opacity 0.4s ease-in;

}



/* Cevap içindeki paragraflar */

.sss-kapsayici .sss-cevap p {

    margin: 0;

    padding: 0;

}



.sss-kapsayici .sss-cevap p + p {

    margin-top: 10px;

}



/* Mobil uyumluluk */

@media (max-width: 768px) {

    .sss-kapsayici summary {

        font-size: 1em;

        padding: 12px 15px;

        padding-right: 45px; /* Ok için yer */

    }

    

    .sss-kapsayici summary::after {

        right: 15px;

        font-size: 1.3em;

    }

    

    .sss-kapsayici .sss-cevap {

        padding: 0 15px 12px 15px;

        font-size: 0.95em;

    }

}



@media (max-width: 480px) {

    .sss-kapsayici summary {

        font-size: 0.95em;

        padding: 10px 12px;

        padding-right: 40px;

    }

    

    .sss-kapsayici summary::after {

        right: 12px;

        font-size: 1.2em;

    }

    

    .sss-kapsayici .sss-cevap {

        padding: 0 12px 10px 12px;

        font-size: 0.9em;

    }

    

    .sss-kapsayici details {

        margin-bottom: 10px;

    }

}