/* === assets/frontend/css/featured/featured_8.css === */
/* ==========================================================
   Featured Görünüm 8 — Overlay Vitrin
   Kendi kart tasarımına sahip B sınıfı görünüm; tüm kurallar
   .ftr-v8 kökü altındadır, site kart sistemine dokunmaz.
   Yazı okunurluğu koyu degrade ile sağlanır.
   Mobile-first: 2 kolon; >=768px 3, >=1200px 4 kolon.
   ========================================================== */

.ftr-v8-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.ftr-v8-card {
    position: relative;
    display: block;
    /* Oran, sitenin urun karti ayarindan gelir (kare 1:1 veya portre 3:4).
       Degisken her zaman view tarafindan basilir; yedek deger yalnizca
       eski onbellekten gelen HTML icin durur. */
    aspect-ratio: var(--ftr-v8-en-boy, 3 / 4);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ftr-gorsel-bg, #f5f6f8);
    text-decoration: none;
    color: #fff;
}
.ftr-v8-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.ftr-v8-card:hover .ftr-v8-photo { transform: scale(1.045); }
.ftr-v8-card:hover { color: #fff; }

/* Ürün etiketi (rozet): rengi ürün ayarından gelir */
.ftr-v8-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 5px;
    background: #1f2b3e;
    color: #fff;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* İndirim rozeti: sağ üst köşe */
.ftr-v8-discount {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 5px;
    background: #e53935;
    color: #fff;
    white-space: nowrap;
}

/* Alt yazı bloğu: koyu degrade üzerinde ad + fiyat */
.ftr-v8-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 26px 12px 12px;
    background: linear-gradient(to top, rgba(var(--ftr-v8-ov-rgb, 10, 14, 22), 0.82) 0%, rgba(var(--ftr-v8-ov-rgb, 10, 14, 22), 0.45) 55%, rgba(var(--ftr-v8-ov-rgb, 10, 14, 22), 0) 100%);
}
.ftr-v8-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Varyant bilgisi ("+3 Renk"): degrade zemin üzerinde okunur açık ton */
.ftr-v8-variant {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Fiyat satırı: dar kartta sarmalı, taşma olmaz */
.ftr-v8-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 7px;
    font-size: 14px;
    min-width: 0;
}
.ftr-v8-price strong { font-weight: 700; }
.ftr-v8-old {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
}

@media (min-width: 768px) {
    .ftr-v8-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (min-width: 1200px) {
    .ftr-v8-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Hareket azaltma tercihinde yakınlaşma animasyonu kapatılır */
@media (prefers-reduced-motion: reduce) {
    .ftr-v8-photo { transition: none; }
    .ftr-v8-card:hover .ftr-v8-photo { transform: none; }
}

/* === assets/frontend/css/featured/featured_12.css === */
/* ==========================================================
   Featured Görünüm 12 — Fiyat Listesi
   Kendi kart tasarımına sahip B sınıfı görünüm; tüm kurallar
   .ftr-v12 kökü altındadır, site kart sistemine dokunmaz.
   Menü estetiği: ad solda, noktalı çizgi, fiyat sağda.
   Mobile-first: küçük görsel gizlenmez, boyutlar küçülür.
   ========================================================== */

.ftr-v12-list {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.ftr-v12-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    min-height: 56px;
    border-bottom: 1px solid #eceef2;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.ftr-v12-row:last-child { border-bottom: none; }
.ftr-v12-row:hover {
    background: rgba(15, 23, 42, 0.03);
    color: inherit;
}

.ftr-v12-img {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ftr-gorsel-bg, #f5f6f8);
}
.ftr-v12-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ftr-v12-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex-shrink: 1;
}
.ftr-v12-name {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    color: #1f2b3e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ftr-v12-variant { font-size: 11px; color: #94a3b8; }
/* Ürün etiketi (rozet): ad ile aynı satırda küçük çip; rengi ürün ayarından gelir */
.ftr-v12-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    background: #1f2b3e;
    color: #fff;
    vertical-align: middle;
    margin-right: 4px;
    white-space: nowrap;
}
/* Puan satırı */
.ftr-v12-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #1f2b3e;
}
.ftr-v12-star { color: #f5a623; font-size: 11px; }
.ftr-v12-rating-count { color: #94a3b8; }
/* Kampanya satırı */
.ftr-v12-campaign {
    font-size: 10.5px;
    font-weight: 600;
    color: #c62828;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Noktalı ara çizgi (menü estetiği) */
.ftr-v12-dots {
    flex: 1 1 20px;
    min-width: 20px;
    border-bottom: 2px dotted #d3d8e0;
    align-self: center;
    margin-top: 6px;
}

/* Sağ blok: dar ekranda sığmazsa alt satıra sararak taşma önlenir */
.ftr-v12-right {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 2px 8px;
    flex-shrink: 0;
    max-width: 45%;
}
.ftr-v12-price {
    font-size: 14.5px;
    font-weight: 700;
    color: #1f2b3e;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ftr-v12-old {
    font-size: 12px;
    color: #9aa3b0;
    white-space: nowrap;
}
/* İndirim yüzdesi: fiyatın solunda kırmızı vurgu */
.ftr-v12-discount {
    font-size: 10px;
    font-weight: 700;
    color: #e53935;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .ftr-v12-row { padding: 13px 6px; gap: 14px; }
    .ftr-v12-name { font-size: 14.5px; }
    .ftr-v12-price { font-size: 15.5px; }
}

/* === assets/frontend/css/header/header_5_base.css === */
/* --- HEADER 5 BASE CSS (editable:false) --- */
/* Parametrik header: tum gorunum varyantlari .wvh5--* modifier siniflariyla cozulur.
   Renkler header_5.css (panelden uretilir) icindeki CSS degiskenlerinden gelir. */

/* Sticky footer: icerik az olsa bile footer her zaman en altta kalsin */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   RENK MODELI — rol tabanli
   Panelden yalnizca ROLLER secilir (Renkler bolumu, 4 grup):
     --wvh5-bg / --wvh5-fg / --wvh5-icon        : header yuzeyi ve icerigi
     --wvh5-accent / --wvh5-accent-fg           : rozet, hover, secili durum
     --wvh5-border                              : cizgi ve kenarliklar
     --wvh5-row2-bg / --wvh5-row2-fg            : alt satir yuzeyi
     --wvh5-panel-bg / --wvh5-panel-fg          : acilir paneller
     --wvh5-topbar-bg / --wvh5-topbar-fg        : duyuru serididir (.wvh5-top-bar)
   Eleman basina renk YOKTUR: her yeni parca bu rollerden birine baglanir.
   Ince tonlar (hover zemini, ikincil yuzey, soluk yazi) rollerden turetilir;
   asagidaki --wvh5-hover-bg / --wvh5-panel-alt-bg / --wvh5-muted bunlardir.
   ============================================================ */

/* Rollerden turetilen ic tonlar. Panelde ayri ayar olarak gorunmezler:
   secilen rollerden hesaplanirlar, boylece tenant 6 renk secince hover
   zemini / ikincil yuzey / soluk yazi kendiliginden uyumlu olur.
   :root'ta durmalari sart — mobil menu offcanvas'i ve arama katmani
   nav'in DISINDA basilir, navbar'da tanimlansa oralara ulasmazlardi. */
:root {
    --wvh5-hover-bg: color-mix(in srgb, var(--wvh5-accent, #1f2b3e) 8%, transparent);
    --wvh5-panel-alt-bg: color-mix(in srgb, var(--wvh5-panel-fg, #1f2b3e) 4%, var(--wvh5-panel-bg, #ffffff));
    --wvh5-muted: color-mix(in srgb, var(--wvh5-panel-fg, #1f2b3e) 55%, transparent);
    --wvh5-border-soft: color-mix(in srgb, var(--wvh5-border, #e8e8e8) 55%, transparent);
}

/* ---------- Nav govdesi ---------- */
.wvh5-navbar.navbar {
    background-color: var(--wvh5-bg, #ffffff);
    color: var(--wvh5-fg, #1f2b3e);
    /* Header ile sayfa icerigi arasinda nefes payi: her ekranda 10px.
       Dis bosluk (margin) kullanilir: ic dolgu --wvh5-py yogunluk ayarina
       bagli oldugu icin oraya eklenirse yogunluk secimiyle birlikte degisirdi.
       Sayfanin ilk blogu tam ekran slider ise .wvh5--flush-bottom ile sifirlanir. */
    margin-bottom: 10px;

    /* Yogunluk (density) degiskenleri: modifier siniflar asagida ezer */
    --wvh5-py: 0.5rem;
    --wvh5-link-py: 1.25rem;
    /* Genis arama cubugunun akiskan tavani: dar masaustunde daralir, genis
       ekranda buyur. Hem grid kolonu hem formun max-width'i bu degeri kullanir
       ki ikisi hicbir genislikte birbirinden ayrilmasin. */
    --wvh5-bar-max: clamp(240px, 36vw, 620px);
    padding-top: var(--wvh5-py);
    padding-bottom: var(--wvh5-py);
    flex-wrap: wrap; /* alt satir menu (below) icin */
    transition: padding 0.25s ease;
}
/* ---------- Tema sizintisi kalkani ----------
   theme_custom.css header'in icine karisir:
     i { color: ... }  button i { color: ... }  button { background: ...; color: ... }
   Bu kurallar her yeni ikon/dugmede tek tek ezilmek zorunda kaliniyordu
   (unutulan biri yanlis renkte kaliyordu). Kalkan bir kez burada kurulur:
   header icindeki tum ikon ve dugmeler rengini kendi kapsayicisindan alir.
   Ozgullugu tek sinif + eleman: asagidaki rol kurallari bunu rahatca ezer. */
.wvh5-navbar i,
.wvh5-navbar button,
.wvh5-navbar button i,
.wvh5-navbar a,
.wvh5-navbar a i {
    color: inherit;
}
.wvh5-navbar button {
    background-color: transparent;
}

.wvh5-navbar .nav-link {
    color: var(--wvh5-fg, #1f2b3e);
}
/* Ikonlar (menu ikonlari, sag ikon grubu, hamburger) tek rolden beslenir */
.wvh5-navbar .navbar-toggler,
.wvh5-navbar .wsv-menu-ic,
.wvh5-header-icons .btn {
    color: var(--wvh5-icon, var(--wvh5-fg, #1f2b3e));
}
/* Menu baglantilarinin kalinligi Renkler bolumunden secilir.
   Deger header_5.css'te (panelden uretilen) --wvh5-nav-weight ile gelir;
   tanimli degilse tarayici varsayilani olan normal (400) kullanilir.
   Ust satir, alt satir ve mobil menu ayni kalinligi paylasir. */
.wvh5-navbar .nav-link {
    font-weight: var(--wvh5-nav-weight, 400);
}
/* ---------- Renk semasi: koyu ----------
   Hazir koyu palet. Uc sinifli secici, header_5.css'teki (panelden uretilen)
   iki sinifli tanimlari AYNI ELEMAN uzerinde ezer; acik semada panel renkleri
   gecerlidir. Panel bir degiskeni baska bir elemanda tanimliyorsa (ornegin
   .wvh5-extra) buradaki tanim ona ulasmaz — o durumda asagidaki gibi ayri ve
   daha guclu bir kural gerekir. */
.wvh5-navbar.navbar.wvh5--scheme-dark {
    --wvh5-bg: #111827;
    --wvh5-fg: #f3f4f6;
    --wvh5-icon: #f3f4f6;
    --wvh5-accent: #f3f4f6;
    --wvh5-accent-fg: #111827;
    --wvh5-border: rgba(255, 255, 255, 0.12);
    --wvh5-row2-bg: #0f172a;
    --wvh5-row2-fg: #e5e7eb;
    --wvh5-panel-bg: #1f2937;
    --wvh5-panel-fg: #f3f4f6;
}
.wvh5-navbar.navbar.wvh5--scheme-dark .wvh5-inline-search-input {
    color: #f3f4f6;
}
.wvh5-navbar.navbar.wvh5--scheme-dark .wvh5-inline-search-input::placeholder {
    color: #6b7280;
}
.wvh5-navbar.navbar.wvh5--scheme-dark .wvh5-inline-search-input:focus {
    background: #111827;
    border-color: #4b5563;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

/* ---------- Buzlu cam efekti ----------
   Nav yari saydamlasir, arkadaki icerik bulanik gorunur (header 3'teki gibi).
   Yapiskan header ile birlikte en iyi sonucu verir. */
.wvh5-navbar.navbar.wvh5--glass {
    background-color: color-mix(in srgb, var(--wvh5-bg, #ffffff) 65%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.wvh5-navbar.navbar.wvh5--glass .wvh5-row2 {
    background: transparent;
}

/* Yogunluk secenekleri
   (secici .wvh5-navbar.navbar ile ayni ozgullukte olmali; tek sinifla yazilirsa
   yukaridaki varsayilan degisken tanimi kazanir ve yogunluk hic uygulanmaz) */
.wvh5-navbar.wvh5--density-compact { --wvh5-py: 0.15rem; --wvh5-link-py: 0.75rem; }
.wvh5-navbar.wvh5--density-normal  { --wvh5-py: 0.5rem;  --wvh5-link-py: 1.25rem; }
.wvh5-navbar.wvh5--density-wide    { --wvh5-py: 1.25rem; --wvh5-link-py: 1.75rem; }

/* Ilk blok tam ekran slider: header'a yapissin diye alt bosluk kalkar.
   Sinifi sayfa controller'i (header_flush_bottom bayragi) ekler. */
.wvh5-navbar.navbar.wvh5--flush-bottom {
    margin-bottom: 0;
}

/* Kenar/golge secenekleri */
.wvh5--edge-line   { border-bottom: 1px solid var(--wvh5-border, #e8e8e8); }
.wvh5--edge-shadow { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }

/* Yapiskanlik secenekleri (shrink de yapiskandir, JS scroll'da kucultur) */
.wvh5--sticky-sticky,
.wvh5--sticky-shrink {
    position: sticky;
    top: 0;
    z-index: 1030;
}
.wvh5--sticky-shrink.wvh5-shrunk {
    --wvh5-py: 0.1rem;
    --wvh5-link-py: 0.65rem;
}
.wvh5--sticky-shrink.wvh5-shrunk .wvh5-logo {
    min-height: 32px;
}

/* ---------- Mobil satir duzeni ----------
   Navbar'in Bootstrap'ten miras flex-wrap'i mobilde ikon grubunu alt satira
   sarabiliyordu. Secici .wvh5-navbar ile guclendirildi: Bootstrap'in
   ".navbar > .container-fluid { flex-wrap: inherit }" kuralini ezmek sart,
   yoksa nowrap uygulanmaz. Satir 1 icerigi asla sarmaz: dar ekranda once
   ikonlar sikisir, sonra logo alani daralir; ikon grubu sabit kalir. */
.wvh5-navbar .wvh5-grid {
    flex-wrap: nowrap;
}
.wvh5-cell-start {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}
.wvh5-cell-end,
.wvh5-header-icons {
    flex-shrink: 0;
}

/* Otomatik sikisma (mobile-first): en dar ekran tabandir, genisledikce buyur.
   320px'de 4 ikon + logo tek satirda kalir; 376px+ ve 481px+ kademeli ferahlar. */
@media (min-width: 376px) {
    .wvh5-header-icons .btn,
    .wvh5-header-icons > a {
        --bs-btn-padding-x: 0.1rem;
        min-width: 40px;
        min-height: 40px;
    }
    .wvh5-header-icons .btn {
        font-size: 1.1rem;
    }
}
@media (min-width: 481px) {
    .wvh5-header-icons .btn,
    .wvh5-header-icons > a {
        --bs-btn-padding-x: 0.15rem;
        min-width: 44px;
        min-height: 44px;
    }
    .wvh5-header-icons .btn {
        font-size: 1.2rem;
    }
}
/* Tablet bandi (iPad dikey/yatay-dar): mobil duzen genis ekranda kaybolmasin,
   ikonlar ve dokunma alanlari bir kademe buyur */
@media (min-width: 768px) and (max-width: 991.98px) {
    .wvh5-header-icons .btn,
    .wvh5-header-icons > a {
        --bs-btn-padding-x: 0.4rem;
        min-width: 48px;
        min-height: 48px;
    }
    .wvh5-header-icons .btn {
        font-size: 1.4rem;
    }
    .wvh5-navbar .navbar-toggler {
        font-size: 1.15rem;
    }
    .wvh5-logo {
        min-height: 46px;
    }
}

/* Ikon grubu ile logo arasinda her kosulda nefes payi kalsin */
.wvh5-header-icons {
    padding-left: 8px;
}

/* ---------- Logo ---------- */
.wvh5-logo {
    min-width: 0;
    max-width: 100%;
}
.wvh5-logo img {
    height: 100%;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}
.wvh5-logo {
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -1px;
    color: var(--wvh5-fg, #000) !important;
    /* Sabit height yerine min-height: dikey/kare logolar tasmadan sigsin */
    min-height: 40px;
    display: flex;
    align-items: center;
    transition: min-height 0.25s ease;
}

.navbar-toggler:focus {
    outline: 0;
    box-shadow: none;
}

/* ---------- Ikon grubu ---------- */
/* Rengi yukaridaki ortak ikon kuralindan gelir (--wvh5-icon) */
.wvh5-header-icons .btn {
    border: none;
    font-size: 1rem;
    position: relative;
}

/* Cizgisel modda sepet icin SVG ikon (FA ucretsiz sette outline bag yok) */
.wvh5-svg-icon {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    vertical-align: -0.15em;
}
/* Taban (en dar ekran): ikon genisligi ekranla orantili suzulur —
   320px'te ~33px, 360px'te ~37px, 375px+ 38px. Sabit kademe yerine
   akiskan kuculme: cok dar cihazlarda logoya alan kalir. */
.wvh5-header-icons .btn,
.wvh5-header-icons > a {
    --bs-btn-padding-x: 0.05rem;
    min-width: clamp(32px, 10.5vw, 38px);
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Hamburger de dar ekranda gereksiz yatay bosluk birakmasin */
.wvh5-navbar .navbar-toggler {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}
/* Hamburger sagda: dugme flex sirasiyla ikon grubunun sagina gecer
   (bassparmak erisimi). Dugme yalniz mobilde gorundugu icin masaustu
   grid duzeni etkilenmez; logo me-auto ile solda kalir. */
.wvh5--toggler-right .navbar-toggler {
    order: 10;
}
/* Ikon etiketleri temel kural: mobil/tablette HER ZAMAN gizli.
   Masaustu (>=992px) blogu, "Metinli" secildiyse gorunur yapar.
   Bu satir olmadan etiketler mobilde basilir ve duzeni kirar. */
.wvh5-icon-label {
    display: none;
}

.wvh5-cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wvh5-accent, #1f2b3e);
    color: var(--wvh5-accent-fg, #ffffff);
}

/* ---------- Ust bar (duyurular) ---------- */
.wvh5-top-bar {
    background-color: var(--wvh5-topbar-bg, #1a2421);
    color: var(--wvh5-topbar-fg, #ffffff);
    font-size: 13px;
}
.wvh5-top-bar a {
    color: var(--wvh5-topbar-fg, #ffffff);
    text-decoration: underline;
}
.wvh5-announcement-item.active,
.wvh5-announcement-item.active a {
    color: inherit;
}
.wvh5-announcement-item.active a {
    color: var(--wvh5-topbar-fg, #ffffff);
}
.wvh5-announcement-wrapper {
    height: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.wvh5-announcement-item {
    display: none;
    width: 100%;
    text-align: center;
}
.wvh5-announcement-item.active {
    display: block;
}

/* ---------- Duyuru gecis animasyonlari ----------
   Duyurular sayfasindan secilir (site_announce_anim). Rotasyon JS'i
   degismez: .active sinifi eklendiginde giren duyuru secili animasyonla
   belirir. Bilinmeyen deger PHP tarafinda fade'e dusurulur. */
.wvh5-ann-anim--fade .wvh5-announcement-item.active { animation: wvh5AnnFade 0.5s ease; }
.wvh5-ann-anim--slide-up .wvh5-announcement-item.active { animation: wvh5AnnSlideUp 0.45s ease; }
.wvh5-ann-anim--slide-left .wvh5-announcement-item.active { animation: wvh5AnnSlideLeft 0.45s ease; }
.wvh5-ann-anim--zoom .wvh5-announcement-item.active { animation: wvh5AnnZoom 0.4s ease; }
.wvh5-ann-anim--flip { perspective: 400px; }
.wvh5-ann-anim--flip .wvh5-announcement-item.active {
    animation: wvh5AnnFlip 0.5s ease;
    transform-origin: center bottom;
}
/* Kayan (marquee): TUM duyurular ayraclarla yan yana tek serit olur ve
   kesintisiz akar. Serit JS'te icerik iki kez basilarak kurulur; %50
   kaydirma ile dongu eksiz devam eder. Sure: --wvh5-ann-dur (hizin 4 kati). */
/* Sarmalayici tam genislik alir: flex ortalamasi yuzunden icerik kadar
   daralip ortada baslamasin, bar bastan sona dolu aksin */
.wvh5-ann-anim--marquee {
    width: 100%;
}
/* Ozgun ogeler kayan modda her kosulda gizli: sunucu ilk ogeye .active
   basar; gizlenmezse seridin yaninda sabit bir kopya gorunur */
.wvh5-ann-anim--marquee .wvh5-announcement-item {
    display: none;
}
.wvh5-ann-track {
    display: flex;
    width: max-content;
    animation: wvh5AnnMarqueeTrack var(--wvh5-ann-dur, 16000ms) linear infinite;
}
/* Fare seridin uzerindeyken akis durur: kullanici linki kacirmadan tiklayabilir */
.wvh5-ann-anim--marquee:hover .wvh5-ann-track {
    animation-play-state: paused;
}
.wvh5-ann-group {
    display: flex;
}
.wvh5-ann-piece {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-weight: 700;
}
.wvh5-ann-piece::after {
    content: "\2022";
    margin: 0 28px;
    opacity: 0.5;
}
@keyframes wvh5AnnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wvh5AnnSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wvh5AnnSlideLeft { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes wvh5AnnZoom { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes wvh5AnnFlip { from { opacity: 0; transform: rotateX(80deg); } to { opacity: 1; transform: none; } }
@keyframes wvh5AnnMarqueeTrack { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Arama katmani (overlay) ---------- */
#wvh5-searchOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 2000;
    background: var(--wvh5-bg, #ffffff);
    border-bottom: 1px solid var(--wvh5-border, #ddd);
    display: none;
}
.wvh5-search-input {
    border: none;
    border-bottom: 1px solid var(--wvh5-border, #000);
    width: 100%;
    padding: 10px;
    /* Mobile-first: mobil tabanda 16px ZORUNLU; masaustu asagidaki kirilimda buyur.
       16px'in altinda bir deger iOS Safari'de odaklanma aninda sayfayi otomatik
       yakinlastirir; sayfa o anda viewport'tan genis kalir ve parmakla her yone
       kaydirilabilir hale gelir (arama ikonu da input'a odak verdigi icin ayni
       davranisi tetikler). Yer tutucu yazi input font boyutunu miras alir. */
    font-size: 16px;
    outline: none;
    background: transparent;
    color: inherit;
}
@media (min-width: 768px) {
    .wvh5-search-input {
        font-size: 1.2rem;
    }
}
.wvh5-search-close {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 1.5rem;
}
.search-logo span img {
    height: 40px;
}

/* Arama sonuc listesi (overlay ve genis bar ortak) */
.wvh5-search-results-dropdown {
    display: none;
    background: var(--wvh5-panel-bg, #fff);
    color: var(--wvh5-panel-fg, #1f2b3e);
    border: 1px solid var(--wvh5-border, #eee);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    max-height: 60vh;
    overflow-y: auto;
}
.wvh5-search-results-dropdown.active {
    display: block;
}
.wvh5-search-results-dropdown .section-title {
    padding: 10px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--wvh5-border, #eee);
}
.wvh5-search-results-dropdown .result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--wvh5-border-soft, #f0f0f0);
}
.wvh5-search-results-dropdown .result-item:last-child {
    border-bottom: none;
}
.wvh5-search-results-dropdown .result-item:hover {
    background: var(--wvh5-hover-bg, #f7f7f7);
}
.wvh5-search-results-dropdown .product-name {
    font-size: 14px;
}
.wvh5-search-results-dropdown .product-price {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wvh5-search-results-dropdown .original-price {
    text-decoration: line-through;
    font-size: 12px;
}
.wvh5-search-results-dropdown .special-price {
    font-weight: 700;
}
.wvh5-search-results-dropdown .no-results {
    padding: 30px 20px;
    text-align: center;
    font-size: 14px;
}

/* ---------- Genis arama cubugu (yalnizca masaustunde gorunur) ---------- */
.wvh5-inline-search {
    position: relative;
    display: none; /* mobilde gizli; masaustu blogu asagida acar */
    width: 100%;
    /* Sabit 560px yerine akiskan tavan: kolon daraldiginda cubuk da daralir */
    max-width: var(--wvh5-bar-max, 560px);
    min-width: 0;
}
.wvh5-inline-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wvh5-muted, #8a94a3);
    font-size: 0.9rem;
    pointer-events: none;
    transition: color 0.2s;
}
.wvh5-inline-search-input {
    border: 1px solid var(--wvh5-border, #d9dee6);
    border-radius: 10px;
    padding: 10px 16px 10px 40px;
    font-size: 0.95rem;
    /* Kutu formun tamamini kaplar; dolgu ve kenarlik genislige dahildir
       (min-width:0 olmadan input'un varsayilan taban genisligi kolonu tasirir) */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--wvh5-panel-bg, #f6f7f9);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* Dokunmatik cihazda (tablet vb.) genis bar da 16px olur: kucuk yazi tipi
   odaklanma aninda otomatik yakinlastirmayi tetikler. Fare kullanilan
   masaustunde 0.95rem korunur. */
@media (pointer: coarse) {
    .wvh5-inline-search-input {
        font-size: 16px;
    }
}
/* Yer tutucu yazi: belirgin koyulukta baslar
   (opacity:1 sart: Firefox placeholder'i varsayilan olarak soluklastirir) */
.wvh5-search-input::placeholder,
.wvh5-inline-search-input::placeholder {
    color: var(--wvh5-muted, #3f4856);
    opacity: 1;
    transition: opacity 0.2s;
}
/* Kutuya odaklaninca yer tutucu soluklasarak yazmaya davet eder */
.wvh5-search-input:focus::placeholder,
.wvh5-inline-search-input:focus::placeholder {
    opacity: 0.35;
}
/* Odakta: zemin beyaza döner, ince vurgu halkası belirir */
.wvh5-inline-search-input:focus {
    outline: none;
    background: var(--wvh5-panel-bg, #fff);
    border-color: var(--wvh5-accent, #a8b8cf);
    box-shadow: 0 0 0 3px rgba(31, 43, 62, 0.08);
}
.wvh5-inline-search:focus-within .wvh5-inline-search-icon {
    color: var(--wvh5-fg, #1f2b3e);
}

/* ---------- Katalog dugmesi ve mega paneli ---------- */
.wvh5-catalog {
    position: relative;
}
.wvh5-catalog-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: var(--wvh5-panel-bg, #f4f6f9);
    color: var(--wvh5-panel-fg, #1f2b3e);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    min-height: 44px;
    white-space: nowrap;
    transition: filter 0.15s;
}
.wvh5-catalog-btn:hover {
    filter: brightness(0.96);
}
/* Uc bolmeli katalog paneli: sol = 1. seviye, orta = alt basliklar, sag = resimli kartlar */
.wvh5-catalog-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    background: var(--wvh5-panel-bg, #fff);
    color: var(--wvh5-panel-fg, #1f2b3e);
    border: 1px solid var(--wvh5-border, #e6e9ef);
    /* Ust koseler duz: panel header'in devami gibi durur */
    border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    width: min(1040px, 92vw);
    height: min(560px, 70vh);
    overflow: hidden;
}
.wvh5-catalog-panel.open {
    display: flex;
}
/* Katalog satir 2'deyken: satirin 8px alt ic boslugu telafi edilir,
   panel header'in alt cizgisine bitisik acilir */
.wvh5-r2-start .wvh5-catalog-panel {
    top: calc(100% + 8px);
}

/* Sol bolme: 1. seviye kategoriler */
.wvh5-cat-l1 {
    flex: 0 0 250px;
    border-right: 1px solid var(--wvh5-border, #eef1f6);
    overflow-y: auto;
    padding: 6px 0;
    background: var(--wvh5-panel-bg, #ffffff);
}
.wvh5-cat-l1-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--wvh5-panel-fg, #1f2b3e);
    text-decoration: none;
    border-bottom: 1px solid var(--wvh5-border-soft, #f4f6f9);
    min-height: 44px;
}
.wvh5-cat-l1-item i {
    font-size: 0.7rem;
    color: var(--wvh5-muted, #94a3b8);
}
.wvh5-cat-l1-item:hover,
.wvh5-cat-l1-item.active {
    background: var(--wvh5-hover-bg, #f4f7fb);
    color: var(--wvh5-accent, #000);
}

/* Detay bolmeleri: yalniz aktif olan gorunur */
.wvh5-cat-detail {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
}
.wvh5-cat-detail.active {
    display: flex;
}

/* Orta bolme: alt baslik listesi */
.wvh5-cat-l2 {
    flex: 0 0 240px;
    border-right: 1px solid var(--wvh5-border, #eef1f6);
    background: var(--wvh5-panel-alt-bg, #f8fafc);
    overflow-y: auto;
    padding: 12px 0;
}
.wvh5-cat-l2 a {
    display: block;
    padding: 9px 20px;
    font-size: 0.88rem;
    color: var(--wvh5-panel-fg, #334155);
    text-decoration: none;
}
.wvh5-cat-l2 a:hover {
    color: var(--wvh5-accent, #000);
    background: var(--wvh5-hover-bg, #eef2f7);
}
/* Alt kirilim satirlari: enter oku (kategori kenar cubuguyla ayni gorsel dil) */
.wvh5-cat-l2-arrow {
    font-size: 10px;
    margin-right: 6px;
    color: var(--wvh5-muted, #94a3b8);
}
/* 3. kirilim satiri: ok zaten alt kategori oldugunu gosterir, girinti verilmez;
   dikey bosluk da ana satirlardan (9px) ayri, sikisik tutulur */
.wvh5-cat-l2 a.wvh5-cat-l2-sub {
    padding: 0 20px;
}

/* Gorseli olan alt baslik yoksa kart alani basilmaz; liste ayni dar
   genislikte kalir, panel ise bos alan olusmasin diye daralir
   (wvh5-catalog-panel--slim sinifini JS aktif detaya gore ekler) */
.wvh5-cat-detail--nocards .wvh5-cat-l2 {
    border-right: none;
}
.wvh5-catalog-panel--slim {
    width: auto;
    min-width: 0;
}

/* Sag bolme: resimli kategori kartlari */
.wvh5-cat-cards {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 24px;
    background: var(--wvh5-panel-bg, #ffffff);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 22px;
    align-content: start;
}
.wvh5-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--wvh5-panel-fg, #1f2b3e);
    text-align: center;
}
.wvh5-cat-card img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}
.wvh5-cat-card span {
    font-size: 0.85rem;
    font-weight: 500;
}
.wvh5-cat-card:hover span {
    text-decoration: underline;
}

.wvh5-cat-empty {
    padding: 30px;
    color: var(--wvh5-muted, #94a3b8);
    font-size: 0.9rem;
}
.wvh5-inline-search .wvh5-search-results-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    border-radius: 10px;
    z-index: 1040;
}

/* ---------- Mobil offcanvas menu ---------- */

/* TEMA SIZINTISI KALKANI (mobil)
   Mobil menu </nav> DISINDA basilir; navbar kokundeki kalkan oraya ulasmaz.
   theme_custom.css'in "button i { color: ... }" kurali .wvh5-dd-link ve
   .wvh5-dd-back BUTON oldugu icin geri okunu ve menu ogesi ikonlarini
   temanin renginde birakiyordu.

   Mobil menu her zaman acik zeminde acildigindan renkler degiskene degil
   sabite baglanir. Kural her iki gorunumu de kapsar: akordeon
   (.wvh5-mobile-nav-link) ve katmanli (.wvh5-dd-link / .wvh5-dd-back). */
/* Renk ROLLERI mobil menude sabitlenir.
   Roller :root'ta tanimli oldugu icin panelden secilen header/panel renkleri
   buraya da siziyordu: acilir liste (--wvh5-panel-bg), secili satir
   (--wvh5-hover-bg) ve kenarliklar tenant renginde cikiyordu. Mobil menu
   her zaman acik zeminde acildigindan bu roller burada sabite baglanir;
   asagidaki kurallarin hicbiri degismek zorunda kalmaz. */
#wvh5-mobileMenu {
    --wvh5-fg: #1f2b3e;
    --wvh5-icon: #1f2b3e;
    --wvh5-panel-bg: #ffffff;
    --wvh5-panel-fg: #1f2b3e;
    --wvh5-panel-alt-bg: #f7f8fa;
    --wvh5-hover-bg: #f0f2f5;
    --wvh5-muted: #9aa0a6;
    --wvh5-border: #e8e8e8;
    --wvh5-border-soft: #f1f1f1;
    --wvh5-accent: #1f2b3e;
    --wvh5-accent-fg: #ffffff;
}

#wvh5-mobileMenu,
#wvh5-mobileMenu a,
#wvh5-mobileMenu button {
    color: #1f2b3e;
}
#wvh5-mobileMenu i,
#wvh5-mobileMenu a i,
#wvh5-mobileMenu button i,
#wvh5-mobileMenu .wsv-menu-ic {
    color: inherit;
}
/* Tek istisna: yon okları ikincil kalir (tiklanabilir alanin kendisi degil,
   yalnizca yon gostergesi). Alt tercih cubugundaki (dil/para birimi) acilir
   liste oku da buna dahildir — o blok da offcanvas'in icinde basilir. */
#wvh5-mobileMenu .wvh5-dd-link .fa-chevron-right,
#wvh5-mobileMenu .wvh5-mobile-nav-link .fa-chevron-right,
#wvh5-mobileMenu .wvh5-mm-dd-btn i {
    color: #9aa0a6;
}

.offcanvas-start {
    width: 85%;
}
#wvh5-mobileMenu .collapsing {
    transition-duration: 0.2s;
}
.wvh5-mobile-nav-link {
    font-size: 1rem;
    text-transform: uppercase;
    padding: 15px 0;
    border-bottom: 1px solid var(--wvh5-border-soft, #f1f1f1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    min-height: 44px;
}
/* Ok isareti saga itilir; ikon + yazi solda yan yana kalir
   (space-between kullanilmaz: ikonlu ogelerde yaziyi ortaya iterdi) */
.wvh5-mobile-nav-link .fa-chevron-right {
    margin-left: auto;
    padding-left: 10px;
}
.wvh5-mobile-sub-menu {
    list-style: none;
    padding-left: 0;
}
.wvh5-mobile-sub-menu li a {
    display: block;
    padding: 10px 0 10px 15px;
    text-decoration: none;
    font-size: 0.95rem;
    min-height: 44px;
    display: flex;
    align-items: center;
}
/* Alt menu satirindaki yon oku saga itilir.
   Markup'ta Bootstrap'in float-end sinifi var ama satir FLEX kutu oldugu
   icin float etkisizdir; ok yazinin hemen yanina yapisik kaliyordu.
   Ust seviyedeki (.wvh5-mobile-nav-link) cozumun aynisi uygulanir. */
.wvh5-mobile-sub-menu li a .fa-chevron-right {
    margin-left: auto;
    padding-left: 10px;
    flex-shrink: 0;
}
/* Katalog grubunun alt ogeleri: ust seviye ogeler gibi cizgiyle bolunmus satirlar
   (yalniz katalog grubuna ozel; diger gruplarin alt menusu degismez) */
.wvh5-mobile-sub-menu--catalog > li > a {
    padding: 14px 0 14px 12px;
    font-size: 1rem;
    border-bottom: 1px solid var(--wvh5-border-soft, #f1f1f1);
    justify-content: flex-start;
}
.wvh5-mobile-sub-menu--catalog > li > a .fa-chevron-right {
    margin-left: auto;
    padding-left: 10px;
}
.offcanvas-header .btn-close {
    opacity: 1;
}
.mobile-menu-logo {
    /* Sabit height yerine min-height: dikey/kare logolar tasmadan sigsin */
    min-height: 30px;
    display: flex;
    align-items: center;
}
.mobile-menu-logo img {
    height: 100%;
    width: auto;
    display: block;
}

/* ---------- Katmanli (drill-down) mobil menu ---------- */
/* Alt kategoriye dokununca panel yana kayar; "Geri" satiri ust panele doner.
   Yalnizca .wvh5-dd kokune sahip offcanvas'i etkiler (akordeon degismez). */
.wvh5-dd.offcanvas-start {
    width: 100%;
    max-width: 420px;
}
.wvh5-dd .offcanvas-body {
    padding: 0;
    overflow: hidden;
}
.wvh5-dd-viewport {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.wvh5-dd-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 16px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bs-offcanvas-bg, #fff);
    transform: translateX(110%);
    transition: transform 0.3s ease;
}
/* Aktif panelin ust zinciri: hafif solda bekler (derinlik hissi) */
.wvh5-dd-panel.is-left {
    transform: translateX(-35%);
}
.wvh5-dd-panel.is-active {
    transform: translateX(0);
    z-index: 2;
}
.wvh5-dd-link {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    min-height: 48px;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid var(--wvh5-border-soft, #f1f1f1);
    background: none;
    color: inherit;
    font-size: 1rem;
    text-align: left;
    text-decoration: none;
}
/* Yalnizca ok isareti kucuk/gri olur ve saga itilir; menu ogesinin kendi
   ikonu (wsv-menu-ic) dogal boyut ve renginde yazinin solunda kalir */
.wvh5-dd-link .fa-chevron-right {
    margin-left: auto;
    padding-left: 10px;
    font-size: 0.75rem;
    color: var(--wvh5-muted, #9aa0a6);
}
/* Kok paneldeki ust seviye ogeler akordeondaki gibi vurgulu */
.wvh5-dd-panel[data-dd-panel="root"] > .wvh5-dd-link {
    text-transform: uppercase;
    font-weight: 600;
}
.wvh5-dd-back {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid var(--wvh5-border, #e8e8e8);
    background: none;
    color: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
}
.wvh5-dd-back .fa-chevron-left {
    font-size: 0.8rem;
}
.wvh5-dd-viewall {
    font-weight: 600;
}

/* ---------- Mobil menu alt tercih cubugu (para birimi + dil) ----------
   Offcanvas govdesinin kardesi olarak basilir: govde kayar, cubuk ekranin
   altinda sabit kalir. Solda para birimi, sagda dil; her ikisi modern
   acilir listedir: tetik buton aktif degeri gosterir, secenek listesi
   yukari dogru acilir. Yalniz birden fazla aktif secenegi olan taraf
   basilir; tek kalan taraf kendi yarisinda durur, genislemez. */
/* ---------- Ek ogeler (telefon, bilgi metni) ---------- */
/* Header satirlarindaki bolgelere eklenen serbest ogeler.
   YALNIZ MASAUSTU: her oge "d-none d-xl-inline-flex" ile basilir, yani
   1200px altinda (mobil ve tablet) hic gorunmez ve mobil menuye de dusmez.
   Kirilim PHP tarafinda WVH5_EXTRA_BREAKPOINT sabitiyle belirlenir; biri
   degisirse digeri de degismeli. */
.wvh5-extra {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 6px;
    color: inherit;
    text-decoration: none;
    line-height: 1.2;
}
.wvh5-extra:hover {
    color: inherit;
    opacity: 0.75;
}
/* Ikon ve iki metin satiri kendi renklerini Renkler bolumundeki "Ek Ogeler"
   grubundan alir. Deger yoksa navbar'in yazi rengi miras alinir. */
.wvh5-extra i {
    flex-shrink: 0;
    line-height: 1;
    color: var(--wvh5-icon, inherit);
}
/* Tek satirli oge (yalniz telefon ya da yalniz yazi): ikon metinle ayni olcude */
.wvh5-extra--single i {
    font-size: 1.05rem;
}
/* Iki satirli oge (telefon + yazi): ikon tek satirdakinden belirgin buyuktur.
   Dikey ortalamayi kok kuraldaki align-items: center yapar. */
.wvh5-extra--stack i {
    font-size: 1.5rem;
}
.wvh5-extra-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}
/* Telefon: ustteki belirgin satir. Numaranin okunurlugu icin rakam
   genislikleri esitlenir (kayan hizalama olmaz). */
.wvh5-extra-phone {
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--wvh5-accent, inherit);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Yazi: telefonla birlikteyken ikincil satir, tek basinayken ana satir */
.wvh5-extra-note {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wvh5-fg, inherit);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Iki satirli ogede vurgu alan tipine degil POZISYONA baglidir: ustteki satir
   birincil, alttaki ikincil. Panelden telefon ile yazi yer degistirildiginde
   (swap) stil de kendiliginden takip eder, ayri bir kural gerekmez. */
.wvh5-extra--stack .wvh5-extra-text > :first-child {
    font-size: 0.9rem;
    font-weight: 600;
}
.wvh5-extra--stack .wvh5-extra-text > :last-child {
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.7;
}
/* Baglantili satirlar hicbir durumda alti cizili olmaz: header'da tel: ve
   URL baglantilari duz metin gibi durmali. Fare geri bildirimi kok kuraldaki
   opacity ile verilir (.wvh5-extra:hover). Renk de korunur.
   Bootstrap 5 <a> ogelerini varsayilan olarak alti cizili yaptigi icin
   hover durumu da acikca sifirlanir. */
a.wvh5-extra-phone,
a.wvh5-extra-phone:hover,
a.wvh5-extra-phone:focus {
    color: var(--wvh5-accent, inherit);
    text-decoration: none;
}
a.wvh5-extra-note,
a.wvh5-extra-note:hover,
a.wvh5-extra-note:focus {
    color: var(--wvh5-fg, inherit);
    text-decoration: none;
}

.wvh5-mm-prefs {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--wvh5-border, #e8e8e8);
    background: var(--bs-offcanvas-bg, #fff);
}
.wvh5-mm-dd {
    position: relative;
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
    min-width: 0;
}
/* Dil sagda durur; para birimi yoksa bile sag yarida kalir */
.wvh5-mm-dd--lang {
    margin-left: auto;
}
.wvh5-mm-dd-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--wvh5-border, #e0e0e0);
    border-radius: 10px;
    background: var(--wvh5-panel-alt-bg, #f7f8fa);
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.wvh5-mm-dd-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wvh5-mm-dd-btn i {
    font-size: 0.7rem;
    color: var(--wvh5-muted, #9aa0a6);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.wvh5-mm-dd.open .wvh5-mm-dd-btn i {
    transform: rotate(180deg);
}
.wvh5-mm-dd-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
/* Secenek listesi: tetigin ustune acilir, yumusak golgeli kart */
.wvh5-mm-dd-list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    display: none;
    padding: 6px;
    background: var(--wvh5-panel-bg, #fff);
    border: 1px solid var(--wvh5-border, #ececec);
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18);
    max-height: 45vh;
    overflow-y: auto;
    z-index: 5;
}
.wvh5-mm-dd.open .wvh5-mm-dd-list {
    display: block;
}
.wvh5-mm-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}
.wvh5-mm-opt:hover {
    background: var(--wvh5-hover-bg, #f5f6f8);
}
/* Aktif secenek: hafif dolgu + onay isareti */
.wvh5-mm-opt.is-active {
    background: var(--wvh5-hover-bg, #f0f2f5);
    font-weight: 700;
}
.wvh5-mm-opt.is-active::after {
    content: "\2713";
    font-size: 0.85rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .wvh5-search-results-dropdown .result-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .wvh5-search-results-dropdown .product-price {
        font-size: 13px;
    }
    .search-logo span img {
        height: 30px;
    }
}

/* ============================================================
   MASAUSTU YERLESIMI (>= 992px)
   Parametreler grid hucrelerine soyle dagilir:
   - logo solda:  [logo][orta hucre][sag hucre]
   - logo ortada: [orta hucre][logo][sag hucre]  (DOM sirasi da boyle)
   ============================================================ */
@media (min-width: 992px) {

    .wvh5-grid {
        display: grid !important;
        align-items: center;
        width: 100%;
    }
    /* Logo solda: YAN KOLONLAR HER ZAMAN ESIT ESNER.
       Orta hucreye ne konursa konsun (menu, arama cubugu, ek oge) logo ile
       ikonlarin arasindaki bosluga gore degil VIEWPORT'a gore ortalanir.
       Yan kolonlarin tabani 0'dir: esitligi bozacak hicbir taban yok, yani
       ortalama her ekran genisliginde korunur. */
    .wvh5--logo-left .wvh5-grid {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
    /* Genis arama cubugu satir 1 ortasinda: yan kolonlar yine esit; farkli olan
       tek sey orta kolonun cubuk icin esneyebilen akiskan tavanidir.
       Tavan sabit degil (bkz. --wvh5-bar-max): dar ekranda kuculdugu icin yan
       kolonlara logo ve ikonlara yetecek alan kalir, ortalama da bozulmaz. */
    .wvh5--logo-left.wvh5--bar-r1 .wvh5-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--wvh5-bar-max, 560px)) minmax(0, 1fr);
        /* Cubuk logoya ve ikonlara yapismasin; bosluk da ekranla akar */
        column-gap: clamp(12px, 2vw, 28px);
    }
    /* Logo ortada: iki yan hucre esit esner, logo tam ortada kalir */
    .wvh5--logo-center .wvh5-grid {
        grid-template-columns: 1fr auto 1fr;
    }

    /* Orta hucre: icerigi HER ZAMAN ortalanir (menu, arama cubugu, ek oge farketmez).
       Kolonlar esit oldugu icin bu ortalama viewport'a goredir. */
    .wvh5-cell-mid {
        min-width: 0;
        align-items: center;
        justify-content: center;
    }
    /* Tek istisna — split sol yarim: ortalanmaz, logoya yaslanir */
    .wvh5--menu-r1-split .wvh5-cell-mid {
        justify-content: flex-end;
        padding-right: 30px;
    }
    .wvh5--search-bar .wvh5-inline-search {
        display: block;
    }

    /* Baslangic hucresi: logo + katalog dugmesi arasi bosluk */
    .wvh5-cell-start {
        gap: 14px;
        min-width: 0;
    }

    .wvh5-cell-end {
        justify-content: flex-end;
        margin: 0;
        min-width: 0;
    }
    /* Sag menu ikonlardan once, ikonlar sag kenarda */
    .wvh5-end-menu {
        margin-right: auto;
        min-width: 0;
    }
    /* Split sag yarim logonun hemen saginda durur */
    .wvh5--menu-r1-split .wvh5-end-menu {
        padding-left: 30px;
    }
    /* Sag menu: ikon grubuyla arasinda bosluk */
    .wvh5--menu-r1-right .wvh5-end-menu {
        margin-right: 12px;
    }

    .wvh5-logo {
        justify-self: center;
        margin: 0;
    }

    /* ---------- Satir 2 (alt satir): sol / orta / sag bolgeler ---------- */
    /* Iki satirli duzende nav'in alt ic boslugu kaldirilir; yerine satir 2
       kendi esit dikey boslugunu tasir. Boylece icerik ust cizgi (border-top)
       ile alt cizgi arasinda tam ortalanir. */
    .wvh5--rows2.navbar {
        padding-bottom: 0;
    }
    .wvh5-row2 {
        width: 100%;
        border-top: 1px solid var(--wvh5-border, #ececec);
        margin-top: var(--wvh5-py);
        background: var(--wvh5-row2-bg, transparent);
        color: var(--wvh5-row2-fg, inherit);
    }
    /* Alt satir: satir 1'deki kuralla ayni gerekce — yan kolonlar HER ZAMAN
       esit esner, orta bolgeye ne konursa konsun viewport'a gore ortalanir */
    .wvh5-row2-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 16px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    /* Genis arama cubugu alt satir ortasinda: yan kolonlar yine esit,
       orta kolonun tavani cubugun akiskan max genisligidir */
    .wvh5--bar-r2 .wvh5-row2-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--wvh5-bar-max, 560px)) minmax(0, 1fr);
    }
    .wvh5-r2-start {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }
    .wvh5-r2-mid {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
    }
    .wvh5-r2-end {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }
    .wvh5-row2-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .wvh5--menu-r2-center .wvh5-row2-nav {
        justify-content: center;
    }
    .wvh5-row2 .nav-link {
        color: var(--wvh5-row2-fg, var(--wvh5-fg, #1f2b3e));
    }
    /* Ikon grubu alt satira alindiginda da KENDI renk ayarini kullanir.
       Bu secici (3 sinif) yukaridaki .wvh5-header-icons .btn kuralindan (2 sinif)
       guclu oldugu icin zincir burada da bastan kurulmali; yoksa "Alt Satir Yazi
       Rengi" ikon rengi ayarini ezer. Ikon ayari yoksa alt satir rengine duser. */
    .wvh5-row2 .wvh5-header-icons .btn {
        color: var(--wvh5-icon, var(--wvh5-row2-fg, var(--wvh5-fg, #1f2b3e)));
    }

    /* Masaustu ikon araliklari ferah */
    .wvh5-header-icons .btn,
    .wvh5-header-icons > a {
        --bs-btn-padding-x: 0.75rem;
    }

    /* ---------- Menu linkleri ve acilir menuler ----------
       Yatay olculer akiskan (clamp): 992px'te sikisik, genisledikce buyur.
       Sabit kademeler dar masaustunde (iPad Pro, kucuk laptop) tasma yapiyordu. */
    .wvh5-navbar .nav-link {
        font-size: clamp(0.74rem, 0.35rem + 0.55vw, 0.85rem);
        text-transform: uppercase;
        padding: var(--wvh5-link-py, 1.25rem) clamp(0.3rem, -1.1rem + 2.1vw, 1rem) !important;
        white-space: nowrap;
        transition: padding 0.25s ease;
    }
    /* Konteyner kenar bosluklari da akiskan: px-lg-5'in sabit 3rem'i dar
       masaustunde cok yer yiyordu */
    .wvh5-navbar .px-lg-5 {
        padding-left: clamp(1.25rem, -3rem + 6vw, 3rem) !important;
        padding-right: clamp(1.25rem, -3rem + 6vw, 3rem) !important;
    }
    .wvh5-catalog-btn {
        font-size: clamp(0.82rem, 0.4rem + 0.6vw, 1rem);
        padding: clamp(7px, 1vw, 10px) clamp(9px, 1.4vw, 14px);
    }
    /* Alt satirdaki menu linkleri daha az dikey bosluk kullanir */
    .wvh5-row2 .nav-link {
        padding: 0.75rem 1rem !important;
    }

    /* ---------- Ikon etiketleri (yalniz masaustu) ---------- */
    .wvh5--iconlabels-text .wvh5-header-icons .btn {
        gap: 8px;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
    .wvh5--iconlabels-text .wvh5-icon-label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.15;
        text-align: left;
    }
    .wvh5-icon-label strong {
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
    }
    .wvh5-icon-label small {
        font-size: 0.68rem;
        opacity: 0.65;
        white-space: nowrap;
    }
    /* Metinli modda adet zaten "N urun" olarak yazildigi icin rozet gereksiz
       (mobilde etiketler gizli oldugundan rozet orada gorunmeye devam eder) */
    .wvh5--iconlabels-text .wvh5-cart-badge {
        display: none;
    }

    .wvh5-navbar .nav-item {
        position: static;
    }
    .wvh5-navbar .nav-item:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
    .wvh5-navbar .dropdown-menu {
        width: 100%;
        left: 0;
        right: 0;
        border: none;
        border-top: 1px solid var(--wvh5-border, #eee);
        border-bottom: 1px solid var(--wvh5-border, #eee);
        border-radius: 0;
        padding: 30px 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        margin-top: 0;
    }

    .wvh5-mega-menu-title {
        margin-bottom: 15px;
        display: block;
        font-size: 0.9rem;
    }
    .wvh5-mega-menu-list {
        list-style: none;
        padding: 0;
    }
    .wvh5-mega-menu-list li a {
        text-decoration: none;
        font-size: 0.9rem;
        display: block;
        padding: 5px 0;
        transition: color 0.2s;
    }
    .wvh5-mega-menu-list li a:hover {
        text-decoration: underline;
    }

    .wvh5-navbar .wvh5-dropdown-classic {
        position: relative;
    }
    .wvh5-navbar .wvh5-submenu {
        width: 220px;
        left: 0;
        right: auto;
        border: 1px solid var(--wvh5-border, #eee);
        border-radius: 6px;
        padding: 8px 0;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
    .wvh5-navbar .wvh5-submenu .dropdown-item {
        font-size: 0.85rem;
        padding: 8px 16px;
        transition: background-color 0.15s, color 0.15s;
    }
    .wvh5-submenu-parent {
        position: relative;
    }
    .wvh5-submenu-parent:hover > .wvh5-submenu-child {
        display: block;
    }
    .wvh5-submenu-child {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 200px;
        background: var(--wvh5-panel-bg, #fff);
        border: 1px solid var(--wvh5-border, #eee);
        border-radius: 6px;
        padding: 8px 0;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        list-style: none;
        margin: 0;
    }
    .wvh5-submenu-child .dropdown-item {
        font-size: 0.85rem;
        padding: 8px 18px;
        color: var(--wvh5-panel-fg, #333);
    }
    .wvh5-submenu-child .dropdown-item:hover {
        background-color: var(--wvh5-hover-bg, #f5f5f5);
        color: var(--wvh5-accent, #000);
    }
}

/* ============================================================
   DAR MASAUSTU BANDI (992-1199px; iPad Pro yatay, kucuk laptop)
   Akiskan clamp kurallari yukarida; burada yalnizca bosluk incelikleri kalir.
   ============================================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .wvh5-header-icons .btn,
    .wvh5-header-icons > a {
        --bs-btn-padding-x: 0.3rem;
    }
    /* Split ve sag menu bosluklari da daralir */
    .wvh5--menu-r1-split .wvh5-cell-mid {
        padding-right: 14px;
    }
    .wvh5--menu-r1-split .wvh5-end-menu {
        padding-left: 14px;
    }
    .wvh5--menu-r1-right .wvh5-end-menu {
        margin-right: 6px;
    }
    .wvh5-row2-grid {
        gap: 10px;
    }
}

/* === assets/frontend/css/header/header_5.css === */
/* --- HEADER GENEL --- */
:root {
    --wvh5-bg: #ffffff;
    --wvh5-fg: #1f2b3e;
    --wvh5-icon: #1f2b3e;
    --wvh5-accent: #1f2b3e;
    --wvh5-accent-fg: #ffffff;
    --wvh5-border: #e8e8e8;
    --wvh5-nav-weight: 600;
}
:root {
    --wvh5-row2-bg: #ffffff;
    --wvh5-row2-fg: #000000;
}
:root {
    --wvh5-panel-bg: #ffffff;
    --wvh5-panel-fg: #000000;
}
:root {
    --wvh5-topbar-bg: #1a2421;
    --wvh5-topbar-fg: #ffffff;
}

/* === assets/frontend/css/footer/footer_3_base.css === */
/* ============================================================
   footer_3 — Görsel/Builder footer temel stilleri
   Dinamik değerler (renk, sütun) footer_3.php'de CSS değişkeniyle gelir.
   ============================================================ */

.ft3 { display: block; width: 100%; }
.ft3 * { box-sizing: border-box; }

.ft3-body {
    color: var(--ft3-fg, #fff);
    padding: 28px 20px 20px;
    background-size: cover;
    background-position: center;
}
/* Üst kenar şekli maske ile gövdeye işlendiği için içeriği dalganın altına it */
.ft3-body.has-edge { padding-top: 60px; }

.ft3-grid {
    display: grid;
    grid-template-columns: repeat(var(--ft3-cols, 3), 1fr);
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
}
/* Responsive: mobil tek, tablet iki sütun */
@media (max-width: 600px) { .ft3-grid { grid-template-columns: 1fr; } }
@media (min-width: 601px) and (max-width: 900px) { .ft3-grid { grid-template-columns: repeat(2, 1fr); } }

.ft3-col { min-width: 0; }
.ft3 .blk { margin-bottom: 18px; }
.ft3 .blk:last-child { margin-bottom: 0; }

/* Baslik hiyerarsisi (a11y) icin blok basliklari h4 -> h2 tasindi; gorunum ayni */
.ft3 h2 { font-size: 15px; margin: 0 0 10px; font-weight: 700; color: var(--ft3-heading, inherit); }
.ft3 a { color: inherit; }

/* Logo */
.ft3 .blk-logo img { max-width: 170px; max-height: 64px; display: block; }
.ft3 .blk-logo .logo-text { font-size: 22px; font-weight: 800; letter-spacing: .5px; }

/* Menü / linkler */
.ft3 .blk-menu a { display: block; text-decoration: none; font-size: 14px; margin-bottom: 7px; color: var(--ft3-link, inherit); }
.ft3 .blk-menu a:hover { text-decoration: underline; }

/* Metin */
.ft3 .blk-text p { font-size: 14px; margin: 0; }

/* Sosyal */
.ft3 .blk-social .icons { display: flex; gap: 10px; flex-wrap: wrap; }
/* Sosyal ikonlar: içi beyaz, currentColor kenarlık, siyah icon → her arka planda görünür */
.ft3 .blk-social .icons a {
    width: 38px; height: 38px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    background: #fff; border: 1px solid currentColor; color: #000;
    font-size: 16px; text-decoration: none;
}
.ft3 .blk-social .icons a:hover { opacity: .75; }

/* Bülten */
.ft3 .blk-news .nl-desc { font-size: 13px; margin: 0 0 10px; }
/* Bülten: input + buton tek birim (buton içeride). Beyaz input, siyah metin/icon;
   currentColor kenarlık → arka plan rengi ne olursa olsun bölüm kaybolmaz. */
.ft3 .blk-news .nl-form { display: flex; align-items: stretch; background: #fff; border: 1px solid currentColor; border-radius: 8px; overflow: hidden; max-width: 340px; }
.ft3 .blk-news .nl-form input { flex: 1; min-width: 0; border: none; background: transparent; padding: 10px 12px; font-size: 14px; color: #000; }
.ft3 .blk-news .nl-form input::placeholder { color: #000; opacity: 1; }
.ft3 .blk-news .nl-form input:focus { outline: none; }
.ft3 .blk-news .nl-form button { border: none; background: transparent; color: #000; padding: 0 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ft3 .blk-news .nl-form button:hover { opacity: .7; }

/* İletişim */
.ft3 .blk-contact p { font-size: 14px; margin: 0 0 6px; display: flex; gap: 8px; }

/* Çalışma saatleri */
.ft3 .blk-hours p { font-size: 14px; margin: 0 0 5px; display: flex; justify-content: space-between; gap: 14px; }
.ft3 .blk-hours p b { font-weight: 600; }

/* Ödeme */
.ft3 .blk-pay .pay-icons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ft3 .blk-pay .pay-svg { background: #fff; border-radius: 6px; padding: 4px 6px; }

/* Alt bilgi */
.ft3-bottom {
    max-width: 1100px; margin: 22px auto 0; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.18);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
    font-size: 13px; text-align: center;
}
.ft3-bottom .ft3-switch select {
    padding: 4px 8px; border: 1px solid currentColor; border-radius: 4px;
    font-size: 12px; cursor: pointer; background: #fff; color: #000;
}
/* Açılır menüdeki seçenekler her zaman okunur (beyaz zemin/siyah metin) */
.ft3-bottom .ft3-switch select option { background: #fff; color: #000; }

/* Wesiva marka imzası (alt barın içinde, sabit) — mobilde ortalı alt satır */
.ft3-brand {
    width: 100%; min-height: 44px; padding: 4px 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    text-align: center; opacity: .7;
    color: inherit; text-decoration: none;
}
.ft3-brand:hover { opacity: 1; color: inherit; text-decoration: none; }
.ft3-brand-name { font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.ft3-brand-sep { font-weight: 400; opacity: .6; }

/* Masaüstü: telif solda, marka imzası sağda */
@media (min-width: 768px) {
    .ft3-bottom { justify-content: flex-start; text-align: left; }
    .ft3-brand { width: auto; margin-left: auto; align-items: flex-end; text-align: right; }
}

/* === assets/frontend/css/footer/footer_3.css === */
/* --- FOOTER GENEL --- */