/*
 * Slyvia Studio - Frontend Mobil & Tema Düzeltmeleri
 *
 * Bu dosya style.css ve theme-custom.css'ten SONRA yüklenir.
 * Sadece kanıtlanmış mobil/tema sorunları için EK düzeltmeler içerir.
 * Mevcut kuralları override etmek yerine eksikleri tamamlar.
 *
 * Audit tarihi: 2026-04-29
 * Hedef breakpoint'ler: 320, 375, 414, 480, 576, 768, 992, 1024
 */

/* ==========================================================================
   SECTION 1 — Genel Yatay Scroll Koruması (Catch-all)
   Sorun: Sabit min-width inline style'lar bazı sayfalarda taşma yapar
   ========================================================================== */
@media (max-width: 768px) {
    /* iade-takip.php form içindeki sabit min-width düzelt */
    .container form select[style*="min-width"],
    .container form input[style*="min-width"] {
        min-width: 0 !important;
        flex-basis: 100% !important;
    }

    /* Container içinde max-width sabit olan inline yapıları sınırla */
    .container[style*="max-width"] {
        max-width: 100% !important;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

/* ==========================================================================
   SECTION 2 — Form Inputs — iOS Zoom Engelleme (Eksik Yerler)
   Sorun: Inline style'lı input/select'lerde 16px altı font iOS zoom yapar
   ========================================================================== */
@media (max-width: 768px) {
    /* Inline style ile yazılmış select / input / textarea'lar */
    select[style],
    input[type="text"][style],
    input[type="email"][style],
    input[type="tel"][style],
    input[type="number"][style],
    input[type="search"][style],
    input[type="password"][style],
    textarea[style] {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   SECTION 3 — İade Talebi & Takip Sayfaları (mobil)
   Sorun: Tamamen inline style ile yazıldığı için mobilde sıkışıklık
   ========================================================================== */
@media (max-width: 768px) {
    /* İade talebi/takip kart içerik padding'i mobilde küçült */
    body .container[style*="max-width: 800px"] > div[style*="padding: var(--spacing-xl)"],
    body .container[style*="max-width: 900px"] > div[style*="padding: var(--spacing-xl)"] {
        padding: var(--spacing-md) !important;
    }

    /* İade talep formundaki kargo formu - dikey */
    .iade-cargo-form,
    body form[style*="display: flex"][style*="flex-wrap: wrap"] {
        flex-direction: column !important;
        gap: var(--spacing-sm) !important;
    }

    /* İade kart başlığı - dikey */
    body div[style*="display: flex"][style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
        gap: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    /* İade ürün etiketleri (60px+inline content) küçük ekranda */
    body label[style*="display: flex"][style*="border: 2px solid"] {
        flex-wrap: wrap;
        gap: var(--spacing-sm) !important;
    }
    body label[style*="display: flex"][style*="border: 2px solid"] > div[style*="flex: 1"] {
        flex: 1 1 calc(100% - 90px);
        min-width: 0;
    }
}

/* ==========================================================================
   SECTION 4 — Kategori / Ürünler — Toolbar Düzeni (mobil)
   Sorun: Toolbar select + label + paragraf yan yana taşar
   ========================================================================== */
@media (max-width: 480px) {
    /* Toolbar inline div'leri — alt alta */
    .container > div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
        gap: var(--spacing-sm) !important;
    }

    /* Sıralama select'i tam genişlik */
    #sortSelect {
        flex: 1;
        min-width: 0;
    }
}

/* ==========================================================================
   SECTION 5 — Subcategory Chips — Mobilde Düzgün Wrap
   ========================================================================== */
@media (max-width: 480px) {
    .subcategory-chips {
        gap: 6px !important;
    }
    .subcategory-chip {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

/* ==========================================================================
   SECTION 6 — Hesabim Sayfası — Eksik Mobil Detaylar
   Sorun: Profile resmi 80px sabit + form max-width 400px, küçük ekranda iyi
   ========================================================================== */
@media (max-width: 480px) {
    /* Hesap profil avatarı küçük ekranda biraz daha küçülsün */
    body div[style*="background: var(--white)"][style*="border-radius: var(--border-radius-lg)"] > div[style*="text-align: center"] > div[style*="width: 80px"][style*="height: 80px"] {
        width: 64px !important;
        height: 64px !important;
    }

    /* Hesap bilgilendirme alanları (favorites/addresses gibi) padding küçült */
    body section#favorites[style],
    body section#addresses[style],
    body section#profile[style],
    body section#password[style] {
        padding: var(--spacing-md) !important;
    }

    /* Form max-width: 400px — küçük ekranda tam genişlik */
    body div.form-group[style*="max-width: 400px"] {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   SECTION 7 — Modal Mobil — Inline max-width Override
   Sorun: max-width: 450px / 600px modal mobilde aşıyor
   ========================================================================== */
@media (max-width: 576px) {
    .modal-content[style*="max-width"],
    .modal[style*="max-width"] {
        max-width: calc(100% - 32px) !important;
        width: calc(100% - 32px) !important;
        margin: 16px !important;
    }
}

/* ==========================================================================
   SECTION 8 — Touch Target Minimum 44px (Eksik Olanlar)
   Sorun: Bazı linkler ve butonlar 36-40px arası, 44px altı
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Hesabim sidebar nav linkleri — touch target */
    .account-layout > div:first-child nav a,
    body nav > a[href^="#"] {
        min-height: 44px;
    }

    /* Pagination genel — pasif/aktif tüm linkler */
    .pagination .btn,
    .container [class*="pagination"] a,
    .container [class*="pagination"] span {
        min-height: 40px;
        min-width: 40px;
    }

    /* Top bar telefon ve tema butonu */
    .top-bar a,
    .top-bar button {
        min-height: 36px;
        min-width: 36px;
    }

    /* Header search button (desktop > 768) için min boyut */
    .header-search button {
        min-width: 42px;
        min-height: 42px;
    }

    /* Sosyal medya ikonları */
    .footer-social a,
    .social-links a {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ==========================================================================
   SECTION 9 — Image Responsive (Eksik Yerler)
   Sorun: img elementleri max-width: 100% kuralı eksik bazı yerlerde
   ========================================================================== */
img:not([class]):not([style*="width:"]) {
    max-width: 100%;
    height: auto;
}

.container img,
.product-card img,
.blog-card img,
section img {
    max-width: 100%;
}

/* Blog detay içeriğindeki büyük resimler taşmasın */
.blog-content img,
.blog-post-content img,
.description-content img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   SECTION 10 — Long Word/URL Break (taşmayı önle)
   ========================================================================== */
@media (max-width: 768px) {
    .blog-content,
    .blog-post-content,
    .description-content,
    .product-detail-info p,
    .review-content,
    .order-card,
    .cart-item,
    .empty-state p,
    .auth-container p,
    .contact-info p,
    .info-box-info,
    .info-box-warning,
    .info-box-success,
    .info-box-amber,
    .info-box-error {
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    /* Tablolar için yatay scroll güvenliği */
    .container table {
        max-width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   SECTION 11 — KALDIRILDI (2026-04-29 ikinci tur audit)
   Sebep: .auth-container .form-row frontend'de hiç kullanılmıyor;
   inline grid-template-columns: 1fr 1fr de sadece admin sayfalarında,
   spekülatif/dead kural olduğu için kaldırıldı.
   ========================================================================== */

/* ==========================================================================
   SECTION 12 — Ürün Detay — Inline Style Stiller (mobil)
   Sorun: Ürün detayda paylaşım, varyasyon vb. sıkışabilir
   ========================================================================== */
@media (max-width: 480px) {
    /* Variation options sıkışmasın */
    .variation-options {
        flex-wrap: wrap;
    }

    .variation-option {
        font-size: 13px !important;
    }

    /* Product gallery thumbs scroll iyileştirme */
    .product-gallery-thumbs {
        scroll-snap-type: x mandatory;
    }

    .product-gallery-thumb {
        scroll-snap-align: start;
    }
}

/* ==========================================================================
   SECTION 13 — Footer (kompakt mobil)
   Sorun: Footer linkleri merkez hizalı ama bazı yerlerde sıkışma var
   ========================================================================== */
@media (max-width: 480px) {
    /* Footer kolon başlıkları küçük ekranda biraz daha kompakt */
    .footer-col h4 {
        margin-bottom: 10px !important;
    }

    .footer-col ul {
        gap: 8px 12px !important;
    }

    /* Payment icons mobilde küçültme — taşmasın */
    .payment-icons {
        flex-wrap: wrap;
        gap: 6px;
    }

    .payment-icons img,
    .payment-icons i {
        max-height: 24px;
    }
}

/* ==========================================================================
   SECTION 14 — Top Bar — Çok Küçük Ekranlarda Optimize
   Sorun: 320px altı ekranda top-bar-right içeriği taşıyor
   ========================================================================== */
@media (max-width: 360px) {
    .top-bar-right {
        gap: var(--spacing-xs) !important;
    }

    .top-bar-right a span,
    .top-bar-right a {
        font-size: 11px;
    }

    /* Top-bar tel numarası iconla beraber kompakt */
    .top-bar-right a[href^="tel:"] {
        padding: 6px 8px !important;
    }
}

/* ==========================================================================
   SECTION 15 — Header Logo + Actions — 320-360px Optimize
   Sorun: 320px altı ekran header-actions taşma yapıyor
   ========================================================================== */
@media (max-width: 360px) {
    .header-content {
        gap: 4px !important;
    }

    .header-actions {
        gap: 2px !important;
    }

    .header-action {
        padding: 4px !important;
        min-width: 36px !important;
    }

    .header-action i {
        font-size: 15px !important;
    }

    .mobile-menu-toggle,
    .mobile-search-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* Logo daha kompakt */
    .logo img,
    .logo-image {
        height: 44px !important;
    }
}

/* ==========================================================================
   SECTION 16 — Iletisim Sayfası Form Grid (mobil)
   Sorun: form-grid mobilde inline grid template kontrolü yok
   ========================================================================== */
@media (max-width: 768px) {
    .contact-form .form-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .contact-form .form-group.full-width {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   SECTION 17 — SSS Sayfası — Inline FAQ Kuralları
   Sorun: SSS'te inline media query yok, font-size çok büyük olabilir
   ========================================================================== */
@media (max-width: 480px) {
    .faq-item h3,
    .faq-item .faq-question h3 {
        font-size: 15px !important;
        line-height: 1.4;
    }

    .faq-item p {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   SECTION 18 — Özel Günler Sayfası
   Sorun: ozel-gunler hub içinde grid yapısı 380px altı taşma
   ========================================================================== */
@media (max-width: 380px) {
    /* Special-day-card etiketinde uzun kelimeler taşmasın */
    .special-days-hub .special-day-card h3 {
        word-break: break-word;
        hyphens: auto;
    }
}

/* ==========================================================================
   SECTION 19 — Cart-Item Mobilde Daha Net Düzen
   Sorun: Sepet öğesi orijinal grid 80px 1fr — 320px altı sıkışır
   ========================================================================== */
@media (max-width: 360px) {
    .cart-item {
        gap: var(--spacing-sm) !important;
    }

    .cart-item-product img,
    .cart-item-image {
        width: 60px !important;
        height: 60px !important;
    }

    .cart-item .quantity-input {
        height: 36px !important;
    }

    .cart-item .quantity-input button {
        width: 32px !important;
        min-width: 32px !important;
    }

    .cart-item .quantity-input input {
        width: 40px !important;
    }
}

/* ==========================================================================
   SECTION 20 — Ödeme Sayfası — Order Summary Mobil Sticky Sorunları
   Sorun: order-summary sticky 70px görünür olarak ayarlanmış, dark modda kontrast
   ========================================================================== */
@media (max-width: 768px) {
    /* Order summary toggle dark mode metin kontrastı */
    .dark-mode .order-summary {
        background: #262626 !important;
    }

    .dark-mode .order-summary-toggle {
        border-bottom-color: #3D3D3D !important;
        color: #E0E0E0 !important;
    }
}

/* ==========================================================================
   SECTION 21 — Mini Cart Header Mobil
   Sorun: Mini cart başlığı + kapat butonu çok yakın, gap eksik
   ========================================================================== */
@media (max-width: 480px) {
    .mini-cart-header {
        gap: var(--spacing-sm);
    }

    .mini-cart-header h3 {
        font-size: 16px;
        flex: 1;
    }

    .mini-cart-header h3 i {
        margin-right: 4px;
    }
}

/* ==========================================================================
   SECTION 22 — Search Autocomplete Mobil Detayı
   Sorun: Mobil search modal maximum height yetersiz olabilir
   ========================================================================== */
@media (max-width: 480px) {
    .mobile-search-modal {
        padding-top: 60px !important;
    }

    .mobile-search-content {
        width: calc(100% - 32px) !important;
    }

    .mobile-search-results {
        max-height: 60vh !important;
        max-height: 60dvh !important;
    }
}

/* ==========================================================================
   SECTION 23 — Dark Mode — Inline Cream/Beige Bölümler
   Sorun: Inline style="background: var(--cream)" alanlarında dark modda
   yazılar görünür kalmalı (cream dark modda 1E1E1E olur, hala koyu)
   ========================================================================== */
.dark-mode [style*="background: var(--cream)"],
.dark-mode [style*="background:var(--cream)"] {
    border: 1px solid #3D3D3D;
}

.dark-mode [style*="background: var(--cream)"] strong,
.dark-mode [style*="background:var(--cream)"] strong,
.dark-mode [style*="background: var(--cream)"] h2,
.dark-mode [style*="background:var(--cream)"] h2,
.dark-mode [style*="background: var(--cream)"] h3,
.dark-mode [style*="background:var(--cream)"] h3,
.dark-mode [style*="background: var(--cream)"] h4,
.dark-mode [style*="background:var(--cream)"] h4 {
    color: #F0F0F0 !important;
}

/* ==========================================================================
   SECTION 24 — KALDIRILDI (2026-04-29 ikinci tur audit)
   Sebep: [style*="border:"][style*="#"] catch-all kuralı aşırı geniş ve
   defansif — gerçek bir bug çözmediği gibi gelecekteki altın/marka borderları
   da yanlışlıkla siyaha çevirebilir. var(--white) yorum-only blok da kaldırıldı.
   ========================================================================== */

/* ==========================================================================
   SECTION 25 — Sticky Header Z-Index ve Mobile Bottom Nav Çakışması
   Sorun: Mobile bottom nav (z:1000) ile mini cart (z:1200) çakışmamalı
   ========================================================================== */
@media (max-width: 768px) {
    /* Modal overlay mobile bottom nav'ın üstünde olmalı */
    .modal-overlay {
        z-index: 2000 !important;
    }

    /* Mini cart aktif iken bottom nav'ın üstünde */
    .mini-cart {
        z-index: 1200;
    }

    .mini-cart-overlay {
        z-index: 1100;
    }

    /* Mobile menu drawer en üstte (mevcut 10000) */
}

/* ==========================================================================
   SECTION 26 — Sayfa Header (page-header) Çok Küçük Ekran
   Sorun: page-header h1 + breadcrumb 320px altı taşma riski
   ========================================================================== */
@media (max-width: 360px) {
    .page-header h1 {
        font-size: 20px !important;
        line-height: 1.3;
    }

    .page-header .breadcrumb {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   SECTION 27 — Buton Wrap (Concrete Classes Only)
   Sorun: order-actions ve product-detail-actions long-text iken taşar
   Not: 2026-04-29 ikinci tur audit'te [class*="actions"][style*="display: flex"]
   catch-all'ı kaldırıldı — aşırı geniş ve hipotetik bir kural.
   ========================================================================== */
@media (max-width: 480px) {
    .order-actions,
    .product-detail-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    .order-actions .btn {
        flex: 1 1 calc(50% - 3px);
        min-width: 0;
    }
}

/* ==========================================================================
   SECTION 28 — Status Badge Mobilde Kompakt (Sipariş Detay)
   ========================================================================== */
@media (max-width: 480px) {
    .order-status,
    .order-status-badge,
    .status-badge,
    span[class*="status-badge"] {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
}

/* ==========================================================================
   SECTION 29 — Reduced Motion Saygı Eki
   Sorun: Mevcut prefers-reduced-motion kuralı genel ama bazı ek özellikler eksik
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    /* Hover hareketlerini iptal et */
    .product-card:hover,
    .feature-card:hover,
    .category-card:hover,
    .blog-card:hover,
    .bento-card:hover {
        transform: none !important;
    }

    /* Float animasyonlarını durdur */
    .hero-shape,
    .floating {
        animation: none !important;
    }
}

/* ==========================================================================
   SECTION 30 — Yatay Scroll Final Catch-all
   Sorun: Bazı container'lar inline style yüzünden taşıyor
   ========================================================================== */
@media (max-width: 768px) {
    body {
        max-width: 100%;
        /* overflow-x: hidden KALDIRILDI - position:sticky'yi olduruyor, html'deki yeterli */
    }

    /* Genel container — taşma engelleme */
    .main-content,
    .container,
    section,
    .section {
        max-width: 100%;
    }

    /* Pre/code blokları taşmasın (blog detayları için) */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        word-wrap: break-word;
    }
}

/* ==========================================================================
   SECTION 30b — Hero Elegant Slider Mobil Taşma Düzeltmesi
   Sorun: hero-elegant ve hero-products-grid 320px'de viewport'tan taşıyor
   ========================================================================== */
@media (max-width: 480px) {
    .hero-elegant {
        max-width: 100%;
        overflow: hidden;
    }

    .hero-elegant-content {
        max-width: 100%;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        box-sizing: border-box;
    }

    .hero-products-grid {
        max-width: 100%;
        width: 100%;
        grid-template-columns: 1fr !important;
    }

    .hero-product-main,
    .hero-product-card {
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 360px) {
    /* Header actions — daha sıkı, taşma engelleme */
    .header-actions {
        max-width: 100%;
        gap: 0 !important;
        flex-wrap: nowrap;
    }

    .header-action.cart-toggle,
    .cart-toggle {
        max-width: 40px;
        overflow: visible;
    }

    /* Cart-count badge taşma engelleme */
    .cart-count {
        right: -4px !important;
        top: -4px !important;
    }
}

/* ==========================================================================
   SECTION 31 — 320px (iPhone SE) Çok Küçük Ekran Final Düzeltmeler
   ========================================================================== */
@media (max-width: 320px) {
    /* Container minimum padding */
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Buton minimum dolgu */
    .btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .btn-sm {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    /* H1 başlıklar */
    h1 {
        font-size: 18px !important;
    }

    h2 {
        font-size: 16px !important;
    }

    h3 {
        font-size: 14px !important;
    }

    /* Form input'lar */
    input,
    select,
    textarea {
        padding: 8px 10px !important;
    }
}

/* ==========================================================================
   SECTION 32 — Dark Mode Kontrast İyileştirmeleri (WCAG AA)
   Sorun: Bazı placeholder, disabled, secondary text 4.5:1 altı
   ========================================================================== */
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #8C8C8C !important;
    opacity: 1;
}

.dark-mode input:disabled,
.dark-mode textarea:disabled,
.dark-mode select:disabled {
    background: #1E1E1E !important;
    color: #6B6B6B !important;
    border-color: #3D3D3D !important;
}

.dark-mode .btn:disabled,
.dark-mode button:disabled {
    background: #2C2C2C !important;
    color: #6B6B6B !important;
    border-color: #3D3D3D !important;
    cursor: not-allowed;
}

/* Dark mode'da gri secondary text — WCAG AA için kontrast yeterli olmalı */
.dark-mode .text-secondary,
.dark-mode .gray-text {
    color: #B0B0B0 !important;
}

/* ==========================================================================
   SECTION 33 — Dark Mode Inline Light Background Override
   Sorun: Inline style="background:#fff" gibi hardcoded açık arka planlar
   dark modda yazıları okunmaz hale getiriyor
   ========================================================================== */
.dark-mode [style*="background: white"],
.dark-mode [style*="background:#fff"],
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background:#FFFFFF"],
.dark-mode [style*="background: #FFFFFF"],
.dark-mode [style*="background:#ffffff"],
.dark-mode [style*="background: #ffffff"] {
    background: #2C2C2C !important;
    color: #E0E0E0;
}

.dark-mode [style*="background: white"] *,
.dark-mode [style*="background:#fff"] *,
.dark-mode [style*="background: #fff"] *,
.dark-mode [style*="background:#FFFFFF"] *,
.dark-mode [style*="background: #FFFFFF"] *,
.dark-mode [style*="background:#ffffff"] *,
.dark-mode [style*="background: #ffffff"] * {
    color: #E0E0E0;
}

/* ==========================================================================
   SECTION 34 — Mobil Bottom Nav — Dark Mode Tutarlılığı
   ========================================================================== */
.dark-mode .mobile-bottom-nav {
    background: #1E1E1E !important;
    border-top: 1px solid #3D3D3D !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .mobile-nav-item {
    color: #B0B0B0 !important;
}

.dark-mode .mobile-nav-item.active,
.dark-mode .mobile-nav-item:hover {
    color: var(--primary) !important;
}

/* ==========================================================================
   SECTION 35 — Buton Stiller Dark Mode (genel uyumluluk)
   Sorun: btn-outline, btn-ghost dark modda görünmüyor olabilir
   ========================================================================== */
.dark-mode .btn-outline {
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
}

.dark-mode .btn-outline:hover {
    background: var(--primary);
    color: #1E1E1E;
}

/* ==========================================================================
   SECTION 36 — Genel Z-Index Yönetimi Dropdownlar
   Sorun: Dropdown içerisinde modal/toast ile çakışma
   ========================================================================== */
.dropdown-menu {
    z-index: 1000;
}

.dropdown-submenu {
    z-index: 1001;
}

/* Modal her zaman dropdown'un üstünde */
.modal-overlay,
.modal {
    z-index: 2000;
}

/* Toast en üstte olsun */
.toast,
.flash-message {
    z-index: 3000;
}

/* ==========================================================================
   SECTION 37 — Print Mode Genel İyileştirmeler
   ========================================================================== */
@media print {
    /* Mobile elementler print'te gizlensin */
    .mobile-menu-toggle,
    .mobile-search-toggle,
    .mobile-bottom-nav,
    .top-bar,
    .header-search,
    .mini-cart,
    .mini-cart-overlay,
    .mobile-nav-overlay,
    .back-to-top,
    .support-widget,
    .cookie-consent {
        display: none !important;
    }

    /* Body padding sıfır */
    body {
        padding: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }
}

/* ==========================================================================
   SECTION 38 — Ürün Kartı Etiketleri Mobil Küçültme
   Sorun: "Yeni", "Son N Ürün!", "%X İndirim", "Tükendi" badge'leri mobil
   küçük kartlarda (320-480px ekranda 2 sütun ~140-160px kart) padding 8px 14px
   + font 11px ile büyük kalıyor; üstüste 2-3 badge gelince ürün resminin
   neredeyse yarısını kapatıyor. Kanıt: includes/product-card.php satır 66-83
   .product-badges içinde 4 badge tipi (sale/new/stock/out) aynı anda olabiliyor.
   style.css 8307-8347'de mobil override yok.
   Çözüm: 480px altında padding/font küçültme + favori butonuna yer için max-width.
   ========================================================================== */
@media (max-width: 768px) {
    .product-card .product-badges {
        top: 8px;
        left: 8px;
        gap: 4px;
        max-width: calc(100% - 60px); /* sağda favori butonu için alan */
    }
    .product-card .product-badges .badge {
        padding: 4px 9px !important;
        font-size: 10px !important;
        letter-spacing: 0.3px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
        backdrop-filter: none; /* mobilde performans için */
    }
}

@media (max-width: 480px) {
    .product-card .product-badges {
        top: 6px;
        left: 6px;
        gap: 3px;
        max-width: calc(100% - 50px);
    }
    .product-card .product-badges .badge {
        padding: 3px 7px !important;
        font-size: 9px !important;
        letter-spacing: 0.2px !important;
        font-weight: 600;
    }
    /* Sale badge'inde animasyon mobilde performans için durdur */
    .product-card .product-badges .badge-sale {
        animation: none !important;
    }
}

@media (max-width: 360px) {
    .product-card .product-badges .badge {
        padding: 2px 6px !important;
        font-size: 8px !important;
    }
}

/* ==========================================================================
   SECTION 39 — Mobilde Logo Büyütme
   Sorun: Mobilde logo görsel çok ufak görünüyor.
   Mevcut: desktop 50px, 768px 56px, 576px 50px (mobil tablet'ten KÜÇÜK!).
   Kanıt: style.css satır 2956 .logo img height: 50px (desktop), 9509 (768px) 56px,
   9821 (576px) 50px — tutarsız hiyerarşi.
   Çözüm: Mobilde logoyu okunaklı boyuta getir (768px:64, 576px:60, 360px:52).
   ========================================================================== */
@media (max-width: 768px) {
    .logo img,
    .logo-image {
        height: 64px !important;
        max-height: none !important;
        width: auto !important;
    }
}

@media (max-width: 576px) {
    .logo img,
    .logo-image {
        height: 60px !important;
    }
}

@media (max-width: 360px) {
    .logo img,
    .logo-image {
        height: 52px !important;
    }
}

/* ==========================================================================
   SECTION 40 — Hero Slider Görseli Çerçeveye Otur + Büyüt
   Sorun: Slider içindeki ürün görseli (.hero-product-image img) çerçeveye
   tam oturmuyor; padding 14px + max-height: 240px birlikte resmi sıkıştırıyor.
   Kanıt: style.css 12697-12738 .hero-product-image padding: 14px (mobilde
   override yok), .hero-product-image img max-height: 240px sınırlıyor;
   .hero-product-card mobilde max-width: 320px (style.css 13428).
   Çözüm: Mobilde iç padding azalt + max-height kaldır + max-width genişlet.
   ========================================================================== */
@media (max-width: 768px) {
    .hero-product-card {
        padding: 12px !important;
        border-radius: 22px !important;
    }
    .hero-product-image {
        padding: 8px !important;
        border-radius: 16px !important;
        margin-bottom: 10px !important;
    }
    .hero-product-image img {
        max-height: none !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

@media (max-width: 576px) {
    /* Mobilde kartı biraz daha geniş yap, çerçeve içine resim daha iyi otursun */
    .hero-product-card {
        max-width: 360px !important;
        padding: 10px !important;
        border-radius: 20px !important;
    }
    .hero-product-image {
        padding: 6px !important;
        border-radius: 14px !important;
    }
    /* Featured slot içinde daha büyük görsel için iç padding minimal */
    .hero-product-featured .hero-product-image {
        padding: 6px !important;
    }
}

@media (max-width: 360px) {
    .hero-product-card {
        max-width: calc(100% - 24px) !important;
        padding: 8px !important;
    }
    .hero-product-image {
        padding: 5px !important;
    }
}

/* ==========================================================================
   SECTION 41 — Sepete Ekle ve Genel Buton Mobil Oran
   Sorun: Ürün kartlarındaki "Sepete Ekle" butonu mobilde dar kart içinde
   sıkışıyor; .btn padding: 10px 24px (style.css 3451) sabit, .btn-sm 6px 14px /
   font-size 13px (3520-3521). Mobilde küçük kartlarda buton kart genişliğinin
   altında yetersiz, yazı + ikon sığmıyor.
   Çözüm: Ürün kartı butonu mobilde tam genişlik + 44px touch target.
   Hero CTA butonları okunaklı padding/font.
   ========================================================================== */
@media (max-width: 768px) {
    /* Ürün kartı sepete ekle butonu */
    .product-card .product-actions {
        padding: 0;
        gap: 8px;
    }
    .product-card .product-actions .btn,
    .product-card .product-actions .btn-sm {
        width: 100%;
        min-height: 44px;
        padding: 10px 12px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        gap: 6px;
        letter-spacing: 0.2px;
    }
    .product-card .product-actions .btn i {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .product-card .product-actions .btn,
    .product-card .product-actions .btn-sm {
        font-size: 12px !important;
        padding: 10px 10px !important;
        min-height: 42px;
    }
    .product-card .product-actions .btn i {
        font-size: 12px;
    }
    /* Hero slider CTA butonu mobilde okunaklı oran */
    .hero-elegant .btn-primary,
    .hero-elegant .btn-outline {
        min-height: 44px;
        padding: 12px 20px !important;
        font-size: 14px !important;
        font-weight: 600;
    }
    /* Genel .btn-sm — pagination/etiket vb. küçük butonlar */
    body .btn-sm:not(.product-card *):not(.product-actions *) {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 36px;
    }
}

@media (max-width: 360px) {
    .product-card .product-actions .btn,
    .product-card .product-actions .btn-sm {
        font-size: 11px !important;
        padding: 9px 8px !important;
    }
    /* "Sepete Ekle" yazısı dar kartta kesilmesin diye gap'i azalt */
    .product-card .product-actions .btn {
        gap: 4px;
    }
}

/* ==========================================================================
   SECTION 42 — iOS Safari Spesifik Uyumluluk Optimizasyonları
   Sorun: Web dev-tools mobile emülasyonu OK görünüyor ama gerçek iPhone'da
   görüntü bozuluyor. Sebep: iOS Safari'nin standart davranışlarından farklı
   yönleri var (tap delay, font auto-scale, tap highlight, overscroll).
   Tüm iPhone modelleri (SE 320, 12-mini 375, 12/13/14 390, Plus 414, Pro Max 430)
   için ortak iOS optimizasyonu.
   ========================================================================== */

/* iOS Safari otomatik font scale'i kapat (yatay-dikey çevirince font zıplaması) */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Tap mavi flash kaldır (iOS Safari her tıklamada gri/mavi flash gösterir) */
* {
    -webkit-tap-highlight-color: transparent;
}

/* İnteraktif elementlerde 300ms tap delay'i kaldır */
a, button, input, select, textarea, [onclick], [role="button"], .btn {
    touch-action: manipulation;
}

/* Form input/select/textarea iOS Safari focus zoom önleme — 16px+ font garanti */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: max(16px, 1em);
    }
}

/* iOS overscroll bounce - body için kontrol (sticky elementlerle uyumlu) */
body {
    -webkit-overflow-scrolling: touch;
}

/* Sticky/fixed elementler iOS'ta safe-area-inset saygısı */
@media (max-width: 768px) {
    /* Bottom-nav notch alanı altında kalmasın */
    .mobile-bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
    /* Mini-cart panel iOS'ta tam ekran açıkken safe-area saygılı kalsın */
    .mini-cart {
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* Sticky header notch'tan etkilenmesin */
    .header-sticky,
    .top-bar {
        padding-top: env(safe-area-inset-top);
    }
}

/* iOS Safari "100vh" gerçekten viewport değil, address bar'lı total yükseklik
   sayar. Modern mobil için dvh kullan, fallback vh */
@media (max-width: 768px) {
    .mobile-nav,
    .mini-cart,
    .modal,
    .modal-overlay {
        height: 100vh;
        height: 100dvh;
    }
}

/* iOS Safari image smoothing - yüksek DPR'de keskin kenar */
img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Ürün kartı görseller iOS'ta daha keskin */
.product-card .product-image img,
.hero-product-image img {
    image-rendering: -webkit-optimize-contrast;
}

/* iOS Safari fixed elementlerin transform'la yerleştirildiğinde bulanıklık önleme */
.mobile-bottom-nav,
.support-widget,
.back-to-top {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-perspective: 1000;
}

/* iOS Safari select arrow ikonu kaybolma (appearance reset) — kategori/sıralama */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* iOS Safari'de scroll-behavior: smooth bazı versiyonlarda buggy — fallback */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}