/* =============================================
   Malatya Giyotin Cam — Responsive CSS
   Breakpoints: 1200px, 1024px, 768px, 480px
   ============================================= */

/* =============================================
   1200px — Galeri 4→3 kolon, Footer 4→2 kolon
   ============================================= */
@media (max-width: 1200px) {
    .container {
        padding: 0 24px;
    }

    /* Galeri 4 → 3 kolon */
    .galeri-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer 4 → 2 kolon */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    /* Hizmet kartları */
    .hizmetler-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Ürün kartları */
    .urunler-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Blog kartları */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Neden biz */
    .neden-biz-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================
   1024px — Mobil menü aktif, sidebar alta düşer
   ============================================= */
@media (max-width: 1024px) {
    /* Topbar gizle */
    .topbar {
        display: none;
    }

    /* Desktop navigasyonu gizle */
    .main-nav {
        display: none;
    }

    /* Header CTA gizle (masaüstü) */
    .header-cta {
        display: none;
    }

    /* Hamburger göster */
    .hamburger {
        display: flex;
    }

    /* Sidebar alta düşer */
    .content-with-sidebar {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        order: 2;
    }

    /* Firma tanıtım grid */
    .firma-tanitim-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .firma-tanitim-grid .firma-tanitim-img {
        height: 400px;
    }

    /* Hakkımızda grid */
    .about-section-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-section-grid > div:first-child {
        order: 2;
    }

    .about-section-grid > div:last-child {
        order: 1;
    }

    /* İletişim grid */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Süreç grid */
    .surec-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Hero slider metin */
    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    /* Anahtar teslim süreç */
    .surec-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    /* İstatistik grid */
    .istatistik-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================
   768px — Grid'ler 2→1 kolon
   ============================================= */
@media (max-width: 768px) {
    /* Tekli kolonlar */
    .hizmetler-grid,
    .urunler-grid,
    .blog-grid,
    .neden-biz-grid {
        grid-template-columns: 1fr;
    }

    /* Galeri 3 → 2 kolon */
    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Süreç grid */
    .surec-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer tek kolon */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Footer alt bar */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

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

    /* Hero */
    .hero-slide {
        min-height: 400px;
    }

    .hero-content h1 {
        font-size: 1.75rem;
    }

    .hero-content p {
        font-size: 0.95rem;
        max-width: 100%;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }

    /* Hero okları */
    .hero-prev,
    .hero-next {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

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

    .section-title {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    /* Detay sayfa hero */
    .detay-hero h1 {
        font-size: 1.5rem;
    }

    /* Kapak görseli */
    .detay-kapak {
        max-height: 280px;
    }

    /* CTA bölümü */
    .cta-section h2 {
        font-size: 1.5rem;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .cta-buttons .btn {
        width: 100%;
        text-align: center;
    }

    /* İletişim aksiyon bar */
    .contact-action-bar {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .contact-action-bar .btn {
        width: 100%;
        justify-content: center;
    }

    /* İstatistikler */
    .istatistik-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Sabit butonlar mobil */
    .fixed-buttons {
        bottom: 0;
        left: 0;
        top: auto;
        flex-direction: row;
        width: 100%;
        z-index: 999;
    }

    .fixed-buttons a {
        flex: 1;
        width: auto;
        height: 44px;
    }

    /* Mobil menü genişlik */
    .mobile-menu {
        width: 85%;
    }

    /* Lightbox */
    .lightbox-thumbnails {
        gap: 4px;
    }

    .lightbox-thumbnail {
        width: 50px;
        height: 50px;
    }

    /* SSS */
    .sss-question {
        font-size: 0.85rem;
        padding: 14px 16px;
    }

    .sss-answer {
        padding: 0 16px;
        font-size: 0.9rem;
    }
}

/* =============================================
   480px — Galeri 2→1 kolon, font küçülür
   ============================================= */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    /* Galeri 2 kolon */
    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Süreç tek kolon */
    .surec-grid {
        grid-template-columns: 1fr;
    }

    /* Font boyutları küçültme */
    body {
        font-size: 14px;
    }

    h1, .section-title {
        font-size: 1.35rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 1.05rem;
    }

    /* Hero */
    .hero-slide {
        min-height: 320px;
    }

    .hero-content h1 {
        font-size: 1.4rem;
    }

    .hero-content p {
        font-size: 0.88rem;
    }

    /* Kartlar padding azalt */
    .hizmet-kart-icerik,
    .urun-kart-icerik,
    .blog-kart-icerik {
        padding: 16px;
    }

    /* İstatistikler */
    .istatistik-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .istatistik-item .counter {
        font-size: 2rem;
    }

    /* Detay sayfa hero */
    .detay-hero {
        padding: 30px 0;
    }

    .detay-hero h1 {
        font-size: 1.3rem;
    }

    /* SSS */
    .sss-question {
        font-size: 0.82rem;
        padding: 12px 14px;
    }

    /* Logo */
    .logo img {
        max-width: 240px;
    }

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

    /* Footer */
    .site-footer {
        padding: 60px 0 20px;
    }

    .footer-column h3 {
        font-size: 1rem;
    }

    /* CTA */
    .cta-section {
        padding: 40px 0;
    }

    .cta-section h2 {
        font-size: 1.3rem;
    }

    /* Form */
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 14px;
        padding: 10px 14px;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 0.8rem;
    }

    /* Mobil menü */
    .mobile-menu {
        width: 90%;
    }

    .mobile-menu .mobile-nav-link {
        font-size: 0.95rem;
        padding: 12px 20px;
    }
}

/* =============================================
   Animasyon Taşma Önleme
   fade-in-left/right animasyonları mobilde
   sağda beyaz boşluk oluşturabilir.
   Çözüm: Animasyonlu elementlerin ÜST
   container'ına overflow-x: hidden
   ============================================= */
.animate-container {
    overflow-x: hidden;
}

/* Hero slider container */
.hero-slider {
    overflow: hidden;
}

/* =============================================
   Print Styles
   ============================================= */
@media print {
    .topbar,
    .main-header,
    .fixed-buttons,
    .mobile-menu,
    .mobile-overlay,
    .cta-section,
    .hero-prev,
    .hero-next,
    .hero-bullets {
        display: none !important;
    }

    .content-with-sidebar {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

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