/* widget-text-editor */
.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{background-color:transparent;border:3px solid;color:#69727d}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-block-start:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{height:1em;width:1em}.elementor-widget-text-editor .elementor-drop-cap{float:inline-start;font-size:50px;line-height:1;text-align:center}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}
/* widget-image */
.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=".svg"]{width:48px}.elementor-widget-image img{display:inline-block;vertical-align:middle}
/* hb-liste */
/*
 * HetzonBuilder — liste sayfası parçaları (Widget\Liste\*). Temel görünüm düşük özgüllükle (tek / çift sınıf): temanın
 * etiket kurallarını geçer, liste şablonundaki tasarım ayarları ({{WRAPPER}} …) her zaman ezer. Yalnız kullanılan sayfada.
 */

/* ── Başlık ───────────────────────────────────────────────────────────────────────────────────── */
.hb-lb { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hb-lb-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45em; }
.hb-lb .hb-lb-baslik { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; }
.hb-lb-sayi { font-size: 14px; opacity: .6; }
.hb-lb-iz { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; font-size: 12px; opacity: .75; }
.hb-lb-iz a { color: inherit; text-decoration: none; }
.hb-lb-iz a:hover { text-decoration: underline; }
.hb-lb .hb-lb-aciklama { margin: 0; max-width: 760px; font-size: 14px; line-height: 1.55; opacity: .8; }

/* ── Alt kategoriler ──────────────────────────────────────────────────────────────────────────── */
.hb-lak { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-lak--kaydir { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.hb-lak--kaydir::-webkit-scrollbar { display: none; }
.hb-lak .hb-lak-oge { flex: none; display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid #d4d4d8; border-radius: 999px;
    color: inherit; text-decoration: none; font-size: 13px; line-height: 1.2; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.hb-lak .hb-lak-oge.is-aktif { background: #111; border-color: #111; color: #fff; }
.hb-lak--cizgi .hb-lak-oge { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 2px; margin-right: 14px; }
.hb-lak--cizgi .hb-lak-oge.is-aktif { background: transparent; color: inherit; border-bottom-color: currentColor; }
.hb-lak--duz .hb-lak-oge { border: 0; padding: 4px 0; margin-right: 16px; }
.hb-lak--duz .hb-lak-oge.is-aktif { background: transparent; color: inherit; font-weight: 700; }
/* Görselli kutular (Mejuri): görsel + ad, kutu genişliği --hb-lak-g */
.hb-lak--gorsel { gap: 12px; }
.hb-lak.hb-lak--gorsel .hb-lak-oge { flex-direction: column; align-items: stretch; gap: 8px; width: var(--hb-lak-g, 150px); padding: 0; border: 0; border-radius: 0; background: none; color: inherit; text-align: center; }
.hb-lak--gorsel .hb-lak-gorsel { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f4f4f5; }
.hb-lak--gorsel .hb-lak-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hb-lak--gorsel .hb-lak-oge:hover .hb-lak-gorsel img { transform: scale(1.04); }
.hb-lak.hb-lak--gorsel .hb-lak-oge.is-aktif { background: none; color: inherit; }
.hb-lak--gorsel .hb-lak-oge.is-aktif .hb-lak-ad { text-decoration: underline; text-underline-offset: .25em; }
.hb-lak--ad-ic .hb-lak-oge { position: relative; }
.hb-lak--ad-ic .hb-lak-ad { position: absolute; left: 10px; right: 10px; bottom: 8px; text-align: left; }
@media (prefers-reduced-motion: reduce) { .hb-lak--gorsel .hb-lak-gorsel img { transition: none; } }

/* ── Filtre ───────────────────────────────────────────────────────────────────────────────────── */
.hb-lf { --hb-lf-vurgu: #111; }
.hb-lf .hb-lf-dugme { display: inline-flex; align-items: center; gap: .45em; padding: .55em 1em; border: 1px solid #d4d4d8; background: #fff; color: inherit;
    font: inherit; font-size: 14px; cursor: pointer; }
.hb-lf .hb-lf-dugme svg { width: 1.1em; height: 1.1em; }
.hb-lf-dugme-sayi { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; border-radius: 999px;
    background: var(--hb-lf-vurgu); color: #fff; font-size: .75em; font-weight: 700; }
.hb-lf-cekmece { position: fixed; inset: 0; z-index: 100000; }
.hb-lf-cekmece[hidden] { display: none; }
.hb-lf-perde { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .25s ease; }
.hb-lf-cekmece .hb-lf-panel { position: absolute; top: 0; bottom: 0; right: 0; width: min(380px, 92vw); overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); transition: transform .3s ease; box-shadow: -8px 0 30px rgba(0, 0, 0, .12); }
.hb-lf-cekmece--sol .hb-lf-panel { right: auto; left: 0; transform: translateX(-100%); }
.hb-lf-cekmece.is-acik .hb-lf-perde { opacity: 1; }
.hb-lf-cekmece.is-acik .hb-lf-panel { transform: translateX(0); }
.hb-lf .hb-lf-panel { background: #fff; color: #111; display: flex; flex-direction: column; }
.hb-lf-baslik { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-weight: 700; font-size: 16px;
    border-bottom: 1px solid #eee; }
.hb-lf--kenar .hb-lf-baslik { padding: 0 0 12px; }
.hb-lf .hb-lf-kapat { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: inherit; padding: 0 4px; }
.hb-lf-form { display: flex; flex-direction: column; flex: 1; }
.hb-lf-cekmece .hb-lf-form { padding: 0 20px; }
.hb-lf .hb-lf-grup { border-bottom: 1px solid #eee; padding: 14px 0; }
.hb-lf .hb-lf-grup > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; }
.hb-lf .hb-lf-grup > summary::-webkit-details-marker { display: none; }
.hb-lf .hb-lf-grup > summary::after { content: '+'; font-weight: 400; font-size: 18px; line-height: 1; }
.hb-lf .hb-lf-grup[open] > summary::after { content: '−'; }
.hb-lf-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.hb-lf-fazla { display: flex; flex-direction: column; gap: 8px; }
.hb-lf-fazla[hidden] { display: none; }
.hb-lf .hb-lf-secenek { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; cursor: pointer; line-height: 1.3; }
.hb-lf .hb-lf-secenek input { width: 16px; height: 16px; margin: 0; accent-color: var(--hb-lf-vurgu); flex: none; }
.hb-lf-sayi { opacity: .55; font-size: .9em; }
.hb-lf-benek { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); flex: none; }
.hb-lf .hb-lf-fazla-dugme { border: 0; background: none; padding: 4px 0 0; color: inherit; text-decoration: underline; font-size: 13px; cursor: pointer; align-self: flex-start; }
.hb-lf-fiyat { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.hb-lf .hb-lf-fiyat input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #d4d4d8; font: inherit; font-size: 14px; }
.hb-lf-alt { display: flex; align-items: center; gap: 14px; padding: 16px 0; margin-top: auto; }
.hb-lf-cekmece .hb-lf-alt { position: sticky; bottom: 0; background: inherit; border-top: 1px solid #eee; }
.hb-lf .hb-lf-uygula { flex: 1; padding: 12px 16px; border: 0; border-radius: var(--hb-kit-dugme-kose, 0); background: var(--hb-kit-dugme-zemin, var(--hb-lf-vurgu)); color: var(--hb-kit-dugme-renk, #fff); font: inherit; font-weight: 600; cursor: pointer; }
.hb-lf .hb-lf-uygula.is-sayiyor { opacity: .7; }
.hb-lf .hb-lf-temizle { color: inherit; font-size: 13px; text-decoration: underline; }
.hb-lf--kenar[data-aninda] .hb-lf-uygula, .hb-lf--kenar .hb-lf-form[data-hb-aninda] .hb-lf-uygula { display: none; }
html.hb-lf-kilit { overflow: hidden; }

/* ── Sıralama ─────────────────────────────────────────────────────────────────────────────────── */
.hb-ls { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; max-width: 100%; }
.hb-ls label { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-width: 0; max-width: 100%; }
/* Dar kapta (telefonda araç çubuğu) taşmasın: liste kutusu daralır, uzun seçenek kesilir */
.hb-ls select { padding: 7px 28px 7px 10px; border: 1px solid #d4d4d8; background-color: #fff; font: inherit; color: inherit; cursor: pointer; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.hb-ls-etiket { white-space: nowrap; }
/* Metin + açılır menü (<details>) */
.hb-ls--menu { position: relative; display: inline-block; }
.hb-ls--menu > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; white-space: nowrap; }
.hb-ls--menu > summary::-webkit-details-marker { display: none; }
.hb-ls--menu > summary svg { transition: transform .2s; }
.hb-ls--menu[open] > summary svg { transform: rotate(180deg); }
.hb-ls-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: flex; flex-direction: column; min-width: 200px; padding: 8px 0;
    background: #fff; color: #111; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); }
.hb-ls--menu-sol .hb-ls-menu { right: auto; left: 0; }
.hb-ls-menu .hb-ls-secenek { padding: 9px 16px; color: inherit; text-decoration: none; white-space: nowrap; opacity: 1; }
.hb-ls-menu .hb-ls-secenek:hover { background: rgba(0, 0, 0, .04); }
.hb-ls-menu .hb-ls-secenek.is-aktif { font-weight: 600; text-decoration: none; }
.hb-ls--metin { flex-wrap: wrap; gap: 4px 14px; }
.hb-ls .hb-ls-secenek { color: inherit; text-decoration: none; opacity: .6; }
.hb-ls .hb-ls-secenek.is-aktif { opacity: 1; text-decoration: underline; }
.hb-ls-etiket { opacity: .7; }
.hb-ls--hap { gap: 8px; }
.hb-ls--hap .hb-ls-secenek { padding: 7px 14px; border: 1px solid #d4d4d8; border-radius: 999px; opacity: 1; font-size: 13px; }
.hb-ls--hap .hb-ls-secenek.is-aktif { text-decoration: none; background: #111; border-color: #111; color: #fff; }
@media (max-width: 767px) { .hb-ls--hap { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; } .hb-ls--hap .hb-ls-secenek { flex: none; } }

/* ── Yoğunluk ─────────────────────────────────────────────────────────────────────────────────── */
.hb-ly { display: inline-flex; align-items: center; gap: 4px; }
.hb-ly-masa, .hb-ly-mobil { display: inline-flex; gap: 2px; }
.hb-ly-mobil { display: none; }
@media (max-width: 767px) { .hb-ly-masa { display: none; } .hb-ly-mobil { display: inline-flex; } }
.hb-ly button { display: inline-flex; padding: 4px; border: 0; background: none; color: inherit; opacity: .35; cursor: pointer; }
.hb-ly button[aria-pressed="true"] { opacity: 1; }
.hb-ly svg { width: 20px; height: 20px; }
.hb-ly-etiket { font-size: 13px; opacity: .7; margin-right: 4px; }
/* Kaydırıcı görünümü (Koton): ince çizgi + yuvarlak tutamaç, rengi yazı rengi */
.hb-ly--kaydirici { gap: 12px; }
.hb-ly-aralik { width: 140px; height: 18px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; color: inherit; }
.hb-ly-aralik::-webkit-slider-runnable-track { height: var(--hb-ly-iz-kalin, 2px); background: var(--hb-ly-iz, currentColor); opacity: .9; }
.hb-ly-aralik::-moz-range-track { height: var(--hb-ly-iz-kalin, 2px); background: var(--hb-ly-iz, currentColor); }
.hb-ly-aralik::-webkit-slider-thumb { -webkit-appearance: none; width: var(--hb-ly-tutamac, 16px); height: var(--hb-ly-tutamac, 16px); margin-top: calc((var(--hb-ly-iz-kalin, 2px) - var(--hb-ly-tutamac, 16px)) / 2); border: 1.5px solid var(--hb-ly-tutamac-kenar, currentColor); border-radius: 50%; background: var(--hb-ly-tutamac-zemin, #fff); }
.hb-ly-aralik::-moz-range-thumb { width: var(--hb-ly-tutamac, 14px); height: var(--hb-ly-tutamac, 14px); border: 1.5px solid var(--hb-ly-tutamac-kenar, currentColor); border-radius: 50%; background: var(--hb-ly-tutamac-zemin, #fff); }
.hb-ly-aralik:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ── Etkin filtreler ──────────────────────────────────────────────────────────────────────────── */
.hb-laf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hb-laf .hb-laf-oge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #f1f1f2; color: inherit;
    text-decoration: none; font-size: 13px; }
.hb-laf .hb-laf-oge span { opacity: .6; font-size: 1.1em; line-height: 1; }
.hb-laf .hb-laf-temizle { font-size: 13px; color: inherit; text-decoration: underline; }

/* ── Ürünler: sayfalama / daha fazla ──────────────────────────────────────────────────────────── */
.hb-lu-sayfalama { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 36px; }
.hb-liste-urunler .hb-lu-sayfa { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
    border: 1px solid #e4e4e7; color: inherit; text-decoration: none; font-size: 14px; }
.hb-liste-urunler .hb-lu-sayfa.is-aktif { background: #111; border-color: #111; color: #fff; }
.hb-lu-bosluk { padding: 0 4px; opacity: .5; }
.hb-lu-daha { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 36px; }
.hb-lu-sayac { font-size: 13px; opacity: .65; }
.hb-liste-urunler .hb-lu-daha-dugme { min-width: 220px; height: 46px; padding: 0 24px; font-weight: 600; }
.hb-liste-urunler .hb-lu-daha-dugme.is-yukleniyor { opacity: .5; pointer-events: none; }
.hb-liste-urunler[data-sayfalama="sonsuz"] .hb-lu-daha-dugme { visibility: hidden; }
.hb-liste-urunler--bos { padding: 48px 0; text-align: center; }

/* ── Filtre değer görünümleri (ListeFiltresi): çip, ızgara (beden / ölçü), renk dairesi / karesi, aranabilir, anahtar ── */
.hb-lf-liste--cip, .hb-lf-liste--izgara, .hb-lf-liste--daire, .hb-lf-liste--kare { flex-direction: row; flex-wrap: wrap; gap: 8px; }
:is(.hb-lf-liste--cip, .hb-lf-liste--izgara, .hb-lf-liste--daire, .hb-lf-liste--kare) .hb-lf-fazla:not([hidden]) { display: contents; }
:is(.hb-lf-liste--cip, .hb-lf-liste--izgara, .hb-lf-liste--daire, .hb-lf-liste--kare) .hb-lf-secenek { position: relative; }
:is(.hb-lf-liste--cip, .hb-lf-liste--izgara, .hb-lf-liste--daire, .hb-lf-liste--kare) .hb-lf-secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hb-lf .hb-lf-liste--cip .hb-lf-secenek { padding: 6px 12px; border: 1px solid #d4d4d8; border-radius: 999px; font-size: 13px; }
.hb-lf .hb-lf-liste--izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.hb-lf .hb-lf-liste--izgara .hb-lf-secenek { justify-content: center; min-height: 42px; padding: 6px; border: 1px solid #d4d4d8; font-size: 13px; text-align: center; }
.hb-lf .hb-lf-liste--izgara .hb-lf-sayi { display: none; }
:is(.hb-lf-liste--cip, .hb-lf-liste--izgara) .hb-lf-secenek:has(input:checked) { border-color: var(--hb-lf-vurgu); background: var(--hb-lf-vurgu); color: #fff; }
:is(.hb-lf-liste--cip, .hb-lf-liste--izgara, .hb-lf-liste--daire, .hb-lf-liste--kare) .hb-lf-secenek:has(input:focus-visible) { outline: 2px solid var(--hb-lf-vurgu); outline-offset: 2px; }
/* Renk dairesi / karesi: yalnız benek (ad ekran okuyucuda ve ipucunda) */
.hb-lf .hb-lf-liste--daire .hb-lf-benek, .hb-lf .hb-lf-liste--kare .hb-lf-benek { width: 32px; height: 32px; }
.hb-lf .hb-lf-liste--kare .hb-lf-benek { border-radius: 4px; }
:is(.hb-lf-liste--daire, .hb-lf-liste--kare) .hb-lf-renk > span:not(.hb-lf-benek) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(.hb-lf-liste--daire, .hb-lf-liste--kare) .hb-lf-renk:has(input:checked) .hb-lf-benek { box-shadow: 0 0 0 2px var(--hb-lf-halka-ic, #fff), 0 0 0 calc(2px + var(--hb-lf-halka-kalin, 2px)) var(--hb-lf-halka, var(--hb-lf-vurgu)); }
.hb-lf .hb-lf-ara { width: 100%; margin-top: 12px; padding: 8px 10px; border: 1px solid #d4d4d8; font: inherit; font-size: 14px; }
.hb-lf-secenek.is-gizli { display: none !important; }
/* Anahtar (yalnız stoktakiler) */
.hb-lf-anahtar-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.hb-lf-anahtar-satir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hb-lf-anahtar-satir i { position: relative; flex: none; width: 40px; height: 22px; border-radius: 999px; background: #d4d4d8; transition: background .2s; }
.hb-lf-anahtar-satir i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.hb-lf-anahtar-satir input:checked + i { background: var(--hb-lf-vurgu); }
.hb-lf-anahtar-satir input:checked + i::after { transform: translateX(18px); }
.hb-lf-anahtar-satir input:focus-visible + i { outline: 2px solid var(--hb-lf-vurgu); outline-offset: 2px; }
/* Segment (Tükenenler: Göster / Gizle) — aynı stokta parametresi, iki düğmeli */
.hb-lf-segment .hb-lf-anahtar-satir { cursor: default; }
.hb-lf-segment-dugmeler { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: #f4f4f5; }
.hb-lf-segment-dugmeler label { position: relative; margin: 0; cursor: pointer; }
.hb-lf-segment-dugmeler span { display: block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #52525b; transition: background .2s, color .2s; }
.hb-lf-segment-dugmeler input:checked + span { background: #fff; color: var(--hb-lf-vurgu); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.hb-lf-segment-dugmeler input:focus-visible + span { outline: 2px solid var(--hb-lf-vurgu); outline-offset: 1px; }
/* Yatay çubuk: gruplar hap, içerik açılır kutu */
.hb-lf--cubuk .hb-lf-form { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.hb-lf--cubuk .hb-lf-grup { position: relative; padding: 0; border: 0; }
.hb-lf--cubuk .hb-lf-grup > summary { gap: 8px; padding: 8px 14px; border: 1px solid #d4d4d8; border-radius: 999px; font-size: 13px; background: #fff; }
.hb-lf--cubuk .hb-lf-grup > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.hb-lf--cubuk .hb-lf-grup[open] > summary::after { content: ''; transform: rotate(-135deg); }
.hb-lf--cubuk .hb-lf-grup:has(input:checked) > summary { border-color: var(--hb-lf-vurgu); }
.hb-lf--cubuk .hb-lf-icerik { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 260px; max-width: min(420px, 90vw); max-height: 380px; overflow-y: auto;
    padding: 4px 16px 16px; background: #fff; color: #111; border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .14); }
.hb-lf--cubuk .hb-lf-anahtar { padding: 8px 14px; border: 1px solid #d4d4d8; border-radius: 999px; }
.hb-lf--cubuk .hb-lf-anahtar-satir { font-size: 13px; }
.hb-lf--cubuk .hb-lf-alt { margin: 0; padding: 0; gap: 10px; }
.hb-lf--cubuk .hb-lf-uygula { flex: none; padding: 9px 16px; border-radius: 999px; font-size: 13px; }
.hb-lf--cubuk .hb-lf-form[data-hb-aninda] .hb-lf-uygula { display: none; }
@media (max-width: 767px) { .hb-lf--cubuk .hb-lf-form { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .hb-lf--cubuk .hb-lf-icerik { position: fixed; left: 16px; right: 16px; top: auto; max-width: none; } }

/* ── Ürün listesi: ilerleme çubuğu (daha fazla) ve liste görünümü (yatay kart) ── */
.hb-lu-ilerleme { display: block; width: min(320px, 100%); height: 3px; background: rgba(0, 0, 0, .1); border-radius: 2px; overflow: hidden; }
.hb-lu-ilerleme i { display: block; height: 100%; background: currentColor; transition: width .3s ease; }
/* Kartın kök kutusu (kart şablonu .elementor sarmalayıcısında): yatay; ilk öğe (görsel) solda sabit genişlik */
.hb-dongu--liste > .e-loop-item > :is(.elementor, .e-con) > .e-con, .hb-dongu--liste > .e-loop-item > .e-con { flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 20px; }
.hb-dongu--liste > .e-loop-item :is(.elementor, .e-loop-item) > .e-con > :first-child { flex: 0 0 min(32%, 260px) !important; max-width: min(32%, 260px); width: auto !important; }
.hb-dongu--liste > .e-loop-item :is(.elementor, .e-loop-item) > .e-con > :not(:first-child) { flex: 1 1 0 !important; min-width: 0; }

/* Fiyat kaydırıcısı (çift tutamaç): iki range üst üste, yalnız tutamaçlar tıklanır */
.hb-lf-kaydir { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 2px; }
.hb-lf-kaydir-iz { position: relative; height: 22px; }
.hb-lf-kaydir-iz::before, .hb-lf-kaydir-dolu { content: ""; position: absolute; top: 50%; height: var(--hb-lf-iz-kalin, 4px); margin-top: calc(var(--hb-lf-iz-kalin, 4px) / -2); border-radius: 999px; }
.hb-lf-kaydir-iz::before { left: 0; right: 0; background: var(--hb-lf-iz, rgba(0,0,0,.12)); }
.hb-lf-kaydir-dolu { background: var(--hb-lf-dolu, var(--hb-lf-vurgu, #111)); }
.hb-lf-kaydir input[type="range"] { position: absolute; inset: 0; width: 100%; height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.hb-lf-kaydir input[type="range"]::-webkit-slider-runnable-track { background: none; border: 0; }
.hb-lf-kaydir input[type="range"]::-moz-range-track { background: none; border: 0; }
.hb-lf-kaydir input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--hb-lf-tutamac, 20px); height: var(--hb-lf-tutamac, 20px); border: 2px solid var(--hb-lf-tutamac-kenar, var(--hb-lf-vurgu, #111)); border-radius: 50%;
    background: var(--hb-lf-tutamac-zemin, #fff); cursor: grab; pointer-events: auto; }
.hb-lf-kaydir input[type="range"]::-moz-range-thumb { width: var(--hb-lf-tutamac, 16px); height: var(--hb-lf-tutamac, 16px); border: 2px solid var(--hb-lf-tutamac-kenar, var(--hb-lf-vurgu, #111)); border-radius: 50%; background: var(--hb-lf-tutamac-zemin, #fff); cursor: grab; pointer-events: auto; }
.hb-lf-kaydir input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--hb-lf-vurgu, #111); outline-offset: 2px; }
.hb-lf-kaydir-deger { display: flex; justify-content: space-between; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Tam genişlik panel: düğme + sayfada açılan panel, gruplar sütunlarda */
.hb-lf--panel { --hb-lf-sutun: 4; position: relative; }
.hb-lf-tam { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; width: min(100vw - 32px, 1200px); max-height: 75vh; overflow: auto; padding: 24px;
    border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: #fff; color: #111; box-shadow: 0 18px 50px rgba(0,0,0,.16); }
.hb-lf-tam .hb-lf-form { display: grid; grid-template-columns: repeat(var(--hb-lf-sutun), minmax(0, 1fr)); gap: 16px 28px; align-items: start; }
.hb-lf-tam .hb-lf-alt { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); }
.hb-lf-tam .hb-lf-grup > summary { pointer-events: none; list-style: none; }
.hb-lf-tam .hb-lf-grup > summary::-webkit-details-marker { display: none; }
@media (max-width: 1024px) { .hb-lf-tam .hb-lf-form { grid-template-columns: repeat(min(var(--hb-lf-sutun), 2), minmax(0, 1fr)); } }
@media (max-width: 767px) { .hb-lf-tam .hb-lf-form { grid-template-columns: minmax(0, 1fr); } }
.hb-lf-tam .hb-lf-grup > summary::after, .hb-lf-tam .hb-lf-grup > summary::before { display: none; }

/* Görsel kaynağı geçişi (ListeGorselKaynagi): hap düğmeler */
.hb-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.hb-lg-etiket { opacity: .7; }
.hb-lg button { padding: 5px 12px; border: 1px solid transparent; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; opacity: .65; }
.hb-lg button[aria-pressed="true"] { border-color: currentColor; opacity: 1; font-weight: 600; }

/* Kategori ağacı (Alt kategoriler "agac" — kenar sütunu): satır = bağlantı + (alt dal varsa) ok; alt dal kapalı, bulunulan yol açık */
.hb-lak.hb-lak--agac { display: block; overflow: visible; }
.hb-lak-agac { list-style: none; margin: 0; padding: 0; }
.hb-lak-agac .hb-lak-agac { display: none; padding-left: 14px; }
.hb-lak-dal { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
.hb-lak-dal.is-acik > .hb-lak-agac { display: block; flex-basis: 100%; }
.hb-lak--agac .hb-lak-oge { flex: 1; min-width: 0; padding: 8px 5px 8px 0; border: 0; border-radius: 0; background: none; font-size: inherit; line-height: 1.4;
    white-space: normal; opacity: .75; }
.hb-lak--agac .hb-lak-oge:hover { opacity: 1; }
.hb-lak--agac .hb-lak-oge.is-aktif { background: none; color: inherit; font-weight: 600; opacity: 1; }
.hb-lak--agac .hb-lak-ac { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: inherit; opacity: .45; cursor: pointer; transition: transform .2s, opacity .2s; }
.hb-lak--agac .hb-lak-ac:hover { opacity: .8; }
.hb-lak-dal.is-acik > .hb-lak-ac { transform: rotate(180deg); }

/* Sonuç sayısı (ListeSonuc) ve sayfa başına (ListeAdet) — araç çubuğu metinleri */
.hb-lsn { margin: 0; }
.hb-lad { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; }
.hb-lad-etiket { margin-right: 6px; font-weight: 600; }
.hb-lad-oge { padding: 0 7px; color: inherit; text-decoration: none; opacity: .75; }
.hb-lad-oge:hover { opacity: 1; }
.hb-lad-oge.is-aktif { font-weight: 600; opacity: 1; }
.hb-lad-ayirici { opacity: .5; }

/* Liste başlığı: "İz yolu net" — solukluk yok, renkler ayarlandığı gibi */
.hb-lb-iz-net-yes .hb-lb-iz { opacity: 1; }
/* Filtre kenarda, gruplar sabit (katla kapalı): başlıkta + / – yok, tıklanmaz */
.hb-lf--sabit .hb-lf-grup > summary { cursor: default; pointer-events: none; }
.hb-lf--sabit .hb-lf-grup > summary::after { content: none; }
/* İnce kaydırıcı (WooCommerce deseni): 2px iz, dikdörtgen tutamaç; altında "Fiyat: a — b" ve düğme */
.hb-lf-kaydir--woo .hb-lf-kaydir-iz::before, .hb-lf-kaydir--woo .hb-lf-kaydir-dolu { height: var(--hb-lf-iz-kalin, 2px); margin-top: calc(var(--hb-lf-iz-kalin, 2px) / -2); border-radius: 0; }
.hb-lf-kaydir--woo input[type="range"]::-webkit-slider-thumb { width: 6px; height: var(--hb-lf-tutamac, 16px); border: 0; border-radius: 0; background: var(--hb-lf-tutamac-zemin, var(--hb-lf-vurgu, #111)); }
.hb-lf-kaydir--woo input[type="range"]::-moz-range-thumb { width: 6px; height: var(--hb-lf-tutamac, 16px); border: 0; border-radius: 0; background: var(--hb-lf-tutamac-zemin, var(--hb-lf-vurgu, #111)); }
.hb-lf-kaydir--woo .hb-lf-kaydir-deger { align-items: center; gap: 10px; margin-top: 10px; font-size: inherit; }
.hb-lf-kaydir--woo output { font-weight: 600; color: var(--e-global-color-primary, #242424); }
.hb-lf .hb-lf-uygula.hb-lf-uygula--satir { flex: none; padding: 5px 14px; min-height: 36px; border-radius: 35px; background: #333; font-size: 12px; }
.hb-lf-form--tek-fiyat > .hb-lf-alt > .hb-lf-uygula { display: none; }
.hb-lf-form--tek-fiyat > .hb-lf-alt:not(:has(.hb-lf-temizle)) { display: none; }
.hb-lf--sabit .hb-lf-grup[open] > summary::after { content: none; }
/* Kitin form alanı stili (.elementor-kit-N input:not(…), 0,3,1) aralık girdisine işlemesin — kalın beyaz kutu oluyordu */
.hb-lf .hb-lf-kaydir input[type="range"][data-uc] { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 0; }
.hb-lf-kaydir--woo .hb-lf-fiyat-metin { font-size: 16px; }
/* Sayfa başına: kitin bağlantı rengi seçeneklere işlemesin (renk widget'tan) */
.hb-lad .hb-lad-oge { color: inherit; }
/* Yoğunluk düğmeleri: kitin düğme stili (.elementor-kit-N button) işlemesin — dolu yuvarlak düğme oluyordu */
.hb-ly button[data-sutun] { border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 0; }
/* Nokta ızgarası: soluklaştırma yok, seçili / seçilmemiş rengi widget'tan (Renk / Seçili) */
.hb-ly--nokta { gap: 14px; }
.hb-ly--nokta button { opacity: 1; padding: 0; }
.hb-ly--nokta svg { width: 29px; height: 29px; }
/* Filtre kenarda, gruplar sabit: grup alt çizgisi yok (ayırıcı sayfa düzeninde) */
.hb-lf--sabit .hb-lf-grup { border-bottom: 0; padding-top: 0; }
/* Sıralama "Telefonda yalnız simge": masaüstünde simge yok; telefonda kutu simgenin üstünde saydam */
.hb-ls-simge { display: none; }
@media (max-width: 767px) {
    .hb-ls--mobil-simge label { position: relative; }
    .hb-ls--mobil-simge .hb-ls-simge { display: inline-flex; }
    .hb-ls--mobil-simge .hb-ls-etiket { display: none; }
    /* Saydam kutu simgenin tam üstünde: iç boşluk / kenarlık genişliğe eklenince sağa taşıp sayfayı yana kaydırıyordu (25 Eki) */
    .hb-ls--mobil-simge select { position: absolute; inset: 0; box-sizing: border-box; width: 100% !important; height: 100% !important; min-width: 0 !important;
        margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; cursor: pointer; }
}
/* KİT DÜĞME KALKANI (ust.css ile aynı ilke): zeminsiz simge / metin düğmeleri her hâlde zeminsiz */
button:is(.hb-lak-ac.hb-lak-ac, .hb-lf-kapat.hb-lf-kapat, .hb-lf-fazla-dugme.hb-lf-fazla-dugme),
button:is(.hb-lak-ac.hb-lak-ac, .hb-lf-kapat.hb-lf-kapat, .hb-lf-fazla-dugme.hb-lf-fazla-dugme):is(:hover, :focus, :focus-visible, :active) {
    background: none; border-color: transparent; box-shadow: none; color: inherit; }
.hb-ly button[data-sutun]:is(:hover, :focus, :focus-visible, :active) { background: none; border-color: transparent; box-shadow: none; }
.hb-ly button[data-sutun]:is(:hover, :focus) { color: inherit; }
.hb-ly button[data-sutun]:focus-visible, .hb-lak-ac.hb-lak-ac:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Sayfa yenilemeden süzgeç (liste.js gezin): istek sürerken ürünler soluk, tıklanmaz */
.hb-liste-yukleniyor .hb-liste-urunler { opacity: .45; pointer-events: none; transition: opacity .15s; }
.hb-liste-yukleniyor body { cursor: progress; }
/* Alt kategori kutuları (ızgaranın başında — WooCommerce "alt kategoriler ve ürünler"); biçem ayarları üstüne yazar */
.hb-luk { position: relative; display: block; box-sizing: border-box; padding: 15px; border-radius: 16px; background: #F7F7F7; color: #fff; text-decoration: none; }
.hb-luk-gorsel { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: rgba(0, 0, 0, .06); }
.hb-luk-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hb-luk:is(:hover, :focus-visible) .hb-luk-gorsel img { transform: scale(1.04); }
.hb-luk-ad { position: absolute; left: calc(15px + var(--hb-luk-ad-kenar, 20px)); right: calc(15px + var(--hb-luk-ad-kenar, 20px)); bottom: calc(15px + var(--hb-luk-ad-kenar, 16px));
    color: #fff; font-size: 20px; font-weight: 500; line-height: 1.3; text-transform: uppercase; }

/* ── İşlev dalgası (31 Ekim 2026) ─────────────────────────────────────────────────────────────── */
/* Filtre "Telefonda çekmece olsun": düğme ve çekmece kuralları yalnız kırılımın altında, widget'ın kendi satır içi stilinde (kırılım ayarlı);
   üstünde sütun bugünkü gibi — çekmece sarmalayıcısı görünmez (display:contents), perde / telefon düğmesi / telefon başlığı gizli */
.hb-lf--mobil > .hb-lf-dugme--mobil { display: none; }
.hb-lf-kc { display: contents; }
.hb-lf-kc > .hb-lf-perde { display: none; }
.hb-lf-baslik--yalniz-mobil, .hb-lf-kapat--mobil { display: none; }
/* Kategori grubu: alt kategoriler girintili; renk beneği listesinde değeri yalnız yazı olan seçenek çip gibi */
.hb-lf-kat--s1 { padding-left: 16px; }
.hb-lf-kat--s2 { padding-left: 32px; }
.hb-lf .hb-lf-liste--daire .hb-lf-secenek--yazi { padding: 6px 12px; border: 1px solid #d4d4d8; border-radius: 999px; font-size: 13px; }
.hb-lf-liste--daire .hb-lf-secenek--yazi:has(input:checked) { border-color: var(--hb-lf-vurgu); background: var(--hb-lf-vurgu); color: #fff; }
.hb-lf-liste--daire .hb-lf-secenek--yazi { position: relative; }
.hb-lf-liste--daire .hb-lf-secenek--yazi input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* Liste görünümüne ayrı kart şablonu: iki ızgara aynı ürünler; yalnız görünüme uyan görünür (ziyaretçi yoğunluk düğmesiyle değiştirir) */
.hb-liste-urunler > .hb-dongu--listekart { display: none; grid-template-columns: minmax(0, 1fr); }
.hb-liste-urunler[data-gorunum="liste"] > .hb-dongu--listekart { display: grid; }
.hb-liste-urunler[data-gorunum="liste"] > .hb-dongu--izgara:not(.hb-dongu--listekart) { display: none; }

/* Liste başlığı: katlanır açıklama ("Devamını oku") ve yalnız-açıklama kipi (3. dalga) */
.hb-lb--aciklama { gap: 8px; }
.hb-lb-aciklama-kap { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.hb-lb .hb-lb-aciklama--katli { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--hb-lb-satir, 3); line-clamp: var(--hb-lb-satir, 3); overflow: hidden; }
.hb-lb-aciklama-kap.is-acik .hb-lb-aciklama--katli { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; }
.hb-lb-daha { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.hb-lb-daha[hidden] { display: none; }
.hb-lb-daha:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── 4. dalga (31 Ekim 2026): orta öncelikli işlev eksikleri ───────────────────────────────────────────── */
/* Filtre: yapışkan kenar sütunu (Widget sarmalayıcısına hb-lf-yapisik-yes sınıfı verilir; üst uzaklık ayarı top'u ezer) */
.hb-lf-yapisik-yes { position: sticky; top: 20px; align-self: flex-start; }
/* Filtre: hızlı süzgeçlerin yıldızları */
.hb-lf-yildiz { color: #f5a623; letter-spacing: 1px; font-size: 13px; }
/* Filtre: hazır fiyat aralığı listesi (bağlantılar) */
.hb-lf-liste--aralik { gap: 2px; margin-top: 10px; }
.hb-lf .hb-lf-aralik-oge { display: block; padding: 6px 0; color: inherit; text-decoration: none; font-size: 14px; line-height: 1.3; }
.hb-lf .hb-lf-aralik-oge:hover { text-decoration: underline; }
.hb-lf .hb-lf-aralik-oge.is-aktif { font-weight: 700; }
.hb-lf .hb-lf-aralik-tumu { font-size: 13px; opacity: .7; text-decoration: underline; }
/* Filtre: görselli kareler (kumaş / desen / malzeme) — kare benekle aynı mekanik, daha büyük ve görselli */
.hb-lf .hb-lf-liste--gorsel .hb-lf-benek { width: 44px; height: 44px; border-radius: 6px; background-size: cover; background-position: center; }
.hb-lf .hb-lf-liste--gorsel-adli .hb-lf-renk { flex-direction: column; align-items: center; gap: 4px; width: 68px; text-align: center; }
.hb-lf .hb-lf-liste--gorsel-adli .hb-lf-renk > span:not(.hb-lf-benek) { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 12px; line-height: 1.2; }
/* Filtre: yatay çubukta "Tüm filtreler" düğmesi ve çekmecesi (çekmece gövdeye taşınır — çubuğun dışında) */
.hb-lf--cubuk .hb-lf-tum-dugme { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #d4d4d8; border-radius: 999px; background: #fff; color: inherit;
    font: inherit; font-size: 13px; cursor: pointer; }
.hb-lf--cubuk .hb-lf-tum-dugme svg { width: 1.1em; height: 1.1em; }
.hb-lf-tum-icerik { padding: 0 20px; }
.hb-lf-tum-alt { padding-left: 20px; padding-right: 20px; }
/* Sıralama: radyo listesi */
.hb-ls--radyo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hb-ls-radyo { display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; font-size: 14px; line-height: 1.3; }
.hb-ls-radyo input { margin: 0; width: 16px; height: 16px; accent-color: #111; flex: none; }
/* Ürünler: "Önceki / Sonraki", "Sayfa x / y", ilk / son, pasif düğme */
.hb-liste-urunler .hb-lu-sayfa.is-pasif { opacity: .4; pointer-events: none; cursor: default; }
.hb-lu-sayfa-x { padding: 0 12px; font-size: 14px; white-space: nowrap; }
.hb-lu-onceki-kap { display: flex; justify-content: center; margin: 0 0 28px; }
.hb-liste-urunler .hb-lu-onceki-yukle { min-width: 220px; height: 46px; padding: 0 24px; font-weight: 600; }
.hb-liste-urunler .hb-lu-onceki-yukle.is-yukleniyor { opacity: .5; pointer-events: none; }
/* Ürünler: yükleme göstergesi (Yükleme göstergesi ayarı: data-yukleme) */
@keyframes hb-lu-don { to { transform: rotate(360deg); } }
@keyframes hb-lu-kay { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes hb-lu-cubuk { 0% { transform: scaleX(0); } 60% { transform: scaleX(.85); } 100% { transform: scaleX(1); opacity: .2; } }
.hb-lu-yukleyici { display: none; width: var(--hb-lu-yuk-boyut, 28px); height: var(--hb-lu-yuk-boyut, 28px); border: 3px solid rgba(0, 0, 0, .12); border-top-color: var(--hb-lu-yuk-renk, currentColor);
    border-radius: 50%; animation: hb-lu-don .7s linear infinite; }
.hb-lu-daha-dugme.is-yukleniyor ~ .hb-lu-yukleyici { display: inline-block; }
.hb-liste-urunler[data-yukleme] { position: relative; }
html.hb-liste-yukleniyor .hb-liste-urunler[data-yukleme="donen"] > .hb-dongu { opacity: .4; transition: opacity .15s; }
html.hb-liste-yukleniyor .hb-liste-urunler[data-yukleme="donen"]::after { content: ''; position: absolute; z-index: 2; top: 120px; left: 50%; width: var(--hb-lu-yuk-boyut, 32px); height: var(--hb-lu-yuk-boyut, 32px);
    margin: -16px 0 0 -16px; border: 3px solid rgba(0, 0, 0, .12); border-top-color: var(--hb-lu-yuk-renk, #111); border-radius: 50%; animation: hb-lu-don .7s linear infinite; }
html.hb-liste-yukleniyor .hb-liste-urunler[data-yukleme="iskelet"] .hb-dongu > .e-loop-item { position: relative; pointer-events: none; }
html.hb-liste-yukleniyor .hb-liste-urunler[data-yukleme="iskelet"] .hb-dongu > .e-loop-item > * { visibility: hidden; }
html.hb-liste-yukleniyor .hb-liste-urunler[data-yukleme="iskelet"] .hb-dongu > .e-loop-item::after { content: ''; position: absolute; inset: 0; border-radius: 8px;
    background: linear-gradient(90deg, #eee 25%, #f7f7f7 50%, #eee 75%); background-size: 200% 100%; animation: hb-lu-kay 1.2s linear infinite; }
html.hb-liste-yukleniyor:has(.hb-liste-urunler[data-yukleme="cubuk"])::before { content: ''; position: fixed; z-index: 100001; top: 0; left: 0; right: 0; height: 3px; transform-origin: left;
    background: var(--hb-lu-yuk-renk, #111); animation: hb-lu-cubuk 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hb-lu-yukleyici, html.hb-liste-yukleniyor .hb-liste-urunler::after, html.hb-liste-yukleniyor .hb-liste-urunler .e-loop-item::after, html.hb-liste-yukleniyor::before { animation: none; } }
/* Ürünler: zengin boş durum */
.hb-lu-bos-baslik { margin: 0 0 8px; font-size: 20px; line-height: 1.3; }
.hb-lu-bos-temizle { display: inline-flex; align-items: center; margin-top: 16px; padding: 10px 22px; border: 1px solid currentColor; color: inherit; text-decoration: none; font-weight: 600; font-size: 14px; }
.hb-lu-bos-oneriler { margin-top: 40px; text-align: left; }
.hb-lu-bos-oneri-baslik { margin: 0 0 18px; font-size: 18px; text-align: center; }
/* Alt kategoriler: ürün sayısı, karusel (oklar, noktalar, sürükleme) */
.hb-lak-sayi { margin-left: .35em; opacity: .6; font-size: .9em; }
.hb-lak-kap { position: relative; }
.hb-lak-ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 50%; background: #fff; color: #111; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); cursor: pointer; }
.hb-lak-ok[hidden] { display: none; }
.hb-lak-ok svg { width: 16px; height: 16px; }
.hb-lak-ok--geri { left: -6px; }
.hb-lak-ok--ileri { right: -6px; }
.hb-lak-ok.hb-lak-ok:is(:hover, :focus, :focus-visible, :active) { background: #fff; color: #111; border-color: rgba(0, 0, 0, .14); }
.hb-lak-noktalar { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.hb-lak-nokta { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .2); cursor: pointer; }
.hb-lak-nokta.hb-lak-nokta:is(:hover, :focus) { background: rgba(0, 0, 0, .35); }
.hb-lak-nokta.hb-lak-nokta.is-aktif { background: #111; }
.hb-lak[data-hb-lak-surukle] { cursor: grab; }
.hb-lak.is-surukleniyor { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.hb-lak.is-surukleniyor a { pointer-events: none; }

/* hb-kart */
/*
 * HetzonBuilder — ürün kartı parçaları (Widget\Kart\*) ve Ürün Döngüsü (Widget\Dongu). Temel görünüm burada düşük
 * özgüllükle (tek / çift sınıf): temanın h3 / img / button kurallarını geçer, kart şablonundaki tasarım ayarları
 * ({{WRAPPER}} .hb-…, en az üç sınıf) her zaman ezer. Yalnız kullanılan sayfada yüklenir.
 */

/* ── Ürün görseli: oran kutusu, ikinci görsel (solma / kayma), yakınlaşma ─────────────────────────── */
.hb-kg { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; background: #f4f4f5; --hb-kg-sure: 450ms; }
.hb-kg .hb-kg-ana, .hb-kg .hb-kg-iki { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; max-width: none;
    transition: opacity var(--hb-kg-sure) ease, transform var(--hb-kg-sure) ease; }
.hb-kg .hb-kg-iki { position: absolute; inset: 0; opacity: 0; }
.hb-kg--kayma .hb-kg-iki { opacity: 1; transform: translateX(100%); }
:where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--solma.hb-kg--cift .hb-kg-iki { opacity: 1; }
:where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--kayma.hb-kg--cift .hb-kg-iki { transform: translateX(0); }
:where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--kayma.hb-kg--cift .hb-kg-ana { transform: translateX(-30%); }
:where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--yakin .hb-kg-ana { transform: scale(var(--hb-kg-yakin, 1.06)); }
@media (prefers-reduced-motion: reduce) { .hb-kg .hb-kg-ana, .hb-kg .hb-kg-iki { transition: none; } }
/* Renk beneğinin üzerine gelinirken (kart.js .is-benek) ana görsel o renge döner: ikinci görsel (solma / kayma) üstünü örtmesin */
.hb-kg.hb-kg--cift.is-benek:is(.hb-kg--solma, .hb-kg--kayma) .hb-kg-iki { opacity: 0; }   /* özgüllük: Model kaynağı (.hb-gorsel-iki …) kuralından yüksek */
.hb-kg.is-benek .hb-kg-ana { transform: none; }
.hb-kg.hb-kg--yakin.is-benek .hb-kg-ana { transform: scale(var(--hb-kg-yakin, 1.06)); }

/* Üzerine gelince ek efektler (KartGorseli efekt — ikinci görsel / yakınlaşma seçimine eklenir). Tetik: kart ya da görsel widget'ı üzerine gelince.
   Ayrı özellikler: filter / scale (transform ikinci görsel ve yakınlaşma etkisine ait — çakışmaz). Geçişte süre görselin kendi süresi (--hb-kg-sure). */
.hb-kg[class*="hb-kg--e-"] :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger) { transition: opacity var(--hb-kg-sure) ease, transform var(--hb-kg-sure) ease, filter var(--hb-kg-sure) ease, scale var(--hb-kg-sure) ease; }
:where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--e-bulanik :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger) { filter: blur(var(--hb-kg-bulanik, 3px)); scale: 1.06; }
:where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--e-parlama :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger) { filter: brightness(1.08) saturate(1.12); }
.hb-kg--e-ters-yakin :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger) { scale: var(--hb-kg-ters, 1.15); }
:where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--e-ters-yakin :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger) { scale: 1; }
/* Gri → renkli: gri yalnız üzerine gelebilen ekranda (dokunmatikte hover yapışır / hiç olmaz → hep renkli) */
@media (hover: hover) {
    .hb-kg--e-gri :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger) { filter: grayscale(1); }
    :where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--e-gri :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger) { filter: grayscale(0); }
}
/* Parlama (ışıltı) ve karartma: görselin üstünde tıklamayı geçiren katman */
.hb-kg--e-parlama::after, .hb-kg--e-karartma::after { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity var(--hb-kg-sure) ease; }
.hb-kg--e-parlama::after { background: radial-gradient(circle at 50% 40%, var(--hb-kg-parlama, rgba(255, 255, 255, .7)) 0, transparent 70%); mix-blend-mode: soft-light; }
.hb-kg--e-karartma::after { background: var(--hb-kg-karartma, #000); }
:where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--e-parlama::after { opacity: 1; }
:where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--e-karartma::after { opacity: var(--hb-kg-karartma-opaklik, .3); }
/* 3B çevirme: iki yüzlü kart gibi — ana görsel döner, ikinci görsel arkasından gelir (yalnız ikinci görseli olan üründe) */
.hb-kg--cevir.hb-kg--cift { perspective: 900px; }
.hb-kg--cevir.hb-kg--cift :is(.hb-kg-ana, .hb-kg-iki) { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform calc(var(--hb-kg-sure) * 1.4) ease; }
.hb-kg--cevir.hb-kg--cift .hb-kg-iki { opacity: 1; transform: rotateY(-180deg); }
:where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--cevir.hb-kg--cift .hb-kg-ana { transform: rotateY(180deg); }
:where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--cevir.hb-kg--cift .hb-kg-iki { transform: rotateY(0); }
/* Renk beneği görseli değiştirirken çevirme açılmaz (ana görsel renge döner) */
.hb-kg.hb-kg--cevir.hb-kg--cift.is-benek .hb-kg-ana { transform: none; }
.hb-kg.hb-kg--cevir.hb-kg--cift.is-benek .hb-kg-iki { transform: rotateY(-180deg); }
/* Model kaynağı (ikinci görsel önde): çevirme tersine */
.hb-gorsel-iki .hb-kg--cevir.hb-kg--cift .hb-kg-ana { transform: rotateY(180deg); }
.hb-gorsel-iki .hb-kg--cevir.hb-kg--cift .hb-kg-iki { transform: rotateY(0); }
.hb-gorsel-iki :where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--cevir.hb-kg--cift .hb-kg-ana { transform: rotateY(0); }
.hb-gorsel-iki :where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--cevir.hb-kg--cift .hb-kg-iki { transform: rotateY(-180deg); }
/* Hareketi azalt: ters yakınlaşma ve bulanıklaştırmadaki büyütme kapanır, çevirme yerinde solmaya döner */
@media (prefers-reduced-motion: reduce) {
    .hb-kg[class*="hb-kg--e-"] :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger), .hb-kg--cevir.hb-kg--cift :is(.hb-kg-ana, .hb-kg-iki) { transition: none; }
    .hb-kg--e-ters-yakin :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger), :where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--e-ters-yakin :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger),
    :where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--e-bulanik :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger) { scale: none; }
    .hb-kg--cevir.hb-kg--cift .hb-kg-ana, .hb-kg--cevir.hb-kg--cift .hb-kg-iki,
    :where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--cevir.hb-kg--cift :is(.hb-kg-ana, .hb-kg-iki) { transform: none; backface-visibility: visible; }
    .hb-kg--cevir.hb-kg--cift .hb-kg-iki { opacity: 0; }
    :where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--cevir.hb-kg--cift .hb-kg-iki { opacity: 1; }
}

/* ── Ad ──────────────────────────────────────────────────────────────────────────────────────── */
.hb-ka { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.35; }
/* Kitin bağlantı rengi (.elementor-kit-N a, a:hover) adı boyamasın — ad, parçanın Renk ayarını izler */
.hb-ka a, .elementor-widget-hb-kart-ad .hb-ka a, .elementor-widget-hb-kart-ad .hb-ka a:hover { color: inherit; text-decoration: none; }

/* ── Fiyat ───────────────────────────────────────────────────────────────────────────────────── */
.hb-kf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em; line-height: 1.3; }
.hb-kf-guncel { font-weight: 700; }
.hb-kf-eski { opacity: .55; text-decoration: line-through; font-size: .9em; }
.hb-kf-oran { font-size: .8em; font-weight: 700; color: #c62828; }
.hb-kf-bf { flex-basis: 100%; font-size: .75em; font-weight: 400; opacity: .7; }

/* ── Sepete ekle / favori ─────────────────────────────────────────────────────────────────────── */
.hb-ks { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .65em 1.15em; border: 0;
    background: #111; color: #fff; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
    transition: opacity .2s ease, background-color .2s ease, color .2s ease; }
.hb-ks svg { width: 1.15em; height: 1.15em; flex: none; }
.hb-ks--simge { padding: .6em; }
.hb-kfv { display: inline-flex; align-items: center; gap: .35em; padding: .3em; border: 0; background: transparent; color: inherit;
    font: inherit; cursor: pointer; transition: opacity .2s ease, color .2s ease; }
.hb-kfv svg { width: 1.3em; height: 1.3em; flex: none; }
/* Karşılaştır (KartKarsilastir) — favoriyle aynı taban */
.hb-kkr { display: inline-flex; align-items: center; gap: .35em; padding: .3em; border: 0; background: transparent; color: inherit;
    font: inherit; cursor: pointer; transition: opacity .2s ease, color .2s ease; }
.hb-kkr svg { width: 1.25em; height: 1.25em; flex: none; }
/* Hızlı bakış (KartHizliBakis) — favoriyle aynı taban */
.hb-khb { display: inline-flex; align-items: center; justify-content: center; gap: .35em; padding: .4em; border: 0; border-radius: 50%; background: #fff;
    color: inherit; font: inherit; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); transition: opacity .2s ease, background-color .2s ease, color .2s ease; }
.hb-khb:has(span) { border-radius: 999px; padding: .5em .9em; }
.hb-khb svg { width: 1.2em; height: 1.2em; flex: none; }
.hb-ks--uzerine, .hb-kfv--uzerine, .hb-khb--uzerine, .hb-kkr--uzerine { opacity: 0; }
:where(.e-loop-item:hover, .e-loop-item:focus-within) .hb-ks--uzerine, :where(.e-loop-item:hover, .e-loop-item:focus-within) .hb-kfv--uzerine,
:where(.e-loop-item:hover, .e-loop-item:focus-within) .hb-khb--uzerine, :where(.e-loop-item:hover, .e-loop-item:focus-within) .hb-kkr--uzerine { opacity: 1; }
@media (hover: none) { .hb-ks--uzerine, .hb-kfv--uzerine, .hb-khb--uzerine, .hb-kkr--uzerine { opacity: 1; } }
/* Fiyatın yerine (KartSepet gosterim=takas): aynı kaptaki fiyatla yer değiştirir — fareli ekranda, üzerine gelince kayarak.
   Dokunmatikte ve editörde (seçilebilsin) fiyatın altında durur. */
@media (hover: hover) {
    body:not(.elementor-editor-active) .e-con:has(> .elementor-widget-hb-kart-sepet .hb-ks--takas) { position: relative; overflow: clip; }
    body:not(.elementor-editor-active) .elementor-widget-hb-kart-sepet:has(.hb-ks--takas) { position: absolute; inset-inline-start: 0; top: 100%; margin: 0; }
    body:not(.elementor-editor-active) .e-con:has(> .elementor-widget-hb-kart-sepet .hb-ks--takas) > :is(.elementor-widget-hb-kart-fiyat, .elementor-widget-hb-kart-sepet) {
        transition: transform .3s ease; }
    body:not(.elementor-editor-active) :where(.e-loop-item:hover, .e-loop-item:focus-within) .e-con:has(> .elementor-widget-hb-kart-sepet .hb-ks--takas)
        > :is(.elementor-widget-hb-kart-fiyat, .elementor-widget-hb-kart-sepet) { transform: translateY(-100%); }
}

/* ── Rozetler ────────────────────────────────────────────────────────────────────────────────── */
.hb-kr { display: flex; flex-direction: column; align-items: var(--hb-kr-hiz, flex-start); gap: 4px; }
/* Yan yana dizilim (Dizilim = Yan yana): hizalama ayarı yatay eksende (justify-content); enine hep başlangıç */
.hb-kr--satir { align-items: flex-start; justify-content: var(--hb-kr-hiz, flex-start); }
.hb-kr span { display: inline-block; padding: 3px 8px; background: #111; color: #fff; font-size: 11px; font-weight: 700;
    line-height: 1.25; letter-spacing: .02em; border-radius: 2px; }
.hb-kr .hb-kr-indirim { background: #c62828; }
.hb-kr .hb-kr-tukendi { background: #6b7280; }
.hb-kr .hb-kr-yakinda { background: #0f766e; }
.hb-kr .hb-kr-kampanya { background: #6d28d9; }
.hb-kr .hb-kr-geri { background: #b45309; font-variant-numeric: tabular-nums; }
/* Bant: tam genişlik şerit; kayan: şerit içinde sürekli kayan yazı (iz iki kez, -50%) */
.hb-kr--bant, .hb-kr--kayan { display: flex; flex-direction: row; width: 100%; gap: 0; }
.hb-kr--bant span { flex: 1 1 auto; text-align: center; border-radius: 0; }
.hb-kr--kayan { overflow: hidden; background: #111; }
.hb-kr--kayan .hb-kr-iz { display: flex; width: max-content; animation: hb-kr-kay var(--hb-kr-sure, 12s) linear infinite; }
.hb-kr--kayan .hb-kr-tur { display: flex; flex: none; }
.hb-kr--kayan span { border-radius: 0; padding-left: 14px; padding-right: 14px; }
@keyframes hb-kr-kay { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hb-kr--kayan .hb-kr-iz { animation: none; } }

/* ── Renk seçenekleri ─────────────────────────────────────────────────────────────────────────── */
.hb-kre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; --hb-kre-boyut: 14px; }
.hb-kre-benek { display: inline-block; width: var(--hb-kre-boyut); height: var(--hb-kre-boyut); border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18); box-sizing: border-box; }
.hb-kre-benek[data-gorsel] { cursor: pointer; }
.hb-kre-benek--gorsel { background-size: cover; background-position: center; }
.hb-kre-sayi { font-size: 12px; opacity: .75; }
.hb-kre-ad { margin-inline-start: 4px; min-width: 0; font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Ürün Döngüsü: ızgara ─────────────────────────────────────────────────────────────────────── */
.hb-dongu { --hb-d-sutun: 4; --hb-d-sutun-aralik: 20px; --hb-d-satir-aralik: 32px; --hb-d-tasma: 0px; }
@media (max-width: 1024px) { .hb-dongu { --hb-d-sutun: 3; } }
@media (max-width: 767px) { .hb-dongu { --hb-d-sutun: 2; } }
.hb-dongu--izgara { display: grid; grid-template-columns: repeat(var(--hb-d-sutun), minmax(0, 1fr));
    column-gap: var(--hb-d-sutun-aralik); row-gap: var(--hb-d-satir-aralik); }
.hb-dongu > .e-loop-item { min-width: 0; }
/* Kart belgesi satır yüksekliğini taşısın: kökü "En az yükseklik 100%" olan kart eşit boyda olur (fiyat altta). Yalnız sarmalayıcı — tek başına görünümü değiştirmez */
.hb-dongu > .e-loop-item > .elementor { height: 100%; }
.hb-dongu--izgara > .hb-dongu-ara { grid-column: span var(--hb-d-yay, 1); grid-row: span var(--hb-d-yay-s, 1); }
/* Sütun sütun dizilim (izgara_sira: sutun): öğeler yukarıdan aşağı, sonra yan sütun */
.hb-dongu--izgara.hb-dongu--sutun-sira { display: block; columns: var(--hb-d-sutun); column-gap: var(--hb-d-sutun-aralik, 20px); }
.hb-dongu--sutun-sira > * { break-inside: avoid; margin-bottom: var(--hb-d-satir-aralik, 32px); }
@media (max-width: 1024px) { .hb-dongu--izgara > .hb-dongu-ara { grid-column: 1 / -1; grid-row: auto; } }
.hb-dongu-bos { padding: 24px 0; opacity: .7; text-align: center; }

/* ── Kompakt liste düzeni (duzen = liste_kompakt): küçük görsel solda + ad + fiyat; isteğe bağlı büyük sıra numarası ── */
/* :not(izgara) — liste sayfasının eski "liste görünümü" (ListeUrunleri / liste.js) ızgara sınıfına ek olarak aynı adı taşır; onun satır aralığı ızgaranınkidir, bu kural ona dokunmamalı */
.hb-dongu--liste:not(.hb-dongu--izgara) { display: grid; grid-template-columns: repeat(var(--hb-dl-sutun, 1), minmax(0, 1fr)); column-gap: var(--hb-d-sutun-aralik); row-gap: var(--hb-dl-satir, 14px); }
.hb-dl { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hb-dl-sira { flex: none; min-width: 1.4em; font-size: 32px; font-weight: 700; line-height: 1; text-align: center; opacity: .35; font-variant-numeric: tabular-nums; }
.hb-dl-gorsel { flex: none; display: block; width: var(--hb-dl-gorsel, 72px); aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #f4f4f5; }
.hb-dl-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-dl-metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hb-dl-ad { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.35; color: inherit; text-decoration: none; }
.hb-dl-ad:hover { text-decoration: underline; }
.hb-dl-fiyat { font-size: 14px; font-weight: 600; }
.hb-dl-kart { flex: 1 1 auto; min-width: 0; }

/* ── Flaş fırsat: bölüm kabı + başlık satırı + geri sayım (kart.js süreyi sürdürür, dolunca kabı gizler) ── */
.hb-dongu-flas-kap[hidden] { display: none; }
.hb-dongu-flas-ust { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 16px; }
.hb-dongu-flas-ust > .hb-dongu-tumu { margin-inline-start: auto; }
.hb-dongu-sekme-ust > .hb-dongu-flas { flex: none; }
.hb-dongu-flas { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.hb-dongu-flas-metin { font-size: 14px; font-weight: 500; }
.hb-dongu-flas-kutular { display: inline-flex; gap: 6px; }
.hb-dongu-flas-kutular i { display: flex; flex-direction: column; align-items: center; min-width: 48px; padding: 6px 8px; border-radius: 6px; background: #111; color: #fff;
    font-style: normal; font-size: 18px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hb-dongu-flas-kutular small { margin-top: 3px; font-size: 10px; font-weight: 500; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.hb-dongu-flas-satir { font-size: 22px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* ── Ürün Döngüsü: karusel (kaydırarak; oklar kart.js) ────────────────────────────────────────── */
.hb-dongu--karusel { display: grid; grid-auto-flow: column; column-gap: var(--hb-d-sutun-aralik);
    grid-auto-columns: calc((100% - (var(--hb-d-sutun) - 1) * var(--hb-d-sutun-aralik) - var(--hb-d-tasma)) / var(--hb-d-sutun));
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hb-dongu--karusel::-webkit-scrollbar { display: none; }
.hb-dongu--karusel > .e-loop-item { scroll-snap-align: start; }
.hb-dongu-kap { position: relative; }
.hb-dongu-oklar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.hb-dongu-ok { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; background: #f1f1f1; color: #111; cursor: pointer; transition: opacity .2s ease; }
.hb-dongu-ok svg { width: 45%; height: 45%; }
.hb-dongu-ok[disabled] { opacity: .35; cursor: default; }
.hb-dongu-kap--kenar .hb-dongu-oklar { margin: 0; }
.hb-dongu-kap--kenar .hb-dongu-ok { position: absolute; top: 40%; z-index: 2; transform: translateY(-50%); box-shadow: 0 2px 10px rgba(0,0,0,.12); background: var(--hb-do-kenar-zemin, #fff); }
.hb-dongu-kap--kenar .hb-dongu-ok--geri { left: 8px; }
.hb-dongu-kap--kenar .hb-dongu-ok--ileri { right: 8px; }
/* Alt şerit: ilerleme çubuğu (+ "altta" kipinde iki yanında oklar) */
.hb-dongu-alt { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.hb-dongu-alt .hb-dongu-ok { flex: none; }
.hb-dongu-alt-bosluk { flex: 1 1 auto; }
.hb-dongu-ilerleme { --hb-di-g: 25%; --hb-di-x: 0%; flex: 1 1 auto; position: relative; height: 2px; overflow: hidden; background: var(--hb-di-zemin, rgba(0, 0, 0, .12)); }
.hb-dongu-ilerleme[hidden] { display: none; }
.hb-dongu-ilerleme-dolu { position: absolute; inset: 0 auto 0 0; width: var(--hb-di-g); transform: translateX(var(--hb-di-x)); background: var(--hb-di-renk, currentColor); transition: transform .15s linear; }
@media (prefers-reduced-motion: reduce) { .hb-dongu-ilerleme-dolu { transition: none; } }
[dir="rtl"] .hb-dongu-ok svg { transform: scaleX(-1); }
/* Karusel göstergesi: duraklat düğmesi (otomatik oynatma) + nokta göstergesi (kart.js doldurur) */
.hb-dongu-gosterge { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.hb-dongu-gosterge:has(> .hb-dongu-noktalar[hidden]):not(:has(> .hb-dongu-duraklat)) { display: none; }
.hb-dongu-duraklat { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    background: #f1f1f1; color: #111; cursor: pointer; }
.hb-dongu-duraklat svg { width: 55%; height: 55%; }
.hb-dongu-duraklat .hb-dongu-duraklat-oynat, .hb-dongu-duraklat.is-durdu .hb-dongu-duraklat-dur { display: none; }
.hb-dongu-duraklat.is-durdu .hb-dongu-duraklat-oynat { display: block; }
.hb-dongu-duraklat:focus-visible, .hb-dongu-noktalar button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hb-dongu-noktalar { --hb-dn-renk: rgba(0, 0, 0, .25); --hb-dn-etkin: #111; --hb-dn-boyut: 8px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.hb-dongu-noktalar[hidden] { display: none; }
.hb-dongu-noktalar button { position: relative; width: var(--hb-dn-boyut); height: var(--hb-dn-boyut); padding: 0; border: 0; border-radius: 50%; background: var(--hb-dn-renk); cursor: pointer; }
/* Dokunma hedefi: görünen nokta küçük, tıklanan alan 24 px */
.hb-dongu-noktalar button::before { content: ""; position: absolute; inset: calc((var(--hb-dn-boyut) - 24px) / 2); }
.hb-dongu-noktalar button.is-aktif { background: var(--hb-dn-etkin); }

/* Tümünü gör: sekmeli döngüde başlığın / sekmelerin yanında, sekmesiz döngüde ürünlerin üstünde sağda */
.hb-dongu-tumu { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 14px; font-weight: 600; text-decoration: none; color: inherit; white-space: nowrap; }
.hb-dongu-tumu[hidden] { display: none; }
.hb-dongu-tumu:hover { text-decoration: underline; }
.hb-dongu-tumu:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hb-dongu-tumu svg { width: 1em; height: 1em; flex: none; }
[dir="rtl"] .hb-dongu-tumu svg { transform: scaleX(-1); }
.hb-dongu-tumu-satir { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* Daha fazla göster / kaydırınca yükle */
.hb-dongu-daha { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; }
.hb-dongu-daha[hidden] { display: none; }
.hb-dongu-daha-dugme { min-height: 44px; padding: 0 28px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.hb-dongu-daha-dugme:disabled { opacity: .6; cursor: wait; }
.hb-dongu-daha-durum { font-size: 13px; opacity: .75; }
.hb-dongu-daha-durum:empty { display: none; }
/* Sonsuz kaydırmada düğme yalnız ekran okuyucu / klavye için (kendiliğinden yüklenir); editörde ve betik yokken görünür */
.hb-dongu-daha--sonsuz:not(.is-elle) .hb-dongu-daha-dugme { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hb-dongu-daha--sonsuz:not(.is-elle).is-yukleniyor::before { content: ""; width: 22px; height: 22px; border: 2px solid rgba(0, 0, 0, .15); border-top-color: currentColor; border-radius: 50%; animation: hb-dongu-don .8s linear infinite; }
@keyframes hb-dongu-don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hb-dongu-daha--sonsuz:not(.is-elle).is-yukleniyor::before { animation: none; } }

/* ── Editörde kart şablonu önizlemesi: kart genişliğinde ──────────────────────────────────────── */
.hb-kart-onizleme { margin: 40px auto; padding: 0 16px; box-sizing: content-box; }

/* ── Kategori Döngüsü: şablonsuz basit kutu ───────────────────────────────────────────────────── */
.hb-kd { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.hb-kd .hb-kd-gorsel { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f4f4f5; }
.hb-kd .hb-kd-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.hb-kd:hover .hb-kd-gorsel img { transform: scale(1.04); }
.hb-kd .hb-kd-ad { font-size: 15px; font-weight: 600; text-align: center; }
.hb-kd .hb-kd-sayi { font-weight: 400; opacity: .6; }

/* ── Kart içi görsel kaydırıcı ────────────────────────────────────────────────────────────────── */
.hb-kg--kaydirici .hb-kg-iz { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.hb-kg--kaydirici .hb-kg-iz::-webkit-scrollbar { display: none; }
.hb-kg--kaydirici .hb-kg-kare { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.hb-kg .hb-kg-diger { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hb-kg-noktalar { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; z-index: 2; }
.hb-kg-noktalar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); transition: background .2s, width .2s; }
.hb-kg-noktalar--cizgi i { width: 14px; height: 2px; border-radius: 1px; }
.hb-kg-noktalar i.is-aktif { background: #fff; }
.hb-kg-noktalar--nokta i.is-aktif { width: 14px; border-radius: 3px; }
.hb-kg .hb-kg-ok { position: absolute; top: 50%; z-index: 2; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, .9); color: #111; font-size: 20px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s; }
.hb-kg .hb-kg-ok--geri { left: 8px; }
.hb-kg .hb-kg-ok--ileri { right: 8px; }
.hb-kg--kaydirici:hover .hb-kg-ok, .hb-kg--kaydirici:focus-within .hb-kg-ok { opacity: 1; }
@media (hover: none) { .hb-kg .hb-kg-ok { display: none; } }
.hb-ks.hb-ks--tukendi { opacity: .5; cursor: not-allowed; }
.hb-ks.is-bekliyor { opacity: .7; pointer-events: none; }
.hb-ks.is-eklendi { pointer-events: none; }
/* Temanın mini sepeti açılacak: karttan eklerken mağazanın ara penceresi görünmez (kart.js) */
html.hb-ks-ekleniyor #addToCart, html.hb-ks-ekleniyor .modal-backdrop { opacity: 0 !important; pointer-events: none !important; }

/* Bilgi satırı (Widget\Kart\KartOzellikleri): "🎂 7+ · 📦 551 parça" */
.hb-ko { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; line-height: 1.4; opacity: .85; }
.hb-ko-o { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.hb-ko-ikon { font-size: 1.15em; line-height: 1; }
.hb-ko-ayirici { opacity: .5; }
.hb-ko--cip { gap: 4px; }
.hb-ko--cip .hb-ko-o { padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.05); }

/* Kart fiyatı para biçimi (Urun\FiyatBicimi parçalı işaretleme — ürün fiyatıyla ortak) */
.hb-kf .hb-f { white-space: nowrap; }
.hb-kf-kurus-ust-yes .hb-kf .hb-f-kurus { font-size: .55em; position: relative; top: -.75em; line-height: 0; margin-left: .05em; }

/* Seçenek özeti (Widget\Kart\KartSecenekleri): "3 renk · 12 seçenek" ya da varyant türü çipleri */
.hb-kv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; line-height: 1.4; opacity: .8; }
.hb-kv-cip { padding: 2px 8px; border: 1px solid rgba(0,0,0,.14); border-radius: 999px; }
.hb-kv-ayirici { opacity: .5; }

/* Görsel kaynağı "Model" (liste parçası ListeGorselKaynagi — kökte hb-gorsel-iki): ikinci görsel öne; üzerine gelince kart görseli */
.hb-gorsel-iki .hb-kg--solma.hb-kg--cift .hb-kg-iki { opacity: 1; }
.hb-gorsel-iki :where(.e-loop-item:hover, .elementor-widget-hb-kart-gorsel:hover) .hb-kg--solma.hb-kg--cift .hb-kg-iki { opacity: 0; }
.hb-gorsel-iki .hb-kg--kayma.hb-kg--cift .hb-kg-iki { transform: translateX(0); }

/* ── Beden sekmeli raf (Dongu sekme_ozellik) */
.hb-dongu-sekmeler { --hb-ds-renk: #6b7280; --hb-ds-etkin: #111; display: flex; gap: 8px; margin-bottom: var(--hb-ds-alt, 16px); overflow-x: auto; scrollbar-width: none; }
.hb-dongu-sekmeler::-webkit-scrollbar { display: none; }
.hb-dongu-sekme { flex: none; min-width: 44px; min-height: 40px; margin: 0; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; background: none;
    color: var(--hb-ds-renk); font-size: 14px; font-weight: 600; cursor: pointer; transition: color .2s, background-color .2s, border-color .2s; }
.hb-dongu-sekme[aria-selected="true"] { border-color: var(--hb-ds-etkin); background: var(--hb-ds-etkin); color: #fff; }
.hb-dongu-sekme:hover:not([aria-selected="true"]) { color: var(--hb-ds-etkin); }
.hb-dongu-sekme:focus-visible { outline: 2px solid var(--hb-ds-etkin); outline-offset: 2px; }
/* Biçimler: düz metin (etkin = renk) / alt çizgi; başlık aynı satırda (telefonda alt alta) */
.hb-dongu-sekmeler--metin .hb-dongu-sekme, .hb-dongu-sekmeler--alt_cizgi .hb-dongu-sekme { border: 0; border-radius: 0; background: none; padding: 0 4px; }
.hb-dongu-sekmeler--metin .hb-dongu-sekme[aria-selected="true"] { background: none; color: var(--hb-ds-etkin); }
.hb-dongu-sekmeler--alt_cizgi .hb-dongu-sekme { border-bottom: 2px solid transparent; }
.hb-dongu-sekmeler--alt_cizgi .hb-dongu-sekme[aria-selected="true"] { background: none; color: var(--hb-ds-etkin); border-bottom-color: var(--hb-ds-etkin); }
.hb-dongu-sekmeler--metin, .hb-dongu-sekmeler--alt_cizgi { gap: 20px; }
.hb-dongu-sekme-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: var(--hb-ds-alt, 16px); flex-wrap: wrap; }
.hb-dongu-sekme-ust .hb-dongu-sekmeler { margin-bottom: 0; min-width: 0; }
.hb-dongu-sekme-baslik { margin: 0; font-size: 24px; line-height: 1.2; }
@media (max-width: 767px) { .hb-dongu-sekme-ust { flex-direction: column; align-items: stretch; } }

/* ── Sosyal kanıt (KartSosyalKanit): hap ya da düz metin */
.hb-kso { display: inline-flex; align-items: center; gap: .35em; max-width: 100%; font-size: 12px; font-weight: 500; line-height: 1.3; color: #3f3f46; }
.hb-kso-hap .hb-kso { padding: .3em .7em; border-radius: 999px; background: #f4f4f5; }
.hb-kso b { font-weight: 700; color: #111; }
.hb-kso-simge { flex: none; width: 1.15em; height: 1.15em; color: #e11d48; }
.hb-kso--sira .hb-kso-simge { color: #d97706; }
.hb-kso--satilan .hb-kso-simge { color: #ea580c; }
.hb-kso > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Geri sayım + stok çubuğu (3. dalga): kutular / tek satır sunucuda basılır, kart.js saniyede bir sürdürür */
.hb-kso[hidden] { display: none; }
.hb-kso--geri, .hb-kso--stok { flex-wrap: wrap; }
.hb-kso--geri > span, .hb-kso--stok > span { overflow: visible; text-overflow: clip; white-space: normal; }
.hb-kso-hap .hb-kso--geri.hb-kso--kutu, .hb-kso-hap .hb-kso--stok { padding: 0; border-radius: 0; background: none; }
.hb-kso-kutular { display: inline-flex; gap: 4px; }
.hb-kso-kutular i { display: flex; flex-direction: column; align-items: center; min-width: 2.7em; padding: .3em .35em; border-radius: 4px; background: #111; color: #fff;
    font-style: normal; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hb-kso-kutular small { margin-top: 2px; font-size: .62em; font-weight: 500; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.hb-kso-satir { font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hb-kso--stok { display: flex; flex-direction: column; align-items: stretch; gap: .4em; width: 100%; }
.hb-kso-etiketler { display: flex; justify-content: space-between; gap: .6em; }
.hb-kso--stok > .hb-kso-cubuk, .hb-kso-cubuk { display: block; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.hb-kso-cubuk i { display: block; height: 100%; background: #e11d48; border-radius: inherit; }

/* Görünecek bir şeyi olmayan widget (rozetsiz kart parçası, boş liste parçası…) esnek kutuda aralık kadar yer kaplamasın — ürün
 * sayfasının stilindeki (urun.css) kuralın genel kısmı; kartlı / listeli sayfalar artık urun.css'i yüklemiyor (22 Ekim 2026).
 * Harmony düzeninin akışında boş kutu zaten yer kaplamaz — gizlemek zararsız */
.e-con > .elementor-widget:empty,
.e-con > .e-con-inner > .elementor-widget:empty { display: none; }

/* Kategori (hb-kart-kategori) ve puan (hb-kart-puan) — 25 Eki 2026 */
.hb-kk { font-size: 12px; line-height: 1.4; color: #8a8a8a; }
.hb-kk a { color: inherit; text-decoration: none; }
.hb-kk a:hover { text-decoration: underline; }
.hb-kpu { --hb-kpu-boy: 13px; --hb-kpu-dolu: #f5a623; --hb-kpu-bos: #dcdcdc; display: flex; align-items: center; gap: 6px; }
.hb-kpu-yildiz {
    display: inline-block; flex: none; width: calc(var(--hb-kpu-boy) * 5); height: var(--hb-kpu-boy);
    background: linear-gradient(90deg, var(--hb-kpu-dolu) var(--hb-kpu-oran, 0%), var(--hb-kpu-bos) var(--hb-kpu-oran, 0%));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") 0 0 / var(--hb-kpu-boy) var(--hb-kpu-boy) repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") 0 0 / var(--hb-kpu-boy) var(--hb-kpu-boy) repeat-x;
}
.hb-kpu-sayi { font-size: 12px; color: #777; }
.hb-kpu-ekran { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hb-kpu { position: relative; }
/* Kategori döngüsü kartsız "yalnız ad" listesi (alt bilgi kategori listesi) */
.hb-kd.hb-kd--liste { display: inline-block; padding: 0; background: none; color: inherit; text-decoration: none; line-height: 1.6; }
.hb-kd.hb-kd--liste:hover { text-decoration: underline; }
.hb-dongu-oge.hb-kd-basit:has(> .hb-kd--liste) { aspect-ratio: auto; }

/* Kategori Döngüsü açılır menü ("Tüm kategoriler" — KategoriDongu acilir): <details> düğme + dikey liste; alt kategoriler yana açılır */
.hb-kda { --hb-kda-zemin: #fff; --hb-kda-renk: #222; --hb-kda-ust: var(--e-global-color-accent, #111); --hb-kda-cizgi: #e5e7eb; --hb-kda-dolgu: 10px; position: relative; }
.hb-kda-dugme { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; background: var(--e-global-color-accent, #111); color: #fff; font-weight: 600; user-select: none; }
.hb-kda-dugme::-webkit-details-marker { display: none; }
.hb-kda-simge { display: inline-flex; }
.hb-kda-baslik { flex: 1; }
.hb-kda-isaret { font-size: .8em; transition: transform .2s; }
.hb-kda[open] .hb-kda-isaret { transform: rotate(180deg); }
.hb-kda-liste { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: 0; padding: 4px 0; list-style: none; background: var(--hb-kda-zemin); border: 1px solid var(--hb-kda-cizgi); border-top: 0; }
.hb-kda[data-hep] .hb-kda-liste, .hb-kda[open]:not(:hover) .hb-kda-liste { box-shadow: none; }
.hb-kda-oge { position: relative; }
.hb-kda-oge > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: var(--hb-kda-dolgu) 16px; color: var(--hb-kda-renk); text-decoration: none; }
.hb-kda-oge + .hb-kda-oge > a { border-top: 1px solid var(--hb-kda-cizgi); }
.hb-kda-oge > a:hover, .hb-kda-oge:focus-within > a { color: var(--hb-kda-ust); }
.hb-kda-ok { opacity: .5; }
.hb-kda-alt { display: none; position: absolute; left: 100%; top: -1px; z-index: 31; min-width: 220px; margin: 0; padding: 6px 0; list-style: none; background: var(--hb-kda-zemin); border: 1px solid var(--hb-kda-cizgi); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.hb-kda-alt a { display: block; padding: 6px 16px; color: var(--hb-kda-renk); text-decoration: none; }
.hb-kda-alt a:hover { color: var(--hb-kda-ust); }
.hb-kda-oge--alt:hover > .hb-kda-alt, .hb-kda-oge--alt:focus-within > .hb-kda-alt { display: block; }
@media (max-width: 767px) {
    .hb-kda-liste { position: static; }
    .hb-kda-alt { position: static; display: block; min-width: 0; padding: 0 0 6px 12px; border: 0; box-shadow: none; }
    .hb-kda-ok { display: none; }
}
.hb-kat-alt { color: inherit; text-decoration: none; }
.hb-kat-alt:hover { text-decoration: underline; }
.hb-kat-alt-sayi { opacity: .6; }
.hb-kda[data-hep] > .hb-kda-dugme { pointer-events: none; }
.hb-kda[data-hep] .hb-kda-isaret { display: none; }
/* Açılır menü: kategori simgesi (satır başında; Kategori Döngüsü → "Kategori simgesi") — kapalıyken işaretleme / görünüm eski */
.hb-kda { --hb-kda-simge-boyut: 22px; }
.hb-kda-satir-ic { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hb-kda-satir-simge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--hb-kda-simge-boyut); height: var(--hb-kda-simge-boyut); overflow: hidden; }
.hb-kda-satir-simge img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }

/* ── Kart işlev eksikleri (31 Ekim 2026, yetenek çalışması 2. dalga): favori durumu, rozet şekilleri, adet seçici, beden düğmeleri, benek bağlantısı, değerler ── */
/* Favori: ziyaretçinin favorisindeki ürün — dolu simge (kart.js tıklamada çıkarır); renk Biçem'deki "Favorideyken" ayarlarıyla */
.hb-kfv.is-favori { color: #e11d48; }
.hb-kfv.is-favori svg { fill: currentColor; }
.hb-kfv.is-bekliyor { opacity: .6; pointer-events: none; }

/* Rozet şekilleri (yığın biçimi): daire, kurdele (çentikli uç), etiket (sivri uç), köşe şeridi (eğik). Köşe / dolgu ayarı varsa şekli o belirler */
.hb-kr--daire span { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 2.9em; aspect-ratio: 1; padding: .3em;
    border-radius: 50%; text-align: center; line-height: 1.1; }
.hb-kr--kurdele span { padding-inline-end: 16px; border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); }
.hb-kr--etiket span { padding-inline-start: 16px; border-radius: 0 3px 3px 0; clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); }
.hb-kr--serit { display: block; position: relative; width: 96px; height: 96px; overflow: hidden; pointer-events: none; }
.hb-kr--serit span { position: absolute; top: 22px; left: -36px; width: 140px; padding: 4px 0; border-radius: 0; text-align: center; transform: rotate(-45deg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.hb-kr--serit span:nth-child(2) { top: 50px; left: -8px; }
.hb-kr--serit span:nth-child(3) { top: 78px; left: 20px; }
.hb-kr--serit-sag span { left: auto; right: -36px; transform: rotate(45deg); }
.hb-kr--serit-sag span:nth-child(2) { left: auto; right: -8px; }
.hb-kr--serit-sag span:nth-child(3) { left: auto; right: 20px; }

/* Adet seçici (KartSepet adet_secici) ve beden düğmeleri (hizli) */
.hb-ks-kap { display: inline-flex; align-items: stretch; gap: 8px; max-width: 100%; }
.hb-ks-kap > .hb-ks { flex: 1 1 auto; }
.hb-ks-adet { display: inline-flex; flex: none; align-items: stretch; border: 1px solid rgba(0, 0, 0, .2); background: #fff; }
.hb-ks-adet-d { width: 30px; padding: 0; border: 0; background: transparent; color: #111; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.hb-ks-adet-d:hover { background: rgba(0, 0, 0, .05); }
.hb-ks-adet-deger { width: 38px; min-width: 0; padding: 0; border: 0; background: transparent; color: #111; font: inherit; font-size: 14px; font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.hb-ks-adet-deger::-webkit-outer-spin-button, .hb-ks-adet-deger::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.hb-ks-kap--hizli { flex-wrap: wrap; align-items: flex-end; }
.hb-ks-hizli { min-width: 0; }
.hb-ks-baslik { margin-bottom: 6px; font-size: 12px; line-height: 1.3; opacity: .75; }
.hb-ks-bedenler { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-ks-b { min-width: 2.5em; padding: .4em .65em; border: 1px solid rgba(0, 0, 0, .25); border-radius: 2px; background: #fff; color: #111; font: inherit; font-size: 13px; font-weight: 600;
    line-height: 1.2; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.hb-ks-b:hover:not(:disabled) { border-color: #111; background: #111; color: #fff; }
.hb-ks-b:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
/* Klavye odağı: sıfırlama CSS'i :focus { outline:none } diyor; yalnız :focus-visible'a halka (fare tıklamasında çıkmaz) */
.hb-ks:focus-visible { outline: 2px solid var(--hb-odak-halka, #1a73e8); outline-offset: 2px; }
.hb-ks-b.is-stoksuz { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.hb-ks-b.is-bekliyor { opacity: .6; pointer-events: none; }
.hb-ks-b.is-eklendi { pointer-events: none; }

/* Renk beneği bağlantı olarak (KartRenkleri baglanti = urun) */
a.hb-kre-benek { display: inline-block; cursor: pointer; text-decoration: none; }
a.hb-kre-benek:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hb-kre-benek.is-secili { box-shadow: 0 0 0 2px #fff, 0 0 0 3px currentColor; }

/* Seçenek özeti: değerler kipi (S M L XL +3) */
.hb-kv-d { min-width: 2em; padding: 1px 6px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 2px; text-align: center; }
.hb-kv-d.is-stoksuz { text-decoration: line-through; opacity: .45; }
.hb-kv-fazla { opacity: .7; }

/* Kategori parçasının marka kaynağı: logo */
.hb-kk-logo { display: block; width: auto; max-width: 100%; height: 24px; object-fit: contain; }
/* Favoriler kaynağı: misafire giriş çağrısı (3. dalga) */
.hb-dongu-giris p { margin: 0 0 10px; }
.hb-dongu-giris-baglanti { display: inline-block; text-decoration: underline; color: inherit; }

/* ── Kategori Döngüsü (3. dalga): marka logoları, kayan şerit, marka dizini A–Z, özellik değerleri ───────────────────────── */
/* Marka logosu: eşit yükseklikli kutu, logo sığar (oran korunur); gri ton → üzerine gelince renkli */
.hb-kd.hb-kd--logo { flex-direction: row; align-items: center; justify-content: center; height: 56px; padding: 6px 12px; box-sizing: border-box; }
.hb-kd--logo .hb-kd-logo { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: filter .25s ease, opacity .25s ease; }
.hb-kd-logo-gri > .hb-kd--logo .hb-kd-logo { filter: grayscale(1); opacity: .7; }
.hb-kd-logo-gri > .hb-kd--logo:hover .hb-kd-logo, .hb-kd-logo-gri > .hb-kd--logo:focus-visible .hb-kd-logo { filter: none; opacity: 1; }
.hb-kd--logo:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hb-kd--logo .hb-kd-logo { transition: none; } }
/* Kayan şerit (marquee): iki özdeş grup yan yana, her biri kendi genişliği kadar kayar → kesintisiz */
.hb-kdk { display: flex; overflow: hidden; width: 100%; }
.hb-kdk-grup.hb-dongu--kayan { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-around; min-width: 100%; box-sizing: border-box;
    gap: var(--hb-d-sutun-aralik, 20px); padding-inline-end: var(--hb-d-sutun-aralik, 20px); animation: hb-kdk-kay var(--hb-kdk-sure, 30s) linear infinite; }
.hb-kdk-grup > .hb-dongu-oge { flex: 0 0 var(--hb-kdk-oge, 180px); width: var(--hb-kdk-oge, 180px); min-width: 0; }
@keyframes hb-kdk-kay { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes hb-kdk-kay-rtl { from { transform: translateX(0); } to { transform: translateX(100%); } }
[dir="rtl"] .hb-kdk-grup.hb-dongu--kayan { animation-name: hb-kdk-kay-rtl; }
.hb-kdk--sag .hb-kdk-grup.hb-dongu--kayan { animation-direction: reverse; }
.hb-kdk--dur:hover .hb-kdk-grup.hb-dongu--kayan, .hb-kdk--dur:focus-within .hb-kdk-grup.hb-dongu--kayan { animation-play-state: paused; }
/* Hareket azaltma: akış yok, kopya gizli, şerit elle kaydırılır */
@media (prefers-reduced-motion: reduce) {
    .hb-kdk { overflow-x: auto; scrollbar-width: thin; }
    .hb-kdk-grup.hb-dongu--kayan { animation: none; }
    .hb-kdk-kopya { display: none; }
}
/* Marka dizini: harf atlama çubuğu + harf grupları */
.hb-kd-dizin { --hb-kd-pay: 20px; }
.hb-kd-harfler { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; }
.hb-kd-harf { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px; box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1; }
a.hb-kd-harf:hover { background: rgba(0, 0, 0, .06); border-color: currentColor; }
a.hb-kd-harf:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hb-kd-harf--pasif { opacity: .3; cursor: default; }
.hb-kd-grup { margin: 0 0 32px; scroll-margin-top: var(--hb-kd-pay, 20px); }
.hb-kd-grup .hb-kd-grup-baslik { margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, .12); font-size: 22px; font-weight: 700; line-height: 1.2; }
/* Özelliğe göre alışveriş: çip / renk beneği / görselli kutu */
.hb-kdo { --hb-kdo-benek: 28px; --hb-kdo-gorsel: 72px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hb-kdo-li { margin: 0; padding: 0; list-style: none; }
.hb-kdo-oge { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.hb-kdo-oge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hb-kdo-oge--cip { padding: 8px 16px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 999px; font-size: 14px; line-height: 1.2; }
.hb-kdo-oge--cip:hover { border-color: currentColor; }
.hb-kdo-oge--benek, .hb-kdo-oge--gorsel { flex-direction: column; gap: 6px; text-align: center; font-size: 13px; }
.hb-kdo-benek { display: block; flex: none; width: var(--hb-kdo-benek); height: var(--hb-kdo-benek); box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .15); border-radius: 50%; }
.hb-kdo-oge--benek:hover .hb-kdo-benek { box-shadow: 0 0 0 2px #fff, 0 0 0 3px currentColor; }
.hb-kdo-gorsel { display: block; flex: none; width: var(--hb-kdo-gorsel); height: var(--hb-kdo-gorsel); overflow: hidden; border-radius: 8px; background: #f4f4f5; }
.hb-kdo-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hb-kdo-oge--gorsel:hover .hb-kdo-gorsel img { transform: scale(1.05); }
.hb-kdo-sayi { font-weight: 400; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .hb-kdo-oge, .hb-kdo-gorsel img { transition: none; } .hb-kdo-oge--gorsel:hover .hb-kdo-gorsel img { transform: none; } }

/* ── Kart orta öncelikli yetenekler (4. dalga, 31 Ekim 2026) ─────────────────────────────────────────────────────────────────── */
/* Görsel: tükenen ürün (soluk katman / gri / "Tükendi" metni), üzerine gelince oynayan video */
.hb-kg--t-soluk::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--hb-kg-tukendi-zemin, #fff); opacity: var(--hb-kg-tukendi-opaklik, .55); pointer-events: none; }
.hb-kg--t-gri :is(.hb-kg-ana, .hb-kg-iki, .hb-kg-diger) { filter: grayscale(1); }
.hb-kg-tukendi { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: .45em 1em; background: rgba(0, 0, 0, .72); color: #fff;
    font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.hb-kg-video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; pointer-events: none;
    transition: opacity var(--hb-kg-sure) ease; }
.hb-kg.is-video .hb-kg-video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hb-kg-video { transition: none; } }

/* Fiyat: önüne / arkasına metin, tasarruf tutarı, taksit satırı */
.hb-kf-on { margin-inline-end: .3em; font-weight: 400; }
.hb-kf-son { margin-inline-start: .3em; font-size: .8em; font-weight: 400; }
.hb-kf-tasarruf { font-size: .8em; font-weight: 600; color: #15803d; }
.hb-kf-taksit { flex-basis: 100%; font-size: .75em; font-weight: 400; opacity: .85; }
.hb-kf-taksit b { font-weight: 700; }

/* Rozet türleri: ücretsiz kargo, hızlı teslimat */
.hb-kr .hb-kr-ucretsiz-kargo { background: #15803d; }
.hb-kr .hb-kr-hizli-teslimat { background: #1d4ed8; }

/* Sepete ekle: üzerine gelince metin kayıp simge gelir (iki katmanlı düğme); tükenende "gelince haber ver" bağlantısı */
.hb-ks--degis { position: relative; overflow: hidden; }
.hb-ks--degis > span { transition: transform .25s ease, opacity .25s ease; }
.hb-ks--degis > svg, .hb-ks--degis > i { position: absolute; left: 50%; top: 50%; margin: 0; opacity: 0; transform: translate(-50%, 180%); transition: transform .25s ease, opacity .25s ease; }
@media (hover: hover) {
    .hb-ks--degis:hover > span, .hb-ks--degis:focus-visible > span { transform: translateY(-180%); opacity: 0; }
    .hb-ks--degis:hover > svg, .hb-ks--degis:focus-visible > svg, .hb-ks--degis:hover > i, .hb-ks--degis:focus-visible > i { transform: translate(-50%, -50%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hb-ks--degis > span, .hb-ks--degis > svg, .hb-ks--degis > i { transition: none; } }
.hb-ks-haberkap { display: inline-flex; flex-direction: column; align-items: center; gap: .4em; max-width: 100%; }
.hb-ks-haber { color: inherit; font-size: 12px; line-height: 1.3; text-decoration: underline; opacity: .8; }
.hb-ks-haber:hover, .hb-ks-haber:focus-visible { opacity: 1; }

/* Favori: iki ayrı özel simge (boş / favorideyken) */
.hb-kfv-i { display: inline-flex; font-style: normal; }
.hb-kfv-i--dolu { display: none; }
.hb-kfv.is-favori .hb-kfv-i--bos { display: none; }
.hb-kfv.is-favori .hb-kfv-i--dolu { display: inline-flex; }
/* Karşılaştır: listedeki ürün */
.hb-kkr.is-eklendi { color: #15803d; }
.hb-kkr.is-bekliyor { opacity: .6; pointer-events: none; }

/* İpucu (tooltip): favori, hızlı bakış, karşılaştır düğmelerinde — dokunmatikte görünmez */
.hb-kfv, .hb-khb, .hb-kkr { position: relative; }
.hb-kip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 6; padding: 4px 8px; border-radius: 4px; background: #111; color: #fff; font-size: 12px; font-style: normal;
    font-weight: 500; line-height: 1.3; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.hb-kip--alt { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
@media (hover: hover) {
    :is(.hb-kfv, .hb-khb, .hb-kkr):hover > .hb-kip, :is(.hb-kfv, .hb-khb, .hb-kkr):focus-visible > .hb-kip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .hb-kip { transition: none; } }

/* Kayan şerit (hızlı bakış "Görselin altından kayan şerit" ve seçenek değerleri "Görselin altından kayan şerit"): widget, görselin kabının altına yaslanır,
   kart üzerine gelince yukarı kayar. Dokunmatikte ve editörde görselin altında normal akışta durur (seçilebilsin). */
.hb-khb--cubuk, .hb-khb--cubuk:has(span) { display: flex; width: 100%; box-sizing: border-box; justify-content: center; padding: .75em 1em; border-radius: 0; box-shadow: none; background: rgba(255, 255, 255, .96); }
.hb-kv--cubuk { justify-content: center; padding: .55em .5em; background: rgba(255, 255, 255, .96); opacity: 1; }
@media (hover: hover) {
    body:not(.elementor-editor-active) .e-con:has(> .elementor-widget-hb-kart-hizli-bakis .hb-khb--cubuk),
    body:not(.elementor-editor-active) .e-con:has(> .elementor-widget-hb-kart-secenekler .hb-kv--cubuk) { position: relative; overflow: clip; }
    body:not(.elementor-editor-active) :is(.elementor-widget-hb-kart-hizli-bakis:has(.hb-khb--cubuk), .elementor-widget-hb-kart-secenekler:has(.hb-kv--cubuk)) {
        position: absolute; inset-inline: 0; bottom: 0; z-index: 3; margin: 0; transform: translateY(100%); transition: transform .3s ease; }
    body:not(.elementor-editor-active) :where(.e-loop-item:hover, .e-loop-item:focus-within)
        :is(.elementor-widget-hb-kart-hizli-bakis:has(.hb-khb--cubuk), .elementor-widget-hb-kart-secenekler:has(.hb-kv--cubuk)) { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    body:not(.elementor-editor-active) :is(.elementor-widget-hb-kart-hizli-bakis:has(.hb-khb--cubuk), .elementor-widget-hb-kart-secenekler:has(.hb-kv--cubuk)) { transition: none; }
}

/* Seçenek değerleri: kartın üzerine gelince solarak belirir; tıklanabilir değer düğmesi */
.hb-kv--uzerine { opacity: 0; transition: opacity .2s ease; }
:where(.e-loop-item:hover, .e-loop-item:focus-within) .hb-kv--uzerine { opacity: .8; }
@media (hover: none) { .hb-kv--uzerine { opacity: .8; } }
.hb-kv-d--dugme { font: inherit; line-height: inherit; color: inherit; background: transparent; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.hb-kv-d--dugme:hover:not(:disabled) { border-color: #111; background: #111; color: #fff; }
.hb-kv-d--dugme:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.hb-kv-d--dugme:disabled { cursor: not-allowed; }
.hb-kv-d--dugme.is-bekliyor { opacity: .6; pointer-events: none; }
.hb-kv-d--dugme.is-eklendi { pointer-events: none; }
.hb-ks-b svg, .hb-kv-d svg { width: 1em; height: 1em; }

/* Renk beneği: stokta olmayan renk / değer (soluk, çapraz çizgi); renk dışı özellik değeri etiketi */
.hb-kre-benek.is-stoksuz { opacity: .4; }
.hb-kre-benek.is-cizili { position: relative; overflow: hidden; }
.hb-kre-benek.is-cizili::after { content: ""; position: absolute; left: -10%; top: 50%; width: 120%; height: 1.5px; background: rgba(0, 0, 0, .7); transform: rotate(-45deg); }
.hb-kre--ozellik { gap: 4px; }
.hb-kre-benek--yazi { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; min-width: var(--hb-kre-boyut); min-height: var(--hb-kre-boyut);
    padding: 1px 6px; border-radius: 3px; background: transparent; font-size: 12px; line-height: 1.3; }
.hb-kre-benek--yazi.is-stoksuz { text-decoration: line-through; }
.hb-kre-benek--yazi.is-cizili::after { display: none; }

/* Bilgi satırı: alt alta liste ("Etiket: değer") ve tablo (etiket | değer) */
.hb-ko--liste, .hb-ko--tablo { gap: 3px 0; opacity: 1; }
.hb-ko--liste .hb-ko-o, .hb-ko--tablo .hb-ko-o { flex: 0 0 100%; white-space: normal; justify-content: inherit; }
.hb-ko--liste .hb-ko-o { gap: 4px; }
.hb-ko--liste .hb-ko-et { font-weight: 600; opacity: .8; }
.hb-ko--tablo .hb-ko-o { display: grid; grid-template-columns: minmax(0, var(--hb-ko-et, 40%)) minmax(0, 1fr); gap: 0 8px; padding: 3px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.hb-ko--tablo .hb-ko-et { font-weight: 600; opacity: .8; }

/* Puan: tek yıldız + sayı */
.hb-kpu--tek { gap: 4px; }
.hb-kpu-tek { flex: none; width: var(--hb-kpu-boy); height: var(--hb-kpu-boy); color: var(--hb-kpu-dolu); fill: currentColor; }
.hb-kpu-tek--bos { color: var(--hb-kpu-bos); }

/* Sosyal kanıt: ek türler */
.hb-kso--bakan .hb-kso-simge { color: #2563eb; }
.hb-kso--sepette .hb-kso-simge { color: #7c3aed; }
.hb-kso--az .hb-kso-simge { color: #dc2626; }