/* tema fontları — @import dosya başında olmalı */
/* v2 */
/* Kampanya sayacı — ecomus tf-countdown style-rectangle tabanlı */
.esc-kampanya-sayaci { display:inline-flex; flex-direction:column; align-items:flex-start; gap:12px; margin:20px 0; background:transparent !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; }
.esc-kampanya-sayaci .esc-ks-etiket { font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--main,#111); line-height:1; }
.esc-kampanya-sayaci .esc-ks-grid { display:flex; align-items:center; gap:8px; }
.esc-kampanya-sayaci .esc-ks-hucre { display:flex; flex-direction:column; align-items:center; justify-content:center; width:61px; height:72px; background-color:var(--white,#fff); border:1px solid var(--line,#e8e8e8); border-radius:3px; }
.esc-kampanya-sayaci .esc-ks-deger { font-size:32px; font-weight:500; line-height:1.2; color:var(--main,#111); font-variant-numeric:tabular-nums; }
.esc-kampanya-sayaci .esc-ks-birim { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; line-height:1; margin-top:4px; color:var(--main,#111); }
.esc-kampanya-sayaci .esc-ks-ayrac { font-size:28px; font-weight:400; color:var(--main,#111); opacity:.35; line-height:1; padding-bottom:16px; }
.esc-kampanya-sayaci.esc-ks-dark .esc-ks-etiket { color:#fff; }
.esc-kampanya-sayaci.esc-ks-dark .esc-ks-hucre { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.2); }
.esc-kampanya-sayaci.esc-ks-dark .esc-ks-deger,.esc-kampanya-sayaci.esc-ks-dark .esc-ks-birim { color:#fff; }
.esc-kampanya-sayaci.esc-ks-dark .esc-ks-ayrac { color:#fff; opacity:.4; }
.esc-kampanya-sayaci.esc-ks-bitti { display:none; }
@media(max-width:576px){.esc-kampanya-sayaci .esc-ks-hucre{width:50px;height:60px}.esc-kampanya-sayaci .esc-ks-deger{font-size:24px}.esc-kampanya-sayaci .esc-ks-birim{font-size:10px}.esc-kampanya-sayaci .esc-ks-ayrac{font-size:22px;padding-bottom:13px}.esc-kampanya-sayaci .esc-ks-grid{gap:5px}}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Playfair+Display:wght@400;500;600;700&family=Jost:wght@300;400;500;600&family=Raleway:wght@300;400;500;600&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ===== EKSİK İKON EŞLEMELERİ ===== */
.icon-call:before { content: "\e95d"; }
.icon-phone:before { content: "\e95d"; }
.icon-check-circle:before { content: "\e911"; }
.icon-credit-card:before { content: "\e90f"; }
.icon-send:before { content: "\e903"; }
.icon-shield:before { content: "\e950"; }
.icon-map-pin:before { content: "\e947"; }
.icon-trash:before { content: "\e917"; }
.icon-truck:before { content: "\e953"; }
.icon-plus:before { content: "+"; font-family: inherit !important; font-weight: 700; }
.icon-tag:before { content: "\e93d"; }
.icon-info:before { content: "\e94b"; }
.icon-info-circle:before { content: "\e94b"; }
.icon-image:before { content: "\e943"; }
.icon-warning:before { content: "\e94b"; }
.icon-facebook:before { content: "\e921"; }

/* ===== BOOK STORE HEADER ===== */
#allCategoriesDropdown { position: relative; }
.bookstore-cat-dropdown {
    position: absolute; top: 100%; left: 0; min-width: 260px;
    background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.12); z-index: 1000;
    border-radius: 0 0 8px 8px; padding: 8px 0;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all .25s ease;
}
#allCategoriesDropdown:hover .bookstore-cat-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.bookstore-cat-link {
    display: flex; align-items: center; padding: 8px 16px;
    font-size: 13px; color: #333; text-decoration: none; transition: all .2s;
}
.bookstore-cat-link:hover { background: #f8f8f8; color: #000; padding-left: 20px; }
.bookstore-cat-item.has-sub { position: relative; }
.bookstore-cat-sub {
    position: absolute; top: 0; left: 100%; min-width: 400px;
    background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.12);
    border-radius: 8px; padding: 16px 20px;
    opacity: 0; visibility: hidden; transition: all .2s ease;
}
.bookstore-cat-item.has-sub:hover > .bookstore-cat-sub {
    opacity: 1; visibility: visible;
}
.bookstore-sub-link:hover { color: #000 !important; padding-left: 4px; }
.bookstore-nav-link { position: relative; padding: 4px 0; transition: color .2s; white-space: nowrap; }
.bookstore-nav-link:hover { color: var(--primary, #000) !important; }
@media (max-width: 991px) {
    .bookstore-cat-dropdown, .bookstore-cat-sub { display: none !important; }
}

/* Header Dropdown Menü Düzeltme */
.box-nav-ul .menu-item { position: relative; }
.box-nav-ul .menu-item .sub-menu.submenu-default {
    position: absolute; top: 100%; left: 0; min-width: 220px;
    background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,.1); z-index: 1000;
    padding: 10px 0; border-radius: 0 0 4px 4px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all .25s ease;
}
.box-nav-ul .menu-item:hover > .sub-menu.submenu-default {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.sub-menu.submenu-default .menu-list { list-style: none; padding: 0; margin: 0; }
.sub-menu.submenu-default .menu-list li { padding: 0; }
.sub-menu.submenu-default .menu-list li a {
    display: block; padding: 6px 20px; color: #333; font-size: 14px;
    transition: color .2s, padding-left .2s;
}
.sub-menu.submenu-default .menu-list li a:hover { color: #000; padding-left: 25px; }

/* Ürün Açıklama Normalizasyonu */
.product-description { font-size: 14px; line-height: 1.7; color: #555; word-wrap: break-word; overflow-wrap: break-word; }
.product-description img { max-width: 100%; height: auto; }
.product-description h1, .tf-product-des-demo h1 { font-size: 1.15em; margin: 15px 0 10px; color: #333; }
.product-description h2, .tf-product-des-demo h2 { font-size: 1.1em; margin: 14px 0 8px; color: #333; }
.product-description h3, .tf-product-des-demo h3 { font-size: 1.05em; margin: 12px 0 8px; color: #333; }
.product-description h4, .product-description h5, .product-description h6,
.tf-product-des-demo h4, .tf-product-des-demo h5, .tf-product-des-demo h6 { font-size: 1em; margin: 10px 0 8px; color: #333; }
.tf-product-des-demo { font-size: 14px; line-height: 1.7; color: #555; word-wrap: break-word; }
.tf-product-des-demo img { max-width: 100%; height: auto; }
.tf-product-des-demo table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.tf-product-des-demo table td, .tf-product-des-demo table th { padding: 8px; border: 1px solid #ddd; font-size: 13px; }
.tf-product-des-demo p { margin-bottom: 10px; }
.tf-product-des-demo ul, .tf-product-des-demo ol { padding-left: 20px; margin-bottom: 10px; }
.product-description table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.product-description table td, .product-description table th { padding: 8px; border: 1px solid #ddd; font-size: 13px; }
.product-description p { margin-bottom: 10px; }
.product-description ul, .product-description ol { padding-left: 20px; margin-bottom: 10px; }
.product-description iframe { max-width: 100%; }

/* Hesabım sidebar — mobil offcanvas butonu */
.btn-sidebar-account { text-align: center; margin: 10px 0; }

/* Mega Menu */
/* Panel 1200px genişliğinde ve left:50% + translateX(-50%) ile ORTALANIYOR.
   Bu ölçü ancak tam genişlikte bir ataya göre anlamlı; oysa .box-nav-ul .menu-item
   position:relative olduğu için panel AÇILDIĞI ÖĞEYE göre ortalanıyordu. Mega menü
   taşıyan öğe menünün sağ yarısındaysa panel ekranın dışına taşıp sayfaya yatay
   kaydırma çubuğu ekliyor — üstelik panel gizliyken bile, çünkü visibility:hidden
   öğeler scrollWidth'e dahil. (Her Sepette'de menüye kategoriler eklenip "Ürünler"
   sağa kayınca 201px taşma oluştu.)

   Çözüm: mega menü taşıyan öğeyi static'e çekiyoruz; panel o zaman #header'a, yani
   sayfanın ortasına hizalanıyor. Dar (normal) alt menüler relative kalır, kendi
   öğelerinin altında açılmaya devam eder.

   !important şart: markup'ta öğe Bootstrap'in .position-relative utility'sini
   taşıyor ve o sınıf position'ı !important ile veriyor — normal kural yeniliyor. */
#header { position: relative; }
.box-nav-ul .menu-item:has(> .sub-menu.mega-menu) { position: static !important; }

.box-nav-ul .menu-item .sub-menu.mega-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
    width: 96vw; max-width: 1200px;
    background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.15); z-index: 1000;
    padding: 0; border-radius: 0 0 8px 8px;
    opacity: 0; visibility: hidden;
    transition: all .3s cubic-bezier(.4,0,.2,1);
}
.box-nav-ul .menu-item:hover > .sub-menu.mega-menu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* Mega Menu Grid */
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0;
    padding: 24px 28px 16px;
}
.mega-menu-col {
    padding: 0 12px;
    border-right: 1px solid #f5f5f5;
}
.mega-menu-col:last-child { border-right: none; }

/* Kategori Header — görsel + başlık */
.mega-cat-header { margin-bottom: 12px; text-align: center; }
.mega-cat-img-wrap {
    display: block; width: 80px; height: 80px; margin: 0 auto 10px;
    border-radius: 50%; overflow: hidden;
    border: 2px solid #f0f0f0;
    transition: border-color .3s, transform .3s;
}
.mega-cat-img-wrap:hover { border-color: #000; transform: scale(1.05); }
.mega-cat-img { width: 100%; height: 100%; object-fit: cover; }
.mega-cat-title {
    display: block; font-size: 13px; font-weight: 700; color: #111;
    text-decoration: none; text-transform: uppercase; letter-spacing: .4px;
    transition: color .2s;
}
.mega-cat-title:hover { color: #555; }

/* Alt Kategori Listesi */
.mega-cat-list {
    list-style: none; padding: 0; margin: 8px 0 0;
    text-align: center;
}
.mega-cat-list li { padding: 0; }
.mega-cat-list li a {
    display: block; padding: 4px 0; color: #777; font-size: 12.5px;
    text-decoration: none; transition: color .2s, padding-left .15s;
}
.mega-cat-list li a:hover { color: #000; }
.mega-cat-more { font-weight: 600 !important; color: #333 !important; font-size: 12px !important; margin-top: 4px; }
.mega-cat-sub { font-size: 11px !important; color: #aaa !important; padding: 2px 0 !important; padding-left: 10px !important; }
.mega-cat-sub:hover { color: #555 !important; }

/* Mega Menü Footer */
.mega-menu-footer {
    border-top: 1px solid #f0f0f0;
    padding: 12px 28px;
    text-align: center;
    background: #fafafa;
    border-radius: 0 0 8px 8px;
}
.mega-menu-all-link {
    display: inline-flex; align-items: center;
    font-size: 13px; font-weight: 600; color: #333;
    text-decoration: none; transition: color .2s;
}
.mega-menu-all-link:hover { color: #000; }

/* ---- Kompakt mega menü ----------------------------------------------------
   Sunucu, alt kategorisi olmayan ve en çok 6 ana kategorisi olan kiracılarda
   panele .mega-kompakt sınıfını basar (TemaYardimcisi.MegaMenuSinif). Orada
   geniş grid iki sorun çıkarıyordu: 1200px'lik panel hero'yu kapatıyor, ayrıca
   menü öğesi `position: static` olduğu için panel #header'a göre ortalanıyor ve
   tetikleyen bağlantının hizasında durmuyor — hedefe gitmek uzun fare yolu.
   Burada panel tetikleyicinin altına dar bir dikey listeye iniyor. */
.box-nav-ul .menu-item:has(> .sub-menu.mega-menu.mega-kompakt) {
    position: relative !important;
}
.box-nav-ul .menu-item .sub-menu.mega-menu.mega-kompakt {
    width: 248px;
    max-width: 248px;
    border-radius: 0;
    transform: translateX(-50%) translateY(4px);
}
.box-nav-ul .menu-item:hover > .sub-menu.mega-menu.mega-kompakt {
    transform: translateX(-50%) translateY(0);
}
/* Menü ile panel arasındaki boşlukta hover kopmasın */
.mega-kompakt::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -14px;
    height: 14px;
}
/* Bootstrap .container'ın yan boşluğu dar panelde taşma yapıyor */
.mega-kompakt > .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
/* overflow-y tek başına verilince overflow-x da auto'ya düşüp
   panelin altında yatay kaydırma çubuğu çıkarıyordu. */
.mega-kompakt .mega-menu-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 4px 0;
    max-height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.mega-kompakt .mega-menu-col {
    padding: 0;
    border-right: none;
}
.mega-kompakt .mega-menu-col + .mega-menu-col .mega-cat-header {
    border-top: 1px solid rgba(128,128,128,.12);
}
.mega-kompakt .mega-cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 14px;
    text-align: left;
    transition: background-color .2s;
}
/* Gri alfa: hem açık hem koyu zeminli temalarda tek kuralla çalışır */
.mega-kompakt .mega-cat-header:hover {
    background-color: rgba(128,128,128,.14);
}
.mega-kompakt .mega-cat-img-wrap {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 0;
    border-width: 1px;
}
.mega-kompakt .mega-cat-img-wrap:hover {
    transform: none;
}
/* Temalar alt menü linklerini hover'da sağa kaydırıyor (elegante: 24px).
   Kompakt listede satırın kendisi vurgulandığı için kayma sadece zıplatıyor.
   Tema kuralları !important taşıdığından selector onlardan özgül olmalı. */
.box-nav-ul .menu-item .sub-menu.mega-menu.mega-kompakt .mega-cat-header a:hover {
    padding-left: 0 !important;
    background: transparent !important;
}
/* Uzun isimler sarmasın: geniş harf aralığı + uppercase üç satıra bölüyordu */
.mega-kompakt .mega-cat-title {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Elle seçilen kolon sayısı -------------------------------------------
   Panelde bir menü öğesine "kaç kolon" seçildiyse sunucu .mega-kol-N basar
   (TemaYardimcisi.MegaMenuSinif). Otomatik yerleşim `auto-fill minmax(160px)`
   olduğu için 29 alt kategorili bir başlıkta kategoriler tek uzun satıra
   diziliyordu; burada satır sayısı kullanıcının seçimine göre sabitlenir.

   Bu sınıf geldiğinde .mega-kompakt hiç basılmaz, yani ikisi çakışmaz. */
.mega-menu.mega-kol-2 .mega-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-menu.mega-kol-3 .mega-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-menu.mega-kol-4 .mega-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-menu.mega-kol-5 .mega-menu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mega-menu.mega-kol-6 .mega-menu-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Satırlar arasında nefes payı */
.mega-menu[class*="mega-kol-"] .mega-menu-grid { row-gap: 22px; }

/* Dikey ayraç: temanın kuralı yalnızca EN SON hücreden çizgiyi kaldırıyor. Grid tek
   satırken bu yetiyordu; kolon sayısı sabitlenince panel satır satır büyüdüğü için
   her satırın sonundaki hücre de panelin sağ kenarına çizgi basıyordu. Ayraç bu
   yüzden hücrenin son çocuk olmasına değil, SATIR SONUNDA olmasına bakıyor.
   Kırılım noktalarında kolon sayısı değiştiği için kural orada tekrar kuruluyor. */
.mega-menu[class*="mega-kol-"] .mega-menu-col { border-right: 1px solid rgba(128,128,128,.12); }
.mega-menu.mega-kol-2 .mega-menu-col:nth-child(2n),
.mega-menu.mega-kol-3 .mega-menu-col:nth-child(3n),
.mega-menu.mega-kol-4 .mega-menu-col:nth-child(4n),
.mega-menu.mega-kol-5 .mega-menu-col:nth-child(5n),
.mega-menu.mega-kol-6 .mega-menu-col:nth-child(6n),
.mega-menu[class*="mega-kol-"] .mega-menu-col:last-child { border-right: none; }

/* Dar ekranda 5-6 kolon okunmuyor; kademeli olarak azaltılıyor. */
@media (max-width: 1400px) {
    .mega-menu.mega-kol-6 .mega-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mega-menu.mega-kol-5 .mega-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Artık 4 kolon: 5n/6n satır sonu değil, 4n satır sonu. Geri kurma satırı
       tüm hücreleri kapsıyor, yoksa geniş ekranın 5n/6n istisnaları burada
       satır ORTASINA denk gelip ayraçsız delik bırakıyor. */
    .mega-menu.mega-kol-5 .mega-menu-col:nth-child(n),
    .mega-menu.mega-kol-6 .mega-menu-col:nth-child(n) { border-right: 1px solid rgba(128,128,128,.12); }
    .mega-menu.mega-kol-5 .mega-menu-col:nth-child(4n),
    .mega-menu.mega-kol-6 .mega-menu-col:nth-child(4n),
    .mega-menu[class*="mega-kol-"] .mega-menu-col:last-child { border-right: none; }
}
@media (max-width: 1199px) {
    .mega-menu[class*="mega-kol-"] .mega-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mega-menu.mega-kol-2 .mega-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 2 kolonluk düzen hariç hepsi 3 kolona indi. Önce ayraçlar geri kuruluyor,
       sonra satır sonları temizleniyor. Kural "3n hariç kol-2" diye kurulmuyor:
       6. hücre hem 2n hem 3n olduğu için o yazım kendi kendini bozardı.

       :nth-child(n) hiçbir hücreyi elemez, sadece ÖZGÜLLÜK dengeler: geniş ekran
       kuralları (…:nth-child(4n)) bir pseudo-class daha taşıdığı için geri kurma
       onlara yeniliyor ve satır ortasındaki hücreler ayraçsız kalıyordu. */
    .mega-menu[class*="mega-kol-"] .mega-menu-col:nth-child(n) { border-right: 1px solid rgba(128,128,128,.12); }
    .mega-menu.mega-kol-3 .mega-menu-col:nth-child(3n),
    .mega-menu.mega-kol-4 .mega-menu-col:nth-child(3n),
    .mega-menu.mega-kol-5 .mega-menu-col:nth-child(3n),
    .mega-menu.mega-kol-6 .mega-menu-col:nth-child(3n),
    .mega-menu.mega-kol-2 .mega-menu-col:nth-child(2n),
    .mega-menu[class*="mega-kol-"] .mega-menu-col:last-child { border-right: none; }
}

/* ---- Header Style 4 alt barı: kategori düğmesi + menü aynı satırda ----------
   Alt bar solda ~260px'lik "Tüm Kategoriler" düğmesi taşıyor; menü uzayınca
   ikisi aynı satıra sığmıyordu ve düğme menünün ilk öğesinin üstüne biniyordu.
   Sol kutu artık içeriğinden dar olamıyor (bkz. _HeaderStyle4.cshtml), burada da
   menüye yer açılıyor: öğe arası boşluk ekran daraldıkça küçülüyor.

   Yer yine yetmezse menü ÜST ÜSTE BİNMEK yerine ikinci satıra sarar. Kaydırmalı
   (overflow-x) çözüm denendi ve elendi: taşma ekseni kısıtlanınca alt menüler de
   kırpılıyor, açılan mega panel görünmez oluyordu. Sarma alt menüleri bozmuyor.

   Bu bir son çare — 8 üst seviye başlık, üstelik ikisi çok uzun ("Bahçe &
   Elektrikli El Aletleri"), bu düzene gerçekten sığmıyor; kalıcı çözüm menüyü
   gruplayıp üst seviye başlık sayısını düşürmek. */
@media (max-width: 1599.98px) {
    .header-style-4 .header-bottom .box-nav-ul.gap-30 { gap: 20px !important; }
}
@media (max-width: 1399.98px) {
    .header-style-4 .header-bottom .box-nav-ul.gap-30 { gap: 14px !important; }
}
.header-style-4 .header-bottom .box-navigation { min-width: 0; }
.header-style-4 .header-bottom .box-nav-ul {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* Mobile Bottom Toolbar body spacing */
@media (max-width: 991px) {
    body { padding-bottom: 60px; }
}

/* Mobil yatay kayma engelle — sadece mobilde */
@media (max-width: 991px) {
    html, body { overflow-x: hidden; }
}

/* Slider */
.tf-slideshow { margin-bottom: 0 !important; }
.tf-slideshow .wrap-slider { position: relative; }
.tf-slideshow .wrap-slider img { border-radius: 0 !important; }
.tf-slideshow .swiper-slide { border-radius: 0 !important; }
.slider-video-wrap { border-radius: 0 !important; }
.slider-img { width: 100%; height: auto; min-height: 300px; max-height: 70vh; object-fit: cover; display: block; }
.slider-placeholder {
    width: 100%; min-height: 280px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary, #3c71d7) 0%, #1a1a2e 100%);
    padding: 40px 20px;
}
/* Slider pagination — görselin üstünde */
.tf-slideshow .wrap-pagination { position: absolute !important; bottom: 14px !important; left: 0; right: 0; z-index: 10; }

/* Mobil Responsive Özelleştirmeler */
@media only screen and (max-width: 767px) {
    .tf-slideshow .wrap-slider { height: auto !important; }
    .slider-img { min-height: 180px !important; max-height: 250px !important; }
    .slider-placeholder { min-height: 180px !important; padding: 24px 16px !important; }
    .tf-slideshow .slider-video-wrap { padding-bottom: 56.25% !important; }
    .tf-slideshow .box-content .heading { font-size: 16px !important; }
    .tf-slideshow .box-content .subheading { font-size: 11px !important; }
    .tf-slideshow .wrap-pagination { bottom: 10px !important; }
    .tf-main-product-description .nav-tabs { flex-direction: column; border-bottom: none; }
    .tf-main-product-description .nav-tabs .nav-link { border: 1px solid #dee2e6; border-radius: 0; margin-bottom: -1px; text-align: left; padding: 12px 15px; }
    .tf-main-product-description .nav-tabs .nav-link.active { background: #f8f9fa; font-weight: 600; }
    #sepetDrawer { width: 100% !important; }
    #canliAramaSonuc { max-height: 300px; }
    .d-flex.justify-content-center .gap-3 { gap: 0.5rem !important; }
    .d-flex.justify-content-center .gap-3 span:not(.badge) { font-size: 12px; }
    .d-flex.justify-content-center div[style*="width:60px"] { width: 30px !important; }
    .collection-item-circle img,
    .collection-item-circle .rounded-circle { width: 100px !important; height: 100px !important; }
    .col-lg-4 .card { margin-top: 20px; }
    .yuvarlak-kat-link { width: 75px !important; height: 75px !important; }
    section .nav-tabs.justify-content-center { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    section .nav-tabs.justify-content-center::-webkit-scrollbar { display: none; }
    section .nav-tabs.justify-content-center .nav-link { white-space: nowrap; flex-shrink: 0; }
}
@media only screen and (max-width: 991px) {
    .thumbs-slider .tf-product-media-thumbs { display: none; }
    .thumbs-slider .tf-product-media-main { width: 100%; }
}

/* ===================================================================
   TEMA-SANAT — Lüks Minimalizm (Sanat & El Sanatları)
   İlham: siyah/krem/altın palet, serif başlıklar, bol beyaz alan.
   renk_sinifi="tema-sanat" ile body'ye uygulanır.
   =================================================================== */
.tema-sanat {
    --primary: #b8965a;            /* sıcak altın — turcoelegante tonu */
    --main: #141414;               /* siyaha yakın */
    --backdrop: #f9f7f3;           /* krem zemin */
    background-color: #f9f7f3;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    color: #1a1a1a;
    letter-spacing: .01em;
}

/* Başlıklar — zarif serif, editorial */
.tema-sanat h1, .tema-sanat h2, .tema-sanat h3,
.tema-sanat h4, .tema-sanat h5, .tema-sanat h6,
.tema-sanat .heading,
.tema-sanat .tf-cart-title,
.tema-sanat .product-name,
.tema-sanat .card-product .title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    letter-spacing: .03em;
    color: #141414;
    line-height: 1.25;
}
.tema-sanat h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: .06em; font-weight: 400; }
.tema-sanat h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.tema-sanat h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }

/* Ürün kartı başlığı — italic serif (galeri etiket hissi) */
.tema-sanat .card-product .title {
    font-style: italic;
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: .01em;
}

/* Butonlar — siyah zemin, keskin köşe, harf aralıklı */
.tema-sanat .tf-btn.btn-fill,
.tema-sanat .tf-btn.btn-dark,
.tema-sanat .btn-dark,
.tema-sanat button[type="submit"].tf-btn {
    background: #171717;
    border-color: #171717;
    color: #fff;
    border-radius: 0 !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    transition: background .25s ease, color .25s ease;
}
.tema-sanat .tf-btn.btn-fill:hover,
.tema-sanat .tf-btn.btn-dark:hover {
    background: #a8852e;
    border-color: #a8852e;
    color: #fff;
}
.tema-sanat .tf-btn.btn-line {
    border-radius: 0 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
}
.tema-sanat .tf-btn.btn-line:hover { color: #a8852e; }

/* Kartlar — galeri stili, keskin köşe, şeffaf zemin */
.tema-sanat .card-product,
.tema-sanat .card-product .card-product-wrapper,
.tema-sanat .card-product img,
.tema-sanat .wishlist-card,
.tema-sanat .collection-item,
.tema-sanat .img-box {
    border-radius: 0 !important;
}
.tema-sanat .card-product .card-product-wrapper {
    background: transparent;
    box-shadow: none;
}
/* Galeri hover — hafif opacity düşürme (zoom yerine) */
.tema-sanat .card-product .card-product-wrapper img {
    transition: opacity .5s ease;
}
.tema-sanat .card-product:hover .card-product-wrapper img {
    opacity: .88;
}
/* Ürün alt bilgi alanı — daha fazla boşluk */
.tema-sanat .card-product .card-product-info {
    padding-top: 14px;
    padding-bottom: 4px;
}
/* Grid arası boşluk — turcoelegante gibi havadar */
.tema-sanat .grid-layout,
.tema-sanat .tf-grid-layout {
    gap: 36px 28px !important;
}
/* Ürün listesi genel padding */
.tema-sanat .flat-animate-tab,
.tema-sanat .flat-tab-store {
    padding-top: 20px;
}

/* Fiyat — ince, altın ton */
.tema-sanat .price,
.tema-sanat .price-now,
.tema-sanat .current-price {
    color: #b8965a;
    font-weight: 400;
    font-family: 'Raleway', sans-serif;
    letter-spacing: .06em;
    font-size: .88rem;
}

/* Header — krem zemin, havadar, turcoelegante minimal */
.tema-sanat #header,
.tema-sanat header.header-default,
.tema-sanat .header-minimal,
.tema-sanat .header-style-2,
.tema-sanat .header-style-3 {
    background: #f9f7f3;
    border-bottom: 1px solid #e4ddd2;
    padding-top: 6px;
    padding-bottom: 6px;
}
/* Logo — daha büyük, serif karakter */
.tema-sanat .logo-header img,
.tema-sanat .header-logo img {
    max-height: 48px;
    width: auto;
}
/* Menü linkleri */
.tema-sanat .box-nav-ul .menu-item > a,
.tema-sanat nav .menu-item > a {
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    font-family: 'Raleway', sans-serif;
    color: #141414;
    padding-top: 8px;
    padding-bottom: 8px;
}
.tema-sanat .box-nav-ul .menu-item > a:hover,
.tema-sanat nav .menu-item > a:hover { color: #b8965a; }
/* Header ikonları */
.tema-sanat .nav-icon .icon,
.tema-sanat .header-action .action-icon {
    color: #141414;
}
.tema-sanat .nav-icon .icon:hover,
.tema-sanat .header-action .action-icon:hover { color: #b8965a; }

/* Top bar — siyah bant, Raleway */
.tema-sanat .tf-top-bar {
    background: #141414 !important;
    color: #f0ebe0;
}
.tema-sanat .tf-top-bar .top-bar-text {
    color: #f0ebe0;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 10px;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}
.tema-sanat .tf-top-bar .tb-select { color: #f0ebe0; }

/* Footer — koyu zemin, krem metin */
.tema-sanat footer,
.tema-sanat .footer {
    background: #141414;
    color: #c8c0b0;
}
.tema-sanat footer a, .tema-sanat .footer a { color: #c8c0b0; }
.tema-sanat footer a:hover, .tema-sanat .footer a:hover { color: #b8965a; }
.tema-sanat footer h5, .tema-sanat footer h6,
.tema-sanat .footer h5, .tema-sanat .footer h6 {
    color: #f0ebe0;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 11px;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
}
/* Footer logo */
.tema-sanat footer .logo-footer img { filter: brightness(0) invert(1); opacity: .85; }
/* Footer alt çizgi */
.tema-sanat .footer-bottom {
    border-top: 1px solid #2a2a2a;
}

/* Form alanları — keskin köşe, ince çizgi */
.tema-sanat input.tf-field,
.tema-sanat .form-control,
.tema-sanat .form-checkout input,
.tema-sanat .form-checkout select,
.tema-sanat .form-checkout textarea {
    border-radius: 0 !important;
    border-color: #d8d2c4;
    background: #fff;
}
.tema-sanat input:focus, .tema-sanat select:focus, .tema-sanat textarea:focus {
    border-color: #a8852e !important;
    box-shadow: none !important;
}

/* Rozetler — altın çerçeveli, Raleway */
.tema-sanat .on-sale-item,
.tema-sanat .badge-yeni,
.tema-sanat .card-product .on-sale-wrap .on-sale-item {
    background: transparent;
    border: 1px solid #b8965a;
    color: #b8965a;
    border-radius: 0;
    letter-spacing: .14em;
    font-size: 9px;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    padding: 2px 7px;
}

/* Slider metin — editorial büyük başlık */
.tema-sanat .banner-gr-title,
.tema-sanat .slider-title,
.tema-sanat .box-title-slider h2,
.tema-sanat .box-title-slider h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    letter-spacing: .04em;
    line-height: 1.15;
}
/* Marquee bant */
.tema-sanat .tf-marquee .marquee-item {
    font-family: 'Raleway', sans-serif;
    letter-spacing: .18em;
    font-size: 11px;
    font-weight: 500;
}

/* Newsletter alanı — krem zemin, ince çerçeve */
.tema-sanat .flat-newsletter,
.tema-sanat .newsletter-section {
    background: #f0ebe0;
    border-top: 1px solid #e4ddd2;
    border-bottom: 1px solid #e4ddd2;
}
.tema-sanat .flat-newsletter input[type="email"],
.tema-sanat .newsletter-section input[type="email"] {
    border-radius: 0 !important;
    border: 1px solid #c8bfb2;
    background: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
}

/* Breadcrumb */
.tema-sanat .tf-breadcrumb .breadcrumb-item,
.tema-sanat .breadcrumb li {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #888;
}
.tema-sanat .tf-breadcrumb .breadcrumb-item.active { color: #141414; }

/* Mobil uyum — spacing küçültme */
@media (max-width: 767px) {
    .tema-sanat section,
    .tema-sanat .flat-spacing {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
    .tema-sanat .grid-layout,
    .tema-sanat .tf-grid-layout {
        gap: 24px 16px !important;
    }
    .tema-sanat h1 { font-size: 2rem; }
    .tema-sanat h2 { font-size: 1.6rem; }
}

/* Bölüm başlıkları — ortalanmış, altın ayraç, geniş üst boşluk */
.tema-sanat .flat-title {
    padding-top: 24px;
    padding-bottom: 8px;
}
.tema-sanat .flat-title .title,
.tema-sanat .heading-section {
    position: relative;
    padding-bottom: 18px;
}
.tema-sanat .flat-title .title::after,
.tema-sanat .heading-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 36px;
    height: 1px;
    background: #b8965a;
}
/* Alt başlık/etiket — küçük uppercase Raleway */
.tema-sanat .flat-title .sub,
.tema-sanat .heading-section .sub {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #b8965a;
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
}
/* Bölümler arası üst/alt padding */
.tema-sanat section,
.tema-sanat .flat-spacing {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

/* Sepet drawer ve modallar — krem uyum */
.tema-sanat .offcanvas { background: #faf8f4; }
.tema-sanat .modal-content { border-radius: 0; background: #faf8f4; }

/* ===================================================================
   TEMA-ELEGANTE — Lüks Karanlık (Premium Dark)
   İlham: turcoelegante.com — siyaha yakın zemin, mat altın vurgu,
   krem metin, Playfair serif başlıklar, bol boşluk, keskin köşeler.
   renk_sinifi="tema-elegante" ile body'ye uygulanır.
   --- Renkler ---
   zemin #0d0d0d · panel #161616 · altın #c4a35a · metin #e6e0d4
   =================================================================== */
.tema-elegante {
    --main: #ece7da;
    --white: #161616;
    --primary: #c4a35a;
    --text: #cfc9bd;
    --text-2: #a59f92;
    --text-3: #a59f92;
    --text-secondary: #a59f92;
    --line: #2a2a2a;
    --line-2: #2a2a2a;
    --bg-1: #0d0d0d; --bg-2: #141414; --bg-7: #161616; --bg-8: #161616; --bg-9: #161616;
    /* EKSİK KALAN açık-gri token'lar — koyuya çevrildi (base'de #f2f2f2 vb. 12+ yerde) */
    --bg-10: #0d0d0d;
    --bg-11: #161616;            /* adet kutusu, sort dropdown, hesap menüsü, scrollbar... */
    --bg-load: #1a1a1a;
    --bg-scrollbar-track: #0d0d0d;
    --bg-scrollbar-thumb: #2e2e2e;
    --main-rgba-1: rgba(255,255,255,.10);  /* siyah-bazlı gölge/sınırları aydınlat */
    --main-rgba-2: rgba(255,255,255,.08);
    --backdrop: rgba(0,0,0,.65);
    /* Mobil kabuk renk skalası — net basamaklar (zemin→ayraç→sönük→metin→altın) */
    --el-mob-bg:      #0b0b0b;            /* tek tutarlı koyu zemin */
    --el-mob-panel:   #141414;            /* yükseltilmiş yüzey (aktif/footer) */
    --el-mob-line:    #262626;            /* görünür ayraç */
    --el-ink:         #ece7da;            /* birincil metin — parlak krem */
    --el-ink-dim:     #8f897b;            /* ikincil/pasif — okunur sönük */
    --el-gold:        #cba968;            /* aktif/hover — canlı altın */
    --el-gold-soft:   rgba(203,169,104,.12); /* aktif zemin tonu */
    background-color: #0d0d0d;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    color: #cfc9bd;
}

/* ===================================================================
   KÖPRÜ KATMANI — token DİNLEMEYEN kısımlar (Bootstrap utility + sık inline)
   Token'lar (yukarıda) base'in var(--..) kullandığı her yeri otomatik koyu
   yapar. Burası ise utility class'larını ve hardcoded açık zeminleri yakalar.
   Yeni bir bileşen açık çıkarsa önce buraya bir satır eklemek yeterli olmalı.
   =================================================================== */
/* Açık zeminler → koyu */
.tema-elegante .bg-white,
.tema-elegante .bg-light,
.tema-elegante .bg-surface,
.tema-elegante [style*="background:#fff"],
.tema-elegante [style*="background: #fff"],
.tema-elegante [style*="background-color:#fff"],
.tema-elegante [style*="background:#f"],
.tema-elegante [style*="background-color:#f"] {
    background-color: var(--bg-1) !important;
}
/* Koyu metin utility'leri → krem skala */
.tema-elegante .text-dark,
.tema-elegante .text-black { color: var(--el-ink) !important; }
.tema-elegante .text-white-50,
.tema-elegante .text-body-secondary { color: var(--el-ink-dim) !important; }
.tema-elegante .text-muted { color: var(--text-2) !important; }
/* Kartlar / paneller / modal / dropdown / accordion / tablo — koyu yüzey */
.tema-elegante .card,
.tema-elegante .modal-content,
.tema-elegante .dropdown-menu,
.tema-elegante .list-group-item,
.tema-elegante .accordion-item,
.tema-elegante .accordion-button {
    background-color: var(--bg-7) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}
.tema-elegante .table { color: var(--text) !important; border-color: var(--line) !important; }
/* Form alanları — koyu zemin, krem metin */
.tema-elegante .form-control,
.tema-elegante .form-select,
.tema-elegante .input-group-text {
    background-color: var(--white) !important;
    color: var(--main) !important;
    border-color: var(--line) !important;
    border-radius: 0 !important;
}
.tema-elegante .form-control::placeholder { color: var(--text-2) !important; opacity: 1; }
.tema-elegante .form-control:focus,
.tema-elegante .form-select:focus { border-color: var(--el-gold) !important; box-shadow: none !important; }
/* Sınır utility'leri */
.tema-elegante .border,
.tema-elegante .border-top,
.tema-elegante .border-bottom,
.tema-elegante .border-start,
.tema-elegante .border-end { border-color: var(--line) !important; }

/* Genel zemin & bölümler — koyu */
.tema-elegante .main-content,
.tema-elegante #wrapper,
.tema-elegante .flat-spacing,
.tema-elegante section,
.tema-elegante .bg-surface,
.tema-elegante .flat-spacing-1,
.tema-elegante .flat-spacing-2 {
    background-color: #0d0d0d;
}

/* Metin renkleri — krem tonları */
.tema-elegante p,
.tema-elegante span,
.tema-elegante li,
.tema-elegante .text-secondary,
.tema-elegante .text-muted,
.tema-elegante .description { color: #b7b1a4; }

/* Başlıklar — Cormorant Garamond italic, editorial */
.tema-elegante h1, .tema-elegante h2, .tema-elegante h3,
.tema-elegante h4, .tema-elegante h5, .tema-elegante h6,
.tema-elegante .heading,
.tema-elegante .tf-cart-title,
.tema-elegante .product-name,
.tema-elegante .card-product .title,
.tema-elegante .card-product .title a {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    letter-spacing: .03em;
    color: #f3eee3;
    line-height: 1.25;
}
.tema-elegante h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: .06em; font-weight: 400; font-style: italic; }
.tema-elegante h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.tema-elegante h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }

/* Ürün kartı başlığı — italic serif */
.tema-elegante .card-product .title,
.tema-elegante .card-product .title a {
    font-style: italic;
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: .01em;
}

/* Linkler — krem, altın hover */
.tema-elegante a { color: #d8d2c4; }
.tema-elegante a:hover { color: #c4a35a; }

/* Butonlar — altın dolgu / siyah metin, Raleway, keskin köşe */
.tema-elegante .tf-btn.btn-fill,
.tema-elegante .tf-btn.btn-dark,
.tema-elegante .btn-dark,
.tema-elegante button[type="submit"].tf-btn {
    background: #c4a35a;
    border-color: #c4a35a;
    color: #0d0d0d;
    border-radius: 0 !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.tema-elegante .tf-btn.btn-fill:hover,
.tema-elegante .tf-btn.btn-dark:hover {
    background: #d9bd7c;
    border-color: #d9bd7c;
    color: #0d0d0d;
}
/* Çizgili buton — altın çerçeve, krem metin */
.tema-elegante .tf-btn.btn-line,
.tema-elegante .tf-btn.btn-outline {
    border-radius: 0 !important;
    border-color: #c4a35a;
    color: #e6e0d4;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
    background: transparent;
}
.tema-elegante .tf-btn.btn-line:hover,
.tema-elegante .tf-btn.btn-outline:hover {
    background: #c4a35a;
    color: #0d0d0d;
}

/* Kartlar ve görseller — keskin köşe, koyu panel, zarif hover */
.tema-elegante .card-product,
.tema-elegante .card-product .card-product-wrapper,
.tema-elegante .card-product img,
.tema-elegante .wishlist-card,
.tema-elegante .collection-item,
.tema-elegante .img-box,
.tema-elegante .offcanvas,
.tema-elegante .modal-content {
    border-radius: 0 !important;
}
.tema-elegante .card-product .card-product-wrapper {
    background: #161616;
    border: 1px solid #222;
}
.tema-elegante .card-product:hover img {
    transform: scale(1.03);
    transition: transform .6s ease;
}
.tema-elegante .card-product .title a { color: #f3eee3; }
.tema-elegante .card-product .title a:hover { color: #c4a35a; }

/* Fiyat — altın vurgu */
.tema-elegante .price,
.tema-elegante .price-now,
.tema-elegante .current-price {
    color: #c4a35a;
    font-weight: 500;
    letter-spacing: .03em;
}
.tema-elegante .compare-at-price,
.tema-elegante .old-price { color: #6f6a60; }

/* Header — koyu zemin, ince altın çizgi */
.tema-elegante #header,
.tema-elegante header.header-default,
.tema-elegante .header-minimal,
.tema-elegante .header-wrap-1 {
    background: #0d0d0d;
    border-bottom: 1px solid #232323;
}
/* Hero üstünde duran saydam header'da çizgi OLMAZ.
   NEDEN: .header-absolute'ta zemin başka bir kural tarafından saydama çekiliyor
   ama border-bottom ezilmiyordu; geriye video hero'nun ortasından geçen tek
   başına 1px'lik gri bir çizgi kalıyordu.
   .header-bg (kaydırılmış hal) DIŞARIDA BIRAKILMADI: o durumda da zemin saydam
   kalıyor, yani çizgi yine havada asılı duruyordu. İç sayfalardaki normal
   (absolute olmayan) header'ın çizgisi aynen korunuyor. */
.tema-elegante #header.header-absolute,
.tema-elegante header.header-default.header-absolute {
    border-bottom: 0;
}
.tema-elegante .box-nav-ul .menu-item > a,
.tema-elegante .nav-ul-mb .menu-item > a {
    color: #d8d2c4;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    font-family: 'Raleway', sans-serif;
}
.tema-elegante .box-nav-ul .menu-item > a:hover { color: #c4a35a; }
.tema-elegante .nav-icon-item,
.tema-elegante .header .nav-icon-item i { color: #e6e0d4; }

/* Top bar — siyah bant, Raleway */
.tema-elegante .tf-top-bar {
    background: #000 !important;
    color: #e6e0d4;
    border-bottom: 1px solid #1c1c1c;
}
.tema-elegante .tf-top-bar .top-bar-text {
    color: #e6e0d4;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 10px;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}
.tema-elegante .tf-top-bar .tb-select { color: #e6e0d4; }

/* Footer — derin siyah, krem metin, Raleway */
.tema-elegante footer,
.tema-elegante .footer {
    background: #000;
    color: #b7b1a4;
    border-top: 1px solid #1c1c1c;
}
.tema-elegante footer a, .tema-elegante .footer a { color: #b7b1a4; }
.tema-elegante footer a:hover, .tema-elegante .footer a:hover { color: #c4a35a; }
.tema-elegante footer h5, .tema-elegante footer h6,
.tema-elegante .footer h5, .tema-elegante .footer h6,
.tema-elegante .footer-heading {
    color: #f3eee3;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 11px;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
}

/* Form alanları — koyu zemin, keskin köşe, altın odak */
.tema-elegante input.tf-field,
.tema-elegante .form-control,
.tema-elegante .form-checkout input,
.tema-elegante .form-checkout select,
.tema-elegante .form-checkout textarea {
    border-radius: 0 !important;
    border-color: #333;
    background: #161616;
    color: #e6e0d4;
}
.tema-elegante input::placeholder,
.tema-elegante textarea::placeholder { color: #6f6a60; }
.tema-elegante input:focus, .tema-elegante select:focus, .tema-elegante textarea:focus {
    border-color: #c4a35a !important;
    box-shadow: none !important;
    background: #1a1a1a;
}

/* Rozetler — kırmızı zemini beyaz yazıya çevir, köşe yok */
/* Rozet wrapper — sol üst köşe, inline */
.tema-elegante .card-product .on-sale-wrap {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 2;
}
/* Rozet — küçük pill */
.tema-elegante .on-sale-item,
.tema-elegante .badge-yeni,
.tema-elegante .card-product .on-sale-wrap .on-sale-item,
.tema-elegante .badge-sale,
.tema-elegante .sale-badge {
    display: inline-block !important;
    width: auto !important;
    background: #c4a35a !important;
    border: none !important;
    color: #0d0d0d !important;
    border-radius: 0 !important;
    letter-spacing: .1em;
    font-size: 9px;
    font-weight: 700;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    padding: 4px 10px !important;
    white-space: nowrap;
}
/* İndirim yüzdesi — koyu zemin, altın yazı */
.tema-elegante .card-product .on-sale-wrap .on-sale-item:not(.on-new-item) {
    background: #1a1a1a !important;
    color: #c4a35a !important;
    border: 1px solid #333 !important;
}
/* Stokta Yok rozeti */
.tema-elegante .card-product .on-sale-wrap .sold-out-item,
.tema-elegante .card-product .on-sale-wrap [class*="sold-out"],
.tema-elegante .card-product .on-sale-wrap [class*="stok"] {
    background: #1a1a1a !important;
    color: #a59f92 !important;
    border: 1px solid #333 !important;
}

/* Bölüm başlıkları — ortalanmış, altın ayraç çizgisi */
.tema-elegante .flat-title .title,
.tema-elegante .heading-section {
    position: relative;
    padding-bottom: 14px;
}
.tema-elegante .flat-title .title::after,
.tema-elegante .heading-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 48px;
    height: 1px;
    background: #c4a35a;
}

/* Sepet drawer ve modallar — koyu uyum */
.tema-elegante .offcanvas { background: #0d0d0d; color: #cfc9bd; }
.tema-elegante .modal-content { background: #0d0d0d; color: #cfc9bd; }
.tema-elegante .offcanvas .btn-close,
.tema-elegante .modal-content .btn-close { filter: invert(1) grayscale(1) brightness(1.4); }
.tema-elegante hr,
.tema-elegante .divider { border-color: #232323; background: #232323; }

/* ===================================================================
   ELEGANTE — BİLEŞEN KATMANI (koyu zemin tam kapsama)
   Açık zeminli her bileşen koyuya çekilir, üstündeki metin krem yapılır.
   Hepsi .tema-elegante ile sınırlı — diğer temalar etkilenmez.
   =================================================================== */

/* --- 1) Açık-zeminli panelleri nötrle (bg-white / bg_white / kartlar) --- */
.tema-elegante .bg-white,
.tema-elegante .bg_white,
.tema-elegante .bg-light,
.tema-elegante .bg-surface,
.tema-elegante .bg-surface-2,
.tema-elegante .widget-card,
.tema-elegante .checkout-box,
.tema-elegante .tf-page-cart-checkout,
.tema-elegante .fl-item,
.tema-elegante .card:not(.card-product) {
    background: #161616 !important;
    border-color: #262626 !important;
    color: #d6d0c3;
}

/* --- 2) Ürün kartı: hover bilgi paneli + butonlar --- */
/* Kartın alt bilgi alanı (başlık/fiyat/sepete-ekle) — beyaz panel yerine koyu */
.tema-elegante .card-product-info {
    background: #161616 !important;
    color: #d6d0c3;
}
/* "Sepete Ekle" / ana ürün butonu — altın dolgu, koyu metin */
.tema-elegante .btn-quick-add,
.tema-elegante .btn-main-product,
.tema-elegante .tf-btn.btn-fill {
    background: #c4a35a !important;
    border: 1px solid #c4a35a !important;
    color: #0d0d0d !important;
    border-radius: 0 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
}
.tema-elegante .btn-quick-add:hover,
.tema-elegante .btn-main-product:hover,
.tema-elegante .tf-btn.btn-fill:hover {
    background: #d9bd7c !important;
    border-color: #d9bd7c !important;
    color: #0d0d0d !important;
}
/* Yuvarlak aksiyon ikonları (favori/karşılaştır/hızlı bakış) — beyaz daire yerine koyu */
.tema-elegante .box-icon.bg_white,
.tema-elegante .list-product-btn .box-icon {
    background: #1a1a1a !important;
    border: 1px solid #3a3a3a !important;
    color: #e6e0d4 !important;
    box-shadow: none !important;
}
.tema-elegante .box-icon.bg_white .icon,
.tema-elegante .list-product-btn .box-icon .icon { color: #e6e0d4 !important; }
.tema-elegante .box-icon.bg_white:hover,
.tema-elegante .list-product-btn .box-icon:hover {
    background: #c4a35a !important;
    border-color: #c4a35a !important;
}
.tema-elegante .box-icon:hover .icon { color: #0d0d0d !important; }
/* İkon tooltip baloncuğu */
.tema-elegante .box-icon .tooltip { background: #0d0d0d; color: #e6e0d4; }
/* Sadakat puan rozeti (inline açık zemin ezilir) */
.tema-elegante .puan-rozet {
    background: #1a1a1a !important;
    color: #c4a35a !important;
    border-color: #3a2f1a !important;
}
/* "Görsel Yok" placeholder'ı (inline #f5f5f5 ezilir) */
.tema-elegante .card-product-wrapper .product-img > div[style*="background"] { background: #161616 !important; }
.tema-elegante .card-product-wrapper .product-img .icon-image,
.tema-elegante .card-product-wrapper .product-img .text-muted { color: #6b665d !important; }

/* --- 3) Mağaza sidebar / filtre / breadcrumb / sayaç --- */
.tema-elegante .shop-filter,
.tema-elegante .widget-facet,
.tema-elegante .sidebar-filter,
.tema-elegante .canvas-filter { background: #0d0d0d; }
.tema-elegante .widget-facet .facet-title,
.tema-elegante .widget-title,
.tema-elegante .filtre-blok-baslik { color: #f3eee3; }
.tema-elegante .shop-sidebar a,
.tema-elegante .widget-facet a,
.tema-elegante .list-categories a,
.tema-elegante .kategori-liste a,
.tema-elegante .filtre-blok a,
.tema-elegante .breadcrumb a { color: #e2dccf; }
.tema-elegante .shop-sidebar a:hover,
.tema-elegante .widget-facet a:hover,
.tema-elegante .list-categories a:hover,
.tema-elegante .kategori-liste a:hover,
.tema-elegante .filtre-blok a:hover { color: #c4a35a; }
.tema-elegante .kategori-liste a.fw-6,
.tema-elegante .kategori-liste a.aktif { color: #c4a35a !important; }
.tema-elegante .breadcrumb span,
.tema-elegante .breadcrumb .active,
.tema-elegante .breadcrumb .breadcrumb-item.active { color: #9e988b !important; }
.tema-elegante .count-text,
.tema-elegante .text-count,
.tema-elegante .meta-filter-shop { color: #b7b1a4; }
.tema-elegante .nice-select,
.tema-elegante select.tf-dropdown-sort { background: #161616; border-color: #333; color: #d6d0c3; }
/* Fiyat aralığı slider rayı */
.tema-elegante .noUi-target { background: #232323; border-color: #232323; }
.tema-elegante .noUi-connect { background: #c4a35a; }
.tema-elegante .noUi-handle { background: #c4a35a; border-color: #c4a35a; box-shadow: none; }

/* --- 4) Bootstrap yardımcı sınıfları + genel metin kontrastı ---
   .text-dark/.text-body/.text-black koyu zeminde siyah-üstüne-siyah oluyordu. */
.tema-elegante .text-dark,
.tema-elegante a.text-dark,
.tema-elegante .text-body,
.tema-elegante .text-black,
.tema-elegante .link { color: #e2dccf !important; }
.tema-elegante a.text-dark:hover,
.tema-elegante .link:hover { color: #c4a35a !important; }
.tema-elegante,
.tema-elegante p,
.tema-elegante li,
.tema-elegante td,
.tema-elegante span,
.tema-elegante label,
.tema-elegante .fs-14, .tema-elegante .fs-13, .tema-elegante .fs-12 { color: #d6d0c3; }
.tema-elegante .text-muted,
.tema-elegante .text-secondary { color: #a59f92 !important; }
/* Kalın etiket/başlıkçıklar (checkout bölüm başlıkları dahil) parlasın */
.tema-elegante .fw-5,
.tema-elegante .fw-6,
.tema-elegante .fw-7 { color: #f3eee3; }

/* --- 5) Checkout / sipariş özeti --- */
.tema-elegante .tf-page-checkout .heading,
.tema-elegante .order-summary,
.tema-elegante .widget-content-tab,
.tema-elegante .checkout-order-summary { background: #161616; color: #d6d0c3; }
.tema-elegante .order-summary .title,
.tema-elegante .checkout-title,
.tema-elegante .order-summary h5,
.tema-elegante .order-summary h6 { color: #f3eee3 !important; }
.tema-elegante .form-checkout label,
.tema-elegante .checkout-box label { color: #d6d0c3 !important; }
.tema-elegante .total-value,
.tema-elegante .order-summary .price,
.tema-elegante .order-summary .total { color: #c4a35a !important; }
.tema-elegante .cart-item,
.tema-elegante .order-item { border-color: #262626 !important; }
/* Adım göstergesi: aktif = altın, ikon daireleri koyu */
.tema-elegante .checkout-step.active .step-circle { background: #c4a35a; color: #0d0d0d; }
.tema-elegante .checkout-step.active .step-label { color: #c4a35a; }
.tema-elegante .checkout-step.inactive .step-circle { background: #1f1f1f; color: #8a857a; }
.tema-elegante .checkout-card-head .icon-circle { background: #1f1f1f; color: #c4a35a; }
.tema-elegante .checkout-notice { background: #161616; border-color: #2a2a2a; }
.tema-elegante .adres-kart { background: #161616; border-color: #2a2a2a; }
/* Sipariş özeti kutusu — base CSS #fbfbfc veriyor, elegante metinleri fildişi olunca okunmuyordu */
.tema-elegante .widget-wrap-checkout {
    background-color: #161616 !important;
    border-color: #2a2a2a !important;
    border-radius: 0 !important;
}
/* Sözleşme onay kutusu (inline #fff8e1) ve puan kutusu (inline #f8f9fa) — altın tonlu koyu kutu */
.tema-elegante .widget-wrap-checkout div[style*="fff8e1"],
.tema-elegante .widget-wrap-checkout .puan-box {
    background: rgba(196,163,90,.08) !important;
    border-color: #c4a35a !important;
}
.tema-elegante .widget-wrap-checkout div[style*="fff8e1"] a { color: #c4a35a !important; }
/* Ödeme adımındaki açık zeminli kutular (havale bilgisi, kart formu) */
.tema-elegante .bank-info-box,
.tema-elegante .card-form-box {
    background: #161616 !important;
    border-color: #2a2a2a !important;
}
.tema-elegante .card-form-box input {
    background: #101010 !important;
    border-color: #2a2a2a !important;
    color: #e6e0d4 !important;
}
.tema-elegante .card-form-box label { color: #a59f92 !important; }
/* Sipariş onay (Başarılı) sayfası — info kartları ve sipariş kutuları açık zeminliydi */
.tema-elegante .order-info-card {
    background: #161616 !important;
    border-color: #2a2a2a !important;
    border-radius: 0 !important;
}
.tema-elegante .order-card {
    background: #141414 !important;
    border-color: #2a2a2a !important;
    border-radius: 0 !important;
}
.tema-elegante .order-card-header {
    background: #191919 !important;
    border-bottom-color: #2a2a2a !important;
}
.tema-elegante .order-item-row,
.tema-elegante .order-info-card .info-label { border-color: #262626 !important; }
.tema-elegante .order-item-img { border-color: #2a2a2a !important; }
.tema-elegante .totals-row { border-color: #262626 !important; }
.tema-elegante .totals-row.total-final { border-top-color: #c4a35a !important; }

/* --- 6) Hero slider (parallax) — overlay derinliği + altın buton --- */
.tema-elegante .esc-slider-parallax .parallax-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.68) 100%);
}
/* Slayt butonu inline background:#fff taşıyor — altına ez */
.tema-elegante .esc-slider-parallax .tf-btn.btn-fill,
.tema-elegante .esc-slider-parallax a.tf-btn[style*="background"] {
    background: #c4a35a !important;
    color: #0d0d0d !important;
    border: none !important;
}
.tema-elegante .esc-slider-parallax .parallax-content .inner { color: #f3eee3; }

/* Fiyat her zaman altın kalsın (fw-6 parlatmasını ez) */
.tema-elegante .price,
.tema-elegante .price .fw-6,
.tema-elegante .price-now,
.tema-elegante .current-price { color: #c4a35a !important; }
.tema-elegante .price .old-price { color: #6f6a60 !important; }

/* --- 7) Beyaz-metin yardımcıları (koyu zemin üstü) ---
   --white token'ı koyuya çekildiği için color:var(--white) kullanan
   .text_white / .text-white metinleri görünmez olmuştu — krem'e sabitle. */
.tema-elegante .text_white,
.tema-elegante .text-white { color: #e6e0d4 !important; }
/* Top bar (dark stil) metni ve linkleri */
.tema-elegante .tf-top-bar .top-bar-text,
.tema-elegante .tf-top-bar.bg_dark .top-bar-text,
.tema-elegante .tf-top-bar a,
.tema-elegante .tf-top-bar .tb-select { color: #e6e0d4 !important; }
.tema-elegante .tf-top-bar .box-icon { background: #1c1c1c !important; }

/* --- 8) İletişim sayfası (kendi <style> bloğu hardcoded açık renk taşıyor) --- */
.tema-elegante .contact-form-box {
    background: #161616 !important;
    border-color: #262626 !important;
    box-shadow: none !important;
}
.tema-elegante .contact-info-card {
    background: #161616 !important;
    border-color: #262626 !important;
}
.tema-elegante .contact-form-box label { color: #d6d0c3 !important; }
.tema-elegante .contact-info-text .label { color: #a59f92 !important; }
.tema-elegante .contact-info-text a { color: #e2dccf !important; }
.tema-elegante .contact-info-text a:hover { color: #c4a35a !important; }
.tema-elegante .map-placeholder {
    background: #121212 !important;
    color: #8a857a !important;
    border: 1px solid #262626;
}
.tema-elegante .working-hours-badge {
    background: #14241a !important;
    color: #6dd58f !important;
    border-color: #2c4a37 !important;
}
.tema-elegante .contact-form-box .form-control { border-color: #333 !important; background: #161616 !important; color: #e6e0d4 !important; }
.tema-elegante .contact-form-box .form-select { border-color: #333 !important; background: #161616 !important; color: #e6e0d4 !important; }

/* ===================================================================
   ELEGANTE — TURCOELEGANTE RAFINE + MOBİL UYUM
   =================================================================== */

/* Bölüm başlık — alt başlık Raleway uppercase altın */
.tema-elegante .flat-title .sub,
.tema-elegante .heading-section .sub {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #c4a35a;
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
}

/* Bölüm başlıkları — geniş padding, altın ayraç */
.tema-elegante .flat-title {
    padding-top: 20px;
    padding-bottom: 8px;
}
.tema-elegante .flat-title .title,
.tema-elegante .heading-section {
    position: relative;
    padding-bottom: 18px;
}
.tema-elegante .flat-title .title::after,
.tema-elegante .heading-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 36px;
    height: 1px;
    background: #c4a35a;
}

/* Marquee — Raleway, harf aralıklı */
.tema-elegante .tf-marquee .marquee-item {
    font-family: 'Raleway', sans-serif;
    letter-spacing: .18em;
    font-size: 11px;
    font-weight: 500;
}

/* Ürün kartı galeri stili — şeffaf bg, geniş gap, opacity hover */
.tema-elegante .card-product .card-product-wrapper {
    background: #111 !important;
    border: 1px solid #1e1e1e !important;
}
.tema-elegante .card-product .card-product-wrapper img {
    transition: opacity .5s ease;
}
.tema-elegante .card-product:hover .card-product-wrapper img {
    opacity: .85;
    transform: none !important;
}
.tema-elegante .card-product .card-product-info {
    padding-top: 12px;
}
.tema-elegante .grid-layout,
.tema-elegante .tf-grid-layout {
    gap: 32px 24px !important;
}

/* Fiyat — Raleway, ince */
.tema-elegante .price,
.tema-elegante .price-now,
.tema-elegante .current-price {
    font-family: 'Raleway', sans-serif !important;
    font-size: .88rem !important;
    letter-spacing: .06em !important;
}

/* Breadcrumb — küçük Raleway */
.tema-elegante .tf-breadcrumb .breadcrumb-item,
.tema-elegante .breadcrumb li {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b665d;
}
.tema-elegante .tf-breadcrumb .breadcrumb-item.active { color: #a59f92; }

/* Mobil menü — koyu uyum, net skala */
.tema-elegante .offcanvas-menu,
.tema-elegante #mobileMenu,
.tema-elegante .mobile-menu-wrap {
    background: var(--el-mob-bg) !important;
}
/* 1. seviye link — parlak krem, görünür ayraç */
.tema-elegante .nav-ul-mb .nav-mb-item .mb-menu-link {
    font-family: 'Raleway', sans-serif;
    letter-spacing: .14em;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--el-ink) !important;
    border-bottom: none !important;              /* ayraç <li>'de; link kenarlığı kaldırıldı (çift çizgi olmasın) */
    transition: color .2s ease;
}
/* Asıl ayraç — base styles.css <li>'ye parlak rgb(238,238,238) koyuyor; soluk hairline'a çevir */
.tema-elegante .nav-ul-mb .nav-mb-item:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,.035) !important;
}
.tema-elegante .nav-ul-mb .nav-mb-item .mb-menu-link:hover,
.tema-elegante .nav-ul-mb .nav-mb-item .mb-menu-link.active { color: var(--el-gold) !important; }
.tema-elegante .nav-ul-mb .btn-open-sub::before { color: var(--el-ink-dim) !important; }
/* Alt seviye link — sönük krem (hiyerarşi netliği) */
.tema-elegante .nav-ul-mb .sub-nav-link {
    color: var(--el-ink-dim) !important;
    text-transform: none;
    letter-spacing: .04em;
}
.tema-elegante .nav-ul-mb .sub-nav-link.fw-6 { color: var(--el-ink) !important; }
.tema-elegante .nav-ul-mb .sub-nav-link:hover { color: var(--el-gold) !important; }
.tema-elegante .tf-mobile-title { color: var(--el-ink); }
.tema-elegante .canvas-mb-body,
.tema-elegante #mobileMenu .offcanvas-body { background: var(--el-mob-bg); }

/* Header ikonları (arama + sepet) her kırılımda okunur kalsın —
   kural önceden sadece mobil media query içindeydi, desktop'ta siyah kalıyordu */
.tema-elegante .nav-icon-item i,
.tema-elegante .header .icon { color: #e6e0d4 !important; }

/* Mobil ürün kartı — daha az gap */
@media (max-width: 767px) {
    .tema-elegante .grid-layout,
    .tema-elegante .tf-grid-layout {
        gap: 20px 12px !important;
    }
    .tema-elegante h1 { font-size: 2rem; }
    .tema-elegante h2 { font-size: 1.6rem; }
    .tema-elegante .card-product .title { font-size: .95rem; }
    /* Video slider mobilde de tam ekran (svh: adres çubuğunu hesaba katar) */
    .esc-slider-video { min-height: 100vh !important; min-height: 100svh !important; }
    .esc-slider-video .sv-content h2 { font-size: 2rem; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .tema-elegante .grid-layout,
    .tema-elegante .tf-grid-layout {
        gap: 24px 16px !important;
    }
}

/* ===================================================================
   ELEGANTE — ADET STEPPER + ÜRÜN DETAY EK DÜZELTMELER
   =================================================================== */

/* Adet wrapper — ŞEFFAF (eski [class*="quantity"] tüm kutuyu dolduruyordu) */
.tema-elegante .tf-product-info-quantity,
.tema-elegante .quantity-wrap {
    background: transparent !important;
    border: none !important;
}
/* Stepper kutusunun kendisi (.wg-quantity) aşağıdaki rafine blokta stillenir */

/* "YENİ" rozeti — yeşil yerine altın çerçeve */
.tema-elegante .badge-new,
.tema-elegante .on-new-item,
.tema-elegante .card-product .on-sale-wrap .on-new-item {
    background: transparent !important;
    border: 1px solid #c4a35a !important;
    color: #c4a35a !important;
    border-radius: 0 !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 9px !important;
    letter-spacing: .14em !important;
    font-weight: 600 !important;
}

/* Beden seçici butonları — koyu, seçili altın */
.tema-elegante .tf-variant-btns .variant-btn,
.tema-elegante .size-list .size-item,
.tema-elegante .variant-size button,
.tema-elegante [class*="variant"] button,
.tema-elegante .list-color-product .list-color-item {
    background: #161616 !important;
    border: 1px solid #333 !important;
    color: #d6d0c3 !important;
    border-radius: 0 !important;
}
.tema-elegante .tf-variant-btns .variant-btn:hover,
.tema-elegante .size-list .size-item:hover,
.tema-elegante .tf-variant-btns .variant-btn.active,
.tema-elegante .size-list .size-item.active,
.tema-elegante .tf-variant-btns .variant-btn.is-checked {
    background: #c4a35a !important;
    border-color: #c4a35a !important;
    color: #0d0d0d !important;
}
/* Stokta yok beden — üstü çizgili */
.tema-elegante .tf-variant-btns .variant-btn.out-of-stock,
.tema-elegante .size-list .size-item.out-of-stock {
    opacity: .35 !important;
    text-decoration: line-through !important;
    cursor: not-allowed !important;
}

/* ===================================================================
   ELEGANTE — ÜRÜN DETAY: İNLINE STYLE EZİLMESİ
   =================================================================== */

/* Fiyat — inline color:#ef4444 veya color:#16a34a yerine altın */
.tema-elegante .price-on-sale,
.tema-elegante #detayFiyatText,
.tema-elegante .price-on-sale.fw-bold {
    color: #c4a35a !important;
}
/* Eski fiyat üstü çizili — soluk gri */
.tema-elegante .compare-at-price,
.tema-elegante del,
.tema-elegante s {
    color: #4a4540 !important;
}

/* YENİ rozeti — inline background:#22c55e eziyor */
.tema-elegante .badges,
.tema-elegante .tf-product-info-badges .badges {
    background: transparent !important;
    border: 1px solid #c4a35a !important;
    color: #c4a35a !important;
    border-radius: 0 !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    padding: 4px 10px !important;
}
/* İndirim rozeti — inline background:#ef4444 eziyor */
.tema-elegante .tf-product-info-badges .badges:nth-child(2),
.tema-elegante .tf-product-info-badges .badges:last-child {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #c4a35a !important;
}

/* Kart rozetleri — bg-main (kırmızı) ve bg-danger (kırmızı) ezi */
.tema-elegante .on-sale-item.bg-main,
.tema-elegante .on-sale-item.bg-primary {
    background: #c4a35a !important;
    color: #0d0d0d !important;
}
.tema-elegante .on-sale-item.bg-danger {
    background: #1a1a1a !important;
    color: #c4a35a !important;
    border: 1px solid #333 !important;
}
.tema-elegante .on-sale-item.bg-dark {
    background: #1a1a1a !important;
    color: #6b665d !important;
    border: 1px solid #2a2a2a !important;
}
.tema-elegante .on-sale-item.bg-warning {
    background: #c4a35a !important;
    color: #0d0d0d !important;
}

/* Adet stepper — daha rafine görünüm */
.tema-elegante .wg-quantity {
    display: inline-flex !important;
    align-items: center;
    border: 1px solid #2e2e2e !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden;
}
.tema-elegante .wg-quantity .btn-quantity,
.tema-elegante .wg-quantity button {
    width: 40px !important;
    height: 44px !important;
    background: transparent !important;
    color: var(--el-gold) !important;
    border: none !important;
    font-size: 18px !important;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s ease;
}
.tema-elegante .wg-quantity .btn-quantity:hover,
.tema-elegante .wg-quantity button:hover {
    background: #c4a35a !important;
    color: #0d0d0d !important;
}
.tema-elegante .wg-quantity input {
    width: 56px !important;
    height: 44px !important;
    background: transparent !important;
    color: #f3eee3 !important;
    border: none !important;
    border-left: 1px solid #2e2e2e !important;
    border-right: 1px solid #2e2e2e !important;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
}

/* ===================================================================
   ELEGANTE — MOBİL & GENEL KAPSAMLI DÜZELTME
   =================================================================== */

/* 1) HEADER DROPDOWN MENÜ — beyaz zemin koyu olsun */
.tema-elegante .box-nav-ul .menu-item .sub-menu,
.tema-elegante .box-nav-ul .menu-item .sub-menu.submenu-default,
.tema-elegante .nav-sub-menu,
.tema-elegante .sub-menu {
    background: #0f0f0f !important;
    border: 1px solid #222 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
}
.tema-elegante .box-nav-ul .menu-item .sub-menu a,
.tema-elegante .sub-menu .menu-list li a,
.tema-elegante .nav-sub-menu a {
    color: #d8d2c4 !important;
    background: transparent !important;
}
.tema-elegante .box-nav-ul .menu-item .sub-menu a:hover,
.tema-elegante .sub-menu .menu-list li a:hover {
    color: #c4a35a !important;
    background: #161616 !important;
    padding-left: 24px !important;
}
/* Mega menu da koyu olsun */
.tema-elegante .sub-menu.mega-menu,
.tema-elegante .mega-menu {
    background: #0f0f0f !important;
    border: 1px solid #222 !important;
}
.tema-elegante .mega-menu-footer {
    background: #111 !important;
    border-top: 1px solid #222 !important;
}
.tema-elegante .mega-cat-title { color: #f3eee3 !important; }
.tema-elegante .mega-cat-list li a { color: #a59f92 !important; }
.tema-elegante .mega-cat-list li a:hover { color: #c4a35a !important; }

/* 2) MOBİL FİLTRE BARI + SIRALAMA DROPDOWN */
.tema-elegante .shop-filter-bar,
.tema-elegante .tf-shop-control,
.tema-elegante .toolbar-shop,
.tema-elegante .filter-bar,
.tema-elegante .meta-filter-shop,
.tema-elegante .grid-filter {
    background: #111 !important;
    border: 1px solid #222 !important;
    color: #d6d0c3 !important;
}
.tema-elegante .tf-dropdown-sort,
.tema-elegante select.tf-dropdown-sort,
.tema-elegante .nice-select,
.tema-elegante .sort-select,
.tema-elegante select[name*="sort"],
.tema-elegante select[name*="siralama"] {
    background: #161616 !important;
    border: 1px solid #2e2e2e !important;
    color: #d6d0c3 !important;
    border-radius: 0 !important;
}
.tema-elegante .nice-select .list {
    background: #0f0f0f !important;
    border: 1px solid #222 !important;
}
.tema-elegante .nice-select .option { color: #d6d0c3 !important; }
.tema-elegante .nice-select .option:hover,
.tema-elegante .nice-select .option.selected { color: #c4a35a !important; background: #161616 !important; }
/* Filtre butonu */
.tema-elegante .btn-filter,
.tema-elegante .filter-btn,
.tema-elegante button[data-bs-toggle="offcanvas"].btn-filter {
    background: #161616 !important;
    border: 1px solid #2e2e2e !important;
    color: #d6d0c3 !important;
    border-radius: 0 !important;
}
.tema-elegante .btn-filter:hover { border-color: #c4a35a !important; color: #c4a35a !important; }

/* Mobil filtre + sırala barı (.mobil-filtre-bar) — page-level #f8f8f8 beyazını ez */
.tema-elegante .mobil-filtre-bar {
    background: var(--el-mob-panel) !important;
    border: 1px solid var(--el-mob-line);
    border-radius: 0 !important;
}
/* Filtrele butonu (.tf-btn.btn-line) */
.tema-elegante .mobil-filtre-bar .tf-btn.btn-line {
    background: transparent !important;
    border-color: var(--el-mob-line) !important;
    color: var(--el-ink) !important;
    border-radius: 0 !important;
}
.tema-elegante .mobil-filtre-bar .tf-btn.btn-line i { color: var(--el-gold) !important; }
.tema-elegante .mobil-filtre-bar .tf-btn.btn-line:hover {
    border-color: var(--el-gold) !important;
    color: var(--el-gold) !important;
}
/* Aktif filtre sayacı — siyah yerine altın pul */
.tema-elegante .mobil-filtre-bar .filtre-aktif-sayac {
    background: var(--el-gold) !important;
    color: #0d0d0d !important;
    border-radius: 0 !important;
}
/* Sırala seçici (.form-select) — beyaz zemin + görünmez ok */
.tema-elegante .mobil-filtre-bar .form-select,
.tema-elegante .form-select {
    background-color: var(--el-mob-bg) !important;
    color: var(--el-ink) !important;
    border: 1px solid var(--el-mob-line) !important;
    border-radius: 0 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cba968' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .65rem center !important;
    background-size: 14px 12px !important;
}
.tema-elegante .mobil-filtre-bar .form-select option,
.tema-elegante .form-select option {
    background-color: var(--el-mob-bg) !important;
    color: var(--el-ink) !important;
}

/* 3) MOBİL ALT NAVİGASYON BARI (.tf-mobile-bottom) — net renk skalası
   Not: markup'ta inline style="background:#fff" var, !important ile eziyoruz. */
.tema-elegante .tf-mobile-bottom {
    background: var(--el-mob-bg) !important;
    border-top: 1px solid var(--el-mob-line) !important;
}
/* Pasif: okunur sönük krem (inline .text-dark'ı ez, zemine gömülmesin) */
.tema-elegante .tf-mobile-bottom a,
.tema-elegante .tf-mobile-bottom a.text-dark {
    color: var(--el-ink-dim) !important;
    position: relative;
    transition: color .2s ease;
}
.tema-elegante .tf-mobile-bottom a i,
.tema-elegante .tf-mobile-bottom a span { color: inherit !important; }
/* Aktif/hover: canlı altın + üst gösterge çizgisi */
.tema-elegante .tf-mobile-bottom a:hover,
.tema-elegante .tf-mobile-bottom a.active {
    color: var(--el-gold) !important;
}
.tema-elegante .tf-mobile-bottom a.active::before {
    content: "";
    position: absolute;
    top: -8px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 2px;
    background: var(--el-gold);
}
/* Rozet (favori/sepet sayısı) — köşeli okunur altın pul */
.tema-elegante .tf-mobile-bottom .count-box {
    background: var(--el-gold) !important;
    color: #0d0d0d !important;
    border: none !important;
    border-radius: 0 !important;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 3px;
    font-size: 10px !important;
    font-weight: 700;
    text-align: center;
    top: -2px !important;
    right: calc(50% - 20px) !important;
}
.tema-elegante .tf-mobile-bottom span[style*="font-size:10px"] {
    font-family: 'Raleway', sans-serif !important;
    letter-spacing: .08em;
}

/* 4) MOBİL MENÜ — hesabım butonu + genel (net skala) */
.tema-elegante .canvas-mb,
.tema-elegante #mobileMenu,
.tema-elegante .offcanvas.offcanvas-start {
    background: var(--el-mob-bg) !important;
    border-right: 1px solid var(--el-mob-line) !important;
}
.tema-elegante .canvas-mb-body,
.tema-elegante #mobileMenu .offcanvas-body {
    background: var(--el-mob-bg) !important;
}
/* X kapat butonu */
.tema-elegante .canvas-mb .btn-close,
.tema-elegante #mobileMenu .btn-close,
.tema-elegante .offcanvas .btn-close {
    filter: invert(1) brightness(1.5) !important;
}
/* Drawer alt kısım (.mb-bottom) — yükseltilmiş yüzey + "Hesabım" linki */
.tema-elegante .canvas-mb .mb-bottom {
    background: var(--el-mob-panel) !important;
    border-top: 1px solid var(--el-mob-line) !important;
}
.tema-elegante .canvas-mb .site-nav-icon {
    background-color: transparent !important;
    border: 1px solid var(--el-gold) !important;
    border-radius: 0 !important;
    color: var(--el-ink) !important;
    transition: all .2s ease;
}
.tema-elegante .canvas-mb .site-nav-icon .icon,
.tema-elegante .canvas-mb .site-nav-icon i { color: var(--el-gold) !important; }
.tema-elegante .canvas-mb .site-nav-icon:hover {
    background-color: var(--el-gold) !important;
    border-color: var(--el-gold) !important;
    color: #0d0d0d !important;
}
.tema-elegante .canvas-mb .site-nav-icon:hover .icon,
.tema-elegante .canvas-mb .site-nav-icon:hover i { color: #0d0d0d !important; }
/* ===================================================================
   DİL / PARA BİRİMİ SEÇİCİSİ — NATIVE GÖRÜNÜMÜ KAPAT (tema bağımsız)

   SORUN: seçicinin renkleri CSS'te doğru veriliyordu (koyu zemin, açık yazı —
   masaüstünde de öyle hesaplanıyor) ama mobil tarayıcılar `appearance: auto`
   olan <select>'i SİSTEM stiliyle çiziyor: koyu drawer'ın içinde açık gri
   kutu + siyah yazı çıkıyordu. Renk kuralı yazmak yetmiyor, native çizimi
   kapatmak gerekiyor.

   NOT: açılan seçenek listesi yine sistemin kendi listesidir — <option>
   stillenemez. Burada çözülen, kapalı haldeki kutunun görünümü.
   =================================================================== */
.tb-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 28px;
}
/* Seçenek listesi en azından koyu temada okunur kalsın (destekleyen tarayıcıda) */
.tema-elegante .tb-select option {
    background-color: #0b0b0b;
    color: #ece7da;
}

/* Drawer içi para birimi / dil seçici */
.tema-elegante .canvas-mb .tb-select {
    /* DİKKAT: "background" KISAYOLU DEĞİL — kısayol background-image'ı da sıfırlar
       ve yukarıdaki özel ok ikonunu siler, seçici oksuz kalır. */
    background-color: var(--el-mob-bg) !important;
    color: var(--el-ink) !important;
    border: 1px solid var(--el-mob-line) !important;
    border-radius: 0 !important;
}
/* Drawer içi olası buton */
.tema-elegante .canvas-mb .btn-account,
.tema-elegante .canvas-mb .tf-btn {
    background: var(--el-gold) !important;
    color: #0d0d0d !important;
    border-color: var(--el-gold) !important;
    border-radius: 0 !important;
    font-family: 'Raleway', sans-serif !important;
    letter-spacing: .14em !important;
}

/* 5) FOOTER (dark) — net koyu uyum (gerçek class'lar: .box-icon, .text-white-50) */
.tema-elegante #footer,
.tema-elegante footer.footer.background-black {
    background: var(--el-mob-bg) !important;
}
/* Metin tonları */
.tema-elegante footer .text-white,
.tema-elegante footer h6.text-white { color: var(--el-ink) !important; }
.tema-elegante footer .text-white-50 { color: var(--el-ink-dim) !important; }
.tema-elegante footer .footer-menu_item { color: var(--el-ink-dim) !important; }
.tema-elegante footer a.footer-menu_item:hover,
.tema-elegante footer .text-white-50 a:hover,
.tema-elegante footer a.text-white:hover { color: var(--el-gold) !important; }
.tema-elegante footer .footer-logo span { color: var(--el-ink) !important; }
/* Başlıklar — serif editorial */
.tema-elegante footer .footer-heading h6 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    letter-spacing: .04em;
    color: var(--el-ink) !important;
}

/* İletişim butonu (.tf-btn.btn-line) — altın çerçeve */
.tema-elegante footer .tf-btn.btn-line {
    background: transparent !important;
    border: 1px solid var(--el-gold) !important;
    color: var(--el-ink) !important;
    border-radius: 0 !important;
}
.tema-elegante footer .tf-btn.btn-line i { color: var(--el-gold) !important; }
.tema-elegante footer .tf-btn.btn-line:hover { background: var(--el-gold) !important; color: #0d0d0d !important; }
.tema-elegante footer .tf-btn.btn-line:hover i { color: #0d0d0d !important; }

/* Sosyal ikonlar (.box-icon) — köşeli, görünür, altın hover (gri kare sorunu) */
.tema-elegante footer .tf-social-icon .box-icon,
.tema-elegante footer .box-icon {
    background: transparent !important;
    border: 1px solid var(--el-mob-line) !important;
    border-radius: 0 !important;
    color: var(--el-ink) !important;
    width: 38px !important;
    height: 38px !important;
}
.tema-elegante footer .box-icon i { color: inherit !important; }
.tema-elegante footer .box-icon:hover {
    background: var(--el-gold) !important;
    border-color: var(--el-gold) !important;
    color: #0d0d0d !important;
}

/* Newsletter input + buton */
.tema-elegante footer .subscribe-email {
    background: var(--el-mob-bg) !important;
    border: 1px solid var(--el-mob-line) !important;
    color: var(--el-ink) !important;
    border-radius: 0 !important;
}
.tema-elegante footer .subscribe-button { border-radius: 0 !important; }

/* Accordion mobil başlık + "+" göstergesi */
.tema-elegante footer .footer-heading-moblie,
.tema-elegante footer .footer-col-block .footer-heading {
    border-bottom: 1px solid var(--el-mob-line) !important;
}
.tema-elegante footer .footer-heading-moblie::after,
.tema-elegante footer .footer-col-block .footer-heading::after { color: var(--el-gold) !important; }

/* Alt çizgi + ödeme + ESC Medya linki */
.tema-elegante footer .footer-bottom { border-top: 1px solid var(--el-mob-line) !important; }
.tema-elegante footer img[src*="payment"],
.tema-elegante footer img[src*="Payment"] {
    filter: brightness(0) invert(.7) !important;
    opacity: .7 !important;
}
/* iyzico şeridi marka renkleriyle kalsın — koyu zeminde okunması için açık chip üzerinde */
.tema-elegante footer img[src*="iyzico"] {
    filter: none !important;
    opacity: 1 !important;
    background: #f3eee3;
    padding: 5px 10px;
    height: 34px !important;
}
.tema-elegante footer .footer-bottom a { color: var(--el-ink-dim) !important; }
.tema-elegante footer .footer-bottom a:hover { color: var(--el-gold) !important; }

/* 7) ÜRÜN DETAY — STICKY SEPETE EKLE BARI */
.tema-elegante .tf-sticky-btn-atc {
    background: var(--el-mob-panel) !important;
    border-top: 1px solid var(--el-mob-line) !important;
}
.tema-elegante .tf-sticky-atc-title {
    color: var(--el-ink) !important;
    font-family: 'Cormorant Garamond', Georgia, serif;
}
.tema-elegante .tf-sticky-btn-atc .tf-btn.btn-fill {
    background: var(--el-gold) !important;
    border-color: var(--el-gold) !important;
    color: #0d0d0d !important;
    border-radius: 0 !important;
}
/* Mobilde ürün adını da göster (base'de .tf-sticky-atc-product display:none) */
@media (max-width: 767px) {
    .tema-elegante .tf-sticky-btn-atc .tf-sticky-atc-product { display: flex !important; }
    .tema-elegante .tf-sticky-btn-atc .tf-sticky-atc-img { display: none !important; }
    .tema-elegante .tf-sticky-btn-atc .tf-sticky-atc-title {
        font-size: 13px;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .tema-elegante .tf-sticky-btn-atc .tf-height-observer { gap: 12px; }
    .tema-elegante .tf-sticky-btn-atc .tf-btn { min-width: 130px !important; }
}

/* 8) SEPET SAYFASI — page-level <style> açık renklerini ez (token dinlemiyorlar) */
.tema-elegante .cart-summary-box {
    background: var(--bg-7) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
}
.tema-elegante .kupon-box {
    background: var(--bg-2) !important;
    border: 1px dashed var(--line) !important;
    border-radius: 0 !important;
}
.tema-elegante .cart-summary-row,
.tema-elegante .cart-summary-row.text-muted { color: var(--text) !important; }
.tema-elegante .cart-summary-row .text-dark,
.tema-elegante .satir-toplam { color: var(--el-ink) !important; }
.tema-elegante .cart-summary-total {
    border-top: 2px solid var(--line) !important;
    color: var(--el-ink) !important;
}
.tema-elegante .cart-price { color: var(--text) !important; }
.tema-elegante .cart-meta-variant { color: var(--text-2) !important; }
.tema-elegante .miktar-input {
    background: transparent !important;
    color: var(--el-ink) !important;
    border-left: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
}
.tema-elegante .btn-quantity { color: var(--el-gold) !important; }
.tema-elegante .btn-quantity:hover { background: rgba(203,169,104,.12) !important; }
.tema-elegante .kargo-progress {
    background: rgba(203,169,104,.08) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
    color: var(--text) !important;
}
.tema-elegante .kargo-progress-bar { background: var(--line) !important; }
.tema-elegante .kargo-progress-fill { background: var(--el-gold) !important; }
.tema-elegante .trust-badges { border-top: 1px solid var(--line) !important; }
.tema-elegante .trust-badge { color: var(--text-2) !important; }

/* 6) GENEL: beyaz kalan arka planlar */
.tema-elegante .tf-page-content,
.tema-elegante .shop-sidebar .widget-facet,
.tema-elegante .sidebar-filter-overlay { background: #0d0d0d !important; }

/* Ürün listesi sayfası üst bar */
.tema-elegante .tf-shop-header,
.tema-elegante .shop-result-count { color: #a59f92 !important; }

/* 9) BLOG — liste + detay sayfaları koyu tema uyumu
   (BlogVitrin view'ları page-level <style> ile açık renk tanımlıyor, burada eziliyor) */
.tema-elegante .blog-hero-banner {
    background: #0d0d0d !important;
    border-bottom: 1px solid var(--el-mob-line) !important;
}
.tema-elegante .blog-hero-banner .heading { color: var(--el-ink) !important; }
.tema-elegante .blog-hero-banner .text-secondary { color: var(--text-2) !important; }
.tema-elegante .blog-filter-bar {
    background: #0d0d0d !important;
    border-bottom: 1px solid var(--el-mob-line) !important;
    box-shadow: none !important;
}
.tema-elegante .filter-pill {
    border-color: var(--el-mob-line) !important;
    color: var(--text) !important;
    border-radius: 0 !important;
}
.tema-elegante .filter-pill:hover { border-color: var(--el-gold) !important; color: var(--el-gold) !important; }
.tema-elegante .filter-pill.active {
    background: var(--el-gold) !important;
    border-color: var(--el-gold) !important;
    color: #0d0d0d !important;
}
/* Kartlar (liste, ilgili yazılar, featured, sidebar) */
.tema-elegante .blog-article-item,
.tema-elegante .sidebar-widget-card,
.tema-elegante .featured-blog-card .bg-white {
    background: #141414 !important;
    border-color: var(--el-mob-line) !important;
    border-radius: 0 !important;
}
.tema-elegante .sidebar-widget-header {
    background: #191919 !important;
    border-bottom-color: var(--el-mob-line) !important;
}
.tema-elegante .sidebar-widget-title { color: var(--el-ink) !important; }
.tema-elegante .blog-card-placeholder,
.tema-elegante .featured-img-placeholder,
.tema-elegante .recent-post-img-placeholder { background: #1e1e1e !important; }
.tema-elegante .article-title-clamp,
.tema-elegante .recent-post-title,
.tema-elegante .blog-nav-title { color: var(--el-ink) !important; }
.tema-elegante .featured-blog-card .text-dark,
.tema-elegante .blog-article-item .text-dark { color: var(--el-ink) !important; }
.tema-elegante .category-link {
    color: var(--text) !important;
    border-bottom-color: var(--el-mob-line) !important;
}
.tema-elegante .category-link:hover,
.tema-elegante .category-link.active { color: var(--el-gold) !important; }
.tema-elegante .tag-pill {
    border-color: var(--el-mob-line) !important;
    color: var(--text) !important;
    border-radius: 0 !important;
}
.tema-elegante .tag-pill:hover {
    background: var(--el-gold) !important;
    border-color: var(--el-gold) !important;
    color: #0d0d0d !important;
}
.tema-elegante .tf-pagination-item {
    border-color: var(--el-mob-line) !important;
    color: var(--text) !important;
}
.tema-elegante .tf-pagination-item:hover,
.tema-elegante .tf-pagination-item.active {
    background: var(--el-gold) !important;
    border-color: var(--el-gold) !important;
    color: #0d0d0d !important;
}
.tema-elegante .search-result-info {
    background: #141414 !important;
    border-color: var(--el-mob-line) !important;
}
.tema-elegante .blog-empty-state h4 { color: var(--el-ink) !important; }
.tema-elegante .blog-empty-state .empty-icon i { color: #3a3a3a !important; }
.tema-elegante .blog-sidebar .search-input {
    background: #141414 !important;
    border-color: var(--el-mob-line) !important;
    color: var(--el-ink) !important;
}
/* Blog detay */
/* Tema globalinde `header{position:sticky}` kuralı makale <header>'ına da uygulanıyordu —
   başlık scroll'da sabit kalıp içeriğin üstüne biniyordu (tüm temalar için geçerli düzeltme) */
.blog-detail-header {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
}
.tema-elegante .blog-detail-title {
    color: var(--el-ink) !important;
    font-size: clamp(1.5rem, 3vw, 2.3rem) !important;
    font-style: normal !important;
    line-height: 1.3 !important;
}
.tema-elegante .blog-meta-item { color: var(--text-2) !important; }
.tema-elegante .blog-meta-divider { color: var(--el-mob-line) !important; }
.tema-elegante .blog-meta-category { color: var(--el-gold) !important; }
.tema-elegante .category-badge-dark { background: var(--el-gold) !important; color: #0d0d0d !important; }
.tema-elegante .hero-category-badge { background: var(--el-gold) !important; color: #0d0d0d !important; }
.tema-elegante .blog-content-body { color: var(--text) !important; }
.tema-elegante .blog-content-body h1,
.tema-elegante .blog-content-body h2,
.tema-elegante .blog-content-body h3,
.tema-elegante .blog-content-body h4,
.tema-elegante .blog-content-body h5,
.tema-elegante .blog-content-body h6,
.tema-elegante .blog-content-body strong,
.tema-elegante .blog-content-body b { color: var(--el-ink) !important; }
.tema-elegante .blog-content-body h2 { border-bottom-color: var(--el-mob-line) !important; }
.tema-elegante .blog-content-body a { color: var(--el-gold) !important; }
.tema-elegante .blog-content-body a:hover { color: var(--el-ink) !important; }
.tema-elegante .blog-content-body blockquote {
    background: #141414 !important;
    border-left-color: var(--el-gold) !important;
    border-radius: 0 !important;
}
.tema-elegante .blog-content-body table th { background: #191919 !important; color: var(--el-ink) !important; }
.tema-elegante .blog-content-body table th,
.tema-elegante .blog-content-body table td { border-color: var(--el-mob-line) !important; }
.tema-elegante .blog-content-body table tr:nth-child(even) { background: #141414 !important; }
.tema-elegante .blog-content-body pre,
.tema-elegante .blog-content-body code { background: #141414 !important; }
.tema-elegante .blog-detail-footer { border-top-color: var(--el-mob-line) !important; }
.tema-elegante .blog-nav-row { border-top-color: var(--el-mob-line) !important; }
.tema-elegante .blog-nav-item {
    border-color: var(--el-mob-line) !important;
    border-radius: 0 !important;
}
.tema-elegante .blog-nav-item:hover { border-color: var(--el-gold) !important; box-shadow: none !important; }
.tema-elegante .share-icon-btn,
.tema-elegante .paylas-bar .paylas-btn { border-color: var(--el-mob-line) !important; color: var(--text) !important; }
.tema-elegante .share-icon-btn:hover,
.tema-elegante .paylas-bar .paylas-btn:hover {
    background: var(--el-gold) !important;
    border-color: var(--el-gold) !important;
    color: #0d0d0d !important;
}

/* ===================================================================
   HERO YOUTUBE — branding/ikon gizleme (kırpma)
   YouTube logosu ve UI, video karesinin köşelerinde durur. İframe'i
   büyütüp merkezleyince bu köşeler görünür alanın DIŞINA taşar → ikonlar
   görünmez. pointer-events:none zaten hover UI'ını da engelliyor.
   =================================================================== */
.esc-slider-video .sv-video-wrap iframe {
    transform: translate(-50%, -50%) scale(1.35) !important;
    pointer-events: none;
}
/* Ekstra güvence: alt şeride (logo bölgesi) ince bir maske */
.esc-slider-video .sv-video-wrap::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(10,10,10,.55), transparent);
    pointer-events: none;
    z-index: 1;
}

/* ===================================================================
   REDESIGN v1 — Tipografi + Ürün Kartı  (güçlü & karakterli)
   Başlıklar: Oswald (güçlü display) · Gövde/UI/ürün adı: Inter (okunur)
   Dosya sonunda → base + eski elegante kurallarını ezer.
   =================================================================== */
/* Gövde/UI — Inter (font-set 'Lato'yu !important ile ezer).
   NOT: span/li/td EKLENMEZ — bunlar body'den zaten Inter miras alır; span'a
   font zorlamak icomoon ikon fontunu ezip ürün kartı ikonlarını yok ediyordu. */
.tema-elegante,
.tema-elegante p,
.tema-elegante label,
.tema-elegante input,
.tema-elegante select,
.tema-elegante textarea,
.tema-elegante button { font-family: 'Inter', sans-serif !important; letter-spacing: 0; }

/* İkon fontunu koru — Inter override'ı .icon glyph'lerini bozmasın */
.tema-elegante .icon,
.tema-elegante [class^="icon-"],
.tema-elegante [class*=" icon-"],
.tema-elegante .icon::before,
.tema-elegante [class^="icon-"]::before,
.tema-elegante [class*=" icon-"]::before { font-family: 'icomoon' !important; }

/* Başlıklar — Oswald, güçlü, uppercase (font-set 'Cinzel'i ezer) */
.tema-elegante h1, .tema-elegante h2, .tema-elegante h3,
.tema-elegante h4, .tema-elegante h5, .tema-elegante h6,
.tema-elegante .heading,
.tema-elegante .flat-title .title,
.tema-elegante .banner-gr-title,
.tema-elegante .slider-title,
.tema-elegante .box-title-slider h1,
.tema-elegante .box-title-slider h2,
.tema-elegante .esc-slider-video .sv-content h1,
.tema-elegante .esc-slider-video .sv-content h2 {
    font-family: 'Oswald', sans-serif !important;
    font-style: normal !important;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #f3eee3;
}
.tema-elegante h1,
.tema-elegante .banner-gr-title,
.tema-elegante .slider-title,
.tema-elegante .esc-slider-video .sv-content h1 { font-weight: 600; letter-spacing: .05em; }
/* Hero başlığını biraz küçült (Oswald geniş → aynı boyutta iri duruyordu) */
.tema-elegante .esc-slider-video .sv-content h1,
.tema-elegante .esc-slider-video .sv-content h2 {
    font-size: clamp(2rem, 4.6vw, 3.6rem) !important;
    line-height: 1.08 !important;
}
/* Bölüm başlıkları da bir tık küçülsün */
.tema-elegante .flat-title .title,
.tema-elegante h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important; }

/* Menü / footer başlıkları da Oswald ile güçlensin */
.tema-elegante .box-nav-ul .menu-item > a,
.tema-elegante .box-nav-ul .item-link,
.tema-elegante .footer h5, .tema-elegante .footer h6,
.tema-elegante .footer-heading {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500;
}

/* --- Ürün kartı: okunur isim + isim/fiyat nefes payı + ferah alan --- */
.tema-elegante .card-product .card-product-info {
    padding: 16px 14px 16px !important;
    text-align: left;
}
.tema-elegante .card-product .title,
.tema-elegante .card-product .title a {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: .9rem !important;
    line-height: 1.4 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    color: #efe9dd !important;
    /* DİKKAT: display:block, base'deki -webkit-line-clamp:2'yi iptal ediyordu; uzun
       ürün adları 3. satıra taşıp satırdaki kartı yükseltiyordu. Clamp -webkit-box ister. */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;            /* 2 satır × 1.4 — tek satırlık isimde de aynı yer tutar */
    margin-bottom: 9px;           /* ← isim ile fiyat artık yapışık değil */
}
.tema-elegante .card-product .title a:hover { color: #c4a35a !important; }
.tema-elegante .card-product .price {
    display: block;
    margin-top: 0;
    font-size: .95rem;
    letter-spacing: .02em;
    line-height: 1.3;
}
.tema-elegante .card-product .price .old-price { font-size: .82rem; }

/* Kart görsel çerçevesi — hafif, tutarlı; karışık zeminleri toparlar */
.tema-elegante .card-product .card-product-wrapper {
    border: 1px solid #242424;
    background: #121212;
}

/* "Sepete Ekle" (style-7 bilgi alanı butonu) her zaman görünür ve güçlü */
.tema-elegante .card-product .btn-quick-add {
    display: block;
    width: 100%;
    text-align: center;
    padding: 11px 14px;
    margin-bottom: 12px;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
    background: transparent;
    color: #e6e0d4;
    border: 1px solid #c4a35a;
    transition: background .25s ease, color .25s ease;
}
.tema-elegante .card-product .btn-quick-add:hover {
    background: #c4a35a;
    color: #0d0d0d;
}

/* ===================================================================
   REDESIGN v1 — Düzeltmeler (kurumsal sayfalar + footer ödeme ikonları)
   =================================================================== */
/* Kurumsal/statik sayfa başlıkları koyu (rgb 24,24,24) → koyu zeminde
   görünmüyordu. Elegante'de aydınlat. Tüm .static-page-content sayfaları. */
.tema-elegante .static-page-content h1,
.tema-elegante .static-page-content h2,
.tema-elegante .static-page-content h3,
.tema-elegante .static-page-content h4,
.tema-elegante .static-page-content h5,
.tema-elegante .static-page-content h6 { color: #f3eee3 !important; }
.tema-elegante .static-page-content,
.tema-elegante .static-page-content p,
.tema-elegante .static-page-content li { color: #cfc9bd; }
.tema-elegante .static-page-content strong,
.tema-elegante .static-page-content b { color: #ece7da; }
.tema-elegante .static-page-content a { color: #c4a35a; }
/* "İçindekiler" (TOC) yan menü — koyu #555 linkler okunmuyordu */
.tema-elegante .page-sidebar-nav a { color: #b7b1a4 !important; }
.tema-elegante .page-sidebar-nav a:hover,
.tema-elegante .page-sidebar-nav a.active { color: #c4a35a !important; }
.tema-elegante .page-sidebar-nav .fw-6,
.tema-elegante .page-sidebar-nav .fw-7 { color: #f3eee3 !important; }

/* Footer ödeme kartı ikonları — cream/beyaz zemini kaldır (şeffaf) */
.tema-elegante .tf-payment img {
    background: transparent !important;
    padding: 2px 4px !important;
}

/* Ürünler filtresi — BEDEN/nitelik butonları görünmüyordu.
   Inline background:#fff köprüyle koyulaşınca color:#333 kalıp koyu-üstü-koyu
   olduğundan değerler kayboluyordu. Koyu zemin + açık yazı + görünür çerçeve. */
.tema-elegante .beden-btn.nitelik-filtre-btn,
.tema-elegante .nitelik-filtre-btn.btn-outline {
    background: #161616 !important;
    color: #e2dccf !important;
    border-color: #3a3a3a !important;
}
.tema-elegante .beden-btn.nitelik-filtre-btn:hover,
.tema-elegante .nitelik-filtre-btn.btn-outline:hover {
    border-color: #c4a35a !important;
    color: #c4a35a !important;
}
.tema-elegante .beden-btn.nitelik-filtre-btn.btn-fill,
.tema-elegante .nitelik-filtre-btn.btn-fill {
    background: #c4a35a !important;
    color: #0d0d0d !important;
    border-color: #c4a35a !important;
}

/* ===================================================================
   DİKEY (PORTRE) LOGO UYUMU — alparts gibi uzun logolar
   max-height ile ölçeklenir (yatay logoları bozmaz), width auto.
   Header'a göre responsive: anasayfa şeffaf header'da belirgin,
   scroll'da ve iç sayfalarda kompakt. Mobilde daha küçük.
   =================================================================== */
.tema-elegante .logo-header { display: inline-flex; align-items: center; vertical-align: middle; }
/* Logoyu header içinde DİKEY ORTALA.
   NEDEN: logoyu saran kolon display:block. .logo-header inline-flex olduğu için
   satır kutusuna oturuyor ve tepeye yapışıyordu (ölçüm: üstte 0px, altta 7px).
   Satır zaten .align-items-center; eksik olan kolonun kendisiydi. */
.tema-elegante .wrapper-header > [class*="col-"]:has(> .logo-header) {
    display: flex;
    align-items: center;
}
/* :has() desteklemeyen tarayıcılarda da tepeye yapışmasın */
@supports not selector(:has(*)) {
    .tema-elegante .logo-header { margin-top: 3px; }
}
.tema-elegante .logo-header .logo {
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Anasayfa şeffaf header — hero üstünde belirgin dursun (ilk görünümde daha büyük) */
.tema-elegante #header.header-absolute .logo-header .logo {
    max-height: 104px;
    transition: max-height .3s ease;
}
/* Scroll edilince küçülen sabit header */
.tema-elegante #header.header-absolute.header-bg .logo-header .logo {
    max-height: 54px;
}
/* İç sayfa dolu header */
.tema-elegante #header.header-default:not(.header-absolute) .logo-header .logo {
    max-height: 66px;
}
@media (max-width: 991px) {
    /* Header'ın kendi dikey padding'i YOK — yüksekliğini tamamen logo belirliyordu.
       Bu yüzden logo tepeye yapışık duruyordu (ölçüm: üstte 0px, altta 7px) ve
       logoyu küçültmek de işe yaramıyordu; header onunla birlikte küçülüp payı
       yine yok ediyordu. Çözüm boyut değil boşluk: satıra dikey padding.
       Ölçülen sonuç: üstte 10px, altta 10px — logo tam ortada. */
    .tema-elegante #header.header-absolute .wrapper-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .tema-elegante #header.header-absolute .logo-header .logo { max-height: 70px; }
    .tema-elegante #header.header-absolute.header-bg .logo-header .logo { max-height: 50px; }
    .tema-elegante #header.header-default:not(.header-absolute) .logo-header .logo { max-height: 54px; }
}

/* ===================================================================
   TEMA-ORGANIK — Doğal Minimalizm (Organik / Sürdürülebilir Moda)
   İlham: betisaco.com — beyaz zemin, kum (sand) bantlar, espresso metin,
   yüksek kontrastlı serif başlık + Inter gövde, keskin köşe, bol boşluk.
   renk_sinifi="tema-organik" ile body'ye uygulanır.
   --- Renkler ---
   zemin #ffffff · bant #f8f3ec · mürekkep #121212 · espresso #3e2c20 · çizgi #e7ded1
   NOT: DM Serif Display + Inter, font eklentisindeki "dmserif-inter" setiyle
   yüklenir. Eklenti kapalıysa temayla gelen Gloock / Albert Sans'a düşer.
   =================================================================== */
.tema-organik {
    --primary: #3e2c20;            /* espresso — vurgu */
    --main: #121212;               /* mürekkep */
    --backdrop: #f8f3ec;           /* kum bant */
    --org-ink: #121212;
    --org-sand: #f8f3ec;
    --org-espresso: #3e2c20;
    --org-line: #e7ded1;
    --org-dim: rgba(18,18,18,.62);
    --org-btn: #6b5443;            /* sıcak kahve — buton zemini (siyah değil) */
    --org-btn-hover: #4a382b;
    background-color: #fff;
    font-family: 'Inter', 'Albert Sans', sans-serif;
    font-weight: 400;
    color: rgba(18,18,18,.82);
    letter-spacing: 0;
}

/* Başlıklar — yüksek kontrastlı display serif */
.tema-organik h1, .tema-organik h2, .tema-organik h3,
.tema-organik h4, .tema-organik h5, .tema-organik h6,
.tema-organik .heading,
.tema-organik .tf-cart-title,
.tema-organik .product-name,
.tema-organik .card-product .title {
    font-family: 'DM Serif Display', 'Gloock', Georgia, serif;
    font-weight: 400;
    letter-spacing: .005em;
    color: #121212;
    line-height: 1.2;
}
.tema-organik h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.tema-organik h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
.tema-organik h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }

/* Ürün kartı adı — serif ama küçük punto (etiket hissi) */
.tema-organik .card-product .title,
.tema-organik .card-product .title a {
    font-size: 1rem;
    letter-spacing: 0;
    color: #121212;
}

/* Butonlar — mürekkep zemin, keskin köşe, harf aralıklı uppercase */
.tema-organik .tf-btn.btn-fill,
.tema-organik .tf-btn.btn-dark,
.tema-organik .btn-dark,
.tema-organik button[type="submit"].tf-btn {
    background: var(--org-btn);
    border-color: var(--org-btn);
    color: #fff;
    border-radius: 0 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', 'Albert Sans', sans-serif;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.tema-organik .tf-btn.btn-fill:hover,
.tema-organik .tf-btn.btn-dark:hover {
    background: var(--org-btn-hover);
    border-color: var(--org-btn-hover);
    color: #fff;
}
.tema-organik .tf-btn.btn-line {
    border-radius: 0 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
    border-color: var(--org-espresso);
    color: var(--org-espresso);
}
.tema-organik .tf-btn.btn-line:hover { color: #3e2c20; border-color: #3e2c20; }

/* Kartlar — keskin köşe, gölgesiz, şeffaf zemin */
.tema-organik .card-product,
.tema-organik .card-product .card-product-wrapper,
.tema-organik .card-product img,
.tema-organik .wishlist-card,
.tema-organik .collection-item,
.tema-organik .img-box,
.tema-organik .offcanvas,
.tema-organik .modal-content {
    border-radius: 0 !important;
}
.tema-organik .card-product .card-product-wrapper {
    background: transparent;
    box-shadow: none;
}
.tema-organik .card-product .card-product-wrapper img { transition: opacity .5s ease; }
.tema-organik .card-product:hover .card-product-wrapper img { opacity: .9; }
.tema-organik .card-product .card-product-info { padding-top: 14px; padding-bottom: 4px; }

/* Grid — havadar */
.tema-organik .grid-layout,
.tema-organik .tf-grid-layout { gap: 40px 24px !important; }

/* Fiyat — sade sans, mürekkep */
.tema-organik .price,
.tema-organik .price-now,
.tema-organik .current-price {
    color: #121212;
    font-weight: 400;
    font-family: 'Inter', 'Albert Sans', sans-serif;
    letter-spacing: .02em;
    font-size: .92rem;
}

/* Header — beyaz, ince alt çizgi */
.tema-organik #header,
.tema-organik header.header-default,
.tema-organik .header-minimal,
.tema-organik .header-style-2,
.tema-organik .header-style-3 {
    /* Beyaz — kum top bar'ın altında nefes alan bir şerit. Header da kum olunca
       üst blok tek parça ve ağır görünüyordu. */
    background: #fff;
    /* base tema header sınırı !important ile geliyor — ezmek için gerekli */
    border-bottom: 1px solid var(--org-line) !important;
    padding-top: 6px;
    padding-bottom: 6px;
}
.tema-organik .logo-header img,
.tema-organik .header-logo img { max-height: 46px; width: auto; }

/* Menü */
.tema-organik .box-nav-ul .menu-item > a,
.tema-organik nav .menu-item > a {
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    font-family: 'Inter', 'Albert Sans', sans-serif;
    color: #121212;
    padding-top: 8px;
    padding-bottom: 8px;
}
.tema-organik .box-nav-ul .menu-item > a:hover,
.tema-organik nav .menu-item > a:hover { color: #3e2c20; }
.tema-organik .nav-icon .icon,
.tema-organik .header-action .action-icon { color: #121212; }
.tema-organik .nav-icon .icon:hover,
.tema-organik .header-action .action-icon:hover { color: #3e2c20; }

/* Top bar — kum bant, espresso metin (siyah bant markanın havasını bozuyordu) */
.tema-organik .tf-top-bar {
    background: var(--org-sand) !important;
    color: var(--org-espresso);
    border-bottom: 1px solid var(--org-line);
}
/* .text_white gibi utility'ler kum bantta okunmaz hale getiriyor — ezilmesi gerek */
.tema-organik .tf-top-bar .top-bar-text {
    color: var(--org-espresso) !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 10px;
    font-family: 'Inter', 'Albert Sans', sans-serif;
    font-weight: 500;
}
.tema-organik .tf-top-bar a,
.tema-organik .tf-top-bar .icon,
.tema-organik .tf-top-bar .tb-select { color: var(--org-espresso); }
/* Sosyal ikonlar — koyu bant için siyah daire geliyordu; kum bantta ince çerçeve */
.tema-organik .tf-top-bar .tf-social-icon .box-icon {
    background: transparent !important;
    border: 1px solid var(--org-line);
    color: var(--org-espresso) !important;
}
.tema-organik .tf-top-bar .tf-social-icon .box-icon:hover {
    background: var(--org-espresso) !important;
    border-color: var(--org-espresso);
    color: #fff !important;
}

/* Footer — kum zemin, espresso metin (doğal his; koyu footer yok) */
.tema-organik footer,
.tema-organik .footer {
    background: var(--org-sand);
    color: rgba(62,44,32,.78);
    border-top: 1px solid var(--org-line);
}
.tema-organik footer a, .tema-organik .footer a { color: rgba(62,44,32,.78); }
.tema-organik footer a:hover, .tema-organik .footer a:hover { color: #121212; }
.tema-organik footer h5, .tema-organik footer h6,
.tema-organik .footer h5, .tema-organik .footer h6 {
    color: #3e2c20;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 11px;
    font-family: 'Inter', 'Albert Sans', sans-serif;
    font-weight: 600;
}
.tema-organik .footer-bottom { border-top: 1px solid var(--org-line); }

/* Form alanları — keskin köşe, kum çizgi */
.tema-organik input.tf-field,
.tema-organik .form-control,
.tema-organik .form-select,
.tema-organik .form-checkout input,
.tema-organik .form-checkout select,
.tema-organik .form-checkout textarea {
    border-radius: 0 !important;
    border-color: #ddd2c2 !important;
    background: #fff;
}
.tema-organik input:focus, .tema-organik select:focus, .tema-organik textarea:focus {
    border-color: #3e2c20 !important;
    box-shadow: none !important;
}

/* Rozetler — espresso çerçeve, keskin */
.tema-organik .on-sale-item,
.tema-organik .badge-yeni,
.tema-organik .card-product .on-sale-wrap .on-sale-item {
    background: transparent;
    border: 1px solid #3e2c20;
    color: #3e2c20;
    border-radius: 0;
    letter-spacing: .14em;
    font-size: 9px;
    text-transform: uppercase;
    font-family: 'Inter', 'Albert Sans', sans-serif;
    font-weight: 500;
    padding: 2px 7px;
}

/* Slider metni panelden seçilen renge uymalı (Slider → Metin Rengi).
   Skin'in koyu başlık rengi, koyu görsellerdeki beyaz metni eziyordu. */
.tema-organik .tf-slideshow .box-content .text-white,
.tema-organik .tf-slideshow .box-content .heading.text-white { color: #fff !important; }
.tema-organik .tf-slideshow .box-content .text-dark,
.tema-organik .tf-slideshow .box-content .heading.text-dark { color: #1c140e !important; }

/* Slider metni — büyük editorial serif */
.tema-organik .banner-gr-title,
.tema-organik .slider-title,
.tema-organik .box-title-slider h1,
.tema-organik .box-title-slider h2 {
    font-family: 'DM Serif Display', 'Gloock', Georgia, serif;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.12;
}

/* Marquee */
.tema-organik .tf-marquee .marquee-item {
    font-family: 'Inter', 'Albert Sans', sans-serif;
    letter-spacing: .18em;
    font-size: 11px;
    font-weight: 500;
}

/* Newsletter — kum bant */
.tema-organik .flat-newsletter,
.tema-organik .newsletter-section {
    background: var(--org-sand);
    border-top: 1px solid var(--org-line);
    border-bottom: 1px solid var(--org-line);
}
.tema-organik .flat-newsletter input[type="email"],
.tema-organik .newsletter-section input[type="email"] {
    border-radius: 0 !important;
    border: 1px solid #ddd2c2;
    background: #fff;
    font-family: 'Inter', 'Albert Sans', sans-serif;
    font-size: 13px;
}

/* Yorum bölümü — kum bant (beyaz akışı böler) */
.tema-organik .flat-testimonial,
.tema-organik .tf-testimonial,
.tema-organik section.bg-surface { background: var(--org-sand); }

/* Breadcrumb */
.tema-organik .tf-breadcrumb .breadcrumb-item,
.tema-organik .breadcrumb li {
    font-family: 'Inter', 'Albert Sans', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--org-dim);
}
.tema-organik .tf-breadcrumb .breadcrumb-item.active { color: #121212; }

/* Bölüm başlıkları — ortalanmış, ince espresso ayraç */
.tema-organik .flat-title { padding-top: 24px; padding-bottom: 8px; }
.tema-organik .flat-title .title,
.tema-organik .heading-section { position: relative; padding-bottom: 18px; }
.tema-organik .flat-title .title::after,
.tema-organik .heading-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 36px;
    height: 1px;
    background: #3e2c20;
}
.tema-organik .flat-title .sub,
.tema-organik .heading-section .sub {
    font-family: 'Inter', 'Albert Sans', sans-serif;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #3e2c20;
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
}

/* Bölüm boşlukları — bol beyaz alan */
.tema-organik section,
.tema-organik .flat-spacing {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* Sepet drawer / modal — beyaz kalsın, keskin köşe */
.tema-organik .offcanvas { background: #fff; }
.tema-organik .modal-content { background: #fff; }

/* Mobil uyum */
@media (max-width: 767px) {
    .tema-organik section,
    .tema-organik .flat-spacing { padding-top: 52px !important; padding-bottom: 52px !important; }
    .tema-organik .grid-layout,
    .tema-organik .tf-grid-layout { gap: 26px 14px !important; }
    .tema-organik h1 { font-size: 2.1rem; }
    .tema-organik h2 { font-size: 1.6rem; }
}

/* ============================================================
   ÜRÜN KARTI HİZA DÜZELTMELERİ (12 Ağu 2026)
   Müşteri bildirimi: kartların alt kenarları hizalanmıyor, mobilde
   swiper noktaları puan rozetinin üstüne biniyor.
   ============================================================ */

/* 1) Koyu temada bilgi paneli görünür bir kutu (#161616). Grid hücresi
      stretch olsa da panel içeriği kadar kaldığından kısa isimli kartın
      kutusu yukarıda bitiyordu. Kartı flex kolon yapıp paneli esnetiyoruz. */
.tema-elegante .card-product {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tema-elegante .card-product .card-product-info {
    flex: 1 1 auto;
}

/* 2) Base ecomus'ta .wrap-sw-over swiper'a margin-bottom:-40px veriyor;
      dots'un margin-top'u 32px → net -8px, noktalar kartın son 8px'ine biniyor.
      Kart altına sadakat puan rozeti eklenince o boşluk doldu ve çakışma görünür
      oldu. Noktalar zaten yalnız mobilde (d-md-none) çıkıyor. */
@media (max-width: 767.98px) {
    .swiper.wrap-sw-over { margin-bottom: 0 !important; }
}

/* ===================================================================
   SHOP THE LOOK — kaplama düzeltmeleri (12 Ağu 2026)
   Paketteki demo iki görseli yan yana gösterdiği için tam genişlik kullanıyor;
   tek görselde ekranı kaplayan devasa bir blok oluşuyordu. Noktalar da beyaz
   yuvarlaktı, açık zeminli görsellerde kaybolup "eksik" görünüyordu.
   =================================================================== */
.esc-lookbook-tuval { position: relative; }
.esc-lookbook-tuval .wrap-lookbook { position: relative; }

/* Başlıkla kareler arasında nefes payı.
   TUZAK: base'de .tf-sw-lookbook'a margin-top:-70px veriliyor (pakette başlığı
   görselin üstüne bindirmek için). Bizim düzende bu, kareleri alt başlığın
   üstüne çıkarıyordu. Sıfırlanmalı. */
.esc-lookbook .flat-title { margin-bottom: 28px; }
.esc-lookbook .tf-sw-lookbook { margin-top: 0 !important; }

/* TEK KARE: container içinde, kendi en-boy oranında. Kırpma yok. */
.esc-lb-tekli .wrap-lookbook .image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ÇOKLU KARE: yan yana duracakları için EŞİT YÜKSEKLİK şart; biri kısa kalırsa
   bozuk görünüyor. Sabit en-boy oranı + cover ile hizalanırlar. Kullanıcı farklı
   oranlarda görsel yüklese de düzen bozulmaz. */
.esc-lb-coklu .wrap-lookbook .image img {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    display: block;
}
@media (max-width: 767.98px) {
    /* Mobilde tek tek kaydırıldığı için kırpmaya gerek yok */
    .esc-lb-coklu .wrap-lookbook .image img { aspect-ratio: 4 / 3; }
}

/* Nokta düğmesi — paketin yumuşak dairesi korunur (kare yapılınca bozuk görsel
   ikonu gibi duruyordu). Tek fark: açık zeminli fotoğraflarda kaybolmasın diye
   beyaz dolgu + ince halka + yumuşak gölge. */
.esc-lookbook-tuval .tf-pin-btn {
    width: 26px;
    height: 26px;
    background-color: #fff !important;
    border: 0 !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.22);
    transition: transform .2s ease, box-shadow .2s ease;
}
.esc-lookbook-tuval .tf-pin-btn span {
    width: 8px;
    height: 8px;
    background-color: #111 !important;
}
.esc-lookbook-tuval .tf-pin-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 4px 14px rgba(0,0,0,.3);
}

/* Masaüstünde noktanın üzerine gelince ürün kartı açılsın — tıklamayı beklemeden
   hangi ürün olduğu görünsün. Mobilde dokunmayla (bootstrap dropdown) açılır. */
@media (hover: hover) and (min-width: 768px) {
    .esc-lookbook-tuval .lookbook-item .btn-group:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

/* Mobil ürün şeridi — dar ekranda balon zor okunuyor; ürünler görselin altında
   ayrıca listelenir. Masaüstünde gizli. */
.esc-lookbook-mobil { display: none; }
@media (max-width: 767.98px) {
    .esc-lookbook-mobil { display: block; margin-top: 14px; }
    .esc-lookbook-urunler {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .esc-lookbook-urun {
        flex: 0 0 128px;
        display: block;
        text-decoration: none;
        color: inherit;
        border: 1px solid var(--line);
        padding: 8px;
        background: var(--white);
    }
    .esc-lookbook-urun img {
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
        display: block;
        margin-bottom: 6px;
    }
    .esc-lookbook-urun .ad {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .78rem;
        line-height: 1.35;
        min-height: 2.1em;
    }
    .esc-lookbook-urun .fiyat { display: block; font-weight: 600; font-size: .82rem; margin-top: 3px; }
}

/* Açılır ürün kartı — köşeli */
.esc-lookbook-tuval .dropdown-menu,
.esc-lookbook-tuval .lookbook-product,
.esc-lookbook-tuval .lookbook-product img { border-radius: 0 !important; }
.esc-lookbook-tuval .lookbook-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    min-width: 240px;
    background: var(--white);
    border: 1px solid var(--line);
}
.esc-lookbook-tuval .lookbook-product img { width: 60px; height: 60px; object-fit: cover; }
.esc-lookbook-tuval .lookbook-product .product-title a { font-size: .9rem; line-height: 1.35; }
.esc-lookbook-tuval .lookbook-product .price { font-weight: 600; margin-top: 3px; }

/* ===================================================================
   TEMA: VİTRİN — Canlı Perakende  (12 Ağu 2026)
   Antrasit yapı + turuncu aksiyon. Turuncu YALNIZ aksiyonda kullanılır
   (sepete ekle, indirim rozeti, aktif durum); zemin ve tipografi nötr
   kalır ki ürün fotoğrafı önde dursun. Geniş katalog / pazaryeri tonu.
   Font: Oswald (kondens başlık) + Inter (gövde) — ikisi de zaten yüklü.
   =================================================================== */
.tema-vitrin {
    --main: #232323;              /* saf siyah değil; antrasit, logoyla aynı aile */
    --white: #ffffff;
    --primary: #ff7a00;
    --red_1: #ff7a00;
    --yellow: #ff7a00;
    --text: #4a4a4a;
    --text-2: #7d7d7d;
    --text-3: #7d7d7d;
    --line: #e6e6e6;
    --line-2: #ededed;
    --bg-1: #fafafa; --bg-2: #f5f5f5;
    --bg-7: #f7f7f7; --bg-8: #f7f7f7; --bg-9: #f7f7f7;
    --bg-10: #fafafa;
    --bg-11: #f2f2f2;
    --main-rgba-1: rgba(35,35,35,.14);
    --main-rgba-2: rgba(35,35,35,.12);
    font-family: 'Inter', sans-serif;
    color: #4a4a4a;
}

/* Başlıklar — logodaki ağır kondens grotesk dili */
.tema-vitrin h1, .tema-vitrin h2, .tema-vitrin h3,
.tema-vitrin h4, .tema-vitrin h5, .tema-vitrin h6,
.tema-vitrin .flat-title .title,
.tema-vitrin .heading {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #232323;
}

/* Aksiyon butonları — turuncu dolgu, köşeli */
.tema-vitrin .tf-btn.btn-fill,
.tema-vitrin .btn-quick-add,
.tema-vitrin .btn-main-product {
    background-color: #ff7a00 !important;
    border: 1px solid #ff7a00 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tema-vitrin .tf-btn.btn-fill:hover,
.tema-vitrin .btn-quick-add:hover,
.tema-vitrin .btn-main-product:hover {
    background-color: #232323 !important;
    border-color: #232323 !important;
}
/* İkincil buton — antrasit çerçeve, dolgusuz */
.tema-vitrin .tf-btn.btn-outline {
    background: transparent !important;
    border: 1px solid #232323 !important;
    color: #232323 !important;
    border-radius: 0 !important;
}

/* İndirim rozeti — turuncunun asıl yeri */
.tema-vitrin .on-sale-item,
.tema-vitrin .product-sale {
    background-color: #ff7a00 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

/* Ürün kartı — hairline çerçeve, köşesiz, fiyat antrasit */
.tema-vitrin .card-product { display: flex; flex-direction: column; height: 100%; }
.tema-vitrin .card-product .card-product-wrapper { border: 1px solid var(--line); }
.tema-vitrin .card-product .card-product-info { flex: 1 1 auto; padding-top: 14px; text-align: left; }
.tema-vitrin .card-product .title,
.tema-vitrin .card-product .title a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: .9rem;
    line-height: 1.4;
    color: #232323;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    margin-bottom: 8px;
}
.tema-vitrin .card-product .price { font-family: 'Oswald', sans-serif; font-size: 1rem; color: #232323; }
.tema-vitrin .card-product .old-price { color: #9a9a9a; font-weight: 400; }

/* Yuvarlak kategori madalyonları — hover'da turuncu halka */
.tema-vitrin .collection-circle .img-style,
.tema-vitrin .collection-circle img { border: 2px solid transparent; transition: border-color .25s ease; }
.tema-vitrin .collection-circle:hover .img-style,
.tema-vitrin .collection-circle:hover img { border-color: #ff7a00; }

/* Turuncu topbar şeridi — marka enerjisi ince bir bantla sınırlı */
.tema-vitrin .tf-topbar.topbar-colored,
.tema-vitrin .topbar-colored { background-color: #ff7a00 !important; color: #fff !important; }
.tema-vitrin .topbar-colored a,
.tema-vitrin .topbar-colored span { color: #fff !important; }

/* Köşeli duruş — [[feedback_kod_stili]] */
.tema-vitrin .form-control,
.tema-vitrin .form-select,
.tema-vitrin .card,
.tema-vitrin .modal-content { border-radius: 0 !important; }
.tema-vitrin .form-control:focus,
.tema-vitrin .form-select:focus { border-color: #ff7a00 !important; box-shadow: none !important; }

/* Link ve aktif durumlar */
.tema-vitrin a:hover,
.tema-vitrin .menu-item.active > a { color: #ff7a00; }

/* LOGO — base'de .logo-header width:136px sabit. Yatay (geniş/alçak) logolarda
   yükseklik 12px'e düşüp okunmaz oluyor. Genişliği serbest bırakıp yükseklikten
   sınırlıyoruz; kolonda zaten ~300px yer var. */
.tema-vitrin .logo-header,
.tema-kuyum .logo-header { width: auto !important; max-width: 100%; }
.tema-vitrin .logo-header img,
.tema-kuyum .logo-header img {
    width: auto !important;
    height: auto !important;
    max-height: 40px;
    max-width: 100%;
    object-fit: contain;
}
@media (max-width: 767.98px) {
    .tema-vitrin .logo-header img,
    .tema-kuyum .logo-header img { max-height: 30px; }
}
/* Footer logosu base'de brightness(0) invert(1) ile komple beyaza çevriliyor;
   marka rengi yok oluyor. Açık temada gerek yok, koyuda da turuncuyu koruyalım. */
.tema-vitrin .footer img[src*="/uploads/"],
.tema-kuyum .footer img[src*="/uploads/"] { filter: none !important; }


/* ===================================================================
   TEMA: KUYUM — Siyah & Şampanya  (12 Ağu 2026)
   Sıcak koyu zemin (kahve-siyah, nötr siyah DEĞİL) + şampanya altını.
   tema-elegante'den kasıtlı ayrışır: orada Playfair/Cormorant serif ve
   nötr #0d0d0d var; burada geometrik Jost + geniş harf aralığı ve sıcak
   #100d0a zemin — çağdaş kuyumcu dili, klasik lüks değil.
   Koyu tema mimarisi 3 katman: token → köprü → bileşen.
   =================================================================== */
/* ---- 1) TOKEN KATMANI — base'in var(--..) kullandığı her yer otomatik döner ---- */
.tema-kuyum {
    --main: #f0e9dd;              /* base'de "koyu metin" rolü — koyuda açık olmalı */
    --white: #17130f;             /* panel/kart yüzeyi */
    --primary: #d9c08c;           /* şampanya altını */
    --red_1: #d9c08c;
    --yellow: #d9c08c;
    --text: #cfc6b6;
    --text-2: #9d9484;
    --text-3: #9d9484;
    --text-secondary: #9d9484;
    --line: #2c2419;
    --line-2: #2c2419;
    --bg-1: #100d0a; --bg-2: #17130f;
    --bg-7: #17130f; --bg-8: #17130f; --bg-9: #17130f;
    --bg-10: #100d0a;
    --bg-11: #17130f;             /* KRİTİK: adet kutusu, sort dropdown, hesap menüsü */
    --bg-load: #1d1811;
    --bg-scrollbar-track: #100d0a;
    --bg-scrollbar-thumb: #33291c;
    --main-rgba-1: rgba(255,255,255,.10);
    --main-rgba-2: rgba(255,255,255,.08);
    --backdrop: rgba(0,0,0,.7);
    --ky-ink: #f0e9dd;
    --ky-ink-dim: #8d8474;
    --ky-gold: #d9c08c;
    background-color: #100d0a;
    font-family: 'Raleway', sans-serif;
    color: #cfc6b6;
}

/* ---- 2) KÖPRÜ KATMANI — token dinlemeyen utility ve hardcoded açık zeminler ---- */
.tema-kuyum .bg-white,
.tema-kuyum .bg-light,
.tema-kuyum .bg-surface,
.tema-kuyum [style*="background:#fff"],
.tema-kuyum [style*="background: #fff"],
.tema-kuyum [style*="background-color:#fff"],
.tema-kuyum [style*="background:#f"],
.tema-kuyum [style*="background-color:#f"] { background-color: var(--bg-1) !important; }

.tema-kuyum .text-dark,
.tema-kuyum .text-black { color: var(--ky-ink) !important; }
.tema-kuyum .text-white-50,
.tema-kuyum .text-body-secondary { color: var(--ky-ink-dim) !important; }
.tema-kuyum .text-muted { color: var(--text-2) !important; }
/* Koyu topbar/footer'daki açık metinler — --white koyulaştığı için ezilmeli */
.tema-kuyum .text_white,
.tema-kuyum .text-white { color: var(--ky-ink) !important; }

.tema-kuyum .card,
.tema-kuyum .modal-content,
.tema-kuyum .dropdown-menu,
.tema-kuyum .list-group-item,
.tema-kuyum .accordion-item,
.tema-kuyum .accordion-button {
    background-color: var(--bg-7) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
    border-radius: 0 !important;
}
.tema-kuyum .table { color: var(--text) !important; border-color: var(--line) !important; }

.tema-kuyum .form-control,
.tema-kuyum .form-select,
.tema-kuyum .input-group-text {
    background-color: var(--white) !important;
    color: var(--ky-ink) !important;
    border-color: var(--line) !important;
    border-radius: 0 !important;
}
.tema-kuyum .form-control::placeholder { color: var(--text-2) !important; opacity: 1; }
.tema-kuyum .form-control:focus,
.tema-kuyum .form-select:focus { border-color: var(--ky-gold) !important; box-shadow: none !important; }

.tema-kuyum .border,
.tema-kuyum .border-top,
.tema-kuyum .border-bottom,
.tema-kuyum .border-start,
.tema-kuyum .border-end { border-color: var(--line) !important; }

.tema-kuyum .main-content,
.tema-kuyum #wrapper,
.tema-kuyum section,
.tema-kuyum .flat-spacing,
.tema-kuyum .flat-spacing-1,
.tema-kuyum .flat-spacing-2 { background-color: #100d0a; }

/* "Görsel Yok" placeholder — kartta inline açık gri geliyor */
.tema-kuyum .card-product-wrapper .product-img > div[style*="background"] { background: #17130f !important; }

/* TUZAK: base'de .bg_dark / .background-black zemini var(--main)'den alıyor.
   Koyu temada --main açık krem olduğu için topbar ve footer KREM çıkıyordu.
   Aynı sebeple header'ın bg_light-* varyantları da açık kalıyor. */
.tema-kuyum .tf-top-bar.bg_dark,
.tema-kuyum .bg_dark,
.tema-kuyum .footer.background-black,
.tema-kuyum .background-black { background-color: #0b0908 !important; }
.tema-kuyum .header-default,
.tema-kuyum .header-white,
.tema-kuyum [class*="bg_light"] { background-color: #100d0a !important; }

/* Kayan paneller (sepet, mobil menü, filtre) — base'de sabit beyaz */
.tema-kuyum .offcanvas,
.tema-kuyum .offcanvas-menu,
.tema-kuyum .offcanvas .offcanvas-body {
    background-color: #100d0a !important;
    color: var(--text) !important;
}
.tema-kuyum .offcanvas .btn-close { filter: invert(1) grayscale(1); opacity: .7; }

/* #f2f2f2'yi token'dan DEĞİL sabit yazan bileşenler (adet kutusu, mobil
   kabuk ikonu) — --bg-11'i çevirmek bunları yakalamıyor. */
.tema-kuyum .wg-quantity,
.tema-kuyum .site-nav-icon,
.tema-kuyum [style*="#f2f2f2"] { background-color: #17130f !important; }
.tema-kuyum .wg-quantity .btn-quantity,
.tema-kuyum .wg-quantity input { background: transparent !important; color: var(--ky-ink) !important; }

/* Breadcrumb linkleri — koyu zeminde koyu metin kalıyordu */
.tema-kuyum .tf-breadcrumb-list .item-link,
.tema-kuyum .item-link { color: var(--text-2) !important; }
.tema-kuyum .tf-breadcrumb-list .item-link:hover { color: var(--ky-gold) !important; }

/* Sayfa içi <style> bloğu olan görünümler — class tabanlı sabit renkler,
   köprünün [style*=] yakalayıcısı bunlara ulaşmıyor. Yeni sayfa eklenince
   kendi <style>'ına bakıp buraya bir satır eklemek gerekir. */
.tema-kuyum .contact-form-box,
.tema-kuyum .contact-info-card,
.tema-kuyum .cart-summary-box,
.tema-kuyum .kupon-box { background: #17130f !important; border-color: var(--line) !important; }
.tema-kuyum .working-hours-badge {
    background: rgba(217,192,140,.10) !important;
    color: var(--ky-gold) !important;
    border-color: #3a2f1a !important;
}
.tema-kuyum label,
.tema-kuyum .form-label { color: var(--text) !important; }
.tema-kuyum a:not(.tf-btn):not(.btn-quick-add) { color: inherit; }

/* Açılır menüler — mega menü dahil */
.tema-kuyum .sub-menu,
.tema-kuyum .sub-menu.mega-menu,
.tema-kuyum .mega-menu,
.tema-kuyum .nav-sub-menu {
    background-color: #17130f !important;
    border: 1px solid var(--line) !important;
}
.tema-kuyum .sub-menu a,
.tema-kuyum .mega-menu a,
.tema-kuyum .nav-sub-menu a { color: var(--text) !important; }
.tema-kuyum .sub-menu a:hover,
.tema-kuyum .mega-menu a:hover { color: var(--ky-gold) !important; }

/* ---- 3) BİLEŞEN KATMANI — temanın kendi karakteri ---- */
/* Başlıklar — geniş aralıklı geometrik sans; elegante'nin serifinden net ayrım */
.tema-kuyum h1, .tema-kuyum h2, .tema-kuyum h3,
.tema-kuyum h4, .tema-kuyum h5, .tema-kuyum h6,
.tema-kuyum .flat-title .title,
.tema-kuyum .heading {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ky-ink);
}
.tema-kuyum p, .tema-kuyum span, .tema-kuyum li,
.tema-kuyum .description { color: #bdb4a4; }

/* Altın butonlar — dolgu değil ince çerçeve; kuyumda daha pahalı durur */
.tema-kuyum .tf-btn.btn-fill,
.tema-kuyum .btn-quick-add,
.tema-kuyum .btn-main-product {
    background: transparent !important;
    border: 1px solid var(--ky-gold) !important;
    color: var(--ky-gold) !important;
    border-radius: 0 !important;
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tema-kuyum .tf-btn.btn-fill:hover,
.tema-kuyum .btn-quick-add:hover,
.tema-kuyum .btn-main-product:hover {
    background: var(--ky-gold) !important;
    color: #100d0a !important;
}

/* Ürün kartı — sakin, çerçevesiz, fotoğraf öne çıksın */
.tema-kuyum .card-product { display: flex; flex-direction: column; height: 100%; }
.tema-kuyum .card-product .card-product-info {
    flex: 1 1 auto;
    background: transparent !important;
    padding: 14px 4px 0;
    text-align: center;
}
.tema-kuyum .card-product .title,
.tema-kuyum .card-product .title a {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: .86rem;
    letter-spacing: .06em;
    line-height: 1.45;
    color: var(--ky-ink);
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
    margin-bottom: 7px;
}
.tema-kuyum .card-product .title a:hover { color: var(--ky-gold); }
.tema-kuyum .card-product .price { font-family: 'Jost', sans-serif; letter-spacing: .05em; color: var(--ky-gold); }
.tema-kuyum .card-product .old-price { color: #7d7466; }
.tema-kuyum .card-product:hover .card-product-wrapper img { opacity: .88; transform: none !important; }

/* İndirim rozeti — altın çerçeve, dolgusuz */
.tema-kuyum .on-sale-item,
.tema-kuyum .product-sale {
    background: rgba(16,13,10,.72) !important;
    border: 1px solid var(--ky-gold) !important;
    color: var(--ky-gold) !important;
    border-radius: 0 !important;
}

/* Yuvarlak kategori madalyonları — altın hairline */
.tema-kuyum .collection-circle .img-style,
.tema-kuyum .collection-circle img { border: 1px solid var(--line); transition: border-color .25s ease; }
.tema-kuyum .collection-circle:hover .img-style,
.tema-kuyum .collection-circle:hover img { border-color: var(--ky-gold); }

/* Sadakat puan rozeti — inline açık zemin ezilir */
.tema-kuyum .puan-rozet {
    background: #17130f !important;
    color: var(--ky-gold) !important;
    border-color: #3a2f1a !important;
}

/* Grid nefes payı */
.tema-kuyum .grid-layout,
.tema-kuyum .tf-grid-layout { gap: 34px 22px !important; }

@media (max-width: 767.98px) {
    .tema-kuyum .grid-layout,
    .tema-kuyum .tf-grid-layout { gap: 24px 12px !important; }
    .tema-kuyum h1 { font-size: 1.9rem; }
    .tema-kuyum h2 { font-size: 1.5rem; }
    .tema-vitrin h1 { font-size: 2rem; }
    .tema-vitrin h2 { font-size: 1.55rem; }
}


/* ===================================================================
   TEMA: YAŞAR — Kırmızı & Yeşil  (15 Ağu 2026)
   yasarcorap.com için. Logo siyah kutu üzerinde kırmızı-yeşil YC
   monogramı; skin o üçlüyü net bir hiyerarşiyle kurar:
     • YEŞİL  = marka zemini — topbar, kategori şeridi, footer bandı.
                Sayfada UZUN yatay yüzeyleri kaplar, marka rengi olduğu
                ilk bakışta anlaşılsın diye. (Referans: market/bakkal
                düzeni — müşterinin istediği "sade olmasın" bu şerittir.)
     • KIRMIZI = aksiyon — sepete ekle, kategori açılır butonu, indirim
                rozeti, fiyat vurgusu, aktif link.
     • SİYAH  = tipografi ve çerçeve.
   İki marka rengi aynı bileşende yarışmaz: yeşil ZEMİN olur, kırmızı
   o zeminin ÜSTÜNDEKİ tıklanacak parçadır. Ürün alanı beyaz kalır ki
   çorap fotoğrafı (çoğu düz renk, yakın çekim) önde dursun.
   Header: tema.header_stili = style-4 (açık arama + kategori açılırı).
   Font: Jost (başlık) + Inter (gövde) — ikisi de zaten yüklü.
   =================================================================== */
.tema-yasar {
    --main: #141414;              /* logo kutusuyla aynı aile; saf siyah değil */
    --white: #ffffff;
    --primary: #d62027;           /* marka kırmızısı */
    --red_1: #d62027;
    --yellow: #d62027;
    --text: #4a4a4a;
    --text-2: #7c7c7c;
    --text-3: #7c7c7c;
    --line: #e7e7e7;
    --line-2: #efefef;
    --bg-1: #fafafa; --bg-2: #f6f6f6;
    --bg-7: #f7f7f7; --bg-8: #f7f7f7; --bg-9: #f7f7f7;
    --bg-10: #fafafa;
    --bg-11: #f2f2f2;
    --main-rgba-1: rgba(20,20,20,.14);
    --main-rgba-2: rgba(20,20,20,.12);
    --ys-kirmizi: #d62027;
    --ys-kirmizi-koyu: #b0161c;
    --ys-yesil: #009f4d;
    --ys-yesil-koyu: #00803e;
    --ys-siyah: #141414;
    font-family: 'Inter', sans-serif;
    color: #4a4a4a;
}

/* Başlıklar — logodaki geniş aralıklı, dik duruş */
.tema-yasar h1, .tema-yasar h2, .tema-yasar h3,
.tema-yasar h4, .tema-yasar h5, .tema-yasar h6,
.tema-yasar .flat-title .title,
.tema-yasar .heading {
    font-family: 'Jost', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ys-siyah);
}

/* ---- AKSİYON = KIRMIZI ---------------------------------------------- */
.tema-yasar .tf-btn.btn-fill,
.tema-yasar .btn-quick-add,
.tema-yasar .btn-main-product,
.tema-yasar .btn-primary {
    background-color: var(--ys-kirmizi) !important;
    border: 1px solid var(--ys-kirmizi) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tema-yasar .tf-btn.btn-fill:hover,
.tema-yasar .btn-quick-add:hover,
.tema-yasar .btn-main-product:hover,
.tema-yasar .btn-primary:hover {
    background-color: var(--ys-kirmizi-koyu) !important;
    border-color: var(--ys-kirmizi-koyu) !important;
}
/* İkincil buton — siyah çerçeve, dolgusuz; hover'da kırmızıya döner */
.tema-yasar .tf-btn.btn-outline {
    background: transparent !important;
    border: 1px solid var(--ys-siyah) !important;
    color: var(--ys-siyah) !important;
    border-radius: 0 !important;
}
.tema-yasar .tf-btn.btn-outline:hover {
    border-color: var(--ys-kirmizi) !important;
    color: var(--ys-kirmizi) !important;
}
/* İndirim rozeti — kırmızının asıl yeri */
.tema-yasar .on-sale-item,
.tema-yasar .product-sale {
    background-color: var(--ys-kirmizi) !important;
    color: #fff !important;
    border-radius: 0 !important;
}
.tema-yasar a:hover,
.tema-yasar .menu-item.active > a { color: var(--ys-kirmizi); }

/* ---- MARKA ZEMİNİ = YEŞİL ------------------------------------------- */
/* 1) Topbar şeridi.
   DİKKAT: _TopBar.cshtml "colored" stilinde zemini INLINE style ile basıyor
   (topbar.renk ayarından) — sınıf yok. Burada sadece içindeki metinleri
   beyaza çekiyoruz, zemin ayardan gelir (topbar.renk = #009f4d). */
/* .text-muted seçicisi buradan kaldırıldı: top bar'ın sağ linkleri artık o sınıfı
   kullanmıyor, barın metin rengini miras alıyor (bkz. _TopBar.cshtml .top-bar-link). */
.tema-yasar .tf-top-bar[style*="background"] a,
.tema-yasar .tf-top-bar[style*="background"] p,
.tema-yasar .tf-top-bar[style*="background"] span,
.tema-yasar .tf-top-bar[style*="background"] i { color: #ffffff !important; }
.tema-yasar .tf-top-bar[style*="background"] .box-icon { border-color: rgba(255,255,255,.45) !important; }

/* 2) KATEGORİ ŞERİDİ — style-4 header'ın alt barı komple yeşil.
   Sayfanın en geniş renk yüzeyi burası; marka rengini "net" yapan şey bu. */
.tema-yasar .header-style-4 .header-bottom,
.tema-yasar .header-style-2 .header-bottom,
.tema-yasar .header-default .header-bottom {
    background-color: var(--ys-yesil) !important;
    border: 0 !important;
}
.tema-yasar .header-bottom .box-nav-ul > li > a,
.tema-yasar .header-bottom .item-link,
.tema-yasar .header-bottom .box-right,
.tema-yasar .header-bottom .box-right a,
.tema-yasar .header-bottom .box-right span,
.tema-yasar .header-bottom .menu-item > a {
    color: #ffffff !important;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    letter-spacing: .02em;
}
.tema-yasar .header-bottom .box-nav-ul > li > a:hover,
.tema-yasar .header-bottom .menu-item.active > a { color: #ffe08a !important; }

/* Şeridi tek satırda tut. Ölçüm (1920px, kap 1440px): kategori butonu 267 +
   menü 876 + destek telefonu 290 = 1433px — sığmıyor sayılır, base 16px punto
   ve 30px aralıkla "Ana Sayfa" / "İç Giyim" gibi öğeler iki satıra kırılıyordu.
   Kelime kırmayı kapatıp aralığı ve puntoyu daraltınca menü 780px'e iniyor.
   (Telefon bloğu ayrıca tema.header_telefon=false ile kapatıldı.) */
/* Menü kategori butonunun hemen sağından başlasın, sağa savrulmasın.
   _HeaderStyle4'te .wrapper-header justify-content:between — üç çocuk
   varken (buton | menü | telefon) doğru çalışıyor ama telefon bloğu
   kapatılınca iki çocuk kalıyor ve menü sağ kenara yapışıyordu
   (buton ile menü arası 393px boşluk). Sola hizala. */
.tema-yasar .header-bottom .wrapper-header { justify-content: flex-start !important; }
.tema-yasar .header-bottom .box-navigation { margin-left: 28px; text-align: left !important; }
.tema-yasar .header-bottom .box-nav-ul { justify-content: flex-start !important; }

.tema-yasar .header-bottom .box-nav-ul { gap: 18px !important; flex-wrap: nowrap !important; }
.tema-yasar .header-bottom .box-nav-ul > li { padding: 18px 0 !important; }
.tema-yasar .header-bottom .box-nav-ul > li > a,
.tema-yasar .header-bottom .item-link { white-space: nowrap !important; font-size: 15px; }
.tema-yasar .tf-list-categories .categories-title { white-space: nowrap; }

/* Dar masaüstü / laptop — kap daralınca önce aralık, sonra punto kısılır */
@media (max-width: 1399.98px) {
    .tema-yasar .header-bottom .box-nav-ul { gap: 13px !important; }
    .tema-yasar .header-bottom .box-nav-ul > li > a,
    .tema-yasar .header-bottom .item-link { font-size: 14px; }
    .tema-yasar .tf-list-categories .categories-title { padding: 12px 14px !important; font-size: 12px; }
}
/* Açılır menüler yeşil şeridin üstüne binince beyaz zemine dönmeli */
.tema-yasar .header-bottom .sub-menu,
.tema-yasar .header-bottom .mega-menu {
    background-color: #ffffff !important;
    border-top: 3px solid var(--ys-kirmizi) !important;
}
.tema-yasar .header-bottom .sub-menu a,
.tema-yasar .header-bottom .mega-menu a { color: var(--ys-siyah) !important; }
.tema-yasar .header-bottom .sub-menu a:hover,
.tema-yasar .header-bottom .mega-menu a:hover { color: var(--ys-kirmizi) !important; }
.tema-yasar .mega-cat-title { color: var(--ys-siyah) !important; font-family: 'Jost', sans-serif; font-weight: 600; }

/* 3) "Tüm Kategoriler" açılırı — yeşil şeridin üstündeki KIRMIZI blok.
   Referanstaki sarı butonun karşılığı; marka çiftini tek bakışta kurar. */
.tema-yasar .tf-list-categories .categories-title {
    background-color: var(--ys-kirmizi) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 14px 22px !important;
}
.tema-yasar .tf-list-categories .categories-title:hover { background-color: var(--ys-kirmizi-koyu) !important; }
.tema-yasar .tf-list-categories .categories-title svg { color: #fff !important; }
.tema-yasar .list-categories-inner {
    border: 1px solid var(--line) !important;
    border-top: 3px solid var(--ys-kirmizi) !important;
    border-radius: 0 !important;
    background: #fff !important;
}
.tema-yasar .list-categories-inner .tf-category-link { color: var(--ys-siyah) !important; }
.tema-yasar .list-categories-inner .tf-category-link:hover { color: var(--ys-kirmizi) !important; }

/* 4) Arama kutusu — açık arama çubuğunun butonu yeşil */
.tema-yasar .tf-form-search .search-box { border: 2px solid var(--ys-yesil) !important; border-radius: 0 !important; }
.tema-yasar .tf-form-search input { border: 0 !important; border-radius: 0 !important; }
.tema-yasar .tf-form-search button,
.tema-yasar .tf-form-search .tf-btn {
    background-color: var(--ys-yesil) !important;
    border-color: var(--ys-yesil) !important;
    color: #fff !important;
    border-radius: 0 !important;
}
.tema-yasar .tf-form-search button:hover { background-color: var(--ys-yesil-koyu) !important; }

/* 5) Bölüm başlıkları — altında kısa yeşil vurgu çizgisi */
.tema-yasar .flat-title .title,
.tema-yasar .flat-title h2 { position: relative; padding-bottom: 12px; }
.tema-yasar .flat-title .title::after,
.tema-yasar .flat-title h2::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0; transform: translateX(-50%);
    width: 56px; height: 3px;
    background: var(--ys-yesil);
}

/* Stok / kargo / başarı bildirimleri */
.tema-yasar .badge-stok,
.tema-yasar .stok-var,
.tema-yasar .text-success,
.tema-yasar .kargo-ucretsiz { color: var(--ys-yesil) !important; }
.tema-yasar .badge.bg-success,
.tema-yasar .alert-success {
    background-color: var(--ys-yesil) !important;
    border-color: var(--ys-yesil) !important;
    color: #fff !important;
    border-radius: 0 !important;
}
/* "Yeni" rozeti — kırmızıyla karışmasın diye yeşil */
.tema-yasar .product-new,
.tema-yasar .on-new-item {
    background-color: var(--ys-yesil) !important;
    color: #fff !important;
    border-radius: 0 !important;
}

/* ---- ÜRÜN KARTI ------------------------------------------------------ */
.tema-yasar .card-product { display: flex; flex-direction: column; height: 100%; }
.tema-yasar .card-product .card-product-wrapper { border: 1px solid var(--line); }
.tema-yasar .card-product .card-product-info { flex: 1 1 auto; padding-top: 14px; text-align: left; }
.tema-yasar .card-product .title,
.tema-yasar .card-product .title a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--ys-siyah);
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    margin-bottom: 8px;
}
.tema-yasar .card-product .title a:hover { color: var(--ys-kirmizi); }
.tema-yasar .card-product .price { font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 600; color: var(--ys-siyah); }
.tema-yasar .card-product .old-price { color: #9a9a9a; font-weight: 400; }

/* Kategori madalyonları — hover'da kırmızı halka */
/* _KategoriYuvarlak.cshtml çemberi .yuvarlak-kat-link üzerinde INLINE
   border ile çiziyor (#f0f0f0) — ezmek için !important şart. */
.tema-yasar .yuvarlak-kat-link { border-color: var(--ys-yesil) !important; }
.tema-yasar .yuvarlak-kat-link:hover { border-color: var(--ys-kirmizi) !important; transform: translateY(-3px); }
.tema-yasar .collection-circle .img-style,
.tema-yasar .collection-circle img { border: 2px solid transparent; transition: border-color .25s ease; }
.tema-yasar .collection-circle:hover .img-style,
.tema-yasar .collection-circle:hover img { border-color: var(--ys-kirmizi); }

/* ---- KÖŞELİ DURUŞ — [[feedback_kod_stili]] --------------------------- */
.tema-yasar .form-control,
.tema-yasar .form-select,
.tema-yasar .card,
.tema-yasar .modal-content,
.tema-yasar .dropdown-menu { border-radius: 0 !important; }
.tema-yasar .form-control:focus,
.tema-yasar .form-select:focus { border-color: var(--ys-kirmizi) !important; box-shadow: none !important; }

/* ---- LOGO — yatay logo base'de 136px sabit genişlikte eziliyor -------- */
.tema-yasar .logo-header { width: auto !important; max-width: 100%; }
.tema-yasar .logo-header img {
    width: auto !important;
    height: auto !important;
    max-height: 44px;
    max-width: 100%;
    object-fit: contain;
}
/* Footer logosu base'de brightness(0) invert(1) ile beyaza çevriliyor;
   kırmızı-yeşil monogram yok oluyor — filtreyi kaldırıyoruz. */
.tema-yasar .footer img[src*="/uploads/"] { filter: none !important; }

@media (max-width: 767.98px) {
    .tema-yasar .logo-header img { max-height: 34px; }
    .tema-yasar h1 { font-size: 2rem; }
    .tema-yasar h2 { font-size: 1.55rem; }
}

/* =====================================================================
   ÜRÜN KARTI — UZUN İSİM TOLERANSI (tüm temalar için taban kural)
   =====================================================================
   Paket .card-product .title'ı 2 satıra clamp'liyor ama o iki satırın
   yerini REZERVE ETMİYOR. Tek satırlık isimle iki satırlık isim yan yana
   gelince fiyat ve "Sepete Ekle" satırları farklı hizada duruyor; ızgara
   kırık görünüyor. Uzun isimli katalogda bu her satırda tekrarlıyor.

   İki satırlık yeri her zaman ayırıyoruz: isim kısa olsa da fiyatlar aynı
   çizgide kalır. lh birimi tema font boyutu değişse de birebir 2 satır
   verir; desteklemeyen tarayıcı 2.4em fallback'ine düşer (line-height 1.2).

   Ayrıca taşan tek kelimelik uzun kodlar (ör. "KOLYE-ALTIN-18AYAR-45CM")
   kartı yatayda genişletip ızgarayı kaydırıyordu — satır sonunda kırılsın.
   ==================================================================== */
.card-product .card-product-info .title {
    min-height: 2.4em;
    min-height: 2lh;
    overflow-wrap: anywhere;
}

/* ====================================================================
   KATEGORİ KARUSELİ — kart oranı ve uzun ad taşması

   1) Görsele sabit oran verilmemişti: kare görseller (800x800) 269px
      yükseklik verirken dikey bir görsel (750x938) kendi oranını
      dayatıp kartı 336px'e çıkarıyor, dizinin hizası bozuluyordu.
      object-fit: cover tanımlıydı ama yükseklik sabit olmadan
      devreye girmiyor.

   2) Mobilde uzun kategori adı ("GÖKTÜRK DRYTOUCH POLO") nowrap +
      24px yan boşlukla 259px'e ulaşıp 165px'lik kartın 109px dışına
      taşıyordu. Etiket artık kartı aşmıyor, gerekirse ikinci satıra
      iniyor.
   ==================================================================== */
.tf-sw-collection .collection-item .collection-image.img-style {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.tf-sw-collection .collection-item .collection-image.img-style img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tf-sw-collection .collection-item .collection-content {
    max-width: calc(100% - 30px);
}
.tf-sw-collection .collection-item .collection-content > a {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}
@media (max-width: 767px) {
    .tf-sw-collection .collection-item .collection-content > a {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* ====================================================================
   KOYU TEMA — sayfa başlığı bandı

   .tf-page-title arka planında ecomus'un varsayılan görseli duruyor
   (page-title-blog.png, ortalama parlaklık 233/255 — neredeyse beyaz).
   Koyu temanın krem yazısı bu bandın üstünde okunmuyordu; görsel
   zaten kiracıyla alakasız bir stok fotoğraf olduğu için kaldırılıp
   düz koyu zemine bırakıldı.
   ==================================================================== */
.tema-elegante .tf-page-title {
    background-image: none !important;
    background-color: #111111 !important;
}

/* ====================================================================
   MOBİL MENÜ SEKMELERİ — "Menü" / "Kategoriler"

   Mobil menü tek listeye indirilince tekrar bitti ama menüsünde yalnızca
   Ana Sayfa/Ürünler/Blog/İletişim olan sitelerde panel bomboş kalıyordu.
   Kategoriler artık kendi sekmesinde (alt ve alt-alt kırılımıyla).

   Renkler currentColor + gri alfa üzerinden: açık ve koyu temalı
   kiracıların hepsinde tek kuralla doğru okunur.
   ==================================================================== */
.esc-mb-tab {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(128,128,128,.25);
    margin-bottom: 8px;
}
.esc-mb-tab-btn {
    flex: 1;
    padding: 12px 8px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    color: inherit;
    opacity: .5;
    cursor: pointer;
    transition: opacity .2s, border-color .2s;
}
.esc-mb-tab-btn:hover { opacity: .8; }
.esc-mb-tab-btn.aktif {
    opacity: 1;
    border-bottom-color: currentColor;
}
.esc-mb-panel { display: none; }
.esc-mb-panel.aktif { display: block; }

/* ====================================================================
   KATEGORİ KARUSELİ — "Ürün Sayılı" (collection-item-v3) kart oranı

   Yukarıdaki oran düzeltmesi yalnızca .collection-item'ı hedefliyordu;
   _KategoriSayili .collection-item-v3 kullanıyor ve oran verilmediği için
   her kart görselin kendi oranını dayatıyordu. Dikey ürün fotoğrafı (750x938)
   ile geniş banner (1200x655) yan yana gelince kartlar farklı yükseklikte
   kalıp dizinin hizasını bozuyordu — kategoriler kaymış görünüyordu.
   ==================================================================== */
.tf-sw-collection .collection-item-v3 .collection-image.img-style {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.tf-sw-collection .collection-item-v3 .collection-image.img-style img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tf-sw-collection .collection-item-v3 .collection-content {
    text-align: center;
}
.tf-sw-collection .collection-item-v3 .collection-content > * {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ====================================================================
   URUN KARTI GORSELI — mobilde yan yana kartlarin boyu tutmuyordu
   --------------------------------------------------------------------
   Kart kutusu (.card-product-wrapper) 1/1.4 sabit oranli, ama <img>
   kendi dogal oranini dayatabiliyordu: katalogdaki gorseller karisik
   oranlarda geliyor (giyim 1200x1800 = 0.67, elektronik cogunlukla kare).
   Gorsel yuklenene kadar HTML width/height oraninin, yuklendikten sonra
   dosyanin gercek orani gecerli oldugu icin kart yuklenme sirasinda
   ziplayip yanindaki kartla ayni hizada kalmiyordu — mobilde iki sutun
   yan yana oldugu icin fark bariz goruluyor ("biri buyuk biri kucuk").

   Cozum: gorsel kutuyu HER ZAMAN tam doldurur, tasan kisim kirpilir.
   Boylece kartin boyu gorselden bagimsiz sabit kalir.
   Kendi orani olmasi gereken style-8 / style-9 varyantlari disarida.
   ==================================================================== */
.card-product:not(.style-8):not(.style-9) .card-product-wrapper > .product-img {
    display: block;
    height: 100%;
}
.card-product:not(.style-8):not(.style-9) .card-product-wrapper .img-product,
.card-product:not(.style-8):not(.style-9) .card-product-wrapper .img-hover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ====================================================================
   TEMA: OUTLET — sıcak gri / açık kahve (greige)
   SAF RENK SKINI. Tipografiye, boşluğa, köşeye dokunmaz; yalnız token
   değiştirir. Sebep: outlet vitrininde ürün görseli baskın olmalı,
   zemin onu taşımalı — kendi başına konuşmamalı.

   Kurgu: sayfa zemini bej, kartlar/açılırlar BEYAZ kalır (--white'a
   dokunulmadı; base'de --white hem zemin hem de koyu buton üstü metin
   rengi olarak kullanılıyor, çevrilirse yazılar kayboluyor).
   ==================================================================== */
.tema-outlet {
    --primary: #7a6250;            /* taba — buton ve vurgu */
    --main: #2e2a26;               /* sıcak koyu — metin, footer, koyu yüzeyler */
    --text: #5c554d;
    --text-2: #857d73;
    --text-3: #857d73;
    --text-secondary: #857d73;
    --line: #ddd6cc;
    --line-2: #e6e0d7;
    /* Base'in soğuk gri bölüm zeminleri sıcak nötre çekiliyor —
       yoksa bej gövdenin üstünde mavimsi gri bantlar kalıyor */
    --bg-1: #efebe4; --bg-2: #eae5dd;
    --bg-7: #eae5dd; --bg-8: #eae5dd; --bg-9: #eae5dd;
    --bg-10: #efebe4;
    --bg-11: #e8e2d9;              /* adet kutusu, sıralama açılırı, scrollbar... */
    --bg-load: #eae5dd;
    --bg-scrollbar-track: #eae5dd;
    --bg-scrollbar-thumb: #c9c0b3;
    --backdrop: #f4f1ec;
    --main-rgba-1: rgba(46,42,38,.14);
    --main-rgba-2: rgba(46,42,38,.12);
    background-color: #f4f1ec;     /* sayfa zemini — body{background:var(--white)} üzerine */
    color: #2e2a26;
}

/* Buton hover — taba KOYULAŞIR. Base'in opacity:.85 çözümü bej zeminde
   butonu soldurup zemine karıştırıyordu; gerçek ton veriliyor. */
.tema-outlet.buton-tema-rengi .tf-btn.btn-fill:hover,
.tema-outlet.buton-tema-rengi .tf-btn.animate-hover-btn.btn-fill::after {
    background-color: #5f4c3d;
    border-color: #5f4c3d;
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   BUTON KÖŞESİ — Ayarlar → Tema Özelleştirme → "Buton Köşesi"
   (SiteAyarlar: tema.buton_kose → body.buton-kose-*)

   buton_stili RENK eksenidir, bu YARIÇAP eksenidir; ikisi bağımsız
   çalışır ("mavi + keskin" ya da "siyah + pill" hepsi kurulabilir).
   Boş bırakılırsa tema kendi yarıçapını kullanır, hiçbir kural basılmaz.

   Yarıçap butonun kendisiyle birlikte ::after katmanına da uygulanmalı:
   ecomus'un animate-hover-btn'i hover dolgusunu ayrı bir pseudo eleman
   olarak büyütüyor; sadece butona yazılınca hover'da köşeler kare dönüyor.
   ══════════════════════════════════════════════════════════════════════ */
.buton-kose-pill .tf-btn,
.buton-kose-pill .tf-btn::after,
.buton-kose-pill .btn-main-product,
.buton-kose-pill .btn-quick-add,
.buton-kose-pill .list-product-btn .box-icon,
.buton-kose-pill .tf-sticky-btn-atc .tf-btn,
.buton-kose-pill .btn,
.buton-kose-pill button.tf-btn-loading {
    border-radius: 999px;
}

.buton-kose-yumusak .tf-btn,
.buton-kose-yumusak .tf-btn::after,
.buton-kose-yumusak .btn-main-product,
.buton-kose-yumusak .btn-quick-add,
.buton-kose-yumusak .list-product-btn .box-icon,
.buton-kose-yumusak .tf-sticky-btn-atc .tf-btn,
.buton-kose-yumusak .btn,
.buton-kose-yumusak button.tf-btn-loading {
    border-radius: 8px;
}

/* Pill'de yatay iç boşluk artmazsa yazı yuvarlak uçlara yapışık duruyor.
   btn-icon/btn-close gibi kare ikon butonları hariç tutuluyor — onlarda
   padding artışı ikonu merkezden kaydırır. */
.buton-kose-pill .tf-btn:not(.btn-icon):not(.btn-close),
.buton-kose-pill .btn-main-product,
.buton-kose-pill .btn-quick-add {
    padding-left: 28px;
    padding-right: 28px;
}

/* ══════════════════════════════════════════════════════════════════════
   LOGO STİLİ — Ayarlar → Tema Özelleştirme → "Logo Görünümü"
   (SiteAyarlar: tema.logo_stili = "genis" → body.logo-genis)

   Base'de .logo-header width:136px SABİT. Yatay (geniş/alçak) logolarda
   görsel bu kutuya sığdırılınca yükseklik okunmaz seviyeye düşüyor;
   marka küçücük kalıyor. tema-vitrin ve tema-kuyum bunu kendi
   seçicileriyle ezmişti — aynı ihtiyaç her temada çıkabildiği için
   ayara taşındı, artık tema seçiminden bağımsız açılabiliyor.

   Genişlik serbest bırakılıp yükseklikten sınırlanıyor; logo kolonunda
   zaten ~300px yer var.
   ══════════════════════════════════════════════════════════════════════ */
.logo-genis .logo-header {
    width: auto !important;
    max-width: 100%;
}
.logo-genis .logo-header img,
.logo-genis .logo-header .logo {
    width: auto !important;
    height: auto !important;
    max-height: 48px;
    max-width: 100%;
    object-fit: contain;
}
@media (max-width: 767.98px) {
    .logo-genis .logo-header img,
    .logo-genis .logo-header .logo { max-height: 34px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ÜRÜN GÖRSELİ UYUMU — Ayarlar → Tema Özelleştirme → "Ürün Görseli"
   (SiteAyarlar: tema.urun_gorsel_uyum = "tam" → body.urun-gorsel-tam)

   Base'de kart görsel kutusu DİKEY (aspect-ratio 1/1.4) ve img
   object-fit:cover. Dikey çekilmiş moda/aksesuar fotoğrafında doğru,
   ama YATAY çekilen üründe (mobilya, bebek odası takımı, beyaz eşya)
   görselin sağı solu kırpılıyor — müşteri ürünü tam göremiyor.

   "tam" = contain: oran korunur (esneme/kayma yok), görselin tamamı
   görünür, artan yer nötr zeminle dolar.

   Hover'daki scale büyütmesi contain'de görseli kutu dışına taşırıp
   kırpılmış izlenimi geri getiriyordu; bu modda kapatılıyor.
   ══════════════════════════════════════════════════════════════════════ */
.urun-gorsel-tam .card-product .card-product-wrapper {
    background-color: #f7f7f7;
}
.urun-gorsel-tam .card-product .card-product-wrapper img,
.urun-gorsel-tam .card-product .card-product-wrapper .img-hover {
    object-fit: contain !important;
    object-position: center;
}
.urun-gorsel-tam .card-product .card-product-wrapper:hover .product-img .img-product,
.urun-gorsel-tam .card-product .card-product-wrapper:hover .product-img .img-hover {
    transform: none !important;
}

/* Ürün detay galerisi de aynı kuralı izlemeli; kartta tam görünen ürün
   detayda kırpılırsa tutarsızlık daha rahatsız edici oluyor. */
.urun-gorsel-tam .tf-product-media-main .item img,
.urun-gorsel-tam .tf-product-media-main img,
.urun-gorsel-tam .thumbs-slider .tf-product-media-thumbs img {
    object-fit: contain !important;
    background-color: #f7f7f7;
}

/* ══════════════════════════════════════════════════════════════════════
   ÜRÜN KARTI ORANI — Ayarlar → Tema Özelleştirme → "Ürün Kartı Oranı"
   (SiteAyarlar: tema.urun_kart_orani → body.urun-kart-yatay / -kare)

   Base'de kart görsel kutusu aspect-ratio 1/1.4, yani DİKEY — moda
   fotoğrafçılığının varsayılanı. Ürünlerini yatay çeken mağazada
   (mobilya, beyaz eşya, mutfak) yatay fotoğraf dikey kutuya oturunca
   ya kenarları kırpılıyor (cover) ya da altta üstte geniş boşluk
   bırakıyor (contain). Kutunun kendisini yatay yapmak ikisini de çözer.

   "Ürün Görseli" ayarıyla birlikte çalışır: bu kutunun BİÇİMİNİ, o
   görselin kutuya nasıl YERLEŞECEĞİNİ belirler.

   style-8 / style-9 kart stilleri base'de aspect-ratio:unset yapıyor;
   bu kurallar aynı özgüllükte ve daha sonra geldiği için onları da ezer
   — ayar bilinçli seçildiğinde istenen davranış budur.
   ══════════════════════════════════════════════════════════════════════ */
.urun-kart-yatay .card-product .card-product-wrapper {
    aspect-ratio: 4/3;
}
.urun-kart-kare .card-product .card-product-wrapper {
    aspect-ratio: 1/1;
}
/* "Geniş" = 16/9. Yatay (4/3) yetmediği durum için: fotoğraf makinesi ve
   render programları sahne görselini 16/9 üretiyor. 16/9 fotoğrafı 4/3
   kutuya koyunca ya sağı solu %25 kırpılıyor ya da altında üstünde %25
   boşluk kalıyor — mağazacı "hem tamamı görünsün hem alanı doldursun"
   dediğinde ikisi de olmuyor. Kutu fotoğrafla aynı orana gelince ikisi
   birden çözülüyor: kırpma da yok, boşluk da. (Bebecco: tüm ürün
   fotoğrafları 1.79 oranında.) */
.urun-kart-genis .card-product .card-product-wrapper {
    aspect-ratio: 16/9;
}
/* 3:2 — fotoğraf makinesinin klasik oranı ve pratikte en sık karşılaşılan
   yatay ürün fotoğrafı. Bebecco katalogunda ölçüldü: 16 görselin 11'i 1.50.
   16/9 kutuda bu fotoğraflar %16 boşluk bırakıyor, 4/3 kutuda %11 kırpılıyor;
   3/2 kutuda ikisi de sıfır. */
.urun-kart-yatay32 .card-product .card-product-wrapper {
    aspect-ratio: 3/2;
}

/* Ürün detay galerisi de aynı oranı izlesin; kartta yatay duran ürün
   detayda dikey kutuya girince tutarsız görünüyor. */
.urun-kart-yatay .tf-product-media-main,
.urun-kart-yatay .tf-product-media-main .item {
    aspect-ratio: 4/3;
}
.urun-kart-kare .tf-product-media-main,
.urun-kart-kare .tf-product-media-main .item {
    aspect-ratio: 1/1;
}
.urun-kart-genis .tf-product-media-main,
.urun-kart-genis .tf-product-media-main .item {
    aspect-ratio: 16/9;
}
.urun-kart-yatay32 .tf-product-media-main,
.urun-kart-yatay32 .tf-product-media-main .item {
    aspect-ratio: 3/2;
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER ZEMİNİ — Ayarlar → Tema Özelleştirme → "Footer Zemini"
   (SiteAyarlar: tema.footer_zemin → body.footer-zemin-gri / -krem)

   Base'de footer'ın kendi arka planı YOK; body'nin beyazı görünüyor.
   Sayfa boyunca tek düz beyaz akınca footer'ın nerede başladığı belli
   olmuyor, alt bölüm içerikten ayrışmıyor.

   Koyu footer isteyen zaten "Footer Stili → Koyu" seçiyor; bu ayar onun
   yerine geçmiyor, o yüzden .background-black hariç tutuldu — iki ayar
   birlikte seçilirse koyu kazanır.
   ══════════════════════════════════════════════════════════════════════ */
.footer-zemin-gri #footer:not(.background-black) {
    background-color: #f4f4f4;
}
.footer-zemin-krem #footer:not(.background-black) {
    background-color: #faf7f2;
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER LOGOSU

   Ölçü her footer varyantında AYRI AYRI inline yazılıydı (36 / 40 / 44px);
   hem varyantlar arasında tutarsızdı hem de inline olduğu için hiçbir
   ayardan etkilenmiyordu — mağazacı "footer logosu küçük kalmış" dediğinde
   altı dosyayı elle düzeltmek gerekiyordu.

   Ölçü artık tek yerde ve header'daki "Logo Boyutu" ayarını izliyor.
   Varsayılan 40 → 52px: küçük bir büyütme, kolon düzenini bozmuyor.
   ══════════════════════════════════════════════════════════════════════ */
.footer-logo img {
    max-height: 52px;
    width: auto;
}
.logo-boyut-buyuk .footer-logo img {
    max-height: 68px;
}
.logo-boyut-kucuk .footer-logo img {
    max-height: 40px;
}

/* ══════════════════════════════════════════════════════════════════════
   "GÖRSEL YOK" PLACEHOLDER — site-init.js bozuk/eksik görselde
   data-gorsel-fallback="1" işaretleyip src'yi gorsel-yok.svg yapıyor.

   Placeholder'a ürün görseli kuralları (object-fit:cover + oran kırpması)
   uygulanınca ikon ve "Görsel Yok" yazısı kutunun dibine kayıyordu.
   Placeholder kırpılmamalı: contain ile sığdırılır, boşluğu kendi zemin
   rengi doldurur. Böylece kutu hangi oranda olursa olsun ortada durur.
   ══════════════════════════════════════════════════════════════════════ */
img[data-gorsel-fallback="1"] {
    object-fit: contain !important;
    object-position: center !important;
    background-color: #f3f3f3;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBİL SLIDER YÜKSEKLİĞİ — farklı boyutta görsellerde slider zıplaması

   SORUN: Tema paketi mobilde şunu veriyor (styles.css):
       @media only screen and (max-width:767px){
           .tf-slideshow .wrap-slider{ height:auto !important }
       }
   !important olduğu için slider preset'lerimizin sabit yükseklik kuralları
   mobilde EZİLİYOR ve kutu yüksekliği görselin kendi oranına düşüyor.
   Ölçüldü (375px ekran): 4:3 görsel 281px, 16:9 görsel 209px — yani aynı
   slider'ın slaytları farklı yükseklikte. Kısa slaytta altta beyaz boşluk
   kalıyor, noktalar aşağı kayıyor, geçişte sayfa zıplıyor.

   Mağazalara "aynı ölçüde görsel yükleyin" demek çalışmıyor; çözüm kutunun
   yüksekliğini görselden BAĞIMSIZ hale getirmek.

   ÇÖZÜM: mobilde sabit en-boy oranı (4:3) + görseli mutlak konumlayıp
   object-fit:cover ile doldurmak. height:auto'ya karşı savaşmıyoruz —
   onu kabul edip yüksekliği aspect-ratio'dan türetiyoruz, böylece
   !important çakışması olmuyor. Hangi ölçüde görsel yüklenirse yüklensin
   slider hep aynı yükseklikte; taşan kenar ortadan kırpılır.
   ══════════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 767px) {
    .tf-slideshow .wrap-slider {
        aspect-ratio: 4 / 3;
        position: relative;
        overflow: hidden;
    }

    /* Görsel/placeholder kutuyu doldursun: parent height:auto olduğu için
       "height:100%" çözülmez, mutlak konumlama gerekiyor. */
    .tf-slideshow .wrap-slider > img,
    .tf-slideshow .wrap-slider > .slider-placeholder,
    .tf-slideshow .wrap-slider > video {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   BAYİ / SATIŞ NOKTASI LİSTESİ — .esc-bayiler

   CMS sayfasına (Sayfalar → Bayilerimiz) yapıştırılan SADE HTML'i biçimler.
   Stil neden burada, sayfa içeriğinde değil: içerik editörü <style> bloğunu
   temizleyebiliyor ve mağaza sahibi yeni bayi eklerken stili bozuyordu.
   Sayfada yalnızca semantik işaretleme durur, görünüm temadan gelir.

   Yapı:
     .esc-bayiler
       .esc-bayiler-ara            (opsiyonel arama kutusu — site-init.js filtreler)
       .esc-bayi-grup              (marka / iş ortağı bloğu)
         .esc-bayi-grup-baslik
         .esc-bayi-liste
           .esc-bayi               (tek şube kartı)
             .esc-bayi-sehir / .esc-bayi-adres / .esc-bayi-iletisim / .esc-bayi-harita
   ══════════════════════════════════════════════════════════════════════ */
.esc-bayiler { --esc-b-cizgi: #e6e6e6; --esc-b-soluk: #6b6b6b; }
.esc-bayiler * { box-sizing: border-box; }

/* Merkez / fabrika kartı — listeden ayrışsın */
.esc-bayiler .esc-bayi-merkez {
    border: 1px solid var(--esc-b-cizgi);
    background: #fafafa;
    padding: 24px;
    margin-bottom: 40px;
}
.esc-bayiler .esc-bayi-merkez h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }

.esc-bayiler .esc-bayi-grup { margin-bottom: 36px; }
.esc-bayiler .esc-bayi-grup-baslik {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #181818;
    display: inline-block;
}

/* Kart ızgarası — köşeli, çerçeveli; tema genelindeki dille aynı */
.esc-bayiler .esc-bayi-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.esc-bayiler .esc-bayi {
    border: 1px solid var(--esc-b-cizgi);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.esc-bayiler .esc-bayi-sehir {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.esc-bayiler .esc-bayi-adres {
    font-size: 13px;
    line-height: 1.55;
    color: var(--esc-b-soluk);
    margin: 0;
    flex-grow: 1;
}
.esc-bayiler .esc-bayi-iletisim { font-size: 13px; margin: 0; }
.esc-bayiler .esc-bayi-iletisim a { text-decoration: none; }

/* "Haritada Aç" — Google Maps arama bağlantısı. API anahtarı GEREKTİRMEZ;
   mobilde Maps uygulamasını, masaüstünde haritayı açar. Her karta gömülü
   iframe koymak sayfayı ağırlaştırıp gizlilik açısından da gereksizdi. */
.esc-bayiler .esc-bayi-harita {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    border: 1px solid #181818;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: #181818;
    transition: background .18s, color .18s;
}
.esc-bayiler .esc-bayi-harita:hover { background: #181818; color: #fff; }

/* Arama kutusu */
.esc-bayiler .esc-bayiler-ara {
    width: 100%;
    max-width: 420px;
    padding: 12px 14px;
    border: 1px solid var(--esc-b-cizgi);
    font-size: 14px;
    margin-bottom: 28px;
}
.esc-bayiler .esc-bayiler-sonuc-yok {
    display: none;
    padding: 24px;
    text-align: center;
    color: var(--esc-b-soluk);
    border: 1px dashed var(--esc-b-cizgi);
}

/* Yurt dışı — adres yok, yalnızca ülke listesi */
.esc-bayiler .esc-bayi-ulkeler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.esc-bayiler .esc-bayi-ulkeler li {
    border: 1px solid var(--esc-b-cizgi);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .esc-bayiler .esc-bayi-liste { grid-template-columns: 1fr; }
    .esc-bayiler .esc-bayi-merkez { padding: 18px; }
}

/* ===================================================================
   SOSYAL — WHATSAPP
   Tema paketinde .social-whatsapp yok (styles.css facebook/twitter/
   instagram/tiktok/pinterest ile sınırlı). Hover renklerini burada
   tanımlıyoruz ki ikon diğerleriyle aynı davransın.
   =================================================================== */
.tf-social-icon .social-whatsapp:hover {
    background: #25d366;
    color: var(--white);
}
.tf-social-icon .social-line.social-whatsapp:hover {
    background: transparent;
    color: #25d366;
    border-color: #25d366;
}
.tf-social-icon.style-default li .social-whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    color: var(--white);
}

/* ====================================================================
   TEMA: MYCHI — botanik yeşil / soluk sarı
   SAF RENK SKINI. Tipografiye, boşluğa, köşeye dokunmaz; yalnız token
   değiştirir. Font tarafı Ayarlar → Yazı Fontu (tema.font_seti) ile
   geliyor; burada font kuralı YOK, yoksa ikisi !important ile çakışırdı.

   PALET LOGODAN ALINDI, siteden DEĞİL. Müşterinin yayındaki sitesi amber
   (#d97706) kullanıyor ama bu Tailwind'in varsayılan vurgusu — markanın
   kendi rengi değil. Logonun SVG'sinden okunan gerçek değerler:
     #4b8360  botanik yeşil (çizim + "MY&CHİ" yazısı)
     #f8ed8d  soluk tereyağı sarısı (arkadaki daire)
     #fefefd  kırık beyaz zemin

   Buton zemini logonun yeşilinin bir tık koyusu (#45785a): logonun kendi
   #4b8360'ı beyaz yazıyla 4.45:1 veriyor, WCAG AA eşiğinin (4.5) hemen
   altında kalıyordu. #45785a 5.14:1 — küçük punto buton yazısında da geçer.
   Sarı büyük yüzeyde kullanılmadı, yalnız ince vurgu; koyu mürekkeple
   12.3:1 verdiği için üst bar yazısı olarak güvenle duruyor.
   ==================================================================== */
.tema-mychi {
    --primary: #45785a;            /* botanik yeşil — buton ve vurgu */
    --main: #24352b;               /* koyu yeşil-mürekkep — metin, footer, koyu yüzeyler */
    --text: #4a5750;
    --text-2: #7d8a82;
    --text-3: #7d8a82;
    --text-secondary: #7d8a82;
    --line: #e0e4d8;
    --line-2: #eaeee2;
    /* Base'in soğuk gri bölüm zeminleri kırık beyaz / soluk sarıya
       çekiliyor — yoksa krem gövdenin üstünde mavimsi gri bantlar kalıyor
       (outlet skininde ölçülen aynı sorun). */
    --bg-1: #f9f7ec; --bg-2: #f6f3e2;
    --bg-7: #f6f3e2; --bg-8: #f6f3e2; --bg-9: #f6f3e2;
    --bg-10: #f9f7ec;
    --bg-11: #f1eedd;              /* adet kutusu, sıralama açılırı, scrollbar */
    --bg-load: #f6f3e2;
    --bg-scrollbar-track: #f6f3e2;
    --bg-scrollbar-thumb: #c3cdb8;
    --backdrop: #fbfaf4;
    --main-rgba-1: rgba(36,53,43,.14);
    --main-rgba-2: rgba(36,53,43,.12);
    background-color: #fbfaf4;     /* sayfa zemini — body{background:var(--white)} üzerine */
    color: #24352b;
}

/* Buton hover — yeşil KOYULAŞIR. Base'in opacity:.85 çözümü açık zeminde
   butonu soldurup zemine karıştırıyor; gerçek ton veriliyor. */
.tema-mychi.buton-tema-rengi .tf-btn.btn-fill:hover,
.tema-mychi.buton-tema-rengi .tf-btn.animate-hover-btn.btn-fill::after {
    background-color: #375f48;
    border-color: #375f48;
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   LOGO BOYUTU — Ayarlar → Tema Özelleştirme → "Logo Boyutu"
   (SiteAyarlar: tema.logo_boyut → body.logo-boyut-*)

   "Logo Görünümü" (logo_stili=genis) ile KARIŞTIRMA: o ayar YATAY/alçak
   logolar için, genişliği serbest bırakıp yüksekliği 48px'e sabitliyor ve
   yalnızca .logo-header'ı hedefliyor. Bu ayar ise ölçü eksenidir ve
   header stilinden bağımsız çalışır.

   NEDEN GEREKTİ: style-3 (ortalı logo) header'ı .logo-header değil
   .boutique-logo kullanıyor — yani logo_stili oraya HİÇ değmiyor. Orada
   logo max-height:68px'e sabit. KARE logolarda (ör. 1333x1333) bu 68x68
   demek; yanındaki yazı logosu ~300px genişlik kapladığı için marka
   küçücük kalıyor. 68'i doğrudan büyütmek style-3 kullanan diğer
   kiracıların GENİŞ logolarını şişirirdi, o yüzden ayara bağlandı.

   Varsayılan (boş) hiçbir kural basmaz — mevcut siteler etkilenmez.
   ══════════════════════════════════════════════════════════════════════ */
.logo-boyut-buyuk .logo-header,
.logo-boyut-kucuk .logo-header {
    width: auto !important;
    max-width: 100%;
}
/* max-height'ta !important ŞART. Rakip kural _HeaderStyle3.cshtml içinde
   inline <style> olarak duruyor: ".header-boutique .boutique-logo img"
   — özgüllüğü (0,2,1), bizimkiyle AYNI. Eşitlikte belge sırası karar
   veriyor ve inline blok layout-extra.css'ten SONRA basıldığı için o
   kazanıyordu; ayar seçili olmasına rağmen logo 68/40px kalıyordu. */
.logo-boyut-buyuk .logo-header img,
.logo-boyut-buyuk .logo-header .logo,
.logo-boyut-buyuk .boutique-logo img {
    width: auto !important;
    height: auto !important;
    max-height: 96px !important;
    max-width: 100%;
    object-fit: contain;
}
.logo-boyut-kucuk .logo-header img,
.logo-boyut-kucuk .logo-header .logo,
.logo-boyut-kucuk .boutique-logo img {
    width: auto !important;
    height: auto !important;
    max-height: 44px !important;
    max-width: 100%;
    object-fit: contain;
}
/* İki eleman ailesinin kırılma noktası FARKLI — tek media query yanlış olur.
   .logo-header temanın genel 767.98px'inde küçülüyor; .boutique-logo ise
   _HeaderStyle3 kendi kuralında 991.98px'te kompakta geçiyor. */
@media (max-width: 767.98px) {
    .logo-boyut-buyuk .logo-header img,
    .logo-boyut-buyuk .logo-header .logo { max-height: 56px !important; }
    .logo-boyut-kucuk .logo-header img,
    .logo-boyut-kucuk .logo-header .logo { max-height: 28px !important; }
}
@media (max-width: 991.98px) {
    .logo-boyut-buyuk .boutique-logo img { max-height: 56px !important; }
    .logo-boyut-kucuk .boutique-logo img { max-height: 28px !important; }
}