/*
 Theme Name:   Industrium Child
 Description:  Industrium Child Theme
 Theme URI:	   https://demo.artureanec.com/themes/industrium
 Author:       Artureanec
 Author URI:   https://demo.artureanec.com
 Template:     industrium
 Version:      1.0.0
 License: GNU  General Public License version 3.0
 License URI:  http://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  industrium-child
*/

/* =Theme customization starts here
------------------------------------------------------- */
.brand-mima .footer.footer-decorated:before,
.brand-mima .header-icons-container .header-button-container .industrium-button {
    background-color: #ee1d1e !important;
    color: #fff !important;
}




.header-icons-container.icons-container-big {
    margin: 0px !important;
    padding: 0px !important;
}


.mobile-header .header-icons-container {
    padding: 7px 20px;
    min-height: 66px;
    margin: 0 !important;
}
.mobile-header-menu-container {

    border-color: #3fcbd5;

}
/* === markalar archive === */
/* HERO */
.marka-hero{
  position: relative;
  width:100%;
  min-height: 150px;                  /* mockup yüksekliği */
  background-image: var(--hero);
  background-size: cover;
  background-position: center;
  padding-bottom: 120px;              /* altta kutulara yer aç */
}
.marka-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
}

/* KATEGORİ KUTULARI – hero üstüne bindir */
/* hero içine yerleştirdiğimiz grid için */
.marca-cats--in-hero{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -48px;
  width: min(1200px, 92vw);
  z-index: 3;
}

/* kutu ızgarası – otomatik sığdırır ve ortalar */
.marka-cats__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 22px;
  justify-items: center;         /* kutuları ortala */
  align-items: stretch;
}

@media (max-width:1024px){ .marka-cats__grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .marka-cats__grid{ grid-template-columns:repeat(2,1fr);} }

/* KUTU */
.marka-cat{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:24px 14px !important; background:#fff; border-radius:16px; text-align:center;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  text-decoration:none; color:inherit;
  transition:transform .2s, box-shadow .2s;
  width:100%; max-width:190px;
}
.marka-cat:hover{background:#1b34ad; color:#ffffff; transform:translateY(-4px); box-shadow:0 16px 28px rgba(0,0,0,.1); }

/* İKON – hover görseline kesin geçsin */
.marka-cat__icon {
  position: relative;
  width: 80px;
  height: 80px;
}
.marka-cat__icon img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.marka-cat__icon img{
opacity: 1;
z-index: 2;
}
.marka-cat:hover img,
.marka-cat__icon img:hover,
.marka-cat__icon img.hover {
  z-index: 0;
  opacity: 0;
  }
.marka-cat:hover img.hover:hover {
  z-index: 3;
  opacity: 1;
  }
.marka-cat:hover img.hover:hover,
.marka-cat:hover img.hover {
  opacity: 1;
    z-index: 3;
  }
.marka-cat__icon img.hover {
  opacity: 1;
  }
.marka-cat__icon .icon--normal {
  opacity: 1;
  z-index: 1;
}
.marka-cat__icon .icon--hover {
  z-index: 0;
}

.marka-cat:hover .icon--hover {
  opacity: 1;
  z-index: 1;
}

/* container helper */
.container { max-width: 1200px; margin: 0 auto; padding: 90px 20px; }


/* about block */
.marka-about__inner {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: start;
}
@media (max-width: 900px){ .marka-about__inner { grid-template-columns: 1fr; } }

.marka-about__title { font-size: 32px; margin: 0 0 14px; }
.marka-about__content p { margin: 0 0 12px; }
.marka-about__media img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 24px rgba(0,0,0,.08); }

/* =========================
   MARKALAR – MOBILE-FIRST
   ========================= */
/* HERO mutlaka konumlandırılmış olsun */
.marka-hero{ position: relative; }
.marka-hero__overlay{ pointer-events:none; }

/* === KATEGORİ GRID: hero’nun TAM ALT KENARINA sabitle ===
   (ÖNEMLİ) Class adı doğru olmalı: marka-cats--in-hero  */
.marka-cats--in-hero{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: 0;                 /* tam hero bitiminde başlasın (overlap yok) */
  width:min(1100px, 92vw);   /* biraz daha dar */
  z-index:3;
  padding-bottom: 0;         /* taşma istemiyoruz */
}

/* İçte asıl grid */
.marka-cats--in-hero .marka-cats__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap:14px;
  justify-items:center;
  align-items:stretch;
}

/* Kutuları KÜÇÜLT */
.marka-cat{
  width:100%;
  max-width:160px;           /* küçüldü */
  padding:14px 10px;         /* küçüldü */
  border-radius:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color:inherit; background:#fff;
  transition:transform .18s, box-shadow .18s, background-color .18s, color .18s;
}
.marka-cat:hover{
  background:#1b34ad; color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 18px rgba(0,0,0,.10);
}
.brand-mima .marka-cat:hover{
  background:#ee1d1e; color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 18px rgba(0,0,0,.10);
}
/* İKONLARI da küçült */
.marka-cat__icon{ position:relative; width:52px; height:52px; display:inline-block; }
.marka-cat__icon img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}


/* Başlık metnini satır yüksekliğiyle küçült */
.marka-cat__name{ font-weight:600; font-size:14px; line-height:1.25; }

/* CONTAINER: hero'dan sonra içerik kutularla çakışmasın diye üstten boşluk bırak */
.container{ max-width:1200px; margin:0 auto; padding: 80px 16px 70px; }
@media (min-width:640px){ .container{ padding: 90px 20px 80px; } }
@media (min-width:1024px){ .container{ padding: 100px 20px 90px; } }

/* RESPONSIVE KIRILIMLAR (küçük ekranda daha da kompakt) */
@media (max-width:640px){
  .marka-hero{ min-height: 150px; }                /* hero biraz daha yüksek */
  .marka-cats--in-hero{ width: 94vw; }
  .marka-cats--in-hero .marka-cats__grid{
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap:12px;
  }
  .marka-cat{ max-width:150px; padding:12px 10px; border-radius:10px; }
  .marka-cat__icon{ width:46px; height:46px; }
  .marka-cat__name{ font-size:13px; }
}