/* Kutlu Altin - V4 ana sayfa: gorselleri KIRPMADAN goster.
   2026-10-17. Mevcut tasarimin diger bolumlerine dokunmaz.
   NOT: Farkli oranli fotograf ve ekranlarda kontrollu bosluk olabilir.
*/

/* Hikayemiz: sadece tam boy banner. Baslik, beyaz perde ve buton yok. */
.kutlu-storefront .hikayemiz.hikayemiz-yalniz-banner {
  display: block !important;
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 28px 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}
.kutlu-storefront .hikayemiz.hikayemiz-yalniz-banner > .hikayemiz-bg {
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.kutlu-storefront .hikayemiz.hikayemiz-yalniz-banner > .hikayemiz-bg img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
/* Varsa eski gorunumden kalan perde ve metin katmanlarini engelle. */
.kutlu-storefront .hikayemiz.hikayemiz-yalniz-banner .hikayemiz-overlay,
.kutlu-storefront .hikayemiz.hikayemiz-yalniz-banner .hikayemiz-ic,
.kutlu-storefront .hikayemiz.hikayemiz-yalniz-banner .hikayemiz-metin {
  display: none !important;
}

/* Slider: iki slayt boyunca tutarli alan, fotograf tam gorunur. */
.kutlu-storefront .hero-slider-image-only .hero-poster-wrap {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  background-color: #f6f3ed !important;
}
.kutlu-storefront .hero-slider-image-only .hero-poster-wrap > picture,
.kutlu-storefront .hero-slider-image-only .hero-poster-wrap .responsive-picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.kutlu-storefront .hero-slider-image-only .hero-poster-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Kampanya uc banner: sabit panel icinde kesmeden sigdir. */
.kutlu-storefront .banner-kolaj .banner-kart,
.kutlu-storefront .banner-kolaj .banner-kart .responsive-picture {
  background: #f6f3ed !important;
}
.kutlu-storefront .banner-kolaj .banner-kart .responsive-picture img,
.kutlu-storefront .banner-kolaj .banner-kart img {
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}
.kutlu-storefront .banner-kolaj .banner-kart:hover img {
  transform: none !important;
}

@media (max-width: 767px) {
  .kutlu-storefront .hero-slider-image-only .hero-poster-wrap {
    aspect-ratio: 4 / 5 !important;
  }
  .kutlu-storefront .hikayemiz.hikayemiz-yalniz-banner {
    margin: 18px 0 !important;
  }
}

/* =============================================================
   V5 — MOBIL HEADER: LOGO VE IKONLAR BIRBIRINE GIRMEZ
   Sadece 860px ve altinda; V4 banner ayarlarini degistirmez.
   ============================================================= */
@media (max-width: 860px) {
  body.kutlu-storefront header .header-ic {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) max-content !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 7px !important;
    row-gap: 0 !important;
    padding: 10px 12px !important;
    min-height: 60px;
    width: 100%;
    min-width: 0;
  }

  body.kutlu-storefront header .menu-ac {
    display: flex !important;
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 32px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
  }

  body.kutlu-storefront header .logo {
    display: flex;
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: initial !important;
    justify-self: center !important;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    min-width: 0 !important;
    width: 100%;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden;
  }

  body.kutlu-storefront header .logo img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, clamp(110px, 36vw, 190px)) !important;
    max-height: 43px !important;
    object-fit: contain;
    object-position: center;
  }

  /* Metin logo kullanildiginda da dar ekrana sigsin. */
  body.kutlu-storefront header .logo .isim {
    white-space: nowrap;
    font-size: clamp(14px, 4.6vw, 24px) !important;
    letter-spacing: .04em !important;
    padding-left: 0 !important;
  }
  body.kutlu-storefront header .logo small {
    font-size: clamp(6px, 1.5vw, 9px) !important;
    letter-spacing: .12em !important;
    padding-left: 0 !important;
  }

  body.kutlu-storefront header .header-sag {
    display: flex !important;
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: none !important;
    min-width: 0;
    width: max-content;
    gap: 4px !important;
    margin: 0 !important;
  }
  body.kutlu-storefront header .header-sag > .ikon-btn {
    display: flex;
    flex: 0 0 28px;
    width: 28px;
    height: 40px;
    align-items: center;
    justify-content: center;
  }
  body.kutlu-storefront header .header-sag > .ikon-btn svg {
    width: 19px;
    height: 19px;
    max-width: 100%;
  }
  body.kutlu-storefront header .nav-mega {
    display: none !important;
  }
}

@media (max-width: 380px) {
  body.kutlu-storefront header .header-ic {
    grid-template-columns: 28px minmax(0, 1fr) max-content !important;
    column-gap: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.kutlu-storefront header .menu-ac { width: 28px; }
  body.kutlu-storefront header .header-sag { gap: 2px !important; }
  body.kutlu-storefront header .header-sag > .ikon-btn {
    flex-basis: 26px;
    width: 26px;
  }
  body.kutlu-storefront header .header-sag > .ikon-btn svg {
    width: 18px;
    height: 18px;
  }
}


/* =============================================================
   V6 — HEADER GEÇİŞİ VE GERÇEK MERKEZLEME
   Desktop nav, dar dizüstü/tablet ekranlarında logoya carpmadan
   hamburger menuye gecer. Logo ekranda matematiksel olarak ortada.
   ============================================================= */
@media (max-width: 1280px) {
  body.kutlu-storefront header .header-ic,
  body.kutlu-storefront header.scrolled .header-ic {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1280px !important;
    min-height: 64px !important;
    padding: 9px 18px !important;
    margin: 0 auto !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  body.kutlu-storefront header .nav.nav-mega,
  body.kutlu-storefront header.scrolled .nav.nav-mega {
    display: none !important;
  }

  body.kutlu-storefront header .menu-ac,
  body.kutlu-storefront header.scrolled .menu-ac {
    display: flex !important;
    position: static !important;
    flex: 0 0 36px !important;
    order: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
  }

  body.kutlu-storefront header .header-sag,
  body.kutlu-storefront header.scrolled .header-sag {
    display: flex !important;
    position: static !important;
    order: 2 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: auto !important;
    gap: 9px !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
  }

  body.kutlu-storefront header .header-sag > .ikon-btn,
  body.kutlu-storefront header.scrolled .header-sag > .ikon-btn {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.kutlu-storefront header .logo,
  body.kutlu-storefront header.scrolled .logo {
    display: flex !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    order: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    justify-self: center !important;
    pointer-events: auto !important;
    width: auto !important;
    max-width: min(210px, calc(100% - 340px)) !important;
    min-width: 0 !important;
    max-height: 55px !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 1;
  }

  body.kutlu-storefront header .logo img,
  body.kutlu-storefront header.scrolled .logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 44px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Metin logosu kullaniliyorsa da goruntuyu sabit tut. */
  body.kutlu-storefront header .logo .isim,
  body.kutlu-storefront header.scrolled .logo .isim {
    font-size: clamp(15px, 2.8vw, 27px) !important;
    white-space: nowrap !important;
    letter-spacing: .06em !important;
    padding: 0 !important;
  }

  body.kutlu-storefront header .logo small,
  body.kutlu-storefront header.scrolled .logo small {
    white-space: nowrap !important;
  }
}

@media (max-width: 860px) {
  body.kutlu-storefront header .header-ic,
  body.kutlu-storefront header.scrolled .header-ic {
    padding: 8px 12px !important;
    min-height: 62px !important;
  }
  body.kutlu-storefront header .header-sag,
  body.kutlu-storefront header.scrolled .header-sag {
    gap: 4px !important;
  }
  body.kutlu-storefront header .logo,
  body.kutlu-storefront header.scrolled .logo {
    max-width: min(200px, calc(100% - 290px)) !important;
  }
}

@media (max-width: 540px) {
  body.kutlu-storefront header .header-ic,
  body.kutlu-storefront header.scrolled .header-ic {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.kutlu-storefront header .menu-ac,
  body.kutlu-storefront header.scrolled .menu-ac {
    flex-basis: 32px !important;
    width: 32px !important;
  }
  body.kutlu-storefront header .header-sag,
  body.kutlu-storefront header.scrolled .header-sag {
    gap: 3px !important;
  }
  body.kutlu-storefront header .header-sag > .ikon-btn,
  body.kutlu-storefront header.scrolled .header-sag > .ikon-btn {
    flex-basis: 25px !important;
    width: 25px !important;
    min-width: 25px !important;
  }
  body.kutlu-storefront header .logo,
  body.kutlu-storefront header.scrolled .logo {
    max-width: min(200px, calc(100% - 246px)) !important;
  }
}

/* 420px altinda tum ikonlari ve okunabilir logoyu tek satira
   sigdirmak imkansiz: arama ve hesap kisayollari mobil menude. */
body.kutlu-storefront .mobil-menu-kisayollar { display: none; }
@media (max-width: 420px) {
  body.kutlu-storefront header .header-sag > [data-search-open],
  body.kutlu-storefront header.scrolled .header-sag > [data-search-open],
  body.kutlu-storefront header .header-sag > [aria-label="Hesabım"],
  body.kutlu-storefront header.scrolled .header-sag > [aria-label="Hesabım"] {
    display: none !important;
  }
  body.kutlu-storefront header .logo,
  body.kutlu-storefront header.scrolled .logo {
    max-width: min(185px, calc(100% - 166px)) !important;
  }
  body.kutlu-storefront .mobil-menu-kisayollar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  body.kutlu-storefront .mobil-menu-kisayollar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 24px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
  }
}