/* Varsayılan Tema Özel CSS ve V3 Tema Değişken Bağlantıları */

/* Genel Body Bağlantıları - Arka Plan ve Metin */
body {
    background-color: var(--tema-bg-light, #F1F5F9);
    color: var(--tema-text, #000000);
    font-family: var(--cnvs-body-font);
}

body.dark {
    background-color: var(--tema-bg-dark, #0A0A0F) !important;
    color: #ffffff;
}

/* Alt başlık ve sessiz metinler */
.text-muted,
p.lead {
    color: var(--tema-text-muted, #111111) !important;
}

/* Corner/Border Radius (Köşe Yumuşatma) Uygulamaları */
/* Kart, widget vb yapıların kapsayıcıları yuvarlak olmalı ki resim içinden taşınca kesilsin (overflow hidden) */
.card,
.feature-box,
.widget,
.portfolio-item,
.portfolio-item .portfolio-image,
.portfolio-image img,
.entry,
.entry-image img,
.product .grid-inner,
.product-image,
.product-image img,
.team-image,
.rounded,
.form-control,
.form-select {
    border-radius: var(--bs-border-radius, var(--tema-radius)) !important;
}

/* Resim taşmasını önleyip köşelerin görünür olmasını garanti eden sınıflar */
.product .grid-inner,
.entry,
.portfolio-item,
.card {
    overflow: hidden !important;
    /* Zoom efektinde vs köşeden taşmayı engeller */
}

/* Form elemanları ve küçük bileşenler biraz daha dar açılı yuvarlatılır */
.btn,
.button {
    border-radius: var(--bs-border-radius-sm, calc(var(--tema-radius) * 0.75)) !important;
}

/* Orijinal Canvas Efektlerini Koruma (Resim Zoom Efekti) Sadece Listelerde (Detay Hariç) */
.grid-inner .product-image img,
.entry-image img,
.portfolio-image img {
    transition: transform 0.5s ease;
}

.product:hover .grid-inner .product-image img,
.entry:hover .entry-image img,
.portfolio-item:hover .portfolio-image img {
    transform: scale(1.06);
}

/* -------------- KART STİLLERİ -------------- */
/* .card, .product, .entry vb. için stiller */

/* 1. Minimal (Çizgisiz) */
body.card-style-minimal .card,
body.card-style-minimal .product .grid-inner,
body.card-style-minimal .entry {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 2. Glassmorphism (Cam Efekti) */
body.card-style-glassmorphism .card,
body.card-style-glassmorphism .product .grid-inner,
body.card-style-glassmorphism .entry {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
    padding: 1.25rem !important;
    /* İÇ BOŞLUKLAR eklendi ki kutu olduğu belli olsun */
}

body.dark.card-style-glassmorphism .card,
body.dark.card-style-glassmorphism .product .grid-inner,
body.dark.card-style-glassmorphism .entry {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 3. Neumorphism */
body.card-style-neumorphism .card,
body.card-style-neumorphism .product .grid-inner,
body.card-style-neumorphism .entry {
    background: var(--tema-bg-light) !important;
    box-shadow: 8px 8px 16px #d1d5db, -8px -8px 16px #ffffff !important;
    border: none !important;
    padding: 1.25rem !important;
}

body.dark.card-style-neumorphism .card,
body.dark.card-style-neumorphism .product .grid-inner,
body.dark.card-style-neumorphism .entry {
    background: var(--tema-bg-dark) !important;
    box-shadow: 5px 5px 10px #030305, -5px -5px 10px #111119 !important;
}

/* 4. 3D Hover Efekti (Yukarı Zıplama) */
body.card-style-3d-hover .card,
body.card-style-3d-hover .product .grid-inner,
body.card-style-3d-hover .entry {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    background-color: #fff !important;
    border: 1px solid #efefef !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    padding: 1.25rem !important;
}

body.dark.card-style-3d-hover .card,
body.dark.card-style-3d-hover .product .grid-inner,
body.dark.card-style-3d-hover .entry {
    background-color: #1a1a24 !important;
    border-color: #2a2a35 !important;
}

body.card-style-3d-hover .card:hover,
body.card-style-3d-hover .product:hover .grid-inner,
body.card-style-3d-hover .entry:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
    border-color: var(--tema-primary) !important;
    z-index: 2;
    position: relative;
}

/* -------------- LAYOUT MODLARI -------------- */
/* Bento Layout - Kapsayıcı Kart Mantığı */
body.layout-bento .product .grid-inner,
body.layout-bento .entry {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    padding: 1.25rem !important;
}

body.layout-bento.dark .product .grid-inner,
body.layout-bento.dark .entry {
    background: #1e1e2d !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

body.layout-bento .product-desc,
body.layout-bento .entry-desc {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem 0 0 0 !important;
    /* İçeriğe özel ekstra padding */
}

body.layout-bento .product-image,
body.layout-bento .entry-image {
    border-radius: calc(var(--tema-radius) * 0.8) !important;
    overflow: hidden;
}

/* Magazine Layout - Dergisel Vurgular */
body.layout-magazine .heading-block h2,
body.layout-magazine .heading-block h3,
body.layout-magazine .product-title h3,
body.layout-magazine .entry-title h2 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

body.layout-magazine .product .grid-inner,
body.layout-magazine .entry {
    border-bottom: 4px solid var(--tema-primary) !important;
    border-radius: 0 !important;
    /* Dergi stilinde keskin hatlar önerilir */
    padding-bottom: 1.5rem !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
}

body.layout-magazine .product-image img,
body.layout-magazine .entry-image img {
    border-radius: 0 !important;
}


/* -------------- ÜRÜN KARTLARI YÜKSEKLİK & TİPOGRAFİ EŞİTLEMESİ -------------- */
/* Kategori ve anasayfa listelerindeki esneklik sorununu çözer (Detay sayfasını etkilemez) */
.product:has(.grid-inner) {
    display: flex;
}

.product .grid-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product .grid-inner .product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Ürün resim alanını kare olarak eşitler, bozukluğu engeller */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    overflow: hidden;
    padding: 0.1rem;
    /* Zoom anında resmin taşmasını engellemek için güvenli boşluk */
}

.product .grid-inner .product-image a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product .grid-inner .product-image img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* Resmi bozmadan çerçeve içine oturtur */
}

.product .product-desc {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* isimleri hizalamak için */
}

/* Ürün Seçenek/Baslık Typografi Düzeltmeleri */
.product .product-title h3 {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
    text-transform: none !important;
    font-weight: 600;
}


/* -------------- ÜRÜN DETAY SAYFASI GALERİ YÜKSEKLİK EŞİTLEMESİ -------------- */
/* Detay sayfasındaki ana resim tıklandıkça thumbnail alanının zıplamasını engeller */
.single-product .product-image .fslider .flexslider .slider-wrap .slide,
.single-product .product-image .fslider .flexslider .slider-wrap .slide a {
    height: 480px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.single-product .product-image .fslider .flexslider .slider-wrap .slide img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Utilities */
.bg-dark {
    background-color: var(--tema-bg-dark, #0A0A0F) !important;
}

.color-accent-2 {
    color: var(--tema-accent-2) !important;
}

.color-accent-3 {
    color: var(--tema-accent-3) !important;
}

.color-accent-4 {
    color: var(--tema-accent-4) !important;
}

.bg-accent-2 {
    background-color: var(--tema-accent-2) !important;
}

.bg-accent-3 {
    background-color: var(--tema-accent-3) !important;
}

.bg-accent-4 {
    background-color: var(--tema-accent-4) !important;
}