/* ══════════════════════════════════════════════════════════════
   mualto — VİTRİN TEMASI
   ══════════════════════════════════════════════════════════════
   Bu dosya `legobooks.css`ten SONRA yükleniyor ve onun üstüne
   biniyor. Devralınan 128 KB'lık tabaka silinmedi; yalnız bu
   ekranların görünümü buradan geliyor.

   ⚠ SINIF ADLARI KORUNDU: header.php'nin başındaki uyarıya göre
     .cart-count · .cart-dropdown* · .mobile-menu* · .has-dropdown ·
     .dropdown-menu · .submenu-toggle sınıflarına JavaScript
     tutunuyor. Yeniden yazımda hepsi yerinde bırakıldı, yalnız
     stilleri değişti.

   RENKLER tasarım görsellerinden okundu. Hepsi tek yerde: aşağıdaki
   değişkenlerden birini değiştirmek tüm siteyi çevirir.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* Marka */
    --mu-bordo:       #741717;   /* duyuru şeridi · başlıklar */
    --mu-bordo-koyu:  #5A1212;   /* üzerine gelince */

    /* Metin */
    --mu-metin:       #1F1F1F;
    --mu-metin-ikinci:#5A5A5A;
    --mu-metin-soluk: #8A8A8A;

    /* Yüzeyler */
    --mu-zemin:       #FFFFFF;
    --mu-zemin-yumusak:#F5F5F5;   /* yorumlar bölümü */
    --mu-gorsel-zemin:#EFEFEF;   /* ürün görselinin arkası */
    --mu-cizgi:       #E6E6E6;

    /* Vurgu */
    --mu-yildiz:      #F5B301;

    /* Aksiyon (buton/rozet) */
    --mu-aksiyon-bg:    #000000;
    --mu-aksiyon-metin: #FFFFFF;
    --mu-radius-pill:   999px;

    /* Ölçü */
    --mu-kose:        14px;      /* ürün kartı */
    --mu-kose-kucuk:  8px;
    --mu-en:          1720px;    /* içerik genişliği — tasarım geniş */
    --mu-yan:         24px;

    --mu-yazi: 'Jost', 'Poppins', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Tasarımın yazı tipi geometrik bir sans; Jost. Yüklenemezse
   Poppins, sonra Montserrat'a düşüyor (head.php'de tanımlı). */
body.mu-tema {
    font-family: var(--mu-yazi);
    color: var(--mu-metin);
    background: var(--mu-zemin);
    font-size: 15px;
}
body.mu-tema .mu-kapsayici {
    max-width: var(--mu-en);
    margin: 0 auto;
    padding: 0 var(--mu-yan);
}

/* ══════════════════════════════════════════════════════════════
   DUYURU ŞERİDİ — bordo zemin, ortalanmış tek mesaj
   Devralınan hâli beyaz zeminli, iki yana yaslı üç parçaydı.
   ══════════════════════════════════════════════════════════════ */
body.mu-tema .lb-duyuru {
    background: var(--mu-bordo);
    color: #fff;
    padding: 0;
    border: 0;
}
body.mu-tema .lb-duyuru-ic {
    display: flex; align-items: center; justify-content: center;
    max-width: var(--mu-en); margin: 0 auto;
    min-height: 42px; padding: 6px var(--mu-yan);
    gap: 8px;
}
body.mu-tema .mu-duyuru-yazi {
    font-size: 13px; font-weight: 600; letter-spacing: .2px;
    text-align: center; color: #fff;
}
body.mu-tema .mu-duyuru-yildiz { color: #fff; opacity: .9; }

/* ══════════════════════════════════════════════════════════════
   BAŞLIK — tek satır: logo · ortada menü · sağda üç ikon
   ══════════════════════════════════════════════════════════════ */
body.mu-tema .main-header {
    background: #fff;
    border-bottom: 1px solid var(--mu-cizgi);
    position: sticky; top: 0; z-index: 60;
    box-shadow: none;
}
body.mu-tema .header-inner {
    display: flex; align-items: center; gap: 24px;
    max-width: var(--mu-en); margin: 0 auto;
    padding: 0 var(--mu-yan); min-height: 82px;
}
body.mu-tema .header-logo { flex: 0 0 auto; display: flex; align-items: center; }
body.mu-tema .header-logo img { max-height: 56px; width: auto; display: block; }

/* Yazı amblemi — logo görseli yüklenene kadar kullanılan geçici amblem.
   header.php > lbLogoBas() bu class'ları basıyor. */
body.mu-tema .mu-yazi-logo {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0;
    line-height: 1.05;
}
body.mu-tema .mu-yazi-logo-ad {
    font-family: var(--mu-yazi);
    font-size: 27px; font-weight: 700; letter-spacing: -.02em;
    color: var(--mu-bordo);
}
body.mu-tema .mu-yazi-logo-slogan {
    font-size: 11px; font-weight: 500; letter-spacing: .02em;
    color: var(--mu-metin-ikinci); white-space: nowrap;
}
@media (max-width: 760px) {
    body.mu-tema .mu-yazi-logo-ad { font-size: 21px; }
    body.mu-tema .mu-yazi-logo-slogan { font-size: 10px; }
}

/* Orta menü */
body.mu-tema .mu-menu { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
body.mu-tema .mu-menu .nav-menu {
    display: flex; align-items: center; gap: 4px;
    margin: 0; padding: 0; list-style: none; flex-wrap: wrap;
    justify-content: center;
}
body.mu-tema .mu-menu .nav-item { position: relative; }
body.mu-tema .mu-menu .nav-item > a {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 10px 12px; border-radius: var(--mu-kose-kucuk);
    color: var(--mu-metin); text-decoration: none;
    font-size: 14px; font-weight: 500; white-space: nowrap;
    transition: color .15s;
}
body.mu-tema .mu-menu .nav-item > a:hover,
body.mu-tema .mu-menu .nav-item.active > a { color: var(--mu-bordo); }
/* Alt menüsü olanın yanındaki ok — tasarımda var */
body.mu-tema .mu-menu .has-dropdown > a::after {
    content: ''; width: 7px; height: 7px; flex: 0 0 auto;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s;
}
body.mu-tema .mu-menu .has-dropdown:hover > a::after { transform: rotate(225deg) translateY(-2px); }

/* Açılır alt menü — .dropdown-menu adı JS sözleşmesi, korundu */
body.mu-tema .mu-menu .dropdown-menu {
    position: absolute; top: 100%; left: 0; z-index: 70;
    min-width: 210px; margin: 0; padding: 8px;
    list-style: none; background: #fff;
    border: 1px solid var(--mu-cizgi); border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
body.mu-tema .mu-menu .nav-item:hover > .dropdown-menu,
body.mu-tema .mu-menu .nav-item:focus-within > .dropdown-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
body.mu-tema .mu-menu .dropdown-menu a {
    display: block; padding: 8px 12px; border-radius: 6px;
    color: var(--mu-metin); text-decoration: none; font-size: 13.5px;
}
body.mu-tema .mu-menu .dropdown-menu a:hover {
    background: var(--mu-zemin-yumusak); color: var(--mu-bordo);
}

/* Sağdaki üç ikon */
body.mu-tema .header-icons {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
}
body.mu-tema .mu-ikon {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: transparent; color: var(--mu-metin);
    cursor: pointer; text-decoration: none; transition: background .15s;
}
body.mu-tema .mu-ikon:hover { background: var(--mu-zemin-yumusak); color: var(--mu-bordo); }
/* Sepet sayacı — .cart-count adı JS sözleşmesi, korundu */
body.mu-tema .mu-ikon .cart-count {
    position: absolute; top: 3px; right: 2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--mu-bordo); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 1;
}

/* Arama paneli — tasarımda arama bir İKON; kutu tıklayınca açılıyor.
   Devralınan arama FORMU olduğu gibi duruyor (aynı alanlar, aynı hedef),
   yalnız görünürlüğü bu panele bağlandı. */
body.mu-tema .mu-arama-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--mu-cizgi);
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
    padding: 18px var(--mu-yan);
}
body.mu-tema .mu-arama-panel[hidden] { display: none; }
body.mu-tema .mu-arama-panel .lb-arama-form,
body.mu-tema .mu-arama-panel form {
    display: flex; align-items: stretch; gap: 8px;
    max-width: 720px; margin: 0 auto;
}
body.mu-tema .mu-arama-panel input[type="text"],
body.mu-tema .mu-arama-panel input[type="search"] {
    flex: 1 1 auto; height: 46px; padding: 0 16px;
    border: 1px solid var(--mu-cizgi); border-radius: var(--mu-kose-kucuk);
    font: inherit; font-size: 14px; color: var(--mu-metin); background: #fff;
}
body.mu-tema .mu-arama-panel input:focus {
    outline: none; border-color: var(--mu-bordo);
}
body.mu-tema .mu-arama-panel button[type="submit"] {
    flex: 0 0 auto; height: 46px; padding: 0 22px; border: 0;
    border-radius: var(--mu-kose-kucuk);
    background: var(--mu-bordo); color: #fff;
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
body.mu-tema .mu-arama-panel button[type="submit"]:hover { background: var(--mu-bordo-koyu); }

/* Devralınan başlıktan ARTIK KULLANILMAYAN parçalar.
   ⚠ Silinmediler (kural: kodu silme, ekranda görünmesin yeter);
     yalnız yeni düzende yerleri yok. */
body.mu-tema .lb-duyuru-sol,
body.mu-tema .lb-duyuru-sag,
body.mu-tema .lb-aksiyon-yazi { display: none; }

/* .header-nav.lb-kat-nav ARTIK GIZLENMIYOR: o eleman ayri bir serit
   degil, .mu-menu'nun ICINDE — basligin ortasindaki menunun kendisi.
   Gizleme kurali kalinca menu 0 yukseklikte kaliyordu. */
body.mu-tema .mu-menu .header-nav.lb-kat-nav {
    display: block; width: 100%; background: transparent;
    border: 0; padding: 0; box-shadow: none;
}
body.mu-tema .mu-menu .lb-kat-nav-ic {
    display: flex; justify-content: center; max-width: none; padding: 0;
}

@media (max-width: 1100px) {
    body.mu-tema .mu-menu { display: none; }
    body.mu-tema .header-inner { min-height: 66px; gap: 12px; }
    body.mu-tema .header-logo img { max-height: 44px; }
}
@media (max-width: 640px) {
    body.mu-tema .lb-duyuru-ic { min-height: 36px; }
    body.mu-tema .mu-duyuru-yazi { font-size: 11.5px; }
}

/* ══════════════════════════════════════════════════════════════
   DEVRALINAN !important'LARI YENMEK
   ══════════════════════════════════════════════════════════════
   legobooks.css duyuru ve başlık zeminini `!important` ile veriyor:
     .lb-duyuru       { background: var(--lb-zemin) !important }
     header.main-header { background: var(--lb-sari)  !important }
   Özgüllük artırmak yetmiyor — aynı silah gerekiyor. Yalnız BU İKİ
   bildirimde kullanılıyor, temanın geri kalanı `!important`sız.
   ⚠ Değişkeni (--lb-sari) ezmedim: o değişken başka yerlerde de
     kullanılıyor olabilir, tek ekranı düzeltirken başka ekranı bozardı.
   ══════════════════════════════════════════════════════════════ */
body.mu-tema .lb-duyuru { background: var(--mu-bordo) !important; color: #fff !important; }
body.mu-tema header.main-header { background: #fff !important; }
body.mu-tema .header-inner { height: auto !important; }

/* ══════════════════════════════════════════════════════════════
   T2 — HERO (tam genişlik kayan banner)
   ══════════════════════════════════════════════════════════════
   Tasarımdaki hâli: kenardan kenara görsel, solda metin bloğu,
   iki yanda kare oklar, altta noktalar. İçeriğin TAMAMI panelden
   (site_sliders) geliyor; burada sabit metin yok.
   ══════════════════════════════════════════════════════════════ */
body.mu-tema .mu-hero {
    position: relative;
    width: 100%;
    /* Tasarımda banner kenardan kenara; kapsayıcıya sığmıyor. */
    overflow: hidden;
    background: var(--mu-gorsel-zemin);
}
body.mu-tema .mu-hero-ray { position: relative; }

body.mu-tema .mu-hero-slayt {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .45s ease;
}
body.mu-tema .mu-hero-slayt.aktif { position: relative; opacity: 1; visibility: visible; }

body.mu-tema .mu-hero-gorsel {
    display: block; width: 100%; height: 575px;
    object-fit: cover; object-position: center;
}

/* Metin bloğu — solda, dikeyde ortalı */
body.mu-tema .mu-hero-metin {
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    padding: 0 clamp(24px, 10vw, 190px);
    max-width: 760px;
    color: #fff;
}
body.mu-tema .mu-hero-baslik {
    margin: 0 0 14px;
    font-size: clamp(30px, 4vw, 56px); font-weight: 800;
    line-height: 1.05; letter-spacing: 2px; text-transform: uppercase;
    color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
body.mu-tema .mu-hero-alt {
    margin: 0 0 26px;
    font-size: clamp(14px, 1.2vw, 18px); font-weight: 500;
    color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.25);
}
body.mu-tema .mu-hero-dugme {
    display: inline-block; padding: 15px 30px;
    background: var(--mu-bordo); color: #fff;
    font-size: 14px; font-weight: 600; letter-spacing: .6px;
    text-transform: uppercase; text-decoration: none;
    border-radius: var(--mu-radius-pill);
    transition: background .16s;
}
body.mu-tema .mu-hero-dugme:hover { background: var(--mu-bordo-koyu); color: #fff; }

/* ── Aksiyon butonları (Sepete Ekle / Satın Al) ──
   legobooks.css'te iki çakışan tanım var (.btn-primary/.add-to-cart-btn/
   .buy-now-btn LEGO turuncusu, .lb-sepete-ekle/.lb-urun-kart .lb-btn-birincil
   LEGO kırmızısı) ve ikincisi kazanıyor — hiçbiri mualto'ya çevrilmemişti.
   Tek bir override ile hepsini siyah pill'e sabitliyoruz. */
body.mu-tema .btn-primary,
body.mu-tema .add-to-cart-btn,
body.mu-tema .buy-now-btn,
body.mu-tema .lb-sepete-ekle,
body.mu-tema .lb-foto-sepet,
body.mu-tema button.add-to-cart,
body.mu-tema .lb-urun-kart .lb-btn-birincil {
    background: var(--mu-aksiyon-bg) !important;
    border-color: var(--mu-aksiyon-bg) !important;
    color: var(--mu-aksiyon-metin) !important;
    border-radius: var(--mu-radius-pill) !important;
}
body.mu-tema .btn-primary:hover,
body.mu-tema .add-to-cart-btn:hover,
body.mu-tema .buy-now-btn:hover,
body.mu-tema .lb-sepete-ekle:hover,
body.mu-tema .lb-foto-sepet:hover,
body.mu-tema button.add-to-cart:hover,
body.mu-tema .lb-urun-kart .lb-btn-birincil:hover {
    background: var(--mu-bordo) !important;
    border-color: var(--mu-bordo) !important;
}

/* Oklar — tasarımda kare, ince beyaz çerçeveli, kenarlarda */
body.mu-tema .mu-hero-ok {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    display: flex; align-items: center; justify-content: center;
    width: 62px; height: 62px;
    border: 1px solid rgba(255,255,255,.75); background: transparent;
    color: #fff; cursor: pointer; transition: background .16s, border-color .16s;
}
body.mu-tema .mu-hero-ok:hover { background: rgba(255,255,255,.18); border-color: #fff; }
body.mu-tema .mu-hero-ok-sol { left: clamp(10px, 3vw, 60px); }
body.mu-tema .mu-hero-ok-sag { right: clamp(10px, 3vw, 60px); }

/* Noktalar — altta ortada; seçili olan geniş hap */
body.mu-tema .mu-hero-noktalar {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 3; display: flex; align-items: center; gap: 8px;
}
body.mu-tema .mu-hero-nokta {
    width: 10px; height: 10px; padding: 0;
    border: 0; border-radius: 999px;
    background: rgba(255,255,255,.85); cursor: pointer;
    transition: width .2s, background .2s;
}
body.mu-tema .mu-hero-nokta.aktif { width: 30px; background: #1F1F1F; }

/* Banner yokken — kırık kutu değil, gerçek bir karşılama */
body.mu-tema .mu-hero-bos {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; min-height: 420px; padding: 48px 24px;
    background: var(--mu-zemin-yumusak); text-align: center;
}
body.mu-tema .mu-hero-bos .mu-hero-metin {
    position: static; transform: none; padding: 0; max-width: 620px; color: inherit;
}
body.mu-tema .mu-hero-bos .mu-hero-baslik { color: var(--mu-bordo); text-shadow: none; }
body.mu-tema .mu-hero-bos .mu-hero-alt { color: var(--mu-metin-ikinci); text-shadow: none; }
body.mu-tema .mu-hero-yonetici {
    margin: 0; padding: 9px 16px; border-radius: 999px;
    background: #fff; border: 1px dashed var(--mu-cizgi);
    font-size: 12.5px; color: var(--mu-metin-soluk);
}

@media (max-width: 900px) {
    body.mu-tema .mu-hero-gorsel { height: 380px; }
    body.mu-tema .mu-hero-ok { width: 44px; height: 44px; }
    body.mu-tema .mu-hero-noktalar { bottom: 14px; }
}
@media (max-width: 560px) {
    body.mu-tema .mu-hero-gorsel { height: 300px; }
    body.mu-tema .mu-hero-ok { display: none; }
    body.mu-tema .mu-hero-metin { padding: 0 20px; }
}

/* ══════════════════════════════════════════════════════════════
   T3 — ÜRÜN RAFLARI ve KART
   ══════════════════════════════════════════════════════════════
   Tasarımdaki hâli: bordo bölüm başlığı solda; altında yan yana
   kartlar — beyaz, ince kenarlıklı, 14px köşe; görsel açık gri
   zeminde; altında ad (2 satır) ve kalın fiyat.

   ⚠ KART YENİDEN YAZILMADI. Devralınan `lbUrunKarti()` markup'ı
     olduğu gibi duruyor (favori, rozet, sepete ekle dahil);
     yalnız görünümü tasarıma çevrildi. Favori ve "Sepete Ekle"
     tasarımda YOK — silmek yerine ÜZERİNE GELİNCE gösteriliyor:
     görünüm birebir, çalışan özellik kaybolmuyor.
   ══════════════════════════════════════════════════════════════ */

body.mu-tema .mu-raf { padding: 46px 0 10px; }
body.mu-tema .mu-raf-ic {
    max-width: var(--mu-en); margin: 0 auto; padding: 0 var(--mu-yan);
}
body.mu-tema .mu-raf-bas {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin: 0 0 22px;
}
body.mu-tema .mu-raf-baslik {
    margin: 0;
    font-size: clamp(17px, 1.3vw, 20px); font-weight: 700;
    color: var(--mu-bordo); letter-spacing: .2px;
}
body.mu-tema .mu-raf-tumu {
    flex: 0 0 auto; font-size: 13px; font-weight: 500;
    color: var(--mu-metin-ikinci); text-decoration: none; white-space: nowrap;
}
body.mu-tema .mu-raf-tumu:hover { color: var(--mu-bordo); }

/* Izgara — tasarımda geniş ekranda 6 kart yan yana */
body.mu-tema .mu-raf-izgara {
    display: grid; gap: 22px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1500px) { body.mu-tema .mu-raf-izgara { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 1240px) { body.mu-tema .mu-raf-izgara { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 980px)  { body.mu-tema .mu-raf-izgara { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } }
@media (max-width: 660px)  { body.mu-tema .mu-raf-izgara { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } }

/* ── ÖNE ÇIKAN ÜRÜNLER — otomatik kayan şerit ──
   Liste index.php'de iki kez basılıyor; %50 kaydırınca ikinci kopya
   birincinin başladığı yere denk geliyor, göz kesintisiz döngü görüyor. */
body.mu-tema .mu-marquee-bolum { padding: 8px 0 48px; }
body.mu-tema .mu-marquee-bolum .mu-raf-baslik { display: block; margin: 0 0 22px; }
body.mu-tema .mu-marquee { overflow: hidden; width: 100%; }
body.mu-tema .mu-marquee-track {
    display: flex; gap: 22px; width: max-content;
    animation: mu-kayan-serit 34s linear infinite;
}
body.mu-tema .mu-marquee:hover .mu-marquee-track,
body.mu-tema .mu-marquee:focus-within .mu-marquee-track { animation-play-state: paused; }
body.mu-tema .mu-marquee-track .lb-urun-kart { flex: 0 0 240px; }
@keyframes mu-kayan-serit {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 660px) {
    body.mu-tema .mu-marquee-track .lb-urun-kart { flex-basis: 170px; }
    body.mu-tema .mu-marquee-track { gap: 14px; animation-duration: 24s; }
}
@media (prefers-reduced-motion: reduce) {
    body.mu-tema .mu-marquee-track { animation: none; overflow-x: auto; }
}

/* ── KART ── */
body.mu-tema .mu-raf-izgara .lb-urun-kart {
    position: relative; display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--mu-cizgi); border-radius: var(--mu-kose);
    padding: 10px; overflow: hidden;
    box-shadow: none; transition: border-color .16s, box-shadow .16s;
}
body.mu-tema .mu-raf-izgara .lb-urun-kart:hover {
    border-color: #D4D4D4; box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* Görsel — açık gri zeminde, kare */
body.mu-tema .mu-raf-izgara .lb-urun-gorsel {
    display: block; position: relative;
    aspect-ratio: 1 / 1; overflow: hidden;
    background: var(--mu-gorsel-zemin);
    border-radius: 10px;
}
body.mu-tema .mu-raf-izgara .lb-urun-gorsel img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s ease;
}
body.mu-tema .mu-raf-izgara .lb-urun-kart:hover .lb-urun-gorsel img { transform: scale(1.04); }

/* Bilgi */
body.mu-tema .mu-raf-izgara .lb-urun-bilgi {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 6px 6px; flex: 1 1 auto;
}
body.mu-tema .mu-raf-izgara .lb-urun-ad {
    color: var(--mu-metin); text-decoration: none;
    font-size: 14px; font-weight: 400; line-height: 1.45;
    /* Tasarımda ad iki satıra kadar; uzunsa kırpılıyor. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
body.mu-tema .mu-raf-izgara .lb-urun-ad:hover { color: var(--mu-bordo); }
body.mu-tema .mu-raf-izgara .lb-urun-fiyat-satir {
    display: flex; align-items: baseline; gap: 8px; margin-top: auto;
}
body.mu-tema .mu-raf-izgara .lb-urun-fiyat {
    font-size: 17px; font-weight: 700; color: var(--mu-metin);
    font-variant-numeric: tabular-nums;
}
body.mu-tema .mu-raf-izgara .lb-urun-eski {
    font-size: 13px; color: var(--mu-metin-soluk); text-decoration: line-through;
}
body.mu-tema .mu-raf-izgara .lb-fiyat-yok { font-size: 13px; color: var(--mu-metin-soluk); }

/* Rozet — küçük ve köşede duruyor. Site geneli (raf dışındaki
   bölümler dahil) siyah/beyaz pill'e sabitlendi; legobooks.css'teki
   .r-kirmizi/.r-siyah varyantları da buraya çekiliyor. */
body.mu-tema .lb-rozet,
body.mu-tema .lb-rozet.r-kirmizi,
body.mu-tema .lb-rozet.r-siyah {
    background: var(--mu-aksiyon-bg) !important;
    color: var(--mu-aksiyon-metin) !important;
    border-radius: var(--mu-radius-pill) !important;
    font-weight: 800 !important;
}
body.mu-tema .mu-raf-izgara .lb-rozet {
    position: absolute; top: 18px; left: 18px; z-index: 2;
    padding: 3px 8px;
    font-size: 10.5px; letter-spacing: .2px;
}

/* ── Tasarımda OLMAYAN ama BİZDE OLAN: favori + sepete ekle ──
   Silinmediler; dinlenme hâlinde gizli, karta gelince beliriyorlar.
   Klavyeyle odaklanınca da görünürler (erişilebilirlik). */
body.mu-tema .mu-raf-izgara .lb-favori {
    position: absolute; top: 18px; right: 18px; z-index: 2;
    width: 32px; height: 32px; display: flex; align-items: center;
    justify-content: center; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.92); color: var(--mu-metin);
    cursor: pointer; opacity: 0; transform: translateY(-4px);
    transition: opacity .16s, transform .16s, color .16s;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
body.mu-tema .mu-raf-izgara .lb-urun-kart:hover .lb-favori,
body.mu-tema .mu-raf-izgara .lb-favori:focus-visible,
body.mu-tema .mu-raf-izgara .lb-favori.aktif { opacity: 1; transform: none; }
body.mu-tema .mu-raf-izgara .lb-favori.aktif { color: var(--mu-bordo); }

body.mu-tema .mu-raf-izgara .lb-sepete-ekle {
    width: 100%; margin-top: 10px; padding: 10px 12px;
    border: 1px solid var(--mu-bordo); border-radius: var(--mu-kose-kucuk);
    background: #fff; color: var(--mu-bordo);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0;
    border-width: 0; opacity: 0; overflow: hidden;
    transition: max-height .18s, opacity .18s, margin-top .18s,
                padding .18s, border-width .18s;
}
body.mu-tema .mu-raf-izgara .lb-urun-kart:hover .lb-sepete-ekle,
body.mu-tema .mu-raf-izgara .lb-sepete-ekle:focus-visible {
    max-height: 44px; opacity: 1; margin-top: 10px;
    padding: 10px 12px; border-width: 1px;
}
body.mu-tema .mu-raf-izgara .lb-sepete-ekle:hover {
    background: var(--mu-bordo); color: #fff;
}

/* Dokunmatik cihazda "üzerine gelme" yok — düğmeler hep görünsün. */
@media (hover: none) {
    body.mu-tema .mu-raf-izgara .lb-favori { opacity: 1; transform: none; }
    body.mu-tema .mu-raf-izgara .lb-sepete-ekle {
        max-height: 44px; opacity: 1; margin-top: 10px;
        padding: 10px 12px; border-width: 1px;
    }
}

/* ══════════════════════════════════════════════════════════════
   T4 — GÖRSEL MOZAİK
   ══════════════════════════════════════════════════════════════
   Tasarımdaki hâli: solda geniş bir blok + altında iki küçük,
   sağda tam boy bir blok. Her blokta ortada beyaz hap düğme.
   Bloklar `mu_mozaik` tablosundan; boyutu yönetici seçiyor.
   ══════════════════════════════════════════════════════════════ */
body.mu-tema .mu-mozaik { padding: 34px 0; }
body.mu-tema .mu-mozaik-ic {
    max-width: var(--mu-en); margin: 0 auto; padding: 0 var(--mu-yan);
}
body.mu-tema .mu-mozaik-izgara {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Satır yüksekliği sabit: bloklar aynı hizada dursun.
       `uzun` blok iki satırı birden kaplayınca sol taraftaki
       geniş+iki kare ile tam aynı yüksekliğe oturuyor. */
    grid-auto-rows: 300px;
    gap: 18px;
}

body.mu-tema .mu-blok {
    position: relative; display: block; overflow: hidden;
    border-radius: 10px; background: var(--mu-gorsel-zemin);
    text-decoration: none;
}
body.mu-tema .mu-blok img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s ease;
}
body.mu-tema .mu-blok:hover img { transform: scale(1.04); }

/* Boyutlar */
body.mu-tema .mu-blok-genis { grid-column: span 2; grid-row: span 1; }
body.mu-tema .mu-blok-kare  { grid-column: span 1; grid-row: span 1; }
body.mu-tema .mu-blok-uzun  { grid-column: span 2; grid-row: span 2; }

/* Ortadaki beyaz hap düğme */
body.mu-tema .mu-blok-etiket {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    padding: 13px 30px; border-radius: 999px;
    background: #fff; color: var(--mu-metin);
    font-size: 14px; font-weight: 500; white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
    transition: background .16s, color .16s;
    max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis;
}
body.mu-tema .mu-blok:hover .mu-blok-etiket {
    background: var(--mu-bordo); color: #fff;
}

@media (max-width: 1100px) {
    body.mu-tema .mu-mozaik-izgara { grid-auto-rows: 240px; gap: 14px; }
}
@media (max-width: 760px) {
    /* Dar ekranda mozaik bozulur; bloklar alt alta tam genişlikte. */
    body.mu-tema .mu-mozaik-izgara {
        grid-template-columns: 1fr; grid-auto-rows: 220px; gap: 12px;
    }
    body.mu-tema .mu-blok-genis,
    body.mu-tema .mu-blok-kare,
    body.mu-tema .mu-blok-uzun { grid-column: span 1; grid-row: span 1; }
}

/* ══════════════════════════════════════════════════════════════
   T5 — GÜVEN ROZETLERİ ve YORUMLAR
   ══════════════════════════════════════════════════════════════
   Tasarımdaki hâli: üç ikonlu ince şerit (beyaz zemin, ortalanmış),
   altında gri zeminli yorum karuseli — yıldızlar, metin, isim ve
   iki yanda oklar. İkisi de panelden yönetiliyor.
   ══════════════════════════════════════════════════════════════ */

/* ── Güven şeridi ── */
body.mu-tema .mu-guven { padding: 46px 0 40px; background: #fff; }
body.mu-tema .mu-guven-ic {
    max-width: var(--mu-en); margin: 0 auto; padding: 0 var(--mu-yan);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}
body.mu-tema .mu-guven-oge {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; text-align: center;
}
body.mu-tema .mu-guven-ikon { color: var(--mu-metin); line-height: 0; }
body.mu-tema .mu-guven-yazi {
    font-size: 14px; font-weight: 500; color: var(--mu-metin);
}
/* İki ya da tek rozet varsa şerit yine dengeli dursun. */
body.mu-tema .mu-guven-ic[data-adet="1"] { grid-template-columns: minmax(0, 1fr); }
body.mu-tema .mu-guven-ic[data-adet="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.mu-tema .mu-guven-ic[data-adet="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── Yorumlar ── */
body.mu-tema .mu-yorum {
    position: relative; padding: 54px 0 58px;
    background: var(--mu-zemin-yumusak);
}
body.mu-tema .mu-yorum-ic {
    max-width: var(--mu-en); margin: 0 auto;
    padding: 0 clamp(56px, 6vw, 96px);
}
body.mu-tema .mu-yorum-ray {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}
body.mu-tema .mu-yorum-kart {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; text-align: center;
}
/* Sayfada olmayan yorumlar akıştan da çıksın. */
body.mu-tema .mu-yorum-kart[hidden] { display: none; }

body.mu-tema .mu-yorum-yildiz {
    display: inline-flex; gap: 3px; color: var(--mu-yildiz); line-height: 0;
}
body.mu-tema .mu-yorum-metin {
    margin: 0; max-width: 560px;
    font-size: 14px; line-height: 1.75; color: var(--mu-metin);
}
body.mu-tema .mu-yorum-ad {
    font-size: 13px; font-weight: 700; font-style: italic;
    letter-spacing: .4px; text-transform: uppercase;
    color: var(--mu-metin);
}

body.mu-tema .mu-yorum-ok {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--mu-cizgi); border-radius: 4px;
    background: #fff; color: var(--mu-metin);
    cursor: pointer; transition: background .15s, border-color .15s;
}
body.mu-tema .mu-yorum-ok:hover { background: var(--mu-bordo); border-color: var(--mu-bordo); color: #fff; }
body.mu-tema .mu-yorum-ok-sol { left: clamp(8px, 1.6vw, 26px); }
body.mu-tema .mu-yorum-ok-sag { right: clamp(8px, 1.6vw, 26px); }

@media (max-width: 900px) {
    body.mu-tema .mu-guven-ic,
    body.mu-tema .mu-guven-ic[data-adet="4"] { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
    body.mu-tema .mu-yorum-ray { grid-template-columns: minmax(0, 1fr); }
    body.mu-tema .mu-yorum-ic { padding: 0 clamp(48px, 12vw, 72px); }
}
@media (max-width: 560px) {
    body.mu-tema .mu-guven-ic,
    body.mu-tema .mu-guven-ic[data-adet="4"] { grid-template-columns: minmax(0, 1fr); }
    body.mu-tema .mu-yorum-ok { width: 36px; height: 36px; }
}

/* ══════════════════════════════════════════════════════════════
   T6 — AYAK (footer)
   ══════════════════════════════════════════════════════════════
   Tasarımdaki hâli: bağlantı sütunları + sağda bülten kutusu,
   altta sosyal ikonlar, en altta BORDO telif şeridi.

   ⚠ Devralınan ayak yeniden yazılmadı; sütunlar ve sosyal blok
     olduğu yerde duruyor. Marka bloğu (logo + sosyal) CSS `order`
     ile ALT SATIRA alındı — tasarımda sosyal ikonlar altta.
   ══════════════════════════════════════════════════════════════ */

/* legobooks.css'te footer.footer { background: var(--lb-sari) !important; }
   var — !important olmadan ezilmiyor. */
body.mu-tema .footer { background: #fff !important; color: var(--mu-metin) !important; border-top: 0; }
body.mu-tema .footer-main { padding: 54px 0 34px; }

body.mu-tema .lb-footer-izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 1.25fr);
    gap: 34px 40px;
    max-width: var(--mu-en); margin: 0 auto; padding: 0 var(--mu-yan);
    align-items: start;
}

/* Marka + sosyal: tasarımda sütunların ALTINDA, tam genişlikte. */
body.mu-tema .lb-footer-marka {
    order: 9; grid-column: 1 / -1;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding-top: 26px; margin-top: 8px;
    border-top: 1px solid var(--mu-cizgi);
}
body.mu-tema .lb-footer-marka .lb-footer-blurb { display: none; }
body.mu-tema .lb-footer-logo img { max-height: 44px; width: auto; }
body.mu-tema .lb-footer-sosyal { display: flex; align-items: center; gap: 14px; }
body.mu-tema .lb-footer-sosyal a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    color: var(--mu-metin); text-decoration: none; transition: all .15s;
}
body.mu-tema .lb-footer-sosyal a:hover { background: var(--mu-bordo); color: #fff; }

/* Sütunlar */
body.mu-tema .lb-footer-sutun { display: flex; flex-direction: column; gap: 14px; }
body.mu-tema .lb-footer-sutun > h3,
body.mu-tema .lb-footer-sutun > h4,
body.mu-tema .lb-footer-sutun > .lb-footer-baslik,
body.mu-tema .lb-footer-sutun > strong {
    margin: 0 0 2px; font-size: 13px; font-weight: 700;
    color: var(--mu-metin); letter-spacing: .2px;
}
body.mu-tema .lb-footer-sutun ul { list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 13px; }
body.mu-tema .lb-footer-sutun a {
    color: var(--mu-metin); text-decoration: none; font-size: 13px;
}
body.mu-tema .lb-footer-sutun a:hover { color: var(--mu-bordo); }

/* ── Bülten kutusu ── */
body.mu-tema .mu-bulten { display: flex; flex-direction: column; gap: 12px; }
body.mu-tema .mu-bulten-form { display: flex; align-items: stretch; gap: 10px; }
body.mu-tema .mu-bulten-form input[type="email"] {
    flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 16px;
    border: 1px solid var(--mu-cizgi); border-radius: 4px;
    font: inherit; font-size: 13.5px; color: var(--mu-metin); background: #fff;
}
body.mu-tema .mu-bulten-form input[type="email"]:focus {
    outline: none; border-color: var(--mu-bordo);
}
body.mu-tema .mu-bulten-form button {
    flex: 0 0 auto; height: 46px; padding: 0 26px; border: 0; border-radius: 4px;
    background: var(--mu-bordo); color: #fff;
    font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background .15s;
}
body.mu-tema .mu-bulten-form button:hover { background: var(--mu-bordo-koyu); }
body.mu-tema .mu-bulten-form button:disabled { opacity: .6; cursor: not-allowed; }
body.mu-tema .mu-bulten-sonuc { font-size: 12.5px; min-height: 17px; }
body.mu-tema .mu-bulten-sonuc.iyi  { color: #16A34A; }
body.mu-tema .mu-bulten-sonuc.kotu { color: #DC2626; }

/* ── Alt bordo şerit ──
   legobooks.css'te footer.footer .footer-bottom { background: var(--lb-mor)
   !important; } var — !important olmadan ezilmiyor. */
body.mu-tema .footer-bottom {
    background: var(--mu-bordo) !important; color: #fff !important;
    padding: 16px var(--mu-yan); text-align: center; font-size: 12.5px;
}
body.mu-tema .footer-bottom a { color: #fff; opacity: .9; text-decoration: none; }
body.mu-tema .footer-bottom a:hover { opacity: 1; text-decoration: underline; }
body.mu-tema .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

@media (max-width: 1100px) {
    body.mu-tema .lb-footer-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    body.mu-tema .lb-footer-izgara { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    body.mu-tema .mu-bulten-form { flex-direction: column; }
    body.mu-tema .mu-bulten-form button { width: 100%; }
    body.mu-tema .footer-main { padding: 38px 0 26px; }
}

/* ══════════════════════════════════════════════════════════════
   YENİ ÜYE HOŞGELDİN POPUP'I — %10 indirim duyurusu.
   Markup + tetikleyici JS includes/footer.php içinde (site geneli,
   sessionStorage ile oturum başına bir kez gösteriliyor).
   ══════════════════════════════════════════════════════════════ */
body.mu-tema .mu-hosgeldin-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
body.mu-tema .mu-hosgeldin-kutu {
    position: relative;
    background: var(--mu-zemin); border-radius: 18px;
    max-width: 380px; width: 100%;
    padding: 42px 32px 32px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    font-family: var(--mu-yazi);
}
body.mu-tema .mu-hosgeldin-kapat {
    position: absolute; top: 10px; right: 12px;
    border: none; background: transparent; font-size: 26px;
    line-height: 1; cursor: pointer; color: var(--mu-metin-soluk);
    padding: 6px;
}
body.mu-tema .mu-hosgeldin-kapat:hover { color: var(--mu-metin); }
body.mu-tema .mu-hosgeldin-yuzde {
    display: block; font-size: 46px; font-weight: 800;
    color: var(--mu-bordo); line-height: 1;
}
body.mu-tema .mu-hosgeldin-baslik {
    margin: 8px 0 10px; font-size: 20px; font-weight: 700; color: var(--mu-metin);
}
body.mu-tema .mu-hosgeldin-metin {
    margin: 0 0 18px; font-size: 14px; color: var(--mu-metin-ikinci); line-height: 1.5;
}
body.mu-tema .mu-hosgeldin-kod {
    display: inline-block; padding: 10px 22px; margin-bottom: 22px;
    border: 2px dashed var(--mu-bordo); border-radius: var(--mu-kose-kucuk);
    font-weight: 700; letter-spacing: 1.5px; color: var(--mu-bordo);
}
body.mu-tema .mu-hosgeldin-buton {
    display: inline-block; padding: 13px 30px;
    background: var(--mu-aksiyon-bg); color: #fff;
    border-radius: var(--mu-radius-pill); text-decoration: none;
    font-weight: 600; font-size: 14px; transition: background .15s;
}
body.mu-tema .mu-hosgeldin-buton:hover { background: var(--mu-bordo); }
@media (max-width: 480px) {
    body.mu-tema .mu-hosgeldin-kutu { padding: 36px 22px 26px; }
    body.mu-tema .mu-hosgeldin-yuzde { font-size: 38px; }
}

/* ── Fırsatlar sayfası — boş durum + sayfalama ── */
body.mu-tema .mu-bos-mesaj {
    padding: 40px 0; color: var(--mu-metin-ikinci); font-size: 15px;
}
body.mu-tema .mu-sayfalama {
    display: flex; justify-content: center; align-items: center;
    gap: 8px; padding: 8px 0 56px;
}
body.mu-tema .mu-sayfa-no,
body.mu-tema .mu-sayfa-ok {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    text-decoration: none; font-weight: 600; font-size: 14px;
    color: var(--mu-metin); background: var(--mu-zemin-yumusak);
    transition: all .15s;
}
body.mu-tema .mu-sayfa-no:hover,
body.mu-tema .mu-sayfa-ok:hover { background: var(--mu-bordo); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   ÜRÜN DETAY SAYFASI (.lb-ud) — legobooks.css'in KENDİ ürün detay
   tasarımı bu isim alanında (galeri, fiyat, varyant/"Beden" seçici,
   sepete ekle, güven rozetleri, sekmeler). Sayfanın kendi <style>
   bloğundaki .variant-btn/.btn-add-cart gibi düz sınıflar buradaki
   ".lb-ud X" kurallarına özgüllükte kaybediyor — asıl geçerli olan
   katman burası. "body.mu-tema .lb-ud ..." önekiyle kazanıyoruz.
   ══════════════════════════════════════════════════════════════ */
body.mu-tema .lb-ud-yol .breadcrumb-item a:hover { color: var(--mu-bordo); }
body.mu-tema .lb-ud-kucuk.active { border-color: var(--mu-bordo); }

/* "Beden" seçici — mertbaby'deki pill kart örneğine göre.
   appearance:none olmadan bazı tarayıcılarda <button> kendi native
   arkaplanını CSS background'ın üzerine çiziyor, seçili renk hiç
   görünmüyordu. */
body.mu-tema .lb-ud-varyant .variant-btn {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
body.mu-tema .lb-ud-varyant .variant-btn:hover { border-color: var(--mu-bordo); color: var(--mu-bordo); }
body.mu-tema .lb-ud-varyant .variant-btn.selected {
    border-color: var(--mu-bordo) !important; background: var(--mu-bordo) !important; color: #fff !important;
}

body.mu-tema .lb-ud .lb-ud-fiyat .discount-badge {
    background: var(--mu-aksiyon-bg); color: #fff;
}
body.mu-tema .lb-ud .btn-add-cart { background: var(--mu-aksiyon-bg); }
body.mu-tema .lb-ud .btn-add-cart:hover { background: var(--mu-bordo); }
body.mu-tema .lb-ud .btn-wishlist:hover { border-color: var(--mu-bordo); color: var(--mu-bordo); }
body.mu-tema .lb-ud .btn-wishlist.active { border-color: var(--mu-bordo); background: var(--mu-bordo); color: #fff; }

body.mu-tema .lb-ud-guven i { color: var(--mu-bordo); }
body.mu-tema .lb-ud-sekme.aktif { border-bottom-color: var(--mu-bordo); }
body.mu-tema .lb-ud-metin a { color: var(--mu-bordo); }
body.mu-tema .lb-ud-marka a:hover { color: var(--mu-bordo) !important; border-bottom-color: var(--mu-bordo); }

body.mu-tema .lb-ud-ozel-alan .zor { color: var(--mu-bordo); }
body.mu-tema .lb-ud-ozel-alan textarea:focus { border-color: var(--mu-bordo); }
body.mu-tema .lb-ud-ozel-alan textarea.bos { border-color: var(--mu-bordo); }
body.mu-tema .mu-sayfa-no.aktif { background: var(--mu-bordo); color: #fff; }

/* ── Arama kutusu butonu (header) — legobooks.css'te
   "header.main-header .header-search .lb-arama-btn" + !important ile
   LEGO kırmızısına sabitlenmiş, site geneli her sayfada görünüyordu.
   Aynı özgüllükte body.mu-tema önekiyle kazanıyoruz. */
body.mu-tema header.main-header .header-search .lb-arama-btn,
body.mu-tema .lb-arama-btn {
    background: var(--mu-aksiyon-bg) !important;
    color: #fff !important;
}
body.mu-tema header.main-header .header-search .lb-arama-btn:hover,
body.mu-tema .lb-arama-btn:hover {
    background: var(--mu-bordo) !important;
}
body.mu-tema .lb-mob-arama button {
    background: var(--mu-aksiyon-bg) !important;
    color: #fff !important;
}