/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


.category-page-row {
  padding-top: 18px!important;
}


/* Kategori hero: breadcrumb ÜZERİNDE ve tam genişlik */
.yp-cat-hero{
  display:block;
  height:30vw;                 /* İstediğiniz yükseklik */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  margin:0;              /* Altına biraz boşluk */
  border-radius:0;
  background-position-y: 60%!important;
}

/* Full-bleed: container içindeyken tüm sayfaya taşır */
.yp-cat-hero--full{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

/* Flatsome bazı düzenlerde breadcrumb’ı yukarı çekebiliyor; normalize edelim */
body.tax-product_cat .woocommerce-breadcrumb{
  position:static;
  float:none;
  clear:both;
  margin-top:0;
  padding-top:0;
}

.nav-pagination > li > a, .nav-pagination > li > span {
    border: none!important;
    height: 2.25em!important;
    line-height: 2.25em!important;
    border-radius: 12px 12px 2px 12px !important;
}

/*  .box-image { */
/*    border-radius: 24px 24px 4px 24px!important; */
/*    border: 1px solid #e6e6e6!important; */
/* } */
.box-image {
  border-bottom: 1px solid #80808036;
}
.uppercase{
    text-transform: none!important;
}

.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
  border: 1px solid #e6e6e6!important;
}


/* ====================== urun fotograflari icin ====================== */
/* === ÜRÜN LİSTESİNDE GÖRSELİ CONTAIN GÖSTER, ARKAPLAN BEYAZ === */
body.archive .woocommerce ul.products li.product .box-image,
body.tax-product_cat .woocommerce ul.products li.product .box-image {
  background-color: #fff !important;     /* kenarlar beyaz görünür */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  aspect-ratio: 1 / 1 !important;        /* kare çerçeveyi koru */
  overflow: hidden;
}

/* İçteki kapsayıcıyı sıfırla */
body.archive .woocommerce ul.products li.product .box-image > a,
body.archive .woocommerce ul.products li.product .box-image > div {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

 ul.products li.product .box-image img,
ul.products li.product .box-image img,{
  position: static !important;           /* absolute’tan kurtul */
  object-fit: contain !important;        /* cover yerine contain */
  object-position: center center !important;
  width: auto !important;                /* oranına göre genişlik */
  height: 100% !important;               /* kutu yüksekliği kadar */
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  background-color: #fff !important;     /* kenarlar beyaz gözüksün */
}

/* Görselin tam kareye taşmaması için emin olalım */
body.archive .woocommerce ul.products li.product .box-image img.size-yp_catalog_contain {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.has-equal-box-heights .box-image img {
      width: auto !important;   
}


/* ====================== ÜRÜNLER – Ortak Görsel Stil ====================== */

/* Tab bar (desktop & klon) */
li.mm-urunler .tabbed-content .nav{
  display:flex !important; justify-content:center; gap:22px;
  padding:0 10px 12px; border-bottom:none !important; background:transparent;
}
li.mm-urunler .tabbed-content .nav>li>a{
  color:#5a6a7a !important; padding:6px 14px; line-height:1.2; text-decoration:none;
  transition:color .15s ease,border-color .15s ease; border-bottom:2px solid transparent;
}
li.mm-urunler .tabbed-content .nav>li>a:hover{ color:#2b3640 !important; }
li.mm-urunler .tabbed-content .nav>li.active>a,
li.mm-urunler .tabbed-content .nav>li>a.active,
li.mm-urunler .tabbed-content .nav>li.current>a{
  color:#0f172a !important; border-bottom-color:#f6a800;
}

/* Grid kapsayıcı */
li.mm-urunler .mm-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  column-gap:15px; row-gap:18px; padding:12px 10px 18px; text-align:center;
}

/* Tek öğe */
li.mm-urunler .mm-item{ display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; color:inherit; }

/* Kare kutular (desktop – normal grid) */
li.mm-urunler .mm-grid:not(.pill) .mm-img{
  width:108px; height:108px; border-radius:12px 12px 2px 12px; object-fit:cover; display:flex;
  box-shadow:0 1px 6px rgba(0,0,0,.08); transition:transform .18s ease, box-shadow .18s ease; overflow:hidden;
  will-change:auto !important; /* will-change uyarısını sustur */
   align-items:center;           /* Dikey ortalama */
  justify-content:center;       /* Yatay ortalama */
  text-align:center;   
}
li.mm-urunler .mm-item:hover .mm-img{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12); }

/* EBAT (pill) – yatay */
li.mm-urunler .mm-grid.pill .mm-img{ width:220px; height:130px; border-radius:12px 12px 2px 12px; overflow:hidden; }

/* Başlık */
li.mm-urunler .mm-cap{ font-weight:600; font-size:13px; letter-spacing:.3px; color:inherit; }

/* CTA alanı */
li.mm-urunler .mm-cta{ display:flex; justify-content:center; gap:16px; margin-top:14px; width: 100%;}

li.mm-urunler .mm-cta .button:hover{color: #333!important;}

.pull-left {
  padding: 15px 0!important;
}


.button{
border-radius:8px 8px 2px 8px!important; 
}

.search-field.mb-0 {
    border-radius: 12px 0 0 12px!important;
}

/* ====================== GENEL ====================== */

/* Mini hesaplayıcı: sadece kendi input ve button'larını hedefle */
.seramik-mini-calc input,
.seramik-mini-calc button {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 1px !important;
  border-bottom-left-radius: 10px !important;
}
.seramik-mini-calc button {
  min-height: 36px!important;
  height:36px;
  line-height:20px;
}

.header-main .nav > li > a { font-weight: bold; }
.header-main .nav > li > a > i.icon-angle-down { display: none; }

.icon-copy{
  display:inline-block;width:1em;height:1em;background-color:currentColor;
  -webkit-mask:url('/wp-content/uploads/link-copy.svg') no-repeat center;
  -webkit-mask-size:contain;mask:url('/wp-content/uploads/link-copy.svg') no-repeat center;mask-size:contain;
}




/* Responsive: Tablet’te ~3’lü, telefonda ~2’li sıkışma */
@media (max-width:900px){
  li.mm-urunler .mm-grid:not(.pill) .mm-img{ width:30%; height:auto; aspect-ratio:1/1; }
}
@media (max-width:500px){
  li.mm-urunler .mm-grid:not(.pill) .mm-img{ width:45%; height:auto; aspect-ratio:1/1; }
}

/* UX Builder bazen <br> bırakıyor — grid’i bozmasın */
li.mm-urunler .mm-grid br{ display:none; }

/* ====================== Mobil Off-Canvas Panel (Yol B) ====================== */

.mfp-content {
    max-width: none!important;
}


/* Paneli full-bleed yap */
.off-canvas .nav-vertical li.mm-urunler > .mm-mobile-panel{
  width:100vw !important; 
  max-width:none !important;
  margin-left:none!important; 
  margin-right:none !important;
  box-sizing:border-box; 
  background:#fff; 
  padding-top:14px; 
}

/* Tema üretmişse sub-menu gizle */
.off-canvas .nav-vertical li.mm-urunler > .sub-menu{ display:none !important; }

/* Mobil sekme barı */
.off-canvas .mm-mobile-panel .tabbed-content .nav{
  display:flex !important; flex-wrap:nowrap; justify-content:center; gap:14px;
  padding:0 0 8px; margin:0; border-bottom:none !important; overflow-x:auto;
}
.off-canvas .mm-mobile-panel .tabbed-content .nav > li.active > a,
.off-canvas .mm-mobile-panel .tabbed-content .nav > li.current > a{
  border-bottom-color:transparent !important;
}
.off-canvas .mm-mobile-panel .tabbed-content .nav > li > a{
  color:#5a6a7a !important; padding:6px 10px; line-height:1.2; border-bottom:2px solid transparent; text-decoration:none;
  transition:color .15s ease, border-color .15s ease;
}
.off-canvas .mm-mobile-panel .tabbed-content .nav > li > a:hover{ color:#2b3640 !important; }
.off-canvas .mm-mobile-panel .tabbed-content .nav > li > a.active{ color:#0f172a !important; border-bottom-color:#f6a800 !important; }

/* Mobil grid (desktop ile aynı görsel tasarım) */
.off-canvas .mm-mobile-panel .mm-grid{
  display:flex; flex-wrap:wrap; justify-content:center; column-gap:15px; row-gap:18px; padding: 12px 20px 12px 20px; text-align:center;
}
.off-canvas .mm-mobile-panel .mm-grid br{ display:none; }
.off-canvas .mm-mobile-panel .mm-item{ display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; color:#2b3640; }

/* Kare kutular (mobil) */
.off-canvas .mm-mobile-panel .mm-grid:not(.pill) .mm-img{
  width:108px; height:108px; border-radius:28px 28px 2px 28px; object-fit:cover; display:flex;
  box-shadow:0 1px 6px rgba(0,0,0,.08); overflow:hidden; will-change:auto !important;
}
.off-canvas .mm-mobile-panel .mm-item:hover .mm-img{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12); }

/* EBAT (pill) – mobil */
.off-canvas .mm-mobile-panel .mm-grid.pill .mm-img{ width:220px; height:130px; border-radius:12px 12px 2px 12px; }

/* Başlık/CTA */
.off-canvas .mm-mobile-panel .mm-cap{ font-weight:600; font-size:13px; letter-spacing:.3px; color:inherit; }
.off-canvas .mm-mobile-panel .mm-cta{ display:flex; justify-content:center; gap:16px; margin-top:16px; padding-bottom:10px; }

/* Çok dar telefonlarda 2’li */
@media (max-width:360px){
  .off-canvas .mm-mobile-panel .mm-grid:not(.pill) .mm-img{ width:45vw; height:45vw; }
}

/* Ürünler mobil tetik oku gizle (opsiyonel) */
.header-main .nav > li > a > i.icon-angle-down { display:none; }

/* Class-temelli aç/kapa garantisi */
.off-canvas .nav-vertical li.mm-urunler > .mm-mobile-panel{ display:none; }
.off-canvas .nav-vertical li.mm-urunler.mm-open > .mm-mobile-panel{ display:block; }

/* mobile-only alanı boş bırakıldı */
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
}

/* İç mini oran alanı — her zaman kutu içine sığan kare “tuval” */
.mm-ratio-wrap{
  width:56%;              /* kutu genişliğinin %56'sı kadar kare alan */
  aspect-ratio:1/1;       /* kare */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Asıl oran kutusu: sabit border kalınlığı */
.mm-ratio-box{
  box-sizing:border-box;
  border:2px solid rgba(0,0,0,.38);
  border-radius:0;
  aspect-ratio: var(--w) / var(--h);
}

/* Yönüne göre genişliğe ya da yüksekliğe oturt */
.mm-ratio-wrap.landscape .mm-ratio-box{ width:100%; height:auto; }
.mm-ratio-wrap.portrait  .mm-ratio-box{ height:100%; width:auto; }
.mm-ratio-wrap.square    .mm-ratio-box{ width:100%; height:100%; }


/* ========== Footer Menu ========== */

.footer-2 {
  background-color: #fcfcfc;
  /* Üstte yarı saydam katman + altta görsel */
  background-image:
    linear-gradient(rgba(252,252,252,0.9), rgba(252,252,252,0.7)),  /* 0.6 = %60 örtü -> görsel ~%40 görünür */
    url('https://etili.site/wp-content/uploads/logo_footer_big.png') !important;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 156px auto;  /* katman tüm alanı kaplar, görsel 250px */
  background-position: 0 0, 10px center;   /* katman 0,0; görsel soldan 10px ve ortalı */
  background-blend-mode: luminosity;
}

.footer-2 .social-icons {
    font-size: 11px!important;
}

.mm-brand-stack__social {
    text-align: center!important;
}



/* Ölçek ve boşluk değişkenleri */
.mm-list,
.mm-list-wrap { --mm-li-gap:.6rem; --mm-title-size:1rem; --mm-li-size:1rem; --mm-li-size-lg:1.125rem; }

.mm-list { list-style:none; margin:0; padding:0; }
.mm-list__title {
  margin:0 0 .8rem;
  font-weight:700;
  font-size:var(--mm-title-size);
  line-height:1.2;
}

.mm-list__item { margin:0; }
.mm-list--spaced .mm-list__item + .mm-list__item { margin-top:var(--mm-li-gap); }

/* Satır düzeni */
.mm-list__link {
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  text-decoration:none;
  /* renkler kalıtılır; hover rengine karışmıyoruz */
}

/* Metin boyutları */
.mm-list__text { font-size:.8em; line-height: 24px!important; }
.mm-list--lg .mm-list__text { font-size:var(--mm-li-size-lg); }

/* İkon/ufak imaj alanı */
.mm-list__icon {
  width:1.1em; height:1.1em;
  flex:0 0 auto;
  display:inline-block;
  object-fit:contain;
  /* SVG ise currentColor ile kendini boyamak isteyenler için (opsiyonel; renk miras alır) */
  fill:currentColor;
}

/* İkon font kullanırsanız: <i> veya <span> için yardımcı sınıf */
.mm-list__icon.i {
  width:1.1em; height:1.1em; line-height:1; display:inline-flex; align-items:center; justify-content:center;
}

/* Küçük ekran uyumu (gerekirse) */
@media (max-width: 480px) {
  .mm-list--lg .mm-list__text { font-size:1.0625rem; }
}