/* === 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, var(--wv-gray-50, #f5f6f8));
    text-decoration: none;
    color: var(--wv-white, #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: var(--wv-white, #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: var(--wv-primary, #1f2b3e);
    color: var(--wv-primary-fg, #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: var(--wv-accent, #e53935);
    color: var(--wv-accent-fg, #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) {
    /* Sütun sayısı panelden gelir (--ftr-v8-sutun, 3-5); ayar yoksa 4 */
    .ftr-v8-grid { grid-template-columns: repeat(var(--ftr-v8-sutun, 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; }
}

/* Fiyat yanındaki "+ KDV" ibaresi: fiyattan küçük ve soluk, fiyatla birlikte ölçeklenir */
.ftr-tax-suffix {
    font-size: 0.72em;
    font-weight: 500;
    color: var(--wv-gray-500, #666);
    white-space: nowrap;
}

/* === 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 var(--wv-gray-200, #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, var(--wv-gray-50, #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: var(--wv-gray-900, #1f2b3e);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ftr-v12-variant { font-size: 11px; color: var(--wv-gray-500, #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: var(--wv-primary, #1f2b3e);
    color: var(--wv-primary-fg, #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: var(--wv-gray-900, #1f2b3e);
}
.ftr-v12-star { color: #f5a623; font-size: 11px; }
.ftr-v12-rating-count { color: var(--wv-gray-500, #94a3b8); }
/* Kampanya satırı */
.ftr-v12-campaign {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--wv-accent-hover, #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 var(--wv-gray-300, #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: var(--wv-gray-900, #1f2b3e);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ftr-v12-old {
    font-size: 12px;
    color: var(--wv-gray-500, #9aa3b0);
    white-space: nowrap;
}
/* İndirim yüzdesi: fiyatın solunda kırmızı vurgu */
.ftr-v12-discount {
    font-size: 10px;
    font-weight: 700;
    color: var(--wv-accent, #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 {
    /* Yogunluk: zemin opakligi ve bulanıklık nav'in style ozniteliginden gelir
       (glass_level parametresi, header_5.php); eksikse eski sabit degerler */
    background-color: color-mix(in srgb, var(--wvh5-bg, #ffffff) var(--wvh5-glass-op, 65%), transparent);
    -webkit-backdrop-filter: blur(var(--wvh5-glass-blur, 12px));
    backdrop-filter: blur(var(--wvh5-glass-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); }

/* ---------- Gorsel uzerine bindirme (overlay parametresi) ----------
   Nav, altindaki icerigin (tam ekran slider / hero gorseli) UZERINE saydam
   biner: alt bosluk nav yuksekligi kadar negatif olur, zemin/kenar/golge
   kalkar. Yukseklik (--wvh5-overlay-h) nav'dan sonraki satir ici script ile
   ilk boyamadan once olculur; header_5.js pencere degisiminde gunceller.
   Sayfa kaydirilinca (yapiskan modda) .wvh5-overlay-solid eklenir ve nav
   normal zeminine/kenarina doner; en uste donunce yeniden saydamlasir.
   Secici 3 sinif: glass/edge/scheme kurallarini ayni elemanda ezer. */
.wvh5-navbar.navbar.wvh5--overlay {
    margin-bottom: calc(-1 * var(--wvh5-overlay-h, 0px));
    transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.wvh5-navbar.navbar.wvh5--overlay:not(.wvh5-overlay-solid) {
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* Bindirme aninda satir 2 de saydam; ayirici cizgi gorsele gore yari saydam */
.wvh5-navbar.navbar.wvh5--overlay:not(.wvh5-overlay-solid) .wvh5-row2 {
    background: transparent;
    border-top-color: var(--wvh5-border-soft, rgba(0, 0, 0, 0.12));
}
/* Karsit logo: bindirme saydamken karsit (genelde beyaz) logo gorunur,
   kaydirinca (solid) normal logoya donulur. Sarici span'lar display:contents
   ile boyut zincirini bozmaz; markup yalniz karsit logo yukluyken basilir. */
.wvh5-logo-main {
    display: contents;
}
.wvh5-logo-contrast {
    display: none;
}
.wvh5-navbar.navbar.wvh5--overlay:not(.wvh5-overlay-solid) .wvh5-logo-main {
    display: none;
}
.wvh5-navbar.navbar.wvh5--overlay:not(.wvh5-overlay-solid) .wvh5-logo-contrast {
    display: contents;
}
/* Bindirme anindaki yazi/ikon tonu. Ton siniflari yalniz iki degisken tanimlar:
     --wvh5-ov-fg : bindirme rengi (yazi, ikon, cizgi, dugme zemini)
     --wvh5-ov-bg : onun karsit rengi (dugme ici yazi, sepet rozeti sayisi)
   light = beyaz/koyu, dark = koyu/beyaz, custom = panelden secilen renk
   (degerler nav'in style ozniteliginden gelir, karsit rengi PHP hesaplar).
   inherit tonunda .wvh5--overlay-tinted sinifi basilmaz: palet aynen kalir.
   Kaydirinca (solid) tum kurallar devre disi kalir, palet geri gelir. */
.wvh5-navbar.navbar.wvh5--overlay-text-light {
    --wvh5-ov-fg: #ffffff;
    --wvh5-ov-bg: #111827;
}
.wvh5-navbar.navbar.wvh5--overlay-text-dark {
    --wvh5-ov-fg: #111827;
    --wvh5-ov-bg: #ffffff;
}
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) {
    --wvh5-fg: var(--wvh5-ov-fg);
    --wvh5-icon: var(--wvh5-ov-fg);
    --wvh5-row2-fg: var(--wvh5-ov-fg);
    --wvh5-border-soft: color-mix(in srgb, var(--wvh5-ov-fg) 35%, transparent);
    color: var(--wvh5-ov-fg);
}
/* Katalog paneli bindirmeden HARIC: panel kendi dolu zeminiyle (panel-bg) acildigi
   icin ton rengi (ov-fg, genelde beyaz) icindeki ikon/yazilari gorunmez yapiyordu.
   Panelde renk zinciri ve turetilmis tonlar normal degerlerine geri kurulur. */
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-catalog-panel {
    color: var(--wvh5-panel-fg, #1f2b3e);
    --wvh5-border-soft: color-mix(in srgb, var(--wvh5-border, #e8e8e8) 55%, transparent);
}
/* Menu ogesi ikonlari (wsv-menu-ic) renk zincirinden degil --wvh5-icon
   degiskeninden beslenir; degisken ton renginde kaldigi icin ayrica ezilir */
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-catalog-panel .wsv-menu-ic {
    color: var(--wvh5-panel-fg, #1f2b3e);
}
/* Sepet rozeti gorselde kaybolmasin: ton rengi zemin, karsit renk sayi */
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-cart-badge {
    background: var(--wvh5-ov-fg);
    color: var(--wvh5-ov-bg);
}
/* Ek ogeler (telefon / yazi): kendi renklerini vurgu ve yazi degiskeninden
   alir, ton degiskenleri onlara ulasmaz — bindirme aninda acikca ezilir */
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-extra,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-extra i,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-extra-phone,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) a.wvh5-extra-phone,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) a.wvh5-extra-phone:hover,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-extra-note,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) a.wvh5-extra-note,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) a.wvh5-extra-note:hover {
    color: var(--wvh5-ov-fg);
}

/* --- Bindirme aninda genis arama cubugu ---
   Cubuk kendi degiskenlerini (panel-bg, muted, border) kullanir; ton
   degiskenleri ona ulasmaz. Bu yuzden bindirme aninda zemin ton renginden
   yari saydam cam, yazi/ikon/yer tutucu ton rengi olur. Tum bar tasarimlari
   (soft, underline, pill, sharp, filled) icin ortak; 5+ sinifli secici
   tasarim kurallarini ezer. Kaydirinca tasarimin kendi renkleri geri gelir. */
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-inline-search-input {
    background: color-mix(in srgb, var(--wvh5-ov-fg) 14%, transparent);
    border-color: color-mix(in srgb, var(--wvh5-ov-fg) 45%, transparent);
    color: var(--wvh5-ov-fg);
    box-shadow: none;
}
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-inline-search-input::placeholder {
    color: color-mix(in srgb, var(--wvh5-ov-fg) 80%, transparent);
}
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-inline-search-input:focus {
    background: color-mix(in srgb, var(--wvh5-ov-fg) 22%, transparent);
    border-color: var(--wvh5-ov-fg);
}
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-inline-search-icon,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-inline-search:focus-within .wvh5-inline-search-icon {
    color: var(--wvh5-ov-fg);
}
/* Alt cizgi tasarimi (genis bar VE kisa bar): zemin yok, cizgi ve odak cizgisi ton renginde */
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted.wvh5--bar-underline:not(.wvh5-overlay-solid) .wvh5-inline-search-input,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted.wvh5--bar-underline:not(.wvh5-overlay-solid) .wvh5-inline-search-input:focus,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted.wvh5--short-underline:not(.wvh5-overlay-solid) .wvh5-inline-search-input,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted.wvh5--short-underline:not(.wvh5-overlay-solid) .wvh5-inline-search-input:focus {
    background: transparent;
    border-color: color-mix(in srgb, var(--wvh5-ov-fg) 70%, transparent);
}
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted.wvh5--bar-underline:not(.wvh5-overlay-solid) .wvh5-inline-search::after,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted.wvh5--short-underline:not(.wvh5-overlay-solid) .wvh5-inline-search::after {
    background: var(--wvh5-ov-fg);
}
/* Acilir mercek: kapali halde zemin/kenarlik ton kurallarina ragmen saydam kalir */
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted.wvh5--short-expand:not(.wvh5-overlay-solid) .wvh5-inline-search--short:not(:hover):not(:focus-within) .wvh5-inline-search-input {
    background: transparent;
    border-color: transparent;
    color: transparent;
}
/* Dugmeli tasarimlar (pill, sharp): ton renginde dugme, karsit renkte ikon/yazi */
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-inline-search-btn,
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted:not(.wvh5-overlay-solid) .wvh5-inline-search:focus-within .wvh5-inline-search-btn {
    background: var(--wvh5-ov-fg);
    color: var(--wvh5-ov-bg);
}
.wvh5-navbar.navbar.wvh5--overlay.wvh5--overlay-tinted.wvh5--bar-sharp:not(.wvh5-overlay-solid) .wvh5-inline-search-input {
    border-color: var(--wvh5-ov-fg);
}

/* 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);
}

/* ---------- Genis bar tasarimlari (bar_design parametresi) ----------
   Varsayilan "soft" = yukaridaki yumusak kutu; asagidakiler onu ezer.
   Secici .wvh5-navbar.navbar.wvh5--bar-X: koyu sema kurallariyla ayni
   ozgulluk, dosyada sonra geldigi icin tasarim kazanir. */

/* Gomulu arama dugmesi: varsayilan gizli, pill ve sharp tasarimlari acar */
.wvh5-navbar .wvh5-inline-search-btn {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    background: var(--wvh5-accent, #1f2b3e);
    color: var(--wvh5-accent-fg, #fff);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.2s, background 0.2s;
}
.wvh5-navbar .wvh5-inline-search-btn:hover {
    filter: brightness(1.12);
}
.wvh5-navbar .wvh5-inline-search-btn:focus-visible {
    outline: 2px solid var(--wvh5-accent, #1f2b3e);
    outline-offset: 2px;
}

/* --- underline: sol mercek + tek alt cizgi, zemin yok --- */
.wvh5-navbar.navbar.wvh5--bar-underline .wvh5-inline-search-input {
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--wvh5-muted, #8a94a3);
    border-radius: 0;
    padding: 10px 8px 10px 30px;
    box-shadow: none;
    color: var(--wvh5-fg, #1f2b3e);
}
.wvh5-navbar.navbar.wvh5--bar-underline .wvh5-inline-search-icon {
    left: 2px;
    font-size: 1rem;
}
.wvh5-navbar.navbar.wvh5--bar-underline .wvh5-inline-search-input:focus {
    background: transparent;
    border-bottom-color: var(--wvh5-accent, #1f2b3e);
    border-bottom-width: 2px;
    box-shadow: none;
}
.wvh5-navbar.navbar.wvh5--bar-underline .wvh5-inline-search-input::placeholder {
    color: var(--wvh5-muted, #6b7280);
}
/* Odakta: alt cizgi ortadan disa dogru vurgu rengiyle cizilir */
.wvh5-navbar.navbar.wvh5--bar-underline .wvh5-inline-search::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 2px;
    background: var(--wvh5-accent, #1f2b3e);
    transition: left 0.25s ease, right 0.25s ease;
    pointer-events: none;
}
.wvh5-navbar.navbar.wvh5--bar-underline .wvh5-inline-search:focus-within::after {
    left: 0;
    right: 0;
}
.wvh5-navbar.navbar.wvh5--bar-underline .wvh5-inline-search .wvh5-search-results-dropdown {
    top: calc(100% + 10px);
}

/* --- pill: tam yuvarlak hap + sagda dolgulu arama dugmesi --- */
.wvh5-navbar.navbar.wvh5--bar-pill .wvh5-inline-search-input {
    border-radius: 999px;
    padding: 11px 112px 11px 22px;
    border: 1.5px solid var(--wvh5-border, #d9dee6);
    background: var(--wvh5-bg, #fff);
}
.wvh5-navbar.navbar.wvh5--bar-pill .wvh5-inline-search-icon {
    display: none;
}
.wvh5-navbar.navbar.wvh5--bar-pill .wvh5-inline-search-btn {
    display: inline-flex;
}
.wvh5-navbar.navbar.wvh5--bar-pill .wvh5-inline-search-input:focus {
    border-color: var(--wvh5-accent, #1f2b3e);
    box-shadow: 0 0 0 4px rgba(31, 43, 62, 0.08);
}
.wvh5-navbar.navbar.wvh5--bar-pill .wvh5-inline-search .wvh5-search-results-dropdown {
    border-radius: 18px;
}

/* --- sharp: keskin kenar, belirgin kenarlik, sagda kare mercek dugmesi --- */
.wvh5-navbar.navbar.wvh5--bar-sharp .wvh5-inline-search-input {
    border-radius: 0;
    border: 2px solid var(--wvh5-fg, #1f2b3e);
    background: transparent;
    padding: 9px 58px 9px 14px;
    color: var(--wvh5-fg, #1f2b3e);
}
.wvh5-navbar.navbar.wvh5--bar-sharp .wvh5-inline-search-icon {
    display: none;
}
.wvh5-navbar.navbar.wvh5--bar-sharp .wvh5-inline-search-btn {
    display: inline-flex;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    padding: 0;
    border-radius: 0;
    background: var(--wvh5-fg, #1f2b3e);
    color: var(--wvh5-bg, #fff);
    font-size: 0.95rem;
}
.wvh5-navbar.navbar.wvh5--bar-sharp .wvh5-inline-search-btn-txt {
    display: none;
}
.wvh5-navbar.navbar.wvh5--bar-sharp .wvh5-inline-search-input:focus {
    background: transparent;
    border-color: var(--wvh5-accent, #1f2b3e);
    box-shadow: none;
}
.wvh5-navbar.navbar.wvh5--bar-sharp .wvh5-inline-search:focus-within .wvh5-inline-search-btn {
    background: var(--wvh5-accent, #1f2b3e);
    color: var(--wvh5-accent-fg, #fff);
}
.wvh5-navbar.navbar.wvh5--bar-sharp .wvh5-inline-search .wvh5-search-results-dropdown {
    border-radius: 0;
}

/* --- filled: kenarliksiz yumusak dolgu, genis yuvarlak kose, sol mercek --- */
.wvh5-navbar.navbar.wvh5--bar-filled .wvh5-inline-search-input {
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--wvh5-panel-bg, #f0f2f5);
    padding: 12px 18px 12px 44px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.wvh5-navbar.navbar.wvh5--bar-filled .wvh5-inline-search-icon {
    left: 16px;
    font-size: 1rem;
}
.wvh5-navbar.navbar.wvh5--bar-filled .wvh5-inline-search-input:focus {
    background: var(--wvh5-bg, #fff);
    border-color: var(--wvh5-border, #d9dee6);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.wvh5-navbar.navbar.wvh5--bar-filled .wvh5-inline-search .wvh5-search-results-dropdown {
    border-radius: 14px;
}

/* Koyu semada dolgulu/hap zeminleri: beyaz yerine koyu panel tonu kullanilir */
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--bar-pill .wvh5-inline-search-input,
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--bar-filled .wvh5-inline-search-input:focus {
    background: #111827;
    border-color: #4b5563;
}
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--bar-filled .wvh5-inline-search-input {
    background: #1f2937;
}
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--bar-sharp .wvh5-inline-search-input {
    border-color: #e5e7eb;
}
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--bar-sharp .wvh5-inline-search-btn {
    background: #e5e7eb;
    color: #111827;
}
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--bar-underline .wvh5-inline-search-input {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
}
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--bar-underline .wvh5-inline-search-input:focus {
    background: transparent;
    border-color: var(--wvh5-accent, #e5e7eb);
}

/* ---------- Kisa arama kutusu (search_style = short) ----------
   Ikon grubunun SOLUNDA duran dar kutu; ikon grubuyla birlikte tasinir
   (satir 1 / satir 2). Yalnizca masaustunde gorunur (asagidaki lg blogu
   acar); mobilde arama ikonu + katman kullanilir. Kendi tasarim
   parametresi short_design vardir: soft | underline | pill | expand.
   Genis bar (wvh5--bar-*) kurallari bu kutuya ulasmaz: nav'a yalniz aktif
   arama biciminin tasarim sinifi basilir (header_5.php). */
.wvh5-inline-search--short {
    width: var(--wvh5-short-w, 170px);
    max-width: none;
    flex: 0 1 auto;
    margin-right: 8px;
    transition: width 0.25s ease;
}
/* Yazarken biraz genisler: dar kutuda uzun sorgu sigar */
.wvh5-inline-search--short:focus-within {
    width: var(--wvh5-short-w-focus, 240px);
}
.wvh5-inline-search--short .wvh5-inline-search-input {
    font-size: 0.88rem;
    padding: 8px 12px 8px 34px;
}
.wvh5-inline-search--short .wvh5-inline-search-icon {
    left: 12px;
    font-size: 0.85rem;
}
/* Sonuc kutusu kutudan genis olabilir: saga yaslanir, sola dogru acilir */
.wvh5-inline-search--short .wvh5-search-results-dropdown {
    left: auto;
    right: 0;
    min-width: min(360px, 80vw);
}
/* Metinli ikon modunda ikon grubu genis: kutu bir tik daralir */
.wvh5--iconlabels-text .wvh5-inline-search--short {
    --wvh5-short-w: 150px;
    --wvh5-short-w-focus: 220px;
}

/* --- short/underline: sol mercek + tek alt cizgi (genis bar'in alt cizgi modeliyle ayni dil) --- */
.wvh5-navbar.navbar.wvh5--short-underline .wvh5-inline-search-input {
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--wvh5-muted, #8a94a3);
    border-radius: 0;
    padding: 8px 6px 8px 26px;
    box-shadow: none;
    color: var(--wvh5-fg, #1f2b3e);
}
.wvh5-navbar.navbar.wvh5--short-underline .wvh5-inline-search-icon {
    left: 2px;
    font-size: 0.95rem;
}
.wvh5-navbar.navbar.wvh5--short-underline .wvh5-inline-search-input:focus {
    background: transparent;
    border-bottom-color: var(--wvh5-accent, #1f2b3e);
    box-shadow: none;
}
.wvh5-navbar.navbar.wvh5--short-underline .wvh5-inline-search::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 2px;
    background: var(--wvh5-accent, #1f2b3e);
    transition: left 0.25s ease, right 0.25s ease;
    pointer-events: none;
}
.wvh5-navbar.navbar.wvh5--short-underline .wvh5-inline-search:focus-within::after {
    left: 0;
    right: 0;
}

/* --- short/pill: tam yuvarlak hap, sol mercek (dugme yok) --- */
.wvh5-navbar.navbar.wvh5--short-pill .wvh5-inline-search-input {
    border-radius: 999px;
    border: 1.5px solid var(--wvh5-border, #d9dee6);
    background: var(--wvh5-bg, #fff);
    padding-left: 38px;
}
.wvh5-navbar.navbar.wvh5--short-pill .wvh5-inline-search-icon {
    left: 15px;
}
.wvh5-navbar.navbar.wvh5--short-pill .wvh5-inline-search-input:focus {
    border-color: var(--wvh5-accent, #1f2b3e);
    box-shadow: 0 0 0 4px rgba(31, 43, 62, 0.08);
}
.wvh5-navbar.navbar.wvh5--short-pill .wvh5-search-results-dropdown {
    border-radius: 18px;
}

/* --- short/expand: kapaliyken yalniz mercek; uzerine gelince / odakta kutu
   SOLA dogru acilir (ikon grubu sagda sabit oldugu icin genisleme sola olur),
   mercek kutunun sol ucunda kalir, yani sola kayar. Klavye ile de acilir
   (focus-within). Kapali halde input gorunmez ama tiklanabilir alan 44px. --- */
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-inline-search--short {
    width: 44px;
    margin-right: 2px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-inline-search--short:hover,
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-inline-search--short:focus-within {
    width: var(--wvh5-short-w-focus, 240px);
}
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-inline-search-input {
    border-radius: 999px;
    border: 1.5px solid var(--wvh5-border, #d9dee6);
    background: var(--wvh5-panel-bg, #f6f7f9);
    padding: 8px 12px 8px 38px;
    transition: background 0.25s, border-color 0.25s, opacity 0.2s;
}
/* Kapali: zemin ve kenarlik silinir, yer tutucu saklanir; yalniz mercek kalir */
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-inline-search--short:not(:hover):not(:focus-within) .wvh5-inline-search-input {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: transparent;
    cursor: pointer;
}
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-inline-search--short:not(:hover):not(:focus-within) .wvh5-inline-search-input::placeholder {
    opacity: 0;
}
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-inline-search-icon {
    left: 14px;
    font-size: 1.05rem;
    color: var(--wvh5-icon, var(--wvh5-fg, #1f2b3e));
    transition: left 0.3s, font-size 0.3s, color 0.2s;
}
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-inline-search--short:hover .wvh5-inline-search-icon,
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-inline-search--short:focus-within .wvh5-inline-search-icon {
    font-size: 0.9rem;
    left: 15px;
}
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-inline-search-input:focus {
    border-color: var(--wvh5-accent, #1f2b3e);
    box-shadow: 0 0 0 4px rgba(31, 43, 62, 0.08);
}
/* Kapaliyken sonuc kutusu asla gorunmez */
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-inline-search--short:not(:focus-within) .wvh5-search-results-dropdown {
    display: none;
}
.wvh5-navbar.navbar.wvh5--short-expand .wvh5-search-results-dropdown {
    border-radius: 18px;
}
/* Koyu semada kisa bar zeminleri */
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--short-pill .wvh5-inline-search-input,
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--short-expand .wvh5-inline-search--short:hover .wvh5-inline-search-input,
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--short-expand .wvh5-inline-search--short:focus-within .wvh5-inline-search-input {
    background: #111827;
    border-color: #4b5563;
}
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--short-underline .wvh5-inline-search-input {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
}
.wvh5-navbar.navbar.wvh5--scheme-dark.wvh5--short-underline .wvh5-inline-search-input:focus {
    background: transparent;
    border-color: var(--wvh5-accent, #e5e7eb);
}

/* ---------- 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;
    }
    /* Menu sol bolgede (logo ortada): sol hucre icerigi sola yaslanir */
    .wvh5--menu-r1-left .wvh5-cell-mid {
        justify-content: flex-start;
    }
    /* Menu sol bolgede (logo solda): logonun yanindaki menu tasmadan siga bilsin */
    .wvh5-start-menu {
        min-width: 0;
    }
    .wvh5--search-bar .wvh5-inline-search {
        display: block;
    }
    /* Kisa bar: ikon grubunun icinde, masaustunde gorunur */
    .wvh5--search-short .wvh5-inline-search--short {
        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;
    }
    /* Menu alt sagdayken: esit yan kolon kurali sag kolonu yari genislige
       sikistirip menu ogelerini alt satira kaydiriyordu — sag kolon icerige
       gore genisler, sol kolon esner. Menu de hucre icinde saga yaslanir. */
    .wvh5--menu-r2-right .wvh5-row2-grid {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, auto);
    }
    .wvh5--bar-r2.wvh5--menu-r2-right .wvh5-row2-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--wvh5-bar-max, 560px)) minmax(0, auto);
    }
    .wvh5--menu-r2-right .wvh5-row2-nav {
        justify-content: flex-end;
    }
    /* Menu alt soldayken ayni kuralin simetrigi: sol kolon icerige gore
       genisler, sag kolon esner; menu hucre icinde sola yaslanir */
    .wvh5--menu-r2-left .wvh5-row2-grid {
        grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
    }
    .wvh5--bar-r2.wvh5--menu-r2-left .wvh5-row2-grid {
        grid-template-columns: minmax(0, auto) minmax(0, var(--wvh5-bar-max, 560px)) minmax(0, 1fr);
    }
    .wvh5--menu-r2-left .wvh5-row2-nav {
        justify-content: flex-start;
    }
    /* Kenara tam yaslama: ilk/son ogenin nav-link ic boslugu yaziyi iceriden
       baslatiyordu (padding kurali !important oldugu icin burada da gerekli) */
    .wvh5--menu-r2-left .wvh5-row2-nav > .nav-item:first-child > .nav-link {
        padding-left: 0 !important;
    }
    /* Katalog dugmesi alt solda ilk ogeyse o da kenara yaslanir: tema kalkani
       zeminini saydam yaptigi icin metin gibi gorunur, ic boslugu hiza bozar */
    .wvh5-r2-start > .wvh5-catalog:first-child .wvh5-catalog-btn {
        padding-left: 0;
    }
    .wvh5--menu-r2-right .wvh5-row2-nav > .nav-item:last-child > .nav-link {
        padding-right: 0 !important;
    }
    .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, var(--wv-white, #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: var(--wv-white, #fff); border: 1px solid currentColor; color: var(--wv-gray-900, #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: var(--wv-white, #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: var(--wv-gray-900, #000); }
.ft3 .blk-news .nl-form input::placeholder { color: var(--wv-gray-900, #000); opacity: 1; }
.ft3 .blk-news .nl-form input:focus { outline: none; }
.ft3 .blk-news .nl-form button { border: none; background: transparent; color: var(--wv-gray-900, #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: var(--wv-white, #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: var(--wv-white, #fff); color: var(--wv-gray-900, #000);
}
/* Açılır menüdeki seçenekler her zaman okunur (beyaz zemin/siyah metin) */
.ft3-bottom .ft3-switch select option { background: var(--wv-white, #fff); color: var(--wv-gray-900, #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 --- */