/* ═══════════════════════════════════════════════════════════════
   KAFFE TEDARİK — Mobile-First Responsive CSS
   App-like mobile experience with bottom navigation bar
   ═══════════════════════════════════════════════════════════════ */

/* ─── GLOBAL MOBILE RESET ─── */
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; height: auto; }
input, button, select, textarea { max-width: 100%; }

/* ─── MOBILE BOTTOM NAV BAR ─── */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    background: #fff;
    border-top: 1px solid #e8e4df;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-bottom: constant(safe-area-inset-bottom, 0px);
}

.mobile-bottom-nav {
    display: none;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
}

.mob-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px 6px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.mob-nav-item i {
    font-size: 22px;
    line-height: 1;
}

.mob-nav-item span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.mob-nav-item.active {
    color: #1b3a2d;
}

.mob-nav-item.active i {
    transform: scale(1.1);
}

.mob-nav-search {
    color: #94a3b8;
}

.mob-cart-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 18px);
    background: #c4553a;
    color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
}

/* ─── MOBILE SEARCH OVERLAY ─── */
.mobile-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: flex-start;
    justify-content: center;
    padding: 20px 16px;
    padding-top: env(safe-area-inset-top, 20px);
}

.mobile-search-overlay.active {
    display: flex;
}

.mobile-search-box {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: slideDown 0.25s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── ENHANCED MOBILE SLIDE MENU ─── */
.mobile-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 8px;
    background: #f8fafc;
    border-radius: 10px;
}
.mobile-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1b3a2d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.mobile-user-name { font-weight: 700; font-size: 14px; color: #1e293b; }
.mobile-user-email { font-size: 11px; color: #64748b; margin-top: 2px; }

.mobile-menu-divider {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    padding: 14px 0 6px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — TABLET (max 1024px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .container { padding: 0 16px; }

    .features-bar { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .product-detail-grid { gap: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — MOBILE (max 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Bottom Nav: Show on mobile ── */
    .mobile-bottom-nav {
        display: grid;
    }

    /* ── Extra bottom padding for all pages (for bottom nav) ── */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* ── TOP BAR: hide on mobile ── */
    .top-bar { display: none; }

    /* ── SHIPPING BAR: compact ── */
    .shipping-bar {
        font-size: 11px;
        padding: 6px 12px;
    }

    /* ── HEADER: compact mobile ── */
    .site-header { padding: 10px 0; }

    .site-header .container {
        gap: 10px;
    }

    .logo-icon { width: 36px; height: 36px; font-size: 18px; }
    .logo-text { font-size: 16px; }

    /* ── Search: move to fullwidth below logo on mobile ── */
    .header-search {
        flex: 1;
        max-width: none;
        margin: 0 8px;
    }
    .header-search input { padding: 8px 14px; font-size: 14px; }
    .header-search button { padding: 8px 12px; }

    /* ── Header actions: only cart visible, rest in bottom nav ── */
    .header-actions .header-action-btn:not([href*="sepet"]):not(.mobile-menu-btn) {
        display: none;
    }
    .header-login-btn, .header-register-btn { display: none !important; }

    .mobile-menu-btn { display: flex; }

    /* ── MAIN NAV: hide desktop nav ── */
    .main-nav { display: none; }

    /* ── HERO SLIDER: smaller on mobile ── */
    .hero-slide {
        min-height: 260px;
    }
    .hero-slide-content {
        padding: 40px 20px;
    }
    .hero-slide-content h1 {
        font-size: 24px;
        max-width: 100%;
    }
    .hero-slide-content p {
        font-size: 13px;
        max-width: 100%;
    }
    .hero-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
    .hero-btn-outline { margin-left: 8px; }
    .hero-nav { width: 36px; height: 36px; font-size: 16px; }

    /* ── SECTIONS ── */
    .section { padding: 32px 0; }
    .section-title { font-size: 22px; }

    /* ── CATEGORY CARDS ── */
    .category-showcase {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .category-card-lg .cat-name { font-size: 16px; }
    .category-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .category-card { padding: 14px 8px; }
    .category-card-icon { width: 42px; height: 42px; font-size: 18px; }
    .category-card h4 { font-size: 11px; }

    /* ── PRODUCT GRID: 2 columns on mobile ── */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .product-carousel .product-card { min-width: 180px; }

    .product-card-img { height: 180px; }
    .product-card-body { padding: 10px; }
    .product-card-name { font-size: 12px; }
    .product-card-price .current { font-size: 14px !important; }

    /* Product card mobile: show add to cart button always (not hover) */
    .product-card-overlay {
        opacity: 1;
        transform: translateY(0);
    }
    .product-card-actions {
        opacity: 1;
        transform: translateX(0);
    }

    /* ── FEATURES BAR ── */
    .features-bar {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 24px 0;
    }
    .feature-item { padding: 14px; gap: 10px; }
    .feature-icon { width: 38px; height: 38px; font-size: 16px; }
    .feature-item h5 { font-size: 12px; }
    .feature-item p { font-size: 10px; }

    /* ── PROMO BANNER ── */
    .promo-banner { min-height: 180px; }
    .promo-banner-content { padding: 24px 20px; }
    .promo-banner-content h2 { font-size: 22px; }
    .promo-banner-content p { font-size: 13px; }

    /* ── CATEGORY PAGE ── */
    .category-layout {
        grid-template-columns: 1fr;
        padding: 12px 0 40px;
    }
    .filter-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        z-index: 10000;
        overflow-y: auto;
        transition: left 0.3s ease;
        padding: 20px;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    }
    .filter-sidebar.mobile-open { left: 0; }

    .mobile-filter-toggle {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: #1b3a2d;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 14px;
    }

    .sort-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .sort-bar select { font-size: 12px; }

    /* ── PRODUCT DETAIL ── */
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .product-gallery { position: static; }
    .product-info h1 { font-size: 20px; }
    .product-price-area .price { font-size: 26px; }
    .product-price-area .old-price { font-size: 15px; }
    .gallery-thumb { width: 56px; height: 56px; }

    /* ── CART ── */
    .cart-layout { grid-template-columns: 1fr; gap: 16px; }
    .cart-item {
        flex-wrap: wrap;
        gap: 10px;
    }
    .cart-item-img { width: 64px; height: 64px; }
    .cart-item-price { min-width: auto; }
    .cart-item-remove { padding: 6px; }

    /* ── CHECKOUT ── */
    .checkout-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .checkout-section h3 { font-size: 15px; }
    .form-grid { grid-template-columns: 1fr; }
    .checkout-btn { font-size: 15px; }

    /* ─── CART SUMMARY: make sticky on mobile bottom ─── */
    .cart-summary {
        position: static !important;
        order: -1; /* Summary FIRST on mobile, then form */
    }

    /* ── ACCOUNT PAGES ── */
    .account-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .account-sidebar { display: none; }

    /* ── FOOTER ── */
    .site-footer { margin-top: 32px; padding: 40px 0 0; }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .footer-bottom { text-align: center; }
    .footer-bottom p { font-size: 11px; line-height: 1.8; }

    /* ── TOAST ── */
    .toast {
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        left: 16px;
        text-align: center;
        justify-content: center;
        font-size: 13px;
        padding: 12px 16px;
    }

    /* ── WHATSAPP BUTTON ── */
    .whatsapp-float {
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        left: 16px;
        padding: 12px;
        border-radius: 50%;
    }
    .whatsapp-float .whatsapp-text { display: none; }
    .whatsapp-float i { font-size: 24px; }

    /* ── COOKIE CONSENT ── */
    #cookieConsent {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ── MOBILE MENU: enhanced ── */
    .mobile-menu {
        width: 82%;
        max-width: 320px;
    }
    .mobile-menu-body a {
        font-size: 14px;
        padding: 13px 14px;
    }
    .mobile-menu-body a.active {
        color: #1b3a2d;
        background: rgba(27,58,45,0.06);
        font-weight: 700;
    }

    /* ── BREADCRUMB ── */
    .breadcrumb { font-size: 11px; padding: 10px 0; gap: 5px; overflow: hidden; white-space: nowrap; }

    /* ── TABS ── */
    .tab-header { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .tab-btn { padding: 10px 16px; font-size: 13px; }

    /* ── PRODUCT TABS ── */
    .product-tabs { margin-top: 24px; }

    /* ── FLASH MESSAGES ── */
    .alert { font-size: 13px; padding: 10px 14px; }

    /* ── ADD TO CART ROW ── */
    .add-to-cart-row { gap: 8px; }
    .btn-add-cart { padding: 12px 20px; font-size: 14px; }
    .btn-wishlist { width: 44px; height: 44px; }

    /* ── QUANTITY SELECTOR ── */
    .quantity-selector button { width: 36px; height: 36px; }
    .quantity-selector input { width: 44px; font-size: 14px; }

    /* ── HIDE burger on mobile (we have bottom nav) ── */
    .mobile-menu-btn { display: flex !important; }

    /* ── HERO: hide nav arrows on mobile, use swipe ── */
    .hero-nav { display: none; }
    .hero-dot { width: 8px; height: 8px; }
    .hero-dot.active { width: 22px; }

    /* ── PAYMENT OPTIONS ── */
    .payment-option { padding: 12px; }
    .payment-option-content gap { gap: 10px; }
    .payment-option-content i { font-size: 22px; }
    .payment-option-content strong { font-size: 13px; }

    /* ── VARIANT BUTTONS ── */
    .variant-btn { padding: 8px 14px; font-size: 12px; }

    /* ── PAGE SECTIONS (contact, about, etc.) ── */
    .page-hero { min-height: 180px; }
    .contact-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   SMALL MOBILE (max 480px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .container { padding: 0 12px; }

    .logo-text { font-size: 14px; }
    .logo-icon { width: 32px; height: 32px; font-size: 16px; }

    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-card-img { height: 160px; }
    .product-card-body { padding: 8px; }
    .product-card-name { font-size: 11px; }
    .product-card-price .current { font-size: 13px !important; }

    .category-showcase { grid-template-columns: 1fr 1fr; gap: 8px; }
    .category-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .category-card { padding: 10px 6px; }
    .category-card-icon { width: 36px; height: 36px; font-size: 16px; }

    .hero-slide { min-height: 220px; }
    .hero-slide-content h1 { font-size: 20px; }
    .hero-slide-content p { font-size: 12px; margin-bottom: 16px; }
    .hero-btn { padding: 9px 16px; font-size: 12px; }

    .features-bar { grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 0; }
    .feature-item { padding: 10px; gap: 8px; }
    .feature-icon { width: 32px; height: 32px; font-size: 14px; }

    .section-title { font-size: 20px; }

    .product-info h1 { font-size: 18px; }
    .product-price-area { padding: 12px; }
    .product-price-area .price { font-size: 22px; }

    .mobile-bottom-nav { height: 60px; }
    .mob-nav-item i { font-size: 20px; }
    .mob-nav-item span { font-size: 9px; }

    body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

    .toast { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    .whatsapp-float { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══════════════════════════════════════════════════════════
   FILTER SIDEBAR OVERLAY on Mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .filter-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9999;
    }
    .filter-sidebar-overlay.active { display: block; }

    /* Mobile filter toggle button - shown on category pages */
    .mobile-filter-toggle { display: none; }
}

@media (min-width: 769px) {
    .mobile-bottom-nav { display: none !important; }
    .mobile-filter-toggle { display: none !important; }
    .mobile-search-overlay { display: none !important; }
    .filter-sidebar-overlay { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE MENU: improved slide-in (base styles)
   ═══════════════════════════════════════════════════════════ */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    z-index: 10002;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { left: 0; }
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10001;
    backdrop-filter: blur(2px);
}
.mobile-overlay.open { display: block; }

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 16px;
    border-bottom: 1px solid #e8e4df;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
.mobile-menu-header button {
    width: 36px; height: 36px;
    border: none; background: #f1f5f9;
    border-radius: 50%; cursor: pointer;
    font-size: 20px; color: #475569;
    display: flex; align-items: center; justify-content: center;
}
.mobile-menu-body {
    padding: 12px 16px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
.mobile-menu-body a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    margin-bottom: 2px;
    transition: all 0.15s ease;
    text-decoration: none;
}
.mobile-menu-body a:hover,
.mobile-menu-body a.active {
    background: rgba(27,58,45,0.07);
    color: #1b3a2d;
}
.mobile-menu-body a i {
    font-size: 18px;
    color: #64748b;
    width: 24px;
    flex-shrink: 0;
}
.mobile-menu-body a.active i,
.mobile-menu-body a:hover i { color: #1b3a2d; }

/* ═══════════════════════════════════════════════════════════
   TOUCH IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Better tap targets */
    a, button { -webkit-tap-highlight-color: transparent; }

    /* Smoother scrolling */
    html { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

    /* Prevent zoom on input focus (iOS) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Fix form elements */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 8px;
    }

    /* Better select on iOS */
    select { background-image: none; }

    /* Prevent horizontal scroll from absolute elements */
    .mega-menu { display: none !important; }

    /* Product carousel swipe-friendly */
    .product-carousel {
        padding: 4px 0 8px;
        gap: 10px;
        scroll-snap-type: x mandatory;
    }
    .product-carousel .product-card {
        scroll-snap-align: start;
        min-width: 160px;
    }

    /* Gallery: horizontal swipe on mobile */
    .gallery-thumbs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════
   ACCOUNT PAGE MOBILE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .account-layout {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    /* Show compact account nav as horizontal tabs */
    .account-sidebar {
        display: block !important;
        margin-bottom: 16px;
    }
    .account-nav {
        display: flex !important;
        overflow-x: auto;
        gap: 6px;
        padding: 0 0 8px;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .account-nav a {
        flex-shrink: 0;
        padding: 8px 14px !important;
        border-radius: 100px !important;
        font-size: 12px !important;
        border: 1px solid #e2e8f0 !important;
        background: #fff;
    }
    .account-nav a.active,
    .account-nav a:has(i.active) {
        background: #1b3a2d !important;
        color: #fff !important;
        border-color: #1b3a2d !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT DETAIL: sticky add-to-cart on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mobile-sticky-buy {
        position: fixed;
        bottom: 64px;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e8e4df;
        padding: 10px 16px;
        z-index: 9000;
        display: flex;
        gap: 10px;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    }
    .mobile-sticky-buy .btn-add-cart {
        flex: 1;
        height: 48px;
        font-size: 14px;
    }
    .mobile-sticky-buy .btn-wishlist {
        height: 48px;
        width: 48px;
    }
}

/* ═══════════════════════════════════════════════════════════
   CART / CHECKOUT page adjustments
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cart-layout {
        display: flex !important;
        flex-direction: column-reverse; /* Summary first */
        gap: 16px;
    }

    .checkout-layout {
        display: flex !important;
        flex-direction: column-reverse;
        gap: 16px;
    }

    .checkout-btn { height: 52px; font-size: 15px; }
    .checkout-section { margin-bottom: 16px; }
    .checkout-section h3 { font-size: 14px; }

    .cart-item {
        display: grid !important;
        grid-template-columns: 72px 1fr;
        gap: 12px;
    }
    .cart-item-img {
        width: 72px !important;
        height: 72px !important;
        border-radius: 8px;
    }
    .cart-item-remove {
        position: absolute;
        top: 0;
        right: 0;
    }
}

/* ═══════════════════════════════════════════════════════════
   OVERALL PAGE CLEANUP — prevent overflow
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .container { overflow: visible; }
    section, .section { overflow: visible; }

    /* Tables: horizontal scroll */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Grid: no overflow */
    [style*="grid-template-columns"] {
        word-break: break-word;
    }

    /* Card bodies */
    .card-body { overflow: visible; }

    /* Auth pages */
    .auth-card { margin: 12px; }

    /* Admin panel: hide from frontend, no styling needed */
}

/* ═══════════════════════════════════════════════════════════
   SAFE AREA — iPhone notch / Dynamic Island
   ═══════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(64px + env(safe-area-inset-bottom));
    }
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}