/*
    BU KODLAR ÜRÜN KATEGORİSİ SAYFA KISMINA AİT
*/

/* Kategori Detay Sayfası Genel Yapısı */
.category-detail {
    /* Header altında kalmaması için padding ayarı */
    padding: 160px 0 100px 0; 
    font-family: 'Poppins', sans-serif;
    position: relative;
    overflow: hidden;
    
    /* Clemix Kurumsal Arka Plan Yapısı */
    background-color: #0F2A6B; /* --primary-blue karşılığı */
    
    /* Arka plan katmanları: Nokta dokusu ve 3'lü gradyan geçişi */
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.08) 0.8px, transparent 0.8px), 
        radial-gradient(at 0% 0%, rgba(30, 136, 229, 0.15) 0px, transparent 50%), 
        radial-gradient(at 100% 0%, rgba(245, 124, 34, 0.1) 0px, transparent 50%),
        linear-gradient(135deg, #0F2A6B 0%, #2a52be 50%, #16327a 100%);

    background-size: 30px 30px, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed;
}

/* Profesyonel derinlik katan yansımaları da eklemek istersen (Opsiyonel) */
.category-detail::before {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(100px);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(245, 124, 34, 0.12) 0%, transparent 70%);
    top: -100px; right: -200px;
}

.category-detail h1 {
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
    font-weight: 700;
}

/* Başlık altındaki küçük çizgi */
.category-detail h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #F57C22;
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Ürün Grid Yapısı */
.urun-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* Ürün Kartı Tasarımı */
.clemix-urun-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #eef2f6;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02);
}

.clemix-urun-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(245, 124, 34, 0.12);
    border-color: #F57C22;
}

/* Kart Görseli */
.clemix-urun-thumb {
    height: 250px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.clemix-urun-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Kart İçeriği */
.clemix-urun-content {
    padding: 20px;
    text-align: center;
}

.clemix-urun-content h3 {
    color: #0F2A6B;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

.clemix-urun-content p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* İncele Butonu */
.incele-btn {
    display: inline-block;
    background: rgba(245, 124, 34, 0.08);
    color: #F57C22;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.clemix-urun-card:hover .incele-btn {
    background: linear-gradient(135deg, #F57C22 0%, #0F2A6B 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 124, 34, 0.3);
}













/* ================================================================
   CLEMIX MOBİL TEKLİ (SINGLE) ÜRÜN DİZİLİMİ - KESİN ÇÖZÜM
   ================================================================ */
@media screen and (max-width: 768px) {

    /* 1. Menü Altından Kurtarma (Daha Net Boşluk) */
    .category-detail {
        padding-top: 160px !important; 
        background-color: #E8F6FF !important;
    }

    /* 2. Grid'i Tekli Sıraya Düşür */
    .urun-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important; /* Ürünler arası ferah boşluk */
        padding: 0 20px !important;
    }

    /* 3. Kart Yapısı (Yatay/Kare Formu Arası) */
    .clemix-urun-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.05) !important;
        overflow: hidden !important;
    }

    /* 4. Görsel Alanı (Ürün Fotoğrafı) */
    .clemix-urun-thumb {
        height: 200px !important; /* Tekli sırada ürün daha büyük görünebilir */
        padding: 20px !important;
    }

    .clemix-urun-thumb img {
        max-height: 180px !important;
        object-fit: contain !important;
    }

    /* 5. Yazı Alanı (Puntolar Dengelendi) */
    .clemix-urun-content {
        padding: 20px !important;
        text-align: center !important;
    }

    /* Ürün İsmi */
    .clemix-urun-content h3 {
        font-size: 18px !important; /* Tekli sırada 18px çok şık durur */
        color: #0F2A6B !important;
        margin-bottom: 10px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    /* Açıklama Metni (p) */
    .clemix-urun-content p {
        font-size: 13px !important;
        color: #666 !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
        display: block !important; /* Tekli sırada gizlemeye gerek yok */
    }

    /* 6. Barkod Görseli (Küçültüldü) */
    .clemix-urun-content img {
        width: 80px !important; /* Barkodu makul bir seviyeye çektik */
        height: auto !important;
        margin: 0 auto 15px !important;
        display: block !important;
        opacity: 0.7;
    }

    /* 7. İncele Butonu (Tam Genişlik) */
    .incele-btn {
        display: block !important;
        width: 100% !important;
        padding: 12px 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #F57C22 0%, #0F2A6B 100%) !important;
        color: #fff !important;
        text-transform: uppercase !important;
        box-shadow: 0 4px 15px rgba(245, 124, 34, 0.2) !important;
    }
}




















/* --- Shway Modern Kategori Bilgi Bölümü --- */

/* Google Fonts'tan Inter fontunu çekiyoruz (Eğer temanızda yoksa) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.shway-modern-info {
    margin: 60px auto;
    max-width: 1200px; /* İçeriği merkezlemek için */
    font-family: 'Inter', sans-serif; /* Modern, temiz font */
    padding: 0 20px; /* Mobil boşluk */
}

/* Cam Efektli Ana Konteyner */
.shway-glass-container {
    background: rgba(255, 255, 255, 0.95); /* Hafif saydam beyaz */
    backdrop-filter: blur(10px); /* Arka planı bulandırır (cam efekti) */
    padding: 40px;
    border-radius: 24px; /* Çok yumuşak köşeler */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05); /* Derinlik hissi veren hafif gölge */
    border: 1px solid rgba(255, 255, 255, 0.3); /* İnce beyaz sınır */
    position: relative;
    overflow: hidden;
}

/* Üst Tarafa Hafif bir Renk Gradyanı (Kurumsal Mavi) */
.shway-glass-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #061772, #1a365d, #061772);
}

/* Logo ve Başlık Satırı */
.shway-header-row {
    display: flex;
    align-items: center; /* Dikeyde ortalar */
    gap: 25px; /* Logo ve metin arası boşluk */
    margin-bottom: 25px;
}

/* Logo Çerçevesi */
.shway-logo-frame img {
    max-width: 90px; /* Logo boyutu */
    height: auto;
    display: block;
    border-radius: 12px;
    padding: 10px;
    background: #f8f9fa; /* Logoya temiz bir arka plan */
    border: 1px solid #eaeaea;
}

/* Başlık Grubu */
.shway-title-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Kategori Etiketi */
.shway-category-badge {
    background: #f0f4f8;
    color: #1a365d;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    align-self: flex-start;
}

/* Ana Başlık - Modern Punto */
.shway-main-title {
    color: #061772;
    font-size: 22px; /* Zarif, modern başlık boyutu */
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Modern Ayırıcı Çizgi */
.shway-divider {
    height: 1px;
    background: linear-gradient(90deg, #eee, transparent);
    margin-bottom: 30px;
}

/* Minimalist Metin - Küçük Punto */
.shway-description-text {
    line-height: 1.7; /* Okunabilirlik için ideal aralık */
    color: #4a5568; /* Koyu gri, modern metin rengi */
    font-size: 14px; /* İstediğin gibi küçük punto */
    text-align: left; /* Modern duruş (justify yerine) */
}

.shway-description-text p {
    margin-bottom: 15px;
}

.shway-description-text strong {
    color: #2d3748;
    font-weight: 600;
}

/* Mobil Uyumluluk (Tablet ve Telefon) */
@media (max-width: 768px) {
    .shway-glass-container {
        padding: 25px;
        border-radius: 16px;
    }
    
    .shway-header-row {
        flex-direction: column; /* Mobilde logo ve metni alt alta alır */
        text-align: center;
        gap: 15px;
    }
    
    .shway-logo-frame img {
        margin: 0 auto;
    }

    .shway-title-group {
        align-items: center;
    }

    .shway-main-title {
        font-size: 18px;
    }

    .shway-description-text {
        font-size: 13px;
        text-align: center; /* Mobilde metni ortalar */
    }
}