/* =====================================================================
   accent-tune.css  —  Mor "vurgu" rengini arka planlardan ayıklar.
   Amaç: Mor sadece CTA / aktif durum / hover / önemli badge gibi
   "buraya bak" noktalarında kalsın; genel arka planlar nötr koyu olsun.
   Bu dosya EN SON yüklenir; tek satır include + bu dosya silinince
   tüm değişiklik geri alınır. Accent (buton/border/glow) korunur.
   ===================================================================== */

:root {
    /* --- Arka plan değişkenlerini nötr koyu griye çek (mor tint yok) ---
       Bu değişkenler kart/section/panel arka planlarında yüzlerce yerde
       kullanılıyor; burada yeniden tanımlayınca hepsi tek seferde nötrlenir. */
    --pui-bg-card:   #131419 !important;
    --pui-bg-card-2: #0f1015 !important;
    --pui-bg-soft:   #181a22 !important;

    /* Geniş yüzey gradyanı: morsuz, düz koyu */
    --pui-gradient-bg: linear-gradient(168deg, #181a22 0%, #131419 55%, #0f1015 100%) !important;
    /* Cam efektli yüzeyler: mor sis yerine nötr beyaz mikro-parlama */
    --pui-gradient-glass: linear-gradient(168deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%) !important;

    /* redesign.css panel/bg değişkenleri — morumsu maviden nötre */
    --ofl-bg:         #0b0c10 !important;
    --ofl-bg-2:       #101218 !important;
    --ofl-panel:      rgba(20, 22, 28, 0.92) !important;
    --ofl-panel-2:    rgba(26, 28, 36, 0.90) !important;
    --ofl-panel-solid:#14161c !important;
    /* İnce çizgiler: mor yerine nötr */
    --ofl-line:        rgba(180, 190, 210, 0.10) !important;

    /* NOT: --pui-violet-*, --ofl-accent, --pui-gradient-primary/-shine ve
       glow değişkenlerine DOKUNMUYORUZ — vurgu moru olduğu gibi kalsın. */
}

/* --- Sayfa geneli atmosfer: büyük mor radial glow'ları sakinleştir ---
   Banner kendi görseliyle mor kalır; burada sadece body'nin altındaki
   ekran-boyu mor sis katmanını nötrlüyoruz ki arayüz mora boğulmasın. */
body {
    background:
        radial-gradient(900px 420px at 18% -120px, rgba(34, 211, 238, 0.05), transparent 62%),
        radial-gradient(880px 520px at 88% 4%, rgba(139, 92, 246, 0.06), transparent 60%),
        linear-gradient(180deg, #0a0b0f 0%, #0b0c10 42%, #0d0f14 100%) !important;
}

/* Üst bar / header çizgilerindeki mor sızıntıyı nötrle (accent buton hariç) */
.top-utility-bar {
    border-bottom-color: rgba(180, 190, 210, 0.10) !important;
}

/* =====================================================================
   HEADER — mor sızıntıyı boştaki (resting) durumdan ayıkla.
   Mantık: header pasifken NÖTR; mor sadece focus/hover anında belirsin.
   ===================================================================== */

/* Header altındaki mor underline çizgisi → nötr */
header.redesigned-header::after {
    background: linear-gradient(90deg, transparent, rgba(180,190,210,0.10), transparent) !important;
}

/* Gelişmiş Arama Kutusu ve Etkileşimli Elemanları */
.header-search-wrap .input-group {
    background: rgba(7, 9, 17, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 99px !important;
    height: 48px !important;
    padding: 3px 3px 3px 18px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.header-search-wrap .input-group:focus-within {
    background: rgba(7, 9, 17, 0.75) !important;
    border-color: rgba(139, 92, 246, 0.6) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.25), 0 0 0 1px rgba(139, 92, 246, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}



.header-search-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-left: 8px !important;
    position: relative !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.header-search-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 1 !important;
}

.header-search-wrap .input-group:focus-within .header-search-btn,
.header-search-btn:hover {
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;
    transform: scale(1.05) !important;
}

.header-search-wrap .input-group:focus-within .header-search-btn::before,
.header-search-btn:hover::before {
    opacity: 1 !important;
}

.header-search-btn i {
    position: relative !important;
    z-index: 2 !important;
    font-size: 13.5px !important;
    transition: transform 0.3s ease !important;
}

.header-search-btn:hover i {
    transform: scale(1.1) rotate(5deg) !important;
}

/* Kategori barı alt çizgisi → nötr */
.category-bar::after {
    background: linear-gradient(90deg, transparent, rgba(180,190,210,0.10), transparent) !important;
}

/* Kategori ikon kutucukları: SADECE oyun rengi OLMAYAN ikonların mor tint'i
   nötrlensin. :not([class*="cat-glow-"]) sayesinde Valorant/PUBG/LoL/ML gibi
   oyuna özel renkli ikonlara dokunmuyoruz. */
.cat-icon-glow:not([class*="cat-glow-"]),
.category-item-icon {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* =====================================================================
   1) ÜST KAMPANYA BARI — parlak pembe/magenta yerine sakin koyu zemin.
   Mesaj okunur kalır ama "ucuz reklam" gibi bağırmaz; mor accent dokunuş.
   ===================================================================== */
.campaign-bar {
    background: linear-gradient(90deg, #140f22 0%, #1d1636 50%, #140f22 100%) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.20) !important;
}
.campaign-bar-text { color: rgba(255, 255, 255, 0.88) !important; }
.campaign-bar-text b { color: #c4b5fd !important; text-shadow: none !important; }
.campaign-bar-icon { background: rgba(139, 92, 246, 0.22) !important; }
.campaign-bar-badge {
    background: rgba(139, 92, 246, 0.16) !important;
    border: 1px solid rgba(139, 92, 246, 0.38) !important;
    color: #ddd6fe !important;
}

/* =====================================================================
   2) LİSTE AKSİYON BÖLGESİ HİYERARŞİSİ
   Mantık: tek mor CTA = "SEPETE EKLE". Geri kalan sinyaller ayrışsın.
   ===================================================================== */

/* Fiyat → parlak BEYAZ (mor gradyan metni kaldır). En okunur eleman bu olsun. */
.pl-card-price-main,
.pl-card:hover .pl-card-price-main {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    color: #ffffff !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35) !important;
}

/* "1+1 Bedava" kampanya rozeti → sönük/ghost (dolu mor + parlama kalksın) */
.pl-tag-campaign {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
}
.pl-tag-campaign::after { display: none !important; }

/* "%XX İndirim" → KIRMIZI/turuncu aciliyet rengi (pembe-mor yerine) */
.pl-tag-pink {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(249, 115, 22, 0.12)) !important;
    color: #fda4a4 !important;
    border-color: rgba(239, 68, 68, 0.38) !important;
}

/* SEPETE EKLE (pl-action-cart) tek mor CTA olarak korunuyor — dokunmuyoruz. */

/* Anasayfa kartlarındaki "1+1 BEDAVA" (pbadge-campaign) → liste ile tutarlı.
   Görsel üstünde durduğu için okunabilirlik adına koyu cam zemin kullanıyoruz. */
.pbadge-campaign {
    background: rgba(13, 14, 19, 0.72) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pbadge-campaign::after { display: none !important; }

/* =====================================================================
   3) LİSTE SATIRLARINI SIKILAŞTIR (sadece masaüstü; mobil kuralları korunur)
   ===================================================================== */
@media (min-width: 992px) {
    .pl-card-inner {
        min-height: 116px !important;
        padding: 13px 18px !important;
        gap: 16px !important;
    }
    .pl-card-image {
        width: 74px !important;
        height: 104px !important;
    }
}

/* =====================================================================
   4) KART HOVER MİKRO-ETKİLEŞİM — hafif yukarı kalkma + mor accent glow
   (Önceki cyan hover yerine accent sistemiyle tutarlı mor.)
   ===================================================================== */
    transform: translateX(3px) translateY(-2px) !important;
}

/* ==========================================================================
   PREMIUM GLASSMORPHIC & GLOWING FOOTER DESIGN
   ========================================================================== */

footer.site-footer {
    background: linear-gradient(180deg, rgba(13, 17, 25, 0.94), rgba(7, 9, 15, 0.98)) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-top: none !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 0 !important;
}

/* Footer Top Glow Line */
footer.site-footer::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), rgba(34, 211, 238, 0.4), transparent) !important;
    box-shadow: 0 -1px 12px rgba(139, 92, 246, 0.3) !important;
    z-index: 2 !important;
}

/* Scroll to Top Futuristic Upgrade */
.to-up {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.to-up:hover {
    transform: scale(1.08) translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(34, 211, 238, 0.5), 0 0 10px rgba(139, 92, 246, 0.3) !important;
    color: #fff !important;
}

.to-up i {
    font-size: 16px !important;
    transition: transform 0.3s ease !important;
}

.to-up:hover i {
    transform: translateY(-2px) !important;
}

/* Trust Strip Glassmorphic Upgrade */
.footer-trust-strip {
    background: rgba(255, 255, 255, 0.015) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    padding: 24px 0 !important;
    backdrop-filter: blur(8px) !important;
}

.footer-trust-inner {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.footer-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    cursor: default !important;
}

.footer-trust-item i {
    font-size: 20px !important;
    color: rgba(139, 92, 246, 0.6) !important;
    transition: all 0.3s ease !important;
}

.footer-trust-item:hover {
    color: #fff !important;
    transform: translateY(-2px) !important;
}

.footer-trust-item:hover i {
    color: #22d3ee !important;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.6) !important;
    transform: scale(1.15) rotate(-5deg) !important;
}

/* Brand Logo Hover */
.footer-brand-logo img {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.footer-brand-logo img:hover {
    transform: scale(1.03) !important;
    filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.4)) !important;
}

/* Contact & Social Links */
.footer-contact-panel {
    gap: 14px !important;
}

.footer-contact-link {
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.02) !important;
    background: rgba(255, 255, 255, 0.01) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-left: 0 !important;
}

.footer-contact-link:hover {
    color: #fff !important;
    background: rgba(139, 92, 246, 0.08) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
    transform: translateX(6px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
}

.footer-contact-mark {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(139, 92, 246, 0.1) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    transition: all 0.3s ease !important;
}

.footer-contact-link:hover .footer-contact-mark {
    transform: scale(1.08) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3) !important;
}

.footer-contact-mark-whatsapp {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
}

.footer-contact-link:hover .footer-contact-mark-whatsapp {
    border-color: rgba(34, 197, 94, 0.5) !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.3) !important;
}

.footer-social-list li a {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-social-list li a:hover {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45) !important;
    transform: translateY(-4px) !important;
}

/* Newsletter Form Capsule Styling */
.footer-newsletter-shell .newsletter {
    background: rgba(7, 9, 17, 0.6) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    border-radius: 99px !important;
    height: 50px !important;
    padding: 3px 3px 3px 20px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-newsletter-shell .newsletter:focus-within {
    border-color: rgba(139, 92, 246, 0.6) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.25), 0 0 0 1px rgba(139, 92, 246, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    background: rgba(7, 9, 17, 0.8) !important;
}

.footer-newsletter-shell .newsletter .form-control {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    height: 100% !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.footer-newsletter-shell .newsletter .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.footer-newsletter-shell .newsletter .input-group-text {
    height: 44px !important;
    border-radius: 99px !important;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 0 22px !important;
    margin-left: 8px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35) !important;
}

.footer-newsletter-shell .newsletter .input-group-text:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.5), 0 0 10px rgba(34, 211, 238, 0.3) !important;
}

/* Footer Bottom & Payments styling */
.footer-bottom {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    padding: 24px 0 !important;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 13px !important;
}

.footer-payments img {
    opacity: 0.35 !important;
    filter: grayscale(100%) brightness(1.2) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-payments img:hover {
    opacity: 1 !important;
    filter: grayscale(0%) brightness(1) !important;
    transform: scale(1.05) !important;
}

.footer-nav-col h4::after,
.footer-social-col h4::after {
    background: linear-gradient(90deg, #7c3aed, #06b6d4) !important;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.4) !important;
}

.footer-nav-col ul li a::before {
    color: #06b6d4 !important;
}