/* ==========================================================================



   Mutfak Uzmani Pro 2.0 — mutfakyeri.com layout, logonuzun lacivert/mavi paleti



   Palet: --mu-navy #1b4f8a  --mu-navy-dark #12336b  --mu-sky #5aa9e6  --mu-sky-light #a8d8f0



   Kirmizi #c1171a → lacivert; satis fiyati #cb000d → lacivert.



   Tum olculer mutfakyeri analizi + ekran goruntulerinden birebir alinmistir.



   ========================================================================== */



:root{



  --mu-navy:#1b4f8a;



  --mu-navy-dark:#12336b;



  --mu-navy-600:#1a4480;



  --mu-sky:#5aa9e6;



  --mu-sky-light:#a8d8f0;



  --mu-sky-pale:#e6f0fa;



  --mu-gray:#6e7378;



  --mu-gray-2:#898989;



  --mu-gray-3:#939393;



  --mu-border:#e9e9e9;



  --mu-border-2:#e6eaf0;



  --mu-bg:#f5f7fa;



  --mu-white:#ffffff;



  --mu-text:#222326;



  --mu-radius:10px;



  --mu-radius-pill:38.5px;



  --mu-shadow:0 3px 14.4px 0.6px rgba(27,79,138,.10);



  --mu-shadow-hover:0 10px 28px rgba(18,51,107,.14);



  --mu-sale:#1b4f8a; /* logo laciverti — mutfakyeri kirmizisi yerine */



  --mu-sale-2:#cb000d; /* yedek: istenirse kirmizi fiyata geri donmek icin, su an kullanilmiyor */



}



/* ---- Reset / Base ---- */



*{box-sizing:border-box}



html{scroll-behavior:smooth}



body.mu-theme{



  margin:0;



  font-family:'Montserrat','Inter','Segoe UI',-apple-system,system-ui,sans-serif;



  color:var(--mu-text);



  background:var(--mu-bg);



  line-height:1.5;



  -webkit-font-smoothing:antialiased;



}



body.mu-theme a{color:var(--mu-navy);text-decoration:none}



body.mu-theme a:hover{color:var(--mu-navy-dark)}



img{max-width:100%;height:auto;display:block}



.container{max-width:1920px;margin:0 auto;padding:0 22px}



@media(max-width:1440px){.container{padding:0 16px}}



@media(max-width:768px){.container{padding:0 12px}}



.ticiContainer{max-width:1920px;margin:0 auto;padding:0 22px}



@media(max-width:768px){.ticiContainer{padding:0 12px}}







/* ==========================================================================



   TOP ANNOUNCEMENT BAR — telefon | whatsapp | calisma saatleri | instagram



   ========================================================================== */



.mu-top-bar {



  background: #f8fafc;



  border-bottom: 1px solid #e2e8f0;



  padding: 6px 0;



  font-size: 13px;



  color: #475569;



  width: 100%;



}



.mu-top-bar-inner {



  max-width: 1920px;



  margin: 0 auto;



  padding: 0 22px;



  display: flex;



  justify-content: space-between;



  align-items: center;



  flex-wrap: wrap;



  gap: 12px;



}



@media(max-width:768px){.mu-top-bar-inner{padding:0 12px}}



.mu-top-bar-contact {



  display: flex;



  align-items: center;



  gap: 20px;



  flex-wrap: wrap;



}



.mu-top-bar-contact a {



  color: #1e293b;



  display: inline-flex;



  align-items: center;



  gap: 6px;



  font-weight: 600;



  font-size: 13px;



}



.mu-top-bar-contact a:hover { color: var(--mu-navy); }



.mu-top-bar-social a {



  color: #1e293b;



  font-weight: 600;



  font-size: 13px;



}



.mu-top-bar-social a:hover { color: var(--mu-navy); }



@media (max-width: 992px) {



  .mu-top-bar { display: none; }



}







/* ==========================================================================



   HEADER — logo | arama | sepet + uye girisi (SABIT STICKY)



   ========================================================================== */



.mu-header{



  background:#fff;



  border-bottom:2px solid var(--mu-border-2);



  position:sticky;top:0;z-index:90;



  box-shadow:0 2px 10px rgba(18,51,107,.06);



}



.mu-header-top{



  display:flex;align-items:center;gap:20px;



  padding:12px 0;



  flex-wrap:wrap;



}



.mu-logo{flex:0 0 auto;display:flex;align-items:center;gap:10px}



.mu-logo img{height:56px;width:auto;object-fit:contain}



@media(max-width:768px){.mu-logo img{height:44px}}



.mu-logo-text strong{font-size:22px;color:var(--mu-navy);letter-spacing:-.02em;line-height:1}



.mu-logo-text small{display:block;font-size:11px;color:var(--mu-gray);font-weight:500;letter-spacing:.04em}







/* Arama */



.mu-search{



  flex:1 1 520px;max-width:720px;margin:0 16px;



  display:flex;align-items:center;



}



.mu-search form{display:flex;flex:1;gap:0}



.mu-search input[type="search"]{



  flex:1;border:2px solid var(--mu-navy);



  border-right:none;border-radius:8px 0 0 8px;



  padding:12px 16px;font-size:15px;



  background:#fff;outline:none;



}



.mu-search input[type="search"]::placeholder{color:#9aa3ad}



.mu-search button{



  flex:0 0 64px;



  background:var(--mu-navy);color:#fff;border:none;



  border-radius:0 8px 8px 0;cursor:pointer;



  font-size:18px;display:flex;align-items:center;justify-content:center;



  transition:background .2s;



}



.mu-search button:hover{background:var(--mu-navy-dark)}



@media(max-width:768px){.mu-search{order:10;flex:1 1 100%;max-width:none;margin:10px 0 0}}







/* Sag blok: sepet + uye */



.mu-header-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap}



.mu-cart-btn{



  display:inline-flex;align-items:center;gap:8px;



  background:var(--mu-navy);color:#fff !important;



  padding:0 0 0 14px;border-radius:6px;overflow:hidden;



  font-weight:600;font-size:14px;line-height:44px;height:44px;



  transition:background .2s;



}



.mu-cart-btn:hover{background:var(--mu-navy-dark);color:#fff}



.mu-cart-btn i{font-size:18px}



.mu-cart-count{



  background:#fff;color:var(--mu-navy);



  min-width:40px;text-align:center;font-weight:800;



  border-left:1px solid #e5e5e5;border-radius:0 6px 6px 0;



  margin-left:6px;



}



.mu-member{



  display:flex;align-items:center;gap:8px;



  color:var(--mu-text);font-size:13px;line-height:1.2;



}



.mu-member i{font-size:28px;color:#c4cbd3}



.mu-member a{color:var(--mu-text);font-weight:600}



.mu-member a:hover{color:var(--mu-navy)}



.mu-member small{display:block;color:var(--mu-gray);font-weight:400}



@media(max-width:992px){.mu-member{display:none}}







/* ==========================================================================



   KATEGORI IKON SERIDI — 2 SIRA GRID (Tek Ekranda 24 Kategori)



   ========================================================================== */



.mu-catbar{



  background:#fff;



  border-top:1px solid #f0f2f5;



  border-bottom:2px solid var(--mu-border-2);



  padding:10px 0 8px;



}



.mu-catbar-inner{



  display:grid;



  grid-template-columns:repeat(12, minmax(0, 1fr));



  gap:8px 4px;



  align-items:start;



}



.mu-cat{



  text-align:center;



  padding:4px 2px;



  border-radius:8px;



  transition:all .2s ease;



}



.mu-cat:hover{



  background:var(--mu-sky-pale);



  transform:translateY(-2px);



}



.mu-cat a{



  display:flex;



  flex-direction:column;



  align-items:center;



  gap:5px;



  color:var(--mu-text);



  text-decoration:none;



  width:100%;



}



.mu-cat-icon{



  width:48px;



  height:48px;



  display:flex;



  align-items:center;



  justify-content:center;



  background:var(--mu-sky-pale);



  border-radius:10px;



  border:1px solid rgba(27,79,138,.08);



  transition:all .2s ease;



  flex-shrink:0;



}



.mu-cat:hover .mu-cat-icon{



  background:#fff;



  border-color:var(--mu-navy);



  box-shadow:0 4px 12px rgba(27,79,138,.15);



}



.mu-cat-icon img{



  width:34px;



  height:34px;



  object-fit:contain;



  transition:transform .2s ease;



}



.mu-cat:hover .mu-cat-icon img{



  transform:scale(1.08);



}



.mu-cat-title{



  font-size:11px;



  font-weight:600;



  line-height:1.25;



  color:var(--mu-navy-dark);



  text-align:center;



  display:-webkit-box;



  -webkit-line-clamp:2;



  -webkit-box-orient:vertical;



  overflow:hidden;



  height:28px;



  word-break:break-word;



  hyphens:auto;



}



.mu-cat:hover .mu-cat-title{



  color:var(--mu-navy);



  font-weight:700;



}



.mu-cat.outlet .mu-cat-title{



  color:#c1171a;



  font-weight:800;



}



.mu-cat.markalar .mu-cat-title{



  color:var(--mu-navy);



  font-weight:800;



}







@media(max-width:1200px){



  .mu-catbar-inner{



    grid-template-columns:repeat(8, minmax(0, 1fr));



    gap:10px 6px;



  }



}



@media(max-width:860px){



  .mu-catbar-inner{



    grid-template-columns:repeat(6, minmax(0, 1fr));



    gap:8px 4px;



  }



  .mu-cat-icon{



    width:44px;



    height:44px;



  }



  .mu-cat-icon img{



    width:30px;



    height:30px;



  }



  .mu-cat-title{



    font-size:10px;



  }



}



@media(max-width:580px){



  .mu-catbar-inner{



    grid-template-columns:repeat(4, minmax(0, 1fr));



    gap:8px 4px;



  }



}







/* ==========================================================================



   HERO — slider + yan bannerlar (mutfakyeri anasayfaSliderBlock)



   ========================================================================== */



.mu-hero{padding:18px 0 0}



.mu-hero-grid{



  display:grid;



  grid-template-columns:57.9% 1fr;



  gap:22px;align-items:stretch;



}



@media(max-width:992px){.mu-hero-grid{grid-template-columns:1fr}}



.mu-hero-slider{



  position:relative;overflow:hidden;border-radius:var(--mu-radius);



  background:#e9eef5;min-height:340px;



}



.mu-hero-slider .slide{display:none;position:relative}



.mu-hero-slider .slide.is-active{display:block}



.mu-hero-slider img{width:100%;height:100%;object-fit:cover;border-radius:var(--mu-radius)}



.mu-hero-nav{



  position:absolute;top:50%;transform:translateY(-50%);



  width:44px;height:44px;border-radius:50%;



  background:rgba(255,255,255,.92);border:none;cursor:pointer;



  display:flex;align-items:center;justify-content:center;



  box-shadow:0 2px 10px rgba(0,0,0,.12);font-size:18px;color:#222;



}



.mu-hero-nav.prev{left:14px}



.mu-hero-nav.next{right:14px}



.mu-hero-dots{



  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);



  display:flex;gap:8px;



}



.mu-hero-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.6);cursor:pointer;padding:0}



.mu-hero-dots button.is-active{background:var(--mu-navy)}







.mu-hero-side{



  display:grid;



  grid-template-columns:55.5% 1fr;



  gap:16px;



}



@media(max-width:992px){.mu-hero-side{grid-template-columns:1fr 1fr}}



@media(max-width:576px){.mu-hero-side{grid-template-columns:1fr}}



.mu-hero-stack{display:flex;flex-direction:column;gap:16px}



.mu-hero-card{border-radius:var(--mu-radius);overflow:hidden;background:#fff;box-shadow:var(--mu-shadow)}



.mu-hero-card img{width:100%;height:100%;object-fit:cover}



.mu-hero-card.tall{height:100%}



.mu-hero-card.tall img{height:100%}







/* ==========================================================================



   BANNER BLOKLARI — 4'lu ve 3'lu



   ========================================================================== */



.mu-banners{padding:28px 0}



.mu-banners .row{display:flex;flex-wrap:wrap;margin:0 -11px;gap:0}



.mu-banners .col-3{flex:0 0 25%;max-width:25%;padding:0 11px}



.mu-banners .col-4{flex:0 0 33.333%;max-width:33.333%;padding:0 11px}



@media(max-width:992px){



  .mu-banners .col-3{flex:0 0 50%;max-width:50%;margin-bottom:16px}



  .mu-banners .col-4{flex:0 0 100%;max-width:100%;margin-bottom:16px}



}



@media(max-width:576px){.mu-banners .col-3{flex:0 0 100%;max-width:100%}}



.mu-banner{border-radius:var(--mu-radius);overflow:hidden;display:block;background:#fff;box-shadow:var(--mu-shadow)}



.mu-banner img{width:100%;aspect-ratio:1.34/1;object-fit:cover;transition:transform .35s}



.mu-banner:hover img{transform:scale(1.02)}



.mu-banner.tall3 img{aspect-ratio:16/9}







/* ==========================================================================



   URUN KARUSEL BOLUMU — sol promo banner + sag slider (ImageProducts)



   ========================================================================== */



.mu-section{padding:10px 0 18px}



.mu-image-products{



  display:flex;align-items:stretch;



  background:#fff;border-radius:var(--mu-radius);



  overflow:hidden;box-shadow:var(--mu-shadow);



  border:1px solid #eef1f5;position:relative;



}



.mu-image-products.reverse{flex-direction:row-reverse}



.mu-ip-img{



  flex:0 0 300px;position:relative;overflow:hidden;



  background:#f7f9fc;



}



@media(max-width:1100px){.mu-ip-img{flex:0 0 220px}}



@media(max-width:768px){.mu-ip-img{display:none}}



.mu-ip-img img{width:100%;height:100%;object-fit:cover}



.mu-ip-img a{display:block;height:100%}



.mu-ip-products{flex:1;min-width:0;padding:16px 12px 16px 16px;overflow:hidden}



.mu-carousel{position:relative}



.mu-carousel-track{



  display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;



  scrollbar-width:none;padding:4px 2px 8px;



}



.mu-carousel-track::-webkit-scrollbar{display:none}



.mu-carousel-btn{



  position:absolute;top:50%;transform:translateY(-50%);



  width:46px;height:46px;border-radius:50%;



  background:rgba(255,255,255,.96);border:1px solid #e6eaf0;



  box-shadow:0 2px 12px rgba(0,0,0,.12);



  cursor:pointer;display:flex;align-items:center;justify-content:center;



  font-size:18px;color:#222;z-index:2;



}



.mu-carousel-btn.prev{left:-8px}



.mu-carousel-btn.next{right:-8px}



.mu-carousel-btn:disabled{opacity:0;pointer-events:none}







/* ==========================================================================



   URUN KARTI — mutfakyeri productItem



   ========================================================================== */



.mu-product-card{



  flex:0 0 216px;max-width:216px;



  background:#fff;border:1px solid var(--mu-border);



  border-radius:12px;padding:14px 14px 12px;



  text-align:center;position:relative;



  transition:box-shadow .22s,transform .22s;



  display:flex;flex-direction:column;



}



.mu-product-card:hover{box-shadow:var(--mu-shadow-hover);transform:translateY(-3px)}



.mu-product-card .mu-thumb{



  aspect-ratio:1/1;background:#fff;



  display:flex;align-items:center;justify-content:center;



  margin-bottom:10px;overflow:hidden;border-radius:8px;



}



.mu-product-card .mu-thumb img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .35s}



.mu-product-card:hover .mu-thumb img{transform:scale(1.04)}



.mu-product-card .mu-title{



  font-size:12px;font-weight:700;line-height:1.35;



  min-height:32px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;



  color:var(--mu-text);margin:0 0 4px;



}



.mu-product-card .mu-title a{color:inherit}



.mu-product-card .mu-sku{font-size:11px;color:var(--mu-gray-3);font-weight:700;margin-bottom:6px;min-height:14px}



.mu-product-card .mu-price{display:flex;flex-direction:column;gap:2px;margin:6px 0 10px}



.mu-price-old{font-size:13px;color:#222;text-decoration:line-through;font-weight:700;line-height:1}



.mu-price-new{font-size:17px;color:var(--mu-sale);font-weight:800;line-height:1}



.mu-product-card .mu-cart{



  margin-top:auto;



  background:var(--mu-navy);color:#fff;border:none;



  border-radius:6px;padding:9px 12px;font-weight:700;font-size:13px;



  cursor:pointer;width:100%;transition:background .2s;



}



.mu-product-card .mu-cart:hover{background:var(--mu-navy-dark)}



.mu-badge{



  position:absolute;top:8px;left:8px;



  background:var(--mu-navy);color:#fff;



  font-size:11px;font-weight:800;padding:4px 8px;border-radius:6px;



  display:flex;align-items:center;gap:4px;



}



.mu-badge i{font-size:10px}







/* ==========================================================================



   SEO + OZELLIK KARTLARI (hakkimizdaBlock)



   ========================================================================== */



.mu-seo{padding:40px 0 10px;text-align:center}



.mu-seo h1,.mu-seo h2{font-size:28px;color:var(--mu-gray-2);font-weight:800;line-height:1.2;margin:0 0 18px}



@media(max-width:768px){.mu-seo h1,.mu-seo h2{font-size:22px}}



.mu-seo .lead{font-size:14px;line-height:1.7;color:var(--mu-gray-2);max-width:1120px;margin:0 auto 36px;font-weight:500}



.mu-seo-grid{



  display:grid;grid-template-columns:1fr 1fr;gap:28px;



  text-align:left;max-width:1920px;margin:0 auto;



}



@media(max-width:992px){.mu-seo-grid{grid-template-columns:1fr}}



.mu-seo-left h3{font-size:18px;color:var(--mu-gray-2);margin:0 0 12px}



.mu-seo-left p{font-size:14px;line-height:1.7;color:var(--mu-gray-2);margin:0}



.mu-feature-grid{



  display:flex;flex-wrap:wrap;gap:14px;



}



.mu-feature{



  flex:1 1 calc(33.333% - 14px);min-width:160px;



  display:flex;align-items:center;gap:12px;



  background:#fff;border-radius:var(--mu-radius-pill);



  padding:14px 14px;box-shadow:var(--mu-shadow);



  border:1px solid #f0f2f5;

border:1px solid #f0f2f5;



}



@media(max-width:576px){.mu-feature{flex:1 1 100%}}



.mu-feature-icon{



  flex:0 0 44px;width:44px;height:44px;border-radius:50%;



  background:var(--mu-navy);color:#fff;



  display:flex;align-items:center;justify-content:center;font-size:18px;



}



.mu-feature b{font-size:13px;color:var(--mu-text);line-height:1.2}



.mu-feature small{display:block;font-size:11px;color:var(--mu-gray-3);margin-top:2px;font-weight:500}







/* ==========================================================================



   MARKA SERİDİ — SAĞDAN SOLA KESİNTİSİZ KAYAN VİTRİN (INFINITE MARQUEE)



   ========================================================================== */



.mu-brands-section {



  padding: 28px 0 20px;



  background: #f8fafc;



  border-top: 1px solid #eef2f6;



  border-bottom: 1px solid #eef2f6;



  overflow: hidden;



}



.mu-brands-bar-header {



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-bottom: 16px;



  flex-wrap: wrap;



  gap: 12px;



}



.mu-brands-heading h2 {



  font-size: 20px;



  font-weight: 700;



  color: var(--mu-navy-dark, #0b1f44);



  margin: 0;



  line-height: 1.2;



}



.mu-brands-heading span {



  font-size: 13px;



  color: var(--mu-gray-2, #64748b);



  margin-top: 3px;



  display: block;



}



.mu-brands-all-link {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  font-size: 13px;



  font-weight: 600;



  color: var(--mu-blue, #0056b3);



  text-decoration: none;



  background: #fff;



  padding: 8px 16px;



  border-radius: 20px;



  border: 1px solid #cbd5e1;



  transition: all .2s ease;



  box-shadow: 0 1px 3px rgba(0,0,0,0.04);



}



.mu-brands-all-link:hover {



  background: var(--mu-blue, #0056b3);



  color: #fff;



  border-color: var(--mu-blue, #0056b3);



  transform: translateX(2px);



}



.mu-brands-all-link i {



  font-size: 11px;



  transition: transform .2s ease;



}



.mu-brands-all-link:hover i {



  transform: translateX(3px);



}







.mu-marquee-container {



  position: relative;



  width: 100%;



  overflow: hidden;



  padding: 6px 0;



  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);



  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);



}



.mu-marquee-track {



  display: flex;



  gap: 16px;



  width: max-content;



  will-change: transform;



  animation: muMarqueeScroll 110s linear infinite;



}



.mu-marquee-container:hover .mu-marquee-track {



  animation-play-state: paused;



}



@keyframes muMarqueeScroll {



  0% { transform: translateX(0); }



  100% { transform: translateX(-50%); }



}







.mu-brand-card {



  flex: 0 0 160px;



  height: 76px;



  background: #ffffff;



  border: 1px solid #e2e8f0;



  border-radius: 12px;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 10px 14px;



  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);



  transition: all .25s ease;



  text-decoration: none;



}



.mu-brand-card:hover {



  transform: translateY(-3px);



  border-color: var(--mu-blue, #0056b3);



  box-shadow: 0 8px 18px rgba(0, 86, 179, 0.12);



  background: #ffffff;



}



.mu-brand-card img {



  max-width: 100%;



  max-height: 100%;



  object-fit: contain;



  filter: contrast(1.02);



  transition: transform .25s ease;



}



.mu-brand-card:hover img {



  transform: scale(1.05);



}







@media (max-width: 768px) {
  .mu-cm-hero-side {
    grid-template-columns: 1fr;
  }



  .mu-brand-card {



    flex: 0 0 130px;



    height: 64px;



    padding: 8px 10px;



  }



  .mu-marquee-track {



    gap: 10px;



    animation-duration: 80s;



  }



}







/* ==========================================================================



   TÜM MARKALAR SAYFASI (page-markalar.php)



   ========================================================================== */



.mu-markalar-page {



  padding: 16px 0 40px;



  background: #f8fafc;



}



.mu-markalar-header {



  background: linear-gradient(135deg, #0b1f44 0%, #17386d 100%);



  color: #fff;



  border-radius: 16px;



  padding: 32px 36px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 24px;



  margin-bottom: 24px;



  box-shadow: 0 8px 24px rgba(11, 31, 68, 0.12);



}



.mu-markalar-header-content h1 {



  font-size: 28px;



  font-weight: 800;



  color: #fff;



  margin: 0 0 8px;



  letter-spacing: -0.02em;



}



.mu-markalar-header-content p {



  font-size: 14px;



  color: #cbd5e1;



  margin: 0;



  max-width: 680px;



  line-height: 1.5;



}



.mu-markalar-header-badge {



  background: rgba(255, 255, 255, 0.1);



  border: 1px solid rgba(255, 255, 255, 0.2);



  border-radius: 14px;



  padding: 14px 22px;



  text-align: center;



  flex-shrink: 0;



}



.mu-markalar-header-badge .badge-number {



  display: block;



  font-size: 28px;



  font-weight: 800;



  color: #38bdf8;



  line-height: 1;



}



.mu-markalar-header-badge .badge-label {



  display: block;



  font-size: 11px;



  font-weight: 600;



  color: #e2e8f0;



  text-transform: uppercase;



  letter-spacing: 0.05em;



  margin-top: 4px;



}







.mu-markalar-controls {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 16px;



  margin-bottom: 16px;



  flex-wrap: wrap;



}



.mu-markalar-search {



  position: relative;



  flex: 1;



  max-width: 480px;



}



.mu-markalar-search i.fa-magnifying-glass {



  position: absolute;



  left: 14px;



  top: 50%;



  transform: translateY(-50%);



  color: #94a3b8;



  font-size: 14px;



}



.mu-markalar-search input {



  width: 100%;



  height: 44px;



  padding: 0 40px 0 38px;



  background: #fff;



  border: 1.5px solid #cbd5e1;



  border-radius: 10px;



  font-size: 14px;



  color: #0f172a;



  outline: none;



  transition: all .2s ease;



}



.mu-markalar-search input:focus {



  border-color: var(--mu-blue, #0056b3);



  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.12);



}



.mu-markalar-search button {



  position: absolute;



  right: 10px;



  top: 50%;



  transform: translateY(-50%);



  background: none;



  border: none;



  color: #94a3b8;



  cursor: pointer;



  padding: 4px 6px;



}



.mu-markalar-search button:hover {



  color: #0f172a;



}



.mu-markalar-counter {



  font-size: 13px;



  font-weight: 600;



  color: #64748b;



}



.mu-markalar-counter span {



  color: var(--mu-navy-dark, #0b1f44);



  font-weight: 700;



}







.mu-alpha-bar {



  display: flex;



  gap: 6px;



  overflow-x: auto;



  padding-bottom: 10px;



  margin-bottom: 20px;



  scrollbar-width: thin;



}



.mu-alpha-btn {



  background: #fff;



  border: 1px solid #e2e8f0;



  border-radius: 8px;



  padding: 6px 12px;



  font-size: 13px;



  font-weight: 600;



  color: #475569;



  cursor: pointer;



  transition: all .15s ease;



  white-space: nowrap;



}



.mu-alpha-btn:hover {



  background: #f1f5f9;



  border-color: #cbd5e1;



  color: #0f172a;



}



.mu-alpha-btn.is-active {



  background: var(--mu-navy-dark, #0b1f44);



  border-color: var(--mu-navy-dark, #0b1f44);



  color: #fff;



}







.mu-brands-catalog {



  display: grid;



  grid-template-columns: repeat(6, 1fr);



  gap: 16px;



  margin-bottom: 32px;



}



@media (max-width: 1200px) {



  .mu-brands-catalog { grid-template-columns: repeat(4, 1fr); }



}



@media (max-width: 860px) {



  .mu-brands-catalog { grid-template-columns: repeat(3, 1fr); gap: 12px; }



  .mu-markalar-header { flex-direction: column; text-align: center; }



}



@media (max-width: 520px) {



  .mu-brands-catalog { grid-template-columns: repeat(2, 1fr); gap: 10px; }



}







.mu-brand-tile {



  background: #fff;



  border: 1px solid #e2e8f0;



  border-radius: 12px;



  padding: 16px 14px 12px;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: space-between;



  text-decoration: none;



  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);



  transition: all .25s ease;



  min-height: 140px;



}



.mu-brand-tile:hover {



  transform: translateY(-4px);



  border-color: var(--mu-blue, #0056b3);



  box-shadow: 0 10px 22px rgba(0, 86, 179, 0.12);



}



.mu-brand-tile .tile-logo {



  width: 100%;



  height: 68px;



  display: flex;



  align-items: center;



  justify-content: center;



  margin-bottom: 10px;



}



.mu-brand-tile .tile-logo img {



  max-width: 100%;



  max-height: 100%;



  object-fit: contain;



  transition: transform .25s ease;



}



.mu-brand-tile:hover .tile-logo img {



  transform: scale(1.06);



}



.mu-brand-tile .tile-info {



  width: 100%;



  text-align: center;



  border-top: 1px solid #f1f5f9;



  padding-top: 8px;



}



.mu-brand-tile .tile-title {



  font-size: 13px;



  font-weight: 700;



  color: var(--mu-navy-dark, #0b1f44);



  margin: 0 0 3px;



  white-space: nowrap;



  overflow: hidden;



  text-overflow: ellipsis;



}



.mu-brand-tile .tile-count {



  display: inline-flex;



  align-items: center;



  gap: 4px;



  font-size: 11px;



  font-weight: 600;



  color: #0284c7;



  background: #f0f9ff;



  padding: 2px 8px;



  border-radius: 10px;



}



.mu-brand-tile .tile-action {



  font-size: 11px;



  font-weight: 600;



  color: #64748b;



  display: inline-flex;



  align-items: center;



  gap: 4px;



}



.mu-brand-tile:hover .tile-action {



  color: var(--mu-blue, #0056b3);



}







.mu-no-brands {



  background: #fff;



  border: 1px dashed #cbd5e1;



  border-radius: 12px;



  padding: 48px 24px;



  text-align: center;



  margin: 20px 0 40px;



}



.mu-no-brands i {



  font-size: 40px;



  color: #94a3b8;



  margin-bottom: 12px;



}



.mu-no-brands h3 {



  font-size: 18px;



  font-weight: 700;



  color: #0f172a;



  margin: 0 0 6px;



}



.mu-no-brands p {



  font-size: 14px;



  color: #64748b;



  margin: 0 0 16px;



}



.mu-btn-primary {



  background: var(--mu-navy-dark, #0b1f44);



  color: #fff;



  border: none;



  border-radius: 8px;



  padding: 10px 20px;



  font-size: 13px;



  font-weight: 600;



  cursor: pointer;



  transition: background .2s ease;



}



.mu-btn-primary:hover {



  background: var(--mu-blue, #0056b3);



}







.mu-markalar-info-banner {



  background: #fff;



  border: 1px solid #e2e8f0;



  border-radius: 14px;



  padding: 24px 28px;



  display: flex;



  align-items: center;



  gap: 20px;



  flex-wrap: wrap;



  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);



}



.mu-markalar-info-banner .info-icon {



  width: 52px;



  height: 52px;



  border-radius: 12px;



  background: #ecfdf5;



  color: #059669;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 24px;



  flex-shrink: 0;



}



.mu-markalar-info-banner .info-text {



  flex: 1;



  min-width: 260px;



}



.mu-markalar-info-banner .info-text h4 {



  font-size: 16px;



  font-weight: 700;



  color: #0f172a;



  margin: 0 0 4px;



}

.mu-markalar-info-banner .info-text p {



  font-size: 13px;



  color: #64748b;



  margin: 0;



  line-height: 1.4;



}



.mu-markalar-info-banner .info-action {



  flex-shrink: 0;



}



.mu-whatsapp-btn {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background: #25d366;



  color: #fff;



  padding: 10px 20px;



  border-radius: 8px;



  text-decoration: none;



  font-size: 13px;



  font-weight: 700;



  box-shadow: 0 3px 8px rgba(37, 211, 102, 0.25);



  transition: all .2s ease;



}



.mu-whatsapp-btn:hover {



  background: #1eb956;



  color: #fff;



  transform: translateY(-2px);



}







/* ==========================================================================



   MARKA ÜRÜNLER SAYFASI (taxonomy-product_brand.php)



   ========================================================================== */



.mu-brand-page-banner {



  background: #fff;



  border: 1px solid #e2e8f0;



  border-radius: 14px;



  padding: 24px 28px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 24px;



  flex-wrap: wrap;



  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);



}



.mu-brand-page-banner-left {



  display: flex;



  align-items: center;



  gap: 20px;



  flex-wrap: wrap;



}



.brand-logo-frame {



  width: 140px;



  height: 64px;



  border: 1px solid #e2e8f0;



  border-radius: 10px;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 6px 12px;



  background: #fff;



  box-shadow: 0 2px 4px rgba(0,0,0,0.03);



}



.brand-logo-frame img {



  max-width: 100%;



  max-height: 100%;



  object-fit: contain;



}



.brand-title-wrap h1 {



  font-size: 22px;



  font-weight: 800;



  color: var(--mu-navy-dark, #0b1f44);



  margin: 0 0 4px;



}



.brand-title-wrap p {



  font-size: 13px;



  color: #64748b;



  margin: 0;



}



.mu-brand-wa-cta {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background: #25d366;



  color: #fff;



  padding: 10px 18px;



  border-radius: 8px;



  text-decoration: none;



  font-size: 13px;



  font-weight: 700;



  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25);



  transition: all .2s ease;



}



.mu-brand-wa-cta:hover {



  background: #1eb956;



  color: #fff;



  transform: translateY(-2px);



}







.mu-brand-empty-state {



  background: #fff;



  border: 1px solid #e2e8f0;



  border-radius: 14px;



  padding: 48px 32px;



  text-align: center;



  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);



}



.mu-brand-empty-state .empty-icon {



  width: 64px;



  height: 64px;



  border-radius: 50%;



  background: #f0fdf4;



  color: #16a34a;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 28px;



  margin: 0 auto 16px;



}



.mu-brand-empty-state h2 {



  font-size: 20px;



  font-weight: 800;



  color: var(--mu-navy-dark, #0b1f44);



  margin: 0 0 8px;



}



.mu-brand-empty-state p {



  font-size: 14px;



  color: #64748b;



  line-height: 1.6;



  max-width: 600px;



  margin: 0 auto 24px;



}



.mu-brand-empty-state .empty-buttons {



  display: flex;



  gap: 14px;



  justify-content: center;



  flex-wrap: wrap;



  margin-bottom: 24px;



}



.mu-btn-wa {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background: #25d366;



  color: #fff;



  padding: 12px 24px;



  border-radius: 8px;



  font-size: 14px;



  font-weight: 700;



  text-decoration: none;



  box-shadow: 0 3px 8px rgba(37, 211, 102, 0.25);



  transition: all .2s ease;



}



.mu-btn-wa:hover {



  background: #1eb956;



  color: #fff;



  transform: translateY(-2px);



}



.mu-btn-tel {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background: var(--mu-navy-dark, #0b1f44);



  color: #fff;



  padding: 12px 24px;



  border-radius: 8px;



  font-size: 14px;



  font-weight: 700;



  text-decoration: none;



  transition: all .2s ease;



}



.mu-btn-tel:hover {



  background: var(--mu-blue, #0056b3);



  color: #fff;



  transform: translateY(-2px);



}



.mu-brand-empty-state .empty-back-link a {



  font-size: 13px;



  font-weight: 600;



  color: #64748b;



  text-decoration: none;



}



.mu-brand-empty-state .empty-back-link a:hover {



  color: var(--mu-blue, #0056b3);



}







/* ==========================================================================



   FOOTER — #222 koyu, ustte bulten



   ========================================================================== */



.mu-footer{background:#222;color:#c9d0d9}



.mu-footer a{color:#d6dde8}



.mu-footer a:hover{color:#fff}



.mu-newsletter{



  background:#1a1a1a;padding:18px 0;border-bottom:1px solid #2e2e2e;



  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;



}



.mu-newsletter label{font-weight:700;color:#fff}



.mu-newsletter form{display:flex;gap:8px;flex:1;max-width:520px}



.mu-newsletter input{flex:1;padding:10px 14px;border-radius:6px;border:1px solid #3a3a3a;background:#2a2a2a;color:#fff}



.mu-newsletter button{background:var(--mu-navy);color:#fff;border:none;border-radius:6px;padding:10px 18px;font-weight:700;cursor:pointer}



.mu-newsletter button:hover{background:var(--mu-navy-dark)}



.mu-footer-main{padding:42px 0 28px}



.mu-footer-grid{display:grid;grid-template-columns:280px 1fr 240px;gap:28px}



@media(max-width:992px){.mu-footer-grid{grid-template-columns:1fr}}



.mu-foot-logo img{height:48px;width:auto}



.mu-foot-social{display:flex;gap:10px;margin:14px 0}



.mu-foot-social a{width:36px;height:36px;border-radius:50%;background:#2e2e2e;display:flex;align-items:center;justify-content:center;color:#c4c4c4}



.mu-foot-social a:hover{background:var(--mu-navy);color:#fff}



.mu-foot-links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}



@media(max-width:768px){.mu-foot-links{grid-template-columns:1fr}}



.mu-foot-links span{display:block;font-size:16px;font-weight:800;color:#fff;margin-bottom:14px;position:relative;padding-bottom:10px}



.mu-foot-links span::after{content:"";position:absolute;left:0;bottom:0;width:24px;height:3px;background:var(--mu-sky);border-radius:2px}



.mu-foot-links ul{list-style:none;margin:0;padding:0}



.mu-foot-links li{margin:6px 0}



.mu-foot-links li a{font-size:13px;color:#aeb8c6}



.mu-foot-contact .mu-wa{



  display:flex;align-items:center;gap:12px;



  background:#1f2a3a;border-radius:12px;padding:12px 14px;margin-bottom:12px;



}



.mu-wa i{font-size:26px;color:#25d366}



.mu-wa b{color:#fff;font-size:14px}



.mu-wa small{color:#aeb8c6;font-size:12px}



.mu-footer-bottom{background:#fff;color:#222;padding:14px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}



.mu-footer-bottom img{height:28px}



.mu-copy{font-size:12px;color:#7a8596}







/* ==========================================================================



   WOOCOMMERCE — kategori/urun sayfalari



   ========================================================================== */



.woocommerce .woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
  font-size: 12.5px;
  color: var(--mu-gray, #64748b);
  margin: 4px 0 8px 0 !important;
  line-height: 1.4;
}

.woocommerce .woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb a {
  color: var(--mu-navy, #0A4182);
  text-decoration: none;
}
.woocommerce .woocommerce-breadcrumb a:hover,
nav.woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

.mu-archive-head {
  padding: 2px 0 4px !important;
  margin-bottom: 10px !important;
}

.mu-archive-head h1 {
  font-size: 22px;
  color: var(--mu-navy-dark, #083366);
  margin: 0 0 4px 0 !important;
  line-height: 1.25;
}

.mu-archive-head p {
  font-size: 13px;
  color: var(--mu-gray, #64748b);
  margin: 0;
}



.woocommerce ul.products{



  display:grid !important;grid-template-columns:repeat(4,1fr);gap:16px;



}



.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}



.woocommerce ul.products li.product{



  width:auto !important;float:none !important;margin:0 !important;



  background:#fff;border:1px solid var(--mu-border);border-radius:12px;padding:14px;



}



@media(max-width:1100px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}



@media(max-width:768px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:10px}}



@media(max-width:480px){.woocommerce ul.products{grid-template-columns:1fr}}



.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:13px;font-weight:700;color:var(--mu-text);min-height:36px;padding:0}



.woocommerce ul.products li.product .price{color:var(--mu-sale);font-weight:800;font-size:16px}



.woocommerce ul.products li.product .price del{color:#222;opacity:1}



.woocommerce ul.products li.product .price del span{color:#222;text-decoration:line-through}



.woocommerce ul.products li.product .button{



  background:var(--mu-navy);color:#fff;border-radius:6px;width:100%;text-align:center;font-weight:700;



}



.woocommerce ul.products li.product .button:hover{background:var(--mu-navy-dark)}



.woocommerce span.onsale{



  background:var(--mu-navy) !important;min-height:auto;line-height:1.4;padding:6px 10px;border-radius:6px;font-size:12px;top:10px !important;left:10px !important;



}



.woocommerce div.product{padding:18px 0}



.woocommerce div.product div.images img{border-radius:10px}



.woocommerce div.product .product_title{font-size:24px;color:var(--mu-navy-dark)}



.woocommerce div.product p.price{color:var(--mu-sale);font-size:22px;font-weight:800}



.woocommerce div.product p.price del{color:#222;font-size:16px}



.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{



  background:var(--mu-navy) !important;



}



.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{



  background:var(--mu-navy-dark) !important;



}



.woocommerce-message{border-top-color:var(--mu-navy)}



.woocommerce-message::before{color:var(--mu-navy)}







/* ==========================================================================



   FLOATING WIDGETS



   ========================================================================== */



.mu-wa-float{



  position:fixed;left:14px;bottom:22px;z-index:80;



  width:56px;height:56px;border-radius:50%;



  background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;



  font-size:28px;box-shadow:0 4px 16px rgba(0,0,0,.18);



  animation:mu-pulse 2.2s infinite;



}



@keyframes mu-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 12px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}



.mu-to-top{



  position:fixed;right:14px;bottom:22px;z-index:80;



  width:44px;height:44px;border-radius:50%;



  background:#111;color:#fff;border:none;cursor:pointer;



  display:flex;align-items:center;justify-content:center;



  box-shadow:0 4px 16px rgba(0,0,0,.18);



  opacity:0;pointer-events:none;transition:opacity .2s;



}



.mu-to-top.is-visible{opacity:1;pointer-events:auto}



.mu-chat-bubble{



  position:fixed;right:14px;bottom:76px;z-index:79;



  background:#fff;border-radius:16px 16px 4px 16px;



  padding:10px 14px;box-shadow:0 6px 20px rgba(0,0,0,.14);



  font-size:13px;color:var(--mu-text);max-width:260px;



}



@media(max-width:768px){.mu-chat-bubble{display:none}}







/* ==========================================================================



   Responsive helpers



   ========================================================================== */



.hide-mobile{display:block}



@media(max-width:992px){.hide-mobile{display:none !important}}



.show-mobile{display:none}



@media(max-width:992px){.show-mobile{display:block}}







/* ==========================================================================



   Single Product & Related Carousel



   ========================================================================== */



.single-product #sidebar,



.single-product .widget-area,



.single-product aside.widget-area,



.single-product .widget {



  display: none !important;



}







.mu-related-section {



  position: relative;



  width: 100%;



  clear: both;



}



.mu-related-carousel {



  position: relative;



  width: 100%;



}



.mu-related-carousel .mu-carousel-track {



  display: flex !important;



  gap: 14px !important;



  overflow-x: auto !important;



  scroll-behavior: smooth !important;



  scrollbar-width: none !important;



  padding: 8px 4px 16px !important;



  list-style: none !important;



  margin: 0 !important;



}



.mu-related-carousel .mu-carousel-track::-webkit-scrollbar {



  display: none !important;



}



.mu-related-carousel .mu-product-card {



  flex: 0 0 220px !important;



  max-width: 220px !important;



  min-width: 220px !important;



}



/* ==========================================================================

   MUTFAK UZMANI PRO — RESPONSIVE (MOBIL & TABLET) OPTIMIZASYONLARI

   ========================================================================== */



/* --- 1. Mobil Header & Hamburger Toggle & Arama & Sepet --- */

.mu-nav-toggle {

  display: none;

}



@media(max-width: 768px) {

  .mu-nav-toggle {

    display: flex !important;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    background: #f8fafc;

    border: 1px solid #cbd5e1;

    border-radius: 8px;

    font-size: 18px;

    color: var(--mu-navy);

    cursor: pointer;

    flex-shrink: 0;

    transition: all 0.2s ease;

  }

  .mu-nav-toggle:hover {

    background: var(--mu-sky-pale);

    border-color: var(--mu-navy);

  }



  .mu-header-top {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 8px 0 !important;

    gap: 8px !important;

  }



  .mu-logo {

    flex: 0 1 auto !important;

    max-width: 170px !important;

    justify-content: center !important;

    margin: 0 auto !important;

  }

  .mu-logo img {

    height: 38px !important;

    max-width: 160px !important;

    width: auto !important;

  }



  .mu-header-actions {

    margin-left: 0 !important;

    gap: 6px !important;

    flex-shrink: 0 !important;

  }



  .mu-cart-btn {

    height: 40px !important;

    line-height: 40px !important;

    padding: 0 0 0 10px !important;

    font-size: 13px !important;

    border-radius: 8px !important;

  }

  .mu-cart-btn .mu-cart-label {

    display: none !important;

  }

  .mu-cart-btn i {

    font-size: 16px !important;

  }

  .mu-cart-count {

    min-width: 32px !important;

    font-size: 13px !important;

    margin-left: 4px !important;

  }



  .mu-search {

    order: 10 !important;

    flex: 1 1 100% !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 6px 0 2px !important;

  }

  .mu-search form {

    width: 100% !important;

    display: flex !important;

  }

  .mu-search input[type="search"] {

    font-size: 14px !important;

    padding: 9px 12px !important;

    border-radius: 8px 0 0 8px !important;

  }

  .mu-search button {

    flex: 0 0 52px !important;

    border-radius: 0 8px 8px 0 !important;

    font-size: 16px !important;

  }

}



/* --- 2. Mobil Çekmece Menü (Drawer) & Backdrop --- */

.mu-drawer-backdrop {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(15, 23, 42, 0.6);

  backdrop-filter: blur(2px);

  z-index: 998;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

}

.mu-drawer-backdrop.is-open {

  opacity: 1;

  pointer-events: auto;

}



.mu-mobile-drawer {

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  width: 310px;

  max-width: 85vw;

  background: #ffffff;

  z-index: 999;

  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.2);

  transform: translateX(-100%);

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  flex-direction: column;

  overflow: hidden;

}

.mu-mobile-drawer.is-open {

  transform: translateX(0);

}



.mu-drawer-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 18px;

  border-bottom: 1px solid var(--mu-border);

  background: #f8fafc;

}

.mu-drawer-brand img {

  height: 28px;

  width: auto;

  object-fit: contain;

}

.mu-drawer-close {

  background: none;

  border: none;

  font-size: 20px;

  color: #475569;

  cursor: pointer;

  padding: 4px 8px;

  border-radius: 6px;

}

.mu-drawer-close:hover {

  background: #e2e8f0;

  color: #0f172a;

}



.mu-drawer-user {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 18px;

  background: var(--mu-navy-dark);

  color: #ffffff;

  font-size: 13px;

}

.mu-drawer-user i {

  font-size: 32px;

  color: var(--mu-sky);

}

.mu-drawer-user strong {

  display: block;

  font-size: 14px;

  color: #ffffff;

}

.mu-drawer-user a {

  color: var(--mu-sky-light);

  text-decoration: none;

  font-size: 12px;

}



.mu-drawer-menu-wrap {

  flex: 1;

  overflow-y: auto;

  padding: 16px 18px 24px;

  -webkit-overflow-scrolling: touch;

}

.mu-drawer-title {

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  font-weight: 700;

  color: var(--mu-gray);

  margin-bottom: 8px;

}

.mu-drawer-list {

  list-style: none;

  padding: 0;

  margin: 0;

}

.mu-drawer-list li {

  border-bottom: 1px solid #f1f5f9;

}

.mu-drawer-list li a {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 4px;

  color: var(--mu-text);

  font-size: 13.5px;

  font-weight: 500;

  text-decoration: none;

  transition: color 0.15s;

}

.mu-drawer-list li a:hover {

  color: var(--mu-navy);

}

.mu-drawer-list li a i {

  font-size: 12px;

  color: var(--mu-navy);

  width: 16px;

  text-align: center;

}

.mu-drawer-contact {

  display: flex;

  flex-direction: column;

  gap: 8px;

  padding: 10px 0;

}

.mu-drawer-contact a {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 13px;

  color: #334155;

  text-decoration: none;

  font-weight: 600;

}



/* --- 3. Kategori Şeridi (Mobilde Yatay Dokunmatik Kaydırma) --- */

@media(max-width: 768px) {

  .mu-catbar {

    padding: 8px 0 6px !important;

    border-bottom: 1px solid var(--mu-border-2) !important;

    overflow: hidden !important;

  }

  .mu-catbar .ticiContainer {

    padding: 0 !important;

  }

  .mu-catbar-inner {

    display: flex !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch !important;

    scroll-behavior: smooth !important;

    scrollbar-width: none !important;

    padding: 2px 14px 6px !important;

    gap: 12px !important;

  }

  .mu-catbar-inner::-webkit-scrollbar {

    display: none !important;

  }

  .mu-cat {

    flex: 0 0 66px !important;

    max-width: 66px !important;

    padding: 2px 0 !important;

    text-align: center !important;

  }

  .mu-cat-icon {

    width: 46px !important;

    height: 46px !important;

    border-radius: 12px !important;

    margin: 0 auto 4px !important;

  }

  .mu-cat-icon img {

    width: 28px !important;

    height: 28px !important;

  }

  .mu-cat-title {

    font-size: 10px !important;

    line-height: 1.2 !important;

    height: 24px !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

  }

}



/* --- 4. Arşiv / Kategori Sayfası Düzeni & Filtre Listesi --- */

.mu-archive-layout {

  display: grid;

  grid-template-columns: 260px 1fr;

  gap: 20px;

  align-items: start;

}

.mu-filters {

  background: #fff;

  border-radius: 10px;

  padding: 16px;

  box-shadow: var(--mu-shadow);

  position: sticky;

  top: 78px;

}

.mu-cat-filter-list {

  list-style: none;

  padding: 0;

  margin: 10px 0 0;

}

.mu-cat-filter-list li {

  margin: 6px 0;

}

.mu-cat-filter-list li a {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 8px 12px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

  color: var(--mu-text);

  font-size: 13px;

  font-weight: 500;

  text-decoration: none;

  transition: all 0.2s;

}

.mu-cat-filter-list li a:hover {

  background: var(--mu-sky-pale);

  border-color: var(--mu-navy);

  color: var(--mu-navy);

}

.mu-cat-filter-list li a small.count {

  color: var(--mu-gray-3);

  font-size: 11px;

}



@media (max-width: 992px) {

  .mu-archive-layout {

    grid-template-columns: 1fr !important;

    gap: 16px !important;

  }

  .mu-filters {

    position: static !important;

    margin-bottom: 12px !important;

  }

  .mu-cat-filter-list {

    display: flex !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;

    gap: 8px !important;

    padding-bottom: 6px !important;

    scrollbar-width: none !important;

  }

  .mu-cat-filter-list::-webkit-scrollbar {

    display: none !important;

  }

  .mu-cat-filter-list li {

    margin: 0 !important;

    flex: 0 0 auto !important;

  }

  .mu-cat-filter-list li a {

    white-space: nowrap !important;

    padding: 6px 14px !important;

    font-size: 12px !important;

    border-radius: 20px !important;

  }

}



/* --- 5. Ürün Izgaraları & İlgili Ürünler --- */

/* TABLET (768px - 1024px): 2 sütun */

@media (max-width: 1024px) and (min-width: 601px) {

  .woocommerce ul.products {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 16px !important;

  }

}



/* MOBİL (<600px): 2 sütun düzenli kartlar */

@media (max-width: 600px) {

  .woocommerce ul.products {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 10px !important;

  }

  .woocommerce ul.products li.product {

    padding: 10px 8px !important;

    border-radius: 8px !important;

  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {

    font-size: 12px !important;

    min-height: 32px !important;

    line-height: 1.3 !important;

  }

  .woocommerce ul.products li.product .price {

    font-size: 14px !important;

  }

  .woocommerce ul.products li.product .button {

    font-size: 12px !important;

    padding: 8px 6px !important;

  }

  .woocommerce span.onsale {

    font-size: 10px !important;

    padding: 3px 6px !important;

  }



  /* İlgili Ürünler Karuseli Mobilde */

  .mu-related-carousel .mu-carousel-btn {

    display: none !important;

  }

  .mu-related-carousel .mu-product-card {

    flex: 0 0 165px !important;

    max-width: 165px !important;

    min-width: 165px !important;

    padding: 10px 8px !important;

  }

  .mu-related-carousel .mu-title {

    font-size: 12px !important;

    min-height: 32px !important;

  }

  .mu-related-carousel .mu-price {

    font-size: 13px !important;

  }

  .mu-related-carousel .mu-cart {

    font-size: 12px !important;

    padding: 7px 4px !important;

  }

}



/* --- 6. Sabit / Yüzen Butonlar (WhatsApp & Yukarı Çık) --- */

@media(max-width: 768px) {

  .mu-wa-float {

    left: 12px !important;

    bottom: 20px !important;

    width: 44px !important;

    height: 44px !important;

    font-size: 22px !important;

    box-shadow: 0 3px 12px rgba(0,0,0,.2) !important;

  }

  .mu-to-top {

    right: 12px !important;

    bottom: 20px !important;

    width: 38px !important;

    height: 38px !important;

    font-size: 15px !important;

    box-shadow: 0 3px 12px rgba(0,0,0,.2) !important;

  }

  .mu-chat-bubble {

    display: none !important;

  }

}

/* ==========================================================================
   FAZ 2 — KATEGORI GEZINTISI, FOOTER MOBIL, YUZEN BUTON DUZELTMELERI
   ========================================================================== */

/* --- Akilli Kategori Sidebar Stilleri --- */
.mu-sidebar-toggle-wrap {
  margin-bottom: 0;
}
.mu-sidebar-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mu-navy-dark);
  cursor: default;
}
.mu-sidebar-heading .mu-sidebar-chevron {
  display: none;
}
.mu-sidebar-content {
  /* desktop: always visible */
}

.mu-cat-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mu-navy);
  margin-bottom: 10px;
  padding: 5px 10px;
  background: var(--mu-sky-pale);
  border-radius: 6px;
  transition: all 0.2s;
}
.mu-cat-back-link:hover {
  background: var(--mu-navy);
  color: #fff;
}
.mu-cat-back-link i {
  font-size: 11px;
}

.mu-cat-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--mu-navy);
  color: #fff;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 14px;
}
.mu-cat-current i {
  font-size: 16px;
  color: var(--mu-sky-light);
}
.mu-cat-current strong {
  flex: 1;
}
.mu-cat-current small {
  font-size: 11px;
  opacity: 0.8;
  font-weight: 400;
}

.mu-cat-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--mu-gray);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eef1f5;
}

.mu-cat-nav-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mu-navy) #f1f5f9;
}
.mu-cat-nav-list::-webkit-scrollbar {
  width: 5px;
}
.mu-cat-nav-list::-webkit-scrollbar-thumb {
  background: var(--mu-navy);
  border-radius: 4px;
}
.mu-cat-nav-list::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.mu-cat-nav-list li {
  border-bottom: 1px solid #f1f5f9;
}
.mu-cat-nav-list li:last-child {
  border-bottom: none;
}
.mu-cat-nav-list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  color: var(--mu-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  border-radius: 6px;
}
.mu-cat-nav-list li a:hover {
  background: var(--mu-sky-pale);
  color: var(--mu-navy);
}
.mu-cat-nav-list li a i {
  font-size: 11px;
  color: var(--mu-navy);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.mu-cat-nav-list li a span {
  flex: 1;
  line-height: 1.3;
}
.mu-cat-nav-list li a small.count {
  font-size: 11px;
  color: var(--mu-gray-3);
  flex-shrink: 0;
}
.mu-cat-nav-list li.is-active a {
  background: var(--mu-sky-pale);
  color: var(--mu-navy);
  font-weight: 700;
}
.mu-cat-nav-list li.is-active a i {
  color: #22c55e;
}

.mu-sidebar-info {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eef1f5;
  font-size: 12px;
  color: var(--mu-gray);
}

/* --- Mobil Sidebar Akordeon --- */
@media (max-width: 992px) {
  .mu-sidebar-heading {
    cursor: pointer;
    padding: 12px 14px;
    background: var(--mu-sky-pale);
    border: 1px solid var(--mu-border-2);
    border-radius: 8px;
    margin-bottom: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mu-sidebar-heading .mu-sidebar-chevron {
    display: inline-block;
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.3s ease;
  }
  .mu-sidebar-heading.is-open .mu-sidebar-chevron {
    transform: rotate(180deg);
  }
  .mu-sidebar-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 14px;
  }
  .mu-sidebar-content.is-open {
    max-height: 2000px;
    padding: 14px 14px 8px;
  }

  .mu-filters {
    margin-bottom: 14px !important;
    padding: 0 !important;
    overflow: hidden;
  }
}

/* --- Footer Mobil 1 Sutun --- */
@media (max-width: 768px) {
  .mu-blue-footer .ticiContainer > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .mu-blue-footer .ticiContainer {
    padding: 28px 16px 24px !important;
  }
}

/* --- Yukari Cik Butonu Mobilde Gizle --- */
@media (max-width: 600px) {
  .mu-to-top {
    display: none !important;
  }
}

/* --- Masaustu Urun Karti Ince Ayar --- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product .button {
  margin-top: auto;
}



/* ==========================================================================
   CAFEMARKT STİLİ MENÜ, MEGA MENÜ, MARKA BANDI VE ÇOKLU FİLTRE SİSTEMİ
   Mutfak Uzmanı (mutfakuzmani.com)
   ========================================================================== */

/* --- 1. Üst Navigasyon Barı (.mu-cm-navbar) --- */
.mu-cm-navbar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(10, 65, 130, 0.05);
  position: relative;
  z-index: 100;
  width: 100%;
}
.mu-cm-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  position: relative;
  width: 100%;
}

/* Tüm Kategoriler Butonu */
.mu-cm-all-cats-wrapper {
  position: relative;
  flex-shrink: 0;
}
.mu-cm-all-cats-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mu-primary, #0A4182);
  color: #ffffff !important;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.mu-cm-all-cats-btn:hover {
  background: var(--mu-primary-dark, #083366);
}
.mu-cm-all-cats-btn .mu-cm-chevron {
  font-size: 10px;
  transition: transform 0.25s ease;
}
.mu-cm-all-cats-wrapper:hover .mu-cm-all-cats-btn .mu-cm-chevron {
  transform: rotate(180deg);
}

/* Tüm Kategoriler Açılır Mega Menü */
.mu-cm-all-cats-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 1180px;
  max-width: 94vw;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--mu-primary, #0A4182);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 40px rgba(10, 65, 130, 0.16);
  padding: 24px 28px;
  z-index: 1001;
  display: none;
  animation: muCmFadeIn 0.2s ease forwards;
}
.mu-cm-all-cats-wrapper:hover .mu-cm-all-cats-dropdown {
  display: block;
}
.mu-cm-all-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mu-cm-all-cat-col {
  background: #f8fafc;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #edf2f7;
}
.mu-cm-col-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--mu-primary, #0A4182);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 6px;
}
.mu-cm-col-heading a {
  color: var(--mu-primary, #0A4182);
}
.mu-cm-col-heading a:hover {
  color: var(--mu-primary-dark, #083366);
}
.mu-cm-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mu-cm-col-links li {
  margin-bottom: 6px;
}
.mu-cm-col-links a {
  font-size: 13px;
  color: #475569;
  display: block;
  transition: color 0.15s ease, transform 0.15s ease;
}
.mu-cm-col-links a:hover {
  color: var(--mu-primary, #0A4182);
  transform: translateX(4px);
}

/* Yatay Menü Listesi — Ekrana Tam Sığdırma */
.mu-cm-nav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
  flex: 1;
  flex-wrap: nowrap;
  min-width: 0;
}
.mu-cm-nav-item {
  position: static; /* Mega menünün tam genişlikte açılması için */
  flex-shrink: 0;
}
.mu-cm-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b !important;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.mu-cm-nav-link i {
  font-size: 12px;
  color: var(--mu-primary, #0A4182);
}
.mu-cm-nav-link .mu-cm-sub-arrow {
  font-size: 8.5px;
  color: #94a3b8;
  margin-left: 1px;
  transition: transform 0.2s ease;
}
.mu-cm-nav-item:hover .mu-cm-nav-link {
  color: var(--mu-primary, #0A4182) !important;
  background: #f8fafc;
}
.mu-cm-nav-item:hover .mu-cm-nav-link .mu-cm-sub-arrow {
  transform: rotate(180deg);
  color: var(--mu-primary, #0A4182);
}
.mu-cm-nav-link.highlight {
  color: #d97706 !important;
}
.mu-cm-nav-link.highlight i {
  color: #f59e0b;
}
.mu-cm-nav-link.deal {
  color: #dc2626 !important;
}
.mu-cm-nav-link.deal i {
  color: #ef4444;
}

@media (max-width: 1440px) {
  .mu-cm-all-cats-btn {
    padding: 12px 14px;
    font-size: 13px;
    gap: 6px;
  }
  .mu-cm-nav-link {
    padding: 12px 5px;
    font-size: 12px;
    gap: 4px;
  }
  .mu-cm-nav-link i {
    font-size: 11.5px;
  }
}

@media (max-width: 1300px) {
  .mu-cm-all-cats-btn {
    padding: 11px 10px;
    font-size: 12px;
    gap: 5px;
  }
  .mu-cm-nav-link {
    padding: 11px 4px;
    font-size: 11.5px;
    gap: 3px;
  }
  .mu-cm-nav-link .mu-cm-sub-arrow {
    display: none;
  }
}

@media (max-width: 1120px) {
  .mu-cm-nav-link {
    padding: 10px 2.5px;
    font-size: 11px;
    gap: 2px;
  }
  .mu-cm-all-cats-btn {
    padding: 10px 8px;
    font-size: 11.5px;
  }
}

/* Yatay Menü Mega Dropdown */
.mu-cm-mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--mu-primary, #0A4182);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 40px rgba(10, 65, 130, 0.16);
  z-index: 1000;
  display: none;
  animation: muCmFadeIn 0.2s ease forwards;
}
.mu-cm-nav-item.has-mega:hover .mu-cm-mega-dropdown {
  display: block;
}
.mu-cm-mega-inner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 24px 30px;
  display: block;
}
.mu-cm-all-cats-wrapper-inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
}
.mu-cm-all-cats-promo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #f8fafc;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.mu-cm-mega-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mu-cm-mega-col {
  background: #ffffff;
}
.mu-cm-mega-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mu-primary, #0A4182);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #f1f5f9;
}
.mu-cm-mega-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mu-cm-mega-list li {
  margin-bottom: 6px;
}
.mu-cm-mega-list a {
  font-size: 13px;
  color: #475569;
  display: block;
  transition: color 0.15s ease, transform 0.15s ease;
}
.mu-cm-mega-list a:hover {
  color: var(--mu-primary, #0A4182);
  transform: translateX(4px);
}

/* Mega Menü Sağ Taraf: Canlı Destek & Güvenilir Ödeme Kartları (Cafemarkt Stili) */
.mu-cm-mega-promo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mu-cm-promo-card {
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  text-align: left;
}
.mu-cm-promo-card.support {
  background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%);
  border-color: #bae6fd;
}
.mu-cm-promo-card.payment {
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border-color: #fde68a;
}
.mu-cm-promo-icon {
  font-size: 24px;
  color: var(--mu-primary, #0A4182);
  margin-bottom: 8px;
}
.mu-cm-promo-card.payment .mu-cm-promo-icon {
  color: #d97706;
}
.mu-cm-promo-title {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 4px;
}
.mu-cm-promo-text {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.mu-cm-promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: var(--mu-primary, #0A4182);
  color: #ffffff !important;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}
.mu-cm-promo-btn:hover {
  background: var(--mu-primary-dark, #083366);
}
.mu-cm-promo-btn.secondary {
  background: #0284c7;
}
.mu-cm-promo-btn.secondary:hover {
  background: #0369a1;
}

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

/* --- 2. Marka Logoları Şeridi (Brand Carousel / Header Bar) --- */
.mu-cm-brand-carousel-wrapper {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.mu-cm-brand-carousel-wrapper::-webkit-scrollbar {
  height: 4px;
}
.mu-cm-brand-carousel-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.mu-cm-brand-carousel-track {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}
.mu-cm-brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  height: 42px;
  min-width: 95px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}
.mu-cm-brand-chip:hover {
  border-color: var(--mu-primary, #0A4182);
  box-shadow: 0 3px 10px rgba(10, 65, 130, 0.12);
  transform: translateY(-2px);
}
.mu-cm-brand-chip.is-active {
  border-color: var(--mu-primary, #0A4182);
  background: #eff6ff;
  box-shadow: 0 2px 8px rgba(10, 65, 130, 0.15);
}
.mu-cm-brand-chip img {
  max-height: 28px;
  max-width: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.mu-cm-brand-chip-text {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}

/* --- 3. Cafemarkt Stili Sol Kenar Çubuğu (Sidebar Filters) --- */
.mu-cm-sidebar-filters {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 85px;
}
.mu-cm-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--mu-primary, #0A4182);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.mu-cm-filter-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--mu-primary, #0A4182);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mu-cm-clear-all {
  font-size: 11.5px;
  font-weight: 600;
  color: #dc2626;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fee2e2;
  transition: background 0.15s ease;
}
.mu-cm-clear-all:hover {
  background: #fecaca;
  color: #b91c1c;
}
.mu-cm-filter-group {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.mu-cm-filter-group:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.mu-cm-filter-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mu-cm-filter-title i {
  color: var(--mu-primary, #0A4182);
  font-size: 13px;
}

/* Kategori Ağacı */
.mu-cm-current-cat-badge {
  background: #f0f7ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--mu-primary, #0A4182);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.mu-cm-current-cat-badge strong {
  color: var(--mu-primary, #0A4182);
}
.mu-cm-reset-cat-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 10px;
  text-decoration: none;
  padding: 3px 6px;
  border-radius: 4px;
  background: #f8fafc;
}
.mu-cm-reset-cat-link:hover {
  color: var(--mu-primary, #0A4182);
  background: #f1f5f9;
}
.mu-cm-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mu-cm-scrollable {
  max-height: 240px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}
.mu-cm-scrollable::-webkit-scrollbar {
  width: 4px;
}
.mu-cm-scrollable::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.mu-cm-cat-list li {
  margin-bottom: 3px;
}
.mu-cm-cat-list a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 5px;
  color: #334155;
  font-size: 12.5px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.mu-cm-cat-list a:hover {
  background: #f8fafc;
  color: var(--mu-primary, #0A4182);
}
.mu-cm-cat-list li.is-active a {
  background: #eff6ff;
  color: var(--mu-primary, #0A4182);
  font-weight: 700;
}
.mu-cm-cat-dash {
  color: #94a3b8;
  font-weight: 700;
}
.mu-cm-count {
  margin-left: auto;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}
.mu-cm-empty-msg {
  font-size: 12px;
  color: #94a3b8;
  padding: 6px 0;
}

/* Checkbox Seçenekleri (Marka, Stok, Kargo) */
.mu-cm-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mu-cm-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  color: #334155;
  transition: background 0.15s ease;
  position: relative;
  margin: 0;
}
.mu-cm-checkbox-item:hover {
  background: #f8fafc;
  color: var(--mu-primary, #0A4182);
}
.mu-cm-checkbox-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
  margin: 0;
}
.mu-cm-custom-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid #94a3b8;
  border-radius: 3px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.mu-cm-checkbox-item input:checked ~ .mu-cm-custom-checkbox {
  background: var(--mu-primary, #0A4182);
  border-color: var(--mu-primary, #0A4182);
}
.mu-cm-checkbox-item input:checked ~ .mu-cm-custom-checkbox::after {
  content: "✔";
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
}

/* Marka Arama Kutusu */
.mu-cm-search-wrap {
  position: relative;
  margin-bottom: 8px;
}
.mu-cm-search-input {
  width: 100%;
  padding: 7px 28px 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  background: #f8fafc;
  transition: all 0.2s ease;
}
.mu-cm-search-input:focus {
  background: #ffffff;
  border-color: var(--mu-primary, #0A4182);
  outline: none;
  box-shadow: 0 0 0 2px rgba(10, 65, 130, 0.1);
}
.mu-cm-search-icon {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #94a3b8;
  pointer-events: none;
}

/* Fiyat Aralığı */
.mu-cm-price-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.mu-cm-price-input {
  width: 82px;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 12px;
  text-align: center;
  background: #f8fafc;
}
.mu-cm-price-input:focus {
  background: #fff;
  border-color: var(--mu-primary, #0A4182);
  outline: none;
}
.mu-cm-price-separator {
  color: #94a3b8;
  font-weight: 600;
}
.mu-cm-price-btn {
  background: var(--mu-primary, #0A4182);
  color: #ffffff;
  border: none;
  padding: 7px 11px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.mu-cm-price-btn:hover {
  background: var(--mu-primary-dark, #083366);
}
.mu-cm-price-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mu-cm-chip {
  font-size: 11px;
  padding: 3px 7px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #475569;
  text-decoration: none;
  transition: all 0.15s ease;
}
.mu-cm-chip:hover {
  background: #e2e8f0;
  color: var(--mu-primary, #0A4182);
}

/* Teknik Özellikler */
.mu-cm-spec-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* Bilgilendirme Kutusu */
.mu-cm-sidebar-notice {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 11.5px;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  margin-top: 14px;
}
.mu-cm-sidebar-notice i {
  color: var(--mu-primary, #0A4182);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.mu-cm-sidebar-notice strong {
  color: #1e293b;
  display: block;
  margin-bottom: 2px;
}
.mu-cm-sidebar-notice p {
  margin: 0;
  line-height: 1.4;
}

/* --- 4. Sağ Ürün Listesi Kontrol Çubuğu (.mu-cm-catalog-toolbar) --- */
.mu-cm-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.mu-cm-toolbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mu-cm-toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mu-cm-product-counter {
  font-size: 13px;
  color: #64748b;
  white-space: nowrap;
}
.mu-cm-product-counter strong {
  color: var(--mu-primary, #0A4182);
}
.mu-cm-sort-box select,
.woocommerce-ordering select {
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12.5px;
  color: #334155;
  background: #ffffff;
  cursor: pointer;
  outline: none;
}
.mu-cm-inline-check {
  padding: 0;
  margin: 0;
}

/* --- 5. Mobil ve Tablet Uyumluluğu --- */
@media (max-width: 1024px) {
  .mu-cm-hero-grid {
    grid-template-columns: 1fr;
  }
  .mu-cm-hero-side {
    grid-template-columns: 1fr 1fr;
  }
  .mu-cm-nav-list {
    display: none; /* Mobilde hamburger drawer kullanılır */
  }
  .mu-cm-all-cats-wrapper {
    width: 100%;
  }
  .mu-cm-all-cats-btn {
    width: 100%;
    justify-content: space-between;
    border-radius: 6px;
  }
  .mu-cm-all-cats-dropdown {
    width: 100%;
    max-width: 100%;
  }
  .mu-cm-all-cats-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px) {
  .mu-cm-sidebar-filters {
    position: static;
    margin-bottom: 16px;
  }
  .mu-cm-catalog-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .mu-cm-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }
}


/* ==========================================================================
   CAFEMARKT.COM BİREBİR (1-E-1) ANA SAYFA VE FOOTER TASARIMI STİLLERİ
   Mutfak Uzmanı Kurumsal Renkleri (#0A4182, #083366, #0284C7, #f27a1a, #10b981)
   ========================================================================== */

.section-margin {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* 1. Hero Grid & Banners (mutfakyeri relation|257 & 258) */
.mu-cm-hero-grid {
  display: grid;
  grid-template-columns: 57.9% 1fr;
  gap: 16px;
  align-items: stretch;
}
.mu-cm-hero-slider-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  background: #f1f5f9;
  min-height: 414px;
}
.mu-cm-hero-slider-wrap .mu-hero-slider {
  height: 100%;
}
.mu-cm-hero-slider-wrap .slide {
  height: 100%;
  display: none;
}
.mu-cm-hero-slider-wrap .slide.is-active {
  display: block;
}
.mu-cm-hero-slider-wrap .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mu-cm-slide-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}
.mu-cm-slide-link .banner-content {
  display: none !important;
}
.mu-hero-dots {
  display: none !important;
}
.mu-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  font-size: 16px;
  color: #1e293b;
  z-index: 10;
  transition: all 0.2s ease;
}
.mu-hero-nav:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
}
.mu-hero-nav.prev {
  left: 14px;
}
.mu-hero-nav.next {
  right: 14px;
}

/* Sağ 3'lü Fırsat Bannerları: 2'li Kolon (Cambro + Menumaster) + 1 Dikey Kolon (Victorinox) */
.mu-cm-hero-side {
  display: grid;
  grid-template-columns: 55.5% 1fr;
  gap: 16px;
  align-items: stretch;
}
.mu-cm-hero-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.mu-cm-hero-card {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #eef2f6;
  text-decoration: none;
}
.mu-cm-hero-stack .mu-cm-hero-card {
  flex: 1;
}
.mu-cm-hero-card.tall {
  height: 100%;
}
.mu-cm-hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.mu-cm-hero-card:hover img {
  transform: scale(1.03);
}

/* 2. Popüler Kategoriler Barı (Cafemarkt relation|260) */
.mu-cm-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.mu-cm-section-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  position: relative;
  display: inline-block;
}
.mu-cm-section-title::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: #0A4182;
  border-radius: 2px;
  margin-top: 6px;
}
.mu-cm-see-all-link {
  font-size: 13px;
  font-weight: 700;
  color: #0A4182;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mu-cm-see-all-link:hover {
  text-decoration: underline;
}
.mu-cm-cats-track.mu-cm-cats-grid-20 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 24px 8px;
  justify-items: center;
  align-items: start;
  padding: 8px 0 20px;
  overflow: visible;
}
.mu-cm-cats-grid-20 .mu-cm-cat-circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 125px;
  min-width: 0;
  text-decoration: none;
  text-align: center;
  gap: 8px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.mu-cm-cats-grid-20 .mu-cm-cat-circle-icon {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
  padding: 12px;
}
.mu-cm-cats-grid-20 .mu-cm-cat-circle-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.mu-cm-cats-grid-20 .mu-cm-cat-circle-item:hover .mu-cm-cat-circle-icon {
  border-color: #0A4182;
  background: #f0f7ff;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(10, 65, 130, 0.16);
}
.mu-cm-cats-grid-20 .mu-cm-cat-circle-name {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 28px;
  transition: color 0.2s ease;
}
.mu-cm-cats-grid-20 .mu-cm-cat-circle-item:hover .mu-cm-cat-circle-name {
  color: #0A4182;
}

@media (max-width: 1200px) {
  .mu-cm-cats-track.mu-cm-cats-grid-20 {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px 10px;
  }
}
@media (max-width: 640px) {
  .mu-cm-cats-track.mu-cm-cats-grid-20 {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 6px;
  }
  .mu-cm-cats-grid-20 .mu-cm-cat-circle-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    padding: 10px;
  }
  .mu-cm-cats-grid-20 .mu-cm-cat-circle-icon img {
    width: 36px;
    height: 36px;
  }
  .mu-cm-cats-grid-20 .mu-cm-cat-circle-name {
    font-size: 10px;
    min-height: 26px;
  }
}
@media (max-width: 440px) {
  .mu-cm-cats-track.mu-cm-cats-grid-20 {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 4px;
  }
}

/* 3. Güven ve Avantaj Şeridi (Cafemarkt relation|273) */
.mu-cm-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}
.mu-cm-benefit-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mu-cm-benefit-icon {
  font-size: 28px;
  color: #0A4182;
  min-width: 38px;
}
.mu-cm-benefit-text .benefit-item__title {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
}
.mu-cm-benefit-text .benefit-item__text {
  display: block;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.35;
}

/* 4. 4'lü Promosyon Grid Bannerları (mutfakyeri relation|261) */
.gridbanner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gridbanner--item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
  background: #ffffff;
}
.gridbanner--item picture,
.gridbanner--item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 443 / 330;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.gridbanner--item:hover img {
  transform: scale(1.03);
}
.gridbanner--item__content {
  display: none !important;
}

/* 5. Sekmeli Ana Ürün Vitrini: "Editörün Seçimi" (Cafemarkt relation|262) */
.mu-cm-showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 22px;
  padding-bottom: 12px;
  flex-wrap: wrap;
  gap: 14px;
}
.mu-cm-showcase-header .block-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}
.showcase-tab-titles {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
}
.showcase-tab-item {
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.showcase-tab-item:hover {
  color: #0A4182;
  background: #f1f5f9;
}
.showcase-tab-item.active,
.snap-item.active .showcase-tab-item {
  background: #0A4182;
  color: #ffffff;
  border-color: #0A4182;
  box-shadow: 0 2px 8px rgba(10, 65, 130, 0.25);
}
.mu-cm-tab-content {
  display: none;
}
.mu-cm-tab-content.active {
  display: block;
  animation: muFadeIn 0.3s ease;
}
@keyframes muFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.mu-cm-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Cafemarkt Birebir Ürün Kartı (.product-item) */
.product-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.product-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}
.product-item--detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-image-wrap {
  position: relative;
  padding: 16px;
  background: #ffffff;
  text-align: center;
  overflow: hidden;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-image-wrap a.image-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
}
.product-image-wrap img.fit-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}
.product-item:hover .product-img-main {
  transform: scale(1.05);
}
.image-secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.product-item:hover .image-secondary {
  opacity: 1;
}

/* Ürün Rozetleri */
.product-item-badge {
  position: absolute;
  z-index: 3;
}
.discounted-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}
.product-item-badge__b-l .cafemarkt-selection {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #f27a1a;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 4px;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(242, 122, 26, 0.3);
}
.product-item-badge__b-r,
.product-item-badge__b-r .fast-shipping-badge,
.fast-shipping-badge {
  display: none !important;
}

.product-bottom {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
}
.product-item--brand a {
  font-size: 11.5px;
  font-weight: 700;
  color: #0284C7;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 4px;
  display: inline-block;
}
.product-title a {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 36px;
  margin: 0 0 6px;
}
.product-title a:hover {
  color: #0A4182;
}
.product-sku {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 4px;
}
.product-stars {
  font-size: 11.5px;
  color: #f59e0b;
  margin-bottom: 8px;
}
.product-stars .stars-val {
  color: #94a3b8;
  font-size: 11px;
  margin-left: 4px;
}
.product-price-wrapper {
  margin-top: auto;
  margin-bottom: 12px;
}
.product-price-not-discounted {
  font-size: 12px;
  color: #94a3b8;
  text-decoration: line-through;
  display: block;
}
.product-discounted-price {
  font-size: 16.5px;
  font-weight: 800;
  color: #0A4182;
}
.product-vat-info {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
  margin-left: 4px;
}
.btn-cafemarkt-cart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0A4182;
  color: #ffffff;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-cafemarkt-cart:hover {
  background: #083366;
  box-shadow: 0 4px 12px rgba(10, 65, 130, 0.25);
  color: #ffffff;
}
.btn-cafemarkt-cart.btn-inspect {
  background: #f1f5f9;
  color: #334155;
}
.btn-cafemarkt-cart.btn-inspect:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* 6. Görsel Kategori Bannerları (Cafemarkt relation|263) */
.cat-banner--link {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}
.cat-banner--link img {
  width: 100%;
  height: 188px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.cat-banner--link:hover img {
  transform: scale(1.05);
}
.cat-banner--item__content {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  padding: 10px 14px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.cat-banner--item__title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
.cat-banner--item__text {
  font-size: 11.5px;
  font-weight: 700;
  color: #0A4182;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 7. İmzalı Marka Vitrini (Cafemarkt relation|264) */
.brand-product-container {
  display: grid;
  grid-template-columns: 1.15fr 2.85fr;
  gap: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
}
.mu-cm-brand-showcase-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 10px;
}
.mu-cm-brand-showcase-badge {
  display: inline-block;
  width: fit-content;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.mu-cm-brand-showcase-logo img {
  max-height: 54px;
  width: auto;
  object-fit: contain;
  margin-bottom: 14px;
}
.mu-cm-brand-showcase-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
}
.mu-cm-brand-showcase-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 14px;
}
.mu-cm-brand-features {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 12px;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mu-cm-brand-features i {
  color: #10b981;
  margin-right: 6px;
}
.mu-cm-brand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0A4182;
  color: #ffffff;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transition: all 0.25s ease;
}
.mu-cm-brand-btn:hover {
  background: #083366;
  transform: translateX(3px);
  color: #ffffff;
}
.mu-cm-brand-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* 8. Hızlı Erişim Kategori Grid'i (Cafemarkt relation|269) */
.mu-cm-fast-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.mu-cm-fast-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.mu-cm-fast-card:hover {
  border-color: #0A4182;
  box-shadow: 0 4px 14px rgba(10, 65, 130, 0.1);
  transform: translateY(-2px);
}
.mu-cm-fast-icon {
  font-size: 20px;
  color: #0A4182;
  min-width: 24px;
}
.mu-cm-fast-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  flex-grow: 1;
}
.mu-cm-fast-arrow {
  font-size: 11px;
  color: #94a3b8;
}

/* 9. Yetkili Marka Logoları Bandı (Cafemarkt relation|270) */
.mu-cm-brandslider-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 14px;
  scrollbar-width: thin;
}
.mu-cm-brand-logo-card {
  min-width: 140px;
  height: 64px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.mu-cm-brand-logo-card:hover {
  border-color: #0A4182;
  box-shadow: 0 4px 12px rgba(10, 65, 130, 0.1);
  transform: translateY(-2px);
}
.mu-cm-brand-logo-card img {
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
}

/* 10. Kurumsal Proje ve Ortaklık Bannerları (Cafemarkt relation|272) */
.partnership-banner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  padding: 36px 30px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
}
.partnership-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.partnership-banner__content {
  position: relative;
  z-index: 2;
}
.partnership-banner__tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.partnership-banner__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 10px;
  color: #ffffff;
}
.partnership-banner__fullbody p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
  max-width: 480px;
}
.btn-partnership {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #0A4182;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s ease;
}
.btn-partnership:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  color: #083366;
}
.btn-partnership.btn-wa {
  background: #25d366;
  color: #ffffff;
}
.btn-partnership.btn-wa:hover {
  background: #20ba59;
  color: #ffffff;
}

/* 11. SEO & Bilgilendirme Metni */
.mu-cm-seo-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 26px 30px;
}
.mu-cm-seo-h1 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
}
.mu-cm-seo-expandable {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.mu-cm-seo-expandable.is-expanded {
  max-height: 600px;
  margin-top: 14px;
}
.mu-cm-seo-toggle-btn {
  background: none;
  border: none;
  color: #0A4182;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 0;
  margin-top: 6px;
  font-family: inherit;
}

/* 12. Cafemarkt Birebir Footer (Cafemarkt relation|276) */
.mu-cm-footer {
  margin-top: 36px;
  background: #0A4182;
  color: #cbd5e1;
}
.mu-cm-newsletter-strip {
  background: #083366;
  color: #ffffff;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mu-cm-newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.mu-cm-nl-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mu-cm-nl-icon {
  font-size: 28px;
  color: #38bdf8;
}
.mu-cm-nl-text strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}
.mu-cm-nl-text span {
  font-size: 12px;
  color: #94a3b8;
}
.mu-cm-nl-form-wrap {
  flex-grow: 1;
  max-width: 440px;
}
.mu-cm-nl-form {
  display: flex;
  gap: 6px;
}
.mu-cm-nl-form input {
  flex-grow: 1;
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 13px;
  outline: none;
}
.mu-cm-nl-form input::placeholder {
  color: #cbd5e1;
}
.mu-cm-nl-btn {
  background: #0A4182;
  color: #ffffff;
  border: 1px solid #38bdf8;
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mu-cm-nl-btn:hover {
  background: #0284C7;
}
.mu-cm-nl-wa-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid #25d366;
  padding: 6px 14px;
  border-radius: 8px;
  transition: background 0.2s;
}
.mu-cm-nl-wa-link:hover {
  background: rgba(37, 211, 102, 0.3);
}
.mu-cm-nl-wa-link i {
  font-size: 24px;
  color: #25d366;
}
.mu-cm-nl-wa-link small {
  display: block;
  font-size: 10px;
  color: #cbd5e1;
}
.mu-cm-nl-wa-link strong {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.mu-cm-footer-main {
  padding: 48px 0 40px;
}
.mu-cm-footer-col-brand .footer-desc {
  font-size: 12px;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 14px 0 16px;
}
.mu-cm-footer-col-brand .footer-desc strong {
  color: #ffffff;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.mu-cm-footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  color: #cbd5e1;
  margin-bottom: 16px;
}
.mu-cm-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.mu-cm-contact-row i {
  color: #38bdf8;
  margin-top: 3px;
  min-width: 14px;
}
.mu-cm-contact-row a {
  color: #cbd5e1;
  text-decoration: none;
}
.mu-cm-contact-row a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.mu-cm-social-links {
  display: flex;
  gap: 10px;
}
.mu-cm-social-links a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.2s;
}
.mu-cm-social-links a:hover {
  background: #38bdf8;
  color: #0A4182;
  transform: translateY(-2px);
}

.mu-cm-footer-main .menu-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
  position: relative;
  padding-bottom: 8px;
}
.mu-cm-footer-main .menu-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 26px;
  height: 3px;
  background: #38bdf8;
  border-radius: 2px;
}
.mu-cm-footer-main .menu-children {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.mu-cm-footer-main .menu-link {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.2s;
}
.mu-cm-footer-main .menu-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.mu-cm-sub-footer {
  background: #062347;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: #94a3b8;
}
.mu-cm-sub-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.mu-cm-payment-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mu-cm-security-chip {
  background: rgba(255, 255, 255, 0.1);
  color: #38bdf8;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mu-cm-pay-icon {
  font-size: 22px;
  color: #ffffff;
}
.mu-cm-pay-icon-text {
  font-size: 11px;
  font-weight: 800;
  background: #ffffff;
  color: #0A4182;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

/* --- Responsive Mobil Uyumluluk --- */
@media (max-width: 1024px) {
  .mu-cm-hero-grid {
    grid-template-columns: 1fr;
  }
  .mu-cm-hero-side-wrap {
    flex-direction: row;
  }
  .gridbanner {
    grid-template-columns: repeat(2, 1fr);
  }
  .mu-cm-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .brand-product-container {
    grid-template-columns: 1fr;
  }
  .mu-cm-brand-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mu-cm-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mu-cm-fast-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .mu-cm-hero-side-wrap {
    flex-direction: column;
  }
  .mu-cm-hero-slider-wrap {
    min-height: 280px;
  }
  .mu-cm-slide-link .banner-content {
    bottom: 20px;
    left: 20px;
  }
  .mu-cm-slide-link .banner-content__title {
    font-size: 20px;
  }
  .gridbanner {
    grid-template-columns: 1fr;
  }
  .mu-cm-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .mu-cm-brand-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .mu-cm-benefits-grid {
    grid-template-columns: 1fr;
  }
  .mu-cm-fast-grid {
    grid-template-columns: 1fr;
  }
  .mu-cm-footer-col-brand {
    margin-bottom: 24px;
  }
  .mu-cm-sub-footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .mu-cm-products-grid,
  .mu-cm-brand-products-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   CAFEMARKT 4 KOLON YAN YANA FOOTER (İletişim, Bilgi, Yardım, Kategoriler)
   ========================================================================== */
.mu-cm-footer-grid-4col {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr !important;
  gap: 32px !important;
  align-items: start !important;
  width: 100% !important;
}

.mu-cm-footer-title {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  margin: 0 0 16px 0 !important;
  position: relative !important;
  padding-bottom: 8px !important;
  display: block !important;
}
.mu-cm-footer-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 28px !important;
  height: 3px !important;
  background: #38bdf8 !important;
  border-radius: 2px !important;
}

.mu-cm-links-list {
  list-style: none !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}
.mu-cm-links-list li {
  margin-bottom: 6px !important;
}
.mu-cm-links-list li a {
  color: #cbd5e1 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}
.mu-cm-links-list li a:hover {
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

.mu-cm-contact-list a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}
.mu-cm-contact-list a:hover {
  color: #38bdf8 !important;
  text-decoration: underline !important;
}

@media (max-width: 1024px) {
  .mu-cm-footer-grid-4col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }
}
@media (max-width: 640px) {
  .mu-cm-footer-grid-4col {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}


/* ==========================================================================
   SİTE GENELİ KUSURSUZ OKUNABİLİRLİK VE YÜKSEK KONTRASTLI BUTON DÜZENLEMELERİ
   (Tüm karanlık butonlarda kristal netliğinde #ffffff beyaz yazı garantisi)
   ========================================================================== */

/* 1. Aksiyon Butonlarında Beyaz ve Belirgin Yazı (Miktar & Sil Butonları Hariç Tutulmuştur) */
.button:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link),
a.button:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link),
.btn:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link),
a.btn:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link),
input[type="submit"],
input[type="button"],
.wp-element-button:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link),
.wp-block-button__link,
.wc-block-components-button:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.btn-cafemarkt-cart,
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
a.checkout-button,
#place_order,
.mu-cm-price-btn,
.mu-cm-nl-btn {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.button:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link) *,
a.button:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link) *,
.btn:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link) *,
a.btn:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link) *,
.wp-block-button__link *,
.wc-block-cart__submit-button *,
.wc-block-components-checkout-place-order-button *,
.btn-cafemarkt-cart *,
.add_to_cart_button *,
.single_add_to_cart_button *,
.checkout-button *,
a.checkout-button *,
#place_order * {
  color: #ffffff !important;
}

/* Hover durumları */
.button:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):hover,
a.button:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):hover,
.btn:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):hover,
a.btn:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):hover,
.wp-block-button__link:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.btn-cafemarkt-cart:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover {
  color: #ffffff !important;
}

/* 2. Cafemarkt ve WooCommerce Ürün Kartlarındaki "SEPETE EKLE" Butonu */
.btn-cafemarkt-cart,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.mu-product-card .button,
.mu-product-card a.button,
.product-action-wrap .button,
.product-action-wrap a.button,
.product-action-wrap .btn-cafemarkt-cart {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #0A4182 !important;
  background-color: #0A4182 !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 6px rgba(10, 65, 130, 0.2) !important;
  line-height: 1.4 !important;
}

.btn-cafemarkt-cart:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.mu-product-card .button:hover,
.mu-product-card a.button:hover,
.product-action-wrap .button:hover,
.product-action-wrap a.button:hover,
.product-action-wrap .btn-cafemarkt-cart:hover {
  background: #083366 !important;
  background-color: #083366 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(10, 65, 130, 0.35) !important;
  transform: translateY(-1px) !important;
}

.btn-cafemarkt-cart span,
.btn-cafemarkt-cart i,
.woocommerce ul.products li.product .button span,
.woocommerce ul.products li.product .button i,
.mu-product-card .button span,
.mu-product-card .button i {
  color: #ffffff !important;
}

/* "Ürünü İncele" Butonu */
.btn-cafemarkt-cart.btn-inspect {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
.btn-cafemarkt-cart.btn-inspect span,
.btn-cafemarkt-cart.btn-inspect i {
  color: #0f172a !important;
}
.btn-cafemarkt-cart.btn-inspect:hover {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  color: #0A4182 !important;
}
.btn-cafemarkt-cart.btn-inspect:hover span,
.btn-cafemarkt-cart.btn-inspect:hover i {
  color: #0A4182 !important;
}

/* 3. AJAX Sonrası Çıkan "Sepetim" Bağlantısı (.added_to_cart) */
a.added_to_cart,
.woocommerce a.added_to_cart,
a.added_to_cart.wc-forward {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding: 8px 12px !important;
  background: #ecfdf5 !important;
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1.5px solid #10b981 !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}
a.added_to_cart:hover,
.woocommerce a.added_to_cart:hover,
a.added_to_cart.wc-forward:hover {
  background: #10b981 !important;
  background-color: #10b981 !important;
  color: #ffffff !important;
}
a.added_to_cart::before {
  content: "✓ " !important;
  font-weight: 900 !important;
}

/* ==========================================================================
   SEPET SAYFASI: ÜRÜN ADEDİ ARTTIR / AZALT (+ / -) VE SİL BUTONLARI
   (Gutenberg Blok & Klasik WooCommerce Sepet Tablosu)
   ========================================================================== */

/* 1. Miktar Seçici Kutusu (Quantity Selector Wrapper) */
.wc-block-components-quantity-selector,
.woocommerce .quantity,
.woocommerce-cart table.cart td.product-quantity .quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: 1.5px solid #0A4182 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  height: 38px !important;
  min-height: 38px !important;
  max-width: 120px !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 4px rgba(10, 65, 130, 0.12) !important;
  vertical-align: middle !important;
}

/* 2. Azalt (-) ve Arttır (+) Butonları */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__button--minus,
.wc-block-components-quantity-selector__button--plus,
.quantity .plus,
.quantity .minus {
  width: 36px !important;
  min-width: 36px !important;
  height: 100% !important;
  min-height: 36px !important;
  background: #f0f7ff !important;
  background-color: #f0f7ff !important;
  color: #0A4182 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button *,
.wc-block-components-quantity-selector__button--minus *,
.wc-block-components-quantity-selector__button--plus *,
.quantity .plus *,
.quantity .minus * {
  color: #0A4182 !important;
  fill: #0A4182 !important;
}

/* Arttır / Azalt Butonları Hover Durumu */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover,
.wc-block-components-quantity-selector__button--minus:hover,
.wc-block-components-quantity-selector__button--plus:hover,
.quantity .plus:hover,
.quantity .minus:hover {
  background: #0A4182 !important;
  background-color: #0A4182 !important;
  color: #ffffff !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover *,
.wc-block-components-quantity-selector__button--minus:hover *,
.wc-block-components-quantity-selector__button--plus:hover *,
.quantity .plus:hover *,
.quantity .minus:hover * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* 3. Miktar Rakamı Giriş Kutusu (Adet) */
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__input,
.woocommerce .quantity input.qty,
.woocommerce-cart table.cart td.product-quantity input.qty {
  width: 44px !important;
  min-width: 44px !important;
  height: 100% !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: none !important;
  border-left: 1.5px solid #e2e8f0 !important;
  border-right: 1.5px solid #e2e8f0 !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 4. Sepetten Ürünü SİL / KALDIR Butonu (.wc-block-cart-item__remove-link & a.remove) */
.wc-block-cart-item__remove-link,
button.wc-block-cart-item__remove-link,
.wc-block-cart-items__row .wc-block-cart-item__remove-link,
table.wc-block-cart-items .wc-block-cart-item__remove-link,
.woocommerce-cart table.cart .product-remove a.remove,
a.remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #fee2e2 !important;
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
  border: 1.5px solid #fca5a5 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  margin-top: 6px !important;
  margin-left: 8px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  height: 36px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.wc-block-cart-item__remove-link *,
button.wc-block-cart-item__remove-link *,
.woocommerce-cart table.cart .product-remove a.remove *,
a.remove * {
  color: #dc2626 !important;
  fill: #dc2626 !important;
}

.wc-block-cart-item__remove-link svg,
button.wc-block-cart-item__remove-link svg {
  width: 15px !important;
  height: 15px !important;
  fill: #dc2626 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 'Sil' Yazısı Etiketi */
button.wc-block-cart-item__remove-link::after {
  content: " Sil" !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: inherit !important;
}

/* Sil Butonuna Hover */
.wc-block-cart-item__remove-link:hover,
button.wc-block-cart-item__remove-link:hover,
.wc-block-cart-items__row .wc-block-cart-item__remove-link:hover,
.woocommerce-cart table.cart .product-remove a.remove:hover,
a.remove:hover {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
}

.wc-block-cart-item__remove-link:hover *,
button.wc-block-cart-item__remove-link:hover *,
.wc-block-cart-item__remove-link:hover svg,
button.wc-block-cart-item__remove-link:hover svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Klasik Sepet Tablosundaki 'X' sil butonu */
.woocommerce-cart table.cart .product-remove a.remove {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 26px !important;
}

/* 5. Sepet & Ödeme Sayfaları: "Ödemeye git" Butonu (Gutenberg Blok & Klasik WooCommerce) */
.wp-block-woocommerce-proceed-to-checkout-block,
.wc-block-cart__submit {
  margin-top: 20px !important;
  width: 100% !important;
}

.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link,
.wc-block-cart__submit-button,
.wc-block-cart__submit-button a,
.wc-block-components-checkout-place-order-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.checkout-button,
a.checkout-button.button.alt {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  background: #0A4182 !important;
  background-color: #0A4182 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
  border: none !important;
  padding: 14px 24px !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(10, 65, 130, 0.3) !important;
  transition: all 0.25s ease !important;
}

.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce a.checkout-button:hover,
a.checkout-button.button.alt:hover {
  background: #083366 !important;
  background-color: #083366 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(10, 65, 130, 0.45) !important;
  transform: translateY(-2px) !important;
}

.wp-block-woocommerce-proceed-to-checkout-block *,
.wc-block-cart__submit-button *,
.wc-block-components-checkout-place-order-button *,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button * {
  color: #ffffff !important;
}

/* 6. Ödeme Sayfası "Siparişi Onayla" Butonu (Yeşil Güvenilir Renk) */
#place_order,
.wc-block-components-checkout-place-order-button {
  background: #10b981 !important;
  background-color: #10b981 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  min-height: 52px !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important;
}
#place_order:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: #059669 !important;
  background-color: #059669 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* 7. Sepet & Ödeme Sayfası Metinlerinin ve Başlıklarının Belirginliği */
.wc-block-cart__totals-title,
.cart_totals h2,
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item {
  color: #0f172a !important;
}
.wc-block-components-totals-item__label {
  color: #334155 !important;
  font-weight: 600 !important;
}
.wc-block-components-totals-item__value {
  color: #0f172a !important;
  font-weight: 700 !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.order-total strong .woocommerce-Price-amount {
  color: #0A4182 !important;
  font-weight: 800 !important;
  font-size: 20px !important;
}

/* Kupon ekle linki ve butonu */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon-link {
  color: #0A4182 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}
.wc-block-components-totals-coupon__form button,
.woocommerce-cart table.cart td.actions .coupon input[type="submit"],
.woocommerce-cart table.cart td.actions .coupon button {
  background: #0A4182 !important;
  background-color: #0A4182 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
}

/* 8. Tek Ürün Sayfası Sepete Ekle Butonu */
.single-product .single_add_to_cart_button,
.woocommerce div.product form.cart .button {
  background: #0A4182 !important;
  background-color: #0A4182 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 12px 28px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(10, 65, 130, 0.25) !important;
}
.single-product .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover {
  background: #083366 !important;
  background-color: #083366 !important;
  color: #ffffff !important;
}
.single-product .single_add_to_cart_button *,
.woocommerce div.product form.cart .button * {
  color: #ffffff !important;
}

/* 9. Fiyat Filtreleme ve Arama Butonları */
.mu-cm-price-btn {
  background: #0A4182 !important;
  background-color: #0A4182 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.mu-cm-price-btn:hover {
  background: #083366 !important;
  background-color: #083366 !important;
  color: #ffffff !important;
}
.mu-cm-nl-btn {
  background: #0284C7 !important;
  background-color: #0284C7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.mu-cm-nl-btn:hover {
  background: #0369a1 !important;
  background-color: #0369a1 !important;
  color: #ffffff !important;
}


/* ==========================================================================
   10. ANASAYFA ÜRÜN VİTRİNLERİ (SÜPER FİYAT & PİZZA EKİPMANLARI - EKRAN 2 & 4)
   ========================================================================== */
.mu-showcase-section {
  margin-bottom: 24px;
}
.mu-image-products {
  display: flex !important;
  align-items: stretch !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  position: relative !important;
}
.mu-image-products.reverse {
  flex-direction: row-reverse !important;
}
.mu-image-products .mu-ip-img {
  flex: 0 0 326px !important;
  width: 326px !important;
  max-width: 326px !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #f8fafc;
}
.mu-image-products .mu-ip-img a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.mu-image-products .mu-ip-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.mu-image-products .mu-ip-products {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.mu-image-products .mu-carousel {
  width: 100% !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mu-image-products .mu-carousel-track {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  gap: 0 !important;
}
.mu-image-products .mu-carousel-track::-webkit-scrollbar {
  display: none !important;
}
.mu-image-products .mu-product-card {
  flex: 0 0 calc(100% / 6) !important;
  max-width: calc(100% / 6) !important;
  min-width: calc(100% / 6) !important;
  box-sizing: border-box !important;
  padding: 16px 8px 14px !important;
  background: #ffffff !important;
  border: none !important;
  border-right: 1px solid #f1f5f9 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  transition: background 0.2s ease !important;
  transform: none !important;
}
.mu-image-products .mu-product-card:hover {
  background: #fafafa !important;
  transform: none !important;
  box-shadow: none !important;
}
.mu-image-products .mu-thumb {
  width: 100% !important;
  height: 135px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 10px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.mu-image-products .mu-thumb img {
  max-width: 120px !important;
  max-height: 120px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}
.mu-image-products .mu-product-card:hover .mu-thumb img {
  transform: scale(1.05) !important;
}
.mu-image-products .mu-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin: 0 0 4px !important;
  text-align: center !important;
  min-height: 30px !important;
  height: 30px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  padding: 0 4px !important;
}
.mu-image-products .mu-title a {
  color: inherit !important;
  text-decoration: none !important;
}
.mu-image-products .mu-title a:hover {
  color: #0A4182 !important;
}
.mu-image-products .mu-sku {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
  text-align: center !important;
  margin-bottom: 6px !important;
  min-height: 13px !important;
}
.mu-image-products .mu-price {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  min-height: 36px !important;
  padding: 0 !important;
}
.mu-image-products .mu-price del {
  font-size: 11px !important;
  color: #000000 !important;
  font-weight: 700 !important;
  text-decoration: line-through !important;
  opacity: 0.85 !important;
  display: inline-block !important;
}
.mu-image-products .mu-price del .amount {
  color: #000000 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.mu-image-products .mu-price ins {
  font-size: 13.5px !important;
  color: #dc2626 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: inline-block !important;
}
.mu-image-products .mu-price ins .amount {
  color: #dc2626 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}
.mu-image-products .mu-price > .amount,
.mu-image-products .mu-price > span:not(del):not(ins) {
  font-size: 13.5px !important;
  color: #dc2626 !important;
  font-weight: 800 !important;
}
.mu-image-products .mu-carousel-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: #1e293b !important;
  z-index: 5 !important;
  transition: all 0.2s ease !important;
}
.mu-image-products .mu-carousel-btn:hover {
  background: #0A4182 !important;
  color: #ffffff !important;
  border-color: #0A4182 !important;
}
.mu-image-products .mu-carousel-btn.prev {
  left: 8px !important;
}
.mu-image-products .mu-carousel-btn.next {
  right: 8px !important;
}
.mu-image-products .mu-carousel-btn:disabled {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 1280px) {
  .mu-image-products .mu-product-card {
    flex: 0 0 calc(100% / 5) !important;
    max-width: calc(100% / 5) !important;
    min-width: calc(100% / 5) !important;
  }
}
@media (max-width: 1024px) {
  .mu-image-products .mu-ip-img {
    flex: 0 0 240px !important;
    width: 240px !important;
    max-width: 240px !important;
  }
  .mu-image-products .mu-product-card {
    flex: 0 0 calc(100% / 4) !important;
    max-width: calc(100% / 4) !important;
    min-width: calc(100% / 4) !important;
  }
}
@media (max-width: 768px) {
  .mu-image-products,
  .mu-image-products.reverse {
    flex-direction: column !important;
  }
  .mu-image-products .mu-ip-img {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 180px !important;
  }
  .mu-image-products .mu-product-card {
    flex: 0 0 calc(100% / 2.5) !important;
    max-width: calc(100% / 2.5) !important;
    min-width: calc(100% / 2.5) !important;
  }
}
@media (max-width: 480px) {
  .mu-image-products .mu-product-card {
    flex: 0 0 calc(100% / 2) !important;
    max-width: calc(100% / 2) !important;
    min-width: calc(100% / 2) !important;
  }
}