/* ================================================================
   DOĞRUL — paylaşılan mobil düzeltmeleri
   Masaüstü sayfaların 768px altında düzgün görünmesini sağlar.
   mobile-*.html ikizlerinin yerini alan tek kaynak.
   ================================================================ */

@media (max-width: 768px) {

    /* --- genel güvenlik ağı --- */
    html, body { overflow-x: hidden !important; }

    /* backdrop-filter, fixed konumlu hamburger menüyü header'ın içine
       hapseder (containing block oluşturur); mobilde kapat.
       Arka plan %95 opak beyaz olduğundan görsel fark yok. */
    header, #header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* menü header'ın çocuğu; header'ın katmanı sayfadaki her şeyin
           (rozetler, whatsapp butonu ~9500) üstünde olmalı ki açılan
           menünün üzerine hiçbir şey binmesin */
        z-index: 100000 !important;
    }
    .mobile-menu {
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
    .mobile-menu-overlay {
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    /* dekoratif kenar görselleri mobilde yer kaplamasın */
    .left-zeytin-image { display: none !important; }
    .etiket-hover { display: none !important; }
    .logo-oil-drop { display: none !important; }  /* damla mobilde tagline'ı taşırıyor */
    .desktop-logo-container > img { display: none !important; }  /* dal süsü */

    /* --- anasayfa --- */
    .about-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .about-image { max-width: 100% !important; }
    .about-image img { width: 100% !important; height: auto !important; }
    .hero-content { padding: 0 16px !important; }

    /* eski büyük header için konmuş elle boşluk payı — mobilde header
       küçük, gereksiz boşluk yaratıyor */
    div[style="height:90px;"] { height: 12px !important; }

    /* --- breadcrumb (analizlerimiz vb.) --- */
    .breadcrumb {
        transform: none !important;
        margin: 8px 0 0 0 !important;
        padding: 10px 16px !important;
    }
    .breadcrumb ol { flex-wrap: wrap !important; }

    /* --- urunler: flip kart --- */
    .flip-card-container .flip-card {
        width: min(360px, calc(100vw - 48px)) !important;
        height: 545px !important;
        min-height: 0;
    }
    .flip-card-container { margin: 0 !important; }
    .premium-upcoming-section { padding: 30px 16px !important; }

    /* --- zeytinhakkinda: kart grid'leri --- */
    .benefits-grid,
    .usage-grid,
    .storage-conditions,
    .conditions-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .benefit-card, .condition-card { max-width: 100% !important; }

    /* --- kinali: ürün sayfası --- */
    .kinali-flex {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .kinali-info { min-width: 0 !important; padding: 10px 0 !important; }
    .kinali-main-box { padding: 14px !important; }
    .kinali-title { font-size: 1.8rem !important; }
    .reviews-grid { grid-template-columns: 1fr !important; }
    .review-card { max-width: 100% !important; }
    .reviews-cta { flex-wrap: wrap !important; max-width: 100% !important; justify-content: center !important; }
    .reviews-cta-btn { max-width: calc(100vw - 40px) !important; white-space: normal !important; }
    .slider-btn.right { right: 4px !important; }
    .quality-badges { position: static !important; margin: 10px 0 !important; }

    /* --- iletisim --- */
    a[href^="mailto:"] { word-break: break-all !important; }
    .bird-container { display: none !important; }
    .insta-band { flex-direction: column !important; min-height: 0 !important; }
    .insta-band > div { padding: 24px 16px !important; max-width: 100% !important; align-items: center !important; }
    .insta-band img { max-width: 100% !important; height: auto !important; }

    /* içerik görselleri hiçbir zaman viewport'u aşmasın */
    .content-section img,
    .kinali-main-box img,
    .about-section img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ================================================
       TİPOGRAFİ — mobilde başlıklar masaüstü boyutunda
       kalıyordu; metin sütunu da iç içe padding'ler
       yüzünden ~215px'e düşüyordu.
       ================================================ */

    /* başlıklar */
    .hero-title { font-size: 2.2rem !important; }
    .hero-subtitle { font-size: 1.05rem !important; }
    .page-title { font-size: 1.9rem !important; }
    .section-title, .reviews-title, .certificates-title,
    .philosophy-title, .meaning-title,
    .premium-upcoming-title { font-size: 1.6rem !important; }
    .odul-prestij-title { font-size: 1.7rem !important; }
    .about-text h2 { font-size: 1.7rem !important; margin-bottom: 18px !important; }

    /* gövde metni */
    .about-text p { font-size: 1rem !important; line-height: 1.65 !important; margin-bottom: 16px !important; }
    .content-section p, .content-section li { font-size: 0.98rem !important; line-height: 1.6 !important; }

    /* boşluklar — metne genişlik kazandır */
    .section { padding: 10px 12px !important; margin-bottom: 24px !important; }
    .about-section { padding: 28px 18px !important; margin: 16px 6px !important; border-radius: 24px !important; }
    .about-image { padding-right: 0 !important; }
    .about-image img { height: auto !important; }
    .content-section { padding: 24px 16px !important; }
    .container { padding-left: 12px !important; padding-right: 12px !important; }
}