/* ═══════════════════════════════════════════════════════════════════════════
   📌 LEPISTESEVI - RESPONSIVE.CSS
   ═══════════════════════════════════════════════════════════════════════════
   
   Bu dosya tüm responsive (medya sorgusu) stillerini içerir:
   - Mobil görünüm (max-width: 768px)
   - Tablet görünüm (max-width: 1024px)
   - Küçük ekran düzenlemeleri
   
   🔄 Modüler yapıya geçiş: Ocak 2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   📱 MOBİL GÖRÜNÜM (768px ve altı)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Layout */
    .layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        display: none;
    }

    .sidebar.open {
        display: block;
    }

    .menu-toggle {
        display: block;
    }

    /* Topbar */
    .topbar {
        padding: 8px 16px;
    }

    .topbar .brand img {
        width: 60px !important;
        /* Mobilde biraz daha geniş */
        height: 40px !important;
        object-fit: fill;
    }

    .topbar .brand {
        font-size: 1.25rem !important;
        gap: 10px !important;
    }

    .nav-links {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .nav-btn {
        font-size: 0.9rem !important;
        padding: 6px 10px;
    }

    #userButton:not(.hidden) {
        white-space: nowrap !important;
        /* overflow: hidden !important;  <-- Rozetleri gizlememek için kaldırdık */
        /* text-overflow: ellipsis !important; <-- Rozetleri gizlememek için kaldırdık */
        /* max-width: 130px !important; <-- Kaldırıldı, content'e göre uzasın ama font küçük olsun */
        display: inline-flex !important;
        /* Flex ile içerik hizalansın */
        align-items: center !important;
        font-size: 0.75rem !important;
        /* Font küçültüldü */
        padding: 4px 8px !important;
        /* Padding sıkılaştırıldı */
    }

    #userButton.hidden {
        display: none !important;
    }

    /* Giriş Yap ve Kullanıcı Butonları - Mobil */
    .login-btn,
    .user-btn {
        white-space: nowrap !important;
        font-size: 0.78rem !important;
        padding: 6px 12px !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
    }

    /* Hidden butonlar mobilde de gizlenmeli */
    .user-btn.hidden,
    .login-btn.hidden {
        display: none !important;
    }

    /* Sepet Paneli */
    .cart-panel {
        position: fixed !important;
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 85vw !important;
        max-width: 85vw !important;
        height: auto !important;
        max-height: 70vh !important;
        border-radius: 16px 16px 0 0 !important;
        background: var(--card) !important;
        padding: 14px 12px !important;
        font-size: 0.9rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Sepet Paneli - Mobil */
    .cart-item {
        grid-template-columns: 1fr 60px !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .cart-item-info {
        gap: 2px !important;
    }

    .cart-item-info .cart-item-title {
        font-size: 0.82rem !important;
    }

    .cart-item-code-badge {
        font-size: 0.7rem !important;
    }

    .cart-item-color {
        font-size: 0.72rem !important;
    }

    .cart-item-discount {
        font-size: 0.7rem !important;
    }

    /* Sağ taraf - Mobil */
    .cart-item-right {
        gap: 4px !important;
        min-width: 55px !important;
    }

    .cart-item-right img,
    .cart-item-right .cart-item-thumb {
        width: 45px !important;
        height: 45px !important;
    }

    .cart-item-price {
        font-size: 0.78rem !important;
    }

    .cart-item-delete {
        width: 24px !important;
        height: 24px !important;
    }

    .cart-item-delete svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Toplam Bölümü - Mobil */
    .cart-summary-card {
        padding: 10px !important;
    }

    .cart-summary-label,
    .cart-summary-value {
        font-size: 0.8rem !important;
    }

    .cart-summary-label .icon {
        font-size: 0.75rem !important;
    }

    /* Kategori */
    .category-scroll {
        justify-content: flex-start !important;
    }

    .category-track {
        justify-content: flex-start !important;
        padding-left: 16px;
    }

    /* Ürün Grid - Mobil (2'li) */
    .product-grid,
    .product-list {
        /* Flex zaten tanımlı, sadece genişlik ayarı yeterli */
    }

    /* Layout Override */
    .main-content,
    main {
        padding-bottom: 75px !important;
        /* Mobil alt boşluk (Tekrar yarıya düşürüldü: 75px) */
    }

    .card {
        /* User request: 2x width => 100% now */
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        margin-bottom: 20px;
        /* Kartlar arası dikey boşluk */
    }

    .card .thumb-wrapper {
        height: 160px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 KÜÇÜK EKRANLAR (480px ve altı)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    #productTitle {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
    }

    #productPrice {
        font-size: 1.2rem !important;
    }

    /* Profil modal butonları */
    #profileModal .button-row .btn {
        flex: 1 1 calc(50% - 10px);
    }

    #profileModal .button-row .btn:last-child {
        flex-basis: 100%;
    }

    /* Thumbnail boyutu */
    .thumbnail {
        width: 60px !important;
        height: 60px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🖥️ MASAÜSTÜ (901px ve üstü)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
    .checkout-cart-list {
        max-height: 340px;
        overflow-y: auto;
        padding-right: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 TABLET (900px ve altı)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .checkout-cart-list {
        max-height: none;
        overflow: visible;
    }
}

/* Tablet için 4 kolon */
@media (max-width: 1200px) and (min-width: 769px) {

    .card {
        flex: 0 0 calc(25% - 15px) !important;
        max-width: calc(25% - 15px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🖼️ BANNER RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .slide img {
        height: 25vh;
        object-fit: cover;
    }
}

@media (max-width: 480px) {
    .slide img {
        height: 20vh;
    }
}