/* =============================================================
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   Tüm ekran boyutlarında taşma, kayma ve büyük buton sorunları
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   1. GLOBAL – Yatay kaymayı tamamen önle
   ───────────────────────────────────────────────────────────── */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Flex ve grid çocuklarının minimum genişliğini sıfırla
   (bu olmadan flex içerikler taşabilir) */
* {
    min-width: 0;
}

/* Container padding'i mobilde azalt */
@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ─────────────────────────────────────────────────────────────
   2. NAVBAR
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .navbar-brand img.site-logo {
        height: 26px;
    }

    /* Hamburger menü açıkken tam genişlik, overflow yok */
    .navbar-collapse {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
}

/* ─────────────────────────────────────────────────────────────
   3. HEADER (Hero bölümü)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .header {
        padding: 1.5rem 0 1.25rem !important;
    }

    .header h1 {
        font-size: 1.4rem !important;
        letter-spacing: -0.3px;
        line-height: 1.25;
    }

    .header h2 {
        font-size: 0.92rem !important;
    }

    .hero-desc {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }

    .header .badge.hero-update-badge {
        font-size: 0.76rem;
        padding: 0.38rem 0.7rem;
        white-space: nowrap;
    }

    .header .btn-sm.btn-light {
        font-size: 0.78rem;
        padding: 0.35rem 0.7rem;
    }
}

@media (max-width: 400px) {
    .header h1 {
        font-size: 1.15rem !important;
    }

    .hero-desc {
        font-size: 0.82rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   4. TOP INFO GRID (Owner CTA + Ziyaretçi İstatistikleri)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .top-info-grid {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    .owner-cta-card {
        padding: 0.85rem 0.9rem;
    }

    /* Butonlar mobilde tam genişlik */
    .owner-cta-card .d-flex.gap-2 {
        flex-direction: column;
        gap: 0.4rem !important;
    }

    .owner-cta-card .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ─────────────────────────────────────────────────────────────
   5. BÖLÜM BAŞLIKLARI (section header'daki ? butonu)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    /* Bölüm başlıklarındaki tooltip/info butonlarını gizle */
    section > .d-flex.justify-content-between > button.btn-outline-secondary,
    section > .d-flex.align-items-start.justify-content-between > button.btn-outline-secondary {
        display: none !important;
    }

    .tarih-baslik {
        font-size: 1.1rem !important;
        letter-spacing: -0.2px;
        padding-bottom: 0.75rem;
    }

    .tarih-baslik i {
        font-size: 1rem !important;
    }

    .tarih-baslik::after {
        width: 50px;
        height: 3px;
    }
}

/* ─────────────────────────────────────────────────────────────
   6. NÖBETÇI CARD – Card Header (TÜM EKRANLAR)
      Badge her zaman sağda sabit dursun, eczane adı taşmadan kısalsın
   ───────────────────────────────────────────────────────────── */

/* Eczane adı: esnesin ama taşmasın */
.nobetci-card .card-header > span:first-child {
    flex: 1 1 0%;
    min-width: 0;               /* flex taşmasını önler */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge: küçülmesin, satır sonu yapmasın */
.nobetci-card .card-header .badge {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: center;
}

/* ─── Mobil ek küçültmeler ─────────────────────────────────── */
@media (max-width: 575.98px) {
    .nobetci-card .card-header {
        padding: 0.8rem 0.95rem;
        gap: 0.4rem;
    }

    .nobetci-card .card-header > span:first-child {
        font-size: 0.87rem;
    }

    .nobetci-card .card-header .badge {
        font-size: 0.68rem !important;
        padding: 0.22rem 0.45rem !important;
        line-height: 1.3;
    }
}

/* ─────────────────────────────────────────────────────────────
   7. NÖBETÇI CARD – Card Body (saat + butonlar satırı)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .nobetci-card .card-body {
        padding: 0.95rem 1rem !important;
    }

    /* Saat + buton satırını dikey yap, üst üste diz */
    .nobetci-card .card-body > .d-flex.justify-content-between.align-items-start.mb-3 {
        flex-direction: column !important;
        gap: 0.6rem;
    }

    /* Buton grubu sol hizalı */
    .nobetci-card .card-body > .d-flex.justify-content-between.align-items-start.mb-3 > .d-flex.gap-2 {
        align-self: flex-start;
        flex-wrap: nowrap;
    }

    /* Küçük aksiyon butonları */
    .nobetci-card .btn-sm {
        font-size: 0.78rem;
        padding: 0.32rem 0.6rem;
    }

    /* Nöbet saati etiketi */
    .nobetci-card .nobet-saati {
        font-size: 0.82rem !important;
        padding: 0.35rem 0.7rem !important;
        gap: 0.3rem;
    }

    /* Row içi sütun padding azalt */
    .nobetci-card .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ─────────────────────────────────────────────────────────────
   8. YAKLAŞAN NÖBETÇİLER KARTI
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .upcoming-list-card {
        padding: 0.7rem 0.75rem;
    }

    /* Tarih kolonunu biraz daralt */
    body.native-app-layout .upcoming-date {
        min-width: 68px !important;
        font-size: 0.85rem;
    }

    /* Telefon butonu tam genişlik */
    .upcoming-list-card .d-flex.align-items-center.gap-2 {
        width: 100%;
    }

    .upcoming-list-card .btn-primary {
        flex: 1;
        justify-content: center;
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ─────────────────────────────────────────────────────────────
   9. ZİYARETÇİ İSTATİSTİKLERİ KARTI
   ───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .visitor-stats-card .stats-item {
        min-width: auto !important;
    }

    .visitor-stats-card .vr {
        display: none !important;
    }

    .visitor-stats-card .d-flex {
        gap: 0.5rem !important;
        flex-wrap: wrap;
        justify-content: center !important;
    }

    .visitor-stats-card strong {
        font-size: 0.88rem !important;
    }

    .visitor-stats-card span {
        font-size: 0.72rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   10. REKLAM BÖLÜMLERİ
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .reklam-metin,
    .reklam-foto,
    .reklam-video {
        padding: 1.1rem;
    }

    .reklam-baslik,
    .reklam-metin h4,
    .reklam-foto h5,
    .reklam-video h5 {
        font-size: 1.05rem !important;
        margin-bottom: 0.6rem !important;
    }

    .reklam-icerik {
        font-size: 0.9rem !important;
    }

    /* Floating reklam genişliği */
    .floating-ad-item {
        width: calc(100vw - 20px) !important;
        max-width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   11. FORM ELEMANLARI (iOS zoom engellemek için font-size 16px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    textarea.form-control {
        font-size: 16px !important; /* iOS auto-zoom engellemek için */
    }
}

/* ─────────────────────────────────────────────────────────────
   12. INFO-BOX
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .info-box {
        padding: 1.1rem !important;
    }

    .info-box h4 {
        font-size: 1.15rem;
        margin-bottom: 1rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   13. ALERT KUTULARI
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .alert {
        padding: 0.85rem 1rem;
    }

    .alert h5.alert-heading {
        font-size: 0.95rem;
    }

    .alert p {
        font-size: 0.88rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   14. NATIVE APP LAYOUT – EK DÜZELTMELER
   ───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
    body.native-app-layout .navbar {
        width: calc(100% - 8px) !important;
        border-radius: 14px !important;
        top: 4px !important;
    }

    body.native-app-layout .header {
        width: calc(100% - 8px) !important;
        border-radius: 16px !important;
        padding: 0.9rem 0 0.75rem !important;
    }

    body.native-app-layout .header > .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   15. ERİŞİLEBİLİRLİK BUTONU – Çok küçük ekranlarda ikon moduna geç
   ───────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
    .accessibility-toggle-button span {
        display: none !important;
    }

    .accessibility-toggle-button {
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .accessibility-toggle-button svg {
        width: 24px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   16. BOTTOM NAV – Çok küçük ekranlarda metin ölçeği
   ───────────────────────────────────────────────────────────── */
@media (max-width: 350px) {
    body.native-app-layout .bottom-nav {
        padding-left: 4px !important;
        padding-right: 4px !important;
        gap: 2px !important;
    }

    .bottom-nav-item span {
        font-size: 0.62rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .bottom-nav-item i {
        font-size: 1.1rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   17. SABİT KONUMLU BUTONLAR – Çakışmayı önle
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    /* Scroll-to-top ve feedback-fab'ın bottom-nav ile çakışmaması */
    body.native-app-layout #scrollToTop {
        right: 12px !important;
        bottom: 105px !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 1.2rem !important;
    }

    body.native-app-layout .feedback-fab {
        right: 12px !important;
        left: auto !important;
        bottom: 160px !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 1.2rem !important;
    }

    body.native-app-layout .accessibility-toggle-button,
    body.native-app-layout #accessibilityToggle {
        left: 12px !important;
        right: auto !important;
        bottom: 105px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   18. MODAL – Mobilde daha iyi görünüm
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .modal.show {
        padding: 0.35rem !important;
    }

    .modal.show .modal-dialog {
        width: calc(100vw - 0.7rem) !important;
        max-width: calc(100vw - 0.7rem) !important;
    }

    .modal.show .modal-content {
        border-radius: 14px !important;
    }

    .modal.show .modal-body {
        max-height: calc(100vh - 120px) !important;
    }

    /* Policy modal padding azalt */
    .policy-modal .modal-body {
        padding: 1rem !important;
    }

    .policy-modal .modal-body h5 {
        font-size: 1rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   19. GERİ BİLDİRİM FORMU KARTI
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .feedback-hub-card .card-body {
        padding: 1rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   20. FOOTER
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .footer .col-md-3,
    .footer .col-md-4,
    .footer .col-lg-3,
    .footer .col-lg-4 {
        margin-bottom: 1.25rem;
    }

    .footer h5 {
        font-size: 1rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   21. GENEL BUTON BOYUTU – Taşma önleme
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    /* Büyük butonlar mobilde kompakt */
    .btn:not(.btn-sm):not(.floating-btn):not(.btn-close):not(.feedback-rate-btn) {
        padding: 0.5rem 1.1rem;
        font-size: 0.9rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   22. TABLOLAR – Yatay kaydırma
   ───────────────────────────────────────────────────────────── */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
    .table {
        font-size: 0.85rem;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.6rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   23. ACCORDION / SSS BÖLÜMLERİ
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .accordion-button {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }

    .accordion-body {
        font-size: 0.88rem;
        padding: 0.75rem 1rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   24. HARITA CONTAINER – Mobil yükseklik düzeltme
   ───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .map-container {
        height: 200px !important;
        min-height: 200px !important;
    }

    .map-tabs .map-container {
        height: 220px !important;
        min-height: 220px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   25. ECZANE EKRANI KARTLAR – Mobil için flex ayarları
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    /* Card içindeki yatay flex satırlarını dikeye çevir
       ancak sadece taşan durumlarda */
    .nobetci-card .row.g-2 > .col-6,
    .nobetci-card .row.g-2 > .col-md-6 {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* ─────────────────────────────────────────────────────────────
   26. UPCOMING SUMMARY CHIP'LER – Sarma
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .upcoming-summary-chip {
        font-size: 0.72rem !important;
        padding: 0.3rem 0.55rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   27. NÖBETÇI KARTLAR - Grid Sistemi (Responsive)
       2 sütun (>768px), 1 sütun (<768px), kartlar arası boşluk
   ───────────────────────────────────────────────────────────── */

/* Kartlar arasında responsive boşluk (gap) */
.active-shell .row,
.today-shell .row {
    --bs-gutter-y: 1.5rem;  /* Bootstrap g-3 = 1rem, burada 1.5rem */
}

/* Mobil: 1 sütun, küçük gap */
@media (max-width: 768px) {
    .active-shell .row,
    .today-shell .row {
        --bs-gutter-y: 1rem;
    }

    .active-shell .col-lg-6,
    .today-shell .col-lg-6 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Tablet: hala 2 sütun (col-lg-6 aktif), normal gap */
@media (min-width: 769px) and (max-width: 992px) {
    .active-shell .row,
    .today-shell .row {
        --bs-gutter-y: 1.2rem;
    }
}

/* Masaüstü: 2 sütun, daha fazla gap */
@media (min-width: 993px) {
    .active-shell .row,
    .today-shell .row {
        --bs-gutter-y: 1.5rem;
    }
}

/* Çok küçük ekranlar: minimal gap */
@media (max-width: 375px) {
    .active-shell .row,
    .today-shell .row {
        --bs-gutter-y: 0.75rem;
    }
}

/* Kart yüksekliği: h-100 ile eşit yükseklik sağla */
.nobetci-card {
    display: flex;
    flex-direction: column;
}

.nobetci-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}