/* ==================================================================
   SARIETIKET · ÖZELLEŞTİRME KATMANI
   Temaya yapılacak bütün tasarım değişiklikleri bu dosyada toplanır.
   Brief'in teknik eki budur: burada ne varsa uygulanacak olan odur.

   Marka kılavuzu · Sarı #FEB907 · Mürekkep #141414 · Beyaz #FFFFFF
   Tek yazı tipi ailesi: Gilroy
   ================================================================== */

/* ---------------------------- 1. JETONLAR --------------------------- */
:root,
html body {
  /* marka */
  --sari: #FEB907;
  --sari-75: #FECB45;
  --sari-50: #FEDC83;
  --sari-25: #FFEEC1;
  --sari-10: #FFF8E6;

  --murekkep: #141414;
  --murekkep-75: #4F4F4F;
  --murekkep-50: #8A8A8A;
  --murekkep-25: #C4C4C4;
  --murekkep-15: #DCDCDC;
  --murekkep-10: #E8E8E8;

  --kirik-beyaz: #F6F4EF;

  /* temanın kendi jetonlarının üzerine yazılıyor */
  --theme-color: #FEB907;
  --header-bg: #FFFFFF;
  --header-textcolor: #141414;
  --header-bordercolor: #E8E8E8;
  --header-searchbg: #FFFFFF;
  --header-searchcolor: #4F4F4F;
  --header-searchborder: #E8E8E8;
  --header-searchbutoncolor: #141414;
  --header-searchbutonbgcolor: #FEB907;

  --footer-bg: #141414;
  --footer-titlecolor: #FFFFFF;
  --footer-textcolor: #F6F4EF;
  --footer-bordercolor: #2E2E2E;
  --footer-sosyalmedyacolor: #141414;
  --footer-sosyalmedyabg: #FEB907;
  --footer-ebultenbg: #FFFFFF;
  --footer-ebultencolor: #4F4F4F;
  --footer-ebultenbordercolor: #FFFFFF;
  --footer-ebultenbutoncolor: #141414;
  --footer-ebultenbutonbgcolor: #FEB907;
}

/* --------------------------- 2. TİPOGRAFİ -------------------------- */
html body,
html body *:not(i):not([class*="fa-"]):not([class*="icon"]) {
  font-family: "Gilroy", -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
html body { color: var(--murekkep); -webkit-font-smoothing: antialiased; }
html body h1, html body h2, html body h3, html body h4,
html body .ps-baslik, html body .categoryPageTitle {
  font-weight: 700; letter-spacing: -0.01em; color: var(--murekkep);
}
html body .productName a { font-weight: 500; }

/* ------------------------ 3. BİRİNCİL AKSİYON ---------------------- */
/* Kural: sarı zeminin üzerine her zaman MÜREKKEP metin gelir.
   #FEB907 üzerinde beyaz okunmuyor (kontrast 1,7), mürekkep 11,2 veriyor. */
html body .button.primary,
html body .button.secondary,
html body .ux-search-submit,
html body #btnKelimeAra,
html body .btnAddBasketOnDetail,
html body .Addtobasket,
html body .filtreUygulaBtn,
html body .proto-dugme-ana,
html body .ps-dugme.ana,
html body .ps-adim.aktif b {
  background: var(--sari) !important;
  background-image: none !important;
  color: var(--murekkep) !important;
  border-color: var(--sari) !important;
  font-weight: 600;
}
html body .button.primary:hover,
html body .ux-search-submit:hover,
html body #btnKelimeAra:hover,
html body .btnAddBasketOnDetail:hover,
html body .proto-dugme-ana:hover,
html body .ps-dugme.ana:hover {
  background: var(--murekkep) !important;
  color: #fff !important;
  border-color: var(--murekkep) !important;
  filter: none !important;
}
html body #btnKelimeAra i, html body .ux-search-submit i { color: var(--murekkep) !important; }
html body #btnKelimeAra:hover i { color: #fff !important; }

/* ikincil aksiyon: mürekkep zemin */
html body .proto-dugme-ikincil,
html body .ps-dugme.cizgi {
  background: var(--murekkep); color: #fff; border: 1px solid var(--murekkep);
}
html body .proto-dugme-ikincil:hover,
html body .ps-dugme.cizgi:hover { background: var(--sari); color: var(--murekkep); border-color: var(--sari); }

/* Sayfa tasarımcısından gelen banner düğmeleri.
   Tema, zemini kaydırarak dolu/boş hâli değiştiriyor (buttonTypeSecond dolu,
   buttonTypeFirst boş). Hareketi koruyoruz; yalnızca yazı rengini sabitliyoruz,
   çünkü sarı zeminde beyaz yazı okunmuyor. */
/* Düğme zemini ya sarı ya mürekkep olur, beyaz olmaz.
   Birincil (buttonTypeSecond) sarı, ikincil (buttonTypeFirst) mürekkep. */
html body .bannerButtonWrapper .bannerButton.buttonTypeSecond,
html body .bannerButtonWrapper .bannerButton.buttonTypeSecond:hover {
  background-color: var(--sari) !important;
  background-image: none !important;
  color: var(--murekkep) !important;
  border: 1px solid var(--sari) !important;
  font-weight: 600;
}
html body .bannerButtonWrapper .bannerButton.buttonTypeFirst,
html body .bannerButtonWrapper .bannerButton.buttonTypeFirst:hover {
  background-color: var(--murekkep) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--murekkep) !important;
  font-weight: 600;
}

/* --------------------------- 4. DUYURU ÇUBUĞU ---------------------- */
/* Zemin rengi temadaki gibi bırakıldı. Yalnızca yazı mürekkebe çekildi
   ve sağ uca kapatma düğmesi eklendi (bkz. bölüm 13). */
html body #top-bar .html.custom,
html body #top-bar b,
html body .header-top .nav-small,
html body .header-top a {
  color: var(--murekkep) !important;
  font-weight: 600; letter-spacing: .01em;
}

/* ----------------------------- 5. BAŞLIK --------------------------- */
html body #masthead { background: #fff; }
html body #hb-logo { width: auto !important; }
html body #hb-logo img.header_logo { height: 40px !important; width: auto !important; max-height: none !important; display: block; }
html body #divTopProductSearch .searchform-wrapper { border-color: var(--murekkep-10); border-radius: 6px; }
html body #divTopProductSearch .searchform-wrapper #ddlAramaKategori,
html body #divTopProductSearch .searchform-wrapper #txtbxArama { color: var(--murekkep); }
html body #divTopProductSearch .searchform-wrapper #ddlAramaKategori { background: var(--kirik-beyaz); border-radius: 6px 0 0 6px; }
html body #divTopProductSearch .searchform-wrapper .ux-search-categories:hover #ddlAramaKategori { background: var(--sari); color: var(--murekkep); }
html body #divTopProductSearch .searchform-wrapper #btnKelimeAra { border-radius: 0 6px 6px 0; }
html body .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li > a { color: var(--murekkep); font-weight: 600; }
html body .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li:hover > a { color: var(--murekkep); }
/* Menüde ek çizgi yok: tema kendi koyu alt çizgisini kullanıyor, olduğu gibi bırakıldı. */

/* mega menü */
html body .newHeaderNavigation:not(.mobileStyle) .menu-wrap { background: #fff; border-top: 1px solid var(--murekkep-10); box-shadow: 0 14px 28px rgba(20,20,20,.08); }
html body .newHeaderNavigation:not(.mobileStyle) .menu-wrap .kolon > li > a { color: var(--murekkep); font-weight: 700; }
html body .newHeaderNavigation:not(.mobileStyle) .nav-submenu > li > a { color: var(--murekkep-75); font-weight: 400; }
html body .newHeaderNavigation:not(.mobileStyle) .nav-submenu > li > a:hover { color: var(--murekkep); }

/* --------------------------- 6. ÜRÜN KARTI ------------------------- */
html body .productItem { border-color: var(--murekkep-10); }
html body .productItem:hover { border-color: var(--murekkep-25); }
html body .productPrice .discountPriceSpan,
html body .productPrice .regularPriceSpan { color: var(--murekkep); font-weight: 700; }
html body .productPrice .IndirimVar .regularPriceSpan,
html body .productPrice .regularPrice .regularPriceSpan { color: var(--murekkep-50); font-weight: 400; }
html body .discountKdv, html body .regularKdv { color: var(--murekkep-50); }

/* rozetler: sarı zemin + mürekkep yazı (tema bunlara beyaz yazı veriyordu) */
html body .productIconEx .discountIcon,
html body .productIconEx .newIcon,
html body .productIconEx .cargoIcon,
html body .productIconEx .firsatIcon,
html body .productIconEx .discountIcon *,
html body .productIconEx .cargoIcon * {
  background-color: var(--sari) !important;
  color: var(--murekkep) !important;
  font-weight: 700;
}
html body .productIconEx .discountIcon *,
html body .productIconEx .cargoIcon * { background-color: transparent !important; }
/* "Çok Satan / Popüler" mürekkep rozeti olduğu gibi kalır */
html body .productIconExSpecial > div { background: var(--murekkep) !important; color: #fff !important; }

/* "Ürünü İncele" görsel üstü düğmesi */
html body .productIconExButtons > div { background: rgba(255,255,255,.94) !important; }
html body .productIconExButtons > div a,
html body .productIconExButtons > div a:hover { color: var(--murekkep) !important; }
html body .productIconExButtons > div:hover { background: var(--sari) !important; }

/* ---------------------------- 7. ALT BİLGİ ------------------------- */
/* Alt bilginin kendi bölüm zeminleri temada tanımlı, dokunmuyoruz.
   Yalnızca üzerine gelme rengi markaya çekiliyor. */
html body .footerTemp a:hover { color: var(--sari) !important; }

/* --------------------------- 8. GENEL ------------------------------ */
html body a { color: inherit; }
html body ::selection { background: var(--sari); color: var(--murekkep); }
html body *:focus-visible { outline: 2px solid var(--sari); outline-offset: 2px; }
html body .ps-kutu { border-color: var(--murekkep-10); }
html body .ps-alan input:focus, html body .ps-alan select:focus, html body .ps-alan textarea:focus { border-color: var(--sari); }
html body .ps-rozet.yesil { background: var(--sari-25); color: #6B4E00; }
html body .protoSayfa .ps-yan-menu a.aktif { background: var(--sari); color: var(--murekkep); }
html body #protoRozet { background: var(--murekkep); }
html body #protoBildirim[data-tur="basari"] { background: var(--murekkep); }

/* ------------------- 9. KALAN TEMA RENGİ ARTIKLARI ------------------ */
/* Tema bazı yerlerde kırmızıyı değişken yerine sabit yazmış. */
html body .footerTemp .newsbutton,
html body .newsletterContent .newsbutton,
html body a.newsbutton {
  background: var(--sari) !important;
  color: var(--murekkep) !important;
  border-color: var(--sari) !important;
  font-weight: 600;
}
html body .footerTemp .newsbutton:hover { background: #fff !important; color: var(--murekkep) !important; }

/* ürün detay indirim rozeti: sarı bloğun üstünde mürekkep yazı */
html body .indirimliOrani,
html body .right_line.indirimliOrani,
html body .discountIconDetail,
html body .urunDetayFiyatContainer .discountIcon,
html body .urunDetayFiyatContainer .discountIcon * {
  color: var(--murekkep) !important;
}
html body .urunDetayFiyatContainer .discountIcon { background: var(--sari) !important; }


/* ------- 10. ÜRÜN KARTI SEPETE EKLE: temanın kendi hareketi korunur --------
   Tema düğmeyi mürekkep zeminle başlatıp üzerine gelince zemini kaydırarak
   marka rengini ortaya çıkarıyor. Hareketi değiştirmiyoruz; yalnızca
   ortaya çıkan renk sarı olduğu için yazı mürekkebe dönüyor.            */
html body .productIconExBottom .mycartIcon > a {
  background-color: var(--sari);
  background-image: linear-gradient(to bottom, var(--murekkep) 0%, var(--murekkep) 100%);
  border-color: var(--murekkep);
  color: #fff;
}
html body .productIconExBottom .mycartIcon > a:hover {
  color: var(--murekkep);
  border-color: var(--sari);
}

/* ------------------- 11. DÜĞME RENK KURALI ------------------------------
   Sarı zemin → mürekkep yazı.  Mürekkep zemin → beyaz yazı.  İstisnasız.  */
html body .ps-adim.aktif b,
html body .ps-adim.tamam b { color: #fff !important; }
html body .ps-adim.aktif b { color: var(--murekkep) !important; }

/* ------------------- 12. BAŞLIK YÜKSEKLİKLERİ ---------------------- */
/* Arama satırı ile menü satırı arasındaki boşluk fazlaydı, sıkılaştırıldı.
   Önce 50 + 90 + 60 = 200 px · Sonra 50 + 76 + 52 = 178 px */
html body #headerNew .header-main { height: 76px; }
html body #headerNew .header-bottom,
html body #headerNew #wide-nav { height: 52px; }
html body #hb-logo img.header_logo { height: 36px !important; }

/* ------------------- 13. DUYURU ÇUBUĞU KAPATMA --------------------- */
html body #top-bar .nav-right { justify-content: flex-end; }
html body .duyuruKapat {
  border: 0; background: none; cursor: pointer; line-height: 1;
  font-size: 24px; color: var(--murekkep); opacity: .55;
  padding: 0 2px 3px; margin-left: 8px; transition: opacity .15s;
}
html body .duyuruKapat:hover { opacity: 1; }
html body #top-bar.duyuru-kapali { display: none !important; }

/* ------------- 14. GÖRSEL OTURTMA (blok yükseklikleri sabit) -------------
   Marka görselleri temanın demo görsellerinden farklı oranlarda.
   Blok yüksekliklerine dokunulmuyor; görsel bükülmeden alanı dolduruyor. */
/* Oran, görselin kendi style özniteliğinde tanımlı (derleme sırasında
   temanın orijinal görselinden ölçülüyor). Burada yalnızca kırpma davranışı. */
html body .bannerImageWrapper img,
html body .blokResimLink img,
html body .beforeAfterBlockWrapper img,
html body [class*="beforeAfter"] img {
  object-fit: cover;
  object-position: center;
  width: 100%;
}
/* kategori kartlarindaki urun fotograflari beyaz zeminli, kirpilmasin */
html body .bannerWrapper.textCenterHalign .bannerImageWrapper img { object-fit: contain; background: #fff; }
/* urun kartlarinda da ayni kural: kirpma yok, bukme yok */
html body .productItem .productImage img { object-fit: contain; }

/* ================= 15. MENÜ OKLARI KALDIRILDI ====================== */
html body .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li.ulVar > a span:after,
html body .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li.ulVar:hover > a span:after {
  content: none !important;
  margin-left: 0 !important;
}

/* ================= 16. ARAMA KUTUSU ================================
   Kategori seçici ve sarı düğme kaldırıldı. Tek parça hap biçimi,
   solda arama simgesi, odaklanınca beyaza dönüyor.                    */
html body #divTopProductSearch { width: 100%; max-width: 640px; overflow: visible; position: relative; }
html body #divTopProductSearch .header-search-form-wrapper,
html body #divTopProductSearch .searchform,
html body #divArama { overflow: visible; }
html body #divTopProductSearch .searchform-wrapper {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: #F2F2F0;
  overflow: visible;   /* arama katmani disari tasabilsin */
  transition: background .18s, border-color .18s, box-shadow .18s;
}
/* Odaklanınca kutu ile katman tek bir karta dönüşür.
   Genişlik ve konum değişmez: kart arama çubuğuyla aynı hizada kalır. */
html body #divTopProductSearch .header-search-form-wrapper.proto-acik {
  /* kapalı hâldeki satırla aynı hizada başlasın diye üstten 14 piksel */
  position: absolute !important; top: 14px !important; left: 0 !important; right: 0 !important;
  width: auto !important; transform: none !important; float: none !important;
  z-index: 100000;
  background: #fff;
  border: 1px solid var(--murekkep-10);
  border-radius: 16px;
  overflow: hidden;                 /* köşeler içerideki öğeleri de kırpsın */
  box-shadow: 0 20px 48px rgba(20,20,20,.16);
}
html body #divTopProductSearch .header-search-form-wrapper.proto-acik .searchform,
html body #divTopProductSearch .header-search-form-wrapper.proto-acik .searchform-wrapper {
  float: none !important; width: 100% !important;
}
html body #divTopProductSearch .header-search-form-wrapper.proto-acik .searchform-wrapper {
  flex: 0 0 auto;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--murekkep-10) !important;
  border-radius: 0 !important;
  box-shadow: none;
}
html body #divAramaKategori { display: none !important; }
html body #divArama { position: relative; }
html body #divArama > .proto-arama-dugme {
  position: absolute; left: 0; top: 0; bottom: 0; width: 48px; z-index: 2;
}
html body #divTopProductSearch #btnKelimeAra {
  width: 48px !important; height: 100% !important;
  background: transparent !important; border: 0 !important; border-radius: 999px !important;
}
html body #divTopProductSearch #btnKelimeAra i,
html body #divTopProductSearch #btnKelimeAra:hover i { color: var(--murekkep-50) !important; font-size: 17px; }
html body #divTopProductSearch .searchform-wrapper #txtbxArama {
  background: transparent !important; border: 0 !important;
  padding: 0 44px 0 48px !important; height: 46px !important;
  font-size: 14.5px; color: var(--murekkep);
}
html body #divTopProductSearch #txtbxArama::placeholder { color: var(--murekkep-50); }
html body .proto-arama-temizle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  font-size: 19px; line-height: 1; color: var(--murekkep-50); display: none; z-index: 3;
}
html body .proto-arama-temizle.acik { display: block; }
html body .proto-arama-temizle:hover { color: var(--murekkep); }

/* ================= 17. BAŞLIK İKONLARI =============================
   Favoriler en solda, diğer ikisi yazılı.                             */
html body .header-nav.nav-right { display: flex; align-items: center; gap: 20px; }
html body .header-nav.nav-right .header-favori-item { order: 1; }
html body .header-nav.nav-right .account-item { order: 2; }
html body .header-nav.nav-right .cart-item { order: 3; }
html body .proto-ikon-yazi {
  font-size: 13.5px; font-weight: 500; color: var(--murekkep);
  margin-left: 6px; white-space: nowrap;
}
/* Favoriler yazısı yalnızca üzerine gelince açılır, yerleşim kaymasın diye
   genişlik geçişiyle. */
html body .proto-hover-yazi {
  max-width: 0; opacity: 0; overflow: hidden; margin-left: 0;
  transition: max-width .22s cubic-bezier(.4,0,.2,1), opacity .18s, margin-left .22s;
}
html body .header-favori-item:hover .proto-hover-yazi { max-width: 110px; opacity: 1; margin-left: 6px; }
html body .account-link:hover .proto-ikon-yazi,
html body .header-cart-link:hover .proto-ikon-yazi { color: var(--murekkep); text-decoration: underline; text-underline-offset: 3px; }
html body .account-link, html body .header-cart-link { display: flex !important; align-items: center; }
html body .cart-item a.header-cart-link.headerButon .sepetUrunSayisi { margin-left: 5px; font-size: 13.5px; }
@media (max-width: 1200px) { html body .proto-ikon-yazi { display: none; } }

/* ================= 18. ARAMA KATMANI =============================== */
/* Katman, kartın alt yarısı. Kenarlık ve gölge kartın kendisinde. */
/* Katman kartın akışında durur, kart onunla birlikte büyür. */
#protoAramaPanel {
  position: static; clear: both; background: #fff; border: 0; border-radius: 0;
  display: none; width: 100%; padding: 22px 0 16px;
}
#protoAramaPanel.acik { display: block; }
#protoAramaPanel .pa-bolum { padding: 14px 22px 6px; }
#protoAramaPanel .pa-baslik { font-size: 14px; font-weight: 700; color: var(--murekkep); margin-bottom: 12px; }
#protoAramaPanel .pa-ayrac { height: 1px; background: var(--murekkep-10); margin: 8px 22px; }
#protoAramaPanel .pa-bos { font-size: 13.5px; color: var(--murekkep-50); padding: 6px 0 14px; }

#protoAramaPanel .pa-etiketler { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 6px; }
#protoAramaPanel .pa-etiket {
  border: 1px solid var(--murekkep-10); background: #fff; border-radius: 999px;
  padding: 7px 15px; font: 500 13px/1 inherit; color: var(--murekkep); cursor: pointer; transition: .15s;
}
#protoAramaPanel .pa-etiket:hover { background: var(--sari); border-color: var(--sari); }

#protoAramaPanel .pa-urunler { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding-bottom: 6px; }
#protoAramaPanel .pa-urun { display: block; text-decoration: none; color: var(--murekkep); }
#protoAramaPanel .pa-urun .gorsel {
  display: block; background: #F2F2F0; border-radius: 10px; overflow: hidden;
  aspect-ratio: 1/1; margin-bottom: 9px;
}
#protoAramaPanel .pa-urun img { width: 100%; height: 100%; object-fit: contain; display: block; }
#protoAramaPanel .pa-urun .marka { display: block; font-size: 12.5px; font-weight: 700; }
#protoAramaPanel .pa-urun .ad {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; color: var(--murekkep-75); line-height: 1.35; margin: 2px 0 6px; min-height: 34px;
}
#protoAramaPanel .pa-urun .fiyat { display: block; font-size: 13.5px; font-weight: 700; }
#protoAramaPanel .pa-urun .eski { display: block; font-size: 12px; color: var(--murekkep-50); text-decoration: line-through; margin-top: 2px; }
#protoAramaPanel .pa-urun .eski i { font-style: normal; color: #C0392B; text-decoration: none; margin-left: 6px; font-weight: 600; }
#protoAramaPanel .pa-urun:hover .marka { color: var(--murekkep); }
#protoAramaPanel .pa-urun:hover .gorsel { outline: 2px solid var(--sari); outline-offset: 2px; }

#protoAramaPanel .pa-liste { list-style: none; margin: 0; padding: 0; }
#protoAramaPanel .pa-liste a {
  display: block; padding: 9px 0; font-size: 14px; color: var(--murekkep-75); text-decoration: none;
}
#protoAramaPanel .pa-liste a b { color: var(--murekkep); font-weight: 700; }
#protoAramaPanel .pa-liste a:hover { color: var(--murekkep); }

@media (max-width: 1100px) { #protoAramaPanel .pa-urunler { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { #protoAramaPanel .pa-urunler { grid-template-columns: repeat(2, 1fr); } }

/* ---- banner yazı rengi blok tipine göre ----
   Yazı görselin ÜSTÜNDEyse beyaz, ALTINDAysa mürekkep. Tema her iki
   yerleşimi de kullanıyor; renk tek tek değil, tipe göre veriliyor. */
html body .bannerWrapper.blokTypeBackround .bannerTitle,
html body .bannerWrapper.blokTypeBackround .bannerSubTitle {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
html body .bannerWrapper:not(.blokTypeBackround) .bannerTitle,
html body .bannerWrapper:not(.blokTypeBackround) .bannerSubTitle {
  color: var(--murekkep) !important;
  text-shadow: none;
}
/* arama katmanında ilk başlık girişten uzakta dursun */
#protoAramaPanel > .pa-bolum:first-child { padding-top: 4px; }

/* ==================================================================
   19. HERO ALTERNATİFLERİ (index2 · index3)
   Tam genişlikte görsel yok. Krem zeminli bant, içinde konteyner
   genişliğinde yuvarlatılmış görsel alanı.
   ================================================================== */
html body .proto-hero { background: #F5F3ED; padding: 34px 0 58px; }
/* Yazı bloğu hero 1'deki gibi ortalanır: yatayda ve dikeyde merkez. */
html body .proto-hero .ph-yazi { position: absolute; inset: 0; padding: 40px 40px 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(to top, rgba(20,20,20,.42) 0%, rgba(20,20,20,.16) 45%, rgba(20,20,20,.10) 100%); color: #fff; }
html body .proto-hero .ph-yazi h2 { font-size: 38px; font-weight: 700; color: #fff; margin: 0 0 10px; letter-spacing: -.01em; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
html body .proto-hero .ph-yazi p { font-size: 17px; color: #fff; margin: 0 0 22px; opacity: .94; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
html body .proto-hero .ph-dugme { display: inline-block; background: var(--sari); color: var(--murekkep);
  padding: 12px 26px; border-radius: 5px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
html body .proto-hero .ph-dugme:hover { background: var(--murekkep); color: #fff; }

/* --- index2: tek sahne + story noktaları --- */
html body .proto-hero2 .ph-sahne { position: relative; border-radius: 0; overflow: hidden;
  aspect-ratio: 21/9; background: #ddd; }
html body .proto-hero2 .ph-slayt { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
html body .proto-hero2 .ph-slayt.aktif { opacity: 1; }
html body .proto-hero2 .ph-slayt img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .proto-hero2 .ph-noktalar { position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: center; gap: 14px; z-index: 3; }
html body .proto-hero2 .ph-nokta { width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; }
html body .proto-hero2 .ph-nokta span { display: block; width: 100%; height: 100%; border-radius: 50%;
  overflow: hidden; border: 2px solid rgba(255,255,255,.75); transition: border-color .2s, transform .2s; }
html body .proto-hero2 .ph-nokta img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .proto-hero2 .ph-nokta.aktif span { border-color: var(--sari); transform: scale(1.08); }
html body .proto-hero2 .ph-nokta:hover span { border-color: var(--sari); }


/* --- görsel slider alanı: index3, index4 ve index6 bunu paylaşır --- */
html body .proto-hero .ph3-alan { position: relative; display: block; border-radius: 0; overflow: hidden; }
html body .proto-hero .ph3-alan .ph-slayt {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; text-decoration: none; display: block;
}
html body .proto-hero .ph3-alan .ph-slayt.aktif { opacity: 1; }
html body .proto-hero .ph3-alan .ph-slayt img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .proto-hero .ph3-alan .ph-yazi {
  position: absolute; inset: 0; padding: 32px 30px 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(to top, rgba(20,20,20,.42) 0%, rgba(20,20,20,.16) 45%, rgba(20,20,20,.10) 100%);
}
html body .proto-hero .ph3-alan .ph-yazi b { display: block; font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 8px; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
html body .proto-hero .ph3-alan .ph-yazi i { display: block; font-style: normal; font-size: 15.5px; color: #fff; opacity: .94; margin-bottom: 20px; text-shadow: 0 2px 12px rgba(0,0,0,.45); }

/* ince çizgi göstergeler */
html body .proto-hero .ph3-alan .ph-cizgiler { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; gap: 7px; z-index: 3; }
html body .proto-hero .ph3-alan .ph-cizgi {
  width: 30px; height: 3px; border: 0; padding: 0; border-radius: 2px; cursor: pointer;
  background: rgba(255,255,255,.45); transition: background .2s, width .2s;
}
html body .proto-hero .ph3-alan .ph-cizgi.aktif { background: var(--sari); width: 44px; }
html body .proto-hero .ph3-alan .ph-cizgi:hover { background: #fff; }

/* --- index3: 8/12 yatay + 4/12 dikey --- */
html body .proto-hero3 .ph3-izgara { display: grid; grid-template-columns: 8fr 4fr; gap: 20px; align-items: stretch; }
/* iki alanin yuksekligi esit: dar alan olcuyu belirler, genis alan ona uzar */
html body .proto-hero3 .ph3-buyuk { aspect-ratio: auto; height: 100%; }
html body .proto-hero3 .ph3-dar { aspect-ratio: 3/4; }
html body .proto-hero3 .ph3-dar .ph-yazi b { font-size: 24px; }
html body .proto-hero3 .ph3-dar .ph-yazi i { font-size: 14px; }

@media (max-width: 900px) {
  html body .proto-hero { padding: 18px 0 34px; }
  html body .proto-hero2 .ph-sahne { aspect-ratio: 4/5; border-radius: 0; }
  html body .proto-hero2 .ph-nokta { width: 46px; height: 46px; }
  html body .proto-hero .ph-yazi { padding: 24px 20px 84px; }
  html body .proto-hero2 .ph-yazi { padding-bottom: 84px; }
  html body .proto-hero .ph-yazi h2 { font-size: 23px; }
  html body .proto-hero3 .ph3-izgara { grid-template-columns: 1fr; }
  html body .proto-hero3 .ph3-buyuk { aspect-ratio: 4/3; height: auto; }
  html body .proto-hero3 .ph3-dar { aspect-ratio: 4/3; }
  html body .proto-hero .ph3-alan .ph-yazi { padding: 22px 18px 64px; }
  html body .proto-hero .ph3-alan .ph-yazi b { font-size: 22px; }
  html body .proto-hero .ph3-alan .ph-cizgiler { bottom: 16px; }
}

/* hero varyant seçici — yalnızca prototipte, temaya girmez */
#protoHeroSecici {
  position: fixed; left: 14px; bottom: 54px; z-index: 99998;
  display: flex; align-items: center; gap: 4px;
  background: #111; color: #fff; padding: 6px 8px 6px 12px; border-radius: 999px;
  font: 600 11px/1 -apple-system, "Segoe UI", Roboto, sans-serif; opacity: .5; transition: opacity .18s;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
#protoHeroSecici:hover { opacity: 1; }
#protoHeroSecici span { letter-spacing: .06em; text-transform: uppercase; margin-right: 4px; }
#protoHeroSecici a {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; background: rgba(255,255,255,.16);
}
#protoHeroSecici a.aktif { background: var(--sari); color: var(--murekkep); }
@media (max-width: 767px) { #protoHeroSecici { bottom: 48px; left: 10px; } }

/* Krem zeminli hero sayfalarında başlık gölgesi istenmedi.
   Gölge temanın menü satırından (#wide-nav / .header-bottom) geliyor. */
html body[data-proto-sayfa^="index"]:not([data-proto-sayfa="index"]) #headerNew { position: relative; z-index: 20; }
html body[data-proto-sayfa^="index"]:not([data-proto-sayfa="index"]) #wide-nav,
html body[data-proto-sayfa^="index"]:not([data-proto-sayfa="index"]) .header-bottom { box-shadow: none !important; }

/* ================= 20. KAYDIRINCA İNCELEN BAŞLIK ===================
   Duyuru çubuğu gizlenir, arama satırı ve menü satırı kısalır, logo küçülür.
   Toplam 178 pikselden 102 piksele iner.                              */
html body #headerNew { transition: box-shadow .2s ease; }
html body #headerNew.proto-yapisik {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #fff;
  box-shadow: 0 4px 22px rgba(20,20,20,.12);
}
html body #headerNew.proto-yapisik #top-bar { display: none !important; }
html body #headerNew.proto-yapisik .header-main { height: 58px; }
html body #headerNew.proto-yapisik .header-bottom,
html body #headerNew.proto-yapisik #wide-nav { height: 44px; }
html body #headerNew.proto-yapisik #hb-logo img.header_logo { height: 26px !important; }
html body #headerNew.proto-yapisik #divTopProductSearch .searchform-wrapper,
html body #headerNew.proto-yapisik #divTopProductSearch #txtbxArama { height: 38px !important; }
html body #headerNew.proto-yapisik .newHeaderNavigation:not(.mobileStyle) .newHeaderNavUl > li > a { font-size: 15px; }

/* yumuşak geçiş */
html body #headerNew .header-main,
html body #headerNew .header-bottom,
html body #headerNew #wide-nav,
html body #headerNew #hb-logo img.header_logo,
html body #headerNew #divTopProductSearch .searchform-wrapper,
html body #headerNew #divTopProductSearch #txtbxArama { transition: height .22s ease; }

/* başlık yapışınca içerik zıplamasın diye ayrılan boşluk */
#protoBaslikBoslugu { height: 0; transition: height .22s ease; }

/* ================= 21. ÜRÜN DETAY ================================== */
/* Görsel sütunu, sağdaki içerik bitene kadar başlığın altında yapışık kalır.
   Tema sütunları float ile diziyor; float yapışkanlığı engellediği için
   satır flex'e çevrildi. */
html body .TopDet { display: flex; align-items: flex-start; }
html body .TopDet > .leftImage,
html body .TopDet > .RightDetail { float: none !important; }
/* temanın yüzde genişlikleri flex'te korunsun */
html body .TopDet > .leftImage { flex: 0 0 55%; max-width: 55%; }
html body .TopDet > .RightDetail { flex: 0 0 45%; max-width: 45%; padding-left: 32px; }
html body .TopDet > .leftImage {
  position: sticky;
  top: 116px;            /* incelmiş başlık 102 px + 14 px boşluk */
  align-self: flex-start;
}
/* Ana görsel kutusuna ortalanır, oranı bozulmadan sığar.
   Yükseklik ekrana sığacak şekilde sınırlı: hem görsel tam görünür,
   hem de sağdaki içerik kayarken yapışacak pay kalır. */
html body .leftImage .Images,
html body .leftImage .imageZoomPreview {
  display: flex; align-items: center; justify-content: center;
  background: #fff; overflow: hidden;
  height: min(62vh, 620px) !important;
}
html body .leftImage .imageZoomPreview img,
html body .leftImage img.cloudzoom {
  width: auto !important; height: auto !important;
  max-width: 100% !important; max-height: 100% !important;
  object-fit: contain; margin: 0 auto; display: block;
}

/* --- üstte beliren ürün çubuğu (kaydırınca başlığın yerini alır) --- */
html body #headerNew.proto-baslik-gizli { transform: translateY(-105%); transition: transform .24s ease; }
#protoUrunBar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  background: #fff; border-bottom: 1px solid var(--murekkep-10);
  transform: translateY(-105%); transition: transform .24s ease;
  box-shadow: 0 4px 22px rgba(20,20,20,.10);
}
#protoUrunBar.acik { transform: translateY(0); }
#protoUrunBar .pub-ic { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
#protoUrunBar .pub-gorsel {
  width: 52px; height: 52px; object-fit: contain; background: #F2F2F0; border-radius: 6px; flex: 0 0 auto;
}
#protoUrunBar .pub-metin { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
#protoUrunBar .pub-marka { font-weight: 700; font-size: 14px; white-space: nowrap; }
#protoUrunBar .pub-ad {
  font-size: 14px; color: var(--murekkep-75);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#protoUrunBar .pub-fiyat { flex: 0 0 auto; text-align: right; }
#protoUrunBar .pub-fiyat b { font-size: 16px; font-weight: 700; display: block; }
#protoUrunBar .pub-fiyat s { font-size: 12.5px; color: var(--murekkep-50); }
#protoUrunBar .pub-dugme {
  flex: 0 0 auto; border: 0; cursor: pointer; background: var(--murekkep); color: #fff;
  padding: 13px 34px; border-radius: 999px; font: 600 13.5px/1 inherit;
}
#protoUrunBar .pub-dugme:hover { background: var(--sari); color: var(--murekkep); }
@media (max-width: 1024px) {
  html body .TopDet { flex-direction: column; }
  html body .TopDet > .leftImage,
  html body .TopDet > .RightDetail { flex: 0 0 auto; max-width: 100%; width: 100%; padding-left: 0; }
  html body .TopDet > .leftImage { position: static; }
  html body .leftImage .Images,
  html body .leftImage .imageZoomPreview { height: auto !important; max-height: 70vh; }
}
@media (max-width: 767px) {
  #protoUrunBar .pub-ad, #protoUrunBar .pub-fiyat s { display: none; }
  #protoUrunBar .pub-dugme { padding: 12px 18px; }
}

/* Hero slider okları dikeyde tam ortada dursun.
   Tema oku sabit bir üst değere yerleştiriyor, alan yüksekliği değişince kayıyor. */
html body .anasayfaSlider .owl-nav { top: 50% !important; }
html body .anasayfaSlider .owl-nav > * { transform: translateY(-50%); }

/* ---- ürün kartında görsel noktaları ---- */
html body .productItem .productImage { position: relative; }
html body .pk-noktalar {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 4;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
  opacity: 0; transition: opacity .18s;
}
html body .productItem:hover .pk-noktalar { opacity: 1; }
html body .pk-nokta {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(20,20,20,.22); transition: background .15s, transform .15s;
}
html body .pk-nokta.aktif { background: var(--murekkep); transform: scale(1.25); }


/* ================= 22. ÜRÜN KARTI ROZETLERİ ========================
   Temanın rozetleri sabit 50×30 piksellik kutulardı: "Ücretsiz Kargo"
   iki satıra bölünüyor, "%50" ise kutunun içinde yüzüyordu. Rozetler
   artık içeriği kadar geniş, tek satır ve aralarında anlam sırası var:
   indirim sarı (en yüksek sesli), fırsat mürekkep, kargo ve yeni ince
   çerçeveli beyaz. Temanın kendi üzerine gelme hareketi korunuyor.   */
html body .productIconEx { left: 10px; top: 10px; gap: 6px; align-items: flex-start; }
html body .productIconEx > div,
html body .productIconExSpecial > div {
  width: auto !important;
  min-width: 0;
  height: 24px;
  line-height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .015em;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center;
  box-shadow: 0 1px 4px rgba(20,20,20,.10);
}

/* indirim: markanın sarısı, mürekkep yazı — karttaki en yüksek sesli öge */
html body .productIconEx .discountIcon {
  background: var(--sari) !important;
  color: var(--murekkep) !important;
  font-size: 12.5px;
  font-weight: 800;
  padding: 0 10px;
}
html body .productIconEx .discountIcon .discountIcon_s1 { font-weight: 800; }

/* fırsat: dolu mürekkep */
html body .productIconEx .firsatIcon {
  background: var(--murekkep) !important;
  color: #fff !important;
}

/* kargo ve yeni: beyaz zemin, ince çerçeve — sarıyı yormayan ikinci ses */
html body .productIconEx .cargoIcon,
html body .productIconEx .newIcon {
  background: #fff !important;
  color: var(--murekkep) !important;
  border: 1px solid var(--murekkep-25);
  font-weight: 600;
  font-size: 11px;
}
html body .productIconEx .cargoIcon *,
html body .productIconEx .newIcon * { background: transparent !important; }

/* sağ üstteki "Çok Satan / Popüler" aynı ölçüde, dolu mürekkep */
html body .productIconExSpecial { top: 10px; right: 10px; }
html body .productIconExSpecial > div {
  background: var(--murekkep) !important;
  color: #fff !important;
  float: none;
  margin: 0 0 6px;
  font-weight: 600;
}

@media (max-width: 767px) {
  html body .productIconEx { left: 6px; top: 6px; gap: 4px; }
  html body .productIconExSpecial { top: 6px; right: 6px; }
  html body .productIconEx > div,
  html body .productIconExSpecial > div {
    height: 21px; line-height: 21px; padding: 0 7px; font-size: 10.5px; border-radius: 3px;
  }
  html body .productIconEx .discountIcon { font-size: 11.5px; padding: 0 8px; }
}


/* ================= 23. HERO 4 · MARKA DUVARI =======================
   Solda kampanya slider'ı, sağda dokuz markanın ızgarası. Logolar tek
   tip mürekkep tonuna indirildi; üzerine gelince kart yükseliyor.     */
html body .proto-hero4 .ph4-izgara { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; align-items: stretch; }
html body .proto-hero4 .ph4-sahne { aspect-ratio: 4/3; }
html body .proto-hero4 .ph4-duvar {
  background: #fff; border: 1px solid var(--murekkep-10);
  padding: 22px 22px 20px; display: flex; flex-direction: column;
}
html body .proto-hero4 .ph4-ust { margin-bottom: 16px; }
html body .proto-hero4 .ph4-ust b { display: block; font-size: 19px; font-weight: 700; color: var(--murekkep); }
html body .proto-hero4 .ph4-ust i { display: block; font-style: normal; font-size: 13.5px; color: var(--murekkep-50); margin-top: 3px; }
html body .proto-hero4 .ph4-agac {
  flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
html body .proto-hero4 .ph4-marka {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--murekkep-10); background: #fff; padding: 10px 8px;
  text-decoration: none; transition: border-color .18s, transform .18s, box-shadow .18s;
}
html body .proto-hero4 .ph4-marka img {
  max-width: 82%; max-height: 34px; width: auto; height: auto; object-fit: contain;
  opacity: .88; transition: opacity .18s, transform .18s;
}
html body .proto-hero4 .ph4-marka:hover {
  border-color: var(--sari); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,20,20,.08);
}
html body .proto-hero4 .ph4-marka:hover img { opacity: 1; transform: scale(1.04); }
html body .proto-hero4 .ph4-tumu {
  margin-top: 16px; text-align: center; display: block;
  background: var(--murekkep); color: #fff; text-decoration: none;
  padding: 12px 20px; border-radius: 5px; font-size: 13.5px; font-weight: 600;
  transition: background .18s, color .18s;
}
html body .proto-hero4 .ph4-tumu:hover { background: var(--sari); color: var(--murekkep); }


/* ================= 24. HERO 5 · FIRSAT VİTRİNİ =====================
   Solda sayaçlı kampanya paneli, sağda en yüksek indirimli dört ürün. */
html body .proto-hero5 .ph5-izgara { display: grid; grid-template-columns: 4fr 8fr; gap: 20px; align-items: stretch; }
html body .proto-hero5 .ph5-panel {
  background: var(--sari); color: var(--murekkep);
  padding: 30px 28px; display: flex; flex-direction: column; justify-content: center;
}
html body .proto-hero .ph5-etiket {
  display: inline-block; align-self: flex-start; background: var(--murekkep); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 4px; margin-bottom: 16px;
}
html body .proto-hero5 .ph5-panel b { display: block; font-size: 31px; line-height: 1.18; font-weight: 800; letter-spacing: -.015em; }
html body .proto-hero5 .ph5-panel i { display: block; font-style: normal; font-size: 14.5px; line-height: 1.5; margin: 12px 0 22px; color: rgba(20,20,20,.72); }
html body .proto-hero .ph5-sayac { display: flex; gap: 8px; margin-bottom: 24px; }
html body .proto-hero .ph5-kutu {
  flex: 1 1 0; background: var(--murekkep); color: #fff; border-radius: 5px;
  padding: 9px 4px; text-align: center; min-width: 0;
}
html body .proto-hero .ph5-kutu em { display: block; font-style: normal; font-size: 21px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
html body .proto-hero .ph5-kutu i { display: block; font-style: normal; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.66); margin: 3px 0 0; }
html body .proto-hero5 .ph5-panel .ph-dugme { align-self: flex-start; background: var(--murekkep); color: #fff; }
html body .proto-hero5 .ph5-panel .ph-dugme:hover { background: #fff; color: var(--murekkep); }

html body .proto-hero5 .ph5-kartlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
html body .proto-hero5 .ph5-kart {
  background: #fff; border: 1px solid var(--murekkep-10); text-decoration: none;
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
html body .proto-hero5 .ph5-kart:hover { border-color: var(--murekkep-25); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,20,20,.09); }
html body .proto-hero5 .ph5-gorsel { position: relative; display: block; aspect-ratio: 3/4; background: #F3F1EC; overflow: hidden; }
html body .proto-hero5 .ph5-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
html body .proto-hero5 .ph5-kart:hover .ph5-gorsel img { transform: scale(1.04); }
html body .proto-hero5 .ph5-oran {
  position: absolute; left: 10px; top: 10px; font-style: normal;
  background: var(--sari); color: var(--murekkep); font-size: 12.5px; font-weight: 800;
  height: 24px; line-height: 24px; padding: 0 10px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(20,20,20,.10);
}
/* marka adi kendi yazimiyla kalir: buyuk harfe cevrilince Turkce yerelde
   Columbia -> COLUMBIA yerine COLUMBİA oluyordu */
html body .proto-hero5 .ph5-marka { display: block; font-size: 11.5px; letter-spacing: .04em; color: var(--murekkep-50); padding: 12px 12px 0; }
html body .proto-hero5 .ph5-ad {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; line-height: 1.4; color: var(--murekkep); padding: 4px 12px 0; min-height: 38px;
}
html body .proto-hero5 .ph5-fiyat { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px 14px; flex-wrap: wrap; }
html body .proto-hero5 .ph5-fiyat s { font-size: 12px; color: var(--murekkep-50); }
html body .proto-hero5 .ph5-fiyat b { font-size: 15px; font-weight: 700; color: var(--murekkep); }


/* ================= 25. HERO 6 · KISA HERO + KATEGORİ ŞERİDİ ========
   Hero yüksekliği kısaltıldı, hemen altına yatay kategori şeridi geldi.
   Şerit oklarla kayıyor, dokunmatikte parmakla sürükleniyor.          */
html body .proto-hero6 { background: #fff; padding: 22px 0 44px; }
html body .proto-hero6 .ph6-izgara { display: grid; grid-template-columns: 8fr 4fr; gap: 20px; align-items: stretch; }
/* Hero yuksekligini genis alan belirliyor: 1320 px konteynerde 8/12 sutun
   867 px genis, 40/27 oranla 585 px yuksek. Onceki kare kurgu 433 px idi. */
html body .proto-hero6 .ph6-genis { aspect-ratio: 40/27; height: auto; }
html body .proto-hero6 .ph6-dar { aspect-ratio: auto; height: 100%; }
html body .proto-hero6 .ph-yazi b { font-size: 30px; }
html body .proto-hero6 .ph6-dar .ph-yazi b { font-size: 22px; }
html body .proto-hero6 .ph6-dar .ph-yazi i { font-size: 13.5px; }

html body .proto-hero6 .ph6-seritUst {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 38px 0 16px;
}
html body .proto-hero6 .ph6-seritUst h2 { font-size: 23px; font-weight: 700; color: var(--murekkep); margin: 0; }
html body .proto-hero6 .ph6-oklar { display: flex; gap: 8px; }
html body .proto-hero6 .ph6-ok {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--murekkep-15);
  background: #fff; color: var(--murekkep); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  transition: background .18s, border-color .18s, color .18s;
}
html body .proto-hero6 .ph6-ok:hover { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
html body .proto-hero6 .ph6-ok[disabled] { opacity: .35; cursor: default; }
html body .proto-hero6 .ph6-ok[disabled]:hover { background: #fff; border-color: var(--murekkep-15); color: var(--murekkep); }

html body .proto-hero6 .ph6-serit { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; }
html body .proto-hero6 .ph6-serit::-webkit-scrollbar { display: none; }
html body .proto-hero6 .ph6-ray { display: flex; gap: 16px; }
html body .proto-hero6 .ph6-kat {
  flex: 0 0 calc((100% - 80px) / 6); min-width: 150px; text-decoration: none; display: block;
}
html body .proto-hero6 .ph6-katGorsel {
  display: block; aspect-ratio: 2/1; overflow: hidden; border-radius: 4px;
  background: #F3F1EC; border: 1px solid var(--murekkep-10);
}
html body .proto-hero6 .ph6-katGorsel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
html body .proto-hero6 .ph6-kat:hover .ph6-katGorsel img { transform: scale(1.06); }
html body .proto-hero6 .ph6-kat b {
  display: block; text-align: center; margin-top: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--murekkep); transition: color .18s;
}
html body .proto-hero6 .ph6-kat:hover b { color: var(--murekkep-75); }

@media (max-width: 900px) {
  html body .proto-hero4 .ph4-izgara { grid-template-columns: 1fr; }
  html body .proto-hero4 .ph4-sahne { aspect-ratio: 4/3; height: auto; }
  html body .proto-hero5 .ph5-izgara { grid-template-columns: 1fr; }
  html body .proto-hero5 .ph5-panel b { font-size: 25px; }
  html body .proto-hero5 .ph5-kartlar { grid-template-columns: repeat(2, 1fr); }
  html body .proto-hero6 .ph6-izgara { grid-template-columns: 1fr; }
  html body .proto-hero6 .ph6-genis { aspect-ratio: 4/3; height: auto; }
  html body .proto-hero6 .ph6-dar { aspect-ratio: 4/3; }
  html body .proto-hero6 .ph6-seritUst { margin: 26px 0 12px; }
  html body .proto-hero6 .ph6-seritUst h2 { font-size: 19px; }
  html body .proto-hero6 .ph6-kat { flex: 0 0 44%; min-width: 0; }
}
@media (max-width: 560px) {
  html body .proto-hero4 .ph4-agac { grid-template-columns: repeat(2, 1fr); }
  html body .proto-hero5 .ph5-kartlar { grid-template-columns: 1fr 1fr; }
  html body .proto-hero6 .ph6-kat { flex: 0 0 62%; }
}

/* index6'da kategori şeridi zaten üstte: temanın kendi kategori bloğu
   hemen altında tekrar etmesin. */
html body[data-proto-sayfa="index6"] #multiblok_1,
html body[data-proto-sayfa="index7"] #multiblok_1 { display: none !important; }


/* ================= 26. HERO 7 · KISA HERO + FIRSAT PANELİ ==========
   Hero 6'nın sol alanı aynen korunur, sağdaki görsel alanının yerine
   hero 5'teki sayaçlı fırsat paneli gelir. Altındaki kategori şeridi
   hero 6 ile aynıdır.                                                */
/* Panel, satir yuksekligini belirlemesin: yuva hucreyi tutar, panel
   icine yerlesir. Boylece hero yuksekligini yalnizca sol alan belirler. */
html body .proto-hero7 .ph7-yuva { position: relative; min-height: 0; min-width: 0; }
html body .proto-hero7 .ph7-panel {
  position: absolute; inset: 0;
  background: var(--sari); color: var(--murekkep);
  padding: 22px 20px; display: flex; flex-direction: column; min-width: 0;
}
html body .proto-hero7 .ph7-panel > b {
  display: block; font-size: 25px; line-height: 1.2; font-weight: 800;
  letter-spacing: -.015em; margin: 0 0 16px;
}
html body .proto-hero7 .ph5-sayac { margin-bottom: 18px; }
html body .proto-hero7 .ph7-liste { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
html body .proto-hero7 .ph7-urun {
  display: flex; gap: 12px; align-items: center; text-decoration: none;
  background: #fff; border: 1px solid rgba(20,20,20,.08); padding: 8px;
  transition: border-color .18s, transform .18s;
}
html body .proto-hero7 .ph7-urun:hover { border-color: var(--murekkep); transform: translateY(-2px); }
html body .proto-hero7 .ph7-gorsel {
  position: relative; flex: 0 0 56px; width: 56px; aspect-ratio: 3/4;
  overflow: hidden; background: #F3F1EC;
}
html body .proto-hero7 .ph7-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Panel zaten sari; oran rozeti burada mürekkep olur, yoksa zemine karisiyor. */
html body .proto-hero7 .ph7-oran {
  position: absolute; left: 4px; top: 4px; font-style: normal;
  background: var(--murekkep); color: #fff; font-size: 10.5px; font-weight: 800;
  height: 19px; line-height: 19px; padding: 0 6px; border-radius: 3px;
}
html body .proto-hero7 .ph7-yazi { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html body .proto-hero7 .ph7-yazi i { font-style: normal; font-size: 10.5px; letter-spacing: .05em; color: var(--murekkep-50); }
html body .proto-hero7 .ph7-yazi > b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--murekkep);
}
html body .proto-hero7 .ph7-fiyat { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
html body .proto-hero7 .ph7-fiyat s { font-size: 11px; color: var(--murekkep-50); }
html body .proto-hero7 .ph7-fiyat strong { font-size: 13.5px; font-weight: 700; color: var(--murekkep); }
html body .proto-hero7 .ph7-panel .ph-dugme { text-align: center; background: var(--murekkep); color: #fff; }
html body .proto-hero7 .ph7-panel .ph-dugme:hover { background: #fff; color: var(--murekkep); }

@media (max-width: 900px) {
  /* dar ekranda panel akisa girer, mutlak konum kalkar */
  html body .proto-hero7 .ph7-yuva { position: static; }
  html body .proto-hero7 .ph7-panel { position: static; padding: 22px 18px; }
  html body .proto-hero7 .ph7-panel > b { font-size: 22px; }
  html body .proto-hero7 .ph7-gorsel { flex: 0 0 72px; width: 72px; }
}


/* ================= 27. HERO 8 · TAŞAN ŞERİT + AKAN MARKALAR =========
   Hero 7'nin kurgusu daralıp kısaldı. Konteynerin dışındaki boşluklarda
   bir sonraki (solda) ve bir önceki (sağda) slaydın bir kısmı görünüyor;
   görsel soldan akıp geliyormuş hissi veriyor. Kategori şeridinin yerini
   tam genişlikte, kenarları bulanıklaşan akan marka şeridi aldı.        */
html body .proto-hero8 { background: #fff; padding: 22px 0 44px; }
html body .proto-hero8 .ph8-sahne { position: relative; overflow: hidden; }
html body .proto-hero8 .ph8-kap { position: relative; }
/* Bloklar bitisik: ana gorsel, firsat paneli ve iki yandaki tasmalar tek bir
   serit gibi okunsun. Panelin sari cercevesi gorselleri birbirinden ayiriyor. */
html body .proto-hero8 .ph8-izgara { display: grid; grid-template-columns: 9fr 3fr; gap: 0; align-items: stretch; }
html body .proto-hero8 .ph8-genis { aspect-ratio: 21/11; }

/* --- yanlardaki taşma: konteynerin dışına düşen komşu slaytlar --- */
html body .proto-hero8 .ph8-tasma { position: absolute; top: 0; bottom: 0; width: 46vw; overflow: hidden; pointer-events: none; }
html body .proto-hero8 .ph8-sol { right: 100%; }
html body .proto-hero8 .ph8-sag { left: 100%; }
html body .proto-hero8 .ph8-tasmaSlayt { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; display: block; }
html body .proto-hero8 .ph8-tasmaSlayt.aktif { opacity: 1; }
html body .proto-hero8 .ph8-tasmaSlayt img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* soldaki bir sonraki slayt: sağ kenarı görünür, içeri akıyormuş gibi */
html body .proto-hero8 .ph8-sol .ph8-tasmaSlayt img { object-position: right center; }
html body .proto-hero8 .ph8-sag .ph8-tasmaSlayt img { object-position: left center; }
/* taşan kısımlar sönük kalsın, asıl alan öne çıksın */
html body .proto-hero8 .ph8-sol::after,
html body .proto-hero8 .ph8-sag::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}
html body .proto-hero8 .ph8-sol::after { background: linear-gradient(to left, rgba(255,255,255,.20), rgba(255,255,255,.78)); }
html body .proto-hero8 .ph8-sag::after { background: linear-gradient(to right, rgba(255,255,255,.20), rgba(255,255,255,.78)); }

/* --- fırsat paneli: görsel zeminli, küçük sayaçlı --- */
html body .proto-hero8 .ph8-panel {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: space-between; text-decoration: none; background: var(--murekkep);
}
html body .proto-hero8 .ph8-panelGorsel {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
html body .proto-hero8 .ph8-panel::after {
  content: ''; position: absolute; inset: 0; box-sizing: border-box;
  border: 3px solid var(--sari);
  background: linear-gradient(to top, rgba(20,20,20,.88) 0%, rgba(20,20,20,.55) 42%, rgba(20,20,20,.12) 100%);
}
html body .proto-hero8 .ph8-panel:hover .ph8-panelGorsel { transform: scale(1.05); }
html body .proto-hero8 .ph8-panelUst,
html body .proto-hero8 .ph8-panelAlt { position: relative; z-index: 2; }
html body .proto-hero8 .ph8-panelUst { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px 16px 0; }
html body .proto-hero8 .ph8-etiket {
  font-style: normal; background: var(--murekkep); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 4px;
}
html body .proto-hero8 .ph8-oran {
  font-style: normal; background: var(--sari); color: var(--murekkep);
  font-size: 12.5px; font-weight: 800; height: 24px; line-height: 24px;
  padding: 0 10px; border-radius: 4px;
}
html body .proto-hero8 .ph8-panelAlt { padding: 0 16px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
html body .proto-hero8 .ph8-panelAlt b { font-size: 19px; line-height: 1.25; font-weight: 800; color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
/* sayaç artık üç büyük kutu değil, tek satırlık küçük bir künye */
html body .proto-hero8 .ph8-sayac {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px; padding: 8px 16px; backdrop-filter: blur(6px);
}
html body .proto-hero8 .ph8-sayac em {
  font-style: normal; font-size: 19px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1;
}
html body .proto-hero8 .ph8-sayac s { text-decoration: none; color: rgba(255,255,255,.5); font-size: 17px; line-height: 1; }
html body .proto-hero8 .ph8-dugme {
  display: block; width: 100%; text-align: center;
  background: var(--sari); color: var(--murekkep);
  padding: 11px 14px; border-radius: 5px; font-size: 13px; font-weight: 600;
  transition: background .18s, color .18s;
}
html body .proto-hero8 .ph8-panel:hover .ph8-dugme { background: #fff; color: var(--murekkep); }

/* --- akan marka şeridi --- */
html body .proto-hero8 .ph8-markaUst { margin: 38px 0 18px; }
html body .proto-hero8 .ph8-markaUst h2 { font-size: 23px; font-weight: 700; color: var(--murekkep); margin: 0; }
html body .proto-hero8 .ph8-markaUst p { font-size: 13.5px; color: var(--murekkep-50); margin: 4px 0 0; }
html body .proto-hero8 .ph8-markaSerit { position: relative; overflow: hidden; }
html body .proto-hero8 .ph8-marka { overflow: hidden; }
html body .proto-hero8 .ph8-ray {
  display: flex; align-items: center; gap: 64px; width: max-content;
  animation: ph8-ak 42s linear infinite;
}
html body .proto-hero8 .ph8-markaSerit:hover .ph8-ray { animation-play-state: paused; }
@keyframes ph8-ak { from { transform: translate3d(0,0,0); } to { transform: translate3d(-33.3333%,0,0); } }
html body .proto-hero8 .ph8-logo {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  height: 74px; padding: 0 6px; text-decoration: none;
}
html body .proto-hero8 .ph8-logo img {
  max-height: 34px; width: auto; object-fit: contain;
  opacity: .72; transition: opacity .18s, transform .18s;
}
html body .proto-hero8 .ph8-logo:hover img { opacity: 1; transform: scale(1.06); }

/* konteynerin dışına taşan uçlar bulanıklaşıp zemine karışır */
html body .proto-hero8 .ph8-perde {
  position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none;
  width: max(24px, calc((100vw - 1320px) / 2 + 70px));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
html body .proto-hero8 .ph8-perdeSol {
  left: 0;
  background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.94) 34%, rgba(255,255,255,.55) 66%, rgba(255,255,255,0) 100%);
  mask-image: linear-gradient(to right, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%);
}
html body .proto-hero8 .ph8-perdeSag {
  right: 0;
  background: linear-gradient(to left, #fff 0%, rgba(255,255,255,.94) 34%, rgba(255,255,255,.55) 66%, rgba(255,255,255,0) 100%);
  mask-image: linear-gradient(to left, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  html body .proto-hero8 .ph8-ray { animation: none; }
}
@media (max-width: 900px) {
  html body .proto-hero8 .ph8-izgara { grid-template-columns: 1fr; }
  html body .proto-hero8 .ph8-genis { aspect-ratio: 4/3; }
  html body .proto-hero8 .ph8-panel { aspect-ratio: 16/10; }
  /* dar ekranda panel basiklesiyor, karartma da ona gore guclensin */
  html body .proto-hero8 .ph8-panel::after {
    background: linear-gradient(to top, rgba(20,20,20,.92) 0%, rgba(20,20,20,.68) 55%, rgba(20,20,20,.24) 100%);
  }
  html body .proto-hero8 .ph8-tasma { display: none; }
  html body .proto-hero8 .ph8-markaUst { margin: 26px 0 14px; }
  html body .proto-hero8 .ph8-markaUst h2 { font-size: 19px; }
  html body .proto-hero8 .ph8-ray { gap: 42px; }
  html body .proto-hero8 .ph8-logo { height: 60px; }
  html body .proto-hero8 .ph8-logo img { max-height: 28px; }
}