/* hb-kasim30 v1 - Efsane Kasim %30 kart gorunumu (E4), 29.10.2026. Kaynak: ideasoft/panel-kod/hb-kasim30.css
   Yalniz hb-kasim30.js'in isaretledigi ogelere uygulanir: .showcase.hb30-kart (urun karti), .product-price.hb30-pdp
   (urun sayfasi), .hb30-serit (liste seridi). Isaretsiz hicbir ogeye dokunmaz. Kampanya kirmizisi #d62828.
   --hb30-css: betik bu degiskeni gormezse (CSS yuklenmemis) hicbir seyi giydirmez.
   Olculer kartin ic genisligine gore (container query, kap: .showcase-price): en uzun fiyat 1.287,44 TL / 1.839,20 TL
   %30 bloguyla ayni satira sigsin diye 5 kademe; olcum 29.10 (kategori, anasayfa, urun; 320-1920 px). */
:root { --hb30-css: 1; }

/* ---- kart: eski indirim kutusu gizli; fiyat alani = ustte etiket + izgara (yeni fiyat | %30 blogu / Onceki: eski fiyat) ---- */
html body .showcase.hb30-kart .showcase-price .discount-label { display: none !important; }
html body .showcase.hb30-kart .showcase-price { display: block !important; margin-top: 0 !important; container: hb30 / inline-size; }
html body .showcase.hb30-kart .showcase-price::before { display: none !important; }
.hb30-etiket {
  display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 100%; box-sizing: border-box;
  margin: 8px auto 4px 0; padding: 3px 7px; border-radius: 3px; background: #d62828; color: #fff;
  font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: .01em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .showcase.hb30-kart .showcase-price .showcase-price-content {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "fiyat fiyat oran" "onceki eski oran";
  align-items: center; column-gap: 0; row-gap: 2px; width: 100%; height: auto !important; text-align: left;   /* tema bu kutuya sabit yukseklik veriyor */
}
html body .showcase.hb30-kart .showcase-price .showcase-price-content .showcase-price-new {
  grid-area: fiyat; color: #d62828 !important; font-size: 17px !important; font-weight: 800 !important; white-space: nowrap; margin: 0 !important; text-align: left;
}
html body .showcase.hb30-kart .showcase-price .showcase-price-content .showcase-price-old {
  grid-area: eski; color: #6b7466 !important; font-size: 11px !important; font-weight: 500 !important; line-height: 16px !important;
  text-decoration: line-through !important; white-space: nowrap; margin: 0 !important; text-align: left;
}
html body .showcase.hb30-kart .hb30-onceki { grid-area: onceki; margin-right: .3em; color: #6b7466; font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap; text-align: left; }
.hb30-oran {
  grid-area: oran; justify-self: end; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box; min-width: 44px; margin-left: 6px; padding: 4px 6px 3px; border-radius: 6px; background: #d62828; color: #fff;
  line-height: 1; text-align: center; white-space: nowrap; -webkit-animation: hb30-nabiz 1.6s ease-in-out infinite; animation: hb30-nabiz 1.6s ease-in-out infinite;
}
.hb30-oran b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.hb30-oran small { display: block; font-size: 8px; font-weight: 700; letter-spacing: .07em; margin-top: 3px; }
@-webkit-keyframes hb30-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes hb30-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .hb30-oran { -webkit-animation: none; animation: none; } }

/* genis kart (ic >= 172 px; masaustu E4) */
@container hb30 (min-width: 172px) {
  html body .showcase.hb30-kart .showcase-price .showcase-price-content .showcase-price-old,
  html body .showcase.hb30-kart .hb30-onceki { font-size: 12px !important; }
  html body .showcase.hb30-kart .hb30-oran { min-width: 48px; padding: 5px 7px 4px; }
  html body .showcase.hb30-kart .hb30-oran b { font-size: 19px; }
  html body .showcase.hb30-kart .hb30-oran small { font-size: 8.5px; }
}
/* dar kart (149-157 px: 375 px telefon, 1200 px masaustu 4 sutun) */
@container hb30 (max-width: 157.98px) {
  html body .showcase.hb30-kart .showcase-price .showcase-price-content .showcase-price-old,
  html body .showcase.hb30-kart .hb30-onceki { font-size: 10.5px !important; }
  html body .showcase.hb30-kart .hb30-oran { min-width: 42px; margin-left: 5px; padding: 4px 5px 3px; }
  html body .showcase.hb30-kart .hb30-oran b { font-size: 16px; }
  html body .showcase.hb30-kart .hb30-oran small { font-size: 7.5px; }
}
/* daha dar (142-148 px: 360 px telefon, 992 px masaustu) */
@container hb30 (max-width: 148.98px) {
  html body .showcase.hb30-kart .showcase-price .showcase-price-content .showcase-price-new { font-size: 16px !important; }
  html body .showcase.hb30-kart .showcase-price .showcase-price-content .showcase-price-old,
  html body .showcase.hb30-kart .hb30-onceki { font-size: 10px !important; }
  html body .showcase.hb30-kart .hb30-oran { min-width: 40px; margin-left: 4px; }
  html body .showcase.hb30-kart .hb30-oran b { font-size: 15px; }
}
/* en dar (< 142 px: 320-359 px telefon): "Onceki:" kendi satirinda, blok uc satir boyunca */
@container hb30 (max-width: 141.98px) {
  html body .showcase.hb30-kart .showcase-price .showcase-price-content { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "fiyat oran" "onceki oran" "eski oran"; row-gap: 0; }
  html body .showcase.hb30-kart .showcase-price .showcase-price-content .showcase-price-new { font-size: clamp(12px, 10.9cqi, 15px) !important; }
  html body .showcase.hb30-kart .hb30-onceki { line-height: 14px; }
  html body .showcase.hb30-kart .showcase-price .showcase-price-content .showcase-price-old { line-height: 14px !important; }
  html body .showcase.hb30-kart .hb30-oran { min-width: 38px; padding: 4px 4px 3px; }
  html body .showcase.hb30-kart .hb30-oran b { font-size: 14px; }
  html body .showcase.hb30-kart .hb30-oran small { font-size: 7px; letter-spacing: .04em; }
}
/* container query desteklemeyen eski tarayici (iOS < 16): dar telefonda dar kademe */
@supports not (container-type: inline-size) {
  @media (max-width: 389px) {
    html body .showcase.hb30-kart .showcase-price .showcase-price-content .showcase-price-new { font-size: 15px !important; }
    html body .showcase.hb30-kart .showcase-price .showcase-price-content .showcase-price-old,
    html body .showcase.hb30-kart .hb30-onceki { font-size: 10px !important; }
    html body .showcase.hb30-kart .hb30-oran { min-width: 38px; margin-left: 4px; padding: 4px 4px 3px; }
    html body .showcase.hb30-kart .hb30-oran b { font-size: 14px; }
    html body .showcase.hb30-kart .hb30-oran small { font-size: 7px; letter-spacing: .04em; }
  }
}

/* ---- urun sayfasi: fiyatin ustunde kucuk etiket, IdeaSoft indirim kutusu yerine %30 blogu ---- */
.hb30-etiket.hb30-etiket-u { margin: 2px auto 8px 0; padding: 3px 8px; font-size: 12px; line-height: 16px; }
html body .product-price.hb30-pdp .discount-label { display: none !important; }
html body .product-price.hb30-pdp .hb30-oran { align-self: flex-end; min-width: 58px; margin-left: 0; padding: 6px 9px 5px; }
html body .product-price.hb30-pdp .hb30-oran b { font-size: 22px; }
html body .product-price.hb30-pdp .hb30-oran small { font-size: 9.5px; }

/* ---- liste seridi (kategori, arama, marka): listede en az bir %30 kart varsa ---- */
.hb30-serit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 0 14px; padding: 7px 14px;
  border-radius: 8px; background: #d62828; color: #fff; text-align: center; line-height: 1.35;
}
.hb30-serit b { margin: 2px 5px; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.hb30-serit span { margin: 2px 5px; font-size: 13px; font-weight: 500; }