/* ============================================================
   AH GECELER — mobile-fix.css
   Mobilde sağa kayma (overflow-x) sorununu giderir.
   css.css'den SONRA yüklenir.
   ============================================================ */

/* ¦¦ 1. Kök seviye overflow kilidi ¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

    /* ¦¦ 2. Tüm direct child'lar 100vw'yu geçemesin ¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
    body > * {
        max-width: 100%;
    }

/* ¦¦ 3. Nav — fixed pozisyondaki nav taşıyor olabilir ¦¦¦¦¦¦¦¦¦ */
nav {
    max-width: 100vw;
    overflow: hidden;
}

/* ¦¦ 4. Hero bölümü ¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
.hero,
.detail-hero {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* hero-bg absolute pozisyonlu, dışa taşıyor olabilir */
.hero-bg,
.detail-hero-bg {
    width: 100%;
    left: 0;
    right: 0;
}

/* ¦¦ 5. Sections ¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
section,
.section,
.about-section,
.categories-section,
.detail-layout {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ¦¦ 6. Events grid — yatay scroll değil wrap yapsın ¦¦¦¦¦¦¦¦¦¦ */
.events-grid {
    width: 100%;
}

/* ¦¦ 7. Ticket category grid — 4 sütun dar ekranda taşıyor ¦¦¦ */
@media (max-width: 900px) {
    .ticket-category-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .ticket-category-grid {
        grid-template-columns: 1fr;
    }
}

/* ¦¦ 8. Nav — dar ekranda padding küçülsün ¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
@media (max-width: 768px) {
    nav {
        padding: 14px 16px;
        gap: 12px;
    }

    .nav-links {
        display: none; /* mobilde gizli, hamburger menü eklenebilir */
    }

    .nav-logo {
        font-size: 22px;
    }
}

/* ¦¦ 9. Section padding — mobilde aşırı yatay boşluk ¦¦¦¦¦¦¦¦¦ */
@media (max-width: 768px) {
    .section {
        padding: 50px 16px;
    }

    .about-section {
        padding: 50px 16px;
    }

    .about-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ¦¦ 10. Hero content — taşan metin ¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
@media (max-width: 768px) {
    .hero {
        padding: 100px 16px 70px;
    }

    .hero-date-info {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }

    .hero-cta-group {
        flex-direction: column;
        width: 100%;
    }

        .hero-cta-group .btn-primary,
        .hero-cta-group .btn-secondary {
            width: 100%;
            text-align: center;
        }

    .hero-title {
        font-size: clamp(52px, 18vw, 100px);
    }
}

/* ¦¦ 11. Event kartları — mobilde tek sütun ¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
@media (max-width: 768px) {
    .events-grid {
        grid-template-columns: 1fr;
    }

    .event-card-inner {
        padding: 24px 18px;
    }
}

/* ¦¦ 12. Footer — taşan linkler ¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
@media (max-width: 600px) {
    footer {
        padding: 40px 16px;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }
}

/* ¦¦ 13. Cart sidebar — mobilde tam genişlik ¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
@media (max-width: 480px) {
    .cart-sidebar {
        width: 100%;
    }
}

/* ¦¦ 14. Intro screen — mobil ¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
@media (max-width: 480px) {
    .intro-logo {
        font-size: 80px;
    }

    .intro-rose-svg {
        width: 160px;
    }

    .intro-enter-btn {
        padding: 12px 32px;
        font-size: 11px;
    }
}

/* ¦¦ 15. Sticky bar — mobilde taşıyor olabilir ¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
@media (max-width: 768px) {
    .sticky-bar-inner {
        padding: 10px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .sticky-name {
        font-size: 14px;
    }
}