/* ============================================================================
   Eksen Redüktör — temel stiller (dış kütüphane yok)
   Eski Bootstrap Grid 5.3.3 + Swiper 12 görünümünün kullanılan kuralları; değerler ölçülmüştür,
   Bootstrap değişkenleri çözülmüştür (oluk 1.5rem). Bu dosya tema dosyasından (style.css) önce yüklenir.
   Ayrıntı: project-docs/onyuz-kutuphanesiz.md
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1) Kap ve satır
   Eski sitede Bootstrap'in sıfırlama (reboot) dosyası yüklenmiyordu: .container içerik kutusu (content-box)
   ölçüsündedir, dolgu genişliğe eklenir. 576 px altındaki taşma düzeltmesi temada (style.css sonu).
   ---------------------------------------------------------------------------- */
.container {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

/* Satırın her doğrudan çocuğu tam genişlikte bir sütundur; genişliği aşağıdaki bileşen sınıfı verir */
.row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-top: 0;
}

/* ----------------------------------------------------------------------------
   2) Sütunlar (bileşen adlarıyla). Mobilde tam genişlik; md = 768 px, lg = 992 px ve üstü.
   Yeni bölüm kendi sütun adını buraya ekler (genişlik kuralı .row > * kuralından sonra gelmeli).
   ---------------------------------------------------------------------------- */

/* Her genişlikte yarım: galeri ve referans görselleri */
.gallery-col,
.ref-gallery-col {
    flex: 0 0 auto;
    width: 50%;
}

@media (min-width: 768px) {
    /* Dörtte bir: galeri görseli, ürün kategorisi listesi */
    .gallery-col,
    .listing-col-quarter {
        flex: 0 0 auto;
        width: 25%;
    }

    /* Üçte bir: kenar çubuğu, liste kartı, alt bilgi sütunu, ekip görseli, üçlü form alanı, referans görseli */
    .page-aside,
    .listing-col,
    .footer-col,
    .team-image-col,
    .form-col-third,
    .ref-gallery-col {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    /* 12'de 5 ve 12'de 7: ana sayfa hakkımızda bölümü (görsel / yazı) */
    .about-media-col {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    /* Yarım: form alanı çifti, iletişim sayfası sütunları, SSS bölümü, neden biz bölümü */
    .form-col-half,
    .contact-form-col,
    .contact-info-col,
    .faq-list-col,
    .faq-image-col,
    .why-col {
        flex: 0 0 auto;
        width: 50%;
    }

    .about-text-col {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    /* Üçte iki: sayfa ana sütunu, ekip yazısı */
    .page-main,
    .team-text-col {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .full-width {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 992px) {
    /* Teknik seçim sayfası kartları */
    .drawing-col {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* ----------------------------------------------------------------------------
   3) Yardımcı
   ---------------------------------------------------------------------------- */

/* Satırdaki sütunları ortalar (teknik seçim / teknik çizim) */
.row-centered {
    justify-content: center !important;
}

/* Çekirdek sayfalama şablonu (partials/pagination) bu adı taşır */
.justify-content-center {
    justify-content: center !important;
}

/* ----------------------------------------------------------------------------
   4) İçerik uyumluluğu: panelden girilmiş içerikte (post_details) kalan Bootstrap sınıfları
   Kas 2026 taraması: iki blog yazısı ("sumak-pompa-kirli-su-pompasi", "sumak-kirli-su-pompasi")
   "col-md-12 col-sm-12 col-xs-12" taşıyor (col-xs-12 Bootstrap 5'te yoktu). Yalnız onlar için.
   ---------------------------------------------------------------------------- */
@media (min-width: 576px) {
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ----------------------------------------------------------------------------
   5) Kaydırıcı (kütüphanesiz): .slides > .slides-track > .slides-item
   Kaydırma kabı + scroll-snap; main.js Slides sınıfı konumu, okları, noktaları, sürüklemeyi,
   döngüyü ve otomatik geçişi yönetir. Değerler eski Swiper 12 görünümünün ölçümüdür.
   Okların ve noktaların rengi, boyu ve ok başı tema dosyasındadır (style.css "Kaydırıcı okları").
   ---------------------------------------------------------------------------- */

/* 5.1) Kap ve ray. Kaydırma kabı .slides'tır (eski kütüphanede de overflow: hidden kaptı; aynı çizim yapısı,
   görseller aynı süzülür). Konumu main.js scrollLeft ile taşır, scroll-snap slaytı yerine oturtur. */
.slides {
    position: relative;
    z-index: 1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    overflow: hidden;
    list-style: none;
    touch-action: pan-y;
    scroll-snap-type: x mandatory;
    /* Konumu yalnız main.js taşır (döngüde slayt taşınınca telafi); tarayıcının kaydırma çapası karışmasın */
    overflow-anchor: none;
}

.slides-track {
    position: relative;
    z-index: 1;
    display: flex;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    gap: var(--slides-gap, 0px);
    transform: translateZ(0);
}

/* 5.2) Slayt: genişlik görünen sayı ve aralıktan (main.js kesin px değerini satır içi yazar, calc yalnız ilk an için) */
.slides-item {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: calc((100% - (var(--slides-per-view, 1) - 1) * var(--slides-gap, 0px)) / var(--slides-per-view, 1));
    height: 100%;
    transition-property: transform;
    scroll-snap-align: start;
}

/* 10 ve daha az slaytta ve iOS'ta slaytlar ayrı çizim katmanında (eski kütüphane böyle çiziyordu; görseller aynı süzülür) */
.slides-layered .slides-item {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.slides-ios .slides-item {
    transform: translateZ(0);
}

/* 5.3) Oklar. İki sınıflık özgüllük eski görünümün parçasıdır: temadaki tek sınıflık
   .slides-prev { margin-top: 0 } kuralını ezer, .slider .slides-prev { left: 20px } ise bunu ezer. */
.slides-prev,
.slides-next {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.slides .slides-prev,
.slides .slides-next {
    top: 50%;
    margin-top: -22px;
    margin-left: 0;
}

.slides .slides-prev {
    left: 4px;
    right: auto;
}

.slides .slides-next {
    left: auto;
    right: 4px;
}

/* Kaydırılacak slayt yoksa oklar ve noktalar gizlenir */
.slides-lock {
    display: none !important;
}

/* 5.4) Noktalar */
.slides-dots {
    position: absolute;
    bottom: 8px;
    top: auto;
    left: 0;
    z-index: 10;
    width: 100%;
    text-align: center;
    transform: translateZ(0);
    transition: opacity 0.3s;
}

.slides-dot {
    display: inline-block;
    margin: 0 4px;
    cursor: pointer;
}

.slides-dot:only-child {
    display: none !important;
}

/* 5.5) Görünen slayt sayısı ve aralık (eski kırılımlar, pencere genişliği) */
.productslider,
.testimonials-slider,
.video-slider {
    --slides-per-view: 1;
    --slides-gap: 20px;
}

.our-team-slider,
.instagram-slider {
    --slides-per-view: 1;
}

.ref-slider {
    --slides-per-view: 2;
}

@media (min-width: 600px) {
    .productslider,
    .testimonials-slider,
    .video-slider,
    .our-team-slider,
    .instagram-slider {
        --slides-per-view: 2;
    }
}

@media (min-width: 1024px) {
    .productslider,
    .testimonials-slider,
    .video-slider,
    .our-team-slider,
    .instagram-slider {
        --slides-per-view: 4;
    }

    .ref-slider {
        --slides-per-view: 5;
    }
}

@media (min-width: 1100px) {
    .productslider,
    .testimonials-slider,
    .video-slider {
        --slides-per-view: 5;
    }
}