/* --- 1. DETAYLI AÇIKLAMA ANA KUTUSU --- */
.product__details-des {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important; /* Padding'in kutuyu dışa taşırmasını kesin olarak engeller */
    padding: 20px !important;
    overflow-x: hidden !important;
}

    /* --- 2. İÇERİDEKİ TÜM ELEMENTLERİ (YAZI, TABLO, RESİM) HİZAYA SOK --- */
    .product__details-des * {
        max-width: 100% !important; /* Editörden gelen sabit genişlikleri (örn: width: 800px) ezer */
        box-sizing: border-box !important;
        white-space: normal !important; /* Yazıların ekran bittiğinde zorunlu olarak alt satıra geçmesini sağlar */
        word-break: normal !important; /* Kelimeleri ortadan bölmez, bütün tutar */
        overflow-wrap: break-word !important; /* Sadece çok uzun, boşluksuz bir link gelirse taşmasın diye böler */
    }

    /* --- 3. LİSTELER VE MADDELER (KAYMA ENGELLEYİCİ) --- */
    .product__details-des ul,
    .product__details-des ol {
        padding-left: 20px !important;
        margin-left: 0 !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    .product__details-des li {
        margin-bottom: 8px !important;
        list-style-position: outside !important; /* Noktaların hizasını düzeltir */
    }

    /* --- 4. RESİM VE TABLOLAR --- */
    .product__details-des img,
    .product__details-des iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    .product__details-des table {
        width: 100% !important;
        max-width: 100%;
        display: block;
        overflow-x: auto;
    }

/* --- 5. MOBİL EKRAN (IPHONE VB.) OPTİMİZASYONU --- */
@media (max-width: 767px) {
    .product__details-des {
        padding: 15px !important;
    }

        /* Editörden gelen devasa başlıkları telefon ekranına uyumlu hale getir */
        .product__details-des h1,
        .product__details-des h2,
        .product__details-des h3,
        .product__details-des h4 {
            font-size: 22px !important;
            line-height: 1.3 !important;
        }
}

/* --- GALERİ SLIDER (OKLAR) CSS AYARLARI --- */
.custom-thumb-slider {
    gap: 5px;
}

.thumb-track-container {
    max-height: 440px;
    overflow: hidden;
    scroll-behavior: smooth;
    width: 110px;
}

/* RESİMLERİN ÇİZGİ GİBİ SIKIŞMASINI ENGELLEYEN SİHİRLİ KOD BURASI */
.thumb-item {
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.thumb-arrow {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    transition: 0.3s;
    z-index: 2;
    flex-shrink: 0 !important; /* Okların da ezilmesini engeller */
}

    .thumb-arrow:hover {
        background: #f1f1f1;
        color: #000;
    }

.mobile-arrow {
    display: none;
}

/* Mobilde Slider Görünümü */
/* --- MOBİL SLIDER 2'Lİ GÖRÜNÜM KESİN ÇÖZÜMÜ --- */
@media (max-width: 575px) {
    .custom-thumb-slider {
        flex-direction: row !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        gap: 15px; /* Oklar ile resimler arasına nefes payı */
    }

    .thumb-track-container {
        max-height: none !important;
        width: 215px !important; /* Tam 2 resim (100x2) + 1 boşluk (10px) + 5px tölerans */
        max-width: 215px !important;
        overflow-x: hidden;
        display: flex;
    }

        .thumb-track-container .nav {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            gap: 10px !important; /* 2 resim arasındaki boşluk */
            width: max-content !important; /* İçerik ne kadar uzunsa o kadar uzamasını sağlar, taşmayı engeller */
        }

    .thumb-item {
        margin-bottom: 0 !important;
        padding: 0 !important; /* Bootstrap'in görünmez boşluklarını yok et */
        width: 100px !important;
        flex: 0 0 100px !important; /* Esnemesini veya daralmasını kesin olarak yasakla! */
    }

    .desktop-arrow {
        display: none !important;
    }

    .mobile-arrow {
        display: block !important;
    }
}

.custom-qty-box {
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 6px;
    overflow: hidden;
    height: 52px;
    width: 130px;
}

.custom-qty-btn {
    background: #fff;
    border: none;
    width: 40px;
    height: 100%;
    font-size: 1.4rem;
    color: #555;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .custom-qty-btn:hover {
        background: #f8f9fa;
        color: #000;
    }

.custom-qty-input {
    width: 50px;
    height: 100%;
    border: none;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
    outline: none;
}
    /* Tarayıcıların varsayılan yukarı/aşağı oklarını gizliyoruz */
    .custom-qty-input::-webkit-outer-spin-button,
    .custom-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.custom-btn-dark {
    background-color: #222;
    color: #fff;
    border-radius: 50px; /* Görseldeki gibi hap (Pill) tasarımı */
    height: 52px;
    padding: 0 35px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .custom-btn-dark:hover {
        background-color: #000;
        color: #fff;
        transform: translateY(-2px); /* Üzerine gelince hafif yukarı kalkma efekti */
    }

.custom-btn-whatsapp {
    background-color: #25D366;
    color: #fff;
    border-radius: 50px; /* Hap tasarımı */
    height: 52px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%; /* Alt satırı tamamen kaplaması için */
}

    .custom-btn-whatsapp:hover {
        background-color: #1ebe58;
        color: #fff;
        transform: translateY(-2px);
    }