/**
 * Otomini — tüm tablet modelleri için yüzde / vw / clamp tabanlı fluid düzen
 * (iPad mini–Pro, Android 7–13", Surface, Galaxy Tab, katlanabilir iç ekran)
 * Masaüstü (≥1200px) grid’i bilinçli olarak bu dosyada değiştirmiyoruz.
 */

/* ——— 600px–1199px: tablet çekirdeği ——— */
@media (min-width: 600px) and (max-width: 1199.98px) {
    :root {
        --otomini-t-fluid-x: clamp(0.5rem, 2.4vw, 1.35rem);
        --otomini-t-fluid-gap: clamp(0.55rem, 1.8vw, 1rem);
    }

    .otomini-main-shell {
        padding-left: max(var(--otomini-t-fluid-x), env(safe-area-inset-left, 0px));
        padding-right: max(var(--otomini-t-fluid-x), env(safe-area-inset-right, 0px));
        box-sizing: border-box;
    }

    /* Hero: üst blok genişliğinin yüzdesi (tüm tablet DPI/oranları) */
    #otominiSlider {
        width: min(100%, calc(100% - 2 * var(--otomini-t-fluid-x))) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-height: clamp(360px, 54vh, 600px) !important;
    }

    #otominiSlider .overlay-container {
        padding: clamp(0.45rem, 1.6vw, 0.95rem) clamp(0.4rem, 1.4vw, 0.85rem) !important;
    }

    #otominiSlider #msform fieldset,
    #otominiSlider #msFormMotor fieldset {
        width: 92% !important;
        max-width: 920px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #otominiSlider .carousel-inner {
        min-height: clamp(220px, 32vw, 400px) !important;
    }

    #otominiSlider .carousel-item img {
        max-width: 100% !important;
        max-height: min(48vh, 460px) !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Hizmet kartları: sütun genişliği vw ile akışkan */
    #ssss-card-container {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(210px, 30vw, 320px)), 1fr));
        gap: var(--otomini-t-fluid-gap);
    }

    #ssss-service-section {
        padding-top: clamp(1.25rem, 3vw, 2rem);
        padding-bottom: clamp(0.75rem, 2vw, 1.25rem);
    }

    #otominiFeaturedSection {
        padding: clamp(0.8rem, 2.2vw, 1.15rem) clamp(0.5rem, 1.8vw, 0.95rem) !important;
        width: 100%;
        max-width: min(1320px, 100%);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    #otominiFeaturedSection .row {
        --bs-gutter-x: clamp(0.55rem, 2vw, 1rem);
    }

    /* Dijital deneyim satırı: tablet boşluğu */
    #digitalexp.row {
        --bs-gutter-x: clamp(0.65rem, 2.2vw, 1.25rem);
    }

    /* Ana içerik + Index altı bölümler (main dışındaki .container’lar dahil) */
    .otomini-main-shell > .container,
    .otomini-main-shell > .container-fluid,
    .otomini-main-shell .container-xxl,
    #servicesBlockOtomini.container,
    #otominiFeaturedSection.container {
        max-width: min(1320px, 96%);
    }
}

/* ——— 768–991: dikey / küçük-orta tablet — öne çıkan 2 sütun (%50) ——— */
@media (min-width: 768px) and (max-width: 991.98px) {
    #otominiFeaturedSection .otominiFeaturedCol {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    #otominiSlider {
        min-height: clamp(380px, 52vh, 580px) !important;
    }
}

/* ——— 992–1199: büyük tablet / küçük laptop — 3 sütun (%33.33) ——— */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #otominiFeaturedSection .otominiFeaturedCol {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    #otominiSlider {
        min-height: clamp(420px, 56vh, 640px) !important;
    }

    #otominiSlider .carousel-inner {
        min-height: clamp(260px, 28vh, 420px) !important;
    }
}

/* ——— 600–767: geniş telefon / mini tablet — tek sütun hizmet, öne çıkan %50 ——— */
@media (min-width: 600px) and (max-width: 767.98px) {
    #otominiFeaturedSection .otominiFeaturedCol {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    #otominiSlider .carousel-inner {
        min-height: clamp(200px, 40vw, 320px) !important;
    }
}

/* ——— Yatay tablet: yükseklik sınırlı (tüm modeller) ——— */
@media (min-width: 768px) and (max-width: 1199.98px) and (max-height: 720px) and (orientation: landscape) {
    #otominiSlider {
        min-height: clamp(260px, 46vh, 480px) !important;
    }

    #otominiSlider .carousel-inner {
        min-height: clamp(180px, 36vh, 320px) !important;
    }

    #otominiSlider .carousel-item img {
        max-height: min(44vh, 400px) !important;
    }
}

/* ——— 1200px–1368px: geniş tablet / küçük masaüstü — yalnızca yatay oran, sütun sayısına dokunma ——— */
@media (min-width: 1200px) and (max-width: 1368px) {
    #otominiSlider {
        width: min(1320px, calc(100% - clamp(0.75rem, 2vw, 1.5rem))) !important;
    }

    .otomini-main-shell > .container,
    .otomini-main-shell > .container-fluid,
    .otomini-main-shell .container-xxl,
    #servicesBlockOtomini.container,
    #otominiFeaturedSection.container {
        max-width: min(1320px, 96%);
    }
}