/* ============================================================
   HAHeader – Frontend Styles  (v1.1)
   All selectors prefixed .hah-  — zero theme conflicts
   ============================================================ */

/* ── Reset ────────────────────────────────────────────────── */
.hah-header-wrap *,
.hah-header-wrap *::before,
.hah-header-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.hah-announcement-bar *,
.hah-announcement-bar *::before,
.hah-announcement-bar *::after { box-sizing: border-box; }

/* ── Announcement Bar ─────────────────────────────────────── */
.hah-announcement-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    line-height: 1.5;
    font-weight: var(--hah-ann-font-weight, 400);
    /* border-bottom ile header nav'dan görsel ayrım */
    border-bottom: 1px solid rgba(255,255,255,.15);
}
.hah-announcement-text {
    flex: 1;
    text-align: center;
    padding-right: 40px; /* space for close btn */
}
.hah-announcement-link {
    display: inline;
    margin-left: 8px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity .2s;
}
.hah-announcement-link:hover { opacity: .75; }

.hah-announcement-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 4px 6px;
    opacity: .8;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}
.hah-announcement-close:hover,
.hah-announcement-close:focus,
.hah-announcement-close:active {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 1;
}
.hah-announcement-bar.hah-ann-hidden { display: none !important; }

@media (max-width: 768px) {
    .hah-announcement-text {
        text-align: center;
        padding-right: 32px;
        padding-left: 32px;
    }
}

/* ── Wrapper ──────────────────────────────────────────────── */
.hah-header-wrap {
    position: relative;
    width: 100%;
    background: var(--hah-bg, #fff);
    font-family: var(--hah-font, inherit);
    color: var(--hah-text, #222);
    z-index: 9999;
    transition: box-shadow .3s ease, background .3s ease;
}
.hah-layout-full-edge .hah-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── Placeholder ──────────────────────────────────────────── */
.hah-placeholder { display: none; }

/* ── Sticky ───────────────────────────────────────────────── */
.hah-sticky { position: fixed; top: 0; left: 0; right: 0; }
.hah-sticky.hah-scrolled {
    background: var(--hah-sticky-bg, #fff) !important;
    box-shadow: var(--hah-sticky-shadow, 0 2px 12px rgba(0,0,0,.1));
}

/* ── Inner ────────────────────────────────────────────────── */
.hah-inner {
    display: flex;
    align-items: center;
    padding-top:    var(--hah-pt, 16px);
    padding-bottom: var(--hah-pb, 16px);
    padding-left:   var(--hah-pl, 24px);
    padding-right:  var(--hah-pr, 24px);
    width: 100%;
    gap: 24px;
}

/* Alignment */
.hah-align-center .hah-nav { flex: 1; display: flex; justify-content: center; }
.hah-align-right  .hah-nav { flex: 1; display: flex; justify-content: flex-end; }
.hah-align-left   .hah-nav { flex: 1; display: flex; justify-content: flex-start; }
.hah-cta-group { margin-left: auto; }
.hah-align-right .hah-nav ~ .hah-cta-group { margin-left: 0; }

/* ── Logo ─────────────────────────────────────────────────── */
.hah-logo { flex-shrink: 0; }
.hah-logo__link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.hah-logo__text {
    font-size: var(--hah-logo-size, 24px);
    font-weight: var(--hah-logo-weight, 700);
    color: var(--hah-logo-color, #111);
    line-height: 1.1;
}
.hah-logo__slogan {
    font-size: var(--hah-slogan-size, 12px);
    color: var(--hah-slogan-color, #888);
    font-weight: var(--hah-slogan-weight, 400);
}
.hah-logo__img { display: block; height: auto; max-height: 56px; }

/* ── Nav ──────────────────────────────────────────────────── */
.hah-nav__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.hah-nav__link {
    display: inline-block;
    padding: 6px 12px;
    font-size: var(--hah-nav-size, 15px);
    font-weight: var(--hah-nav-weight, 500);
    color: var(--hah-nav-color, #333);
    text-decoration: none;
    border-radius: 4px;
    transition: color .2s ease, background .2s ease;
}
.hah-nav__link:hover  { color: var(--hah-nav-hover, #0066cc); }
/* Aktif link stili PHP tarafından inline CSS olarak inject edilir.
   Fallback: sadece renk değişimi */
.hah-nav__link.hah-active { color: var(--hah-nav-active, #0066cc); }

/* ── CTA Group ────────────────────────────────────────────── */
.hah-cta-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── Buttons ──────────────────────────────────────────────── */
.hah-btn {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
    font-size:   var(--hah-cta-font-size, 15px);
    font-weight: var(--hah-cta-font-weight, 600);
    min-width:   var(--hah-cta-min-width, 0);
    padding: var(--hah-cta-pad-v, 9px) var(--hah-cta-pad-h, 20px);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hah-btn--1 {
    background:    var(--hah-cta1-bg, transparent);
    color:         var(--hah-cta1-color, #0066cc);
    border:        var(--hah-cta1-bw, 1px) solid var(--hah-cta1-border, #0066cc);
    border-radius: var(--hah-cta1-br, 6px);
}
.hah-btn--1:hover {
    background:   var(--hah-cta1-hover-bg, #0066cc);
    color:        var(--hah-cta1-hover-col, #fff);
    border-color: var(--hah-cta1-hover-bdr, #0066cc);
}
.hah-btn--2 {
    background:    var(--hah-cta2-bg, #0066cc);
    color:         var(--hah-cta2-color, #fff);
    border:        var(--hah-cta2-bw, 1px) solid var(--hah-cta2-border, #0066cc);
    border-radius: var(--hah-cta2-br, 6px);
}
.hah-btn--2:hover {
    background:   var(--hah-cta2-hover-bg, #004ea8);
    color:        var(--hah-cta2-hover-col, #fff);
    border-color: var(--hah-cta2-hover-bdr, #004ea8);
}

/* ── Hamburger ────────────────────────────────────────────── */
.hah-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--hah-ham-gap, 5px);
    background: transparent !important;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    flex-shrink: 0;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}
.hah-hamburger:hover,
.hah-hamburger:focus,
.hah-hamburger:active,
.hah-hamburger:focus-visible {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.hah-ham-line {
    display: block;
    width:  var(--hah-ham-size, 24px);
    height: var(--hah-ham-lh, 2px);
    background: var(--hah-ham-color, #222);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
}
/* Hamburger → X animasyonu */
.hah-hamburger[aria-expanded="true"] .hah-ham-line:nth-child(1) {
    transform: translateY(calc(var(--hah-ham-gap, 5px) + var(--hah-ham-lh, 2px))) rotate(45deg);
}
.hah-hamburger[aria-expanded="true"] .hah-ham-line:nth-child(2) { opacity: 0; }
.hah-hamburger[aria-expanded="true"] .hah-ham-line:nth-child(3) {
    transform: translateY(calc(-1 * (var(--hah-ham-gap, 5px) + var(--hah-ham-lh, 2px)))) rotate(-45deg);
}

/* ── Drawer ───────────────────────────────────────────────── */
.hah-drawer {
    display: none;
    background: var(--hah-drawer-bg, #fff);
    width: 100%;
    padding: var(--hah-drawer-pad-v, 8px) 0;
    border-top: var(--hah-drawer-bdr-w, 1px) solid var(--hah-drawer-bdr-color, rgba(0,0,0,.08));
    animation: hahDrawerIn .22s ease;
}
.hah-drawer.hah-open { display: block; }

@keyframes hahDrawerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hah-drawer__list {
    list-style: none;
    padding: 0 var(--hah-drawer-pad-h, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--hah-drawer-item-gap, 2px);
}
.hah-drawer__link {
    display: block;
    padding: var(--hah-drawer-lnk-pv, 10px) var(--hah-drawer-lnk-ph, 12px);
    font-size:   var(--hah-drawer-lnk-size, 15px);
    font-weight: var(--hah-drawer-lnk-wt, 500);
    color:       var(--hah-drawer-lnk-color, #333);
    text-decoration: none;
    border-radius: var(--hah-drawer-lnk-br, 4px);
    transition: color .2s ease, background .2s ease;
}
.hah-drawer__link:hover {
    color:      var(--hah-drawer-lnk-hover-col, #0066cc);
    background: var(--hah-drawer-lnk-hover-bg, rgba(0,102,204,.07));
}
.hah-drawer__link.hah-active { color: var(--hah-drawer-lnk-active, #0066cc); }

.hah-drawer__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 12px;
    border-top: var(--hah-drawer-bdr-w, 1px) solid var(--hah-drawer-bdr-color, rgba(0,0,0,.08));
    margin-top: 8px;
}
.hah-drawer__cta .hah-btn {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 16px;
    border-radius: var(--hah-cta1-br, 6px);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .hah-nav,
    .hah-cta-group { display: none !important; }
    .hah-hamburger { display: flex; }
}


/* ============================================================
   HAHeader 2 – E-Ticaret Header Styles
   Tüm selector'lar .hah2- ile başlar
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────────────── */
.hah2-wrap *,
.hah2-wrap *::before,
.hah2-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hah2-announcement-bar *,
.hah2-announcement-bar *::before,
.hah2-announcement-bar *::after { box-sizing: border-box; }

/* ── Announcement Bar ─────────────────────────────────────────────── */
.hah2-announcement-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255,255,255,.15);
}
.hah2-ann-text { flex: 1; text-align: center; padding-right: 40px; }
.hah2-ann-close {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: transparent !important; border: none; cursor: pointer;
    font-size: 15px; padding: 4px 6px; opacity: .8; outline: none;
}
.hah2-ann-close:hover { opacity: 1; }
.hah2-announcement-bar.hah2-ann-hidden { display: none !important; }

/* ── Wrapper ──────────────────────────────────────────────────────── */
.hah2-wrap {
    position: relative;
    width: 100%;
    background: var(--hah2-bg, #fff);
    font-family: var(--hah2-font, inherit);
    color: var(--hah2-text, #222);
    z-index: 9999;
    transition: box-shadow .3s ease, background .3s ease;
}
.hah2-placeholder { display: none; }
.hah2-sticky { position: fixed; top: 0; left: 0; right: 0; }
.hah2-sticky.hah2-scrolled {
    background: var(--hah2-sticky-bg, #fff) !important;
    box-shadow: var(--hah2-sticky-shadow, 0 2px 12px rgba(0,0,0,.1));
}

/* ── Main Row ─────────────────────────────────────────────────────── */
.hah2-main-row {
    background: var(--hah2-bg, #fff);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

/*
 * 3-sütun grid:
 *   [logo-slot | search-slot | icons-slot]
 *   auto       |   1fr       |   auto
 *
 * Logo daima sola, ikonlar daima sağa sabitlenir.
 * Arama kutusu orta sütunu kaplar; search_align ile
 * kendi içinde justify-content ayarlanır.
 */
.hah2-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo search icons";
    align-items: center;
    padding: var(--hah2-pt,14px) var(--hah2-pr,24px) var(--hah2-pb,14px) var(--hah2-pl,24px);
    gap: 0 20px;
    width: 100%;
}

/* Grid alanları */
.hah2-logo-slot   { grid-area: logo;   display: flex; align-items: center; }
.hah2-search-slot { grid-area: search; display: flex; align-items: center; min-width: 0; }
.hah2-icons-slot  { grid-area: icons;  display: flex; align-items: center; }

/* Hamburger grid dışında – mobilde görünür */
.hah2-hamburger { display: none; }

/* ── Search hizalama (search_align ayarına göre) ───────────────── */

/* center (varsayılan): arama ortada kendi max-width ile */
.hah2-search-align-center .hah2-search-slot { justify-content: center; }
.hah2-search-align-center .hah2-search-slot .hah2-search {
    width: 100%;
    max-width: var(--hah2-search-max-width, none);
}

/* left: arama sola yaslanır */
.hah2-search-align-left .hah2-search-slot { justify-content: flex-start; }
.hah2-search-align-left .hah2-search-slot .hah2-search {
    width: 100%;
    max-width: var(--hah2-search-max-width, none);
}

/* right: arama sağa yaslanır */
.hah2-search-align-right .hah2-search-slot { justify-content: flex-end; }
.hah2-search-align-right .hah2-search-slot .hah2-search {
    width: 100%;
    max-width: var(--hah2-search-max-width, none);
}

/* ── Logo ─────────────────────────────────────────────────────────── */
.hah2-logo { flex-shrink: 0; }
.hah2-logo__link {
    display: flex; flex-direction: column; line-height: 1.2; text-decoration: none;
}
.hah2-logo__text {
    font-size: var(--hah2-logo-size, 26px);
    font-weight: var(--hah2-logo-weight, 800);
    color: var(--hah2-logo-color, #111);
    line-height: 1.1;
}
.hah2-logo__slogan { font-size: var(--hah2-slogan-size,11px); color: var(--hah2-slogan-color,#888); }
.hah2-logo__img { display: block; height: auto; max-height: 52px; }

/* ── Search ───────────────────────────────────────────────────────── */
.hah2-search {
    /* Genişlik search-wrap tarafından yönetilir */
    width: 100%;
    max-width: 100%;

    /* Kutu modeli */
    display: flex;
    align-items: stretch;          /* input + buton aynı yüksekliği paylaşır */
    height: var(--hah2-search-height, 44px);

    /* Görünüm */
    background: var(--hah2-search-bg, #f5f5f5);
    border: var(--hah2-search-bdr-w, 1px) solid var(--hah2-search-bdr, #e0e0e0);
    border-radius: var(--hah2-search-br, 8px);

    /* overflow:hidden → içerideki buton köşeleri wrapper'ın border-radius'una göre kesilir */
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.hah2-search:focus-within {
    border-color: var(--hah2-search-btn-bg, #0066cc);
    box-shadow: 0 0 0 3px rgba(0,102,204,.12);
}

/* Input alanı */
.hah2-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;               /* stretch ile wrapper yüksekliğini alır */
    border: none;
    background: transparent;
    padding: 0 14px;
    font-size: var(--hah2-search-font-size, 14px);
    color: var(--hah2-search-text, #333);
    outline: none;
    line-height: 1;
}
.hah2-search__input::placeholder {
    color: #aaa;
    transition: opacity .15s;
}
/* Animasyon sırasında placeholder biraz daha belirgin */
.hah2-search__input:not(:focus)::placeholder { color: #999; }

/* Arama butonu — wrapper border-radius ile köşeleri kesildiği için
   butonun kendi border-radius değerine gerek yok. align-self:stretch
   ile üst/alt/sağ kenarlara mükemmel oturur. */
.hah2-search__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;        /* üstten alta tam dolar */
    flex-shrink: 0;
    padding: 0 18px;
    background: var(--hah2-search-btn-bg, #0066cc);
    color: var(--hah2-search-btn-color, #fff);
    border: none;
    border-radius: 0;           /* wrapper overflow:hidden köşeleri keser */
    cursor: pointer;
    transition: opacity .2s, background .2s;
    line-height: 1;
}
.hah2-search__btn:hover { opacity: .85; }
.hah2-search__btn svg {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Icon Group ───────────────────────────────────────────────────── */
.hah2-icon-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.hah2-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--hah2-icon-color, #333);
    transition: color .2s, background .2s;
    /* position:relative — badge buraya göre konumlanır, SVG'ye dokunmaz */
    position: relative;
    min-width: 52px;
}
.hah2-icon-btn:hover { color: var(--hah2-icon-hover, #0066cc); background: rgba(0,102,204,.06); }

.hah2-icon-btn__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hah2-icon-size, 22px);
    height: var(--hah2-icon-size, 22px);
}

/* SVG ikonu — px boyutu YOK, sadece CSS kontrol eder.
   image-rendering: crisp-edges + shape-rendering geometricPrecision
   ile her DPI'da net görünür. */
.hah2-icon-btn__icon svg {
    display: block;
    width: var(--hah2-icon-size, 22px);
    height: var(--hah2-icon-size, 22px);
    /* Kritik: alt-pixel blur'u önle */
    shape-rendering: geometricPrecision;
    /* GPU katmanı — compositing sırasında blur olmasın */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    /* Retina'da keskin */
    -webkit-font-smoothing: antialiased;
}

.hah2-icon-btn__label {
    font-size: var(--hah2-icon-label-size, 11px);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
}

/* ── Cart Badge ───────────────────────────────────────────────────
   .hah2-icon-btn__icon içinde, ikonun sağ üstüne konumlanır.
   CSS ikonu kullandığımız için SVG blur sorunu artık yok.          */
.hah2-cart-badge {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    background: var(--hah2-cart-badge-bg, #e63946);
    color: var(--hah2-cart-badge-color, #fff);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 4px;
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;
    /* Keskin render */
    will-change: auto;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    /* İkon üzerine oturur, çizgisel border ile ayrışır */
    border: 1.5px solid #fff;
}
.hah2-cart-badge:empty { display: none; }

/* ── Nav Bar ──────────────────────────────────────────────────────── */
.hah2-nav-bar {
    background: var(--hah2-nav-bg, #f8f8f8);
    border-top: 1px solid var(--hah2-nav-bdr, #ececec);
}
.hah2-nav-inner {
    /* --hah2-nav-link-ph: nav link'in yatay padding'i (PHP'den inject edilir)
       container-padding − link-padding = net hizalama
       Logo ile ilk nav linki aynı x koordinatında başlar. */
    padding: 0
             calc(var(--hah2-pr,24px) - var(--hah2-nav-link-ph,14px))
             0
             calc(var(--hah2-pl,24px) - var(--hah2-nav-link-ph,14px));
    width: 100%;
    /* Negatife düşmemesi için minimum 0 – eski tarayıcı fallback */
    min-width: 0;
}
.hah2-nav__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

/* ── Nav hizalama ─────────────────────────────────────────────────── */
.hah2-nav-align-left    { justify-content: flex-start; }
.hah2-nav-align-center  { justify-content: center; }
.hah2-nav-align-right   { justify-content: flex-end; }
.hah2-nav__item { position: relative; }
.hah2-nav__link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px var(--hah2-nav-link-ph, 14px);
    font-size: var(--hah2-nav-size, 14px);
    font-weight: var(--hah2-nav-weight, 500);
    color: var(--hah2-nav-link, #333);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}
.hah2-nav__link:hover,
.hah2-nav__item:hover > .hah2-nav__link { color: var(--hah2-nav-hover, #0066cc); }
/* H2 aktif link stili PHP tarafından inline CSS olarak inject edilir. */
.hah2-nav__link.hah2-active { color: var(--hah2-nav-active, #0066cc); }
.hah2-dd-arrow { transition: transform .2s; }
.hah2-nav__item:hover > .hah2-nav__link .hah2-dd-arrow { transform: rotate(180deg); }

/* Dropdown */
.hah2-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--hah2-dd-bg, #fff);
    box-shadow: var(--hah2-dd-shadow, 0 8px 24px rgba(0,0,0,.12));
    border-radius: var(--hah2-dd-br, 8px);
    padding: 8px 0;
    z-index: 10000;
    list-style: none;
    animation: hah2DdIn .18s ease;
}
@keyframes hah2DdIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hah2-has-dd:hover > .hah2-dropdown,
.hah2-has-dd:focus-within > .hah2-dropdown { display: block; }
.hah2-dropdown__link {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--hah2-nav-link, #333);
    text-decoration: none;
    transition: color .15s, background .15s;
}
.hah2-dropdown__link:hover { color: var(--hah2-nav-hover, #0066cc); background: rgba(0,102,204,.06); }

/* ── Hamburger ────────────────────────────────────────────────────── */
.hah2-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--hah2-ham-gap, 5px);
    background: transparent !important;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    flex-shrink: 0;
    outline: none;
}
.hah2-ham-line {
    display: block;
    width: var(--hah2-ham-size, 24px);
    height: var(--hah2-ham-lh, 2px);
    background: var(--hah2-ham-color, #222);
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
}
.hah2-hamburger[aria-expanded="true"] .hah2-ham-line:nth-child(1) {
    transform: translateY(calc(var(--hah2-ham-gap,5px) + var(--hah2-ham-lh,2px))) rotate(45deg);
}
.hah2-hamburger[aria-expanded="true"] .hah2-ham-line:nth-child(2) { opacity: 0; }
.hah2-hamburger[aria-expanded="true"] .hah2-ham-line:nth-child(3) {
    transform: translateY(calc(-1 * (var(--hah2-ham-gap,5px) + var(--hah2-ham-lh,2px)))) rotate(-45deg);
}

/* ── Drawer ───────────────────────────────────────────────────────── */
.hah2-drawer {
    display: none;
    background: var(--hah2-drawer-bg, #fff);
    width: 100%;
    padding: 8px 0;
    border-top: 1px solid var(--hah2-drawer-bdr, rgba(0,0,0,.08));
    animation: hah2DrawerIn .22s ease;
}
.hah2-drawer.hah2-open { display: block; }
@keyframes hah2DrawerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hah2-drawer__list { list-style: none; padding: 0 16px; display: flex; flex-direction: column; gap: 2px; }
.hah2-drawer__link {
    display: block;
    padding: 10px 12px;
    font-size: var(--hah2-drawer-size, 15px);
    font-weight: 500;
    color: var(--hah2-drawer-link, #333);
    text-decoration: none;
    border-radius: 6px;
    transition: color .2s, background .2s;
}
.hah2-drawer__link:hover { color: var(--hah2-drawer-hover, #0066cc); background: rgba(0,102,204,.07); }
.hah2-drawer__link.hah2-active { color: var(--hah2-drawer-hover, #0066cc); }
.hah2-drawer__sub { list-style: none; padding-left: 16px; margin-top: 2px; }
.hah2-drawer__sub-link {
    display: block; padding: 7px 12px;
    font-size: 13px; color: var(--hah2-drawer-link, #333);
    text-decoration: none; border-radius: 4px;
    transition: color .2s;
}
.hah2-drawer__sub-link:hover { color: var(--hah2-drawer-hover, #0066cc); }
.hah2-drawer__icons {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 12px 8px;
    border-top: 1px solid rgba(0,0,0,.08);
    margin-top: 8px;
}
.hah2-drawer__icon-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    font-size: 14px; font-weight: 500;
    color: var(--hah2-drawer-link, #333);
    text-decoration: none;
    border-radius: 6px;
    transition: color .2s, background .2s;
}
.hah2-drawer__icon-link:hover { color: var(--hah2-drawer-hover, #0066cc); background: rgba(0,102,204,.07); }
.hah2-drawer__icon-link svg {
    width: 18px; height: 18px; flex-shrink: 0;
    display: block;
    shape-rendering: geometricPrecision;
    transform: translateZ(0);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Mobilde 3-sütun grid → 2-sütun: [logo | search] + hamburger */
    .hah2-inner {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "logo search hamburger";
    }
    .hah2-icons-slot,
    .hah2-nav-bar { display: none !important; }

    /* Hamburger grid'e dahil edilir */
    .hah2-hamburger {
        display: flex;
        grid-area: hamburger;
        margin-left: 0;
    }

    /* Arama mobilde her zaman tam genişlik */
    .hah2-search {
        max-width: none !important;
        width: 100%;
    }
    .hah2-search-slot { justify-content: stretch !important; }

    .hah2-search__input { font-size: 16px; } /* iOS zoom engelle */
}
@media (max-width: 480px) {
    .hah2-inner { gap: 0 10px; padding-left: 12px; padding-right: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   Hesabım Dropdown
════════════════════════════════════════════════════════════════════ */

/* Wrapper — position:relative kaynağı */
.hah2-icon-btn-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* Dropdown kutusu — varsayılan gizli */
.hah2-account-dd {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: auto;
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
    z-index: 99999;
    overflow: hidden;
    /* Animasyon başlangıcı */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
    /* Üçgen ok */
}
/* Üstteki ok */
.hah2-account-dd::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 22px;
    right: auto;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 5px rgba(0,0,0,.06);
    border-radius: 2px;
}

/* Buton-panel gap köprüsü */
.hah2-account-dd::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 0; right: 0;
    height: 10px;
}

/* Açık hali */
.hah2-account-wrap:hover .hah2-account-dd,
.hah2-account-wrap.hah2-dd-open .hah2-account-dd {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* İç kapsayıcı */
.hah2-account-dd__inner {
    padding: 16px;
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 12px;
}

/* ── Giriş yapılmamış hali ─────────────────────────────────────── */
.hah2-account-dd__guest {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hah2-account-dd__login-btn {
    display: block;
    width: 100%;
    padding: 11px 0;
    text-align: center;
    background: var(--hah2-search-btn-bg, #0066cc);
    color: #fff !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity .15s;
}
.hah2-account-dd__login-btn:hover { opacity: .88; }

.hah2-account-dd__register-btn {
    display: block;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    background: transparent;
    color: var(--hah2-search-btn-bg, #0066cc) !important;
    border: 1.5px solid var(--hah2-search-btn-bg, #0066cc);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.hah2-account-dd__register-btn:hover {
    background: var(--hah2-search-btn-bg, #0066cc);
    color: #fff !important;
}

/* ── Giriş yapılmış hali ───────────────────────────────────────── */
.hah2-account-dd__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.hah2-account-dd__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hah2-search-btn-bg, #0066cc);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hah2-account-dd__name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* Menü listesi */
.hah2-account-dd__list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}
.hah2-account-dd__list li a {
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 14px;
    color: #333 !important;
    text-decoration: none !important;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.hah2-account-dd__list li a:hover {
    background: rgba(0,102,204,.07);
    color: var(--hah2-search-btn-bg, #0066cc) !important;
}

/* Çıkış */
.hah2-account-dd__footer {
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}
.hah2-account-dd__logout {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 14px;
    color: #e63946 !important;
    text-decoration: none !important;
    transition: background .15s;
}
.hah2-account-dd__logout:hover { background: rgba(230,57,70,.08); }

/* Mobilde dropdown gizle — drawer'da göster */
@media (max-width: 768px) {
    .hah2-account-dd { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Canlı Arama Paneli
════════════════════════════════════════════════════════════════════ */

.hah2-search-wrap {
    position: relative;
    /* Slot'un verdiği genişliği tam kapla */
    flex: 1 1 100%;
    min-width: 0;
    max-width: var(--hah2-search-max-width, none);
}

/* Panel kutusu */
.hah2-search-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 360px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07);
    z-index: 99998;
    overflow: hidden;
    max-height: 520px;
    overflow-y: auto;
}
.hah2-search-panel.hah2-panel-open {
    display: block;
    animation: hah2PanelIn .15s ease;
}
@keyframes hah2PanelIn {
    from { opacity:0; transform:translateY(4px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Bölüm başlığı */
.hah2-search-panel__section { padding: 14px 16px 10px; }
.hah2-search-panel__section + .hah2-search-panel__section {
    border-top: 1px solid #f2f2f2;
}
.hah2-search-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.hah2-search-panel__head > span {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.hah2-search-panel__clear {
    font-size: 12px;
    color: var(--hah2-nav-hover, #0066cc);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-weight: 500;
}
.hah2-search-panel__clear:hover { text-decoration: underline; }

/* Popüler arama etiketleri */
.hah2-search-panel__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hah2-search-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #f5f5f5;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.hah2-search-tag:hover {
    background: rgba(0,102,204,.1);
    color: var(--hah2-nav-hover, #0066cc);
}
.hah2-search-tag svg { width: 12px; height: 12px; opacity: .5; }

/* Son aramalar listesi */
.hah2-search-panel__recent-list {
    list-style: none;
    padding: 0; margin: 0;
}
.hah2-search-panel__recent-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s;
}
.hah2-search-panel__recent-list li:hover { background: #f7f7f7; }
.hah2-recent-icon {
    width: 28px; height: 28px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hah2-recent-icon svg { width: 13px; height: 13px; color: #888; }
.hah2-recent-term {
    flex: 1;
    font-size: 13px;
    color: #333;
}
.hah2-recent-remove {
    background: none; border: none; cursor: pointer;
    color: #bbb; font-size: 16px; padding: 2px 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color .12s, background .12s;
}
.hah2-recent-remove:hover { color: #e63946; background: #fff0f0; }

/* Ürün sonuçları */
.hah2-search-panel__results { padding: 8px 0; }
.hah2-search-results-list { list-style: none; padding: 0; margin: 0; }
.hah2-search-results-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    text-decoration: none !important;
    transition: background .12s;
}
.hah2-search-results-list li a:hover { background: #f8f8f8; }
.hah2-result-img {
    width: 46px; height: 46px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f5f5f5;
    border: 1px solid #ececec;
}
.hah2-result-info { flex: 1; min-width: 0; }
.hah2-result-cat {
    font-size: 11px;
    color: #aaa;
    display: block;
    margin-bottom: 2px;
}
.hah2-result-title {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.hah2-result-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--hah2-nav-hover, #0066cc);
    white-space: nowrap;
    flex-shrink: 0;
}
.hah2-result-price ins {
    text-decoration: none;
}
.hah2-result-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: #e63946;
    color: #fff;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Tüm sonuçları gör */
.hah2-search-panel__all {
    padding: 10px 16px;
    border-top: 1px solid #f2f2f2;
}
.hah2-search-panel__all a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--hah2-nav-hover, #0066cc) !important;
    text-decoration: none !important;
}
.hah2-search-panel__all a svg { width: 14px; height: 14px; }
.hah2-search-panel__all a:hover { text-decoration: underline !important; }

/* Yükleniyor */
.hah2-search-panel__loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    color: #888;
    font-size: 13px;
}
.hah2-search-spinner {
    width: 18px; height: 18px;
    border: 2px solid #e0e0e0;
    border-top-color: var(--hah2-search-btn-bg, #0066cc);
    border-radius: 50%;
    animation: hah2Spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes hah2Spin { to { transform: rotate(360deg); } }

/* Sonuç yok */
.hah2-search-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    color: #aaa;
    font-size: 13px;
}
.hah2-search-panel__empty svg {
    width: 32px; height: 32px;
    opacity: .3;
}

/* Mobilde full-width */
@media (max-width: 768px) {
    .hah2-search-panel {
        min-width: 0;
        border-radius: 0 0 12px 12px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Favori Badge
════════════════════════════════════════════════════════════════════ */
.hah2-wishlist-badge {
    position: absolute;
    top: -7px; right: -9px;
    min-width: 18px; height: 18px;
    font-size: 10px; font-weight: 700;
    line-height: 18px; text-align: center;
    border-radius: 9px; padding: 0 4px;
    box-sizing: border-box;
    border: 1.5px solid #fff;
    z-index: 2; pointer-events: none;
    transform: translateZ(0);
}
.hah2-wishlist-badge:empty { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   Bildirim Butonu & Badge
════════════════════════════════════════════════════════════════════ */
.hah2-notif-badge {
    position: absolute;
    top: -7px; right: -9px;
    min-width: 18px; height: 18px;
    font-size: 10px; font-weight: 700;
    line-height: 18px; text-align: center;
    border-radius: 9px; padding: 0 4px;
    box-sizing: border-box;
    border: 1.5px solid #fff;
    z-index: 2; pointer-events: none;
    transform: translateZ(0);
}
.hah2-notif-badge:empty { display: none !important; }

/* Buton — <button> olduğu için background/border sıfırla */
.hah2-icon-btn--notif {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════════
   Bildirim Paneli
════════════════════════════════════════════════════════════════════ */
.hah2-notif-wrap { position: relative; }

.hah2-notif-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: auto;
    width: 340px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.07);
    z-index: 99999;
    overflow: hidden;
}
.hah2-notif-panel::before {
    content: '';
    position: absolute;
    top: -7px; left: 22px;
    width: 14px; height: 14px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 5px rgba(0,0,0,.06);
    border-radius: 2px;
}
/* Buton ile panel arasındaki gap'i kapatan görünmez köprü */
.hah2-notif-panel::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 0; right: 0;
    height: 10px;
}
.hah2-notif-wrap:hover .hah2-notif-panel,
.hah2-notif-wrap.hah2-notif-open .hah2-notif-panel {
    display: block;
    animation: hah2PanelIn .15s ease;
}

/* Başlık */
.hah2-notif-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    position: relative; z-index: 1;
    background: #fff;
}
.hah2-notif-panel__head > span {
    font-size: 15px;
    font-weight: 700;
    color: #222;
}
.hah2-notif-read-all {
    font-size: 12px;
    color: var(--hah2-nav-hover, #0066cc);
    background: none; border: none;
    cursor: pointer; padding: 0;
    font-weight: 500;
}
.hah2-notif-read-all:hover { text-decoration: underline; }

/* Body */
.hah2-notif-panel__body {
    max-height: 400px;
    overflow-y: auto;
    position: relative; z-index: 1;
    background: #fff;
}

/* Yükleniyor */
.hah2-notif-loading {
    display: flex;
    justify-content: center;
    padding: 24px;
}

/* Boş */
.hah2-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: #aaa;
    font-size: 13px;
    text-align: center;
}
.hah2-notif-empty svg {
    width: 36px; height: 36px; opacity: .25;
}

/* Bildirim öğesi */
.hah2-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f8f8f8;
    text-decoration: none !important;
    transition: background .12s;
    cursor: pointer;
    position: relative;
}
.hah2-notif-item:last-child { border-bottom: none; }
.hah2-notif-item:hover { background: #f9f9f9; }
.hah2-notif-item.hah2-notif-unread { background: #f0f6ff; }
.hah2-notif-item.hah2-notif-unread:hover { background: #e8f0fe; }

/* Okunmamış nokta */
.hah2-notif-item.hah2-notif-unread::after {
    content: '';
    position: absolute;
    top: 14px; right: 14px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--hah2-search-btn-bg, #0066cc);
}

/* İkon alanı */
.hah2-notif-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hah2-notif-icon--campaign {
    background: #fff3e0;
    color: #f57c00;
}
.hah2-notif-icon--order {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Metin */
.hah2-notif-content { flex: 1; min-width: 0; }
.hah2-notif-title {
    font-size: 13px; font-weight: 600;
    color: #222; display: block;
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.hah2-notif-text {
    font-size: 12px; color: #666;
    display: block; line-height: 1.4;
}
.hah2-notif-time {
    font-size: 11px; color: #bbb;
    display: block; margin-top: 4px;
}

/* Mobilde gizle */
@media (max-width: 768px) {
    .hah2-notif-panel { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Favori Butonu — Ürün Kartları & Detay Sayfası
════════════════════════════════════════════════════════════════════ */

/* ── Genel buton stili ──────────────────────────────────────────── */
.hah2-wl-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    transition: color .2s, transform .2s;
    -webkit-tap-highlight-color: transparent;
}
.hah2-wl-btn:hover { color: #e63946; }
.hah2-wl-btn:active { transform: scale(.88); }

/* Dolu/boş kalp göster/gizle */
.hah2-wl-icon--filled { display: none; }
.hah2-wl-icon--empty  { display: block; }

.hah2-wl-btn.hah2-wl-active { color: #e63946; }
.hah2-wl-btn.hah2-wl-active .hah2-wl-icon--filled { display: block; }
.hah2-wl-btn.hah2-wl-active .hah2-wl-icon--empty  { display: none; }

/* ── Animasyon: kalp çarp ── */
@keyframes hah2HeartPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(.9); }
    100% { transform: scale(1); }
}
.hah2-wl-btn.hah2-wl-pop { animation: hah2HeartPop .35s ease; }

/* ── Ürün KARTI (loop) ──────────────────────────────────────────── */
.hah2-wl-btn--loop {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,.9) !important;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    backdrop-filter: blur(4px);
    color: #999;
}
.hah2-wl-btn--loop svg { width: 16px; height: 16px; }
.hah2-wl-btn--loop:hover {
    background: #fff !important;
    color: #e63946;
    box-shadow: 0 4px 12px rgba(230,57,70,.25);
}
/* WooCommerce li.product position:relative gerektirir */
.products li.product,
.woocommerce ul.products li.product { position: relative; }

/* ── Ürün DETAY sayfası ─────────────────────────────────────────── */
.hah2-wl-btn--single {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    background: #fff;
    margin-top: 10px;
    transition: border-color .2s, color .2s, background .2s;
}
.hah2-wl-btn--single svg { width: 18px; height: 18px; }
.hah2-wl-btn--single::after {
    content: attr(aria-label);
    font-size: 14px;
}
.hah2-wl-btn--single:hover {
    border-color: #e63946;
    color: #e63946;
    background: #fff5f5;
}
.hah2-wl-btn--single.hah2-wl-active {
    border-color: #e63946;
    color: #e63946;
    background: #fff5f5;
}

/* ════════════════════════════════════════════════════════════════════
   Favoriler Sayfası — [hah2_favoriler]
════════════════════════════════════════════════════════════════════ */
.hah2-wishlist-page { font-family: inherit; }

/* Başlık satırı */
.hah2-wl-page-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ececec;
}
.hah2-wl-page-header h3 {
    font-size: 18px; font-weight: 700; color: #222; margin: 0;
}
.hah2-wl-clear-all {
    font-size: 13px; color: #e63946;
    background: none; border: none; cursor: pointer;
    padding: 0; font-weight: 500;
}
.hah2-wl-clear-all:hover { text-decoration: underline; }

/* Grid */
.hah2-wl-grid {
    display: grid;
    gap: 20px;
}
.hah2-wl-grid-4 { grid-template-columns: repeat(4, 1fr); }
.hah2-wl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hah2-wl-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 992px) {
    .hah2-wl-grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .hah2-wl-grid-4,
    .hah2-wl-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .hah2-wl-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .hah2-wl-grid-4,
    .hah2-wl-grid-3,
    .hah2-wl-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Ürün kartı */
.hah2-wl-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ececec;
    transition: box-shadow .2s, transform .2s;
    display: flex; flex-direction: column;
}
.hah2-wl-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.10);
    transform: translateY(-2px);
}
.hah2-wl-card__img-wrap {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f9f9f9;
}
.hah2-wl-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.hah2-wl-card:hover .hah2-wl-card__img { transform: scale(1.04); }
.hah2-wl-card__badge {
    position: absolute; top: 8px; left: 8px;
    background: #e63946; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 4px;
}
.hah2-wl-card__out {
    position: absolute; top: 8px; left: 8px;
    background: #888; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 4px;
}
/* Favori kaldır butonu — kart üstünde */
.hah2-wl-btn--page {
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px;
    background: rgba(255,255,255,.92) !important;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    color: #e63946 !important;
}
.hah2-wl-btn--page svg { width: 15px; height: 15px; }
/* Sayfa kartında aktif başta göster */
.hah2-wl-btn--page .hah2-wl-icon--empty  { display: none; }
.hah2-wl-btn--page .hah2-wl-icon--filled { display: block; }

.hah2-wl-card__body {
    padding: 12px; flex: 1;
    display: flex; flex-direction: column; gap: 6px;
}
.hah2-wl-card__cat {
    font-size: 11px; color: #aaa;
    text-transform: uppercase; letter-spacing: .04em;
}
.hah2-wl-card__title {
    font-size: 14px; font-weight: 600; color: #222;
    text-decoration: none; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.hah2-wl-card__title:hover { color: var(--hah2-nav-hover, #0066cc); }
.hah2-wl-card__price {
    font-size: 15px; font-weight: 700;
    color: var(--hah2-nav-hover, #0066cc);
    margin-top: auto;
}
.hah2-wl-card__price ins { text-decoration: none; }
.hah2-wl-card__price del { font-size: 12px; color: #aaa; font-weight: 400; margin-right: 4px; }
.hah2-wl-card__atc {
    display: block; width: 100%;
    text-align: center;
    padding: 9px 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    margin-top: 4px;
}
.hah2-wl-card__atc--out {
    background: #f5f5f5 !important;
    color: #888 !important;
    border-color: #e0e0e0 !important;
}

/* Boş durum */
.hah2-wl-page-empty {
    display: flex; flex-direction: column;
    align-items: center; gap: 12px;
    padding: 60px 20px; text-align: center;
    color: #888;
}
.hah2-wl-page-empty svg { width: 52px; height: 52px; opacity: .2; }
.hah2-wl-page-empty h3 { font-size: 20px; color: #333; margin: 0; }
.hah2-wl-page-empty p  { font-size: 14px; margin: 0; }
.hah2-wl-page-empty .button { margin-top: 8px; }

/* Loading */
.hah2-wl-loading {
    display: flex; justify-content: center; padding: 40px;
}

/* Kaldırılan kart animasyonu */
.hah2-wl-card.hah2-wl-removing {
    animation: hah2WlRemove .3s ease forwards;
}
@keyframes hah2WlRemove {
    to { opacity: 0; transform: scale(.85); }
}