/* =========================================================
   LOOT SİSTEMİ: MOBİL ALIŞVERİŞ UYGULAMASI TASARIMI (Canlı)
   ========================================================= */

/* 1. Tema Değişkenleri (Fix) */
:root {
    /* Brand Colors (IF Sokak) */
    --brand-primary: #e74c3c; /* Red */
    --brand-secondary: #3498db; /* Blue */
    
    /* Light Theme (Def) */
    --bg-main: #f4f4f9;
    --bg-app-frame: #f4f4f9; /* Masaüstünde arka plan */
    --bg-card: #ffffff;
    --text-main: #2c3e50;
    --text-sub: #7f8c8d;
    --border-color: #e1e1e1;
    --wallet-gradient: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(231, 76, 60, 0.02));
}

[data-theme="dark"] {
    /* Dark Theme */
    --bg-main: #121212;
    --bg-app-frame: #121212;
    --bg-card: #1e1e1e;
    --text-main: #ecf0f1;
    --text-sub: #bdc3c7;
    --border-color: #333333;
    --wallet-gradient: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(231, 76, 60, 0.05));
}

/* 2. Global Reset & Masaüstünde Mobil Çerçeve (Tasarımın arkasındaki kutucuk) */
body {
    background-color: var(--bg-app-frame) !important;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; /* Ekranın geneli ASLA kaymasın, sadece kutu kaysın */
}

#mainContainer {
    box-sizing: border-box; /* İçerik taşmasını engeller */
    width: 100%;
    max-width: 450px; 
    height: 95vh; 
    background-color: var(--bg-main);
    border: 2px solid var(--border-color);
    border-radius: 30px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); 
    overflow-x: hidden; /* Yatay scrollbar'ı kesin öldürür */
    overflow-y: auto; /* Sadece dikey kaydırma (kutu içi) aktif */
    padding: 20px 20px 90px 20px; /* Alt tampon */
    display: flex;
    flex-direction: column;
    position: relative;
    -webkit-overflow-scrolling: touch; 
}

/* Mobilde çerçeveyi kaldır (Tam ekran yap) */
@media (max-width: 500px) {
    #mainContainer {
        height: 100vh;
        max-width: 100%;
        border-radius: 0;
        border: none;
        padding-bottom: calc(80px + env(safe-area-inset-bottom)); /* Mobilde güvenli alan garantisi */
    }
}

/* ÖZEL KAYDIRMA ÇUBUĞU (SCROLLBAR) ZIRHI */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: 10px;
    opacity: 0.8;
}
::-webkit-scrollbar-thumb:hover {
    background: #c0392b;
}

/* 3. Özel Bileşenler (Kırmızıya çevrildi) */

/* theme-switch class'ı artık butonun satır içine taşındı */

.brand-sub { font-weight: 800; } /* Kırmızı HTML'de inline yapıldı */

/* --- İNPUT (METİN KUTUSU) KARANLIK MOD ZIRHI --- */
.md-input, .fb-input, input[type="text"], input[type="tel"], input[type="email"], textarea {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}
.md-input::placeholder, .fb-input::placeholder {
    color: var(--text-sub) !important;
}
.md-input:focus, .fb-input:focus {
    border-color: var(--brand-primary) !important;
    outline: none !important;
}

.wallet-badge {
    background: var(--wallet-gradient);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 20px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    animation: fadeInDown 0.4s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.wallet-icon { font-size: 24px; color: var(--brand-primary); }
.wallet-amount { font-size: 1.4rem; color: var(--brand-primary); }

.loot-banner-container {
    height: 120px; /* Biraz daha kompakt */
    border-radius: 12px;
}

.loot-cat-btn.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.loot-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* Daha küçük kartlar */
    gap: 10px;
}

.loot-card {
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.loot-img-box { height: 110px; }
.loot-info-box { padding: 8px; }
.loot-title { font-size: 0.8rem; margin-bottom: 2px; height: 32px; /* 2 satır */ overflow:hidden; }
.loot-cat-text { font-size: 0.65rem; margin-bottom: 5px; }
.loot-price { font-size: 1.1rem; color: var(--brand-primary); }

.loot-buy-btn {
    background: rgba(231, 76, 60, 0.1);
    color: var(--brand-primary);
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}

.loot-buy-btn:hover { background: var(--brand-primary); color: white; }

/* Bekleniyor / İptal rozet renkleri main.css'den alınmalı veya buraya eklenmeli */

/* Klasik Utility */
.hidden { display: none !important; }
.screen { display: none; }
.screen.active-screen { display: block; animation: fadeIn 0.3s; }

/* Modallar için tam ekran zırhı */
.overlay {
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100vw !important; 
    height: 100vh !important; 
    border-radius: 0 !important; 
    z-index: 100000 !important;
}

/* GİZLİ OLMAYAN modalları merkeze hizala */
.overlay:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ALT NAVİGASYON BARI (GÜVENLİ ALAN DESTEKLİ, EKRANA ÇİVİLİ) */
.loot-bottom-nav {
    position: fixed; 
    bottom: 2.5vh; /* Masaüstünde 95vh olan container'ın tam dibine milimetrik oturur */
    left: 50%;
    transform: translateX(-50%); 
    width: 100%;
    max-width: 450px; 
    box-sizing: border-box;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    padding: 10px 5px;
    z-index: 10000;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    box-shadow: 0 -4px 25px rgba(0,0,0,0.15);
}

@media (max-width: 500px) {
    .loot-bottom-nav { 
        bottom: 0; /* Mobilde tam ekrana oturduğu için 0'a yapışır */
        border-radius: 0; 
        max-width: 100%; 
        padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* Sanal tuş koruması */
    }
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-sub);
    text-decoration: none;
    font-size: 0.6rem;
    font-weight: 800;
    transition: 0.2s;
    cursor: pointer;
}

.nav-item i { font-size: 1.2rem; }
.nav-item.active { color: var(--brand-primary); }

.loot-tab.hidden { display: none; }

/* --- YENİ E-TİCARET GÖRÜNÜM STANDARTLARI --- */

/* Sadece Pop-up'a Özel Daha Şeffaf Blur */
#loot-popup-modal.overlay {
    background: rgba(0, 0, 0, 0.15) !important; /* Çok daha şeffaf siyaha çalan renk */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loot-popup-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover !important; 
    display: block;
    background-color: transparent !important;
    filter: none !important; /* Tüm sızan siluetleri yok eder */
    box-shadow: none !important;
}

#loot-popup-img {
    /* Görselin kusursuz 1:1 oranında kırpılıp oturmasını sağlar */
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover !important; 
    display: block;
    background-color: transparent !important;
}

/* Banner 21:9 Oranı */
.loot-banner-container {
    width: 100%;
    aspect-ratio: 21 / 9;
    height: auto; /* Eski sabit yüksekliği ezer */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.loot-banner-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ürün Grid: Her satırda tam 2 ürün */
.loot-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
}

/* Ürün Kartı (Doğal Yükseklik, Kart İçinde Kart Zırhı) */
.loot-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    cursor: pointer;
}

/* Kart İçindeki Resim Kutusu (Ultra Kompakt Görsel) */
.loot-img-box {
    width: calc(100% - 30px); /* Görsel bir tık daha ufaltıldı */
    margin: 8px auto 0 auto; /* Üst boşluk azaltıldı, alt boşluk TAMAMEN silindi */
    aspect-ratio: 1 / 1;
    height: auto;
    flex-shrink: 0;
    background: var(--bg-main); 
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loot-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kart İçeriği */
.loot-info-box {
    padding: 8px 10px 12px 10px;
    display: flex;
    flex-direction: column;
}

/* Başlık Metni */
.loot-title {
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    color: var(--text-main);
    margin: 0;
}

/* Alt Satır: Milimetrik Hizalama Zırhı */
.loot-bottom-row {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    height: 36px; /* İki öğeyi de zorla aynı hizaya çeker */
}

/* Daha Kalın Puan (Tam Ortalı) */
.loot-price {
    font-size: 1.3rem;
    font-weight: 900;
    font-family: 'Oswald', sans-serif;
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    line-height: 1;
}

/* Nizami Sepet Butonu (Tam Ortalı) */
.loot-buy-btn {
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 2px 5px rgba(231,76,60,0.2);
}
/* Puan Yetmediğinde Gri Buton (Sepete Eklenemez) */
.loot-buy-btn.disabled {
    background: var(--border-color);
    color: var(--text-sub);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

/* --- ÖZEL ARAMALI AÇILIR KUTULAR (CUSTOM SELECT) --- */
.loot-custom-select { position: relative; width: 100%; }
.loot-select-box { padding: 12px 15px; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 12px; font-weight: bold; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; cursor: pointer; height: 45px; box-sizing: border-box; }
.loot-select-dropdown { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); z-index: 1000; display: none; flex-direction: column; overflow: hidden; }
.loot-select-dropdown.active { display: flex; }
.loot-select-search { padding: 10px; border-bottom: 1px solid var(--border-color); background: var(--bg-main); }
.loot-select-search input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.85rem; outline: none; background: var(--bg-card); color: var(--text-main); box-sizing: border-box; font-weight: bold; }
.loot-select-list { max-height: 200px; overflow-y: auto; }
.loot-select-item { padding: 12px 15px; font-size: 0.85rem; color: var(--text-main); cursor: pointer; border-bottom: 1px solid var(--border-color); transition: 0.2s; }
.loot-select-item:last-child { border-bottom: none; }
.loot-select-item:hover { background: rgba(231,76,60,0.08); color: var(--brand-primary); font-weight: bold; padding-left: 20px; }