/**
 * Otomini — mobil premium görünüm (tüm telefonlar)
 * Notch / güvenli alan, dokunma, dar & yatay ekran, iOS zoom önleme
 * Yükleme: tema dosyalarından ve otoMini.css’ten SONRA
 */
:root {
    --otomini-safe-l: env(safe-area-inset-left, 0px);
    --otomini-safe-r: env(safe-area-inset-right, 0px);
    --otomini-safe-t: env(safe-area-inset-top, 0px);
    --otomini-safe-b: env(safe-area-inset-bottom, 0px);
    --otomini-mobile-pad-x: max(0.65rem, var(--otomini-safe-l));
    --otomini-mobile-pad-x-end: max(0.65rem, var(--otomini-safe-r));
}

/* ——— Üst bar: çentik + yuvarlatılmış kenar uyumu ——— */
@media (max-width: 991.98px) {
    .otomini-nav.navbar {
        padding-left: var(--otomini-mobile-pad-x) !important;
        padding-right: var(--otomini-mobile-pad-x-end) !important;
        padding-top: max(0.35rem, var(--otomini-safe-t)) !important;
        border-bottom-color: rgba(10, 22, 40, 0.06) !important;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.65) inset,
            0 8px 28px rgba(10, 22, 40, 0.07) !important;
    }

    .otomini-nav .navbar-collapse {
        margin-top: 0.35rem;
        padding: 0.65rem 0.5rem !important;
        border-radius: 16px !important;
        border: 1px solid rgba(10, 22, 40, 0.06);
        background: rgba(255, 255, 255, 0.97) !important;
        box-shadow:
            0 18px 44px rgba(10, 22, 40, 0.1),
            0 2px 8px rgba(10, 22, 40, 0.04);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
    }

    .otomini-nav .navbar-nav .nav-item .nav-link {
        padding: 0.65rem 1rem !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
    }

    /* İçerik: çentikte metin taşmasın (Bootstrap gutter + güvenli alan) */
    .container,
    .container-fluid,
    .container-xxl {
        padding-left: max(calc(var(--bs-gutter-x, 1.5rem) * 0.5), var(--otomini-safe-l));
        padding-right: max(calc(var(--bs-gutter-x, 1.5rem) * 0.5), var(--otomini-safe-r));
    }
}

/* ——— Ana hero / form bloğu ——— */
@media (max-width: 1199.98px) {
    #otominiSlider {
        width: min(100%, calc(100% - var(--otomini-safe-l) - var(--otomini-safe-r) - 0.35rem)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 576px) {
    #otominiSlider {
        border-radius: clamp(14px, 4vw, 20px) !important;
        box-shadow:
            0 2px 4px rgba(10, 22, 40, 0.04),
            0 22px 52px rgba(10, 22, 40, 0.09) !important;
        border: 1px solid rgba(10, 22, 40, 0.07) !important;
    }

    #otominiSlider .overlay-box {
        border-radius: clamp(14px, 3.5vw, 18px) !important;
    }

    #otominiSlider .otomini-overlay-tabs {
        padding: 0.32rem 0.4rem !important;
        gap: 0.35rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(10, 22, 40, 0.22) transparent;
        -webkit-overflow-scrolling: touch;
    }

    #otominiSlider .otomini-overlay-tabs::-webkit-scrollbar {
        height: 5px;
    }

    #otominiSlider .otomini-overlay-tabs::-webkit-scrollbar-thumb {
        background: rgba(10, 22, 40, 0.18);
        border-radius: 999px;
    }

    #otominiSlider .otomini-overlay-tabs .nav-link {
        box-shadow: 0 1px 3px rgba(10, 22, 40, 0.06);
    }

    #otominiSlider .carousel-indicators [data-bs-target] {
        width: 8px;
        height: 8px;
        transition: width 0.25s ease, background-color 0.2s ease;
    }

    #otominiSlider .carousel-indicators .active {
        width: 26px;
    }
}

/* ——— Çok dar telefonlar ——— */
@media (max-width: 360px) {
    #otominiSlider {
        width: 100% !important;
        margin-inline: 0 !important;
        border-radius: 12px !important;
    }

    .otomini-nav .btn {
        min-height: 38px;
        padding-inline: 0.55rem !important;
    }
}

/* ——— Üst sağ ikon butonları: daha rahat dokunma (iPhone SE … büyük Pro Max) ——— */
@media (max-width: 430px) {
    #mobileButtons .btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    #mobileButtons .btn i {
        font-size: 1rem !important;
    }
}

/* ——— Yatay mod / kısa ekran (tüm modeller) ——— */
@media (max-width: 900px) and (max-height: 460px) and (orientation: landscape) {
    #otominiSlider {
        min-height: unset !important;
        margin-top: 0.2rem !important;
        margin-bottom: 0.55rem !important;
    }

    #otominiSlider .carousel-inner {
        min-height: min(200px, 38vh) !important;
    }

    #otominiSlider .overlay-container {
        padding: 0.4rem 0.45rem !important;
    }

    .otomini-nav.navbar {
        padding-top: max(0.12rem, var(--otomini-safe-t)) !important;
    }
}

/* ——— Dokunmatik: vurgu + yanlışlıkla çift dokunmayı azalt ——— */
@media (hover: none) and (pointer: coarse) {
    a,
    button,
    .btn,
    [role="button"],
    .nav-link,
    .page-link,
    input[type="submit"],
    input[type="button"],
    label[for] {
        -webkit-tap-highlight-color: rgba(10, 22, 40, 0.09);
    }

    .btn,
    .nav-link,
    #otominiSlider .otomini-overlay-tabs .nav-link,
    .carousel-control-prev,
    .carousel-control-next {
        touch-action: manipulation;
    }
}

/* ——— iOS: input odakta otomatik zoom’u önle (min 16px) ——— */
@media (max-width: 768px) {
    input.form-control,
    textarea.form-control,
    select.form-select,
    .form-control:not([type="checkbox"]):not([type="radio"]),
    .form-select,
    .otomini-brand-select-trigger {
        font-size: max(16px, 1rem) !important;
        line-height: 1.45;
    }

    .modal-dialog {
        margin-left: max(0.5rem, var(--otomini-safe-l)) !important;
        margin-right: max(0.5rem, var(--otomini-safe-r)) !important;
        margin-bottom: max(0.75rem, var(--otomini-safe-b)) !important;
    }

    .modal-content {
        border-radius: 18px !important;
        overflow: hidden;
    }
}

/* ——— Alt bilgi + yüzen buton: home indicator ——— */
@media (max-width: 991.98px) {
    .footer,
    .copyright,
    .otomini-copyright-wrap {
        padding-left: max(1rem, var(--otomini-safe-l)) !important;
        padding-right: max(1rem, var(--otomini-safe-r)) !important;
    }

    .copyright,
    .otomini-copyright-wrap {
        padding-bottom: max(0.85rem, var(--otomini-safe-b)) !important;
    }

    .back-to-top {
        right: max(1rem, var(--otomini-safe-r)) !important;
        bottom: max(1rem, var(--otomini-safe-b)) !important;
    }
}

/* ——— Kartlar / hizmetler: mobilde nefes alan padding ——— */
@media (max-width: 576px) {
    .ssss-card,
    #digitalexp .digitalexp-step {
        border-radius: 16px !important;
    }

    #otominiFeaturedSection {
        box-shadow:
            0 2px 8px rgba(10, 22, 40, 0.05),
            0 16px 40px rgba(10, 22, 40, 0.08) !important;
    }
}

/* ——— Dar ama uzun (katlanabilir dış ekran vb.) ——— */
@media (max-width: 320px) {
    .otomini-logo-text {
        font-size: 0.92rem !important;
    }

    #otominiSlider .otomini-overlay-tabs .nav-link {
        min-width: 52px !important;
        padding: 0.3rem 0.35rem !important;
    }
}

/* ——— iOS Safari: adres çubuğu / 100vh sıçraması, sticky, modal ——— */
@supports (-webkit-touch-callout: none) {
    html {
        height: -webkit-fill-available;
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

/* Sticky navbar: repaint / compositing */
.otomini-nav.navbar.sticky-top {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Modal + backdrop: iOS’ta scroll / layer çakışması */
.modal-backdrop {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.modal.show .modal-dialog {
    -webkit-overflow-scrolling: touch;
}