/* =========================================================
   HAŞERE MARKET — AKINSOFT NATIVE ÜRÜN DETAY SAYFASI
   HM-020A / Firebase Master CSS v1.4 — 13.09.2026

   KAPSAM
   - AKINSOFT native ürün detay DOM'u
   - Ürün galerisi + satın alma kartı
   - Birlikte al / Bunlar da Lazım Olabilir
   - Native sekmeler + ERP özellik tablosu
   - Tavsiye Edilen / Benzer Ürünler
   - Desktop-first; tablet/mobil uyarlaması dahil

   KORUMA
   - .hm-product ve altındaki özel ürün açıklaması sınıflarına dokunmaz.
   - AKINSOFT'un JS ile yönettiği display / varyant / birim durumlarını zorla açmaz.
   ========================================================= */

/* ---------------------------------------------------------
   00 — TASARIM DEĞİŞKENLERİ
   --------------------------------------------------------- */
detail-region{
  --hmnp-green:#214f2d;
  --hmnp-green-2:#315b3a;
  --hmnp-green-dark:#173c22;
  --hmnp-green-soft:#edf4ea;
  --hmnp-cream:#fffdf8;
  --hmnp-cream-2:#f7f8f3;
  --hmnp-orange:#e56d22;
  --hmnp-orange-soft:#fff3e9;
  --hmnp-text:#2f3a33;
  --hmnp-muted:#68736c;
  --hmnp-line:#dde4da;
  --hmnp-line-2:#e9ece5;
  --hmnp-white:#fff;
  --hmnp-shadow:0 8px 24px rgba(30,62,37,.07);
  --hmnp-shadow-hover:0 12px 30px rgba(30,62,37,.11);
  --hmnp-radius:12px;
  --hmnp-radius-sm:8px;
  --hmnp-font:Arial,Helvetica,sans-serif;
}


/* Sayfayı geniş ama kontrollü tut. */
detail-region > .container-fluid > .container{
  width:calc(100% - 28px)!important;
  max-width:1500px!important;
  margin:0 auto!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* ---------------------------------------------------------
   01 — BREADCRUMB
   --------------------------------------------------------- */
detail-region .breadcrumbBlock{
  margin:0 0 12px!important;
  padding:0!important;
}

detail-region .breadcrumbBlock .breadcrumb{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
}

detail-region .breadcrumbBlock .breadcrumb li,
detail-region .breadcrumbBlock .breadcrumb li a,
detail-region .breadcrumbBlock .breadcrumb li.active span{
  float:none!important;
}

detail-region .breadcrumbBlock .breadcrumb li a,
detail-region .breadcrumbBlock .breadcrumb li.active span{
  padding:9px 25px 9px 0!important;
  color:#738078!important;
  font:400 12.5px/1.25 var(--hmnp-font)!important;
}

detail-region .breadcrumbBlock .breadcrumb li a:before{
  top:10px!important;
  right:9px!important;
  color:#9aa59e!important;
}

detail-region .breadcrumbBlock .breadcrumb li.active span{
  color:#4e5a52!important;
}

/* ---------------------------------------------------------
   02 — ANA ÜRÜN YERLEŞİMİ
   Desktop: Bootstrap kolon davranışını burada kontrollü bir grid'e
   çeviriyoruz. Galeri ve sağ kartın birbirini esnetmesine izin verilmez.
   --------------------------------------------------------- */
@media(min-width:992px){
  detail-region > .container-fluid > .container > .row.m-0:has(> .detailImagesBlock):has(> .detailRightBlock){
    display:grid!important;
    grid-template-columns:minmax(0,44%) minmax(0,56%)!important;
    column-gap:18px!important;
    align-items:start!important;
  }

  detail-region > .container-fluid > .container > .row.m-0:has(> .detailImagesBlock):has(> .detailRightBlock) > .breadcrumbBlock{
    grid-column:1/-1!important;
  }

  detail-region .detailImagesBlock{
    grid-column:1!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    align-self:start!important;
  }

  detail-region .detailImagesBlock > .clear--fix,
  detail-region .detailImagesBlock #detailImageSlider{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }

  detail-region .detailRightBlock{
    grid-column:2!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    align-self:start!important;
  }

  detail-region .detailRightBlock > .row{
    height:auto!important;
  }
}

/* ---------------------------------------------------------
   03 — ÜRÜN GÖRSEL GALERİSİ
   --------------------------------------------------------- */
detail-region .detailImagesBlock{
  position:relative!important;
}

detail-region .detailImagesBlock #detailImageSlider .gallery-top{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:1 / 1!important;
  border:1px solid var(--hmnp-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:0 4px 16px rgba(31,77,4,.04)!important;
}

detail-region .detailImagesBlock #detailImageSlider .gallery-top .swiper-wrapper,
detail-region .detailImagesBlock #detailImageSlider .gallery-top .swiper-slide,
detail-region .detailImagesBlock #detailImageSlider .gallery-top .detailImageGroup,
detail-region .detailImagesBlock #detailImageSlider .gallery-top .magnify{
  height:100%!important;
}

detail-region .detailImagesBlock #detailImageSlider .gallery-top .swiper-slide,
detail-region .detailImagesBlock #detailImageSlider .gallery-top .detailImageGroup,
detail-region .detailImagesBlock #detailImageSlider .gallery-top .magnify{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

detail-region .detailImagesBlock #detailImageSlider .gallery-top .detailImageGroup{
  width:100%!important;
}

detail-region .detailImagesBlock #detailImageSlider .gallery-top .zoom{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0 auto!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Etiketler */
detail-region .detailImagesBlock .detailTag{
  top:10px!important;
  left:0!important;
  width:auto!important;
  z-index:5!important;
}

detail-region .detailImagesBlock .detailTag span{
  padding:5px 18px 5px 8px!important;
  border-radius:0!important;
  font:700 11px/1.1 var(--hmnp-font)!important;
  letter-spacing:.1px!important;
}

detail-region .detailImagesBlock .detailTag span.newTag{
  background:#f2efff!important;
  color:#8d75e6!important;
}

detail-region .detailImagesBlock .detailTag span.discountTag{
  background:#fff0ea!important;
  color:#cf551a!important;
}

/* Ana görsel okları */
detail-region .detailImagesBlock .swiper-button-next,
detail-region .detailImagesBlock .swiper-button-prev{
  width:40px!important;
  height:48px!important;
  margin-top:-24px!important;
  z-index:8!important;
}

detail-region .detailImagesBlock #detailImageSlider .gallery-top .swiper-button-prev{
  left:12px!important;
}

detail-region .detailImagesBlock #detailImageSlider .gallery-top .swiper-button-next{
  right:12px!important;
}

detail-region .detailImagesBlock .swiper-button-next:after,
detail-region .detailImagesBlock .swiper-button-prev:after{
  top:0!important;
  width:40px!important;
  height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:8px!important;
  background:rgba(23,60,34,.10)!important;
  color:#fff!important;
  font-size:38px!important;
  line-height:48px!important;
}

detail-region .detailImagesBlock .swiper-button-next:hover:after,
detail-region .detailImagesBlock .swiper-button-prev:hover:after{
  background:rgba(23,60,34,.68)!important;
}

/* Küçük önizlemeler.
   Kritik: Swiper'ın slide genişliği hesaplamasına zorla display/flex genişliği
   vermiyoruz. Yalnız thumbnail swiper'ının kendi çalışma genişliğini sınırlarız.
   Böylece kare kartlar korunur ve devasa slide oluşmaz. */
detail-region .detailImagesBlock .gallery-thumbs{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:10px 0 0!important;
  padding:1px 0 4px!important;
  overflow:hidden!important;
}

detail-region .detailImagesBlock .gallery-thumbs .swiper-wrapper{
  align-items:stretch!important;
}

detail-region .detailImagesBlock .gallery-thumbs .swiper-slide{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1/1!important;
  padding:4px!important;
  border:1px solid var(--hmnp-line)!important;
  border-radius:8px!important;
  background:#fff!important;
  overflow:hidden!important;
}

detail-region .detailImagesBlock .gallery-thumbs .swiper-slide > a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
}

detail-region .detailImagesBlock .gallery-thumbs .swiper-slide-thumb-active{
  border-color:var(--hmnp-orange)!important;
  box-shadow:0 0 0 1px rgba(229,109,34,.12)!important;
}

detail-region .detailImagesBlock .gallery-thumbs img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  object-fit:contain!important;
}



@media(min-width:992px){
  /* Kare ana galeri masaüstünde sol kolonun gerçek genişliğini kullanır.
     Böylece kare ürün görseli çerçevenin tamamına oturur ve thumbnail şeridi
     ana galeriyle aynı sağ/sol hatta biter. */
  detail-region .detailImagesBlock #detailImageSlider .gallery-top{
    aspect-ratio:1 / 1!important;
  }
}
/* ---------------------------------------------------------
   04 — SAĞ BİLGİ / SATIN ALMA KARTI
   --------------------------------------------------------- */
detail-region .detailRightBlock > .row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:0 12px!important;
  margin:0!important;
  padding:18px 20px 17px!important;
  border:1px solid var(--hmnp-line)!important;
  border-top:2px solid var(--hmnp-orange)!important;
  border-radius:var(--hmnp-radius)!important;
  background:linear-gradient(180deg,#fffefb 0%,#fbfcf8 100%)!important;
  box-shadow:var(--hmnp-shadow)!important;
}

detail-region .detailRightBlock > .row > *{
  width:100%!important;
  max-width:none!important;
}

detail-region .detailRightBlock > .row > div:empty{
  display:none!important;
}

/* ---------------------------------------------------------
   05 — BAŞLIK / DEĞERLENDİRME
   --------------------------------------------------------- */
detail-region .detailTitleBlock{
  grid-column:1/-1!important;
  grid-row:1!important;
  margin:0!important;
  padding:0 0 10px!important;
  border-bottom:1px solid var(--hmnp-line-2)!important;
}

detail-region .detailTitleBlock strong{
  display:block!important;
}

detail-region .detailTitleBlock h1{
  margin:0 0 5px!important;
  color:var(--hmnp-green-dark)!important;
  font:700 23px/1.24 var(--hmnp-font)!important;
  letter-spacing:-.25px!important;
}

detail-region .detailTitleBlock > span{
  display:block!important;
  margin:0!important;
  color:#4f5d54!important;
  font:400 13.5px/1.42 var(--hmnp-font)!important;
}

detail-region .detailCommentSummary{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin:8px 0 0!important;
}

detail-region .detailCommentSummary span,
detail-region .detailCommentSummary button{
  float:none!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#617067!important;
  font:400 11.5px/1.2 var(--hmnp-font)!important;
}

detail-region .detailCommentSummary .pe-7s-star{color:var(--hmnp-orange)!important}
detail-region .detailCommentSummary button{color:var(--hmnp-green)!important}

/* ---------------------------------------------------------
   06 — STOK / MARKA / EK ALANLAR
   --------------------------------------------------------- */
detail-region .detailInfoGroup{
  grid-column:1/-1!important;
  grid-row:2!important;
  margin:9px 0 10px!important;
  padding:0!important;
  background:transparent!important;
}

detail-region .detailInfoGroup ul{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:6px 12px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}

detail-region .detailInfoGroup .detailInfoItem{
  margin:0!important;
  padding:0!important;
  color:var(--hmnp-text)!important;
  font:400 12.5px/1.4 var(--hmnp-font)!important;
}

detail-region .detailInfoGroup .detailInfoItem:not(.additionalSpace){
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  min-width:0!important;
  white-space:nowrap!important;
}

detail-region .detailInfoGroup .detailInfoItem:not(.additionalSpace) b{
  color:var(--hmnp-green-dark)!important;
  font-weight:700!important;
}

detail-region .detailInfoGroup .detailInfoItem:not(.additionalSpace) a{
  color:var(--hmnp-green)!important;
  font-weight:500!important;
  text-decoration:none!important;
}

detail-region .detailInfoItem[data-selector="Ek Alan 1"],
detail-region .detailInfoItem[data-selector="Ek Alan 2"],
detail-region .detailInfoItem[data-selector="Ek Alan 3"]{
  grid-column:1/-1!important;
  margin:0!important;
  padding:6px 10px!important;
  border-left:2px solid var(--hmnp-orange)!important;
  border-right:1px solid #ece7dd!important;
  background:#fffdf8!important;
}

detail-region .detailInfoItem[data-selector="Ek Alan 1"]{
  margin-top:2px!important;
  border-top:1px solid #ece7dd!important;
  border-radius:8px 8px 0 0!important;
}

detail-region .detailInfoItem[data-selector="Ek Alan 2"]{
  border-top:1px solid #f0ece4!important;
}

detail-region .detailInfoItem[data-selector="Ek Alan 3"]{
  border-top:1px solid #f0ece4!important;
  border-bottom:1px solid #ece7dd!important;
  border-radius:0 0 8px 8px!important;
}

detail-region .detailInfoItem.additionalSpace label{
  margin:0!important;
  color:#303b34!important;
  font:500 12px/1.4 var(--hmnp-font)!important;
}

/* ---------------------------------------------------------
   07 — FİYAT / ADET / BİRİM
   --------------------------------------------------------- */
detail-region .detailPriceBlock{
  grid-column:1!important;
  grid-row:3!important;
  display:block!important;
  margin:0 0 10px!important;
  padding:6px 0 5px 11px!important;
  border:0!important;
  border-left:2px solid var(--hmnp-orange)!important;
  min-height:46px!important;
}

detail-region .detailPriceBlock .price-item{
  display:block!important;
  float:none!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

detail-region .detailPriceBlock .price-item strong{
  display:block!important;
  float:none!important;
  width:auto!important;
  margin:0 0 3px!important;
  padding:0!important;
  color:#5c685f!important;
  font:700 10.8px/1.15 var(--hmnp-font)!important;
}

detail-region .detailPriceBlock .price-item span.price-sticker,
detail-region .detailPriceBlock .price-item span.calcDisPrice{
  display:block!important;
  float:none!important;
  width:auto!important;
  color:var(--hmnp-orange)!important;
  font:700 21px/1 var(--hmnp-font)!important;
}

/* input-group yalnız layout kabuğu; JS davranışına dokunma */
detail-region .detailRightBlock > .row > .input-group{
  display:contents!important;
}

detail-region .quantityBlok{
  grid-column:2!important;
  grid-row:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  margin:0 0 10px!important;
  padding:5px 0 0!important;
}

/* DİKKAT: display değeri değiştirilmez; gizli KOLİ/ADET bloğu AKINSOFT JS kontrolündedir. */
detail-region .quantityBlok .price-input-block{
  position:relative!important;
  float:none!important;
  width:96px!important;
  height:36px!important;
  min-width:96px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #d7e0d4!important;
  border-radius:18px!important;
  background:#fff!important;
  overflow:hidden!important;
}

detail-region .quantityBlok .price-input-block input{
  width:100%!important;
  max-width:100%!important;
  height:34px!important;
  margin:0!important;
  padding:0 28px!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#334037!important;
  font:700 12.5px/34px var(--hmnp-font)!important;
  text-align:center!important;
}

detail-region .quantityBlok .btn-detail-minus,
detail-region .quantityBlok .btn-detail-plus{
  position:absolute!important;
  top:0!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:30px!important;
  height:34px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--hmnp-green)!important;
  font:600 17px/1 var(--hmnp-font)!important;
  text-decoration:none!important;
}

detail-region .quantityBlok .btn-detail-minus{left:0!important}
detail-region .quantityBlok .btn-detail-plus{right:0!important}

detail-region .quantityBlok .btn-detail-minus:hover,
detail-region .quantityBlok .btn-detail-plus:hover{
  background:var(--hmnp-green-soft)!important;
}

detail-region .quantityBlok .detailUnit{
  float:none!important;
  width:105px!important;
  max-width:105px!important;
  height:36px!important;
  margin:0!important;
  padding:0 29px 0 10px!important;
  border:1px solid #d7e0d4!important;
  border-radius:18px!important;
  background-color:#fff!important;
  color:#59665d!important;
  font:600 11px/1 var(--hmnp-font)!important;
  text-align-last:center!important;
}

/* ---------------------------------------------------------
   08 — VARYANTLAR
   Ambalaj üstte, Tavsiye Edilen Haşere Türleri altta.
   --------------------------------------------------------- */
detail-region .detailRightBlock > .row > div:has(> .variantArea){
  grid-column:1/-1!important;
  grid-row:4!important;
}

detail-region .variantArea{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  margin:0 0 10px!important;
  padding:9px 10px!important;
  border:1px solid #e9e4d9!important;
  border-radius:10px!important;
  background:#fffdf8!important;
}

detail-region .variantArea > .row{
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

detail-region .variantArea > .row:first-child{order:2!important;margin-top:7px!important}
detail-region .variantArea > .row:nth-child(2){order:1!important}
detail-region .variantArea variant{display:none!important}

detail-region .variantAreaColor,
detail-region .variantAreaSize{
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

detail-region .variantAreaColor > strong,
detail-region .variantAreaSize > strong{
  display:block!important;
  float:none!important;
  width:100%!important;
  margin:0 0 5px!important;
  color:var(--hmnp-green-dark)!important;
  font:700 11.8px/1.2 var(--hmnp-font)!important;
  text-transform:none!important;
}

detail-region .variantAreaSize > a{
  display:inline-flex!important;
  float:none!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:55px!important;
  height:31px!important;
  margin:0 5px 0 0!important;
  padding:0 9px!important;
  border:1px solid #d7dfd4!important;
  border-radius:7px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#38453c!important;
  font:600 10.8px/1 var(--hmnp-font)!important;
  text-decoration:none!important;
}

detail-region .variantAreaSize > a.variantSelected{
  border-color:var(--hmnp-green)!important;
  box-shadow:0 0 0 1px rgba(33,79,45,.12)!important;
  background:#f8fbf7!important;
  color:var(--hmnp-green-dark)!important;
}

detail-region .variantAreaColor > a{
  display:inline-flex!important;
  float:none!important;
  vertical-align:top!important;
  align-items:center!important;
  justify-content:center!important;
  width:46px!important;
  height:46px!important;
  margin:0 5px 0 0!important;
  padding:4px!important;
  border:1px solid #d7ddd1!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:none!important;
}

detail-region .variantAreaColor > a img{
  display:block!important;
  width:36px!important;
  height:36px!important;
  padding:0!important;
  border-radius:5px!important;
  object-fit:contain!important;
}

detail-region .variantAreaColor > a.variantSelected{
  border-color:var(--hmnp-green)!important;
  box-shadow:0 0 0 1px rgba(33,79,45,.10)!important;
}

/* Varyant hata / uyarı alanı native davranış korunarak markaya uyarlanır. */
detail-region .variantWarning{
  border-color:#f0c6b0!important;
  background:#fff6f1!important;
  color:#a84b1d!important;
  font-family:var(--hmnp-font)!important;
}

/* ---------------------------------------------------------
   09 — KARGO SAYACI
   Native saat ikonu yalnız pseudo-elementtir; metin korunur.
   --------------------------------------------------------- */
detail-region .detailRightBlock > .row > div:has(> .CCounter){
  grid-column:1/-1!important;
  grid-row:5!important;
  display:block!important;
  width:100%!important;
  margin:1px 0 7px!important;
  padding:0!important;
}

detail-region .CCounter{
  display:block!important;
  float:none!important;
  width:100%!important;
  margin:0!important;
  padding:4px 8px!important;
  border:0!important;
  border-radius:7px!important;
  background:#f5f8f3!important;
  color:#3f4e44!important;
  font:700 10.7px/1.25 var(--hmnp-font)!important;
  text-align:center!important;
}

detail-region .CCounter::after{display:none!important}
detail-region .CCounter br{display:none!important}
detail-region .CCounter span{
  margin-left:4px!important;
  color:#536159!important;
  font:500 10.7px/1.25 var(--hmnp-font)!important;
}

/* ---------------------------------------------------------
   10 — ANA SATIN ALMA BUTONLARI
   --------------------------------------------------------- */
detail-region .basketButtonBlock{
  grid-column:1/-1!important;
  grid-row:6!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 8px!important;
  padding:0!important;
}

detail-region .basketButtonBlock > *{
  float:none!important;
  position:static!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
}

detail-region .basketButtonBlock .detailFavBtn{display:none!important}

detail-region .basketButtonBlock > button.baketButton{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:100%!important;
  height:39px!important;
  margin:0!important;
  padding:0 10px!important;
  border-radius:8px!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font:700 12px/1 var(--hmnp-font)!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
}

detail-region .basketButtonBlock > button.baketButton:not(.hemenal){
  grid-column:1!important;
  border:1px solid var(--hmnp-green)!important;
  background:var(--hmnp-green-2)!important;
  color:#fff!important;
}

detail-region .basketButtonBlock > button.baketButton.hemenal{
  grid-column:2!important;
  border:1px solid #cad9c7!important;
  background:var(--hmnp-green-soft)!important;
  color:var(--hmnp-green-dark)!important;
}

detail-region .basketButtonBlock > button.baketButton i,
detail-region .basketButtonBlock > button.baketButton span{
  display:inline-flex!important;
  float:none!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:inherit!important;
}

detail-region .basketButtonBlock > button.baketButton span{
  font:inherit!important;
}

detail-region .basketButtonBlock > button.baketButton i.fa{
  font-family:FontAwesome!important;
  font-style:normal!important;
  font-weight:normal!important;
  font-size:14px!important;
  line-height:1!important;
}

detail-region .basketButtonBlock > button.baketButton:hover{
  transform:translateY(-1px)!important;
}

detail-region .basketButtonBlock > button.baketButton:not(.hemenal):hover{
  background:var(--hmnp-green-dark)!important;
  color:#fff!important;
}

detail-region .basketButtonBlock > button.baketButton.hemenal:hover{
  background:#e4eee1!important;
  color:var(--hmnp-green-dark)!important;
}

/* ---------------------------------------------------------
   11 — YARDIMCI AKSİYONLAR
   WhatsApp + Arkadaşına Öner + Favori
   --------------------------------------------------------- */
detail-region .detailExtraBtnBlock{
  grid-column:1/-1!important;
  grid-row:7!important;
  display:grid!important;
  grid-template-columns:1.08fr 1fr 36px!important;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
  padding:8px 0 0!important;
  border-top:1px solid var(--hmnp-line-2)!important;
}

detail-region .detailExtraBtnBlock .detailExtraBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  width:100%!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 7px!important;
  border:1px solid #d9e0d6!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#4d5b52!important;
  font:600 10.5px/1 var(--hmnp-font)!important;
  text-decoration:none!important;
  line-height:1!important;
}

detail-region .detailExtraBtnBlock .btnWhatsappOrder{
  grid-column:1!important;
  grid-row:1!important;
  border-color:#c8dfcc!important;
  background:#f8fbf7!important;
  color:#24713a!important;
}

detail-region .detailExtraBtnBlock .btnWhatsappOrder img{display:none!important}

detail-region .detailExtraBtnBlock .btnWhatsappOrder::before{
  content:"\f232"!important;
  font-family:FontAwesome!important;
  font-size:13px!important;
  color:#1aa34a!important;
}

detail-region .detailExtraBtnBlock > button:not(.detailFavoriteBtn){
  grid-column:2!important;
  grid-row:1!important;
}

detail-region .detailExtraBtnBlock .detailFavoriteBtn{
  grid-column:3!important;
  grid-row:1!important;
  display:flex!important;
  width:36px!important;
  min-width:36px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  border-radius:50%!important;
}

detail-region .detailExtraBtnBlock .detailFavoriteBtn .detailExtraFavoriteBtn{display:none!important}

detail-region .detailExtraBtnBlock .detailExtraBtn i{
  float:none!important;
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  color:var(--hmnp-green)!important;
  font-size:16px!important;
  transform:none!important;
}

/* ---------------------------------------------------------
   12 — ÜRÜN İKONLARI / SOSYAL PAYLAŞIM
   --------------------------------------------------------- */
detail-region .productIconSet{
  grid-column:1/-1!important;
  grid-row:8!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  margin:10px 0 0!important;
  padding:7px 0 0!important;
  border-top:1px solid var(--hmnp-line-2)!important;
}

detail-region .productIconSet .productIconItem{
  float:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
}

detail-region .productIconSet .productIconItem img{
  width:44px!important;
  height:44px!important;
  padding:0!important;
  object-fit:contain!important;
}

detail-region .detailSocialBtnBlock{
  grid-column:1/-1!important;
  grid-row:9!important;
  display:block!important;
  visibility:visible!important;
  margin:8px 0 0!important;
  padding:7px 0 0!important;
  border-top:1px solid var(--hmnp-line-2)!important;
}

detail-region .detailSocialBtnBlock .pageDetailRightSocial,
detail-region .detailSocialBtnBlock .pageDetailRightSocial > div{
  display:block!important;
  visibility:visible!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

detail-region .detailSocialBtnBlock .paylasim{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:4px!important;
  margin:0!important;
  padding:0!important;
}

detail-region .detailSocialBtnBlock .paylasim a{
  width:27px!important;
  height:27px!important;
  margin:0!important;
  opacity:.88!important;
}

detail-region #credit-content-detail{
  grid-column:1/-1!important;
  grid-row:10!important;
}

/* ---------------------------------------------------------
   13 — BUNLAR DA LAZIM OLABİLİR / KİT ÜRÜNLERİ
   --------------------------------------------------------- */
detail-region .tmp10{
  margin-top:26px!important;
}

detail-region .kitProduct{
  padding:0!important;
  background:transparent!important;
}

detail-region .kitProduct .productBlockTitle{
  margin:0 0 12px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

detail-region .kitProduct .productBlockTitle strong{
  color:var(--hmnp-green-dark)!important;
  font:600 16px/1.3 var(--hmnp-font)!important;
  letter-spacing:-.08px!important;
}

@media(min-width:992px){
  detail-region .kitProduct > .row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 170px!important;
    gap:15px!important;
    align-items:start!important;
  }

  detail-region .kitProduct > .row > .col-lg-10{
    width:100%!important;
    max-width:none!important;
    flex:none!important;
    padding:0!important;
  }

  detail-region .kitProduct > .row > .kitButtonGroup{
    width:100%!important;
    max-width:none!important;
    flex:none!important;
  }
}

detail-region .kitProduct .row.flex-nowrap.overflow-auto{
  gap:8px!important;
  margin:0!important;
  padding:0 0 8px!important;
  border-right:0!important;
  scrollbar-width:thin!important;
  scrollbar-color:#aeb8b0 transparent!important;
}

detail-region .kitProduct .row.flex-nowrap.overflow-auto::-webkit-scrollbar{height:7px!important}
detail-region .kitProduct .row.flex-nowrap.overflow-auto::-webkit-scrollbar-thumb{background:#aeb8b0!important;border-radius:9px!important}

detail-region .kitProduct .spProductItem{
  flex:0 0 220px!important;
  width:220px!important;
  max-width:220px!important;
  min-width:220px!important;
  margin:0!important;
  padding:0!important;
}

detail-region .kitProduct .spProductItem productitem{
  display:flex!important;
  width:100%!important;
  height:100%!important;
  font-family:var(--hmnp-font)!important;
}

detail-region .kitProduct .spProductItem .productItemBlock{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-height:286px!important;
  margin:0!important;
  padding:8px!important;
  border:1px solid #e3e8e1!important;
  border-radius:9px!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(31,77,4,.05)!important;
  overflow:hidden!important;
}

detail-region .kitProduct .spProductItem .productItemImage{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:132px!important;
  min-height:132px!important;
  max-height:132px!important;
  margin:0 0 5px!important;
  background:#fff!important;
  overflow:hidden!important;
}

detail-region .kitProduct .spProductItem .productItemImage > a,
detail-region .kitProduct .spProductItem .productItemImage img{
  width:100%!important;
  height:100%!important;
}

detail-region .kitProduct .spProductItem .productItemImage img{object-fit:contain!important}

/* Kit alanında ikon kümeleri kartları gereksiz uzatmasın. */
detail-region .kitProduct .spProductItem .productIconDefault{display:none!important}

detail-region .kitProduct .spProductItem .productItemTitle{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  min-height:100px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

detail-region .kitProduct .spProductItem .productItemTitle a{
  color:var(--hmnp-green-dark)!important;
  text-decoration:none!important;
}

detail-region .kitProduct .spProductItem .productItemTitle a strong{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  min-height:42px!important;
  max-height:42px!important;
  padding:0 0 2px!important;
  overflow:hidden!important;
  color:#173a23!important;
  font:700 12.2px/1.38 var(--hmnp-font)!important;
}

detail-region .kitProduct .spProductItem .listAdditionalArea{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  min-height:32px!important;
  max-height:34px!important;
  margin:2px 0!important;
  overflow:hidden!important;
  color:var(--hmnp-muted)!important;
  font:400 10.8px/1.42 var(--hmnp-font)!important;
  text-align:left!important;
}

detail-region .kitProduct .spProductItem .productItemBrand{
  display:block!important;
  height:16px!important;
  margin:0!important;
  overflow:hidden!important;
  color:#7a867e!important;
  font:400 10.4px/16px var(--hmnp-font)!important;
  text-align:left!important;
}

detail-region .kitProduct .spProductItem .d-table-row-group{
  display:block!important;
  width:100%!important;
  margin-top:auto!important;
}

detail-region .kitProduct .spProductItem .align-self-end{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  min-height:21px!important;
}

detail-region .kitProduct .spProductItem .productPrice,
detail-region .kitProduct .spProductItem .productPrice *{
  width:auto!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}

detail-region .kitProduct .spProductItem .calcDisPrice{
  color:#26372c!important;
  font:700 12.5px/1.1 var(--hmnp-font)!important;
}

detail-region .kitProduct .spProductItem .basketButton{display:none!important}

/* Seçim kutuları */
detail-region .kitProduct .spProductItem > .checkbox{
  top:8px!important;
  left:8px!important;
}

detail-region .kitProduct .checkbox .cr{
  width:18px!important;
  height:18px!important;
  border-radius:4px!important;
  background:var(--hmnp-green)!important;
}

/* İlk ürün ile ek ürünler arasındaki + işareti */
detail-region .kitProduct .firstProduct{margin-right:28px!important}
detail-region .kitProduct .firstProduct:after{
  margin-left:8px!important;
  color:var(--hmnp-green)!important;
  font-size:28px!important;
  font-weight:400!important;
}

/* Kit toplam alanı */
detail-region .kitProduct .kitButtonGroup{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-self:start!important;
  gap:8px!important;
  min-height:0!important;
  height:auto!important;
  padding:12px!important;
  border:1px solid var(--hmnp-line)!important;
  border-radius:9px!important;
  background:#fffdf8!important;
}

detail-region .kitProduct .kitButtonGroup strong{
  display:block!important;
  margin:0!important;
  color:#566158!important;
  font:600 11px/1.35 var(--hmnp-font)!important;
  text-align:left!important;
}

detail-region .kitProduct .kitButtonGroup strong label{
  display:block!important;
  margin:3px 0 0!important;
  color:var(--hmnp-green-dark)!important;
  font:700 17px/1.1 var(--hmnp-font)!important;
  text-align:left!important;
}

detail-region .kitProduct .kitButtonGroup button{
  width:100%!important;
  height:36px!important;
  padding:0 9px!important;
  border:1px solid var(--hmnp-green)!important;
  border-radius:7px!important;
  background:var(--hmnp-green)!important;
  color:#fff!important;
  font:700 11px/1 var(--hmnp-font)!important;
}

/* ---------------------------------------------------------
   14 — NATIVE SEKMELER
   --------------------------------------------------------- */
detail-region nav:has(> #nav-tab){
  margin-top:26px!important;
}

detail-region #nav-tab.nav-tabs{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;
  width:100%!important;
  max-width:780px!important;
  margin:0 auto 16px!important;
  padding:5px!important;
  border:1px solid #e1e8df!important;
  border-radius:11px!important;
  background:#f6f8f4!important;
}

detail-region #nav-tab .nav-link{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:37px!important;
  margin:0!important;
  padding:6px 8px!important;
  border:1px solid transparent!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#56635a!important;
  font:600 12.5px/1.2 var(--hmnp-font)!important;
  text-align:center!important;
}

detail-region #nav-tab .nav-link.active{
  border-color:#d1e0ce!important;
  background:#fff!important;
  box-shadow:0 2px 8px rgba(31,77,4,.05)!important;
  color:var(--hmnp-green-dark)!important;
}

detail-region #nav-tab .nav-link.active::after{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  bottom:-1px;
  height:2px;
  border-radius:2px;
  background:var(--hmnp-orange);
}

detail-region #nav-tab .nav-link{position:relative!important}

/* Tab content kabuğunu ürün açıklamasına zorla stil vermeden nötr tut. */
detail-region #nav-tabContent{
  margin-bottom:20px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

/* ---------------------------------------------------------
   15 — ERP ÜRÜN ÖZELLİKLERİ TABLOSU
   Yalnız .properDiv; .hm-product alanına dokunmaz.
   --------------------------------------------------------- */
detail-region #nav-description > .properDiv{
  width:100%!important;
  margin:0 0 10px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #dfe7dd!important;
  border-radius:11px!important;
  background:#fff!important;
}

detail-region #nav-description > .properDiv .propertiesTable{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-top:1px solid #e8ede6!important;
  background:#fff!important;
}

detail-region #nav-description > .properDiv .propertiesTable:first-child{
  border-top:0!important;
}

detail-region #nav-description > .properDiv .propertiesTable:nth-child(2n){
  background:#fbfcfa!important;
}

detail-region #nav-description > .properDiv .propertiesTable > .row{
  margin:0!important;
  align-items:stretch!important;
}

detail-region #nav-description > .properDiv .propertiesTable1,
detail-region #nav-description > .properDiv .propertiesTable2{
  display:flex!important;
  align-items:center!important;
  min-height:34px!important;
  font-family:var(--hmnp-font)!important;
}

detail-region #nav-description > .properDiv .propertiesTable1{
  flex:0 0 32%!important;
  max-width:32%!important;
  padding:5px 11px!important;
  border-right:1px solid #e5ebe3!important;
  background:#f3f7f1!important;
  color:#294830!important;
}

detail-region #nav-description > .properDiv .propertiesTable1 b{
  margin:0!important;
  color:#294830!important;
  font:700 12.4px/1.28 var(--hmnp-font)!important;
}

detail-region #nav-description > .properDiv .propertiesTable2{
  flex:0 0 68%!important;
  max-width:68%!important;
  padding:5px 12px!important;
  color:#38443c!important;
  font:400 12.4px/1.28 var(--hmnp-font)!important;
}

/* ---------------------------------------------------------
   16 — TAKSİT / YORUM / SORU NATIVE PANELLERİ
   --------------------------------------------------------- */
detail-region #nav-installment,
detail-region #nav-comment,
detail-region #nav-questions{
  font-family:var(--hmnp-font)!important;
}

detail-region #nav-installment .message,
detail-region #nav-comment .noComment,
detail-region #nav-questions .noQuestions{
  width:100%!important;
  margin:0 0 10px!important;
  padding:10px 13px!important;
  border:1px solid #e4e9e1!important;
  border-radius:8px!important;
  background:#fffaf2!important;
  color:#75502d!important;
  font:500 12px/1.4 var(--hmnp-font)!important;
}

detail-region #nav-comment .btnComment,
detail-region #nav-questions .btnQuestions{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  padding:0 13px!important;
  border:1px solid var(--hmnp-green)!important;
  border-radius:7px!important;
  background:var(--hmnp-green)!important;
  color:#fff!important;
  font:700 11px/1 var(--hmnp-font)!important;
  text-transform:none!important;
  text-decoration:none!important;
}

/* ---------------------------------------------------------
   17 — TAVSİYE EDİLEN / BENZER ÜRÜNLER
   Ana sayfa kart dilinin ürün detay sayfasındaki karşılığı.
   Owl item hesaplarına dokunmadan kart içini kompaktlaştırır.
   --------------------------------------------------------- */
detail-region .productSlider{
  --hm-card-orange:#fd6506;
  --hm-card-green:#123f1f;
  --hm-card-dark:#082f16;
  --hm-card-text:#10291a;
  --hm-card-muted:#65736a;
  margin-top:28px!important;
}

detail-region .productSlider .productBlockTitle{
  margin:0 0 12px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

detail-region .productSlider .productBlockTitle strong{
  display:block!important;
  margin:0!important;
  padding:0!important;
  color:var(--hmnp-green-dark)!important;
  font:600 16px/1.3 var(--hmnp-font)!important;
  letter-spacing:-.08px!important;
  text-transform:none!important;
}

detail-region .productSlider .owl-stage{
  display:flex!important;
  align-items:stretch!important;
}

detail-region .productSlider .owl-item,
detail-region .productSlider .productItem,
detail-region .productSlider .item.productItem{
  align-items:stretch!important;
}

detail-region .productSlider .item.productItem{
  display:flex!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0 4px!important;
}

detail-region .productSlider productitem{
  display:flex!important;
  width:100%!important;
  height:100%!important;
  font-family:var(--hmnp-font)!important;
}

detail-region .productSlider productitem .productItemBlock,
detail-region .productSlider productitem .productItemBlock.d-table,
detail-region .productSlider productitem .productItemBlock.row,
detail-region .productSlider productitem .productItemBlock.h-100{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  height:100%!important;
  min-height:308px!important;
  margin:0!important;
  padding:8px!important;
  border:1px solid #e6ebe5!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(8,47,22,.05)!important;
  overflow:hidden!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}

detail-region .productSlider productitem .productItemBlock:hover{
  transform:translateY(-2px)!important;
  border-color:#fd65062e!important;
  box-shadow:0 10px 24px rgba(8,47,22,.09)!important;
}

detail-region .productSlider productitem .productItemSticker{
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

detail-region .productSlider productitem .productItemImage,
detail-region .productSlider productitem .productItemImage.ratio-1-1{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:148px!important;
  min-height:148px!important;
  max-height:148px!important;
  aspect-ratio:auto!important;
  margin:0 0 5px!important;
  padding:0!important;
  background:#fff!important;
  overflow:hidden!important;
}

detail-region .productSlider productitem .productItemImage > a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
}

detail-region .productSlider productitem .productItemImage img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  transform:none!important;
}

detail-region .productSlider productitem .productIconDefault{display:none!important}

detail-region .productSlider productitem .productItemTitle{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  width:100%!important;
  min-height:104px!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

detail-region .productSlider productitem .productItemTitle a{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  color:var(--hm-card-dark)!important;
  text-decoration:none!important;
}

detail-region .productSlider productitem .productItemTitle a strong{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  min-height:39px!important;
  max-height:none!important;
  margin:0 0 1px!important;
  padding:0 0 1px!important;
  overflow:hidden!important;
  color:var(--hm-card-text)!important;
  font:700 12.3px/1.38 var(--hmnp-font)!important;
  text-align:left!important;
}

detail-region .productSlider productitem .listAdditionalArea{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  min-height:45px!important;
  max-height:47px!important;
  margin:0 0 2px!important;
  padding:0!important;
  overflow:hidden!important;
  color:var(--hm-card-muted)!important;
  font:400 10.9px/1.4 var(--hmnp-font)!important;
  text-align:left!important;
}

detail-region .productSlider productitem .productItemBrand{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  height:17px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  color:#7d887f!important;
  font:400 10.4px/17px var(--hmnp-font)!important;
  text-align:left!important;
}

detail-region .productSlider productitem .d-table-row-group{
  display:block!important;
  width:100%!important;
  margin-top:auto!important;
  padding:0!important;
}

detail-region .productSlider productitem .align-self-end{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
  width:100%!important;
  min-height:20px!important;
  margin:0!important;
  padding:0!important;
}

detail-region .productSlider productitem .productPrice,
detail-region .productSlider productitem .productPrice *{
  width:auto!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}

detail-region .productSlider productitem .calcDisPrice{
  display:block!important;
  color:#203125!important;
  font:700 12.8px/1.15 var(--hmnp-font)!important;
  white-space:nowrap!important;
}

detail-region .productSlider productitem .basketButton{
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  text-align:right!important;
}

detail-region .productSlider productitem .basketButton .basket-add{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:3px!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--hm-card-orange)!important;
  font:700 11.2px/1.15 var(--hmnp-font)!important;
  white-space:nowrap!important;
}

detail-region .productSlider productitem .basketButton .basket-add i{display:none!important}

detail-region .productSlider productitem .basketButton .basket-add::after{
  content:"›";
  margin-left:2px;
  font-size:14px;
  line-height:1;
}

detail-region .productSlider productitem .basketButton .basket-add:hover{
  color:var(--hm-card-green)!important;
  background:transparent!important;
  transform:translateX(2px)!important;
}

/* Owl noktaları / oklar daha sakin */
detail-region .productSlider .owl-dots{
  margin-top:8px!important;
}

detail-region .productSlider .owl-dot span{
  width:7px!important;
  height:7px!important;
  margin:3px!important;
  background:#c7cec9!important;
}

detail-region .productSlider .owl-dot.active span{background:#7f9284!important}

/* ---------------------------------------------------------
   18 — HOVER / FOCUS / ACCESSIBILITY
   Yalnız AKINSOFT native alanları; .hm-product kapsam dışıdır.
   --------------------------------------------------------- */
detail-region .detailImagesBlock a:focus-visible,
detail-region .detailRightBlock a:focus-visible,
detail-region .detailRightBlock button:focus-visible,
detail-region .detailRightBlock select:focus-visible,
detail-region .detailRightBlock input:focus-visible,
detail-region .kitProduct a:focus-visible,
detail-region .kitProduct button:focus-visible,
detail-region #nav-tab a:focus-visible,
detail-region #nav-installment a:focus-visible,
detail-region #nav-comment a:focus-visible,
detail-region #nav-questions a:focus-visible,
detail-region .productSlider a:focus-visible,
detail-region .productSlider button:focus-visible{
  outline:2px solid rgba(229,109,34,.55)!important;
  outline-offset:2px!important;
}


/* İki satırlı native ürün kart başlıkları kesilmesin. */
detail-region .kitProduct .spProductItem .productItemTitle a strong,
detail-region .productSlider productitem .productItemTitle a strong{
  box-sizing:border-box!important;
  min-height:40px!important;
  max-height:42px!important;
  padding-bottom:2px!important;
  line-height:1.42!important;
}
/* ---------------------------------------------------------
   18B — .hm-product İZOLASYONU
   Bu dosyada .hm-product veya onun iç elemanlarını hedefleyen kural yoktur.
   Native tasarım tokenları --hmnp-* adıyla ayrılmıştır; ürün açıklamasının
   --hm-* değişkenleriyle çakışmaz.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   19 — TABLET
   --------------------------------------------------------- */
@media(min-width:768px) and (max-width:991px){
  detail-region > .container-fluid > .container{
    width:calc(100% - 20px)!important;
  }

  detail-region .detailImagesBlock,
  detail-region .detailRightBlock{
    max-width:50%!important;
  }

  detail-region .detailImagesBlock{padding-right:12px!important}

  detail-region .detailImagesBlock #detailImageSlider .gallery-top{
    height:410px!important;
    min-height:410px!important;
  }

  detail-region .detailRightBlock > .row{
    padding:15px 14px!important;
    gap:0 9px!important;
  }

  detail-region .detailTitleBlock h1{font-size:20px!important}
  detail-region .detailTitleBlock > span{font-size:12.5px!important}

  detail-region .detailInfoGroup ul{gap:5px 8px!important}
  detail-region .detailInfoGroup .detailInfoItem{font-size:11.5px!important}

  detail-region .detailPriceBlock .price-item span.price-sticker,
  detail-region .detailPriceBlock .price-item span.calcDisPrice{font-size:19px!important}

  detail-region .quantityBlok{gap:5px!important}
  detail-region .quantityBlok .price-input-block{width:88px!important;min-width:88px!important}
  detail-region .quantityBlok .detailUnit{width:92px!important;max-width:92px!important}

  detail-region .kitProduct .spProductItem{
    flex-basis:205px!important;
    width:205px!important;
    max-width:205px!important;
    min-width:205px!important;
  }
}

/* ---------------------------------------------------------
   20 — MOBİL
   Masaüstü tamamlandıktan sonra ayrıca görsel QA yapılacaktır.
   --------------------------------------------------------- */
@media(max-width:767px){
  detail-region > .container-fluid > .container{
    width:calc(100% - 16px)!important;
  }

  detail-region .breadcrumbBlock{margin-bottom:8px!important}

  detail-region .detailImagesBlock,
  detail-region .detailRightBlock{
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
  }

  detail-region .detailImagesBlock #detailImageSlider .gallery-top{
    height:min(92vw,420px)!important;
    min-height:320px!important;
    max-height:420px!important;
    border-radius:10px!important;
  }

  detail-region .detailImagesBlock .gallery-thumbs .swiper-slide{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
  }

  detail-region .detailRightBlock{margin-top:12px!important}

  detail-region .detailRightBlock > .row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:0 7px!important;
    padding:14px 12px!important;
    border-radius:10px!important;
  }

  detail-region .detailTitleBlock h1{font-size:19px!important}
  detail-region .detailTitleBlock > span{font-size:12px!important}
  detail-region .detailCommentSummary span,
  detail-region .detailCommentSummary button{font-size:10.5px!important}

  detail-region .detailInfoGroup ul{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:5px 7px!important;
  }

  detail-region .detailInfoGroup .detailInfoItem:not(.additionalSpace){
    font-size:10.6px!important;
  }

  detail-region .detailInfoItem.additionalSpace label{font-size:11.5px!important}

  detail-region .detailPriceBlock .price-item span.price-sticker,
  detail-region .detailPriceBlock .price-item span.calcDisPrice{font-size:18px!important}

  detail-region .quantityBlok{
    justify-content:flex-start!important;
    gap:5px!important;
  }

  detail-region .quantityBlok .price-input-block{
    width:84px!important;
    min-width:84px!important;
    height:34px!important;
  }

  detail-region .quantityBlok .price-input-block input{height:32px!important;line-height:32px!important;font-size:12px!important}
  detail-region .quantityBlok .btn-detail-minus,
  detail-region .quantityBlok .btn-detail-plus{width:27px!important;height:32px!important;font-size:16px!important}

  detail-region .quantityBlok .detailUnit{
    width:86px!important;
    max-width:86px!important;
    height:34px!important;
    padding-left:7px!important;
    padding-right:24px!important;
    font-size:10.3px!important;
  }

  detail-region .basketButtonBlock{gap:6px!important}
  detail-region .basketButtonBlock > button.baketButton{height:37px!important;font-size:11px!important}

  detail-region .detailExtraBtnBlock{
    grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) 34px!important;
    gap:5px!important;
  }

  detail-region .detailExtraBtnBlock .detailExtraBtn{height:33px!important;min-height:33px!important;font-size:10px!important}
  detail-region .detailExtraBtnBlock .detailFavoriteBtn{width:34px!important;min-width:34px!important;height:33px!important;min-height:33px!important}

  detail-region .productIconSet .productIconItem img{width:40px!important;height:40px!important}

  detail-region .kitProduct > .row{
    display:block!important;
  }

  detail-region .kitProduct .spProductItem{
    flex-basis:190px!important;
    width:190px!important;
    max-width:190px!important;
    min-width:190px!important;
  }

  detail-region .kitProduct .kitButtonGroup{
    min-height:0!important;
    margin-top:10px!important;
  }

  detail-region #nav-tab.nav-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    max-width:none!important;
    margin:18px 0 13px!important;
    padding:4px!important;
  }

  detail-region #nav-tab .nav-link{min-height:35px!important;font-size:11.5px!important}

  detail-region #nav-description > .properDiv .propertiesTable1{
    flex:0 0 42%!important;
    max-width:42%!important;
    padding:7px 9px!important;
  }

  detail-region #nav-description > .properDiv .propertiesTable2{
    flex:0 0 58%!important;
    max-width:58%!important;
    padding:7px 10px!important;
  }

  detail-region #nav-description > .properDiv .propertiesTable1 b,
  detail-region #nav-description > .properDiv .propertiesTable2{
    font-size:11.8px!important;
  }

  detail-region .productSlider productitem .productItemBlock{min-height:286px!important;padding:6px!important}
  detail-region .productSlider productitem .productItemImage{height:132px!important;min-height:132px!important;max-height:132px!important}
  detail-region .productSlider productitem .productItemTitle{min-height:102px!important}
  detail-region .productSlider productitem .productItemTitle a strong{font-size:11.8px!important}
  detail-region .productSlider productitem .listAdditionalArea{font-size:10.4px!important}
  detail-region .productSlider productitem .calcDisPrice{font-size:11.8px!important}

  /* HM MOBİL — Tavsiye / Benzer ürün kartı alt satırı.
     Fiyat ve "Ürünü İncele" aynı kartın içinde kalır; masaüstüne dokunmaz. */
  detail-region .productSlider productitem .align-self-end{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  detail-region .productSlider productitem .productPrice{
    min-width:0!important;
    overflow:hidden!important;
  }

  detail-region .productSlider productitem .basketButton{
    display:block!important;
    justify-self:end!important;
    width:auto!important;
    min-width:0!important;
    max-width:82px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  detail-region .productSlider productitem .basketButton .basket-add{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    color:var(--hm-card-orange)!important;
    font:700 9.6px/1.12 var(--hmnp-font)!important;
    letter-spacing:-.18px!important;
    white-space:nowrap!important;
    transform:none!important;
  }

  detail-region .productSlider productitem .basketButton .basket-add::after{
    flex:0 0 auto!important;
    margin-left:1px!important;
    font-size:12px!important;
  }
}

/* ---------------------------------------------------------
   21 — ÇOK KÜÇÜK MOBİL
   --------------------------------------------------------- */
@media(max-width:430px){
  detail-region .detailRightBlock > .row{padding:12px 10px!important}
  detail-region .detailTitleBlock h1{font-size:18px!important}
  detail-region .detailInfoGroup .detailInfoItem:not(.additionalSpace){font-size:10.2px!important}
  detail-region .quantityBlok .price-input-block{width:80px!important;min-width:80px!important}
  detail-region .quantityBlok .detailUnit{width:82px!important;max-width:82px!important}
  detail-region .basketButtonBlock > button.baketButton{font-size:10.6px!important}
  detail-region .kitProduct .spProductItem{flex-basis:184px!important;width:184px!important;max-width:184px!important;min-width:184px!important}

  detail-region .productSlider productitem .basketButton{
    max-width:78px!important;
  }

  detail-region .productSlider productitem .basketButton .basket-add{
    font-size:9.2px!important;
    letter-spacing:-.22px!important;
  }
}