/**
 * Mobile Layout Fixes
 *
 * Mobil tarayıcılarda raporlanan sorunları çözer:
 *  - iOS Safari input zoom (font-size 16px altı)
 *  - 100vh adres çubuğu hatası (100dvh fallback)
 *  - Sticky header scroll offset (anchor link)
 *  - Touch target boyutu (min 44px)
 *  - Yatay scroll önleme
 *  - Modal/drawer scroll lock
 *  - Mobile menu / side-cart responsive genişlik
 *  - Z-index katmanları (bkz: z-index-system.css)
 *
 * tailwind.css ve theme style.css'ten SONRA yüklenmelidir ki override edebilsin.
 */

/* ============================================================
   1. GLOBAL — Yatay scroll'u kategorik olarak engelle
   ============================================================ */
html, body {
    overflow-x: hidden;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Sticky header scroll-padding — breakpoint başına ayrı offset */
html {
    scroll-padding-top: 80px;
}

@media (max-width: 1024px) {
    html { scroll-padding-top: 70px; }
}

@media (max-width: 480px) {
    html { scroll-padding-top: 60px; }
}

/* Tüm sayfalarda görseller responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Long table'lar mobilde scrollable konteyner içine alınsın */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   2. VIEWPORT HEIGHT — iOS Safari adres çubuğu uyumu
   ============================================================ */
.min-h-screen-safe,
.h-screen-safe {
    min-height: 100vh;          /* fallback */
    min-height: 100dvh;         /* modern: dynamic viewport */
}

@supports (height: 100dvh) {
    .min-h-screen,
    .min-h-\[100vh\] {
        min-height: 100dvh;
    }
}

/* ============================================================
   3. FORM ELEMENTS — iOS auto-zoom önleme (font-size ≥ 16px)
   iPad dahil tüm tablet/mobil cihazlarda zoom önlenir
   ============================================================ */
@media (max-width: 1024px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px !important;   /* iOS auto-zoom önleme */
    }
}

@media (max-width: 768px) {

    /* Touch target minimum 44x44px (Apple HIG) */
    button,
    [role="button"],
    .btn,
    a.button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Form satır aralığı */
    .form-input,
    input,
    select,
    textarea {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* ============================================================
   4. STICKY HEADER — content overlap önleme
   ============================================================ */
header[role="banner"],
.site-header {
    /* Header her zaman doğru width'te dursun */
    width: 100%;
    max-width: 100vw;
}

/* Sticky header alt offset — anchor link click'lerinde içerik gizlenmesin */
:target {
    scroll-margin-top: 80px;
}

@media (max-width: 1024px) {
    :target { scroll-margin-top: 70px; }
}

@media (max-width: 480px) {
    :target { scroll-margin-top: 60px; }
}

/* ============================================================
   5. MOBILE MENU — responsive genişlik
   ============================================================ */
#mobile-menu {
    /* Default: 80% viewport, max 400px (büyük tabletlerde tam ekran olmasın) */
    width: min(80vw, 400px) !important;
}

/* Çok küçük cihazlarda (360px ve altı) tam ekrana yakın */
@media (max-width: 360px) {
    #mobile-menu {
        width: calc(100vw - 32px) !important;
    }
}

/* ============================================================
   6. SIDE CART — responsive genişlik (hamburger menü pattern'i)
   ------------------------------------------------------------
   Mobilde tam ekran kaplamasın — solda site bir miktar görünsün.
   #mobile-menu ile aynı oran (~%82) → tutarlı yan-açılır pattern.
   ============================================================ */
#side-cart {
    /* Default mobile/tablet: 82vw, üst sınır 420px */
    width: min(82vw, 420px) !important;
}

@media (max-width: 480px) {
    /* iPhone SE / küçük cihazlar: en az 64px boşluk, max 360px drawer */
    #side-cart {
        width: calc(100vw - 64px) !important;
        max-width: 360px;
    }
}

/* ============================================================
   6b. CHECKOUT DRAWER (Hızlı Sipariş) — responsive genişlik
   ------------------------------------------------------------
   HTML class'ları: w-full sm:max-w-md md:max-w-lg
   Tailwind sm: (≥640px) → max-w-md (448px), md: (≥768px) → max-w-lg (512px).
   Mobilde (≤640px) tam ekran açılıyordu — solda site gözükecek şekilde daralt.
   ============================================================ */
#checkout-drawer {
    /* Default mobile: 82vw, side-cart ile tutarlı; üst sınır 480px */
    width: min(82vw, 480px) !important;
}

@media (max-width: 480px) {
    /* iPhone SE / küçük cihazlar: en az 64px boşluk, max 360px drawer */
    #checkout-drawer {
        width: calc(100vw - 64px) !important;
        max-width: 360px;
    }
}

@media (min-width: 640px) {
    /* Tailwind sm: max-w-md eşdeğeri — küçük tablet/landscape phone */
    #checkout-drawer {
        width: 28rem !important;  /* 448px */
    }
}

@media (min-width: 768px) {
    /* Tailwind md: max-w-lg eşdeğeri — tablet ve üstü */
    #checkout-drawer {
        width: 32rem !important;  /* 512px */
    }
}

/* ============================================================
   7. SCROLL LOCK — modal/drawer açıkken body scroll'u kilitle
   ============================================================ */
html[data-scroll-lock],
body[data-scroll-lock] {
    overflow: hidden !important;
    touch-action: none;
    /* iOS Safari rubber-band scroll önleme */
    position: fixed;
    width: 100%;
    /* Scrollbar kaybolduğunda layout shift önleme */
    padding-right: var(--scrollbar-width, 0);
}

/* ============================================================
   8. PRODUCT GRID — Mobile-first breakpoint tutarlılığı
   ============================================================ */
@media (max-width: 480px) {
    /* Çok küçük cihazlarda 2 sütun grid'leri biraz daralt */
    .grid.grid-cols-2,
    .grid.sm\:grid-cols-2 {
        gap: 8px;
    }

    /* Ürün kartı içerik padding'i ufalsın */
    .product-card,
    [data-product-card] {
        padding: 8px;
    }
}

/* ============================================================
   9. MODAL OVERLAY — backdrop blur (modern destek)
   ============================================================ */
#cart-overlay,
#mobile-menu-overlay,
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ============================================================
   10. SAFE AREA — iPhone notch / home indicator
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    header[role="banner"],
    .site-header {
        padding-top: env(safe-area-inset-top);
    }
    .fixed-bottom,
    [data-fixed-bottom] {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* ============================================================
   11. TYPOGRAPHY — Mobil okunabilirlik
   ============================================================ */
@media (max-width: 480px) {
    h1 { font-size: 1.5rem; line-height: 1.3; }
    h2 { font-size: 1.25rem; line-height: 1.35; }
    h3 { font-size: 1.125rem; line-height: 1.4; }

    /* Uzun başlıkları kırp */
    .truncate-mobile {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .clamp-2-mobile {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ============================================================
   12. CHECKOUT / FORM — 2-column → 1-column mobilde
   ============================================================ */
@media (max-width: 768px) {
    .grid.lg\:grid-cols-2,
    .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    .checkout-summary-sticky {
        position: relative !important;
        top: auto !important;
    }
}

/* ============================================================
   13. ACCESSIBILITY — Klavye focus-visible ring
   WCAG 2.1 AA — klavye kullanıcısı için görünür odak halkası
   ============================================================ */
*:focus-visible {
    outline: 2px solid #1f2937;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Buton/link özelinde daha yumuşak ring */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

/* ============================================================
   14. IMAGE SKELETON — Yüklenmeden önce shimmer
   <img> üzerine `.img-skeleton` class'ı eklenir; onload event'i kaldırır
   ============================================================ */
.img-skeleton {
    background: linear-gradient(
        90deg,
        #f3f4f6 0%,
        #e5e7eb 50%,
        #f3f4f6 100%
    );
    background-size: 200% 100%;
    animation: img-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes img-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   15. CART BADGE PULSE — sepete eklendiğinde animasyon
   ============================================================ */
@keyframes cart-pulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.cart-badge-pulse {
    animation: cart-pulse 0.45s ease-in-out;
}

/* ============================================================
   16. HEARTBEAT — Wishlist toggle
   ============================================================ */
@keyframes heartbeat {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.3); }
    70%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.heart-beat {
    animation: heartbeat 0.4s ease-in-out;
}

/* ============================================================
   PERFORMANCE: CLS önleme — img dimensions
   width+height attribute'u olmayan img için aspect-ratio fallback
   (Tailwind class verilmediği durumlarda layout shift'i engeller)
   ============================================================ */
img {
    /* Cumulative Layout Shift önleme: tarayıcı dimension'ı bilmezse aspect-ratio kullansın */
    height: auto;
    max-width: 100%;
}

/* Ürün galerisi grid resimleri — CLS olmaması için min aspect-ratio garanti */
.product-grid img,
.product-card img,
[data-product-image] {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background-color: #f3f4f6; /* yüklenirken plain background */
}

/* Sepet / sipariş listesi thumbnails */
.cart-item-image,
.order-item-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Hero slider — sabit aspect-ratio görsel kayması yok */
.hero-slide img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ============================================================
   17. TABLE → CARD (mobilde tablo kartlaşma)
   ============================================================ */
@media (max-width: 640px) {
    .table-stack-mobile thead {
        display: none;
    }
    .table-stack-mobile tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 12px;
    }
    .table-stack-mobile td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border: none;
    }
    .table-stack-mobile td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
    }
}

/* ============================================================
   9. MOBILE COMPACTION — Tüm tema için kompakt görünüm (≤768px)
   ============================================================
   Tailwind class'larını override eder. Tailwind utility specificity 0,0,1,0 —
   bu media query'deki kurallar AYNI specificity'de ama daha sonra yükleniyor
   (mobile-fixes.css tailwind.css'ten sonra). Override kazanır.

   AMAÇ: "koca koca" görünen başlık/buton/padding'leri daralt. Touch target
   ≥40px korunur (Apple ≥44px önerir; 40-44 arası kabul edilebilir).

   Etkilenen sayfalar: ÜRÜN, KATEGORI, SEPET, ÖDEME, HESABIM — tüm tema.
   ============================================================ */
@media (max-width: 768px) {
    /* ---------- Başlık tipografisi ---------- */
    h1.text-3xl, h1.text-4xl,
    .text-3xl.font-bold, .text-4xl.font-bold {
        font-size: 1.5rem;        /* 24px (eskiden 30-36px) */
        line-height: 1.25;
    }
    h2.text-2xl, h2.text-3xl {
        font-size: 1.25rem;       /* 20px */
        line-height: 1.3;
    }
    h3.text-xl, h3.text-2xl {
        font-size: 1.125rem;      /* 18px */
    }

    /* ---------- CTA butonları (Sepete Ekle / Hemen Al / Giriş Yap) ---------- */
    /* Hedef: py-4 (16px) → 10px, px-8 (32px) → 16px, text-lg → text-base */
    button.py-4, a.py-4,
    button[onclick*="addToCart"],
    button[onclick*="buyNow"] {
        padding-top: 0.625rem;    /* 10px */
        padding-bottom: 0.625rem;
        min-height: 44px;         /* touch target */
    }
    .py-4.text-lg, .py-4 .text-lg,
    button.text-lg {
        font-size: 1rem;          /* 16px (eskiden 18px) */
    }
    .px-8 {
        padding-left: 1rem;       /* 16px (eskiden 32px) */
        padding-right: 1rem;
    }

    /* ---------- Bölüm padding (fiyat blok, info kart, vb.) ---------- */
    .p-6 {
        padding: 1rem;            /* 16px (eskiden 24px) */
    }
    .p-5 {
        padding: 0.875rem;        /* 14px (eskiden 20px) */
    }
    /* Bundle, gift, küçük bloklar */
    .p-4 {
        padding: 0.75rem;         /* 12px (eskiden 16px) */
    }

    /* ---------- Dikey gap'lar (section spacing) ---------- */
    .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1rem;         /* 16px (eskiden 24px) */
    }
    .space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.75rem;      /* 12px (eskiden 16px) */
    }
    .gap-3 { gap: 0.5rem; }       /* 8px (eskiden 12px) */
    .gap-4 { gap: 0.625rem; }     /* 10px (eskiden 16px) */

    /* ---------- Margin'ler ---------- */
    .mb-6 { margin-bottom: 1rem; }
    .mt-6 { margin-top: 1rem; }
    .mb-4 { margin-bottom: 0.75rem; }
    .mt-4 { margin-top: 0.75rem; }

    /* ---------- Varyasyon pill'leri (beden, renk butonları) ---------- */
    /* Genel pill pattern: px-3/4 py-1.5/2 border rounded */
    .px-4.py-2 {
        padding: 0.375rem 0.75rem;  /* 6px 12px (eskiden 8px 16px) */
        min-height: 40px;            /* touch-safe */
    }
    .px-3.py-2 {
        padding: 0.375rem 0.625rem;  /* 6px 10px */
        min-height: 40px;
    }
    /* Beden grid butonları (p-2) — touch-safe kalsın */
    .p-2.border.rounded {
        padding: 0.5rem;
        min-height: 40px;
        min-width: 40px;
    }

    /* ---------- Radio quantity labels (Adet seçimi) ---------- */
    label.p-4.border, label.p-4.rounded {
        padding: 0.625rem;          /* 10px */
    }

    /* ---------- Form input'ların yüksekliği ---------- */
    /* Zoom önleme için font-size 16px zaten var (yukarıda kural 3) */
    /* Burada sadece padding daralt */
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="search"], input[type="password"] {
        padding-top: 0.5rem;        /* 8px */
        padding-bottom: 0.5rem;
    }

    /* ---------- Container py (sayfa üst-alt padding) ---------- */
    main > .container.py-12,
    main > section.py-12,
    .py-12 { padding-top: 1.5rem; padding-bottom: 1.5rem; }   /* 24px (eskiden 48px) */
    .py-16 { padding-top: 2rem;   padding-bottom: 2rem; }     /* 32px (eskiden 64px) */
    .py-8  { padding-top: 1rem;   padding-bottom: 1rem; }     /* 16px (eskiden 32px) */

    /* ---------- Thumbnail strip (galeri) ---------- */
    /* Thumbnails zaten w-20 h-20 mobile'da iyi; sadece gap daralt */
    .gap-3.flex-wrap { gap: 0.5rem; }

    /* ---------- Modal padding ---------- */
    /* Beden tablosu modal, size guide */
    .max-w-3xl .px-5,
    .max-w-2xl .px-5 {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
    .max-w-3xl .py-3 {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    /* ---------- Breadcrumb / küçük metinler ---------- */
    nav.text-sm.mb-6 { margin-bottom: 0.75rem; }

    /* ---------- Rozet'ler (text-xs zaten ufak, dokunulmuyor) ---------- */
    /* Bundle, indirim badge'leri olduğu gibi kalır */
}

/* Ekstra dar viewport (≤480px — iPhone SE) için biraz daha kompakt */
@media (max-width: 480px) {
    h1.text-3xl, h1.text-4xl {
        font-size: 1.375rem;      /* 22px */
    }
    .px-8 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    /* CTA butonları arası boşluk */
    .space-y-3 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.5rem;
    }
}