/* Sök-Tak Plise Sineklik ürün detay sayfası (urun-soktak.aspx).
   Ortak bileşenler /css/urunayrinti.css'ten gelir; bu dosya yalnız .dcs-soktak kapsamındaki yeni bölümleri ekler.
   Renkler master.css değişkenlerinden: --dcs-navy, --dcs-text. Mobil öncelikli. */

.dcs-soktak {
    --dcs-st-cizgi: #eef2f7;
    --dcs-st-zemin: #f9fafc;
    --dcs-st-ikincil: #5b6475;
    --dcs-st-yesil: #1a7f4b;
    --dcs-st-turuncu: #b45309;
    --dcs-st-vurgu: #0d6efd;
}
/* Sipariş bloğu (adımlar, ölçü, adet, fiyat) ve lightbox stilleri: /css/urun-siparis.css (urun-ayrinti ile ortak) */

/* Sabit (sticky) header altında kalmasın */
.dcs-soktak #olcu-rehberi,
.dcs-soktak #montaj,
.dcs-soktak #uygunluk,
.dcs-soktak #siparisFormu,
.dcs-soktak #stOlcuVideo {
    scroll-margin-top: calc(var(--dcs-header-h, 72px) + 16px);
}

.dcs-soktak [tabindex="-1"]:focus {
    outline: none;
}

.dcs-soktak a:focus-visible,
.dcs-soktak button:focus-visible,
.dcs-soktak video:focus-visible {
    outline: 3px solid var(--dcs-navy, #16213e);
    outline-offset: 2px;
}

.dcs-soktak .btn i {
    margin-right: 6px;
}

/* ================= Üst alan: 2 kolon (masaüstü ~%54 / %46) ================= */
@media (min-width: 992px) {
    .dcs-soktak .dcs-st-sol {
        flex: 0 0 auto;
        width: 54%;
    }

    .dcs-soktak .dcs-st-sag {
        flex: 0 0 auto;
        width: 46%;
    }
}

/* ---- Galeri ---- */
.dcs-st-ana-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #f4f6fb;
    cursor: zoom-in;
}

    /* Kare kutu: ana görsel dikey, detay görselleri yatay — ikisi de kırpılmadan sığar */
    .dcs-st-ana-btn img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

.dcs-st-buyut {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(22, 33, 62, .6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.dcs-st-thumbs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.dcs-st-thumb {
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s;
}

    .dcs-st-thumb img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 6px;
        background: #f4f6fb;
    }

    .dcs-st-thumb:hover {
        border-color: #cbd5e1;
    }

    .dcs-st-thumb[aria-current="true"] {
        border-color: var(--dcs-navy, #16213e);
    }

/* ---- Ürün bilgisi ---- */
.dcs-st-baslik {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
    color: var(--dcs-navy, #16213e);
    margin-bottom: 4px;
}

.dcs-st-slogan {
    font-size: 1.05rem;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 12px;
}

.dcs-st-avantaj {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

    .dcs-st-avantaj li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 500;
        color: var(--dcs-text, #1f2430);
    }

    .dcs-st-avantaj i {
        color: var(--dcs-st-yesil);
        font-size: 12px;
    }

/* ---- Sipariş formu ---- */
.dcs-st-olcu-not {
    font-size: 13px;
    color: var(--dcs-st-ikincil);
    margin: 8px 0 12px;
}

    .dcs-st-olcu-not a {
        font-weight: 600;
        white-space: nowrap;
    }

.dcs-soktak fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

    .dcs-soktak fieldset legend {
        float: none;
        width: auto;
        padding: 0;
        font-size: 13px;
        margin-bottom: 8px;
    }

/* Klavye ile renk seçerken odak görünür olsun */
.dcs-soktak .dcs-renk-secici input[type=radio]:focus-visible + label {
    outline: 3px solid var(--dcs-navy, #16213e);
    outline-offset: 2px;
}


.dcs-st-guven {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 12.5px;
    color: var(--dcs-st-ikincil);
}

    .dcs-st-guven i {
        color: var(--dcs-navy, #16213e);
        margin-right: 6px;
    }

/* ================= Bölümler ================= */
.dcs-st-bolum {
    margin-top: 40px;
}

.dcs-st-bolum-ic {
    background: var(--dcs-st-zemin);
    border: 1px solid var(--dcs-st-cizgi);
    border-radius: 16px;
    padding: 20px 16px;
}

@media (min-width: 768px) {
    .dcs-st-bolum-ic {
        padding: 28px 32px;
    }
}

.dcs-st-h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
    color: var(--dcs-navy, #16213e);
    margin-bottom: 6px;
}

.dcs-st-h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--dcs-navy, #16213e);
    margin-bottom: 4px;
}

.dcs-st-h3-buyuk {
    font-size: 1.15rem;
    margin-bottom: 14px;
}

.dcs-st-alt {
    color: var(--dcs-st-ikincil);
    margin-bottom: 18px;
}

/* Görsel dosyası yoksa kırık ikon yerine boş kutu (yer tutucu korunur) */
.dcs-st-img-hata {
    opacity: 0;
}

/* ---- Ölçü alma rehberi ---- */
.dcs-st-olcu-grid {
    display: grid;
    gap: 20px;
}

/* Ölçü videosu dikey (576×1024): masaüstünde ~360 px genişlikte, infografiğin yanında */
@media (min-width: 992px) {
    .dcs-st-olcu-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        align-items: start;
    }
}

.dcs-st-infografik {
    margin: 0;
}

    /* Kaynak görsel küçük (365×314); bulanıklaşmasın diye doğal boyutun çok üstüne büyütülmez */
    .dcs-st-infografik img {
        display: block;
        width: 100%;
        max-width: 480px;
        height: auto;
        margin: 0 auto;
        background: #fff;
        border: 1px solid var(--dcs-st-cizgi);
        border-radius: 12px;
    }

.dcs-st-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--dcs-video-oran, 9 / 16);
    max-height: 85vh;
    background: #0f172a;
    border-radius: 12px;
}

.dcs-st-video-baslik {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--dcs-navy, #16213e);
    margin-bottom: 8px;
}

/* ---- Ölçü açıklamaları (infografiğin altında) ---- */
.dcs-st-olcu-aciklama {
    margin-top: 16px;
    background: #fff;
    border: 1px solid var(--dcs-st-cizgi);
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 14.5px;
    color: #374151;
}

.dcs-st-olcu-vurgu {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--dcs-navy, #16213e);
}

    .dcs-st-olcu-vurgu i {
        margin-top: 3px;
    }

.dcs-st-olcu-liste {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    margin: 0 0 12px;
}

    .dcs-st-olcu-liste dd {
        margin: 0;
    }

/* İnfografikteki kırmızı etiketlerle aynı görünüm */
.dcs-st-olcu-etiket {
    display: inline-block;
    min-width: 52px;
    text-align: center;
    padding: 3px 10px;
    border-radius: 6px;
    background: #d62828;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .5px;
}

.dcs-st-olcu-ipucu {
    margin: 0;
    padding-left: 18px;
    color: var(--dcs-st-ikincil);
    font-size: 13.5px;
}

/* ---- Montaj: masaüstünde solda metin, sağda 2 görsel; görsel yoksa metin tam genişlik ---- */
.dcs-st-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: #e8eef9;
    color: var(--dcs-navy, #16213e);
    font-size: 12.5px;
    font-weight: 600;
}

.dcs-st-montaj-adimlar {
    counter-reset: dcs-st-montaj;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .dcs-st-montaj-adimlar li {
        counter-increment: dcs-st-montaj;
        position: relative;
        padding-left: 40px;
        margin-bottom: 12px;
        font-size: 14.5px;
        color: #374151;
        min-height: 28px;
        display: flex;
        align-items: center;
    }

        .dcs-st-montaj-adimlar li::before {
            content: counter(dcs-st-montaj);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--dcs-navy, #16213e);
            color: #fff;
            font-weight: 700;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

/* ---- 4 adım kartları: mobil 1, tablet 2x2, masaüstü 4 ---- */
.dcs-st-adimlar {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .dcs-st-adimlar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .dcs-st-adimlar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.dcs-st-adim {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--dcs-st-cizgi);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

    /* Adım görselleri geniş formatlı (~330×133) ve numara rozeti görselin içinde */
    .dcs-st-adim img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 330 / 133;
        object-fit: cover;
        object-position: left center;
        background: var(--dcs-st-cizgi);
    }

.dcs-st-adim-ic {
    padding: 14px 16px 16px;
}

    .dcs-st-adim-ic p {
        margin: 0;
        font-size: 14px;
        color: #4a5568;
    }

/* Numara görsellerde zaten var; tekrar göstermemek için gizli (aria-hidden) */
.dcs-st-adim-no {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dcs-navy, #16213e);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

/* ================= Sekmeler ================= */
.dcs-st-tabs .nav-link {
    white-space: nowrap;
    color: var(--dcs-text, #1f2430);
}

    .dcs-st-tabs .nav-link.active {
        color: var(--dcs-navy, #16213e);
    }

/* Mobilde sekmeler kendi içinde yatay kayar; sayfa taşmaz */
@media (max-width: 575.98px) {
    .dcs-st-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

        .dcs-st-tabs .nav-link {
            padding: 10px 12px;
        }
}

.dcs-st-tab-icerik {
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    padding: 20px 16px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

@media (min-width: 768px) {
    .dcs-st-tab-icerik {
        padding: 28px;
    }
}

.dcs-st-alt-bolum + .dcs-st-alt-bolum {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--dcs-st-cizgi);
}

/* ---- Uygunluk kartları (renk + ikon + metin rozeti; renk tek başına anlam taşımaz) ---- */
.dcs-st-kart {
    height: 100%;
    border: 1px solid;
    border-radius: 12px;
    padding: 16px 18px;
}

.dcs-st-kart-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

.dcs-st-kart-uygun {
    background: #effaf3;
    border-color: #bfe5cc;
}

    .dcs-st-kart-uygun .dcs-st-kart-rozet {
        color: var(--dcs-st-yesil);
    }

.dcs-st-kart-kontrol {
    background: #fff7ed;
    border-color: #fed7aa;
}

    .dcs-st-kart-kontrol .dcs-st-kart-rozet {
        color: var(--dcs-st-turuncu);
    }

/* ---- Numaralı adım listeleri (Açıklama + Ölçü Alma sekmeleri) ---- */
.dcs-st-detay-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 992px) {
    /* auto: tanıtım videosu yoksa ikinci kolon boş yer kaplamaz */
    .dcs-st-detay-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

        .dcs-st-detay-grid .dcs-st-video-kutu {
            width: 320px;
        }
}

.dcs-st-detay-adimlar,
.dcs-st-olcu-adimlar {
    counter-reset: dcs-st-adim;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .dcs-st-detay-adimlar li,
    .dcs-st-olcu-adimlar li {
        counter-increment: dcs-st-adim;
        position: relative;
        padding-left: 44px;
        margin-bottom: 16px;
    }

        .dcs-st-detay-adimlar li::before,
        .dcs-st-olcu-adimlar li::before {
            content: counter(dcs-st-adim);
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--dcs-st-cizgi);
            color: var(--dcs-navy, #16213e);
            font-weight: 700;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dcs-st-detay-adimlar li strong,
        .dcs-st-olcu-adimlar li strong {
            display: block;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            color: var(--dcs-navy, #16213e);
        }

        .dcs-st-detay-adimlar li p,
        .dcs-st-olcu-adimlar li p {
            margin: 2px 0 0;
            font-size: 14.5px;
            color: #4a5568;
        }

/* ---- Kolay temizlik ---- */
.dcs-st-temizlik {
    margin: 0;
}

    /* Sağ üstteki ikon kırpılmasın diye kırpma soldan/alttan yapılır */
    .dcs-st-temizlik img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: right top;
        border-radius: 12px;
        background: var(--dcs-st-cizgi);
    }

    .dcs-st-temizlik figcaption {
        margin-top: 6px;
        font-size: 13px;
        color: var(--dcs-st-ikincil);
        text-align: center;
    }

.dcs-st-slogan-alt {
    margin: 18px 0 0;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--dcs-navy, #16213e);
}

/* ---- Teknik bilgiler ---- */
.dcs-st-teknik th,
.dcs-st-teknik td {
    font-size: 14px;
    padding: 10px 12px;
    vertical-align: top;
}

.dcs-st-teknik th {
    width: 38%;
    font-weight: 600;
    color: var(--dcs-navy, #16213e);
    background: var(--dcs-st-zemin);
}

/* ---- Sepete eklendi penceresi ---- */
#pnlKayitEkle:focus {
    outline: none;
}




/* ---- Ölçü alma: büyütülebilir görsel ve örnek kutusu ---- */
.dcs-st-infografik-btn {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

    .dcs-st-infografik-btn img {
        max-width: 100%;
    }

.dcs-st-olcu-ornek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4f7fc;
    font-size: 14px;
}

.dcs-st-olcu-ornek-etiket {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--dcs-navy, #16213e);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* ---- Montaj: adımlar + iki kanat tipi için video ---- */
@media (min-width: 768px) {
    .dcs-st-montaj-adimlar-yatay {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 24px;
    }
}

.dcs-st-montaj-videolar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 16px;
}

@media (min-width: 576px) {
    .dcs-st-montaj-videolar {
        grid-template-columns: repeat(2, minmax(0, 360px));
        justify-content: center;
    }
}

.dcs-st-montaj-video {
    padding: 12px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: #fff;
    scroll-margin-top: calc(var(--dcs-header-h, 72px) + 16px);
    transition: border-color .2s;
}

.dcs-st-montaj-secili {
    border-color: var(--dcs-st-vurgu);
}

.dcs-st-sizin {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--dcs-st-vurgu);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    vertical-align: middle;
}

    .dcs-st-sizin[hidden] {
        display: none;
    }

/* ---- Açıklama sekmesi: kanat tipi kartları ---- */
.dcs-st-kanat-kart {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    background: #fff;
    border-color: #e1e8f5;
}

    .dcs-st-kanat-kart img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        border-radius: 8px;
    }

/* ================= Seçilen profil rengine göre görsel ================= */
/* Ana görsel üzerindeki "temsili görünüm" etiketi */
.dcs-st-renk-etiket {
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 80px);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(22, 33, 62, .75);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .dcs-st-renk-etiket[hidden] {
        display: none;
    }