/* ============================================================
   1. GENEL AYARLAR & FONTLAR
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

body, h1, h2, h3, h4, h5, h6, p, a, span, li, button, input, select, textarea, div {
    font-family: 'Poppins', sans-serif !important;
}

/* İkon Fontlarını Koru */
.fa, .fas, .far, .fab, .glyphicon, .material-icons, i {
    font-family: FontAwesome !important;
}

/* ============================================================
   2. ARAMA ÇUBUĞU (SEARCH BAR) - "BEYAZ HAP" MODU
   ============================================================ */
#search, #search input, #search button, .search-button, .input-group, .input-group-btn {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

#search {
    background-color: #ffffff !important; 
    border-radius: 50px !important;       
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 50px !important;              
    width: 100% !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; 
    position: relative !important;
    z-index: 99 !important;
    overflow: hidden !important; 
    border: 2px solid #ffffff !important; 
}

#search input, .search-input, input[name="search"] {
    background: transparent !important;
    border: none !important;
    height: 100% !important;
    width: 100% !important;
    padding-left: 25px !important;  
    padding-right: 60px !important; 
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

#search input::placeholder {
    color: #aaa !important;
    opacity: 1 !important;
}

#search .input-group-btn {
    position: absolute !important;
    right: 5px !important; 
    top: 50% !important;
    transform: translateY(-50%) !important; 
    height: 40px !important;
    width: 40px !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#search button, .search-button {
    background: #222 !important; 
    color: #fff !important;      
    font-size: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important; 
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#search button:hover {
    background: #000 !important;
    transform: scale(1.05);
}

/* ============================================================
   3. SOL MENÜ, PANELLER VE MODÜLLER
   ============================================================ */
div[class*="heading"], .box-heading, .panel-heading {
    background: transparent !important;
    color: #222 !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #eee !important;
    padding: 15px 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.box, .panel, .module {
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; 
    border-radius: 12px !important; 
    margin-bottom: 30px !important;
    padding: 20px !important;
    border: none !important;
}

.btn, select, .product-thumb, img {
    border-radius: 8px !important;
}

/* ============================================================
   4. MİKRO ANİMASYONLAR VE BUTON EFEKTLERİ (LIFT & GLOW)
   ============================================================ */
.btn, .button, a.btn, a.button, input[type="button"], input[type="submit"], button {
    transition: all 0.3s ease-in-out !important; 
    display: inline-block !important; 
}

.btn:hover, .button:hover, a.btn:hover, a.button:hover, input[type="button"]:hover, input[type="submit"]:hover, button:hover {
    transform: translateY(-3px) !important; 
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.5) !important; 
    filter: brightness(1.1) !important; 
}

.btn:active, .button:active, a.btn:active, a.button:active, input[type="button"]:active, input[type="submit"]:active, button:active {
    transform: translateY(1px) !important; 
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3) !important; 
}

/* ============================================================
   5. SEPETE EKLE VE HEMEN AL BUTONLARI - EŞİT BOYUT VE LACİVERT TONLAR
   ============================================================ */
/* DİKKAT: Tarayıcıların animasyonu oynatması için Keyframes içinde !important KULLANILMAMALIDIR. */
@keyframes pulse-dark-blue {
    0% { box-shadow: 0 0 0 0 rgba(21, 28, 43, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(21, 28, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(21, 28, 43, 0); }
}

@keyframes pulse-light-blue {
    0% { box-shadow: 0 0 0 0 rgba(44, 62, 93, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(44, 62, 93, 0); }
    100% { box-shadow: 0 0 0 0 rgba(44, 62, 93, 0); }
}

/* Ana taşıyıcının (div) dışarı taşan gölgeleri makaslamaması (kesmemesi) için güvenlik ayarı */
.urun_sepete_ekle {
    overflow: visible !important;
}

/* Ana Kapsayıcılar (Eşit hiza ve boşluk) */
#sepete_ekle_buton, #hemenal_buton {
    display: inline-block !important;
    position: relative !important;
    transition: all 0.3s ease-in-out !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    border: none !important;
    margin: 5px 15px 10px 0 !important; /* Sağdan 15px boşluk ile mesafeyi açtık */
}

/* Kapsayıcı hover (havaya kalkma) efekti */
#sepete_ekle_buton:hover, #hemenal_buton:hover {
    transform: translateY(-4px) scale(1.02) !important;
}

/* --- SEPETE EKLE - Koyu Lacivert --- */
#sepete_ekle_buton::before {
    content: "SEPETE EKLE" !important;
    background-color: #151c2b !important;
    color: #ffffff !important;
    padding: 15px 0 !important; 
    width: 175px !important; 
    text-align: center !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    display: block !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease-in-out !important;
    animation: pulse-dark-blue 2s infinite !important;
}
#sepete_ekle_buton:hover::before {
    background-color: #1e283d !important;
}

/* --- HEMEN AL - Açık Lacivert --- */
#hemenal_buton::before {
    content: "HEMEN AL" !important;
    background-color: #2c3e5d !important;
    color: #ffffff !important;
    padding: 15px 0 !important;
    width: 175px !important; 
    text-align: center !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    display: block !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease-in-out !important;
    animation: pulse-light-blue 2s infinite !important;
}
#hemenal_buton:hover::before {
    background-color: #384e75 !important;
}

/* ============================================================
   6. HIZLI KARGO ROZETİ (VİTRİN VE DETAY SAYFASI TAM UYUM)
   ============================================================ */
@keyframes kargo-shine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* İçeriği sıfırlama: Rozetin içindeki TÜM alt elemanları gizler.
   "HIZLI KARGO" yazısı ::before ile çizildiği için etkilenmez. */
.urun_ikonlar *, .kargo_suresi_yazi {
    display: none !important;
}
.urun_ikonlar {
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
}

/* ------------------------------------------------------------
   A. VİTRİN KARTLARI: FİYAT ALANI + ROZET HİZASI
   ------------------------------------------------------------ */
/* İki rozeti / fiyatı kartın ortasında, aralarında küçük boşlukla hizala */
.butonveikonlar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.butonveikonlar .urun_fiyatlar {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Minik Hızlı Kargo Rozeti */
.urun_ikonlar {
    position: relative !important;
    display: inline-flex !important;
    background: rgba(40, 167, 69, 0.08) !important;
    border: 1px solid rgba(40, 167, 69, 0.3) !important;
    border-radius: 20px !important;
    margin: 0 !important;
    flex-shrink: 0 !important; 
    overflow: hidden !important;
    cursor: default !important;
    width: auto !important;
    height: auto !important;
}

.urun_ikonlar::before {
    content: "HIZLI KARGO" !important;
    font-family: 'Poppins', sans-serif !important;
    color: #28a745 !important;
    font-weight: 700 !important;
    font-size: 9px !important; 
    padding: 4px 8px !important; 
    letter-spacing: 0 !important;
    display: block !important;
    line-height: normal !important;
    white-space: nowrap !important;
}

.urun_ikonlar::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 40% !important;
    height: 100% !important;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%) !important;
    transform: skewX(-25deg) !important;
    animation: kargo-shine 4s infinite !important;
    z-index: 1 !important;
}

/* ------------------------------------------------------------
   B. ÜRÜN DETAY SAYFASI: BÜYÜK HIZLI KARGO ROZETİ
   ------------------------------------------------------------ */
div.urun_detay_orta .urun_ikonlar {
    display: inline-block !important;
    background: rgba(40, 167, 69, 0.1) !important;
    border: 1px solid rgba(40, 167, 69, 0.4) !important;
    border-radius: 50px !important;
    margin: 15px 0 20px 0 !important; 
}

div.urun_detay_orta .urun_ikonlar::before {
    font-size: 15px !important; 
    padding: 12px 35px !important; 
    letter-spacing: 0.5px !important;
    color: #218838 !important;
}

div.urun_detay_orta .urun_ikonlar::after {
    width: 50% !important;
    animation: kargo-shine 3s infinite !important; 
}

/* ============================================================
   7. "ÇOK YAKINDA STOKTA" ROZETİ (VİTRİN KARTLARI)
   ============================================================ */
/* Pembe kutunun arka planını ve boşluklarını kaldır */
.butonveikonlar .urun_fiyatlar:has(.yakinda-stok),
.butonveikonlar .urun_fiyatlar:has(.yakinda-stok) * {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    width: auto !important;
}

/* Turuncu hap rozet - Hızlı Kargo ile aynı boyutta */
.butonveikonlar .yakinda-stok.yakinda-stok {
    display: inline-block !important;
    background: rgba(255, 152, 0, 0.1) !important;
    border: 1px solid rgba(255, 152, 0, 0.4) !important;
    color: #e65100 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 4px 8px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    line-height: normal !important;
}

/* Ürün detay sayfasındaki büyük kutu eski haliyle kalsın */
.urun_detay_orta .yakinda-stok {
    white-space: normal !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-transform: none !important;
}

/* ============================================================
   8. WHATSAPP İLE SİPARİŞ VER BUTONU (ÜRÜN DETAY - MASAÜSTÜ)
   ============================================================ */
.wa-siparis {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 365px !important;
    box-sizing: border-box !important;
    margin: 15px 0 20px 0 !important;
    padding: 15px 24px !important;
    background: #25D366 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out !important;
}
.wa-siparis:hover {
    background: #1ebe5a !important;
    color: #fff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35) !important;
}
.wa-siparis svg {
    flex-shrink: 0 !important;
}

/* Mobilde platformun kendi WhatsApp butonu olduğu için gizle */
@media (max-width: 991px) {
    .wa-siparis { display: none !important; }
}