:root {
    /* Color Palette - Premium & Vibrant */
    --primary-blue: var(--primary-blue);
    --primary-blue-deep: #0066CC;
    --primary-orange: #FF9900;
    --accent-glow: rgba(var(--primary-blue-rgb), 0.4);
    --accent-gradient: linear-gradient(135deg, var(--primary-blue) 0%, #00C8FF 100%);
    
    /* Light Theme - Clean, Airy & Professional */
    --bg-color: #f8fafc; 
    --header-bg: rgba(255, 255, 255, 0.92);
    --text-color: #0f172a; 
    --text-muted: #64748b;
    --border-color: rgba(0, 0, 0, 0.05); 
    --card-bg: #ffffff;
    --input-bg: #f1f5f9;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --hero-overlay: transparent;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.2);
    --sidebar-bg: #ffffff;
    
    /* RGB for opacity */
    --primary-blue-rgb: 0, 133, 255;
    --primary-orange-rgb: 255, 153, 0;

    /* Dynamic Gradients */
    --pubg-grad: linear-gradient(135deg, #1e293b 0%, #f59e0b 100%);
    --valorant-grad: linear-gradient(135deg, #1e293b 0%, #ef4444 100%);
    --lol-grad: linear-gradient(135deg, #1e293b 0%, #0ea5e9 100%);
    --mlbb-grad: linear-gradient(135deg, #1e293b 0%, #eab308 100%);
}

[data-theme="dark"] {
    /* Dark Theme - Deep, Immersive & Sharp */
    --bg-color: #020617; /* Slate 950 - Deepest Blue-Black */
    --header-bg: rgba(2, 6, 23, 0.85);
    --text-color: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.06);
    --input-bg: #0f172a;
    --card-bg: #0f172a; /* Slate 900 */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.5);
    --hero-overlay: transparent;
    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --sidebar-bg: #020617;
    
    --accent-glow: rgba(var(--primary-blue-rgb), 0.6);

    --pubg-grad: linear-gradient(135deg, #0f172a 0%, #78350f 100%);
    --valorant-grad: linear-gradient(135deg, #0f172a 0%, #7f1d1d 100%);
    --lol-grad: linear-gradient(135deg, #0f172a 0%, #075985 100%);
    --mlbb-grad: linear-gradient(135deg, #0f172a 0%, #713f12 100%);
}

/* Custom Selection */
::selection {
    background-color: var(--primary-blue);
    color: #fff;
}



.hidden {
    display: none !important;
}

/* Ultra-Aggressive Scrollbar Hiding */
::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
    background: transparent !important;
    display: none !important;
}
*::-webkit-scrollbar {
    width: 4px !important;
    display: none !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden !important; /* Global fix for horizontal scroll */
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    overflow-x: hidden;
}

/* === PERFORMANS OPTİMİZASYONLARI === */

/* GPU Hızlandırma: Animasyonlu elemanlar
   `will-change` ve `backface-visibility` KALICI olarak duruyordu; bu, kartı
   sürekli ayrı bir GPU katmanında tutuyor ve katman yarım piksele oturduğunda
   yuvarlak 1px kenarlıklar basamak basamak (pürüzlü) görünüyordu.
   Katman artık yalnızca fareyle üzerine gelindiğinde — yani animasyonun
   gerçekten oynadığı anda — açılıyor. Kenarlıklar duruyorken pürüzsüz. */
.product-card, .product-card-modern, .listing-product-card, .category-item-card, .blog-card, .hero-card, .side-post-item,
.nav-item-modern, .icon-btn, .btn-login, .btn-categories,
.btn-side-hero, .btn-register-desktop {
    text-decoration: none !important; /* Tüm kartlarda alt çizgiyi kaldır */
}
.product-card:hover, .product-card-modern:hover, .listing-product-card:hover,
.category-item-card:hover, .blog-card:hover, .hero-card:hover, .side-post-item:hover,
.nav-item-modern:hover, .icon-btn:hover, .btn-login:hover, .btn-categories:hover,
.btn-side-hero:hover, .btn-register-desktop:hover {
    will-change: transform;
}

/* Link içindeki tüm metinlerin alt çizgisini temizle */
.product-card-modern, .product-card-modern *, 
.product-card, .product-card *, 
.listing-product-card, .listing-product-card *, 
.category-item-card, .category-item-card *, 
.blog-card, .blog-card *, 
.hero-card, .hero-card * {
    text-decoration: none !important;
}

/* Layout İzolasyonu: Kartlar kendi render alanında (paint hariç - görsel taşma korunur) */
.product-card, .blog-card {
    contain: layout style;
}

/* Görünüm Dışı Bölümler: Lazy render */
.blog-section, .seo-description-section, .main-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Görsel Yer Tutucu (İskelet)
   Gecikmeli yüklenen görseller inene kadar arkalarında hafif hareketli bir
   zemin durur; görsel gelince üstünü kapatır. Ek dosya veya ek istek yoktur,
   sadece CSS'tir — arka plan sekmesinde animasyon dursa bile görsel görünür,
   çünkü zemin görselin ARKASINDA, görselin kendisi hiçbir zaman gizlenmez. */
@keyframes iskeletParilti {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

img[loading="lazy"]:not(.loaded):not([data-loaded="true"]) {
    background-image: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.06) 25%,
        rgba(148, 163, 184, 0.14) 37%,
        rgba(148, 163, 184, 0.06) 63%
    );
    background-size: 200% 100%;
    animation: iskeletParilti 1.4s ease-in-out infinite;
}

/* Görsel yüklendiğinde zemin kaldırılır */
img[loading="lazy"].loaded,
img[loading="lazy"][data-loaded="true"] {
    background-image: none;
    animation: none;
}

/* Görsel Yüklenme Davranışı
   ÖNCE: img[loading="lazy"] öğelerine blur(8px) + scale(1.02) uygulanıp
   görsel inince kaldırılıyordu. Blur-up tekniği ancak önceden yüklenmiş
   düşük çözünürlüklü bir yer tutucu varsa çalışır; burada src doğrudan
   gerçek görsel olduğu için HENÜZ İNMEMİŞ (boş) bir görsel bulanıklaştırılıyordu.
   Ekranda hiçbir şey görünmüyor, görsel inince birden beliriyordu. Ayrıca
   60+ görselde sürekli blur+scale katmanı gereksiz GPU yükü oluşturuyordu.

   Opaklık animasyonu da denendi ancak arka plandaki sekmelerde animasyon
   ilerlemediği için görseller görünmez kalıyordu — aynı sorunun tekrarı.

   ŞİMDİ: Görsele hiçbir efekt uygulanmıyor; tarayıcı indirdikçe normal
   şekilde gösteriyor. En hızlı ve en güvenli davranış budur.
   (footer.php'deki 'loaded' sınıfı ekleme kodu duruyor, zararsızdır.) */

/* Azaltılmış Hareket Tercihi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    img[loading="lazy"] {
        filter: none !important;
        transform: none !important;
    }
}

.top-announcement {
    background: var(--primary-blue);
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1001;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    box-sizing: border-box;
}

@media (min-width: 769px) {
    .top-announcement {
        padding: 12px 0;
        font-size: 14.5px;
        letter-spacing: 0.8px;
    }
}

/* Types */
.top-announcement.type-marquee {
    white-space: nowrap;
    text-align: left;
}

.announcement-marquee {
    display: inline-flex;
    animation: announcementMarquee 15s linear infinite;
    gap: 60px;
}

.announcement-marquee span {
    flex-shrink: 0;
}

@keyframes announcementMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-16.666%); } 
}

/* Effects */
.effect-shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: announcementShine 4s infinite;
}

@keyframes announcementShine {
    0% { left: -100%; }
    30% { left: 100%; }
    100% { left: 100%; }
}

.effect-neon {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5);
    animation: announcementNeon 1.5s ease-in-out infinite alternate;
}

@keyframes announcementNeon {
    from { opacity: 0.8; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5); }
    to { opacity: 1; text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.8); }
}

.effect-glow {
    animation: announcementGlow 2s ease-in-out infinite alternate;
}

@keyframes announcementGlow {
    from { box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), inset 0 0 0 rgba(255, 255, 255, 0); }
    to { box-shadow: 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.1); }
}

.logo-img {
    height: 68px;
    width: auto;
    object-fit: contain;
    display: block;
}

html:not([data-theme="dark"]) .logo-img {
    filter: invert(1) hue-rotate(180deg);
}

.container {
    max-width: 1600px; /* Ultra-wide for modern monitors */
    margin: 0 auto;
    padding: 0 60px;
    overflow-x: hidden;
    box-sizing: border-box;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Header Modernization */
.main-header {
    width: 100%;
    background-color: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1000;
    transition: all 0.3s ease;
    overflow-x: hidden; /* Prevent header items from leaking */
}

/* Visibility Rules */
.mobile-header, 
.mobile-sidebar, 
.mobile-sidebar-overlay { 
    display: none !important; 
}

.desktop-header { 
    display: block !important; 
}

/* Header Top Section */
.header-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Sütunlar arasında boşluk yoktu: arama kutusu ile yanındaki tema/dil
       butonu her genişlikte birbirine yapışık duruyordu. */
    column-gap: 16px;
    align-items: center;
    padding: 16px 0;
}

/* Yer daraldığında buton yazıları iki satıra bölünmesin.
   Butonlar geniş ekranda bile sınırda duruyordu: yazı sarmasına izin
   verilince doğal genişliklerinin altına sıkışıyorlardı. */
.header-top .actions .btn,
.btn-register-desktop,
.btn-login { white-space: nowrap; }

/* Dar masaüstünde başlık satırı sığmıyordu.
   `1fr auto 1fr` sütunlarının otomatik alt sınırı min-content olduğu için
   hiçbir sütun daralamıyor, satır taşıyordu; sağdaki zil/sepet/Kayıt Ol/
   Giriş Yap ekranın dışında kalıp kırpılıyordu (900px'de 289px taşma
   ölçüldü, giriş butonuna hiç ulaşılamıyordu).

   Bu aralıkta yanlar içerik kadar, orta sütun esnek olur — yeri önce arama
   kutusu bırakır, gerekirse ikona kadar daralır. 1200px üstünde ortalanmış
   özgün düzen aynen korunur. */
@media (max-width: 1200px) {
    .desktop-header .header-top {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    /* Grid/flex öğelerinin varsayılan min-width:auto değeri daralmayı
       engelliyor; sıfırlanmadan minmax tek başına yetmiyor. */
    .desktop-header .header-top > * { min-width: 0; }
    .desktop-header .header-top .search-container {
        width: auto;
        max-width: 460px;
        margin: 0 auto;
    }
}

/* 960px altında arama kutusuna anlamlı genişlik kalmıyor: sütunu ~8px'e
   düşüyor, kutunun kendi asgari genişliği (86px) sütununu taşırıp
   butonların üstüne biniyordu. Bu aralıkta kutu tamamen kaldırılır;
   başlık logo + aksiyonlar olarak iki sütuna iner.
   768px altında zaten mobil başlık devreye giriyor ve kendi arama alanı var. */
@media (max-width: 959px) {
    .desktop-header .header-top {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .desktop-header .header-top .search-container { display: none; }
    .desktop-header .header-top .actions { justify-content: flex-end; }
}

.logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    cursor: pointer;
    user-select: none;
    justify-self: start;
}

.logo-text-orange { color: var(--primary-orange); }
.logo-text-blue { color: var(--primary-blue); }

.search-container {
    width: 460px;
    display: flex;
    align-items: center;
    background-color: var(--input-bg);
    border-radius: 10px;
    padding: 4px 12px;
    height: 44px;
    margin: 0;
    transition: all 0.2s ease;
}

.search-container:focus-within {
    box-shadow: 0 0 0 2px var(--primary-blue);
    background-color: var(--card-bg);
}

.search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-color);
    padding: 0 12px;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
}

.search-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}

.icon-btn {
    background-color: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.icon-btn:hover {
    background-color: var(--input-bg);
    transform: translateY(-1px);
}

.btn-login {
    background-color: var(--primary-blue);
    color: var(--primary-text) !important;
    padding: 0 20px;
    height: 44px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 4px;
    box-shadow: 0 4px 15px rgba(var(--primary-blue-rgb), 0.2);
}

.btn-register-desktop {
    background-color: var(--glass-bg);
    color: var(--text-color);
    padding: 0 20px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.btn-register-desktop:hover {
    background-color: var(--input-bg);
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-blue-rgb), 0.4);
    filter: brightness(1.1);
}

/* Header Navigation Section */
.header-nav {
    display: flex;
    justify-content: flex-start; /* Ortadan sola hizalandı */
    padding-top: 10px;
    padding-bottom: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 12px; /* Azaltıldı, pill-shape için daha iyi durur */
    width: fit-content;
}

.nav-item-modern {
    --item-glow: var(--primary-blue);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    position: relative;
    overflow: visible;
}

.nav-item-modern::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--primary-blue);
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    box-shadow: 0 0 10px var(--primary-blue);
    opacity: 1;
}

.nav-item-modern:hover {
    background: var(--glass-bg);
    transform: translateY(-2px);
}

.nav-item-modern:hover::after {
    width: 110%;
    box-shadow: 0 0 15px var(--primary-blue), 0 0 5px var(--primary-blue);
}


/* ══════════════════════════════════════════════════════════════════════
   ANA SLIDER ORTAM IŞIĞI
   Slider'ın arkasında, o anki slayt görselinden türeyen bulanık bir hâle.
   Yanlarda ekran kenarına kadar uzanır, yukarı başlığın arkasına taşar,
   aşağıda ürün kartlarının altına biraz sarkıp maske ile silinir.
   Görsel JS ile aktif slayttan alınır; slayt değişince yumuşak geçer.
   ══════════════════════════════════════════════════════════════════════ */
.hero-section { position: relative; }

/* `z-index:-1` katman, BODY'nin opak zemininin ALTINA düşüyordu: body
   zemini akıştaki blok arka planı olarak negatif katmandan SONRA çiziliyor.
   Çözüm, sayfa zeminini bir üst kata (html) taşımak. Görünüm birebir aynı
   kalır — aynı değişken kullanılıyor — ama artık negatif katman zeminin
   üstünde çizilebiliyor.
   `main`'i konumlandırmak da denendi; o zaman katman sayfanın üstünden
   değil main'in üstünden başlıyor ve başlığın arkasına uzanamıyordu. */
html:has(.hero-ambient) { background: var(--bg-color); }
html:has(.hero-ambient) body { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════
   ORTAM IŞIĞI (HÂLE) — sliderın arkasındaki bulanık renk yayılımı

   ÖNEMLİ — DONMA SORUNUNUN ÇÖZÜMÜ BURADA:
   Katman eskiden CANLI bir CSS filtresiydi (`filter: blur(...)` + maske).
   Canlı filtre, üstündeki bir öğe her boyandığında tarayıcı tarafından
   yeniden çözülmek zorundadır. Ürün kartları cam efektiyle yarı saydam
   olduğu için, hâlenin üstüne denk gelen kartlara tıklandığında tarayıcı
   koca bir bulanıklığı baştan hesaplıyor ve sayfa donuyordu. Sorun sadece
   hâlenin arkasına denk gelen bölümde görülüyordu; sebebi buydu.

   Artık bulanıklık SAYFADA HESAPLANMIYOR. Küçük bir tuvale bir kez
   pişiriliyor (index.php içindeki hâle kodu) ve burada duran şey sıradan
   bir bitmap: filtre yok, maske yok, will-change yok, transform yok.
   Bitmap'in çizim maliyeti sabittir ve yüksekliğe bağlı değildir; bu
   yüzden katman yeniden 1240 piksel boyunca uzanabiliyor.

   Görünüm birebir korundu: bulanıklık, doygunluk, yayılım ve üst/alt
   yumuşak kesim aynı değerlerle bitmap'e işleniyor. Opaklık burada
   kalıyor — düz bir bitmap üzerinde bedelsizdir ve temaya göre değişir.

   NOT: satın alma penceresi açılırken hâleye ARTIK DOKUNULMUYOR.
   Eskiden pencere açılınca gizleniyordu (body.pm-acik); bu, tam da
   tıklama anında fazladan biçim hesabı ve yeniden boyama demekti. */

.hero-ambient {
    /* Sayfanın en üstünden başlar (başlığın arkasına da taşar) ve
       slider bölgesinin altına sarkar. Yükseklik sabit: yüzdeye bağlı
       olsaydı kapsayıcının içinde durması gerekirdi, o da kaydırma
       taşması yaratıyordu. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1240px;
    /* -1: hâle TÜM içeriğin arkasında kalır. 0 iken konumlandırılmış öğe
       olarak akıştaki bölümlerin üstüne çiziliyor ve ürün kartlarının
       üzerine biniyordu. */
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.hero-ambient-img {
    /* <canvas> öğesi. Kendi çözünürlüğü küçüktür (≈160 px);
       tarayıcı onu yumuşatarak büyütür. Ek bir işlem yapılmaz. */
    display: block;
    width: 100%;
    height: 100%;
    /* Opaklık burada DEĞİL, bitmap'in alfa kanalında.
       CSS'te opacity bırakılsaydı öğe ayrı bir karışım katmanı olurdu;
       böylece katman tamamen sıradan bir resim: hiçbir ek işlem yok.
       Temaya göre değerler (koyu .75 / açık .88, mobilde .68 / .82)
       index.php içindeki pişirme kodunda uygulanır. */
}

@media (max-width: 768px) {
    .hero-ambient { height: 760px; }
}

/* ══════════════════════════════════════════════════════════════════════
   BAŞLIK ŞERİDİ — yüzey uyumu
   Şekil, konum, boyut ve efektlere DOKUNULMADI. Yalnızca sıradaki tek
   uyumsuz öğe hizaya getirildi: arama kutusu komşularından farklı köşe
   yarıçapı (10px) ve farklı zemin (opak) kullanıyordu; ikon butonları,
   dil hapı ve Kayıt Ol ise 8px + yarı saydam cam zemin.
   Ölçüm: hepsi 44px yüksekliğinde ve aynı çerçeve renginde — tek fark
   buydu, o da giderildi.
   ══════════════════════════════════════════════════════════════════════ */
.desktop-header .search-container {
    border-radius: 8px;
    background-color: var(--glass-bg);
}

/* ══════════════════════════════════════════════════════════════════════
   VARSAYILAN MENÜ GÖRÜNÜMÜ — sade şerit
   Her başlığın altındaki parlayan mavi çizgiler kaldırıldı; ikon + yazı
   + ok'tan oluşan dingin bir sıra bırakıldı.

   TÜM kurallar `:not(.menu-v2)` ile sınırlı. 2. Görünüm bu bloktan
   hiçbir şekilde etkilenmez — ortak markup kullanıldığı için sınırlama
   şart, kaldırılmamalı.
   ══════════════════════════════════════════════════════════════════════ */

/* Şeridin kendisi: öğeler alt kenara yapışıktı (üstte 2px, altta 0px).
   Simetrik nefes payı verilir, öğeler dikeyde ortalanır.
   header.php'deki `padding-top: 2px !important` kuralını ezmek için
   !important şart. */
.header-nav:not(.menu-v2) {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}
.header-nav:not(.menu-v2) .nav-links { align-items: center; }

/* Alt çizgi ve parıltısı yok */
.header-nav:not(.menu-v2) .nav-item-modern::after { display: none !important; }

.header-nav:not(.menu-v2) .nav-item-modern {
    padding: 7px 12px;
    border-radius: 10px;
    /* Zıplama yerine yalnızca zemin değişimi */
    transition: background .18s ease, color .18s ease;
}
.header-nav:not(.menu-v2) .nav-item-modern:hover {
    background: var(--glass-bg, rgba(255,255,255,.06));
    transform: none;
}

/* Yazı: nötr tema rengi, üzerine gelince belirginleşir.
   Her kategori kendi tema rengini satır içi `style="color:var(--nav-item-color)"`
   ile basıyordu; menüde renk cümbüşü oluşuyor ve mavi çok cırtlak duruyordu.
   Satır içi stili ezmek için !important şart. Kategori renkleri kaybolmuyor —
   kart, rozet ve kategori sayfasında kullanılmaya devam ediyor. */
.header-nav:not(.menu-v2) .nav-text-modern {
    color: var(--text-color) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    opacity: .82;
}
.header-nav:not(.menu-v2) .nav-item-modern:hover .nav-text-modern { opacity: 1; }

/* İkonlar yuvarlak köşeli küçük karo */
.header-nav:not(.menu-v2) .nav-icon-modern {
    height: 22px;
    width: 22px;
    object-fit: cover;
    border-radius: 6px;
}
.header-nav:not(.menu-v2) .nav-item-modern:hover .nav-icon-modern {
    transform: none;   /* döndürme/büyütme yok */
}

/* Açılır menü oku silik */
.header-nav:not(.menu-v2) .nav-dd-caret { opacity: .45; }
.header-nav:not(.menu-v2) .nav-item-modern:hover .nav-dd-caret { opacity: .8; }

/* "Tüm Kategoriler": dolu turuncu yerine yumuşak renk zeminli düğme */
.header-nav:not(.menu-v2) .btn-categories {
    /* header.php içindeki `background: var(--primary-orange) !important`
       kuralını ezmek için !important şart; aksi halde dolu zemin kalıp
       yazı rengiyle aynı renge düşüyor ve buton okunmaz oluyor.

       Düz tek renk yerine çok hafif bir üstten-alta geçiş + içeriden ince
       ışık çizgisi: düğme yüzeyi düz bir lekeye benzemiyor, hafif kabartma
       hissi veriyor. */
    background: linear-gradient(180deg,
                rgba(var(--primary-blue-rgb), .20) 0%,
                rgba(var(--primary-blue-rgb), .11) 100%) !important;
    color: var(--primary-blue) !important;
    border: 1px solid rgba(var(--primary-blue-rgb), .34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
                0 1px 2px rgba(0, 0, 0, .22) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 9px 17px;
    border-radius: 11px;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.header-nav:not(.menu-v2) .btn-categories:hover {
    background: linear-gradient(180deg,
                rgba(var(--primary-blue-rgb), .30) 0%,
                rgba(var(--primary-blue-rgb), .18) 100%) !important;
    border-color: rgba(var(--primary-blue-rgb), .52) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10),
                0 2px 8px rgba(var(--primary-blue-rgb), .22) !important;
    transform: none;
}
.header-nav:not(.menu-v2) .btn-categories:active {
    background: rgba(var(--primary-blue-rgb), .26) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18) !important;
}
/* İkon yazıyla aynı renkte ve bir tık küçük — yazı öne çıksın */
.header-nav:not(.menu-v2) .btn-categories svg {
    width: 16px; height: 16px;
    opacity: .95;
}

.nav-icon-modern {
    height: 18px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item-modern:hover .nav-icon-modern {
    transform: scale(1.15) rotate(-3deg);
}

.nav-text-modern {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-color);
    opacity: 0.85;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.nav-item-modern:hover .nav-text-modern {
    opacity: 1;
    color: var(--primary-blue);
}

.btn-categories {
    background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-orange) 100%);
    border: none;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 18px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 12px;
    position: relative;
    box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.25);
}

.btn-categories::after {
    display: none;
}

.btn-categories svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.btn-categories:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.4);
    filter: brightness(1.1);
}

.nav-item {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    position: relative;
    padding: 6px 4px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap;
}

.nav-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.nav-item-icon {
    height: 24px !important;
    width: auto !important;
    object-fit: contain;
    flex-shrink: 0;
}

.nav-item:hover {
    color: var(--text-color) !important;
}

.nav-item-icon {
    height: 24px !important;
    width: auto !important;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.nav-item:hover .nav-item-icon {
    transform: translateY(-2px);
}

/* Hero Section Styling */
.hero-section {
    margin-top: 30px;
    margin-bottom: 40px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 16px;
    height: 480px;
}

.hero-main {
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.main-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
    z-index: 1;
}

.main-slide.active {
    opacity: 1;
    pointer-events: all;
    z-index: 10;
}

.hero-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    height: 100%;
}

.hero-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.hero-card:hover {
    transform: scale(1.005);
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    z-index: 2;
}

.card-content {
    max-width: 650px;
    text-align: left;
}

.slider-badge {
    display: inline-block;
    padding: 6px 18px;
    border: 2px solid var(--primary-blue);
    border-radius: 50px;
    color: white;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(4px);
}

.hero-main .card-title {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 15px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -1px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.hero-main .card-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    max-width: 500px;
    line-height: 1.6;
    font-weight: 500;
}

.slider-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-blue);
    color: white;
    padding: 14px 36px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    box-shadow: 0 10px 25px rgba(var(--primary-blue-rgb), 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255,255,255,0.1);
}

.slider-action-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 35px rgba(var(--primary-blue-rgb), 0.5);
    filter: brightness(1.1);
}

/* PC görünümde slider butonu sol-alt köşeye sabitlenir */
@media (min-width: 1025px) {
    .hero-main .slider-action-btn {
        position: absolute;
        bottom: 40px;
        left: 60px;
        z-index: 5;
    }
}

/* Hero Section Mobile Optimization */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        height: auto;
    }
    .hero-main {
        height: 420px;
        border-radius: 24px;
    }
    .hero-side {
        display: none;
    }
    .card-overlay {
        padding: 40px;
    }
    .hero-main .card-title {
        font-size: 36px;
    }
    .hero-main .card-content {
        position: static !important;
    }
    .hero-main .slider-action-btn,
    .hero-main .card-content .slider-action-btn {
        position: absolute !important;
        left: 32px !important;
        bottom: 32px !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        z-index: 10 !important;
    }
    .slider-progress-wrapper {
        right: 32px !important;
        bottom: 32px !important;
        left: auto !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        margin-top: 15px;
        margin-bottom: 25px;
    }
    .hero-main {
        height: 340px;
        border-radius: 20px;
    }
    .card-overlay {
        padding: 30px;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    }
    .slider-badge {
        padding: 4px 14px;
        font-size: 9px;
        margin-bottom: 12px;
    }
    .hero-main .card-title {
        font-size: 26px;
        max-width: 280px;
        margin-bottom: 10px;
        letter-spacing: -0.5px;
    }
    .hero-main .card-desc {
        font-size: 13.5px;
        margin-bottom: 22px;
        max-width: 240px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hero-main .card-content {
        position: static !important;
    }
    .hero-main .slider-action-btn {
        position: absolute !important;
        left: 14px !important;
        bottom: 14px !important;
        margin: 0 !important;
        z-index: 10 !important;
        padding: 9px 18px !important;
        font-size: 11px !important;
        letter-spacing: 0.3px !important;
        gap: 6px !important;
        display: inline-flex !important;
        border-radius: 54px !important;
    }
    .slider-progress-wrapper {
        bottom: 14px !important;
        right: 14px !important;
        left: auto !important;
        z-index: 10 !important;
    }
    .progress-circle {
        width: 32px !important;
        height: 32px !important;
    }
}

/* Side Card Styles */
.side-card .card-overlay {
    padding: 24px;
}

.side-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
}

.side-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

.btn-side-hero {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px 28px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    width: fit-content;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-side-hero:hover {
    background-color: white;
    color: black;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Slider Progress Animation */
.slider-progress-wrapper {
    position: absolute;
    bottom: 40px;
    right: 40px;  /* PC'de sağ-alt köşeye taşındı */
    left: auto;
}

.progress-circle {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 100%;
    max-height: 100%;
}

.circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 2.5;
}

.circle-progress {
    fill: none;
    stroke: white;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.05s linear;
}

.progress-text {
    position: absolute;
    font-size: 12px;
    font-weight: 700;
    color: white;
}

/* Featured Categories Styling */
.featured-section {
    margin-bottom: 50px;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.featured-card {
    position: relative;
    height: 85px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.featured-card:hover .char-img {
    transform: scale(1.1) translateX(-5px);
}

.logo-area {
    background: rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    z-index: 2;
}

.card-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.info-area {
    z-index: 2;
    flex: 1;
}

.info-area h4 {
    font-size: 13px;
    font-weight: 800;
    color: white;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-area p {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 140px;
}

.char-area {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 1;
}

.char-img {
    height: 140%;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
}

/* Card Specifics */
.pubg-card { background: var(--pubg-grad); }
.valorant-card { background: var(--valorant-grad); }
.lol-card { background: var(--lol-grad); }
.mlbb-card { background: var(--mlbb-grad); }

/* Mobile optimization */
@media (max-width: 1100px) {
    .featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .featured-grid {
        grid-template-columns: 1fr;
    }
}

/* Blog Section Styling */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.section-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}

.btn-text {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-blue) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(var(--primary-blue-rgb, 0, 133, 255), 0.05);
    padding: 8px 16px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-text:hover {
    background: var(--primary-blue);
    color: white !important;
    transform: translateX(5px);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

/* --- MODERN BLOG SECTION --- */
.blog-section {
    padding: 60px 0 30px 0;
    max-width: 100%;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 30px;
    max-width: 1300px;
}

.section-title {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--primary-blue);
    border-radius: 10px;
    display: inline-block;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin: 0 auto 10px;
    width: 100%;
    max-width: 1300px;
}

.blog-card {
    position: relative;
    height: 250px;
    border-radius: 24px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    border: none;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

.blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.blog-card:hover::before {
    transform: scale(1.1);
}

.blog-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    z-index: 1;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border-color: var(--primary-blue);
}

.blog-date {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 18px;
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    z-index: 2;
    transition: all 0.4s ease;
}

.blog-card:hover .blog-date {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.blog-card:hover .blog-date span {
    color: white !important;
}

.blog-date span:first-child {
    font-size: 20px;
    font-weight: 900;
    color: var(--primary-blue);
    line-height: 1;
}

.blog-date span:last-child {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-muted);
}

.blog-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px 20px;
    z-index: 2;
    text-align: center;
    transform: translateY(10px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-overlay {
    transform: translateY(0);
}

.blog-title {
    color: white;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary-blue);
    color: white !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
    padding: 8px 20px;
    border-radius: 100px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.blog-card:hover .read-more {
    opacity: 1;
    transform: translateY(0);
}

/* --- TRUST BENEFITS SECTION --- */
.trust-section {
    padding: 30px 0 60px 0;
    content-visibility: auto;
    contain-intrinsic-size: 1px 300px;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    width: 100%;
    margin: 0 auto;
    max-width: 1300px;
}

.trust-item {
    background: transparent;
    padding: 30px 20px;
    border-radius: 24px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
}

.trust-item:hover {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-color: var(--border-color);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.02);
}

.trust-icon {
    width: 60px;
    height: 60px;
    background: rgba(var(--primary-blue-rgb, 0, 133, 255), 0.1);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 22px;
    color: var(--primary-blue);
    transition: all 0.4s ease;
}

.trust-item:hover .trust-icon {
    transform: scale(1.1) rotate(5deg);
    background: var(--primary-blue);
    color: white;
}

.trust-info h4 {
    color: var(--text-color);
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trust-info p {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* --- MODERN MINIMALIST FOOTER --- */
.main-footer {
    background-color: var(--header-bg);
    padding: 80px 0 0 0;
    border-top: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 60px;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    margin-bottom: 12px;
}

.footer-logo-img {
    height: 45px;
    object-fit: contain;
}

.footer-tagline {
    color: var(--text-muted);
    /* <p> varsayılan üst boşluğu, logo ile arasını gereksiz açıyordu */
    margin-top: 0;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 280px;
}

.footer-social-minimal {
    display: flex;
    gap: 12px;
}

.footer-social-minimal a {
    width: 38px;
    height: 38px;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social-minimal a:hover {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(var(--primary-blue-rgb), 0.2);
}

.footer-title {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    position: relative;
    /* Başlık çubuğu kaldırıldı, başlık sola dayanır */
    padding-left: 0;
}


.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 8px;
}

.footer-links-list a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links-list a:hover {
    color: var(--primary-blue);
    transform: translateX(3px);
}

.contact-info-minimal {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-item-min {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 13px;
    transition: color 0.3s ease;
}

.contact-icon-min {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: 14px;
    flex-shrink: 0;
}

.contact-item-min span {
    line-height: 1.2;
}

a.contact-item-min:hover {
    color: var(--primary-blue);
}

/* Footer Bottom / Copyright */
.footer-copyright {
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}

.copyright-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.copyright-left p {
    color: var(--text-muted);
    font-size: 12px;
    margin: 0;
}

.copyright-left strong {
    color: var(--text-color);
}

.power-by {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.okyia-brand {
    font-size: 16px;
    color: var(--primary-orange);
    font-weight: 900;
    letter-spacing: -0.5px;
}

/* Final Responsiveness */
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .col-brand { grid-column: 1 / -1; text-align: center; margin-bottom: 20px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
        position: relative;
        width: 100% !important;
    }
    
    section, header, footer, .container, main {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .container {
        padding: 0 15px !important;
    }

    /* Prevent footer email overflow */
    .contact-item-min span {
        word-break: break-all !important;
        max-width: 100%;
        display: block;
    }

    .blog-grid { grid-template-columns: 1fr; }
    .footer-grid { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 10px; 
        text-align: left;
    }
    .col-brand { grid-column: 1 / -1; text-align: center; }
    .footer-title { font-size: 12px; margin-bottom: 12px; padding-left: 0; }
    .footer-links-list a { font-size: 11px; }
    .contact-item-min { gap: 6px; font-size: 11px; }
    .contact-icon-min { width: 18px; height: 18px; font-size: 9px; background: none; }
    .trust-grid { grid-template-columns: 1fr; }
    .footer-col h4 { margin-top: 20px; }
}

/* Showcase Section - Vitrin */
.showcase-section {
    --item-glow: var(--primary-blue);
    margin-bottom: 20px;
}

.showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.showcase-title-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.showcase-title-icon {
    width: 44px;
    height: 44px;
    background: rgba(var(--primary-blue-rgb), 0.08);
    border: 1.5px solid rgba(var(--primary-blue-rgb), 0.2);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 0 15px rgba(var(--primary-blue-rgb), 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.showcase-title-icon::after {
    content: '';
    position: absolute;
    left: -12px;
    top: 2.5%;
    height: 95%;
    width: 3px;
    background: var(--primary-blue);
    border-radius: 50px;
    box-shadow: 0 0 12px var(--primary-blue);
    animation: neonAura 3s infinite ease-in-out;
}

@keyframes neonAura {
    0%, 100% {
        opacity: 0.8;
        box-shadow: 0 0 10px var(--primary-blue);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 20px var(--primary-blue), 0 0 5px var(--primary-blue);
    }
}

.showcase-title-icon i {
    color: var(--primary-blue);
    filter: drop-shadow(0 0 8px var(--primary-blue));
}

.showcase-custom-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
    transition: transform 0.3s ease;
}

.showcase-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -0.5px;
}

.showcase-tabs {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.showcase-tab {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
}

.showcase-tab:hover {
    background: var(--input-bg);
    border-color: var(--primary-blue);
    transform: translateY(-2px);
}

.showcase-tab.active {
    background: linear-gradient(135deg, rgba(var(--primary-blue-rgb), 0.9) 0%, rgba(var(--primary-blue-rgb), 1) 100%);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 12px 30px rgba(var(--primary-blue-rgb), 0.3), 
                inset 0 0 10px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    overflow: hidden;
}

.showcase-tab.active::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shineEffect 4s infinite;
}

@keyframes shineEffect {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

.showcase-tab.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 20%;
    width: 60%;
    height: 4px;
    background: var(--primary-blue);
    border-radius: 20px;
    filter: blur(1px);
    box-shadow: 0 0 15px var(--primary-blue), 0 0 25px var(--primary-blue), 0 0 5px #fff;
    animation: breath 2.5s infinite ease-in-out;
}

@keyframes breath {
    0%, 100% { transform: scaleX(0.85); opacity: 0.5; filter: blur(2px); }
    50% { transform: scaleX(1); opacity: 1; filter: blur(1px); }
}

.search-container {
    flex: 1;
    max-width: 600px;
    background: var(--input-bg);
    border-radius: 10px;
    padding: 2px 15px;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.search-container:focus-within {
    background: var(--card-bg);
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(var(--primary-blue-rgb), 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.sticky-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
    opacity: 0.3;
}

.view-all-link {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.view-all-link:hover {
    background: var(--input-bg);
    border-color: var(--primary-orange);
}

/* Modern Product Card Grid - Optimized for Premium Look */
.product-grid-modern {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1400px) { .product-grid-modern { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { .product-grid-modern { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px) { .product-grid-modern { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 576px) { .product-grid-modern { grid-template-columns: repeat(2, 1fr); } }

/* Showcase Slider Responsive Mode */
.showcase-slider-pc, .showcase-slider-mobile {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.showcase-slider-pc::-webkit-scrollbar, .showcase-slider-mobile::-webkit-scrollbar { display: none; }

@media (min-width: 769px) {
    .showcase-slider-pc {
        display: flex !important;
        overflow-x: auto;
        overflow-y: visible;
        flex-wrap: nowrap !important;
        gap: 15px;
        padding: 8px 6px 16px 6px;
        margin: 0;
        scroll-snap-type: x mandatory;
    }
    .showcase-slider-pc .product-card-modern {
        flex: 0 0 214px !important;
        scroll-snap-align: start;
    }
    .hint-pc { display: flex !important; }
}

@media (max-width: 768px) {
    .showcase-slider-mobile {
        display: flex !important;
        overflow-x: auto;
        overflow-y: visible;
        flex-wrap: nowrap !important;
        gap: 15px;
        padding: 8px 6px 16px 6px;
        margin: 0;
        scroll-snap-type: x mandatory;
    }
    .showcase-slider-mobile .product-card-modern {
        flex: 0 0 165px !important;
        scroll-snap-align: start;
    }
    .hint-mobile { display: flex !important; }
}

.slider-hint {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 5px;
    margin-right: 5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.7;
}

.slider-hint i {
    font-size: 13px;
    color: var(--primary-blue);
    animation: hintSlide 1.5s infinite ease-in-out;
}

@keyframes hintSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}

.product-card-modern {
    background: var(--card-bg);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px !important;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.product-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13), 0 0 0 0.5px rgba(var(--primary-blue-rgb), 0.35);
    border-color: rgba(var(--primary-blue-rgb), 0.25);
    z-index: 5;
}

/* Butonun üzerine gelindiğinde kartın gölgesini sabit tutarak titremeyi engelle */
.product-card-modern:has(.btn-buy-modern:hover) {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13), 0 0 0 0.5px rgba(var(--primary-blue-rgb), 0.35);
}

.product-badge {
    position: relative;
    background: #e11d48;
    color: white;
    height: 26px;
    display: flex;
    align-items: center;
    z-index: 20;
    overflow: hidden;
    white-space: nowrap;
}


.badge-marquee {
    display: inline-flex;
    animation: marquee-anim 10s linear infinite;
    gap: 0;
    padding-left: 12px; /* sol kenara yapışmasın */
}

@keyframes marquee-anim {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.badge-item {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-decoration: none !important;
    padding: 0 10px; /* item'lar arası boşluk */
}

.fixed-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

.badge-fixed-text {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(180deg, #FFFFFF 35%, rgba(255, 255, 255, 0.65) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
    position: relative;
    z-index: 2;
    display: block;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.product-image-area {
    position: relative;
    width: 100%;
    padding: 0;
    background: var(--card-bg, #0f1117);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-char-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: transform 0.4s ease;
    display: block;
}

.product-card-modern:hover .product-char-img {
    transform: scale(1.04);
    opacity: 1;
}

.product-char-overlay-text {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 4px 12px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5);
    pointer-events: none;
    line-height: 0.9;
    z-index: 10;
    padding: 0 5px;
}

.product-info-area {
    padding: 14px 14px 14px;
    background: transparent;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-top: none;
}

.product-name-small {
    font-size: 11px;
    color: var(--text-color);
    font-weight: 600;
    /* <p> etiketinin varsayılan üst boşluğu kaldırıldı, metin sola yaslandı */
    margin-top: 0;
    margin-bottom: 6px;
    text-align: left;
    /* Tek satırlık başlıklarda fiyat bloğu bir satır yukarı kayıyordu.
       Başlığa her zaman iki satırlık yer ayrılır (satır yüksekliği 1.2 → 2.4em),
       böylece tüm kartlarda fiyat ve buton aynı hizada başlar. */
    /* Başlık kırpılmaz, ad tamamen görünür. Uzun ad kartı uzatsa bile
       fiyat kutusu ve buton hizada kalır: kutuda margin-top:auto var,
       kart yüksekliği de ızgarada eşitlendiği için ikisi de alta yaslanır. */
    min-height: 2.4em;
    height: auto;
    text-transform: uppercase;
    width: 100%;
    text-decoration: none !important;
    word-wrap: break-word;
    line-height: 1.25;
}

@media (max-width: 768px) {
    .product-info-area {
        padding: 8px 8px 6px;
    }
    .product-name-small {
        font-size: 10px;
        margin-top: 0;
        margin-bottom: 3px;
    }
    .product-info-row-v2 {
        margin-bottom: 5px;
        min-height: unset;
        gap: 3px 2px;
    }
    .current-price-v2 {
        font-size: 14px;
    }
    .btn-buy-modern {
        padding: 6px 8px;
        font-size: 13px;
    }
}

.btn-buy-modern {
    background: var(--primary-blue);
    color: #ffffff !important;
    border: none;
    padding: 9px 16px;
    border-radius: 8px !important;
    width: 100%;
    font-weight: 600;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    text-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter 0.18s ease;
    box-shadow: none;
    margin-top: auto;
    cursor: pointer;
}

/* Sepet ikonu yazıdan bir tık büyük dursun */
.btn-buy-modern i,
.listing-buy-btn i {
    font-size: 17px;
    line-height: 1;
}

.btn-buy-modern:hover {
    filter: brightness(1.08);
    transform: none;
    box-shadow: none;
}

.btn-buy-modern:active {
    filter: brightness(0.94);
    transform: none;
    box-shadow: none;
}

.tab-pane-modern:not(.active) { display: none !important; }
.tab-pane-modern.active { 
    animation: fadeInGrid 0.4s ease;
}

@keyframes fadeInGrid {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Category Page Layout */
.category-grid-container {
    display: grid;
    min-width: 0;
    max-width: 100%;
    grid-template-areas:
        "sidebar main"
        "comments main";
    grid-template-columns: 320px 1fr;
    grid-auto-rows: min-content;
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 60px;
}

.category-sidebar { grid-area: sidebar; min-width: 0; }
.category-main { grid-area: main; min-width: 0; }
.category-comments-section { grid-area: comments; }

@media (max-width: 992px) {
    .category-grid-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "sidebar"
            "main"
            "comments";
        gap: 10px;
        margin-top: 14px;
        margin-bottom: 24px;
    }
}

/* Category Sidebar Card */
.category-sidebar-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 25px;
}

.category-card-image-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
}

.category-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-card-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 30px;
    text-align: center;
}

.category-card-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.category-card-title {
    font-size: 28px;
    font-weight: 900;
    color: #fff; /* Always white on dark image overlay */
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Listing Filter Bar */
.listing-filter-bar {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    position: relative;
    z-index: 1;
}

/* Kategori Duyuru Bandı */
/* ── Category Announcement ─────────────────────────────── */
.cat-announcement {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    margin-bottom: 22px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    animation: annSlideIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.cat-ann-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}
.cat-ann-text {
    flex: 1;
    font-size: inherit;
}

/* Marquee */
.cat-announcement.ann-scroll {
    padding-right: 12px;
}
.cat-ann-marquee-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-width: 0;
    max-width: 100%;
    /* Gradient fade edges */
    -webkit-mask-image: linear-gradient(to right, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
}
.cat-ann-marquee {
    display: inline-flex;
    gap: 48px;
    white-space: nowrap;
    will-change: transform;
}
.cat-ann-marquee span { flex-shrink: 0; }

/* ── Text Effects ───────────────── */

/* Shine sweep over background */
.ann-effect-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
    animation: annShine 3s infinite;
}
@keyframes annShine {
    0%   { transform: translateX(-100%); }
    40%  { transform: translateX(200%); }
    100% { transform: translateX(200%); }
}

/* Neon pulse — hem statik hem akan yazı */
.ann-effect-neon .cat-ann-text,
.ann-effect-neon .cat-ann-marquee span {
    animation: annNeon 1.6s ease-in-out infinite alternate;
}
@keyframes annNeon {
    from { text-shadow: 0 0 4px var(--ann-color,#fff), 0 0 10px var(--ann-color,#fff); opacity:.85; }
    to   { text-shadow: 0 0 12px var(--ann-color,#fff), 0 0 30px var(--ann-color,#fff), 0 0 50px var(--ann-color,#fff); opacity:1; }
}

/* Rainbow cycling text */
.ann-effect-rainbow .cat-ann-text,
.ann-effect-rainbow .cat-ann-marquee span {
    background: linear-gradient(90deg, #ff0080, var(--primary-orange), #ffe100, #00e676, #00b0ff, #b300ff, #ff0080);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: annRainbow 3s linear infinite;
    display: inline-block;
}
@keyframes annRainbow {
    0%   { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* Glow box pulse */
.ann-effect-glow {
    animation: annGlowBox 2.2s ease-in-out infinite alternate;
}
@keyframes annGlowBox {
    from { box-shadow: 0 4px 20px rgba(0,0,0,.18); }
    to   { box-shadow: 0 4px 40px rgba(255,255,255,.35), 0 0 70px rgba(255,255,255,.15); }
}

/* Color wave — background gradient shift */
.ann-effect-wave {
    background-size: 300% 100% !important;
    animation: annWave 3s linear infinite;
}
@keyframes annWave {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Bounce icon */
.ann-effect-bounce .cat-ann-icon {
    animation: annBounce 0.8s ease-in-out infinite;
}
@keyframes annBounce {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
}

/* Pulse — tüm banner nabız gibi atar */
.ann-effect-pulse {
    animation: annPulse 1.2s ease-in-out infinite;
}
@keyframes annPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .85; transform: scale(1.01); }
}

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

.filter-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.filter-category-logo {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.filter-category-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.filter-category-logo i {
    font-size: 20px;
    color: var(--primary-blue);
}

.filter-category-name {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
}

.filter-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: flex-end;
}

.filter-search-wrap {
    position: relative;
    width: 100%;
    max-width: 280px;
}

.filter-search-wrap input {
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 15px 10px 40px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: all 0.2s;
}

.filter-search-wrap input:focus {
    border-color: var(--primary-blue);
    background: rgba(255, 255, 255, 0.04);
}

.filter-search-wrap i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}

.filter-select-wrap {
    position: relative;
    min-width: 180px;
}

.custom-select-trigger {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
}

.custom-select-trigger:hover {
    border-color: var(--text-muted);
}

.selected-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
}

.custom-select-trigger i {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.filter-select-wrap.active .custom-select-trigger i {
    transform: rotate(180deg);
}

.custom-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #111827;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    z-index: 100;
    display: none;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

.filter-select-wrap.active .custom-options {
    display: block;
}

.custom-option {
    padding: 12px 15px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.custom-option:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
}

@media (max-width: 1200px) {
    .listing-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .filter-left {
        gap: 10px;
    }
    .filter-right {
        flex-wrap: wrap;
        gap: 8px;
    }
    .filter-search-wrap {
        max-width: none;
        flex: 1 1 100%;
    }
    .filter-select-wrap {
        flex: 1;
        min-width: 120px;
    }
}

/* ── Mobil Kategori Sayfası ─────────────────────────── */
@media (max-width: 768px) {
    /* Filter bar kompakt */
    .listing-filter-bar {
        padding: 12px 14px;
        border-radius: 14px;
        gap: 10px;
        margin-bottom: 10px;
    }
    .filter-left {
        gap: 8px;
    }
    .filter-category-logo {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .filter-category-logo img {
        width: 32px;
        height: 32px;
    }
    .filter-category-name {
        font-size: 15px;
    }
    .filter-search-wrap input {
        font-size: 13px;
        padding: 8px 12px 8px 34px;
    }
    .filter-select-wrap {
        min-width: 0;
        flex: 1;
    }
    .custom-select-trigger {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Duyuru bandı mobil */
    .cat-announcement {
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 13px;
        gap: 8px;
        margin-bottom: 14px;
    }
    .cat-ann-icon {
        font-size: 16px !important;
    }
    .cat-ann-marquee-wrap {
        -webkit-mask-image: linear-gradient(to right, transparent 0px, black 10px, black calc(100% - 10px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0px, black 10px, black calc(100% - 10px), transparent 100%);
    }
}

@media (max-width: 480px) {
    /* Filter bar tam mobil */
    .listing-filter-bar {
        padding: 10px 12px;
        border-radius: 12px;
    }
    .filter-right {
        gap: 6px;
    }
    .filter-search-wrap {
        flex: 1 1 100%;
    }
    .filter-select-wrap {
        min-width: 0;
        flex: 1;
    }
    .custom-select-trigger {
        font-size: 11px;
        padding: 7px 8px;
    }
    .custom-select-trigger .fa-chevron-down {
        font-size: 9px;
    }
    /* Duyuru tek satır kısa */
    .cat-announcement {
        padding: 9px 12px;
        font-size: 12.5px;
        border-radius: 8px;
    }
}

.category-card-info {
    padding: 20px 25px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    border-top: 1px solid var(--border-color);
}
@media (max-width: 992px) {
    /* Mobilde sidebar yatay düzen */
    .category-sidebar-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 14px;
        margin-bottom: 0;
    }
    .category-card-image-wrap {
        width: 120px;
        min-width: 120px;
        aspect-ratio: 1 / 1;
        border-radius: 12px 0 0 12px;
    }
    .category-card-overlay {
        padding: 12px;
    }
    .category-card-title {
        font-size: 13px;
        margin-bottom: 0;
    }
    .category-card-info {
        padding: 14px 16px;
        font-size: 12px;
        border-top: none;
        border-left: 1px solid var(--border-color);
        flex: 1;
    }
}

/* Category Comments */
.category-comments-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    margin-top: 0;
}

.comments-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-empty-msg {
    color: #64748b;
    font-size: 14px;
}

/* Subcategory Grid & Premium Vertical Cards */
.subcategory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

@media (max-width: 1200px) { .subcategory-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .subcategory-grid { grid-template-columns: repeat(2, 1fr); } }

.category-item-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    aspect-ratio: 1 / 1.35;
    display: flex;
    flex-direction: column;
}

.category-item-card:hover {
    border-color: var(--primary-orange);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px -10px rgba(255,152,0,0.2);
}

.item-card-image-area {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(255,152,0,0.1) 0%, transparent 70%);
}

.item-card-char-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 0.5s ease;
}

.category-item-card:hover .item-card-char-img {
    transform: scale(1.1);
    opacity: 1;
}

.item-card-overlay-text {
    position: absolute;
    bottom: 45px;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 4px 12px rgba(0,0,0,0.9);
    padding: 0 5px;
    opacity: 0.85;
}

.item-card-footer {
    padding: 12px;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    text-align: center;
    z-index: 10;
}

.item-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    word-wrap: break-word;
}

/* Listing Product Card - Premium Vertical Style */
.listing-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

@media (max-width: 1200px) { .listing-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .listing-product-grid { grid-template-columns: repeat(2, 1fr); } }

/* List layout */
/* ── List Layout ─────────────────────────── */
.listing-product-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.listing-list-card {
    display: block;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.listing-list-card:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 4px 20px rgba(var(--primary-blue-rgb), 0.15);
    transform: translateY(-1px);
}

/* Frame header row (badge + bogo) */
.list-frame-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 28px;
}
.list-frame-bogo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .6px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
    text-transform: uppercase;
    border-radius: 0 0 0 14px;
    box-shadow: -2px 2px 8px rgba(0,85,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.18);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    white-space: nowrap;
    margin-left: auto;
}
.list-frame-bogo i { font-size: 12px; }
@media (max-width: 480px) {
    .list-frame-bogo { font-size: 10px; padding: 0 10px; gap: 4px; }
    .list-frame-bogo i { font-size: 10px; }
}

/* Frame badge pill */
.list-frame-badge {
    display: flex;
    align-items: center;
    width: 35%;
    padding: 0;
    height: 28px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    overflow: hidden;
    box-shadow: 3px 3px 10px rgba(0,0,0,.3);
    position: relative;
    border-radius: 0 20px 20px 0;
}
.list-bogo-pill {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 4px;
    box-shadow: 0 2px 8px rgba(var(--primary-blue-rgb), 0.3);
}
.list-badge-text-fixed {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 14px;
}
.list-badge-marquee {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: listBadgeScroll 8s linear infinite;
    will-change: transform;
}
.list-badge-marquee span { display: inline-block; }
@keyframes listBadgeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Inner row: image + body */
.list-card-row.has-badge-offset {
    padding-top: 10px;
}
.list-card-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
}
.list-card-image-wrap {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 8px;
    overflow: hidden;
    background: #050c1e;
    position: relative;
}
.list-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Body: info + actions side-by-side */
.list-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.list-card-info {
    flex: 1;
    min-width: 0;
}
.list-card-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}
.list-card-price {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.list-card-actions {
    flex-shrink: 0;
}
.list-card-actions .listing-buy-btn {
    white-space: nowrap;
    padding: 10px 28px;
    font-size: 15px;
}

/* Mobile */
@media (max-width: 540px) {
    .list-frame-badge { width: 60%; }
    .list-card-row { gap: 10px; padding: 10px 12px; }
    .list-card-image-wrap { width: 62px; height: 62px; }
    .list-card-body { flex-direction: column; align-items: stretch; gap: 8px; }
    .list-card-actions .listing-buy-btn { width: 100%; justify-content: center; display: flex; }
    .list-card-title { font-size: 13px; white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}

.listing-product-card {
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.listing-product-card:hover {
    /* Kart büyümesin — yalnızca yükselsin (scale kaldırıldı) */
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(var(--primary-blue-rgb),0.2);
    border-color: rgba(var(--primary-blue-rgb),0.4);
}

/* Badge Header */
.listing-card-badge {
    background: #ff0000;
    color: white;
    padding: 2px 0; /* Ultra-slim padding to match homepage */
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 2px solid rgba(0,0,0,0.1);
}

.listing-card-badge.orange { background: #ff9900; }

/* Image Area with Large Overlay Text */
.listing-card-image-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #050c1e;
    overflow: hidden;
}

.listing-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: transform 0.5s ease;
}

.listing-product-card:hover .listing-card-img { transform: scale(1.08); }

.listing-card-overlay-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
    color: white;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 0 4px 15px rgba(0,0,0,0.9);
    padding: 0 10px;
}

/* Info & Action Area */
.listing-card-info {
    padding: 8px 10px 10px;
    text-align: center;
    background: var(--card-bg);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.03);
}

[data-theme="light"] .listing-card-info { background: #f8fafc; }

.listing-product-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color);
    /* <h3> etiketinin varsayılan üst boşluğu kaldırıldı, metin sola yaslandı */
    margin-top: 0;
    margin-bottom: 6px;
    text-align: left;
    text-transform: uppercase;
    height: auto;
    /* Tek satırlık başlıklarda fiyat bloğu yukarı kaymasın diye
       başlığa her zaman iki satırlık yer ayrılır. */
    min-height: 2.4em;
    display: block;
    word-wrap: break-word;
    line-height: 1.3;
    width: 100%;
}

.listing-card-prices { margin-bottom: 8px; width: 100%; text-align: center; }
.listing-old-price { color: var(--text-muted); text-decoration: line-through; font-size: 11px; font-weight: 500; margin-bottom: 2px; display: block; opacity: 0.5; }
.listing-new-price { color: #10b981; font-size: 18px; font-weight: 800; }
[data-theme="light"] .listing-new-price { color: #059669; }

/* Qty Selector UI */
.listing-qty-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border-radius: 6px;
    margin-bottom: 12px;
    height: 38px;
    overflow: hidden;
}

[data-theme="light"] .listing-qty-wrap { background: #e2e8f0; }

.qty-btn {
    width: 35px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--primary-blue);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.qty-btn:hover { background: rgba(var(--primary-blue-rgb), 0.1); }
.qty-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    color: white;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}
[data-theme="light"] .qty-input { color: #000; }

/* Buy Button */
.listing-buy-btn {
    background: var(--buy-button, #10b981);
    color: var(--buy-text, #fff);
    width: 100%;
    border: none;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: auto;
}

.listing-buy-btn:hover {
    filter: brightness(1.08);
}

.hidden { display: none !important; }

/* Product Detail Page Styles */
.product-detail-area {
    margin: 40px auto 80px;
    max-width: 1400px;
    padding: 0 20px;
}

.breadcrumb-nav {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    margin-bottom: 30px;
    color: var(--text-muted);
}

.breadcrumb-nav a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-nav a:hover {
    color: var(--primary-orange);
}

.product-detail-grid {
    display: flex;
    gap: 40px;
    width: 100%;
    align-items: flex-start;
}

.product-detail-main {
    flex: 1;
}

.product-sidebar {
    width: 380px;
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .product-detail-grid { flex-direction: column; }
    .product-sidebar { width: 100%; }
}

.product-main-view {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 35px;
    display: flex;
    gap: 40px;
    box-shadow: var(--shadow);
    align-items: flex-start;
}

.view-left-visual {
    width: 280px;
    flex-shrink: 0;
}

.view-right-info {
    flex: 1;
}

@media (max-width: 992px) {
    .product-main-view { flex-direction: column; padding: 20px; }
    .view-left-visual { width: 100%; }
}

/* Left Visual Area */
.view-left-visual {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.view-img-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    position: relative;
}

.view-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.trust-badges-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trust-badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
}

[data-theme="light"] .trust-badge-item { background: #f1f5f9; }

.trust-badge-item i {
    width: 24px;
    color: var(--primary-blue);
    font-size: 16px;
}

/* Right Info Area Overhaul */
.view-right-info {
    display: flex;
    flex-direction: column;
}

.product-info-header h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 8px;
}

.product-rating-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.stars {
    color: #f59e0b;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating-val {
    font-weight: 900;
    color: var(--text-color);
    margin-left: 5px;
}

.rating-count {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

/* Urgent Insight Badge */
.urgent-insight-box {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    width: fit-content;
}

.urgent-insight-box i {
    color: var(--primary-blue);
    font-size: 14px;
}

.urgent-insight-box span {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.urgent-insight-box strong {
    color: #f43f5e;
}

/* Marketplace Service Grid Refinement */
.marketplace-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 35px;
}

.m-service-item {
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
}

.m-service-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-blue);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px -5px rgba(37, 99, 235, 0.2);
}

.m-service-icon {
    width: 38px;
    height: 38px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: 16px;
    transition: all 0.3s ease;
}

.m-service-item:hover .m-service-icon {
    background: var(--primary-blue);
    color: #fff;
    transform: scale(1.05);
}

.m-service-info span {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2px;
    opacity: 0.5;
}

.m-service-info h6 {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0;
}

/* Horizontal Action Bar Refinement */
.horizontal-action-bar {
    background: #111111;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 11px;
    padding: 8px;
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
}

.action-price-box {
    flex: 1;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
}

.action-price-box i {
    color: var(--primary-blue);
    font-size: 18px;
}

.action-price-box .prices {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-price-box .new-price {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-blue);
}

.action-price-box .old-price {
    font-size: 12px;
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.5;
}

.action-qty-selector {
    display: flex;
    align-items: center;
    background: #000;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}

.action-qty-selector button {
    width: 36px;
    height: 48px;
    background: none;
    border: none;
    color: var(--primary-blue);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.action-qty-selector button:hover {
    background: rgba(255,255,255,0.05);
}

.action-qty-selector input {
    width: 44px;
    background: rgba(255,255,255,0.03);
    border: none;
    border-left: 1px solid rgba(255,255,255,0.08);
    border-right: 1px solid rgba(255,255,255,0.08);
    height: 48px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.action-buy-btn {
    background: var(--primary-blue);
    color: white;
    border: none;
    height: 48px;
    padding: 0 30px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap;
}

.action-buy-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* Light Mode Overrides for Action Bar */
[data-theme="light"] .horizontal-action-bar {
    background: #f1f5f9;
    border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .action-price-box {
    background: rgba(0,0,0,0.02);
}

[data-theme="light"] .action-qty-selector {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .action-qty-selector input {
    background: transparent;
    color: #1e293b;
    border-left-color: rgba(0,0,0,0.08);
    border-right-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .action-qty-selector button:hover {
    background: #f8fafc;
}

/* Sidebar Overhaul for Reference Match */
.product-sidebar {
    width: 320px; /* Slimmer like in screenshot */
    flex-shrink: 0;
}

.sidebar-box {
    background: #111111;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 25px;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-title::after {
    content: '8 Ürün';
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.5;
}

.similar-item {
    display: flex;
    gap: 12px;
    text-decoration: none;
    padding: 10px;
    border-radius: 9px;
    transition: 0.2s;
    background: rgba(255,255,255,0.01);
    margin-bottom: 10px;
    align-items: center;
}

.similar-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
}

.similar-img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
}

.similar-info h5 {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 4px;
    line-height: 1.3;
    text-transform: uppercase;
}

.similar-info .price-row {
    font-size: 12px;
    font-weight: 900;
}

.similar-info .new-price {
    color: #3b82f6;
    margin-right: 5px;
}

.similar-info .old-price {
    color: #f43f5e;
    text-decoration: line-through;
    opacity: 0.6;
    font-size: 9px;
}

/* Tabs System */
.product-detail-tabs {
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
}

.tabs-header {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.tab-btn {
    background: none;
    border: none;
    padding: 25px 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: 0.3s;
}

.tab-btn.active {
    color: var(--text-color);
}

/* Mobile Responsiveness Overhaul */
@media (max-width: 768px) {
    .product-detail-area {
        margin-top: 20px;
        padding: 0 12px;
    }

    .product-detail-grid {
        flex-direction: column;
        gap: 20px;
    }

    .product-sidebar {
        width: 100% !important;
    }

    .breadcrumb-nav {
        margin-bottom: 15px;
        font-size: 9px;
        gap: 6px;
        white-space: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
        display: flex;
        align-items: center;
    }

    .breadcrumb-nav a, .breadcrumb-nav span {
        flex-shrink: 0;
    }

    .product-info-header h1 {
        font-size: 22px;
        margin-bottom: 8px;
        word-wrap: break-word;
    }

    .product-rating-row {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 12px;
    }

    .urgent-insight-box {
        width: 100%;
        padding: 10px 12px;
        font-size: 11px;
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
        box-sizing: border-box;
    }

    .urgent-insight-box span {
        word-break: break-word;
    }

    .marketplace-service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 25px;
    }

    .m-service-item {
        padding: 8px 10px;
        gap: 8px;
        min-width: 0; /* Allow shrinking */
    }

    .m-service-info {
        min-width: 0;
    }

    .m-service-info h6 {
        font-size: 11px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
        line-height: 1.25;
    }

    .m-service-info span {
        white-space: normal;
        word-break: break-word;
        line-height: 1.2;
    }

    .m-service-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .horizontal-action-bar {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        background: transparent;
        border: none;
        padding: 0;
    }

    .action-price-box {
        flex: 1;
        background: #111111;
        border: 1px solid rgba(255,255,255,0.05);
        margin-bottom: 0;
        height: 50px;
        padding: 0 15px;
    }

    .action-qty-selector {
        width: 120px;
        background: #111111;
        margin-bottom: 0;
        height: 50px;
    }

    .action-buy-btn {
        width: 100%;
        justify-content: center;
        height: 54px;
        font-size: 16px;
        order: 3;
    }

    .product-detail-tabs {
        margin-top: 40px;
    }

    .tabs-header {
        gap: 20px;
    }

    .tab-btn {
        font-size: 14px;
        padding: 15px 0;
    }

    .tabs-content {
        padding: 20px;
        border-radius: 16px;
    }

    .rich-content {
        font-size: 14px;
        line-height: 1.6;
    }

    .similar-img {
        width: 60px;
        height: 60px;
    }

    .sidebar-similar-box {
        padding: 20px 0 !important;
    }

    .sidebar-similar-box .sidebar-title {
        padding: 0 15px;
        margin-bottom: 20px;
    }

    .similar-list-scroll {
        display: flex !important;
        overflow-x: auto !important;
        gap: 12px !important;
        padding: 0 15px 15px 15px !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .similar-list-scroll::-webkit-scrollbar {
        display: none;
    }

    .similar-item {
        min-width: 144px !important;
        max-width: 144px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 14px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 16px !important;
        scroll-snap-align: start;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }

    .similar-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/1 !important;
        margin-bottom: 14px !important;
        border-radius: 14px !important;
    }

    .similar-info h5 {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.4 !important;
        height: 2.8em !important;   /* tam 2 satır (2 × 1.4) */
        /* overflow: visible idi; line-clamp çalışmadığı için 3. satır kutudan
           taşıp fiyatın üzerine biniyordu. */
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        margin-bottom: 8px !important;
    }

    .similar-info .price-row {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .similar-info .new-price {
        font-size: 13px !important;
        font-weight: 900 !important;
        color: var(--primary-blue) !important;
    }

    .similar-info .old-price {
        /* 14px idi: indirimli fiyattan (13px) büyük görünüyordu */
        font-size: 11px !important;
        opacity: 0.5;
        text-decoration: line-through;
    }

    .hide-on-mobile {
        display: none !important;
    }
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--text-color);
}

.tabs-content {
    padding: 40px;
    background: var(--card-bg, #0f172a);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    margin-top: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.rich-content {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
}

.rich-content b { color: var(--text-color); }

.comments-placeholder {
    padding: 60px;
    text-align: center;
    color: var(--text-muted);
}

.comments-placeholder i {
    font-size: 40px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.feedback-field {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px 20px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    outline: none;
    transition: all 0.3s;
}

.feedback-field:focus {
    border-color: var(--primary-blue);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.btn-quick-buy {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 18px;
    border-radius: 16px;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4);
}

.btn-quick-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.6);
    filter: brightness(1.1);
}

.qty-control {
    display: flex;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    height: 44px;
    width: 140px;
    overflow: hidden;
}

.action-btns-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.btn-add-cart {
    background: #2563eb;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-add-cart:hover { background: #1d4ed8; }

.btn-quick-buy {
    background: linear-gradient(90deg, #059669 0%, #10b981 100%);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 14px;
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 20px -5px rgba(16, 185, 129, 0.4);
    width: 100%;
    margin-top: 15px;
}

.btn-quick-buy:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(16, 185, 129, 0.6); }

/* Sidebar Components */
.sidebar-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i { color: var(--primary-blue); }

.similar-prod-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.similar-item {
    display: flex;
    gap: 12px;
    text-decoration: none;
    transition: 0.2s;
    padding: 8px;
    border-radius: 8px;
}

.similar-item:hover { background: rgba(255, 255, 255, 0.03); }
[data-theme="light"] .similar-item:hover { background: #f1f5f9; }

.similar-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
}

/* Mobile Adjustments for Product Page */
@media (max-width: 768px) {
    .product-detail-area {
        padding: 0 15px;
        margin-top: 20px;
    }

    .breadcrumb-nav {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 11px;
    }

    .product-info-header h1 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .product-detail-grid {
        gap: 20px;
    }

    .view-img-box {
        aspect-ratio: 1 / 1; /* Slightly squarer on mobile to save vertical space */
    }

    .product-action-panel {
        padding: 20px;
        border-radius: 16px;
        margin-top: 30px;
    }

    .price-val {
        font-size: 22px;
    }

    .trust-badges-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .trust-badge-item {
        flex: 1;
        min-width: 140px;
        padding: 10px;
        font-size: 11px;
        justify-content: center;
    }

    .product-bottom-area {
        margin-top: 20px;
    }

    .product-desc-box {
        padding: 20px;
    }

    .similar-item {
        background: rgba(255, 255, 255, 0.03);
    }
    
    [data-theme="light"] .similar-item { background: #f1f5f9; }
}

@media (max-width: 480px) {
    .trust-badge-item {
        min-width: 100%; /* Stack on very small screens */
    }
    
    .price-display-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

.similar-info h5 {
    font-size: 12px;
    color: var(--text-color);
    margin-bottom: 4px;
    line-height: 1.4;
}

.similar-info span {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-color);
}

/* Bottom Content Area */
.product-bottom-area {
    margin-top: 30px;
}

.product-desc-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px;
}

.desc-section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.desc-section-title i { color: var(--primary-blue); }

.desc-content {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
}

.desc-content h4 {
    color: var(--text-color);
    margin: 30px 0 15px;
    font-size: 16px;
}

.desc-content ul {
    padding-left: 20px;
    margin-bottom: 30px;
}

.desc-content li {
    margin-bottom: 8px;
}

.desc-content b { color: var(--text-color); }

/* Sepet Page Styles */
.sepet-page-container {
    padding-top: 50px;
    padding-bottom: 100px;
}

.page-title-center {
    text-align: center;
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 50px;
    letter-spacing: 2px;
}

.sepet-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
    align-items: start;
}

.cart-left-col {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
}

.cart-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 50px;
    padding: 20px 30px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.showcase-tab {
    padding: 10px 24px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

.showcase-tab:hover {
    color: var(--text-color);
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.showcase-tab.active {
    background: var(--primary-blue);
    color: #fff;
    border-color: var(--primary-blue);
    box-shadow: 0 4px 15px rgba(var(--primary-blue-rgb), 0.3);
}

.showcase-tab.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 15%;
    width: 70%;
    height: 3px;
    background: var(--accent-gradient);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--primary-blue), 0 0 5px var(--primary-blue);
}

.cart-item-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 50px;
    padding: 25px 30px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

.cart-item-row:last-child { border-bottom: none; }

.cart-item-product {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cart-item-img-large {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    background: #000;
}

.cart-item-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 280px;
}

.cart-item-price-block, .cart-item-subtotal {
    display: flex;
    flex-direction: column;
}

.cart-item-price-block .current, .cart-item-subtotal .total {
    font-size: 16px;
    font-weight: 800;
}

.cart-item-price-block .old, .cart-item-subtotal .old {
    font-size: 13px;
    text-decoration: line-through;
    color: #f43f5e;
    opacity: 0.6;
}

.qty-control-minimal {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 5px;
}

.qty-control-minimal .qty-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 16px;
}

.qty-control-minimal.locked {
    opacity: 0.8;
}

.qty-control-minimal.locked .qty-btn {
    cursor: not-allowed;
    opacity: 0.4;
}

.qty-control-minimal.locked .qty-val {
    color: var(--text-muted);
}

.btn-remove-cart {
    background: rgba(244, 63, 94, 0.1);
    color: #f43f5e;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-remove-cart:hover {
    background: #f43f5e;
    color: white;
}

.cart-empty-message {
    text-align: center;
    padding: 80px 40px;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cart-empty-message i {
    font-size: 64px;
    color: var(--primary-blue);
    opacity: 0.2;
    margin-bottom: 25px;
}

.cart-empty-message p {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.cart-empty-message .btn-primary {
    background: var(--primary-blue);
    color: white;
    padding: 14px 40px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.2s;
    display: inline-block;
}

.cart-empty-message .btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(var(--primary-blue-rgb), 0.2);
}

/* Summary Card */
.checkout-summary-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 30px;
}

.checkout-summary-card h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 30px;
}

.summary-total-row {
    text-align: center;
    margin-bottom: 30px;
}

.summary-total-row .label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.summary-total-row .value {
    font-size: 28px;
    font-weight: 900;
    color: var(--primary-blue);
}

.footer-logo {
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-blue);
}

.footer-logo-img {
    height: 50px;
    width: auto;
    display: block;
}

.coupon-input-group {
    display: flex;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 30px;
}

.coupon-input-group input {
    flex: 1;
    background: none;
    border: none;
    padding: 10px 15px;
    color: white;
    font-size: 13px;
}

.btn-apply-coupon {
    background: rgba(59, 130, 246, 0.2);
    color: var(--primary-blue);
    border: none;
    padding: 0 20px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.payment-buttons-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-pay-balance {
    background: #10b981;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    text-align: center;
    transition: 0.2s;
    text-decoration: none;
}

.btn-pay-balance:hover { background: #059669; transform: translateY(-2px); }

.btn-pay-card {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    text-align: center;
    transition: 0.2s;
}

.btn-pay-card:hover { background: #2563eb; transform: translateY(-2px); }

.btn-main-text {
    display: block;
    font-size: 16px;
    font-weight: 800;
}

.btn-sub-text {
    display: block;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
    margin-top: 4px;
}

.login-req {
    background: #475569;
}

@media (max-width: 1200px) {
    .sepet-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .cart-table-header { display: none; }
    .cart-item-row {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 20px;
    }
    .cart-item-product { grid-column: 1 / -1; }
    .cart-item-remove { grid-column: 1 / -1; text-align: right; }
}

/* Cart Drawer Styles */
.cart-drawer {
    position: fixed;
    top: 0;
    right: -450px; /* Initially hidden */
    width: 420px;
    height: 100%;
    background: var(--bg-color);
    border-left: 1px solid var(--border-color);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer.open {
    transform: translateX(-450px);
}

.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.cart-overlay.show {
    opacity: 1;
    visibility: visible;
}

.cart-drawer-header {
    padding: 25px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-drawer-header h3 {
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-cart-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.cart-item {
    display: flex;
    gap: 15px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.cart-item-img {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    object-fit: cover;
    background: #000;
}

.cart-item-info {
    flex: 1;
}

.cart-item-info h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    display: block;
}

.cart-item-price {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-blue);
}

.cart-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.cart-qty-control {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 2px;
}

.cart-qty-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-color);
    cursor: pointer;
    font-weight: 800;
}

.cart-qty-val {
    width: 30px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.remove-item-btn {
    color: #f43f5e;
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

.cart-empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
}

.cart-empty-state i {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.2;
}

.cart-drawer-footer {
    padding: 25px;
    background: rgba(255,255,255,0.02);
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .cart-drawer-footer {
        padding-bottom: 95px; /* 70px mobil menü yüksekliği + 25px standart boşluk */
    }
}

.total-row {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 15px;
}

.cart-info-text {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 15px;
    line-height: 1.4;
}

.btn-checkout {
    width: 100%;
    padding: 16px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.2s;
}

.btn-checkout:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
}

.btn-clear-cart {
    width: 100%;
    margin-top: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

/* Cart Badge */
.cart-btn {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: 0px; /* Moved inside to prevent overflow */
    background: var(--primary-orange);
    color: white;
    font-size: 9px;
    font-weight: 900;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--header-bg);
}

@media (max-width: 480px) {
    .cart-drawer {
        width: 100%;
        right: -100%;
    }
    .cart-drawer.open {
        transform: translateX(-100%);
    }
}

/* ==========================================================================
   MEGA-PATCH: MOBILE OPTIMIZATION (Responsiveness)
   ========================================================================== */

@media (max-width: 768px) {
    /* Container Global */
    .container { padding: 0 15px; }

    /* Header & Navigation */
    .header-top {
        flex-direction: column;
        gap: 15px;
        padding: 15px 0;
    }
    
    /* Header Redesign */
    .desktop-header { display: none !important; }
    .mobile-header { display: block !important; padding: 0 15px; width: 100%; box-sizing: border-box; }
    
    .mobile-sidebar { 
        display: flex !important; 
        visibility: hidden; 
        pointer-events: none;
    }
    .mobile-sidebar.active {
        visibility: visible;
        pointer-events: auto;
    }
    .mobile-sidebar-overlay { display: none; } /* Initially hidden, JS will toggle active */
    .mobile-sidebar-overlay.active { display: block !important; }
    
    .mobile-header-row-1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        /* Ayırıcı çizgi beyaz ve %5 saydamdı: açık temada zeminle aynı renk
           olduğu için hiç görünmüyordu. Tema değişkenine bağlandı. */
        border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.12));
        /* Çizgi ekranın iki ucuna kadar uzasın. Üstte iki katman iç boşluk var
           (.mobile-header 15px + .container 15px = 30px); ikisi de negatif kenar
           boşluğuyla iptal edilir, içerik yerinde kalsın diye aşağıdaki kuralda
           aynı miktar iç boşluk olarak geri verilir. */
        margin-left: -30px;
        margin-right: -30px;
    }
    
    .mobile-menu-btn, .mobile-cart-btn {
        background: var(--glass-bg);
        border: none;
        color: var(--text-color);
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    
    .mobile-cart-btn { color: #f36f21 !important; } /* Reference Orange icon */
    
    .mobile-header-row-1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* yatay değer, yukarıdaki negatif kenar boşluğunu dengeler */
        padding: 15px 30px;
    }

    /* .container'da overflow-x: hidden var; negatif kenar boşluğuyla taşan
       çizgi tam da bu yüzden kenarlardan kırpılıyordu. Yalnızca mobil
       header'ın içindeki kapsayıcıda kırpma kaldırılır — dışarı taşan bir şey
       olursa .main-header (ekran genişliğinde ve overflow-x: hidden) yine
       keser, sayfada yatay kaydırma oluşmaz. */
    .mobile-header > .container {
        /* !important gerekiyor: yukarıda "section, header, footer, .container, main"
           kuralı overflow-x'i !important ile gizliyor. */
        overflow: visible !important;
    }

    .mobile-logo img {
        height: 45px;
        width: auto;
    }
    
    .mobile-header-row-1 .right-icons {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .mobile-cart-btn, .mobile-menu-btn, .mobile-noti-btn {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--input-bg);
        border: none;
        color: var(--text-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        position: relative;
    }

    .notif-badge-mobile {
        position: absolute;
        top: 4px;
        right: 4px;
        background: #f43f5e;
        color: white;
        font-size: 9px;
        font-weight: 800;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: none;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--card-bg);
        z-index: 10;
    }

    .notif-dropdown {
        position: fixed !important;
        top: 74px !important;
        left: 15px !important;
        right: 15px !important;
        width: auto !important;
        max-height: 80vh;
        z-index: 3000 !important;
        margin: 0 !important;
        border-radius: 24px !important;
        box-shadow: 0 15px 50px rgba(0,0,0,0.3) !important;
        transform: translateY(10px);
        opacity: 0;
        visibility: hidden;
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .notif-dropdown.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    html:not([data-theme="dark"]) .mobile-logo img,
    html:not([data-theme="dark"]) .sidebar-logo img { filter: invert(1) hue-rotate(180deg); }
    
    .mobile-header-row-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 12px 0;
    }
    
    .mobile-action-btn {
        height: 48px;
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: 800;
        font-size: 13px;
        text-decoration: none;
        color: white;
        transition: all 0.3s ease;
    }
    
    .btn-register, .btn-balance { 
        background: var(--primary-blue) !important;
        box-shadow: 0 4px 15px rgba(var(--primary-blue-rgb), 0.3) !important;
    }
    .btn-login-mobile { 
        background: #10b981 !important;
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25) !important;
    }
    .btn-account { 
        background: var(--card-bg) !important; 
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    }

    .mobile-action-btn:active {
        transform: scale(0.96);
        opacity: 0.9;
    }

    /* Mobile Sidebar - High Performance Transform Animation */
    .mobile-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100%;
        background: var(--sidebar-bg);
        z-index: 11000;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        visibility: hidden;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        will-change: transform;
    }
    
    .mobile-sidebar.active { 
        transform: translateX(0); 
        visibility: visible;
    }
    
    .mobile-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,0.8);
        z-index: 9999;
        display: none;
        backdrop-filter: blur(8px);
    }
    
    .mobile-sidebar-overlay.active { display: block; }
    
    .sidebar-header {
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .sidebar-title { font-weight: 800; letter-spacing: 1px; color: #f36f21; }
    
    .close-sidebar {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        color: var(--text-color);
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .sidebar-content { 
        padding: 20px 20px 100px 20px; 
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
    }
    
    .sidebar-search { margin-bottom: 25px; }
    .mobile-search-input {
        width: 100%;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        padding: 12px 15px;
        border-radius: 12px;
        color: var(--text-color);
        font-size: 14px;
    }
    
    .sidebar-section-title {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        margin: 25px 0 12px 5px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        opacity: 0.8;
    }
    
    .sidebar-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 14px 18px;
        margin-bottom: 10px;
        background: var(--card-bg);
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        border-radius: 16px;
        color: var(--text-color);
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }
    
    .sidebar-item:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        border-color: transparent;
        color: var(--primary-blue);
    }

    .sidebar-whatsapp-item i { color: #25d366 !important; }
    .sidebar-moon-icon { color: #f1c40f !important; }
    .sidebar-sun-icon { color: #f39c12 !important; }
    .sidebar-theme-text { flex: 1; }
    
    .sidebar-icon { height: 20px; width: auto; opacity: 0.8; }
    .sidebar-item i { width: 20px; text-align: center; color: #f36f21; font-size: 16px; }

    /* Premium Sidebar Enhancements */
    .sidebar-user-section {
        margin-bottom: 25px;
        background: var(--card-bg);
        padding: 22px;
        border-radius: 20px;
        border: none;
        box-shadow: 0 8px 25px rgba(0,0,0,0.04);
    }

    .user-info-sidebar {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
    }

    .user-avatar i {
        font-size: 40px;
        color: #f36f21;
    }

    .user-details {
        display: flex;
        flex-direction: column;
    }

    .user-name-label {
        font-weight: 800;
        font-size: 16px;
        color: var(--text-color);
    }

    .user-balance-label {
        font-size: 12px;
        color: var(--text-muted);
    }

    .user-balance-label strong {
        color: #27ae60;
        font-size: 14px;
    }

    .sidebar-balance-btn {
        width: 100%;
        height: 45px;
        background: linear-gradient(to right, #3498db, #2980b9);
        border: none;
        border-radius: 12px;
        color: white;
        font-weight: 700;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
    }

    .sidebar-guest-header p {
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .guest-btns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sidebar-guest-btn {
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
    }

    .sidebar-guest-btn.login {
        background: #27ae60;
        color: white;
    }

    .sidebar-guest-btn.register {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        color: var(--text-color);
    }

    .sidebar-whatsapp-section {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid var(--border-color);
    }

    .whatsapp-sidebar-btn {
        width: 100%;
        height: 50px;
        background: linear-gradient(to right, #25d366, #128c7e);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: white;
        text-decoration: none;
        font-weight: 800;
        font-size: 14px;
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2);
    }

    /* Section Spacing Optimization - NO GAP POLICY */
    .hero-section {
        margin-top: 14px !important;
        margin-bottom: 12px !important; /* Reduced space between hero and categories */
        padding-bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .featured-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 36px !important; /* Space before showcase/vitrin */
    }
    
    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: max-content !important; /* Force fit content */
        margin-bottom: 0 !important;
    }
    
    .hero-main {
        width: 100%;
        height: 184px !important;
        margin-bottom: 14px !important;
        border-radius: 14px !important;
    }
    /* Yan kart yoksa alt boşluk hero-section'ınkiyle üst üste binmesin */
    .hero-grid > .hero-main:last-child {
        margin-bottom: 0 !important;
    }
    .hero-main .hero-card {
        border-radius: 14px !important;
    }
    
    .hero-main .card-title {
        font-size: 16px !important;
        margin-bottom: 5px !important;
        padding-left: 0 !important;
        align-self: flex-start !important;
        text-align: left !important;
    }

    .hero-main .card-desc {
        font-size: 14px !important;
        line-height: 1.3 !important;
        max-width: 95% !important;
        margin-bottom: 12px !important;
        padding-left: 0 !important;
        align-self: flex-start !important;
        text-align: left !important;
    }

    .hero-main .card-content {
        padding: 0 0 0 12px !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: center;
        height: 100%;
        text-align: left !important;
        position: static !important;
    }

    .hero-main .card-overlay {
        padding-left: 0 !important;
        /* position: relative kaldırıldı — buton bottom positioning bozuluyordu, absolute inset:0 davranışı korunsun */
    }

    .hero-main .slider-badge {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        margin: 0 !important;
        z-index: 3 !important;
    }

    /* Slider Aesthetics Refinements */
    .slider-action-btn {
        padding: 9px 18px !important;
        font-size: 11px !important;
        border-radius: 54px !important;
        margin-left: 0 !important;
        gap: 6px !important;
        position: absolute !important;
        left: 14px !important;
        bottom: 14px !important;
        z-index: 10 !important;
    }
    .slider-action-btn i {
        font-size: 12px !important;
    }
    
    .progress-circle { width: 32px !important; height: 32px !important; }
    .progress-text { font-size: 8px !important; }

    .slider-progress-wrapper {
        left: auto !important;
        right: 14px !important;
        bottom: 14px !important;
        z-index: 10 !important;
    }

    .hero-side {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important; /* Fix: Remove ghost second row from desktop */
        gap: 14px !important;
        height: auto !important;
        margin-bottom: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .side-card {
        height: 114px !important; /* Fix: Give height to cards so they don't collapse */
        border-radius: 12px !important;
    }
    
    /* ── Editör Seçimi Kartları — Mobil: 2'li grid ──
       Görsel, kartın tamamını arka plan gibi kaplar (object-fit: cover)
       ve overflow:hidden ile kart içinde kalır; görseller geniş sahne
       görselleri olduğundan visible bırakılırsa tüm bölgeye taşar. */
    .featured-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 0 -8px !important; /* hero banner ile aynı hizaya genişle (container 15px, hero 7px) */
        padding: 0 !important;
    }

    .featured-card {
        width: 100% !important;
        height: 58px !important; /* ince çubuk — PC'deki 281x85 oranının karşılığı */
        padding: 0 10px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
        /* dış gölge yumuşak, iç hairline keskin kenar verir */
        box-shadow: 0 2px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10) !important;
        transition: transform .18s ease !important;
    }

    .featured-card:active {
        transform: scale(0.97) !important;
    }

    /* Sol taraf metin okunurluğu için gradient overlay — sağa doğru hızlı sönerek görseli açığa çıkarır */
    .featured-card::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(to right, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.16) 72%, rgba(0,0,0,0) 100%) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    .featured-card .logo-area {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        margin-right: 8px !important;
        border-radius: 7px !important;
        background: rgba(255,255,255,0.10) !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        backdrop-filter: blur(6px) !important;
        z-index: 3 !important;
    }

    .featured-card .card-logo {
        width: 20px !important;
        height: 20px !important;
    }

    .featured-card .info-area {
        z-index: 3 !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .featured-card .info-area h4 {
        font-size: 12.5px !important;
        font-weight: 900 !important;
        color: #fff !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.15 !important;
        letter-spacing: 0.2px !important;
        /* dar blur = keskin kontur; geniş blur metni bulanık gösteriyordu */
        text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
    }

    .featured-card .info-area p {
        font-size: clamp(7.5px, 2.2vw, 8.5px) !important; /* 360px ekranlarda da tek satır sığsın */
        font-weight: 700 !important;
        color: rgba(255,255,255,0.85) !important;
        margin: 0 !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
        letter-spacing: 0 !important;
    }

    /* Görsel kartın tamamını kaplar; sağa hizalı crop (karakterler görselin sağında) */
    .featured-card .char-area {
        position: absolute !important;
        inset: 0 !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        pointer-events: none !important;
        display: block !important;
    }

    .featured-card .char-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: right center !important;
        /* küçültülünce sönükleşen görsele kontrast/doygunluk geri kazandırılıyor */
        filter: contrast(1.10) saturate(1.15) !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Cards */
    .product-card { padding: 10px; }
    .btn-buy { height: 40px; font-size: 13px; }

    /* Banner Stack (index.php) */
    .banner-row {
        flex-direction: column;
    }

    /* Product Detail */
    .product-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .purchase-area {
        flex-direction: column;
        align-items: stretch;
    }

    /* Homepage Blog Scrollable Mobile Only */
    .blog-grid-scroll {
        display: flex !important;
        overflow-x: auto !important;
        gap: 15px !important;
        padding: 5px 5px 20px 5px !important;
        margin-bottom: 44px !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .blog-grid-scroll::-webkit-scrollbar {
        display: none;
    }

    .blog-grid-scroll .blog-card {
        min-width: 294px !important;
        max-width: 294px !important;
        height: 204px !important;
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* Normal Blog Grid for Archive */
    .blog-grid:not(.blog-grid-scroll) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .blog-title {
        font-size: 13px !important;
        white-space: normal !important;
        overflow: visible !important;
        line-height: 1.2 !important;
        display: block !important;
    }

    /* Trust Section - Ultra Minimalist 2x2 Layout Mobile */
    .trust-section {
        padding: 30px 0 !important; /* Reduced wasted space */
    }

    .trust-grid-scroll {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 14px !important;
        padding: 0 14px !important;
        justify-content: center !important;
    }

    .trust-item {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .trust-icon {
        background: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto 14px !important;
        font-size: 26px !important;
        color: var(--primary-blue) !important;
        opacity: 1; /* More contrast for light theme */
    }

    .trust-info h4 {
        font-size: 11px !important;
        font-weight: 900 !important;
        margin-bottom: 4px !important;
        color: var(--text-color) !important;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .trust-info p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: var(--text-muted) !important;
        max-width: 140px;
        margin: 0 auto;
        font-weight: 500; /* Better readability on white */
    }

    /* Footer - Compact Mobile Layout */
    .main-footer {
        padding: 30px 0 0 0 !important; /* Reduced excessive top space */
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        text-align: left;
    }
    .col-brand { grid-column: 1 / -1; text-align: center; }
    .footer-title { font-size: 12px; margin-bottom: 12px; padding-left: 0; }
    .footer-links-list a { font-size: 11px; }
    .contact-item-min { gap: 6px; font-size: 11px; }
    .contact-icon-min { width: 24px; height: 24px; font-size: 9px; }
    .footer-social-minimal { justify-content: center; }

    /* Collapsible Footer Mobile */
    /* Minimal Always-Open Mobile Footer */
    .footer-col {
        border: none;
        border-top: 1px solid var(--border-color);
        margin-bottom: 0;
        background: transparent;
        padding: 30px 0 !important;
    }

    .footer-col:first-of-type {
        border-top: none;
    }

    .footer-header-mobile {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 24px !important;
        padding: 0 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: 1.2px !important;
        color: var(--text-color) !important;
        text-transform: uppercase;
    }

    .footer-header-mobile span {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .header-icon {
        font-size: 14px;
        color: var(--primary-blue);
        width: 28px;
        height: 28px;
        background: rgba(var(--primary-blue-rgb), 0.1);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .footer-col-content {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .footer-col ul li {
        margin-bottom: 15px;
        opacity: 1 !important;
        transform: none !important;
    }

    .footer-col ul li a {
        font-size: 14px;
        color: var(--text-muted);
        text-decoration: none;
        display: block;
        transition: color 0.2s;
    }

    .footer-col ul li a:hover {
        color: var(--primary-blue);
    }

    .contact-item {
        margin-bottom: 20px;
    }


    
    .footer-col:last-child {
        border-bottom: none;
    }

    .footer-bottom .container {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 14px !important;
        flex-wrap: nowrap !important;
    }

    .footer-bottom p {
        margin: 0 !important;
        white-space: nowrap;
        letter-spacing: -0.2px;
    }
}

@media (max-width: 480px) {
    .header-top { gap: 10px; }
    
    .hero-main { height: 250px; }
    .showcase-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin-bottom: 15px !important;
    }

    .showcase-title {
        font-size: 16px !important;
        white-space: normal !important;
        overflow: visible !important;
        line-height: 1.2 !important;
        max-width: 184px !important;
    }

    .view-all-link {
        padding: 6px 12px !important;
        font-size: 11px !important;
        white-space: normal !important;
        flex-shrink: 0 !important;
    }
    
    .hero-subtitle { font-size: 13px; }
    
    .hero-side {
        grid-template-columns: 1fr 1fr; /* Keep 2 columns on small mobiles */
    }
    
    .product-grid, .listing-product-grid, .featured-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Keep 2 columns even on the smallest screens */
    }
    
    /* Cart (Sepet) Page Optimization */
    .sepet-grid {
        grid-template-columns: 1fr;
    }
    
    .cart-table-header {
        display: none;
    }
    
    .cart-item-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 15px;
        border: 1px solid var(--border-color);
        margin-bottom: 10px;
        border-radius: 12px;
        background: rgba(255,255,255,0.02);
    }
    
    .cart-item-product {
        width: 100%;
        gap: 15px;
    }
    
    .cart-item-img-large {
        width: 80px;
        height: 60px;
    }

    .cart-item-price-block, .cart-item-qty, .cart-item-subtotal {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    
    .cart-item-price-block::before { content: "Birim Fiyat: "; font-size: 11px; opacity: 0.6; }
    .cart-item-qty::before { content: "Adet: "; font-size: 11px; opacity: 0.6; }
    .cart-item-subtotal::before { content: "Toplam: "; font-size: 11px; opacity: 0.6; }

    .cart-item-remove {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .coupon-input-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .coupon-input-group input, .coupon-input-group button {
        width: 100%;
    }
    
    /* Auth Form Refinements */
    .auth-container {
        padding: 40px 15px;
    }
}

/* Categories Page Modern Styles */
.categories-page-container {
    padding-top: 60px;
    padding-bottom: 100px;
}

.categories-header {
    text-align: center;
    margin-bottom: 50px;
}

.categories-header h1 {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.categories-search-box {
    max-width: 800px;
    margin: 0 auto 50px;
    position: relative;
}

.categories-search-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    padding: 16px 50px 16px 25px;
    border-radius: 12px;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.categories-search-input:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(var(--primary-blue-rgb), 0.1);
    outline: none;
    background: var(--card-bg);
}

.categories-search-box i {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

/* ── Vitrin Sayfaları – Showcase Section ─────────────────────── */
.showcase-section {
    margin-bottom: 48px;
}
.showcase-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.showcase-label-icon {
    display: flex;
    align-items: center;
    color: #6366f1;
}
.showcase-cards-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.showcase-pill-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text-color);
    transition: border-color .18s, box-shadow .18s, transform .18s;
    position: relative;
    overflow: hidden;
}
.showcase-pill-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--sc-color, #6366f1);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity .18s;
}
.showcase-pill-card:hover {
    border-color: rgba(99,102,241,.25);
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    transform: translateX(4px);
}
.showcase-pill-card:hover::before {
    opacity: 1;
}
.showcase-pill-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(99,102,241,.1);
    background: color-mix(in srgb, var(--sc-color, #6366f1) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sc-color, #6366f1);
}
.showcase-pill-icon svg {
    width: 20px;
    height: 20px;
}
.showcase-pill-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.showcase-pill-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.showcase-pill-badge {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}
.showcase-pill-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.showcase-pill-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.showcase-pill-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform .18s, color .18s;
}
.showcase-pill-card:hover .showcase-pill-arrow {
    transform: translateX(3px);
    color: var(--sc-color, #6366f1);
}

/* ─────────────────────────────────────────────────────────────── */
.categories-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    padding: 0 15px;
}

@media (max-width: 768px) {
    .categories-tabs-nav {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .categories-tabs-nav::-webkit-scrollbar { display: none; }
}

.cat-tab-btn {
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .18s, color .18s, background .18s;
    white-space: nowrap;
    line-height: 1.4;
}

.cat-tab-btn:hover {
    color: var(--text-color);
    border-color: var(--text-muted);
    background: transparent;
}

.cat-tab-btn.active {
    background: var(--primary-blue);
    color: #fff;
    border-color: var(--primary-blue);
    font-weight: 700;
}

.category-group-section {
    display: none;
    animation: fadeInCat 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 60px;
}

.category-group-section.active {
    display: block;
}

.cat-section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    background: linear-gradient(to right, var(--card-bg), transparent);
    padding: 12px 20px;
    border-radius: 12px;
    border-left: 4px solid var(--primary-blue);
}

.cat-section-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-blue-rgb), 0.1);
    border-radius: 8px;
    color: var(--primary-blue);
    font-size: 14px;
}

.cat-section-header h2 {
    font-size: 18px;
    font-weight: 900;
    margin: 0;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.subcat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

@media (max-width: 1400px) { .subcat-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { .subcat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px) { .subcat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { 
    .subcat-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
    } 
    .categories-header h1 { font-size: 22px; letter-spacing: 1px; margin-bottom: 20px; }
    .categories-page-container { padding-top: 30px; }
    .showcase-pill-card { padding: 12px 14px; gap: 12px; }
    .showcase-pill-icon { width: 36px; height: 36px; border-radius: 10px; }
    .showcase-pill-icon svg { width: 17px; height: 17px; }
    .showcase-pill-name { font-size: 13px; }
    .category-group-section { margin-bottom: 40px; }
    .cat-section-header { padding: 8px 15px; margin-bottom: 20px; }
    
    .category-item-card .item-card-title { font-size: 11px; }
    .category-item-card .item-card-footer { padding: 8px; }
    .category-item-card { aspect-ratio: 1 / 1.25; }
}

/* Okyia Branding Animation */
@keyframes okyia-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.okyia-anim {
    background: linear-gradient(90deg, #4680FF 0%, #fff 50%, #4680FF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: okyia-shimmer 3s linear infinite;
    display: inline-block;
}



/* --- Live Search Popup --- */
.search-container {
    position: relative;
}

/* ══════════════════════════════════════════
   SEARCH POPUP — geniş, grid görünümlü
══════════════════════════════════════════ */
.search-popup {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: min(860px, 94vw);
    background: var(--header-bg, #fff);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.07);
    z-index: 99999;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 20px;
}
.search-popup::-webkit-scrollbar { width: 5px; }
.search-popup::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

/* Kategori satırı — yatay liste */
.search-popup-cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.search-popup-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    background: var(--glass-bg, rgba(0,0,0,.04));
    border: 1px solid var(--border-color);
    border-radius: 50px;
    text-decoration: none;
    transition: background .18s, border-color .18s;
}
.search-popup-cat-chip:hover {
    background: rgba(var(--primary-blue-rgb),.08);
    border-color: rgba(var(--primary-blue-rgb),.3);
}
.search-popup-cat-chip img {
    width: 26px; height: 26px;
    border-radius: 6px;
    object-fit: cover;
}
.search-popup-cat-chip span {
    font-size: 12px; font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
}

/* Ürün grid */
.search-popup-section-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.search-popup-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.search-popup-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    background: var(--card-bg, #0f1117);
}
.search-popup-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-color: rgba(var(--primary-blue-rgb),.3);
}
.search-popup-card-img {
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--card-bg, #0f1117);
}
.search-popup-card-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .3s ease;
}
.search-popup-card:hover .search-popup-card-img img {
    transform: scale(1.05);
}
.search-popup-card-body {
    padding: 8px 10px 10px;
    background: var(--header-bg, #fff);
}
.search-popup-card-name {
    font-size: 11px; font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
}
.search-popup-card-price {
    display: flex; align-items: baseline; gap: 5px;
}
.popup-price {
    color: #10b981;
    font-weight: 800;
    font-size: 13px;
}
.popup-old-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 10px;
}

/* Tüm sonuçlar butonu */
.search-popup-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    margin-top: 12px;
    background: rgba(var(--primary-blue-rgb),.06);
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    border-radius: 12px;
    border: 1px solid rgba(var(--primary-blue-rgb),.15);
    transition: all .2s ease;
}
.search-popup-all-btn:hover {
    background: var(--primary-blue);
    color: #fff;
    border-color: var(--primary-blue);
}

.search-popup-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}
.search-popup-empty i { font-size: 36px; margin-bottom: 10px; opacity: .25; display: block; }
.search-popup-empty p { font-size: 14px; font-weight: 500; }

/* eski list stilleri (geriye uyum) */
.search-popup-list { display: flex; flex-direction: column; }
.search-popup-item { display:none; } /* artık kullanılmıyor */

@media (max-width: 768px) {
    .search-popup { width: 96vw; padding: 14px; }
    .search-popup-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
    .search-popup-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Auth Modal Styles - Robust Centering & Global Optimization */
.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.96);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    display: none; /* Controlled by JS */
    align-items: flex-start;
    justify-content: center;
    z-index: 999999;
    padding: 20px 15px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    animation: authModalFadeIn 0.4s ease;
}

@keyframes authModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.auth-modal-container {
    background: #0f172a;
    width: 100%;
    max-width: 400px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9);
    animation: authModalSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
    box-sizing: border-box;
    margin: auto; /* Force center in flex */
}

@keyframes authModalSlideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.auth-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}

.auth-modal-content {
    padding: 45px 30px 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.auth-modal-header {
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-modal-logo {
    height: 44px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(var(--primary-blue-rgb), 0.4));
}

.auth-modal-tabs {
    display: flex;
    background: rgba(2, 6, 23, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 5px;
    border-radius: 10px;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
}

.auth-modal-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    padding: 11px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-modal-tab.active {
    background: var(--primary-blue);
    color: #020617 !important;
    box-shadow: 0 4px 12px rgba(var(--primary-blue-rgb), 0.3);
}

.auth-modal-title {
    color: white;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 6px;
    text-align: center;
}

.auth-modal-subtitle {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 25px;
    opacity: 0.7;
}

.auth-form-section {
    display: none;
    width: 100%;
}

.auth-form-section.active {
    display: block;
}

.auth-form-group {
    position: relative;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}

.auth-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
    z-index: 2;
}

.auth-modal-input {
    width: 100% !important;
    height: 52px;
    background: #020617 !important;
    border: 1px solid #1e293b !important;
    border-radius: 8px;
    padding: 0 40px 0 44px !important;
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box !important;
    display: block;
}

.auth-modal-input:focus {
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-blue-rgb), 0.15) !important;
    outline: none;
}

.modal-password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    cursor: pointer;
    font-size: 16px;
    z-index: 2;
}

.auth-modal-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    width: 100%;
}

.auth-modal-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.auth-modal-checkbox input {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    accent-color: var(--primary-blue);
}

.auth-modal-link {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 800;
}

.auth-modal-submit {
    width: 100%;
    height: 54px;
    background: linear-gradient(135deg, var(--primary-blue), #0066cc);
    color: #020617 !important;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(var(--primary-blue-rgb), 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.auth-modal-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.auth-error-box {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: authErrorFadeIn 0.3s ease;
}

.auth-success-box {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: authErrorFadeIn 0.3s ease;
    line-height: 1.5;
}

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

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.auth-modal-footer {
    text-align: center;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    width: 100%;
}

.auth-modal-split {
    display: flex; /* SWITCHED TO FLEX FOR BETTER CONTROL */
    gap: 15px;
    width: 100%;
    margin-bottom: 0;
}

/* Auth Error State Styles (Moved from auth.css for global modal visibility) */
.form-group.has-error .auth-input,
.auth-form-group.has-error .auth-modal-input {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

.form-group.has-error .input-icon,
.auth-form-group.has-error .auth-input-icon {
    color: #ef4444 !important;
}

.error-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #ef4444;
    font-size: 16px;
    pointer-events: none;
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* For password field, error icon should be moved to the left of the toggle */
.form-group.has-error #register-password ~ .error-icon,
.form-group.has-error #login-password ~ .error-icon,
.auth-form-group.has-error #modal-register-password ~ .error-icon,
.auth-form-group.has-error #modal-login-password ~ .error-icon {
    right: 48px;
}

.auth-modal-split .auth-form-group {
    flex: 1;
    min-width: 0; /* PREVENT FLEX OVERFLOW */
}

@media (max-width: 480px) {
    .auth-modal-overlay {
        padding: 10px;
    }
    .auth-modal-container {
        max-width: calc(100% - 30px);
        border-radius: 14px;
    }
    .auth-modal-content {
        padding: 40px 20px 30px;
    }
    .auth-modal-split {
        flex-direction: column;
        gap: 0;
    }
    .auth-modal-title { font-size: 22px; }
    .auth-modal-submit { height: 52px; }
}

.terms-overlay {
    background: rgba(2, 6, 23, 0.98);
}

.terms-overlay {
    background: rgba(2, 6, 23, 0.98);
}

.terms-container {
    max-width: 650px;
    background: #0f172a;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 1);
    position: relative;
    overflow: hidden;
    animation: termsZoomIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes termsZoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.terms-header {
    padding: 28px 35px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.terms-title {
    color: white;
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
}

.terms-close {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.terms-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: rotate(90deg);
}

.auth-modal-body {
    padding: 35px 40px;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.8;
    max-height: 70vh; /* Increased height */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #1e293b transparent;
}

.auth-modal-body::-webkit-scrollbar {
    width: 6px;
}

.auth-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.auth-modal-body::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 10px;
}

.auth-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--primary-blue);
}

@media (max-width: 768px) {
    .terms-container {
        max-width: calc(100% - 30px);
        border-radius: 32px;
    }
    .terms-header {
        padding: 25px 30px;
    }
    .terms-title {
        font-size: 20px;
    }
    .auth-modal-body {
        padding: 30px;
        font-size: 14px;
    }
}

/* SEO Description Section */
.seo-description-section {
    margin-bottom: 40px;
    margin-top: 20px;
}

.seo-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 35px 40px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--text-color);
    opacity: 0.9;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    text-align: justify;
}

[data-theme="dark"] .seo-card {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(10px);
}

.seo-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--primary-blue-rgb), 0.3);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .seo-description-section {
        padding: 0 20px;
    }
    .seo-card {
        padding: 25px;
        font-size: 13.5px;
        border-radius: 16px;
    }
}

/* BOGO Campaign Badge */
.product-image-area, .listing-card-image-wrap, .view-img-box {
    position: relative;
}

.bogo-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 20px;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,85,255,0.5);
    white-space: nowrap;
}

/* Ensure mobile compatibility */
@media (max-width: 768px) {
    .bogo-badge {
        font-size: 7px;
        padding: 2px 5px;
    }
}

/* ================================================
   ÖNE ÇIKAN KATEGORİLER — Tüm temalar için base
   ================================================ */
.popular-cats-section {
    margin-top: 10px;
    margin-bottom: 25px;
}

.popular-slider-arrows {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-color, #2a2e3d);
    border-radius: 8px;
    overflow: hidden;
}

.slider-arrow {
    background: var(--card-bg, #181b27);
    border: none;
    border-radius: 0;
    color: var(--text-muted, #9ca3b4);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 14px;
    padding: 0;
}

.slider-arrow.prev {
    border-right: 1px solid var(--border-color, #2a2e3d);
}

.slider-arrow:hover {
    background: var(--primary-blue, #3b82f6);
    color: #fff;
}

.popular-cats-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 5px 0 10px 0;
}

.popular-cats-track::-webkit-scrollbar {
    display: none;
}

.popular-cat-card {
    flex: 0 0 auto;
    width: 152px;
    height: 215px;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    background: var(--card-bg, #1a1d2c);
    text-decoration: none;
}

.popular-cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 40%);
    border-radius: 10px;
    pointer-events: none;
    z-index: 1;
}

.popular-cat-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.28s ease;
    display: block;
    position: relative;
    z-index: 0;
}

.popular-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

.popular-cat-card:hover img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .popular-cat-card {
        width: 120px;
        height: 170px;
        border-radius: 8px;
    }
    .slider-arrow {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .popular-cat-card {
        width: 105px;
        height: 150px;
    }
    .popular-cats-track {
        gap: 9px;
    }
}

.product-card-modern .product-image-area { border-radius: 4px !important; }
.product-card-modern .product-char-img { border-radius: 4px !important; }

/* .product-badge-mobile-fix */
@media (max-width: 768px) {
    .product-badge { height: 22px; }
}




.product-info-row-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap; /* Prevent breaking the layout */
    width: 100%;
    margin-bottom: 12px;
    gap: 8px 4px; /* Vertical and horizontal gap */
    min-height: 40px;
}

/* ── Fiyat kutusu ────────────────────────────────────────────────────
   Fiyat, kartın gövdesinden ayrışan çerçeveli bir kutuda duruyor.
   Yıldız rozeti kaldırıldı (ürünlerin çoğunda gerçek bir puan yok,
   hepsinde "5,0" yazıyordu — kutuyu daraltmaktan başka işe yaramıyordu).
   Buton zaten bu satırın altında ve tam genişlikte. */
.product-info-row-v2 {
    justify-content: center !important;
    align-items: center !important;
    /* Saydam kutu: zemin yok, yalnızca ince çerçeve. */
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1px 10px;
    /* Sabit yükseklik: indirimli ürün iki satır (üstü çizili + güncel),
       indirimsiz tek satır yazıyordu ve kutular birbirini tutmuyordu.
       Yükseklik sabit, içerik dikeyde ortalı.
       40px, kutu eklenmeden önceki fiyat satırının kapladığı yerin aynısı —
       çerçeve dışında dikeyde hiçbir şey büyümesin. */
    height: 32px;
    min-height: 32px !important;
    box-sizing: border-box;
    flex-wrap: nowrap;
    /* Başlıklar tam gösterildiği için uzunlukları değişiyor. Boşluk başlık
       ile kutu ARASINA bırakılır: kutu ve buton her kartta alta yaslanır,
       başlıklar da üstte hizalı kalır. client.css'teki kural bunu eziyordu,
       bu yüzden !important. */
    margin-top: auto !important;
}
.rating-side-v2 { display: none !important; }
.product-info-row-v2 .price-side-v2 {
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    max-width: 100%;
}
/* Fiyat kutusu ile Satın Al butonu arasındaki boşluk. client.css bu alanı
   6px veriyor ama araya başka boşluklar da eklenip toplam 12px'e çıkıyordu;
   örnekteki daha derli toplu aralık için kısaltıldı. */
.product-card-modern .product-info-area .product-info-row-v2,
.listing-product-card .product-info-area .product-info-row-v2,
.listing-product-card .listing-card-info .product-info-row-v2 {
    margin-bottom: 2px !important;
}

/* Butonda da margin-top:auto vardı; kutuyla birlikte iki "otomatik" boşluk
   olunca kalan yer İKİYE BÖLÜNÜYOR ve uzun başlıklı kartta kutu aşağı
   kayıyordu. Boşluğun tamamı kutunun ÜSTÜNDE kalsın: butonunki kapatıldı,
   buton zaten kutunun hemen altında ve ikisi birlikte alta yaslanıyor. */
.product-info-area .btn-buy-modern { margin-top: 0 !important; }

/* Fiyat kutusunun kenarlığı koyu temada zeminle neredeyse aynı tondaydı
   (#262a30 üstüne #1d2024) ve kutu kayboluyordu. Beyazın düşük opaklığı
   kullanılır: hangi tema rengi seçilirse seçilsin görünür kalır. */
[data-theme="dark"] .product-info-row-v2 {
    border-color: rgba(255, 255, 255, .17);
}

/* Kutu içindeki fiyat: daha küçük ve beyaz. Yeşil vurgu yalnızca burada
   kaldırıldı; sepet/ürün sayfası gibi diğer yerler etkilenmiyor. */
.product-info-row-v2 .current-price-v2 {
    font-size: 15px;
    /* Sabit beyaz yazılmıştı; açık temada zemin de beyaz olduğu için fiyat
       kayboluyordu. Temanın metin rengi kullanılır: koyu temada beyaza yakın,
       açık temada koyu lacivert. */
    color: var(--text-color) !important;
    /* Kutu 32px'e indiği için satır yüksekliği sıkılaştırıldı: iki satırlı
       indirimli fiyat payla birlikte sığsın, farklı yazı tipinde kırpılmasın. */
    line-height: 1.05;
}
.product-info-row-v2 .currency-v2 { font-size: 10px; }

.product-info-row-v2 .old-price-v2 {
    /* Kutu inceldiği için üstü çizili fiyat bir tık küçültüldü. */
    font-size: 10px;
    line-height: 1;
}

/* İndirimli fiyat ikilisi bir tık yukarı alınır.
   Negatif boşluk denendi ama içeriği kısaltıyor, kutu da ortaladığı için
   kazanç yarıya iniyordu; bu yüzden yerleşimi bozmayan bir kaydırma
   kullanıldı. `:has()` sayesinde kural yalnızca üstü çizili fiyatı OLAN
   kartlara işler — indirimsiz ürünün fiyat konumu hiç değişmez. */
.product-info-row-v2 .price-side-v2:has(.old-price-v2) {
    /* transform yerine position: transform ayrı bir GPU katmanı açıyor ve
       içindeki yazı/kenar yarım piksele oturup pürüzlü görünüyordu. */
    position: relative;
    /* Büyük fiyat, indirimsiz karttakiyle AYNI yükseklikte dursun diye
       ayarlandı: ikisinin de merkezi kutu üstünden 20px. */
    top: -1px;
}

/* İndirimsiz fiyat kutu içinde tam ortada dursun: kaydırma yok, kutunun
   kendi dikey ortalaması geçerli. Üst ve alt boşluk eşit olur. */
.product-info-row-v2 .price-side-v2:not(:has(.old-price-v2)) {
    position: static;
    top: auto;
}
.product-info-row-v2 .current-price-row-v2 { justify-content: center; }

/* Kategori listesindeki kart da aynı dili kullanır */
.list-card-price {
    justify-content: center;
    background: var(--glass-bg, rgba(255, 255, 255, .045));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 7px 10px;
    margin-top: 6px;
}

.price-side-v2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    min-width: 0;
    flex: 1; /* Take available space */
}

.old-price-v2 {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 500;
    opacity: 0.5;
    margin-bottom: 2px;
    display: block;
}

.current-price-row-v2 {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.current-price-v2 {
    font-size: 18px;
    font-weight: 800;
    color: #10b981 !important;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.currency-v2 {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.8;
}

.discount-badge-v2 {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.rating-side-v2 {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
}

.rating-badge-v2 {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.rating-badge-v2 i {
    color: #fbbf24;
    font-size: 9px;
}

.rating-val-v2 {
    color: var(--text-color);
    font-weight: 700;
    font-size: 9px;
}






/* MOBILE OVERFLOW FIX FOR SHOWCASE HEADER */
@media (max-width: 768px) {
    .showcase-header {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    .showcase-title-wrapper {
        flex: 1 !important;
        min-width: 0 !important;
        gap: 6px !important;
    }
    .showcase-title {
        max-width: none !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        line-height: 1 !important;
        letter-spacing: -0.2px !important;
    }
    .showcase-title-icon {
        width: 30px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
        border-radius: 10px !important;
    }
    .showcase-title-icon i {
        font-size: 14px !important;
    }
    .popular-slider-arrows {
        flex-shrink: 0 !important;
    }
    .slider-arrow {
        width: 30px !important;
        height: 30px !important;
    }
}


/* Ürün sayfası panelleri — köşeler hafif sertleştirildi.
   .sidebar-box blog sayfasında da kullanıldığı için kural ürün sayfasıyla sınırlandı. */
.product-detail-area .sidebar-box {
    border-radius: 16px;
}


/* ── Ürün sayfası sekmeleri: başlık ve içerik tek panelde birleştirildi ──
   Önceden .tabs-header boşlukta duruyor, içerik ayrı bir kart olarak
   16px aşağıda başlıyordu. Artık ikisi tek kart; sekme çubuğu kartın
   üstünde, altında ayırıcı çizgiyle oturuyor.
   Tüm kurallar .product-detail-tabs altında: .tab-btn sınıfı kategori ve
   üye paneli sayfalarında da kullanıldığı için oralara sızmamalı. */
.product-detail-tabs {
    background: var(--card-bg, #0f172a);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.product-detail-tabs .tabs-header {
    justify-content: flex-start;
    gap: 28px;
    padding: 0 28px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}
.product-detail-tabs .tab-btn {
    padding: 18px 0;
    font-size: 16px;
}
.product-detail-tabs .tabs-content {
    padding: 28px;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin-top: 0;
    box-shadow: none;
}
@media (max-width: 768px) {
    .product-detail-tabs .tabs-header {
        gap: 18px;
        padding: 0 16px;
    }
    .product-detail-tabs .tab-btn {
        padding: 14px 0;
        font-size: 14px;
    }
    .product-detail-tabs .tabs-content {
        padding: 18px 16px;
        border-radius: 0;
    }
}


/* ── Ürün kartlarında fiyat/buton hizası ──
   Başlık 1, 2 veya 3 satır olabildiği için fiyat bloğu kartlar arasında
   farklı yüksekliklerde başlıyordu. Fiyat satırına margin-top:auto verilerek
   fiyat + buton kartın altına sabitlenir; başlık kaç satır olursa olsun
   aynı satırdaki tüm kartlarda fiyatlar aynı hizada durur. */
.product-card-modern .product-info-area .product-info-row-v2,
.listing-product-card .listing-card-info .product-info-row-v2 {
    margin-top: auto;
}


/* ── Ürün videosu (ilan açıklamasının üstünde) ── */
.urun-video-blok { margin: 0 0 22px; }

.urun-video-baslik {
    display: flex; align-items: center; gap: 8px;
    font-weight: 800; font-size: 17px;
    color: var(--text-color);
    margin-bottom: 10px;
}
.urun-video-baslik i { font-size: 15px; color: var(--primary-blue); }

.urun-video-cerceve {
    position: relative;
    width: 100%;
    /* Geniş ekranlarda video açıklamayı bastırmasın diye genişlik sınırı */
    max-width: 460px;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border-color);
}
.urun-video-cerceve iframe,
.urun-video-cerceve video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 768px) {
    .urun-video-blok { margin-bottom: 16px; }
    .urun-video-baslik { font-size: 15px; margin-bottom: 8px; }
    .urun-video-cerceve { border-radius: 11px; }
}