/* Ankara İskilipliler Derneği - Mobil Responsive CSS */

/* ==========================================================================
   GENİŞ EKRANLAR VE LAPTOP (Max-width: 1600px, 1400px, 1200px, 1050px)
   Navbar İçin (12 eleman olduğu için sığdırma adımları)
   ========================================================================== */
@media (max-width: 1600px) {
    .site-navbar .nav-link {
        font-size: 0.7rem !important;
        padding: 0.5rem 0.35rem !important;
    }
    .navbar-brand img { max-height: 50px !important; width: auto; }
    .site-navbar .btn-outline-light { padding: 0.35rem 0.8rem !important; font-size: 0.85rem !important; white-space: nowrap !important; }
}

@media (max-width: 1400px) {
    .site-navbar .nav-link {
        font-size: 0.65rem !important;
        padding: 0.5rem 0.25rem !important;
    }
    .logo-text-wrapper {
        font-size: 0.65rem !important;
    }
    .navbar-brand img { max-height: 45px !important; width: auto; }
    .site-navbar .btn-outline-light { padding: 0.3rem 0.6rem !important; font-size: 0.8rem !important; white-space: nowrap !important; }
}

@media (max-width: 1200px) {
    .site-navbar .nav-link {
        font-size: 0.6rem !important;
        padding: 0.5rem 0.15rem !important;
    }
    .logo-text-wrapper {
        font-size: 0.55rem !important;
    }
    .navbar-brand img { max-height: 40px !important; width: auto; }
    .site-navbar .btn-outline-light { padding: 0.25rem 0.5rem !important; font-size: 0.75rem !important; white-space: nowrap !important; }
}

@media (max-width: 1050px) {
    .site-navbar .nav-link {
        font-size: 0.55rem !important;
        padding: 0.5rem 0.1rem !important;
    }
    .logo-text-wrapper { font-size: 0.5rem !important; }
    .navbar-brand img { max-height: 35px !important; width: auto; }
    .site-navbar .btn-outline-light { padding: 0.2rem 0.4rem !important; font-size: 0.7rem !important; white-space: nowrap !important; }
}

/* ==========================================================================
   TABLET, LAPTOP VE KÜÇÜK EKRANLAR (Max-width: 991px)
   Navbar 991px altında sidebara (hamburger menü) geçer
   ========================================================================== */
@media (max-width: 991px) {
    /* Navbar logosu mobilde daha küçük */
    .navbar-brand img { max-height: 45px !important; width: auto; }
    .logo-text-wrapper { font-size: 0.65rem !important; }

    /* Navbar ve menü düzenlemeleri */
    .site-navbar .navbar-nav {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .site-navbar .nav-link {
        font-size: 1rem !important;
        padding: 0.8rem 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        white-space: normal !important;
    }
    .site-navbar .btn-outline-light {
        margin-top: 1rem;
        width: 100%;
        text-align: center;
        padding: 0.5rem 1rem !important;
        font-size: 1rem !important;
    }
}

/* ==========================================================================
   MOBİL EKRANLAR (Max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Footer mobilde hizalama (Sadece tam mobilde ortala, tablette değil) */
    .site-footer {
        text-align: center;
    }
    .site-footer .d-flex.align-items-center {
        justify-content: center;
        flex-direction: column;
        margin-bottom: 1.5rem !important;
    }
    .site-footer .d-flex.align-items-center img {
        margin-right: 0 !important;
        margin-bottom: 1rem;
    }
    .social-links {
        justify-content: center;
        display: flex;
        margin-bottom: 2rem;
    }

    /* Ana sayfa başlıkları, butonlar ve font küçültmeleri */
    .hero-section h1.display-3 {
        font-size: 2.2rem !important;
    }
    
    .hero-section p.lead {
        font-size: 1.1rem !important;
    }

    /* Alt Sayfa Hero Alanları */
    .page-hero-section {
        min-height: 250px !important;
        padding-top: 60px !important;
    }
    .page-hero-section h1 {
        font-size: 1.8rem !important;
    }

    /* Hızlı İşlem Kartları mobilde hero text ile çakışmasın */
    .hero-action-cards-wrapper {
        margin-top: -15px !important;
    }

    /* Kartların padding ayarları ve taşmalarını önlemek için */
    .card-body {
        padding: 1.5rem !important;
    }

    /* Hızlı işlemler (Grid düzeltmeleri vs.) */
    
    /* İstatistik sayaçları boyutları */
    .stat-counter {
        font-size: 2rem !important;
    }

    /* Tablo ve Form Optimizasyonları */
    .table {
        font-size: 0.85rem;
    }

    /* Tabloyu mobilde kart yapısına dönüştürme (.table-responsive-cards) */
    .table-responsive-cards table, 
    .table-responsive-cards thead, 
    .table-responsive-cards tbody, 
    .table-responsive-cards th, 
    .table-responsive-cards td, 
    .table-responsive-cards tr { 
        display: block; 
    }
    
    .table-responsive-cards thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .table-responsive-cards tr {
        border: 1px solid #dee2e6;
        border-radius: 12px;
        margin-bottom: 1rem;
        background: #fff;
        padding: 0.5rem;
    }
    
    .table-responsive-cards td {
        border: none;
        border-bottom: 1px solid #f1f5f9;
        position: relative;
        padding-left: 50% !important;
        text-align: right;
        min-height: 45px;
    }
    
    .table-responsive-cards td:last-child {
        border-bottom: none;
    }

    .table-responsive-cards td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #6c757d;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   KÜÇÜK MOBİL EKRANLAR (Max-width: 575px)
   ========================================================================== */
@media (max-width: 575px) {
    /* İyice dar ekranlar için özel optimizasyonlar */
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Mobilde padding boşluklarını azaltmak */
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
}