/* ============================================
   RESPONSIVE CSS - TatilTour Theme
   3 Breakpoint: 1024px, 768px, 480px
   ============================================ */

/* ─── Tablet (max-width: 1024px) ─── */
@media (max-width: 1024px) {

    /* Grid */
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-5 { grid-template-columns: repeat(3, 1fr); }

    /* Header */
    .main-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .header-top-left span:nth-child(2) {
        display: none;
    }

    .header-top-socials {
        display: none;
    }

    /* B31 fix: lang-switcher 768px'te gizlenecek (header-top ile birlikte)
       768-1024px arası header-top'ta erişilebilir kalması için buradan kaldırıldı */

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid .footer-col:first-child {
        grid-column: 1 / -1;
    }

    /* Section spacing */
    .section {
        padding: 40px 0;
    }

    .section-lg {
        padding: 60px 0;
    }

    /* Typography */
    h1 { font-size: var(--fs-3xl); }
    h2 { font-size: var(--fs-2xl); }

    .section-header h2 {
        font-size: var(--fs-2xl);
    }
}

/* ─── Mobile (max-width: 768px) ─── */
@media (max-width: 768px) {

    :root {
        --container-padding: 16px;
    }

    /* Grid */
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr; }
    .grid-5 { grid-template-columns: repeat(2, 1fr); }

    /* Header */
    .header-top {
        display: none;
    }

    .main-header {
        top: 0; /* header-top gizli olduğu için -40px gerekmiyor */
    }

    .header-main {
        padding: 10px 0;
    }

    .logo {
        font-size: 1.3rem;
    }

    /* Top Banner */
    .top-banner {
        font-size: var(--fs-xs);
        padding: 8px 0;
    }

    .top-banner p {
        font-size: var(--fs-xs);
        padding-right: 30px;
    }

    .top-banner p strong {
        display: inline;
    }

    /* Footer */
    .footer-top {
        padding: 40px 0 30px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .footer-grid .footer-col:first-child {
        grid-column: 1 / -1;
    }

    .footer-logo .logo-tatil,
    .footer-logo .logo-tour {
        font-size: 24px;
    }
    .footer-logo .logo-com {
        font-size: 16px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .footer-links {
        justify-content: center;
    }

    .footer-badges {
        justify-content: center;
    }

    /* Buttons */
    .btn-lg {
        padding: 14px 24px;
        font-size: var(--fs-base);
    }

    /* Section */
    .section {
        padding: 32px 0;
    }

    .section-header {
        margin-bottom: 24px;
    }

    .section-header h2 {
        font-size: var(--fs-xl);
    }

    /* Typography */
    h1 { font-size: var(--fs-2xl); }
    h2 { font-size: var(--fs-xl); }
    h3 { font-size: var(--fs-lg); }

    /* Cards */
    .card-img {
        height: 180px;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: var(--fs-xs);
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Pagination */
    .pagination {
        gap: 4px;
    }

    .pagination a,
    .pagination span {
        width: 36px;
        height: 36px;
        font-size: var(--fs-sm);
    }

    /* ── Bottom Navigation Bar (shown ≤768px) ── */
    .mobile-bottom-nav {
        display: flex;
    }

    /* Body padding for bottom nav */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* Spacing overrides */
    .mt-5 { margin-top: 32px; }
    .mb-5 { margin-bottom: 32px; }

    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }
}

/* ─── Small Mobile (max-width: 480px) ─── */
@media (max-width: 480px) {

    :root {
        --container-padding: 12px;
    }

    /* Grid */
    .grid-5 { grid-template-columns: 1fr; }

    /* Logo */
    .logo {
        font-size: 1.1rem;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-col h4 {
        font-size: var(--fs-base);
        margin-bottom: 12px;
    }

    .footer-logo .logo-tatil,
    .footer-logo .logo-tour {
        font-size: 20px;
    }
    .footer-logo .logo-com {
        font-size: 14px;
    }

    .footer-social a {
        width: 34px;
        height: 34px;
        font-size: var(--fs-sm);
    }

    /* Buttons */
    .btn {
        padding: 10px 18px;
        font-size: var(--fs-sm);
    }

    .btn-sm {
        padding: 6px 12px;
    }

    /* Typography */
    h1 { font-size: var(--fs-xl); }
    h2 { font-size: var(--fs-lg); }

    .section-header h2 {
        font-size: var(--fs-lg);
    }

    /* Cards */
    .card-img {
        height: 160px;
    }

    /* Badges */
    .badge-trust {
        font-size: 10px;
        padding: 4px 8px;
    }

    /* Price */
    .price-current {
        font-size: var(--fs-xl);
    }

    /* Top Banner */
    .top-banner p a {
        display: none;
    }
}

/* ─── Print Styles ─── */
@media print {
    .top-banner,
    .header-top,
    .mobile-menu-btn,
    .mobile-bottom-nav,
    .mobile-fullmenu,
    .footer-social,
    .footer-badges {
        display: none !important;
    }

    .main-header {
        position: static;
        box-shadow: none;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}