/* HiberBilişim Storefront — temel stiller */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Yatay kaydırma çubuğunu gizle (nav, tag listeleri) */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* Ürün açıklaması / WYSIWYG içeriği temel typografi */
.prose { color: #374151; line-height: 1.7; font-size: 0.9rem; }
.prose h1,.prose h2,.prose h3,.prose h4 { font-weight: 700; color: #111827; margin: 1.25em 0 0.5em; line-height: 1.3; }
.prose h1 { font-size: 1.5rem; }
.prose h2 { font-size: 1.25rem; }
.prose h3 { font-size: 1.125rem; }
.prose p { margin: 0.75em 0; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin: 0.75em 0; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin: 0.75em 0; }
.prose li { margin: 0.25em 0; }
.prose a { color: #0ea5e9; text-decoration: underline; }
.prose a:hover { color: #0284c7; }
.prose img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.875rem; }
.prose table th,.prose table td { padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; }
.prose table th { background: #f9fafb; font-weight: 600; }
.prose blockquote { border-left: 3px solid #0ea5e9; padding-left: 1rem; color: #6b7280; font-style: italic; margin: 1em 0; }
.prose pre { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; font-size: 0.8rem; }
.prose code { background: #f1f5f9; color: #0f172a; padding: 0.1em 0.35em; border-radius: 0.25rem; font-size: 0.85em; }
.prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* ---- Page Builder ortak stil katmanı ----
   Tasarım editöründe "Üzerine Gelince Renk" seçilen modüllere .hb-hv sınıfı ve
   --hb-hv değişkeni basılır (bkz. block/_layout.twig → scls/sstyle makroları).
   Renk serbest hex olduğu için Tailwind sınıfıyla ifade edilemez. */
.hb-hv,
.hb-hv a,
.hb-hv button { transition: color .15s ease; }

.hb-hv:hover,
.hb-hv a:hover,
.hb-hv button:hover { color: var(--hb-hv); }

/* Buton modülü — serbest hex renkler inline style ile geldiği için hover
   efekti Tailwind sınıfıyla değil filtreyle veriliyor. */
.hb-btn:hover { filter: brightness(0.93); }
.hb-btn:active { transform: translateY(1px); }

/* Bilgi Şeridi — "Kayan şerit" gösterimi.
   İçerik iki kez basılır, şerit %50 kaydırılır → kesintisiz döngü.
   Süre ve yön modül ayarlarından CSS değişkeni olarak gelir. */
.hb-marquee { position: relative; }

/* padding-left:100% şeridi kabın SAĞ kenarına iter; animasyon şeridi kendi
   genişliği kadar (%100) sola taşır → yazı sağdan girer, soldan çıkar, sonra
   baştan başlar. Tek kopya basıldığı için aynı anda iki kez görünmez. */
.hb-marquee-track {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    will-change: transform;
    animation: hb-marquee var(--hb-mq-dur, 20s) linear infinite;
    animation-direction: var(--hb-mq-dir, normal);
}

.hb-marquee:hover .hb-marquee-track { animation-play-state: paused; }

@keyframes hb-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Hareket azaltma tercihi açık olan kullanıcılarda animasyon durur */
@media (prefers-reduced-motion: reduce) {
    .hb-marquee-track { animation: none; }
}

/* Ödeme kutuları "şeffaf" modda: kenarlık, bulunduğu satırın yazı renginden
   türetilir. Tailwind 3.4'te currentColor üzerinde opaklık (border-current/30)
   desteklenmediği için burada color-mix ile yapılıyor; desteklemeyen tarayıcı
   düz currentColor kenarlığa düşer. */
.hb-chip-border {
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 30%, transparent);
}

/* ---- Page Builder modül sarmalayıcısı ----
   Varsayılanda `display:contents`: kutu oluşturmaz, yerleşimi bozmaz; ama
   renk/yazı boyutu gibi miras alınan özellikler modüle geçer. Hizalama ya da
   cihaz görünürlüğü ayarlandığında gerçek bir kutuya dönüşür. */
.hb-mod { display: contents; }
.hb-mod-box { display: block; }
.hb-mod-align { display: flex; width: 100%; align-items: center; }

/* İkon boyutu — modül şablonu kendi ikon sınıfını bassa bile sarmalayıcıdaki
   bu kural kazanır (.hb-ico-xl i = 0,1,1 özgüllük > .text-lg = 0,1,0). */
.hb-ico-sm   i { font-size: 0.875rem; line-height: 1; }
.hb-ico-base i { font-size: 1rem;     line-height: 1; }
.hb-ico-lg   i { font-size: 1.25rem;  line-height: 1; }
.hb-ico-xl   i { font-size: 1.5rem;   line-height: 1; }

/* ---- Küçülen (yapışkan) header ----
   Tasarım editöründe header satırına "Kaydırınca üstte sabit kal" verilirse
   pb_rows.twig satıra .hb-row-sticky basar; hb-pb-header.js satır ekranın
   tepesine değince #hb-pb-header'a .is-stuck ekler. Yalnız o satır sabitlenir
   (logo + arama + hesap/sepet); üst şerit ve menü satırı kayarak gider. */
.hb-row-sticky { transition: padding .2s ease, box-shadow .2s ease; }
.hb-pb-header.is-stuck .hb-row-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    box-shadow: 0 6px 18px -10px rgba(17, 24, 39, .35);
}
.hb-row-sticky img { transition: max-height .2s ease; }
.hb-pb-header.is-stuck .hb-row-sticky img { max-height: 44px !important; }
.hb-row-sticky .hb-search-box { transition: height .2s ease; }
.hb-pb-header.is-stuck .hb-row-sticky .hb-search-box { height: 2.75rem; }
@media (prefers-reduced-motion: reduce) {
    .hb-row-sticky,
    .hb-row-sticky img,
    .hb-row-sticky .hb-search-box { transition: none; }
}
/* "Kaydırınca yalnız arama" (settings.sticky = 'search' → .hb-sticky-search):
   sabitlenen satırda arama kutusu dışındaki kolonlar gizlenir, arama ortalanır. */
.hb-pb-header.is-stuck .hb-sticky-search > div > .grid { display: flex; justify-content: center; }
.hb-pb-header.is-stuck .hb-sticky-search > div > .grid > div:not(:has(.hb-search-box)) { display: none; }
.hb-pb-header.is-stuck .hb-sticky-search > div > .grid > div:has(.hb-search-box) { width: 100%; max-width: 760px; flex: 0 1 760px; }

/* ---- Slider / Banner carousel'i (common/block/module/_carousel.twig) ----
   Ayarlar CSS değişkeniyle gelir: --hb-dur (geçiş süresi), --hb-zoom (hover
   ölçeği), --hb-ov (overlay opaklığı), --hb-i (aktif slayt, JS yazar).
   hb-anim-* = admin "Animasyon", hb-fx-* = admin "Hover Efekti". */
/* Köşe: --hb-r hem köke hem görsel kutusuna uygulanır + clip-path ile kesin kırpılır.
   Yalnız overflow:hidden + border-radius, hover'da ölçeklenen (kompozit katmana
   çıkan) görseli Chrome'da her zaman kırpmıyor → köşeler kare görünüyordu.
   clip-path kökte DEĞİL: kökte gölgeyi (box-shadow) de keserdi. */
.hb-hero-slider { --hb-i: 0; isolation: isolate; border-radius: var(--hb-r, 0); }
.hb-hero-slider .hb-media { border-radius: var(--hb-r, 0); clip-path: inset(0 round var(--hb-r, 0)); }
.hb-hero-slider img { user-select: none; -webkit-user-drag: none; }
.hb-hero-track { position: relative; width: 100%; touch-action: pan-y; }
.hb-hero-slide { position: relative; width: 100%; }

/* slide: yan yana şerit, --hb-i kadar kaydır */
.hb-anim-slide .hb-hero-track { display: flex; transform: translateX(calc(var(--hb-i) * -100%)); transition: transform calc(var(--hb-dur, 300ms) * 2) cubic-bezier(.22, .61, .36, 1); }
.hb-anim-slide .hb-hero-slide { flex: 0 0 100%; }

/* fade / zoom: slaytlar aynı hücrede üst üste — kutu yüksekliği korunur */
.hb-anim-fade .hb-hero-track,
.hb-anim-zoom .hb-hero-track { display: grid; }
.hb-anim-fade .hb-hero-slide,
.hb-anim-zoom .hb-hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity calc(var(--hb-dur, 300ms) * 2) ease, transform calc(var(--hb-dur, 300ms) * 3) ease, visibility 0s linear calc(var(--hb-dur, 300ms) * 2); }
.hb-anim-zoom .hb-hero-slide { transform: scale(1.06); }
.hb-anim-fade .hb-hero-slide.is-active,
.hb-anim-zoom .hb-hero-slide.is-active { opacity: 1; visibility: visible; transform: none; z-index: 1; transition-delay: 0s; }

/* Hover efekti — hep görselin KENDİ kutusunda kalır (hb-media overflow:hidden),
   komşu slayta / oklara taşmaz. scale = zoom (geriye uyumlu). */
.hb-hero-slider .hb-media img { transition: transform calc(var(--hb-dur, 300ms) * 2) ease, filter var(--hb-dur, 300ms) ease; }
/* Overlay rengi YALNIZ üzerine gelince belirir (hangi hover efekti seçili olursa olsun) */
.hb-hero-slider .hb-ov { opacity: 0; transition: opacity var(--hb-dur, 300ms) ease; }
.hb-hero-slider .hb-media:hover .hb-ov { opacity: var(--hb-ov, .3); }
.hb-fx-zoom .hb-media:hover img,
.hb-fx-scale .hb-media:hover img { transform: scale(var(--hb-zoom, 1.05)); }
.hb-fx-brightness .hb-media:hover img { filter: brightness(1.1); }
.hb-hero-cta { transition: transform .2s ease, box-shadow .2s ease; }
.hb-media:hover .hb-hero-cta { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5); }

/* Oklar: cam efektli daire, masaüstünde yalnız slider üzerine gelince belirir */
.hb-hero-nav {
    position: absolute; top: 50%; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35);
    transform: translateY(-50%);
    transition: opacity .25s ease, transform .25s ease, background-color .2s ease, color .2s ease;
}
.hb-hero-nav:hover { background: #fff; }
.hb-hero-nav:disabled { opacity: .3 !important; cursor: default; }
@media (hover: hover) {
    .hb-hero-nav { opacity: 0; }
    .hb-hero-prev { transform: translate(-8px, -50%); }
    .hb-hero-next { transform: translate(8px, -50%); }
    .hb-hero-slider:hover .hb-hero-nav,
    .hb-hero-nav:focus-visible { opacity: 1; transform: translateY(-50%); }
}
/* Dokunmatik telefonda oklar her zaman görünür ve dar slayttaki yazının üstüne biner;
   orada geçiş parmakla kaydırmayla (hb-hero-slider.js pointer olayları), konum noktalarla belli. */
@media (hover: none) and (max-width: 767.98px) {
    .hb-hero-nav { display: none; }
}

/* Noktalar: aktif olan uzun hap */
.hb-hero-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); transition: width .3s ease, background-color .3s ease; }
.hb-hero-dot:hover { background: rgba(255, 255, 255, .85); }
.hb-hero-dot.is-active { width: 1.75rem; background: #fff; }

@media (prefers-reduced-motion: reduce) {
    .hb-hero-slider .hb-media img,
    .hb-hero-slider .hb-hero-track,
    .hb-hero-slider .hb-hero-slide,
    .hb-hero-nav,
    .hb-hero-dot { transition: none !important; }
}

/* ---- "Ortalı geniş" satır (_layout.twig rowwrap: container-xl) ----
   Azami genişlik --hb-wrap değişkeninden; değişkeni pb_rows.twig, bölgenin (header,
   footer, ana sayfa…) editörde seçilen "Sayfa Genişliği"nden basar. Seçilmemişse 1400px. */
.hb-wrap { max-width: var(--hb-wrap, 1400px); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* ---- Sayfa gövdesi boşluğu: page builder gövdesi header'a ve footer'a yapışmasın ----
   Ürün, sepet, giriş/kayıt, iletişim gövdesini saran kapsayıcı (kırıntı yolu yok; üst boşluk burada). */
.hb-page-end { padding-top: 1.5rem; padding-bottom: 3rem; }

@media (min-width: 768px) {
    .hb-page-end { padding-top: 2rem; padding-bottom: 4rem; }
}

/* ---- Özellik Kartları (module/feature.twig) ----
   Zemin ve çerçeve satırın yazı renginden (currentColor) türetilir: koyu footer'da açık,
   açık içerikte koyu ton — renk seçilmezse her zeminde uyumlu. Seçilen renk satır içi
   style ile bunu ezer. (Tailwind 3.4'te currentColor/opaklık sınıfı yok → CSS.) */
.hb-fcard {
    background: color-mix(in srgb, currentColor 4%, transparent);
    border-color: color-mix(in srgb, currentColor 12%, transparent);
}

/* ------------------------------------------------------------------
   Blog yazısı okuma tipografisi (.prose üzerine; cms/hbblog_info.twig)
   Daha büyük punto + satır aralığı; başlık çapaları sabit header'ın altında kalmasın.
   ------------------------------------------------------------------ */
.hb-article { font-size: 1.0625rem; line-height: 1.8; color: #1f2937; }
.hb-article h2 { font-size: 1.5rem; margin-top: 2em; scroll-margin-top: 7rem; }
.hb-article h3 { font-size: 1.25rem; margin-top: 1.6em; scroll-margin-top: 7rem; }
.hb-article p { margin: 1em 0; }
.hb-article img { display: block; margin: 1.5em auto; border-radius: 0.75rem; }
.hb-article iframe, .hb-article video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 0.75rem; margin: 1.5em 0; }
.hb-article table { display: block; overflow-x: auto; }
.hb-article pre { font-size: 0.85rem; line-height: 1.6; background: #0d1117; color: #e6edf3; border: 1px solid #30363d; }

/* Kod renklendirme (highlight.js github-dark, hb-code.js): zemin ve dolgu <pre>'den gelir,
   temanın kendi zemini/dolgusu iptal — açık ve koyu modda kod bloğu hep siyah zeminli. */
.hb-article pre code.hljs { background: transparent; padding: 0; }

/* Kod bloğu "Kopyala" düğmesi (hb-code.js) — sağ üst köşe, koyu zemine uygun */
.hb-code { position: relative; }
.hb-code pre { padding-top: 2.75rem; }
.hb-code-copy {
    position: absolute; top: .5rem; right: .5rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .65rem; border-radius: .4rem;
    font-size: .75rem; line-height: 1; font-weight: 500;
    color: #c9d1d9; background: #21262d; border: 1px solid #30363d;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.hb-code-copy:hover { background: #30363d; color: #fff; }
.hb-code-copy.is-done { color: #3fb950; border-color: #238636; }

/* ---- İçerik satırları arası standart boşluk (pb_rows.twig: row._role == 'content') ----
   Bitişik kardeş seçici: bölgenin ilk satırı boşluk almaz (slider header'a yapışık kalır).
   Margin olduğu için tam genişlik satırlar bozulmaz; padding_y satırın iç dolgusudur.
   Ekrana orantılı: mobil 20px · tablet 28px · masaüstü 36px (eskiden 32/40px sabit — mobilde
   77px'lik slider ile banner arasında 64px boşluk kalıyordu). */
.hb-row + .hb-row-flow { margin-top: 1.25rem; }

@media (min-width: 768px) {
    .hb-row + .hb-row-flow { margin-top: 1.75rem; }
}

@media (min-width: 1024px) {
    .hb-row + .hb-row-flow { margin-top: 2.25rem; }
}

/* Satır arası standart boşluğu bu satır için daralt.
   Tasarım → satır → "CSS Sınıfı" alanına `hb-flow-tight` yazılır.
   Düz Tailwind sınıfı (mt-*) işe yaramaz: `.hb-row + .hb-row-flow` kuralının
   özgüllüğü daha yüksek. Bu seçici (0-3-0) onu geçer, !important gerekmez. */
.hb-row + .hb-row-flow.hb-flow-tight {
    margin-top: .75rem;
}

@media (min-width: 768px) {
    .hb-row + .hb-row-flow.hb-flow-tight { margin-top: 1rem; }
}

@media (min-width: 1024px) {
    .hb-row + .hb-row-flow.hb-flow-tight { margin-top: 1.25rem; }
}

/* ---- Mini sepet "eklendi" bildirimi: sayfa aşağıdayken ekranın sağ üstüne sabitlenir ----
   hb-mini-cart.js, sepet ikonu görüş alanı dışındaysa panele bu sınıfı ekler. Panelin
   Tailwind konum sınıflarını (absolute/top-full/mt-2) özgüllükle (0-2-0) geçer. */
[data-hb-minicart-panel].hb-minicart-float {
    position: fixed;
    top: 1rem;
    right: 1rem;
    margin-top: 0;
    animation: hb-minicart-in .2s ease-out;
}

@media (max-width: 639px) {
    [data-hb-minicart-panel].hb-minicart-float { top: .75rem; right: .75rem; }
}

@keyframes hb-minicart-in {
    from { opacity: 0; transform: translateY(-.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Yapışkan modül (ör. Sipariş Özeti) ve onunla aynı sütundaki her şey ----
   Modül kökü .hb-sticky-mod taşır. Yapışan modülün kendisi değil SÜTUNUN TAMAMIDIR:
   özetin altına banner/listeleme vb. eklenirse kaydırırken birlikte hareket ederler
   (yalnız özet yapışsaydı alttaki modülün üstüne binerdi).
   Sütundaki modüller alt alta, tam genişlikte, eşit aralıkla dizilir — hepsi özetle hizalı.
   Sütun ızgara öğesi olarak üste hizalanır (self-start) ki yapışkanlık satır boyunca çalışsın. */
[class*="col-span-"]:has(> .hb-mod > .hb-sticky-mod) {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    row-gap: 1.25rem;
}

[class*="col-span-"]:has(> .hb-mod > .hb-sticky-mod) > .hb-mod {
    width: 100%;
}

@media (min-width: 1024px) {
    [class*="col-span-"]:has(> .hb-mod > .hb-sticky-mod) {
        position: sticky;
        top: 6rem;
        align-self: start;
    }
}

/* ---- Ortak toast bildirimi (hb-cart-add.js → window.HbToast) ----
   Sağ üstte belirir; giriş hareketi mini sepet bildirimiyle aynı, çıkışta solar. */
.hb-toast { animation: hb-minicart-in .2s ease-out; transition: opacity .25s ease, transform .25s ease; }
.hb-toast.hb-toast-out { opacity: 0; transform: translateY(-.5rem); }

/* ---- Yorum formu yıldız puanı (product/review.twig .hb-rate) ----
   Girdiler 5→1 dizilir, kutu ters akar: ekranda 1→5 görünür. ~ seçicisi seçili/üzerine
   gelinen yıldızın SOLUNDAKİLERİ (DOM'da sonrakiler) de boyar. */
.hb-rate { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.hb-rate label { color: #d1d5db; cursor: pointer; font-size: 1.875rem; line-height: 1; transition: color .15s ease, transform .15s ease; }
.hb-rate label:hover,
.hb-rate label:hover ~ label,
.hb-rate input:checked ~ label { color: #fbbf24; }
.hb-rate label:active { transform: scale(.92); }
.hb-rate input:focus-visible + label { outline: 2px solid #fbbf24; outline-offset: 2px; border-radius: .25rem; }

/* ---- Slider / banner cihaza göre yükseklik (_carousel.twig .hb-media-h) ----
   Kutu her zaman görsel oranını (aspect-ratio) taşır; --hb-h* verilmişse sabit yükseklik onu ezer.
   --hb-h masaüstü, --hb-h-t tablet (≤1023px), --hb-h-m mobil (≤767px); boşsa bir büyük ekranınki sürer. */
.hb-media-h { aspect-ratio: var(--hb-ar); height: var(--hb-h, auto); }
@media (max-width: 1023.98px) {
    .hb-media-h { aspect-ratio: var(--hb-ar-t, var(--hb-ar)); height: var(--hb-h-t, var(--hb-h, auto)); }
}
@media (max-width: 767.98px) {
    .hb-media-h { aspect-ratio: var(--hb-ar-m, var(--hb-ar-t, var(--hb-ar))); height: var(--hb-h-m, var(--hb-h-t, var(--hb-h, auto))); }
}

/* ---- Listeleme sekmeleri: liste başı banner (listing_tabs.twig .hb-lt-split) ----
   Banner yalnız yanında en az 2 ürün sığıyorsa görünür (hb-listing-tabs.js: hb-lt-fit / hb-lt-nofit);
   JS karar vermeden önce dar ekranda gizli başlar — mobilde önce görünüp kaybolmasın. */
.hb-lt-nofit > .hb-lt-banner { display: none; }
@media (max-width: 767.98px) {
    .hb-lt-split:not(.hb-lt-fit) > .hb-lt-banner { display: none; }
}

/* Banner varken ürün ızgarası kalan alana göre sütun sayısını AZALTIR (artırmaz): kart ~170px altına inmesin.
   Seçici (0-2-1) Tailwind'in lg:grid-cols-* sınıfını geçer. Izgara: data-cols = paneldeki sütun sayısı. */
.hb-lt-area { container-type: inline-size; }
@container (max-width: 959.98px) {
    .hb-lt-area .hb-lt-grid:is([data-cols="5"], [data-cols="6"], [data-cols="7"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 759.98px) {
    .hb-lt-area .hb-lt-grid:is([data-cols="4"], [data-cols="5"], [data-cols="6"], [data-cols="7"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hb-lt-area .hb-lt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 559.98px) {
    .hb-lt-area .hb-lt-grid[data-cols]:not([data-cols="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hb-lt-area .hb-lt-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Mobil alt menü (module/mobile_bar.twig .hb-mbar) + WhatsApp sohbet (module/whatsapp_chat.twig) ----
   Alt menü yalnız ≤1023px'te: sayfa altına menü kadar boşluk; sabit alttaki öğe (çerez çubuğu) menünün üstüne
   kayar (reCAPTCHA rozeti gizli — aşağıda). Alt menü varken yüzen WhatsApp düğmesi gizlenir (ortada zaten var).
   WhatsApp Sohbet modülü sayfada yoksa alt menünün ortası boş kalır. */
@media (max-width: 1023.98px) {
    body:has(.hb-mbar) { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
    body:has(.hb-mbar) #hb-cookie { bottom: calc(4rem + env(safe-area-inset-bottom)); }
    body:has(.hb-mbar) .hb-wa-float { display: none; }
    /* Kaydırınca menü gizlenir (hb-mobile-bar.js): sabit öğeler aşağı iner */
    .hb-mbar { transition: transform .25s ease; }
    .hb-mbar.hb-mbar-hidden { transform: translateY(100%); }
    body.hb-mbar-off #hb-cookie { bottom: 0; }
}
body:not(:has([data-hb-wa])) .hb-mbar-wa { visibility: hidden; }

/* ---- "Ürün Kategorileri" açılır menüsü (module/category_menu.twig [data-hb-catmenu]) ----
   Kapalıyken görünmez + tıklanamaz. "Üzerine gelince" kipi yalnız fareli cihazda (hover:hover);
   dokunmatikte ve "tıklayınca" kipinde .is-open (hb-pb-header.js) açar. */
[data-hb-catmenu].is-open > .hb-catmenu-pop { opacity: 1; visibility: visible; }
@media (hover: hover) {
    [data-hb-catmenu="hover"]:hover > .hb-catmenu-pop { opacity: 1; visibility: visible; }
}

/* ---- Mobil Kısayollar paneli (module/mobile_shortcuts.twig → hb-pb-header.js .hb-msheet) ----
   Alttan açılan panel; body'ye eklenir (header'ın yığın bağlamında mobil alt menünün altında kalırdı). */
.hb-msheet { position: fixed; inset: 0; z-index: 130; }
.hb-msheet[hidden] { display: none; }
.hb-msheet-bg { position: absolute; inset: 0; background: rgb(17 24 39 / .45); opacity: 0; transition: opacity .25s ease; }
.hb-msheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; max-height: 82dvh;
    display: flex; flex-direction: column; background: #fff; border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -10px 40px rgb(0 0 0 / .18); transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.hb-msheet.is-open .hb-msheet-bg { opacity: 1; }
.hb-msheet.is-open .hb-msheet-panel { transform: translateY(0); }
.hb-msheet-grip { width: 2.5rem; height: .3rem; border-radius: 9999px; background: #e5e7eb; margin: .6rem auto .15rem; flex-shrink: 0; }
.hb-msheet-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 1.25rem .9rem; border-bottom: 1px solid #f3f4f6; flex-shrink: 0; }
.hb-msheet-head h2 { font-size: 1.0625rem; font-weight: 700; color: #111827; }
.hb-msheet-x { width: 2.25rem; height: 2.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; color: #4b5563; font-size: 1.25rem; }
.hb-msheet-body { overflow-y: auto; overscroll-behavior: contain; padding: .5rem .75rem calc(1rem + env(safe-area-inset-bottom)); }
.hb-msheet-row { display: flex; align-items: stretch; }
.hb-msheet-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: .85rem; padding: .7rem .6rem; font-size: .9375rem; font-weight: 500; color: #1f2937; border-radius: .75rem; transition: background-color .15s ease, color .15s ease; }
.hb-msheet-link:hover, .hb-msheet-link:active { background: #f9fafb; color: var(--hb-ms-accent); }
.hb-msheet-ico { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: .7rem; display: flex; align-items: center; justify-content: center; background: #f3f4f6; color: #6b7280; font-size: 1.15rem; }
.hb-msheet-link:hover .hb-msheet-ico, .hb-msheet-link:active .hb-msheet-ico { color: var(--hb-ms-accent); }
.hb-msheet-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-msheet-badge { margin-left: auto; flex-shrink: 0; font-size: .625rem; font-weight: 700; text-transform: uppercase; line-height: 1; color: #fff; border-radius: .3rem; padding: .3rem .45rem; }
.hb-msheet-toggle { width: 2.75rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 1.35rem; border-radius: .75rem; }
.hb-msheet-toggle i { transition: transform .2s ease; }
.hb-msheet-toggle[aria-expanded="true"] i { transform: rotate(180deg); color: var(--hb-ms-accent); }
.hb-msheet-sub { margin: 0 0 .4rem 3.7rem; padding-left: .5rem; border-left: 2px solid #f3f4f6; }
.hb-msheet-sub[hidden] { display: none; }
.hb-msheet-sub a { display: block; padding: .6rem .6rem; font-size: .875rem; color: #4b5563; border-radius: .5rem; }
.hb-msheet-sub a:hover, .hb-msheet-sub a:active { background: #f9fafb; color: var(--hb-ms-accent); }
@media (min-width: 1024px) { .hb-msheet { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .hb-msheet-bg, .hb-msheet-panel, .hb-msheet-toggle i { transition: none; }
}

/* ---- İletişim: "Başlığın üstüne binsin" kartlar (module/contact_cards.twig .hb-contact-overlap) ----
   Kart satırı, önceki satırdaki başlığın (contact_hero) alt boşluğuna çekilir. Seçici satır arası standart
   boşluk kuralından (.hb-row + .hb-row-flow) daha özgül. */
.hb-row + .hb-row-flow:has(.hb-contact-overlap) { margin-top: -2.5rem; position: relative; z-index: 1; }
@media (min-width: 768px) {
    .hb-row + .hb-row-flow:has(.hb-contact-overlap) { margin-top: -3rem; }
}

/* ---- İletişim: alttan hizalı kolonlar (contact_form / contact_map "fill" → .hb-contact-fill) ----
   Yalnız masaüstünde (kolonlar yan yana). Kolon zaten satır yüksekliğine uzar (self-stretch); içinde
   .hb-contact-fill olan kolon dikey flex'e geçer ve bu öğe kalan yüksekliği doldurur. Böylece kısa olan
   taraf (form ya da harita) uzar, iki kolon aynı çizgide biter. Harita oranı en az yükseklik kalır. */
@media (min-width: 1024px) {
    [class*="col-span-"]:has(> .hb-mod > .hb-contact-fill) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .hb-contact-fill { flex: 1 1 auto; }
}

/* ---- Sosyal giriş düğmesi (common/social_login.twig .hb-social-btn) — sağlayıcı renginde çerçeve + yazı;
   renk şablondan --hb-sb ile gelir (Google mavisi). */
.hb-social-btn { border-color: var(--hb-sb); color: var(--hb-sb); }
.hb-social-btn:hover { background: color-mix(in srgb, var(--hb-sb) 7%, #fff); }
.hb-social-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hb-sb) 20%, transparent); }

/* ---- Giriş / kayıt sol paneli (account/auth_aside.twig .hb-auth-aside) ----
   Renkler Tasarım → Giriş/Kayıt modülünden CSS değişkeniyle: --ha1/--ha2/--ha3 geçiş, --ha-acc vurgu.
   .hb-aa-light = koyu zeminde beyaz yazı · .hb-aa-dark = açık (pastel) zeminde koyu yazı. */
.hb-auth-aside { background: linear-gradient(135deg, var(--ha1) 0%, var(--ha2) 55%, var(--ha3) 100%); }
.hb-aa-light { color: #fff; }
.hb-aa-light .hb-aa-muted { color: rgb(255 255 255 / .85); }
.hb-aa-light .hb-aa-chip,
.hb-aa-light .hb-aa-pill { background: rgb(255 255 255 / .15); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); color: var(--ha-acc); }
.hb-aa-light .hb-aa-deco { background: rgb(255 255 255 / .10); }
.hb-aa-dark { color: #1f2937; }
.hb-aa-dark .hb-aa-muted { color: #4b5563; }
.hb-aa-dark .hb-aa-chip,
.hb-aa-dark .hb-aa-pill { background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 4px 14px -6px color-mix(in srgb, var(--ha-acc) 35%, transparent); color: var(--ha-acc); }
.hb-aa-dark .hb-aa-deco { background: rgb(255 255 255 / .45); }
/* Banner görselli panel (aside_image): görsel yüklenene kadar koyu mor zemin. Oran tutucu (.hb-aa-ratio, 4:5 dikey
   banner) ile içerik aynı ızgara hücresinde: panel en az görsel oranında (kısa formda görsel kırpılmaz),
   uzun formda kolonla birlikte uzar. */
.hb-aa-image { background: #2a0b3d; }
.hb-aa-ratio,
.hb-aa-body { grid-area: 1 / 1; }
.hb-aa-ratio { aspect-ratio: 4 / 5; }

/* ---- Bilgi sayfası (information/information · modüller information_menu + information_content) ---- */
.hb-info-menu { display: flex; flex-direction: column; gap: 2px; padding: 10px; background: #fff; border-radius: 20px; box-shadow: 0 8px 22px -16px rgba(0, 0, 0, .18); }
.hb-info-menu-title { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #111827; }
.hb-info-menu-title::before { content: ''; width: 4px; height: 16px; border-radius: 4px; background: #ff6900; }
.hb-info-menu a { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; color: #4b5563; transition: background .15s, color .15s; }
.hb-info-menu a i { margin-top: 1px; font-size: 17px; color: #9ca3af; flex-shrink: 0; }
.hb-info-menu a:hover { background: #fafafa; color: #ff6900; }
.hb-info-menu a:hover i, .hb-info-menu a.is-active i { color: #ff6900; }
.hb-info-menu a.is-active { background: #fff3e9; color: #c2410c; font-weight: 600; }

.hb-info-card { padding: 22px 20px; background: #fff; border-radius: 20px; box-shadow: 0 8px 22px -16px rgba(0, 0, 0, .18); }
.hb-info-head h1 { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; line-height: 1.25; color: #111827; }
.hb-info-head h1::after { content: ''; flex: 1; min-width: 24px; height: 1px; background: #ff6900; }
.hb-info-head h1 > i { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #ff6900; color: #fff; font-size: 21px; }
.hb-info-toc { margin: 22px 0 6px; padding: 16px 18px; border: 1px solid #ffedd5; border-radius: 14px; background: #fff7ed; }
.hb-info-toc > p { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 800; color: #9a3412; }
.hb-info-toc ol { display: grid; gap: 6px 24px; max-height: 200px; margin: 0; padding-left: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; }
.hb-info-toc a { font-size: 13px; line-height: 1.4; color: #4b5563; }
.hb-info-toc a:hover { color: #ff6900; }
.hb-info-body { margin-top: 18px; font-size: 15px; line-height: 1.75; color: #4b5563; overflow-wrap: anywhere; }
.hb-info-body h2 { margin: 30px 0 10px; padding-left: 12px; border-left: 3px solid #ff6900; font-size: 15px; font-weight: 800; line-height: 1.4; letter-spacing: .01em; color: #111827; scroll-margin-top: 140px; }
.hb-info-body h3 { margin: 22px 0 8px; font-size: 15px; font-weight: 700; color: #111827; scroll-margin-top: 140px; }
.hb-info-body h4 { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: #1f2937; }
.hb-info-body > :first-child { margin-top: 0; }
.hb-info-body p { margin: 0 0 12px; }
.hb-info-body ul { margin: 0 0 14px; padding: 0; list-style: none; }
.hb-info-body ul li { position: relative; margin-bottom: 6px; padding-left: 20px; }
.hb-info-body ul li::before { content: ''; position: absolute; top: .72em; left: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ff6900; }
.hb-info-body ol { margin: 0 0 14px; padding-left: 22px; list-style: decimal; }
.hb-info-body ol li { margin-bottom: 6px; padding-left: 4px; }
.hb-info-body ol li::marker { color: #ff6900; font-weight: 700; }
.hb-info-body a { color: #ea580c; text-decoration: underline; text-underline-offset: 2px; }
.hb-info-body strong, .hb-info-body b { color: #1f2937; }
.hb-info-body table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 14px; }
.hb-info-body th, .hb-info-body td { padding: 8px 10px; border: 1px solid #f0f0f0; text-align: left; vertical-align: top; }
.hb-info-body th { background: #fafafa; color: #111827; font-weight: 700; }

@media (min-width: 768px) {
    .hb-info-card { padding: 32px 36px; }
    .hb-info-head h1 { font-size: 26px; }
    .hb-info-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; }
}

@media (min-width: 1024px) {
    .hb-info-menu.is-sticky { position: sticky; top: 120px; }
}

/* ---- Ürün görseli büyütme penceresi (product_gallery.twig → hb-product.js initLightbox) ----
   touch-action:none → tarayıcı sayfayı yakınlaştırmaz; yakınlaştırmayı betik pencerenin içinde yapar.
   Görsel hiçbir zaman ekran dışına taşmaz (dvh: mobil adres çubuğu payı). */
.hb-lightbox { touch-action: none; height: 100vh; height: 100dvh; overscroll-behavior: contain; }
.hb-lightbox-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: center; will-change: transform; }
.hb-lightbox-close { top: max(.75rem, env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); }
.hb-lightbox-count { bottom: max(1rem, env(safe-area-inset-bottom)); }

/* ---- Zengin metin tabloları (hb-rich-content.js sarar): geniş tablo sayfayı taşırmaz, kutu içinde yatay kayar ---- */
.hb-table-scroll { max-width: 100%; margin: 0 0 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; }
.hb-table-scroll > table { min-width: 100%; margin-top: 0; margin-bottom: 0; }

/* ---- reCAPTCHA: rozet gizli — Google'ın izin verdiği biçimde korunan formun altında bildirim (hb_recaptcha_notice) ---- */
.grecaptcha-badge { visibility: hidden !important; }
.hb-recaptcha-note { margin: 0; font-size: 11px; line-height: 1.5; color: #9ca3af; }
.hb-recaptcha-note a { color: #6b7280; text-decoration: underline; text-underline-offset: 2px; }
.hb-recaptcha-note a:hover { color: #ff6900; }