/* === assets/frontend/css/extension/modules/modules.css === */
/* marquee css */

.wesiva-marquee-container {
    padding: 8px 0;
}

.wesiva-marquee-container .wesiva-marquee-wrapper {
    display: flex;
    align-items: center;
    overflow: hidden;
    transform: translateZ(0);
}

.wesiva-marquee-container .wesiva-marquee-wrapper .wesiva-marquee-text-container {
    margin: .15em 0;
    white-space: nowrap;
    width: auto;
    perspective: 900;
    animation: marquee-left 0.5s linear infinite forwards;
    /* Mobile-first taban olcek; masaustu asagidaki min-width kuralinda buyur */
    font-size: 14px;
}

.wesiva-marquee-container:hover .wesiva-marquee-text-container {
    animation-play-state: paused;
}

.wesiva-marquee-container .wesiva-marquee-wrapper .wesiva-marquee-text-container span {
    padding: 0 38px;
}

.wesiva-marquee-container .wesiva-marquee-wrapper .wesiva-marquee-text-container a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.wesiva-marquee-container .wesiva-marquee-wrapper .wesiva-marquee-text-container a:hover {
    opacity: 0.8;
}

@keyframes marquee-left {
    0% {
        transform: translateX(-1%);
    }
    to {
        transform: translateX(-51%);
    }
}

/* Ust bar duyuru seridi (header_5_base.css) ile ayni olcek */
@media (min-width: 992px) {
    .wesiva-marquee-container .wesiva-marquee-wrapper .wesiva-marquee-text-container {
        font-size: 16px;
    }
}

/* comment css */

.comment-card {
    background-size: cover;
    background-position: center;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

/* Yorum Metni */
.comment-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--wv-gray-900, #1a1a1a);
    margin-bottom: 15px;
    flex-grow: 1;
    font-style: italic;
}

/* Müşteri Adı */
.customer-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--wv-gray-900, #1a1a1a);
    margin: 0;
}
/* === assets/frontend/css/extension/modules/marquee/wmq.css === */
/* ==========================================================
   Kayan Yazı (DataMarquee) — görünümler
   1 Klasik: modules.css'teki önceki işaretleme (burada yalnız ikon + ayraç)
   2-12: .wmq ortak yapısı — .wmq-serit > .wmq-iz > .wmq-grup ×2
         (ikinci grup birebir kopya, %50 kaydırma ile kesintisiz döngü)
   Değişkenler (DataMarquee.php inline basar):
     --wmq-bg / --wmq-fg : zemin ve yazı rengi (modül ayarı)
     --wmq-a / --wmq-a-fg: vurgu rengi ve üstündeki yazı (yoksa site vurgu rengi)
     --wmq-dur           : bir tur süresi
     --wmq-sep           : ayraç (sabit listeden; yoksa ayraçsız)
   Mobile-first; masaüstü 992px (Klasik ölçeğiyle aynı geçiş). Yazı boyutları px.
   ========================================================== */

/* ---------- Tüm duyuru tıklanır (Klasik + 2-12) ----------
   Bağlantı duyurunun tamamını sarar: metin düz kalır, yalnız isteğe bağlı
   ek yazı (link metni) eski link gibi altı çizili ve kalın görünür. */
/* Klasik: modules.css'teki link kuralıyla aynı güçte seçici (aksi halde metnin tamamı altı çizili/kalın olur) */
.wesiva-marquee-container .wesiva-marquee-wrapper .wesiva-marquee-text-container a.wmq-link,
.wmq a.wmq-link { color: inherit; text-decoration: none; font-weight: inherit; margin-left: 0; }
.wmq-link .wmq-link-yazi { text-decoration: underline; font-weight: 600; }
/* Klasik: modules.css şerit içindeki her span'e 38px boşluk verir; ek yazı bundan muaf */
.wesiva-marquee-container .wesiva-marquee-wrapper .wesiva-marquee-text-container .wmq-link-yazi { padding: 0; }
.wmq-link:hover .wmq-metin { text-decoration: underline; }
.wmq-v2 .wmq-link .wmq-link-yazi,
.wmq-v3 .wmq-link .wmq-link-yazi { font-weight: inherit; }

/* ---------- Klasik: isteğe bağlı ikon + ayraç ---------- */
.wesiva-marquee-text-container .wmq-ikon { margin-right: 8px; color: inherit; }
.wmq-ayracli .wesiva-marquee-text-container > span { position: relative; }
/* Ayraç iki parçanın tam ortasına düşer (parçalar arası boşluk her iki yanda eşit) */
.wmq-ayracli .wesiva-marquee-text-container > span::after {
    content: var(--wmq-sep, "");
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    opacity: 0.6;
}

/* ---------- Ortak yapı (2-12) ---------- */
.wmq {
    --wmq-a: var(--wv-accent, #f59e0b);
    --wmq-a-fg: var(--wv-accent-fg, #ffffff);
    /* Genişlik içerikten değil yerleştiği sütundan gelsin (iz max-content genişliktedir) */
    contain: inline-size;
    overflow: hidden;
    background: var(--wmq-bg, var(--wv-primary, #111827));
    color: var(--wmq-fg, var(--wv-primary-fg, #ffffff));
    padding: 10px 0;
}
.wmq-serit { display: flex; overflow: hidden; }
.wmq-iz {
    display: flex;
    flex: none;
    width: max-content;
    animation: wmq-kay var(--wmq-dur, 40s) linear infinite;
}
/* Fare şeridin üzerindeyken akış durur: link kaçırılmadan tıklanabilir */
.wmq:hover .wmq-iz { animation-play-state: paused; }
.wmq-serit--ters .wmq-iz { animation-direction: reverse; }
.wmq-grup { display: flex; flex: none; align-items: center; }
.wmq-oge {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 24px;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.3;
}
/* Ayraç iki öğenin tam ortasına düşer */
.wmq-oge::after {
    content: var(--wmq-sep, "");
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    opacity: 0.6;
}
.wmq-ikon { margin-right: 8px; color: inherit; }
.wmq a { color: inherit; text-decoration: underline; font-weight: 600; margin-left: 6px; }
.wmq a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@keyframes wmq-kay {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- 2 · Büyük Kontur ----------
   Ölçek: masaüstünde 32px / 700, 1px kontur, şerit ~66px (yaygın e-ticaret
   temalarındaki kontur bant ölçüsü); mobilde 20px */
.wmq-v2 { padding: 10px 0; }
.wmq-v2 .wmq-oge,
.wmq-v3 .wmq-oge {
    padding: 0 16px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    line-height: 1.3;
    color: transparent;
    -webkit-text-stroke: 1px var(--wmq-fg, #ffffff);
}
/* Ayraç ve ikon dolu kalır (kontur yalnız harflerde); ayraç normal kalınlıkta */
.wmq-v2 .wmq-oge::after,
.wmq-v3 .wmq-oge::after,
.wmq-v2 .wmq-ikon,
.wmq-v3 .wmq-ikon { color: var(--wmq-fg, #ffffff); -webkit-text-stroke: 0; }
.wmq-v2 .wmq-oge::after,
.wmq-v3 .wmq-oge::after { font-weight: 400; opacity: 1; }
.wmq-v2 a,
.wmq-v3 a { font-weight: inherit; }

/* ---------- 3 · Dolu & Kontur: çift sıradaki öğe vurgu renginde dolu ---------- */
.wmq-v3 { padding: 10px 0; }
.wmq-v3 .wmq-oge:nth-child(even) { color: var(--wmq-a); -webkit-text-stroke: 0; }
.wmq-v3 .wmq-oge:nth-child(even) .wmq-ikon { color: var(--wmq-a); }

/* Kontur desteklemeyen tarayıcıda yazı dolu basılır (görünmez kalmasın) */
@supports not (-webkit-text-stroke: 1px) {
    .wmq-v2 .wmq-oge,
    .wmq-v3 .wmq-oge { color: var(--wmq-fg, #ffffff); }
}

/* ---------- 4 · Hap Etiketler ---------- */
.wmq-v4 .wmq-oge {
    margin: 0 5px;
    padding: 6px 14px;
    min-height: 32px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px currentColor;
    background: rgba(127, 127, 127, 0.12);
    font-weight: 600;
}
/* Etiketler zaten ayrık: ayraç kullanılmaz */
.wmq-v4 .wmq-oge::after { content: none; }

/* ---------- 5 · Çapraz Çift Bant / 7 · Eğik Bant ---------- */
.wmq-v5,
.wmq-v7 { background: transparent; padding: 18px 0; }
.wmq-v5 .wmq-serit,
.wmq-v7 .wmq-serit {
    /* Eğimde uçlar görünmesin diye şerit sütundan taşar; kök kırpar */
    width: calc(100% + 40px);
    margin-left: -20px;
    padding: 10px 0;
    background: var(--wmq-bg, #111827);
    color: var(--wmq-fg, #ffffff);
    transform: rotate(-2deg);
}
/* İkinci şerit birincinin yarısını örter: dar ekranda da iki şerit ayrı seçilir */
.wmq-v5 .wmq-serit { transform: rotate(-3deg); }
.wmq-v5 .wmq-serit--ters {
    position: relative;
    margin-top: -18px;
    background: var(--wmq-a);
    color: var(--wmq-a-fg);
    transform: rotate(3deg);
}
.wmq-v5 .wmq-oge,
.wmq-v7 .wmq-oge { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.wmq-v5 { padding: 30px 0; }

/* ---------- 6 · İki Satır: alt satır vurgu renginde, ters yön ---------- */
.wmq-v6 { padding: 0; }
.wmq-v6 .wmq-serit { padding: 8px 0; }
.wmq-v6 .wmq-serit--ters { background: var(--wmq-a); color: var(--wmq-a-fg); }
.wmq-v6 .wmq-oge { font-weight: 600; }

/* ---------- 8 · Gradyan Bant ---------- */
.wmq-v8 {
    padding: 12px 0;
    background: linear-gradient(90deg, var(--wmq-bg, #111827), var(--wmq-a));
}
.wmq-v8 .wmq-oge { font-weight: 600; }

/* ---------- 9 · Rozetli İkon ---------- */
.wmq-v9 .wmq-oge { font-weight: 600; }
.wmq-v9 .wmq-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--wmq-a);
    color: var(--wmq-a-fg);
    font-size: 13px;
}

/* ---------- 10 · Şeffaf: zeminsiz, yazı modülün zemin renginde, kenarlar solar ---------- */
.wmq-v10 {
    padding: 12px 0;
    background: transparent;
    color: var(--wmq-bg, #111827);
    border-top: 1px solid var(--wv-gray-200, #e5e7eb);
    border-bottom: 1px solid var(--wv-gray-200, #e5e7eb);
}
.wmq-v10 .wmq-serit {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wmq-v10 .wmq-oge { font-weight: 600; }

/* ---------- 11 · Dev Tipografi ---------- */
.wmq-v11 { padding: 10px 0; }
.wmq-v11 .wmq-oge {
    padding: 0 18px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}
.wmq-v11 .wmq-oge::after { opacity: 0.4; }

/* ---------- 12 · Çizgili Bant ---------- */
.wmq-v12 {
    padding: 9px 0;
    border-top: 3px solid var(--wmq-a);
    border-bottom: 3px solid var(--wmq-a);
}
.wmq-v12 .wmq-oge {
    padding: 0 28px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.wmq-v12 .wmq-oge::after { color: var(--wmq-a); opacity: 1; }

/* ---------- Masaüstü ölçek (Klasik ile aynı geçiş) ---------- */
@media (min-width: 992px) {
    .wmq-oge { font-size: 16px; }
    .wmq-v2 .wmq-oge,
    .wmq-v3 .wmq-oge { font-size: 32px; padding: 0 20px; }
    .wmq-v2, .wmq-v3 { padding: 12px 0; }
    .wmq-v5 .wmq-oge,
    .wmq-v7 .wmq-oge { font-size: 17px; }
    /* Geniş şeritte aynı açı uçları çok kaydırır (yazı kırpılır): eğim yarıya iner */
    .wmq-v5 .wmq-serit,
    .wmq-v7 .wmq-serit { transform: rotate(-1deg); }
    .wmq-v5 .wmq-serit { transform: rotate(-1.5deg); }
    .wmq-v5 .wmq-serit--ters { margin-top: -20px; transform: rotate(1.5deg); }
    .wmq-v5 { padding: 34px 0; }
    .wmq-v7 { padding: 16px 0; }
    .wmq-v9 .wmq-ikon { width: 34px; height: 34px; font-size: 14px; }
    .wmq-v11 .wmq-oge { font-size: 36px; padding: 0 24px; }
    .wmq-v12 .wmq-oge { font-size: 13px; }
}

/* ---------- Hareket azaltma tercihi: akış durur, öğeler satır kırarak dizilir ---------- */
@media (prefers-reduced-motion: reduce) {
    .wmq-iz { width: auto; flex: 1 1 auto; animation: none; }
    .wmq-grup { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 6px; }
    .wmq-grup[aria-hidden="true"],
    .wmq-oge[aria-hidden="true"],
    .wmq-serit--ters { display: none; }
    .wmq-oge { white-space: normal; }
}

/* === assets/frontend/css/deal/frs.css === */
/* ==========================================================
   Fırsat (Geri Sayım) modülü — ortak stiller
   Tüm görünümler bu dosyayı yükler; görünüme özel kurallar
   frs_{id}.css dosyalarındadır. Mobile-first, renkler --wv-* token.
   Ayar değişkenleri: --frs-vurgu, --frs-vurgu-rgb, --frs-zemin,
   --frs-sutun, --frs-bg-img (frs_kok_stil üretir).
   ========================================================== */

.frs-module {
    --frs-a: var(--frs-vurgu, var(--wv-danger, #e11d48));
    --frs-a-rgb: var(--frs-vurgu-rgb, 225, 29, 72);
    --frs-metin: var(--wv-gray-900, #111827);
    --frs-soluk: var(--wv-gray-500, #6b7280);
    --frs-cizgi: var(--wv-gray-200, #e5e7eb);
    --frs-kart: var(--wv-white, #ffffff);
    margin-bottom: 8px;
    color: var(--frs-metin);
}
.frs-module [hidden],
[data-frs-wrap][hidden] { display: none !important; }
.frs-module a { text-decoration: none; }

/* Başlık satırı */
.frs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.frs-head-title { min-width: 0; }
.frs-head-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.frs-module .wesiva-main-title {
    font-size: clamp(0.9rem, 2.2vw, 1.15rem);
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    margin: 0;
    line-height: 1.3;
}
.frs-module .wesiva-main-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.85;
}
/* Mobilde başlık (~14px) ile aynı boya gelmesin: alt başlık bir kademe küçük */
.frs-subtitle { margin: 6px 0 0; font-size: 0.75rem; color: var(--frs-soluk); line-height: 1.45; }
@media (min-width: 768px) {
    .frs-subtitle { font-size: 0.875rem; line-height: 1.5; }
}

/* ---------- Geri sayım bileşeni ---------- */
.frs-cd { display: inline-flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.frs-cd-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--frs-soluk); }
.frs-cd-units { display: flex; align-items: center; gap: 6px; }
.frs-cd-u { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.frs-cd-u b { font-weight: 700; }
.frs-cd-u small { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; opacity: 0.8; }
.frs-cd-sep { font-style: normal; font-weight: 700; opacity: 0.6; }

/* Kutu: her birim ayrı renkli kutu */
.frs-cd--kutu .frs-cd-u {
    min-width: 48px;
    padding: 8px 6px;
    border-radius: 8px;
    background: var(--frs-a);
    color: var(--wv-white, #ffffff);
}
.frs-cd--kutu .frs-cd-u b { font-size: 1.25rem; }

/* Satır: tek satırlık kompakt metin (02g 14:33:10) */
.frs-cd--satir .frs-cd-units { gap: 8px; color: var(--frs-a); font-weight: 700; font-size: 0.875rem; }
.frs-cd--satir .frs-cd-u { flex-direction: row; align-items: baseline; }
.frs-cd--satir .frs-cd-u small { margin: 0 0 0 1px; font-size: 0.7em; text-transform: none; letter-spacing: 0; }
/* Ayraç gizli: birim aralığını flex gap verir (gizli öge gap hesabına girmez) */
.frs-cd--satir .frs-cd-sep { display: none; }

/* Dev: büyük tipografik rakamlar */
.frs-cd--dev .frs-cd-units { gap: 4px; }
.frs-cd--dev .frs-cd-u b { font-size: clamp(1.75rem, 8vw, 3.5rem); letter-spacing: -0.02em; }
.frs-cd--dev .frs-cd-sep { font-size: clamp(1.25rem, 6vw, 2.5rem); align-self: flex-start; margin-top: 0.1em; }

/* Flip: tabela kartları */
.frs-cd--flip .frs-cd-units { gap: 6px; }
.frs-cd--flip .frs-cd-u b {
    position: relative;
    display: block;
    min-width: 56px;
    padding: 10px 6px;
    border-radius: 8px;
    text-align: center;
    font-size: clamp(1.5rem, 7vw, 2.75rem);
    color: var(--wv-white, #ffffff);
    background: linear-gradient(180deg, #2a2f3a 0%, #2a2f3a 50%, #1c2029 50%, #1c2029 100%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.frs-cd--flip .frs-cd-u b::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.45);
}
.frs-cd--flip .frs-cd-u b.frs-tik { animation: frs-flip 0.45s ease; }
.frs-cd--flip .frs-cd-sep { font-size: 1.5rem; align-self: flex-start; margin-top: 0.35em; }
@keyframes frs-flip {
    0% { transform: perspective(300px) rotateX(0); }
    45% { transform: perspective(300px) rotateX(-80deg); }
    100% { transform: perspective(300px) rotateX(0); }
}

/* Halka: SVG halkalar */
.frs-cd--halka .frs-cd-units { gap: 10px; flex-wrap: wrap; justify-content: center; }
.frs-cd--halka .frs-cd-u { position: relative; width: 68px; height: 68px; justify-content: center; }
.frs-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.frs-ring circle { fill: none; stroke-width: 4; }
.frs-ring-bg { stroke: var(--frs-cizgi); }
.frs-ring-fg { stroke: var(--frs-a); stroke-linecap: round; stroke-dasharray: 163.36; transition: stroke-dashoffset 0.6s ease; }
.frs-cd--halka .frs-cd-u b { position: relative; font-size: 1.25rem; }
.frs-cd--halka .frs-cd-u small { position: relative; font-size: 0.5625rem; }

/* Neon: parlayan rakamlar */
.frs-cd--neon .frs-cd-u b {
    font-size: clamp(1.75rem, 8vw, 3.25rem);
    color: var(--frs-a);
    text-shadow: 0 0 6px rgba(var(--frs-a-rgb), 0.9), 0 0 18px rgba(var(--frs-a-rgb), 0.6), 0 0 36px rgba(var(--frs-a-rgb), 0.35);
}
.frs-cd--neon .frs-cd-sep { font-size: 1.75rem; align-self: flex-start; margin-top: 0.2em; color: var(--frs-a); }
.frs-cd--neon .frs-cd-u small { color: rgba(255, 255, 255, 0.7); }

@media (min-width: 768px) {
    .frs-cd--kutu .frs-cd-u { min-width: 56px; padding: 10px 8px; }
    .frs-cd--kutu .frs-cd-u b { font-size: 1.5rem; }
    .frs-cd--halka .frs-cd-u { width: 80px; height: 80px; }
    .frs-cd--halka .frs-cd-u b { font-size: 1.5rem; }
}

/* ---------- Ürün bilgileri ---------- */
.frs-name { display: block; font-weight: 600; color: var(--frs-metin); line-height: 1.35; }
.frs-name:hover { color: var(--frs-a); }
.frs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.frs-discount {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wv-white, #ffffff);
    background: var(--frs-a);
}
.frs-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.frs-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.frs-price-old { font-size: 0.85em; color: var(--frs-soluk); }
.frs-price-now { font-weight: 700; color: var(--frs-metin); }
.frs-tax { font-size: 0.7em; font-weight: 500; color: var(--frs-soluk); }
.frs-variant, .frs-campaign, .frs-rating { display: block; font-size: 0.8125rem; color: var(--frs-soluk); }
.frs-campaign { color: var(--wv-success, #16a34a); font-weight: 600; }
.frs-star { color: var(--wv-warning, #f59e0b); }
.frs-rating-count { opacity: 0.8; }

/* Satış ilerleme çubuğu */
.frs-progress { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.frs-progress-text { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8125rem; color: var(--frs-soluk); }
.frs-progress-text b { color: var(--frs-metin); }
.frs-progress-bar { height: 8px; border-radius: 999px; background: rgba(var(--frs-a-rgb), 0.15); overflow: hidden; }
.frs-progress-bar span { display: block; height: 100%; border-radius: inherit; background: var(--frs-a); }
.frs-progress--lg .frs-progress-bar { height: 14px; }
.frs-progress--lg .frs-progress-text { font-size: 0.9375rem; }

/* Buton */
.frs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--wv-white, #ffffff);
    background: var(--frs-a);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.frs-btn:hover { color: var(--wv-white, #ffffff); filter: brightness(0.92); }

/* Görsel kutusu */
.frs-media { position: relative; display: block; overflow: hidden; background: var(--wv-gray-50, #f9fafb); }
.frs-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
a.frs-media:hover img { transform: scale(1.04); }

/* Bitti durumu: öge soluklaşır, etiket görünür */
.frs-ended-tag {
    display: none;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wv-white, #ffffff);
    background: var(--wv-gray-700, #374151);
}
.frs-bitti .frs-ended-tag { display: inline-flex; }
.frs-bitti .frs-media img, .frs-bitti .frs-cd, .frs-bitti .frs-progress { opacity: 0.45; filter: grayscale(0.6); }
.frs-bitti .frs-btn { pointer-events: none; opacity: 0.5; }

/* Kaydırma okları (şerit görünümleri) */
.frs-nav { display: none; gap: 6px; }
.frs-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--frs-cizgi);
    background: var(--frs-kart);
    color: var(--frs-metin);
    font-family: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}
.frs-nav button:hover { border-color: var(--frs-a); color: var(--frs-a); }
.frs-nav button:disabled { opacity: 0.35; cursor: default; }
@media (min-width: 768px) { .frs-nav { display: flex; } }

@media (prefers-reduced-motion: reduce) {
    .frs-module *, .frs-module *::before, .frs-module *::after { animation: none !important; transition: none !important; }
}

/* === assets/frontend/css/deal/frs_3.css === */
/* Fırsat Görünüm 3 — Fırsat Izgarası (mobile-first, mobilde 2'li) */
.frs-v3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.frs-v3-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--frs-cizgi);
    border-radius: 12px;
    background: var(--frs-kart);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.frs-v3-card:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1); }
.frs-v3-media { aspect-ratio: 1 / 1; }
.frs-v3-media .frs-tags { position: absolute; top: 8px; left: 8px; }
.frs-v3-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; flex: 1; }
.frs-v3-body .frs-name { font-size: 0.875rem; }
.frs-v3-body .frs-price { margin-top: auto; }
.frs-v3-body .frs-progress-text { font-size: 0.75rem; }

@media (min-width: 768px) {
    .frs-v3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .frs-v3-body { padding: 14px; }
    .frs-v3-body .frs-name { font-size: 0.9375rem; }
}
@media (min-width: 992px) {
    .frs-v3-grid { grid-template-columns: repeat(var(--frs-sutun, 4), minmax(0, 1fr)); }
}

/* === assets/frontend/css/split/split.css === */
/* ==========================================================
   Split (Resim + Yazı) Modülü — tüm görünümler
   Tüm kurallar .spl kökü altındadır; site geneline stil sızmaz.
   Yazı tipi tanımlanmaz: tema fontu kalıtılır.
   Mobile-first: taban stiller mobil, masaüstü >=768px içinde.
   ========================================================== */

/* ── Ortak yazı bloğu ── */
.spl-baslik {
    font-size: clamp(1.25rem, 3.2vw, 1.9rem);
    font-weight: 650;
    line-height: 1.25;
    /* --spl-baslik-renk / --spl-metin-renk: kutuya koyu yazı zemini seçilince PHP basar (spl_kutu_stil) */
    color: var(--spl-baslik-renk, var(--wv-gray-900, #1f2b3e));
    margin: 0 0 10px;
}
.spl-metin {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--spl-metin-renk, var(--wv-gray-700, #4a5568));
    margin: 0 0 16px;
    max-width: 34rem;
}
/* Mobilde daha minimal buton; masaüstü boyutları >=768px'te uygulanır */
.spl-buton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    min-height: 40px;
    font-size: 12.5px;
    /* Featured görünümleriyle aynı köşe dili (10px); renkler modül ayarından
       gelen CSS değişkenleriyle özelleştirilebilir */
    border-radius: 10px;
    background: var(--spl-buton-bg, var(--wv-primary, #1f2b3e));
    color: var(--spl-buton-renk, var(--wv-primary-fg, #fff));
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s, gap 0.15s;
}
/* Hover: seçilen renk ne olursa olsun hafif koyulaşma */
.spl-buton:hover { filter: brightness(0.9); color: var(--spl-buton-renk, var(--wv-primary-fg, #fff)); gap: 12px; }

.spl picture { display: block; }
.spl-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── V1 / V2 / V6 — yan yana yerleşim ── */
.spl-split {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    /* Yazı alanı zemini: ayardan gelir, yoksa temanın kart rengi kullanılır */
    background: var(--spl-icerik-bg, var(--wv-white, #fff));
    border: 1px solid var(--wv-border, #eceef2);
}
.spl-gorsel { position: relative; }
.spl-gorsel picture, .spl-gorsel .spl-img { aspect-ratio: 16 / 10; }
.spl-icerik {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 22px 18px 24px;
    /* Dar kapsayıcıda (ör. ürün detay orta kolonu) flex öğesi içerik genişliğinin
       altına inebilsin; aksi halde metin bloğu yandan taşıp kırpılıyor */
    min-width: 0;
    /* Çok dar alanda uzun kelime satıra sığmıyorsa bölünür; metin görselin altına taşmaz */
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .spl-buton { gap: 8px; padding: 12px 24px; min-height: 44px; font-size: 13.5px; }
    .spl-split { flex-direction: row; align-items: stretch; }
    /* V2 ve zigzag çift satırları: görsel sağa geçer */
    .spl-split.spl-ters { flex-direction: row-reverse; }
    .spl-gorsel { flex: 0 0 50%; max-width: 50%; }
    /* Tablet aralığında kutu yataya yakın tutulur: cover kırpması azalır */
    .spl-gorsel picture, .spl-gorsel .spl-img { height: 100%; aspect-ratio: auto; min-height: 260px; }
    .spl-icerik { flex: 1; padding: 28px 28px; }
}
@media (min-width: 1200px) {
    .spl-gorsel picture, .spl-gorsel .spl-img { min-height: 340px; }
    .spl-icerik { padding: 36px 44px; }
}

/* ── V3 — Taşmalı Kart ── */
.spl-tasma { position: relative; }
.spl-tasma-gorsel {
    border-radius: 10px;
    overflow: hidden;
}
.spl-tasma-gorsel picture, .spl-tasma-gorsel .spl-img { aspect-ratio: 16 / 9; }
.spl-tasma-kart {
    /* Yazı kartı zemini: ayardan gelir, yoksa temanın kart rengi kullanılır */
    background: var(--spl-icerik-bg, var(--wv-white, #fff));
    border: 1px solid var(--wv-border, #eceef2);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    padding: 20px 18px;
    margin: -44px 14px 0;
    position: relative;
}

@media (min-width: 768px) {
    .spl-tasma { padding-bottom: 56px; }
    .spl-tasma-gorsel { width: 72%; }
    .spl-tasma-gorsel picture, .spl-tasma-gorsel .spl-img { aspect-ratio: 16 / 8; }
    .spl-tasma-kart {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 44%;
        margin: 0;
        padding: 30px 32px;
    }
}

/* ── V4 — Tam Arka Plan ── */
.spl-fullbg {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    /* Yazı okunurluğu için görselin üstüne koyu tarama serilir */
}
.spl-fullbg picture { position: absolute; inset: 0; }
.spl-fullbg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.spl-fullbg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10, 14, 22, 0.62) 0%, rgba(10, 14, 22, 0.28) 60%, rgba(10, 14, 22, 0.12) 100%);
}
.spl-fullbg-icerik {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 320px;
    padding: 32px 20px;
}
.spl-fullbg-icerik .spl-baslik { color: var(--wv-white, #fff); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.spl-fullbg-icerik .spl-metin { color: rgba(255, 255, 255, 0.88); }
.spl-fullbg-icerik .spl-buton { background: var(--spl-buton-bg, var(--wv-white, #fff)); color: var(--spl-buton-renk, var(--wv-gray-900, #1f2b3e)); }
.spl-fullbg-icerik .spl-buton:hover { filter: brightness(0.92); color: var(--spl-buton-renk, var(--wv-gray-900, #1f2b3e)); }

@media (min-width: 768px) {
    .spl-fullbg-icerik {
        min-height: 420px;
        padding: 48px 56px;
        max-width: 60%;
    }
}

/* ── V5 — Çoklu Kutu ── */
/* Mobil dahil her zaman en az 2 kolon: kutular ekranı kaplamaz */
.spl-cift {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.spl-cift-tek { grid-template-columns: 1fr; }
.spl-cift-kutu {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--wv-white, #fff);
}
.spl-cift-kutu:hover { color: var(--wv-white, #fff); }
.spl-cift-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 16 / 10;
    transition: transform 0.35s ease;
}
.spl-cift-kutu:hover .spl-cift-img { transform: scale(1.04); }
.spl-cift-yazi {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 24px 12px 12px;
    background: linear-gradient(to top, rgba(10, 14, 22, 0.72) 0%, rgba(10, 14, 22, 0.32) 60%, rgba(10, 14, 22, 0) 100%);
}
.spl-cift-baslik {
    font-size: clamp(0.95rem, 2.6vw, 1.5rem);
    font-weight: 650;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Kutu metni: iki satıra kırpılır, degrade üstünde okunur kalır */
.spl-cift-metin {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Mobilde minimal; masaüstü boyutları >=768px'te uygulanır */
.spl-cift-buton {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    min-height: 32px;
    font-size: 11px;
    /* Featured görünümleriyle aynı köşe dili (10px); renkler ayardan özelleştirilebilir */
    border-radius: 10px;
    background: var(--spl-buton-bg, var(--wv-white, #fff));
    color: var(--spl-buton-renk, var(--wv-gray-900, #1f2b3e));
    font-weight: 600;
    transition: gap 0.15s;
}
.spl-cift-kutu:hover .spl-cift-buton { gap: 11px; }
/* Görsel ve yazı aynı ızgara hücresinde üst üste: yazı görsele sığarsa görünüm aynıdır,
   sığmazsa (dar/basık kutuda başlık + metin + buton) kutu yazı kadar uzar.
   Eskiden yazı mutlak konumluydu ve kutunun üstünden taşıp kesiliyordu. */
.spl-cift-kutu { display: grid; }
.spl-cift-kutu > picture { grid-area: 1 / 1; height: 100%; }
.spl-cift-kutu > picture .spl-cift-img { min-height: 100%; }
.spl-cift-kutu > .spl-cift-yazi { position: relative; grid-area: 1 / 1; align-self: end; }
/* 2 sütunlu düzende tek kalan son kutu tam satır kaplar (son satırda boş hücre kalmaz) */
@media (max-width: 991.98px) {
    .spl-cift > .spl-cift-kutu:last-child:nth-child(odd) { grid-column: 1 / -1; }
    /* Tam satır kutu yatay oranla diğerleriyle benzer yükseklikte kalır (yazı sığmazsa yine uzar) */
    .spl-cift > .spl-cift-kutu:last-child:nth-child(odd) .spl-cift-img { aspect-ratio: 16 / 7; }
}

@media (min-width: 576px) {
    .spl-cift { gap: 12px; }
    .spl-cift-img { aspect-ratio: 4 / 3; }
    .spl-cift-yazi { padding: 34px 18px 18px; gap: 8px; }
}
@media (min-width: 768px) {
    .spl-cift-buton { gap: 7px; padding: 9px 18px; min-height: 40px; font-size: 12.5px; }
}
@media (min-width: 992px) {
    /* Satır başına kutu sayısı ayardan gelir (2-4); sığmayan kutular alta sarar */
    .spl-cift { grid-template-columns: repeat(var(--spl-sutun, 2), 1fr); gap: 16px; }
    .spl-cift-tek { grid-template-columns: 1fr; }
    .spl-cift-yazi { padding: 44px 26px 24px; }
    /* 3-4 sütunda yazılar dar alana sığsın */
    .spl-cift[style*="--spl-sutun: 3"] .spl-cift-yazi,
    .spl-cift[style*="--spl-sutun: 4"] .spl-cift-yazi { padding: 34px 18px 18px; }
}

/* ── V6 — Zigzag satır boşlukları ── */
.spl-zigzag {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 768px) {
    .spl-zigzag { gap: 24px; }
    /* Zigzag satırları V1'e göre daha alçaktır; sayfa uzamasın */
    .spl-zigzag .spl-gorsel picture,
    .spl-zigzag .spl-gorsel .spl-img { min-height: 260px; }
}

/* ── Çerçevesiz (düz) görünüm ──
   "Çerçeve ve Yuvarlak Köşe" ayarı kapalıyken kenarlık çizgileri ve
   köşe yumuşatmaları kaldırılır; yerleşim ve renkler değişmez. */
.spl-duz .spl-split { border: 0; border-radius: 0; }
.spl-duz .spl-tasma-gorsel { border-radius: 0; }
.spl-duz .spl-tasma-kart { border: 0; border-radius: 0; }
.spl-duz .spl-fullbg { border-radius: 0; }
.spl-duz .spl-cift-kutu { border-radius: 0; }

/* ── Hareket azaltma tercihi ── */
@media (prefers-reduced-motion: reduce) {
    .spl-cift-img { transition: none; }
    .spl-cift-kutu:hover .spl-cift-img { transform: none; }
}

/* === assets/frontend/css/featured/featured_4.css === */
/* ==========================================================
   Featured Görünüm 4 — Spotlight
   İlk ürün büyük vitrin, kalanlar küçük grid.
   Kart içi (.ecom-*) stillenmez; hücre boyutları grid ile verilir.
   Mobile-first: 2 kolon; >=992px'te büyük kart solda 2x2 alan kaplar.
   ========================================================== */

.ftr-v4-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: stretch;
}

/* Mobilde büyük kart tam satır kaplar, kalanlar 2'li dizilir */
.ftr-v4-big { grid-column: span 2; }

/* Izgara hücreleri içeriğe göre BÜYÜMEZ.
   Grid hücresinin varsayılan min-width degeri auto'dur ve içindeki görselin
   doğal boyutunu alt sınır sayar. Büyük vitrin görseli 1000x1000 üretildiği ve
   bu ölçü img üzerinde width/height özniteliği olarak bulunduğu için hücre
   1000px'e kadar genişleyip satırı taşırıyordu (yatay kaydırma + devasa boşluk).
   min-width:0 bu alt sınırı kaldırır; genişliği yalnızca ızgara belirler. */
.ftr-v4-big,
.ftr-v4-cell {
    min-width: 0;
}

/* Görsel hiçbir koşulda hücreden taşmaz (öznitelik ölçüsü CSS'i ezemez) */
.ftr-v4-big img,
.ftr-v4-cell img {
    max-width: 100%;
}

/* Hücre içindeki kart hücreyi doldursun */
.ftr-v4-big > *,
.ftr-v4-cell > * {
    height: 100%;
}

@media (min-width: 992px) {
    .ftr-v4-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    /* Büyük kart: sol tarafta 2 kolon x 2 satır alan */
    .ftr-v4-big {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* ---- Büyük vitrin kartının yazıları ----
       Kart, küçüklerin iki katı genişlikte ve iki katı yüksekliktedir; ortak
       ürün kartı şablonu ise sabit px yazı boyutları kullanır. Ölçeklenmediğinde
       devasa görselin altında küçücük bir ad ve fiyat kalıyordu.

       Değerler kart genişliğiyle akar: dar masaüstünde küçük kartlara yaklaşır,
       geniş ekranda tavana oturur. Yalnız BU görünümün büyük hücresini etkiler;
       küçük hücreler ve diğer sayfalardaki kartlar değişmez. */
    .ftr-v4-big .ecom-product-info {
        padding: clamp(8px, 0.9vw, 16px);
    }
    .ftr-v4-big .ecom-product-title,
    .ftr-v4-big .ecom-product-title a {
        font-size: clamp(15px, 1.15vw, 20px);
        line-height: 1.35;
    }
    .ftr-v4-big .ecom-product-price,
    .ftr-v4-big .ecom-product-old-price {
        font-size: clamp(15px, 1.15vw, 20px);
    }
    .ftr-v4-big .ecom-product-discount-badge {
        font-size: clamp(13px, 1vw, 17px);
    }
    .ftr-v4-big .ecom-product-campaign {
        font-size: clamp(12px, 0.95vw, 15px);
    }
    .ftr-v4-big .ecom-product-installment {
        font-size: clamp(11px, 0.85vw, 14px);
    }
    .ftr-v4-big .product-rating {
        font-size: clamp(12px, 0.9vw, 15px);
    }
    .ftr-v4-big .ecom-add-to-cart-btn {
        font-size: clamp(13px, 1vw, 16px);
    }
}

/* === assets/frontend/css/featured/featured_7.css === */
/* ==========================================================
   Featured Görünüm 7 — Numaralı Sıralama
   Kendi kart tasarımına sahip B sınıfı görünüm; tüm kurallar
   .ftr-v7 kökü altındadır, site kart sistemine dokunmaz.
   Mobile-first: tek kolon; >=576px 2, >=992px 3 kolon.
   ========================================================== */

.ftr-v7-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
    counter-reset: ftr-v7;
}

.ftr-v7-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--wv-gray-200, #e8eaef);
    border-radius: 10px;
    background: var(--ftr-kart-bg, var(--wv-white, #fff));
    padding: 12px 14px 12px 34px;
    min-height: 92px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ftr-v7-card:hover {
    border-color: var(--wv-gray-300, #d3d8e0);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    color: inherit;
}

/* Büyük sıra numarası: kartın sol alt köşesinden taşan tipografik vurgu */
.ftr-v7-num {
    position: absolute;
    left: 2px;
    bottom: -12px;
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--wv-gray-100, #edf0f4);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    user-select: none;
}

.ftr-v7-img {
    position: relative;
    z-index: 1;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ftr-gorsel-bg, var(--wv-gray-50, #f5f6f8));
}
.ftr-v7-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* Ürün etiketi (rozet): rengi ürün ayarından gelir */
.ftr-v7-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 4px;
    background: var(--wv-primary, #1f2b3e);
    color: var(--wv-primary-fg, #fff);
    max-width: calc(100% - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftr-v7-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.ftr-v7-name {
    font-size: 13px;
    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;
}
/* Varyant bilgisi ("+3 Renk"): Minimal Kart ile aynı sönük ton */
.ftr-v7-variant { font-size: 11px; color: var(--wv-gray-500, #94a3b8); }
.ftr-v7-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--wv-gray-900, #1f2b3e);
}
.ftr-v7-star { color: #f5a623; font-size: 11px; }
.ftr-v7-rating-count { color: var(--wv-gray-500, #94a3b8); }
/* Fiyat satırı: dar kartta sarmalı, taşma olmaz */
.ftr-v7-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 7px;
    font-size: 14px;
    min-width: 0;
}
.ftr-v7-price strong { font-weight: 700; color: var(--wv-gray-900, #1f2b3e); }
.ftr-v7-old { font-size: 12px; color: var(--wv-gray-500, #9aa3b0); }
.ftr-v7-discount {
    font-size: 10px;
    font-weight: 700;
    color: var(--wv-accent, #e53935);
    white-space: nowrap;
}
.ftr-v7-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;
}

/* Numara gizlendiğinde kart normal iç boşluğa döner */
.ftr-v7-numarasiz .ftr-v7-card { padding-left: 14px; }

@media (min-width: 576px) {
    .ftr-v7-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .ftr-v7-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* === assets/frontend/css/extension/modules/reviews/reviews.css === */
/* ============================================================
   DataReviews modülü — yorum / referans vitrini
   Temel yapı + 15 CSS-only tasarım varyantı (rv-style-*).
   Kart yalnızca: yıldız + metin + isim gösterir (avatar/ürün yok).
   Tüm varyantlar metin uzunluğundan bağımsız düzgün görünür. Mobile-first.
   ============================================================ */

/* ---- Temel yapı (tüm stiller paylaşır) ---- */
.rv-grid { row-gap: 16px; }

/* Sütun: kartlar satırda eşit yükseklikte dursun */
.rv-col { display: flex; }

.rv-card {
    --rv-accent: var(--wv-primary, #6576ff);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

/* Tırnak işareti — yalnızca "quote" stilinde görünür */
.rv-quote { display: none; }

/* Yıldız puanı: tek katmanlı dolgu (genişlik ile yüzde) */
.rv-stars {
    --rv-percent: 100%;
    display: inline-block;
    position: relative;
    width: max-content;
    font-size: 16px;
    line-height: 1;
}
.rv-stars::before {
    content: "\2605\2605\2605\2605\2605";
    letter-spacing: 2px;
    color: rgba(0, 0, 0, .15);
}
.rv-stars::after {
    content: "\2605\2605\2605\2605\2605";
    letter-spacing: 2px;
    color: var(--wv-warning, #f5a623);
    position: absolute;
    left: 0;
    top: 0;
    width: var(--rv-percent);
    overflow: hidden;
    white-space: nowrap;
}

.rv-text { margin: 0; font-size: 14px; line-height: 1.6; flex: 1; }
.rv-meta { display: flex; align-items: center; margin-top: auto; }
.rv-author { margin: 0; font-size: 14px; font-weight: 600; }

/* Slider öğeleri tam yükseklik */
.reviews-slider .item { height: 100%; }

/* Owl görünüm kutusu kenarlardaki kart border'ını/gölgesini kırpmasın
   (özellikle loop modunda en soldaki kartın sol kenarı). İç boşluk kadar
   negatif dış boşlukla hizalama korunur; site yapısına dokunulmaz. */
.reviews-slider .owl-stage-outer { padding: 4px; margin: -4px; }

@media (min-width: 768px) {
    .rv-text { font-size: 15px; }
}

/* ============================================================
   1) SADE / MINIMAL — çerçevesiz, bol boşluk, ince ayraç
   ============================================================ */
.rv-style-minimal .rv-card { background: transparent; padding: 8px 4px; gap: 10px; }
.rv-style-minimal .rv-text { color: var(--wv-gray-900, #333); }
.rv-style-minimal .rv-meta { border-top: 1px solid var(--wv-gray-200, #ececec); padding-top: 10px; }

/* ============================================================
   2) SOFT CARD — beyaz kart, yumuşak gölge, yuvarlak köşe
   ============================================================ */
.rv-style-soft .rv-card {
    background: var(--wv-white, #fff);
    border: 1px solid var(--wv-gray-200, #eee);
    border-radius: 14px;}

/* ============================================================
   3) TIRNAKLI (QUOTE) — büyük tırnak, italik metin
   ============================================================ */
.rv-style-quote .rv-card {
    background: var(--wv-white, #fff);
    border-radius: 14px;
    padding-top: 10px;
}
.rv-style-quote .rv-quote {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 56px;
    line-height: .8;
    height: 26px;
    color: var(--rv-accent);
    opacity: .25;
}
.rv-style-quote .rv-text { font-style: italic; }

/* ============================================================
   4) ÇERÇEVELİ (OUTLINE) — ince renkli kenarlık
   ============================================================ */
.rv-style-outline .rv-card {
    background: var(--wv-white, #fff);
    border: 2px solid var(--rv-accent);
    border-radius: 12px;
}
.rv-style-outline .rv-author { color: var(--rv-accent); }

/* ============================================================
   5) SOL ŞERİT VURGU (ACCENT) — solda kalın renk şerit
   ============================================================ */
.rv-style-accent .rv-card {
    background: var(--wv-white, #fff);
    border-left: 4px solid var(--rv-accent);
    border-radius: 0 10px 10px 0;
}

/* ============================================================
   6) KOYU TEMA (DARK) — koyu zemin, parlak yıldız
   ============================================================ */
.rv-style-dark .rv-card {
    /* Arka plan, Vurgu Rengi seçicisinden gelir (istenen renk seçilebilir) */
    background: var(--rv-accent, #1c2233);
    border-radius: 12px;
    color: #e8ebf5;
}
.rv-style-dark .rv-text { color: #cdd3e6; }
.rv-style-dark .rv-author { color: var(--wv-white, #fff); }
.rv-style-dark .rv-stars::before { color: rgba(255, 255, 255, .18); }
.rv-style-dark .rv-stars::after { color: #ffd34d; }

/* ============================================================
   8) ORTALI (CENTERED) — içerik ortalı, sade kart
   ============================================================ */
.rv-style-centered .rv-card {
    background: var(--wv-white, #fff);
    border-radius: 14px;    align-items: center;
    text-align: center;
}
.rv-style-centered .rv-stars { margin: 0 auto; }
.rv-style-centered .rv-meta { justify-content: center; }

/* ============================================================
   9) KOMPAKT / LİSTE — küçük kart, satıra daha çok sığar
   ============================================================ */
.rv-style-compact .rv-card {
    background: var(--wv-white, #fff);
    border: 1px solid var(--wv-gray-200, #eee);
    border-radius: 10px;
    padding: 12px 14px;
    gap: 8px;
}
.rv-style-compact .rv-text { font-size: 13px; line-height: 1.5; }
.rv-style-compact .rv-stars { font-size: 13px; }
.rv-style-compact .rv-author { font-size: 13px; }
@media (min-width: 768px) { .rv-style-compact .rv-col { width: 33.333%; } }
@media (min-width: 992px) { .rv-style-compact .rv-col { width: 20%; } }

/* ============================================================
   10) SOHBET BALONU (BUBBLE) — balon + altta isim
   ============================================================ */
.rv-style-bubble .rv-card { background: transparent; padding: 4px; gap: 0; }
.rv-style-bubble .rv-stars { margin: 0 14px 8px; }
.rv-style-bubble .rv-text {
    position: relative;
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--wv-gray-100, #f1f3f9);
    border-radius: 14px;
    color: var(--wv-gray-900, #2b3040);
}
.rv-style-bubble .rv-text::after {
    content: "";
    position: absolute;
    left: 22px;
    bottom: -8px;
    border: 8px solid transparent;
    border-top-color: var(--wv-gray-100, #f1f3f9);
    border-bottom: 0;
}
.rv-style-bubble .rv-meta { padding: 0 14px; }

/* ============================================================
   11) KÖŞE PUAN ETİKETİ (BADGE) — sol üstte renkli puan sekmesi
   ============================================================ */
.rv-style-badge .rv-card {
    background: var(--wv-white, #fff);
    border-radius: 12px;    padding: 0 20px 20px;
    overflow: hidden;
}
.rv-style-badge .rv-stars {
    align-self: flex-start;
    margin: 0 0 14px -20px;
    /* Boşluk padding yerine aynı renkli kenarlıkla verilir: mutlak konumlu dolu yıldız katmanı (::after)
       padding kutusuna göre yerleştiğinden padding iki katmanı kaydırıyor ve yüzde genişliği bozuyordu */
    padding: 0;
    border: solid var(--rv-accent);
    border-width: 10px 16px 10px 20px;
    background: var(--rv-accent);
    border-radius: 0 0 12px 0;
}
.rv-style-badge .rv-stars::before { color: rgba(255, 255, 255, .4); }
.rv-style-badge .rv-stars::after { color: var(--wv-white, #fff); }

/* ============================================================
   12) KÖŞE ŞERİT (RIBBON) — sağ üst çapraz renkli şerit
   ============================================================ */
.rv-style-ribbon .rv-card {
    position: relative;
    overflow: hidden;
    background: var(--wv-white, #fff);
    border-radius: 12px;}
.rv-style-ribbon .rv-card::after {
    content: "";
    position: absolute;
    top: 14px;
    right: -30px;
    width: 110px;
    height: 18px;
    transform: rotate(45deg);
    background: var(--rv-accent);
}

/* ============================================================
   13) YAPIŞKAN NOT (NOTE) — hafif eğik, sarı not kâğıdı
   ============================================================ */
.rv-style-note .rv-card {
    position: relative;
    background: #fff7cc;
    border-radius: 3px;
    transform: rotate(-1.5deg);
}
.rv-style-note .rv-text { color: #5b5328; }
.rv-style-note .rv-author { color: #3f3a1c; }
.rv-style-note .rv-stars::before { color: rgba(0, 0, 0, .12); }
.rv-style-note .rv-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border: 12px solid transparent;
    border-right-color: #efe3a0;
    border-bottom-color: #efe3a0;
}

/* ============================================================
   14) FİLİGRAN YILDIZ (WATERMARK) — arkada dev soluk yıldız
   ============================================================ */
.rv-style-watermark .rv-card {
    position: relative;
    overflow: hidden;
    background: var(--wv-white, #fff);
    border-radius: 12px;}
.rv-style-watermark .rv-card::before {
    content: "\2605";
    position: absolute;
    right: -6px;
    bottom: -28px;
    font-size: 120px;
    line-height: 1;
    color: var(--rv-accent);
    opacity: .08;
    pointer-events: none;
}

/* ============================================================
   15) KESİK ÇİZGİ ÇERÇEVE (DASHED) — renkli kesik kenarlık
   ============================================================ */
.rv-style-dashed .rv-card {
    background: var(--wv-white, #fff);
    border: 2px dashed var(--rv-accent);
    border-radius: 12px;
}

/* ============================================================
   16) NEON (SİBER) — KOYU zemin, tek renk (cyan) neon parıltı
   ============================================================ */
.rv-style-neon .rv-card {
    background: #0a0f1e;
    color: #cfe3ff;
    border: 1.5px solid #22d3ee;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .25), inset 0 0 20px rgba(34, 211, 238, .14), 0 0 26px rgba(34, 211, 238, .35);
}
.rv-style-neon .rv-text { color: #9fb6df; }
.rv-style-neon .rv-author { color: #22d3ee; text-shadow: 0 0 10px rgba(34, 211, 238, .7); }
.rv-style-neon .rv-stars::before { color: rgba(255, 255, 255, .12); }
.rv-style-neon .rv-stars::after { color: #22d3ee; text-shadow: 0 0 8px rgba(34, 211, 238, .6); }

/* ============================================================
   17) HOLOGRAFİK — AÇIK pastel iridesan (gökkuşağı) zemin
   ============================================================ */
.rv-style-holo .rv-card {
    background: linear-gradient(135deg, #c4f1ff 0%, #d7c4ff 50%, #ffc9ec 100%);
    border-radius: 14px;
    color: #2c2658;
}
.rv-style-holo .rv-text { color: #3b3570; }
.rv-style-holo .rv-author {
    background: linear-gradient(90deg, #0ea5e9, #a855f7, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rv-style-holo .rv-stars::before { color: rgba(0, 0, 0, .12); }
.rv-style-holo .rv-stars::after { color: #f5a623; }

/* === assets/frontend/css/gallery/wgl.css === */
/* ==========================================================
   Galeri modülü — ortak stiller
   Tüm görünümler bu dosyayı yükler; görünüme özel kurallar
   wgl_{id}.css dosyalarındadır. Mobile-first, renkler --wv-* token.
   Ayar değişkenleri (wgl_kok_ac üretir): --wgl-sutun-m, --wgl-sutun,
   --wgl-bosluk-m, --wgl-bosluk, --wgl-kose, (görünüm 7) --wgl-sure.
   Büyütme penceresi (.wgl-pen) JS ile body'ye eklenir; stili burada.
   ========================================================== */

.wgl-module {
    --wgl-metin: var(--wv-gray-900, #111827);
    --wgl-soluk: var(--wv-gray-500, #6b7280);
    --wgl-cizgi: var(--wv-gray-200, #e5e7eb);
    --wgl-yumusak: var(--wv-gray-100, #f3f4f6);
    --wgl-zemin: var(--wv-white, #ffffff);
    --wgl-a: var(--wv-primary, #111827);
    --wgl-a-yazi: var(--wv-primary-fg, #ffffff);
    --wgl-b: var(--wgl-bosluk-m, 8px);
    --wgl-k: var(--wgl-kose, 8px);
    --wgl-s: var(--wgl-sutun-m, 2);
    margin-bottom: 8px;
    color: var(--wgl-metin);
    min-width: 0;
}
@media (min-width: 992px) {
    .wgl-module { --wgl-b: var(--wgl-bosluk, 12px); --wgl-s: var(--wgl-sutun, 4); }
}
.wgl-module a { text-decoration: none; }

/* Başlık */
.wgl-head { margin-bottom: 16px; min-width: 0; }
.wgl-module .wesiva-main-title {
    font-size: clamp(0.9rem, 2.2vw, 1.15rem);
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    margin: 0;
    line-height: 1.3;
}
.wgl-module .wesiva-main-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.85;
}
/* Mobilde başlık (~14px) ile aynı boya gelmesin: alt başlık bir kademe küçük */
.wgl-subtitle { margin: 6px 0 0; font-size: 0.75rem; color: var(--wgl-soluk); line-height: 1.45; }
@media (min-width: 768px) {
    .wgl-subtitle { font-size: 0.875rem; line-height: 1.5; }
}

/* ---------- Öğe kabı (button / a / div ortak) ---------- */
.wgl-kutu {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: var(--wgl-yumusak);
    border-radius: var(--wgl-k);
    overflow: hidden;
    color: inherit;
    font: inherit;
    text-align: left;
}
button.wgl-kutu { cursor: zoom-in; }
a.wgl-kutu { cursor: pointer; }
.wgl-kutu:focus-visible { outline: 3px solid var(--wgl-a); outline-offset: 2px; }
.wgl-kare { aspect-ratio: 1 / 1; }
.wgl-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}
.wgl-kare .wgl-img,
.wgl-reel .wgl-img {
    height: 100%;
    object-fit: cover;
}
/* Fareyle üzerine gelince hafif yakınlaşma (yalnız tıklanabilir öğede) */
@media (hover: hover) {
    .wgl-tik .wgl-img { transition: transform 0.4s ease; }
    .wgl-tik:hover .wgl-img { transform: scale(1.04); }
}

/* Video işareti */
.wgl-oynat {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
.wgl-oynat::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-left: 10px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* ---------- Ortak kare ızgara (1, 8, 10, 11, 14, 16) ---------- */
.wgl-izgara {
    display: grid;
    grid-template-columns: repeat(var(--wgl-s), minmax(0, 1fr));
    gap: var(--wgl-b);
}
.wgl-hucre { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Görsel altı ürün kartı ---------- */
.wgl-urun {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px;
    border: 1px solid var(--wgl-cizgi);
    border-radius: 8px;
    background: var(--wgl-zemin);
    color: var(--wgl-metin);
    min-width: 0;
}
.wgl-urun:hover { color: var(--wgl-metin); border-color: var(--wgl-soluk); }
.wgl-urun-gorsel { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--wgl-yumusak); }
.wgl-urun-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wgl-urun-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wgl-urun-ad {
    font-size: 0.8125rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.wgl-fiyat { font-size: 0.8125rem; line-height: 1.2; }
.wgl-fiyat del { color: var(--wgl-soluk); font-weight: 400; margin-right: 2px; }
.wgl-fiyat strong { color: var(--wv-price, var(--wgl-metin)); font-weight: 700; }
.wgl-kdv { font-size: 0.6875rem; font-weight: 400; color: var(--wgl-soluk); }
.wgl-stok { font-size: 0.6875rem; color: var(--wv-danger, #dc2626); }

/* ---------- Yatay şerit (6, 15) ve ok düğmeleri ---------- */
.wgl-serit-sar { position: relative; }
.wgl-serit {
    display: grid;
    grid-auto-flow: column;
    /* Mobilde bir sonraki görselin ucu görünür (kaydırılabildiği anlaşılsın) */
    grid-auto-columns: calc((100% - var(--wgl-b) * var(--wgl-s)) / (var(--wgl-s) + 0.35));
    gap: var(--wgl-b);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
}
.wgl-serit::-webkit-scrollbar { display: none; }
.wgl-serit-oge { scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 992px) {
    .wgl-serit { grid-auto-columns: calc((100% - var(--wgl-b) * (var(--wgl-s) - 1)) / var(--wgl-s)); }
}
.wgl-ok {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--wgl-cizgi);
    background: var(--wgl-zemin);
    color: var(--wgl-metin);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    z-index: 2;
    align-items: center;
    justify-content: center;
    padding: 0 0 3px;
}
.wgl-ok:focus-visible { outline: 3px solid var(--wgl-a); outline-offset: 2px; }
.wgl-ok[disabled] { opacity: 0; pointer-events: none; }
.wgl-ok--sol { left: 8px; }
.wgl-ok--sag { right: 8px; }
@media (min-width: 992px) and (hover: hover) {
    .wgl-serit-sar .wgl-ok { display: inline-flex; }
}

/* ---------- Düğmeler ---------- */
.wgl-btn,
.wgl-takip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--wgl-a);
    color: var(--wgl-a-yazi);
    white-space: nowrap;
}
.wgl-btn:hover,
.wgl-takip:hover { color: var(--wgl-a-yazi); opacity: 0.9; }
.wgl-btn:focus-visible,
.wgl-takip:focus-visible { outline: 3px solid var(--wgl-a); outline-offset: 2px; }
/* Instagram marka geçişi (marka rengi bilinçli sabit) */
.wgl-takip--grad,
.wgl-takip--grad:hover { background: linear-gradient(90deg, #f58529, #dd2a7b 50%, #8134af); color: #fff; }
.wgl-takip--acik,
.wgl-takip--acik:hover { background: #fff; color: #111827; }
/* Takip düğmesi hesap satırında küçük bir çip olarak görünür; dokunma alanı
   görünmez uzantıyla 44px'e tamamlanır */
.wgl-takip {
    position: relative;
    gap: 6px;
    min-height: 32px;
    padding: 0 14px;
    font-size: 0.8125rem;
}
.wgl-takip::after { content: ""; position: absolute; inset: -6px -2px; }
.wgl-takip i { font-size: 0.9375rem; }
/* Tema ikon renklerini ezebiliyor; galeri ikonları bulundukları bağlantı/düğmenin rengini alır */
.wgl-module i.fab,
.wgl-module i.fas,
.wgl-module i.far { color: inherit; }

/* ---------- Büyütme penceresi ---------- */
html.wgl-pen-acik { overflow: hidden; }
.wgl-pen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(10, 10, 12, 0.94);
    color: #fff;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.wgl-pen[hidden] { display: none; }
.wgl-pen.acik { opacity: 1; }
.wgl-pen-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    flex: 0 0 auto;
}
.wgl-pen-sayac { font-size: 0.875rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.wgl-pen-btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 3px;
}
.wgl-pen-btn:hover { background: rgba(255, 255, 255, 0.22); }
.wgl-pen-btn[hidden] { display: none; }
.wgl-pen-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wgl-pen-sahne {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    /* Tek parmak kaydırma JS'te; iki parmak yakınlaştırma tarayıcıda */
    touch-action: pinch-zoom;
    user-select: none;
}
.wgl-pen-medya {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.wgl-pen-medya.yukleniyor { opacity: 0.3; }
.wgl-pen-onceki,
.wgl-pen-sonraki { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.wgl-pen-onceki { left: 8px; }
.wgl-pen-sonraki { right: 8px; }
.wgl-pen-alt {
    flex: 0 0 auto;
    max-height: 40vh;
    overflow-y: auto;
    padding: 10px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wgl-pen-alt:empty { display: none; }
.wgl-pen-yazi { margin: 0; font-size: 0.9375rem; line-height: 1.5; max-width: 70ch; overflow-wrap: anywhere; }
.wgl-pen-link { color: #fff; text-decoration: underline; font-size: 0.875rem; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
.wgl-pen-link:hover { color: #fff; }
.wgl-pen-urun {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    max-width: 460px;
    min-width: 0;
}
.wgl-pen-urun:hover { color: #111827; }
.wgl-pen-urun .wgl-urun-gorsel { width: 52px; height: 52px; }
.wgl-pen-urun .wgl-urun-bilgi { flex: 1 1 auto; }
.wgl-pen-urun .wgl-urun-ad { font-size: 0.875rem; }
.wgl-pen-urun .wgl-fiyat del { color: #6b7280; }
.wgl-pen-urun .wgl-fiyat strong { color: #111827; }
.wgl-urun-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
@media (min-width: 992px) {
    .wgl-pen-sahne { padding: 0 72px; }
    .wgl-pen-onceki { left: 16px; }
    .wgl-pen-sonraki { right: 16px; }
    .wgl-pen-alt { align-items: center; text-align: center; }
    .wgl-pen-link { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
    .wgl-pen,
    .wgl-pen-medya,
    .wgl-tik .wgl-img { transition: none; }
}

/* === assets/frontend/css/gallery/wgl_14.css === */
/* Galeri Görünüm 14 — Profil Başlıklı (Instagram); halka geçişi marka rengi, bilinçli sabit */
.wgl-profil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 16px;
}
.wgl-profil-avatar { flex: 0 0 auto; }
.wgl-profil-halka {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
}
.wgl-profil-halka > img,
.wgl-profil-halka > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--wgl-zemin);
    object-fit: cover;
    background: var(--wgl-metin);
    color: var(--wgl-zemin);
    font-size: 1.5rem;
    font-weight: 700;
}
.wgl-profil-bilgi { flex: 1 1 160px; min-width: 0; }
.wgl-profil-ad { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 700; color: var(--wgl-metin); overflow-wrap: anywhere; }
.wgl-profil-ad:hover { color: var(--wgl-metin); text-decoration: underline; }
.wgl-profil-yazi { margin: 0; font-size: 0.8125rem; color: var(--wgl-soluk); line-height: 1.45; }
.wgl-v14 .wgl-kutu { border-radius: 0; }
@media (min-width: 768px) {
    .wgl-profil-ad { font-size: 1.0625rem; }
    .wgl-profil-yazi { margin-top: 2px; font-size: 0.875rem; }
}
@media (min-width: 992px) {
    .wgl-profil-halka { width: 88px; height: 88px; }
}

/* === assets/frontend/css/blog_posts/wbl.css === */
/* ==========================================================
   Blog Yazıları modülü — ortak stiller
   Tüm görünümler bu dosyayı yükler; görünüme özel kurallar
   wbl_{id}.css dosyalarındadır. Mobile-first, renkler --wv-* token.
   ========================================================== */

.wbl-module { margin-bottom: 8px; }

/* Şablonsuz varsayılan başlık: diğer vitrin modülleriyle aynı dil */
.wbl-module .wesiva-main-title {
    font-size: clamp(0.9rem, 2.2vw, 1.15rem);
    font-weight: 600;
    color: var(--wv-gray-900, #2c3e50);
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    margin: 0;
    line-height: 1.3;
}
.wbl-module .wesiva-main-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.85;
}

/* Üst satır: başlık solda, "Tümünü Gör" / oklar sağda */
.wbl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.wbl-head-end { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.wbl-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wv-primary, #2c6ed0);
    text-decoration: none;
    white-space: nowrap;
}
.wbl-all:hover { color: var(--wv-primary-hover, #2360b8); }
.wbl-all span { transition: transform 0.2s ease; }
.wbl-all:hover span { transform: translateX(3px); }

/* Görsel kutusu: görsel kutuyu tam doldurur; yoksa baş harfli yer tutucu */
.wbl-media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--wv-gray-100, #f1f5f9);
}
.wbl-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.wbl-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-size: 2rem;
    font-weight: 800;
    color: var(--wv-white, #ffffff);
    background: linear-gradient(135deg, var(--wv-primary, #2c6ed0), var(--wv-secondary, #1e293b));
}

/* Kategori etiketi */
.wbl-cat {
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--wv-primary, #2c6ed0);
    background: var(--wv-primary-soft, #eaf1fb);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Koyu zemin üstünde (overlay görünümler) */
.wbl-cat.wbl-cat-light { color: var(--wv-white, #ffffff); background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); }
/* Rozetsiz düz metin (liste görünümleri) */
.wbl-cat.wbl-cat-text { padding: 0; background: none; border-radius: 0; }

/* Meta satırı: tarih · yazar · okuma süresi */
.wbl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    font-size: 0.75rem;
    color: var(--wv-gray-500, #64748b);
    line-height: 1.4;
}
.wbl-dot { opacity: 0.6; }

/* Kaydırma okları (yalnızca kaydırmalı görünümlerde basılır).
   Mobilde gizli: şerit parmakla kayar, başlık satırı kalabalıklaşmaz */
.wbl-nav { display: none; gap: 8px; }
@media (min-width: 768px) { .wbl-nav { display: flex; } }
.wbl-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--wv-gray-200, #e2e8f0);
    background: var(--wv-white, #ffffff);
    color: var(--wv-gray-700, #334155);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.wbl-nav-btn:hover { border-color: var(--wv-primary, #2c6ed0); color: var(--wv-primary, #2c6ed0); }

/* Yatay kaydırmalı şerit: dokunmatikte yerel kaydırma, masaüstünde ok + sürükleme */
.wbl-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.wbl-scroll::-webkit-scrollbar { display: none; }
.wbl-scroll > * { scroll-snap-align: start; }
.wbl-scroll.wbl-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }

/* Linkler: klavye odağı görünür */
.wbl-module a:focus-visible,
.wbl-module button:focus-visible {
    outline: 2px solid var(--wv-primary, #2c6ed0);
    outline-offset: 2px;
}

/* Mobilde şablonlu başlık düz başlıkla aynı boyuta çekilir */
@media (max-width: 768px) {
    .wbl-module .wesiva-main-title { font-size: 1rem; }
    .wbl-module .wesiva-main-title-template div { font-size: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .wbl-module *, .wbl-module *::before, .wbl-module *::after { transition: none !important; animation: none !important; }
    .wbl-scroll { scroll-behavior: auto; }
}

/* === assets/frontend/css/blog_posts/wbl_7.css === */
/* Blog Yazıları — Görünüm 7: Bento Mozaik (mobile-first)
   Mobil: üst üste karolar. >=768px: 4 kolonlu asimetrik ızgara. */
.wbl-v7-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.wbl-v7-tile {
    position: relative;
    display: block;
    min-height: 220px;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--wv-white, #ffffff);
}
.wbl-v7-tile .wbl-media { position: absolute; inset: 0; }
.wbl-v7-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(10, 14, 22, 0) 35%, rgba(10, 14, 22, 0.82) 100%);
    pointer-events: none;
}
.wbl-v7-tile:hover img { transform: scale(1.05); }
.wbl-v7-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}
.wbl-v7-title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wbl-v7-body .wbl-meta { color: rgba(255, 255, 255, 0.8); }
.wbl-v7-big { min-height: 300px; }
.wbl-v7-tile .wbl-ph { font-size: 3rem; }

@media (min-width: 768px) {
    .wbl-v7-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 14px; }
    .wbl-v7-tile { min-height: 0; }
    .wbl-v7-big { grid-column: span 2; grid-row: span 2; min-height: 0; }
    .wbl-v7-wide { grid-column: span 2; }
    .wbl-v7-big .wbl-v7-title { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
    .wbl-v7-big .wbl-v7-body { padding: 24px; }
    /* Az yazıyla boşluk kalmasın: 2 yazıda yan yana iki büyük, 3 yazıda geniş ikinci + tam satır */
    .wbl-v7-n1 .wbl-v7-big { grid-column: 1 / -1; }
    .wbl-v7-n2 .wbl-v7-wide { grid-row: span 2; }
    .wbl-v7-n3 .wbl-v7-tile:nth-child(3) { grid-column: span 2; }
    /* 5 yazı: geniş karo küçülür → büyük + 4 küçük, iki satır tam dolar */
    .wbl-v7-n5 .wbl-v7-wide { grid-column: span 1; }
}

/* === assets/frontend/css/trust/gvn.css === */
/* ==========================================================
   Güven Rozetleri modülü — ortak stiller
   Tüm görünümler bu dosyayı yükler; görünüme özel kurallar
   gvn_{id}.css dosyalarındadır. Mobile-first, renkler --wv-* token.
   Ayar değişkenleri (gvn_kok_stil üretir): --gvn-vurgu, --gvn-vurgu-soft,
   --gvn-zemin, --gvn-zemin-yazi, --gvn-sutun, --gvn-sutun-t.
   Kök sınıfları: gvn-kart--{stil}, gvn-ikon--{stil}, gvn-mobil--{düzen}.
   ========================================================== */

.gvn-module {
    --gvn-a: var(--gvn-vurgu, var(--wv-primary, #111827));
    --gvn-a-soft: var(--gvn-vurgu-soft, var(--wv-primary-soft, #f3f4f6));
    --gvn-a-yazi: var(--wv-primary-fg, #ffffff);
    --gvn-a2: var(--wv-accent, #6366f1);
    --gvn-metin: var(--wv-gray-900, #111827);
    --gvn-soluk: var(--wv-gray-500, #6b7280);
    --gvn-cizgi: var(--wv-gray-200, #e5e7eb);
    --gvn-kart-zemin: var(--wv-white, #ffffff);
    --gvn-yumusak: var(--wv-gray-50, #f9fafb);
    /* Bant görünümlerinin varsayılan zemini (3, 11, 12): sayfa zemininden ayrışsın diye beyaz + çerçeve */
    --gvn-bant-cerceve: var(--gvn-zemin, var(--gvn-cizgi));
    margin-bottom: 8px;
    color: var(--gvn-metin);
}
.gvn-module a { text-decoration: none; }
.gvn-module ul,
.gvn-module ol { list-style: none; margin: 0; padding: 0; }

/* Başlık */
.gvn-head { margin-bottom: 16px; min-width: 0; }
.gvn-module .wesiva-main-title {
    font-size: clamp(0.9rem, 2.2vw, 1.15rem);
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    margin: 0;
    line-height: 1.3;
}
.gvn-module .wesiva-main-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.85;
}
/* Mobilde başlık (~14px) ile aynı boya gelmesin: alt başlık bir kademe küçük */
.gvn-subtitle { margin: 6px 0 0; font-size: 0.75rem; color: var(--gvn-soluk); line-height: 1.45; }
@media (min-width: 768px) {
    .gvn-subtitle { font-size: 0.875rem; line-height: 1.5; }
}

/* Linkli rozet */
.gvn-link { color: inherit; }
.gvn-link:hover { color: inherit; }
.gvn-link:focus-visible { outline: 2px solid var(--gvn-a); outline-offset: 3px; }

/* ---------- Metin ---------- */
.gvn-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gvn-baslik { display: block; font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: inherit; overflow-wrap: anywhere; }
.gvn-aciklama { display: block; font-size: 0.8125rem; line-height: 1.45; color: var(--gvn-soluk); overflow-wrap: anywhere; }

/* ---------- İkon ---------- */
.gvn-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    color: var(--gvn-a);
    background: var(--gvn-a-soft);
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}
/* Tema genel ikon rengini ezer: ikon her zaman kabının rengini alır */
.gvn-module .fas,
.gvn-module .fab { color: inherit; }
.gvn-ikon--kare .gvn-ikon { border-radius: 12px; }
.gvn-ikon--duz .gvn-ikon { width: auto; height: auto; min-width: 32px; background: none; font-size: 1.6rem; border-radius: 0; }

/* ---------- Liste düzeni (mobil seçimi + masaüstü sütun) ---------- */
.gvn-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
/* Tek sayıda rozette son öge iki sütunu kaplar (mobil ızgara) */
.gvn-mobil--izgara .gvn-liste > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.gvn-mobil--tek .gvn-liste { grid-template-columns: minmax(0, 1fr); }
.gvn-mobil--kaydir .gvn-liste {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 6px;
}
.gvn-mobil--kaydir .gvn-liste > * { flex: 0 0 72%; scroll-snap-align: start; }

@media (min-width: 768px) {
    .gvn-module .gvn-liste {
        display: grid;
        grid-template-columns: repeat(var(--gvn-sutun-t, 2), minmax(0, 1fr));
        gap: 16px;
        overflow: visible;
        padding-bottom: 0;
    }
    .gvn-mobil--kaydir .gvn-liste > * { flex: none; }
    .gvn-mobil--izgara .gvn-liste > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 992px) {
    .gvn-module .gvn-liste {
        grid-template-columns: repeat(var(--gvn-sutun, 4), minmax(0, 1fr));
        gap: 20px;
    }
}

/* ---------- Kart ---------- */
.gvn-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    min-width: 0;
    padding: 18px 12px;
    text-align: center;
    color: var(--gvn-metin);
    background: var(--gvn-kart-zemin);
    border: 1px solid var(--gvn-cizgi);
    border-radius: 12px;
    box-sizing: border-box;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
@media (min-width: 768px) {
    .gvn-kart { padding: 24px 16px; }
    .gvn-baslik { font-size: 0.9375rem; }
}

/* Kart stilleri (eski rozet şablonlarının kart görünüşleri) */
.gvn-kart--dolgu .gvn-kart { background: var(--gvn-a-soft); border-color: transparent; }
.gvn-kart--dolgu .gvn-kart .gvn-ikon { background: var(--gvn-kart-zemin); }
.gvn-kart--golge .gvn-kart { border-color: var(--wv-gray-100, #f3f4f6); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); }
.gvn-kart--gradyan .gvn-kart {
    color: var(--gvn-a-yazi);
    background: linear-gradient(135deg, var(--gvn-a), var(--gvn-a2));
    border-color: transparent;
    border-radius: 16px;
}
.gvn-kart--gradyan .gvn-kart .gvn-aciklama { color: inherit; opacity: 0.85; }
.gvn-kart--gradyan .gvn-kart .gvn-ikon { color: inherit; background: rgba(255, 255, 255, 0.18); }
.gvn-kart--gradyan.gvn-ikon--duz .gvn-kart .gvn-ikon { background: none; }
.gvn-kart--serit .gvn-kart { border-left: 4px solid var(--gvn-a); border-radius: 8px; }
.gvn-kart--ust .gvn-kart { border-top: 3px solid var(--gvn-a); border-radius: 0 0 10px 10px; }
.gvn-kart--kesik .gvn-kart { border: 2px dashed var(--gvn-a); }
.gvn-kart--yok .gvn-kart { background: transparent; border-color: transparent; padding-left: 4px; padding-right: 4px; }

/* Linkli kart: hafif kalkma */
.gvn-kart.gvn-link:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08); }
.gvn-kart--yok .gvn-kart.gvn-link:hover { box-shadow: none; }

/* Yüklenen görsel ikonun yerini alır: kutusuz, oran korunur.
   Kart stillerinin ikon zeminini ezmesi için dosyanın sonunda durur. */
.gvn-module .gvn-ikon.gvn-ikon-resim { width: auto; min-width: 0; height: 48px; background: none; border-radius: 0; }
.gvn-ikon-resim img { display: block; width: auto; height: auto; max-width: 120px; max-height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
    .gvn-kart,
    .gvn-ikon { transition: none; }
    .gvn-kart.gvn-link:hover { transform: none; }
}

/* === assets/frontend/css/trust/gvn_3.css === */
/* Güven Rozetleri Görünüm 3 — Ayraçlı İnce Bant
   Zemin rengi ayardan (yoksa açık gri); yazı rengi zemine göre.
   Masaüstünde rozetler arasına ince dikey ayraç çizilir. */
.gvn-v3-bant {
    padding: 8px;
    border-radius: 10px;
    background: var(--gvn-zemin, var(--gvn-kart-zemin));
    border: 1px solid var(--gvn-bant-cerceve);
    color: var(--gvn-zemin-yazi, var(--gvn-metin));
}
.gvn-v3 .gvn-liste { gap: 4px; }
.gvn-v3-oge { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; padding: 8px; color: inherit; }
.gvn-v3 .gvn-ikon { width: auto; height: auto; min-width: 24px; background: none; font-size: 1.25rem; }
.gvn-v3 .gvn-ikon.gvn-ikon-resim { height: 30px; }
.gvn-v3 .gvn-baslik { font-size: 0.8125rem; }
.gvn-v3 .gvn-aciklama { font-size: 0.75rem; color: inherit; opacity: 0.75; }

@media (min-width: 992px) {
    .gvn-v3-bant { padding: 6px 0; }
    /* Ayraç: her rozetin solunda 1px gölge; ilk sütundakiler kesilir */
    .gvn-v3 .gvn-liste { column-gap: 0; row-gap: 6px; overflow: hidden; }
    .gvn-v3-oge { justify-content: center; padding: 10px 18px; box-shadow: -1px 0 0 0 rgba(127, 127, 127, 0.25); }
}

/* === 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: 14px;
}
/* Duyuru seridideki yazi olcegi Kayan Yazi (marquee) modulu ile ayni:
   taban 14px, 992px ve uzerinde 16px; metin normal (400), link 600.
   Mobile-first yazilmistir. */
@media (min-width: 992px) {
    .wvh5-top-bar {
        font-size: 16px;
    }
}
.wvh5-top-bar a {
    color: var(--wvh5-topbar-fg, #ffffff);
    text-decoration: underline;
    font-weight: 600;
}
.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 {
    min-height: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
@media (min-width: 992px) {
    /* Buyuyen yazi olcegine gore serit yuksekligi: harf altlari kirpilmasin */
    .wvh5-announcement-wrapper {
        min-height: 28px;
    }
}
.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;
}
/* Ayrac Duyurular sayfasindan secilir (--wvh5-ann-sep, sabit listeden);
   ayar yoksa nokta. "Ayracsiz" secilince yalniz bosluk kalir. */
.wvh5-ann-piece::after {
    content: var(--wvh5-ann-sep, "\2022");
    margin: 0 28px;
    opacity: 0.5;
}
/* Baglantili duyuru: tamami tiklanir; metin duz kalir, yalniz istege bagli
   ek yazi (link metni) eski link gibi alti cizili ve kalin gorunur */
.wvh5-top-bar a.wvh5-ann-link {
    text-decoration: none;
    font-weight: inherit;
}
.wvh5-top-bar a.wvh5-ann-link:hover { text-decoration: underline; }
.wvh5-ann-link-yazi {
    text-decoration: underline;
    font-weight: 600;
}
/* Duyuru ikonu (istege bagli): yazi rengini alir (tema genel ikon rengini ezer) */
.wvh5-top-bar .wvh5-ann-icon {
    margin-right: 8px;
    color: inherit;
}
@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);
}
/* Hap zemini header rengindedir: yazı ve yer tutucu da header yazı rengini izler
   (koyu header'da varsayılan koyu yazı okunmuyordu; açık header'da görünüm değişmez) */
.wvh5-navbar.navbar.wvh5--bar-pill .wvh5-inline-search-input {
    color: var(--wvh5-fg, #1f2b3e);
}
.wvh5-navbar.navbar.wvh5--bar-pill .wvh5-inline-search-input::placeholder {
    color: color-mix(in srgb, var(--wvh5-fg, #1f2b3e) 70%, 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);
}
/* Dugme etiketi yazidir (satirin yazi rengini izler); hamburger ikonu ise diger
   header ikonlari gibi "Ikon Rengi"ni izler. Tema kalkani (.wvh5-navbar button i
   {color:inherit}) ikonu yazi rengine bagladigi icin ozgulluk .wvh5-navbar ile kurulur. */
.wvh5-navbar .wvh5-catalog-btn i {
    color: var(--wvh5-icon, inherit);
}
/* 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;
}
/* Mobil menu bas seridi (logo + kapat) header'in kendi zemin/yazi rengini alir.
   Liste yukaridaki sabit acik renklerde kalir; yalniz serit header'i izler, boylece
   koyu header + beyaz logo kullanan tenantlarda logo beyaz zeminde kaybolmaz.
   Degerler :root'ta cozulup miras alinir: #wvh5-mobileMenu --wvh5-fg'yi ezdigi icin
   serit dogrudan --wvh5-fg okuyamaz. Acik header'da gorunum degismez. */
:root {
    --wvh5-mm-head-bg: var(--wvh5-bg, #ffffff);
    --wvh5-mm-head-fg: var(--wvh5-fg, #1f2b3e);
}
/* Koyu sema hazir paleti nav'a uygulanir; offcanvas nav'in disinda oldugu icin ayni degerler burada verilir */
.wvh5-mm--scheme-dark {
    --wvh5-mm-head-bg: #111827;
    --wvh5-mm-head-fg: #f3f4f6;
}
#wvh5-mobileMenu .wvh5-mm-head {
    background-color: var(--wvh5-mm-head-bg);
    color: var(--wvh5-mm-head-fg);
}
/* Kapat dugmesi seridin yazi renginde cizilir (Bootstrap'in sabit siyah gorseli yerine maske) */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    #wvh5-mobileMenu .wvh5-mm-head .btn-close {
        background: currentColor;
        color: var(--wvh5-mm-head-fg);
        -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
        mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
    }
}
.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 rengi Renkler > Header > "Ikon Rengi"nden gelir (deger yoksa miras).
   Iki sinifli secici bilinclidir: ogeye baglanti verildiginde kok <a> olur ve
   tema kalkanindaki ".wvh5-navbar a i { color: inherit }" (0,1,2) tek sinifli
   kurali ezip ikonu yazi rengine boyuyordu. */
.wvh5-navbar .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). Renk yazi rengidir;
   one cikmasi kalinliktan gelir ("Vurgu Rengi" panelde telefonu kapsamaz). */
.wvh5-extra-phone {
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--wvh5-fg, 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-fg, 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;
}
/* Alt satira konan ek oge (telefon + yazi), menu linkleri gibi
   "Alt Satir > Yazi Rengi"ni izler (deger yoksa header yazi rengine duser). */
.wvh5-row2 .wvh5-extra-phone,
.wvh5-row2 a.wvh5-extra-phone,
.wvh5-row2 a.wvh5-extra-phone:hover,
.wvh5-row2 a.wvh5-extra-phone:focus,
.wvh5-row2 .wvh5-extra-note,
.wvh5-row2 a.wvh5-extra-note,
.wvh5-row2 a.wvh5-extra-note:hover,
.wvh5-row2 a.wvh5-extra-note:focus {
    color: var(--wvh5-row2-fg, var(--wvh5-fg, inherit));
}

.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;
    }
    /* Katalog dugmesi 1. satirin solundaysa (catalog: r1-left) acilan panel bu hucrenin
       disina tasar; mobil icin konan overflow:hidden paneli kirpiyordu. Dugme yalniz
       masaustunde gorundugu icin kirpma yalniz burada ve yalniz katalog varken kalkar. */
    .wvh5-cell-start:has(.wvh5-catalog) {
        overflow: visible;
    }

    .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;
    }
    /* Etiketler ikon degil yazidir: "Yazi Rengi"ni izler (Renkler aciklamasindaki
       sozlesme). Dugme ikon rengini tasidigi icin etiket ona miras kalmamali;
       alt satirdayken "Alt Satir > Yazi Rengi" gecerlidir. */
    .wvh5-header-icons .wvh5-icon-label {
        color: var(--wvh5-fg, inherit);
    }
    .wvh5-row2 .wvh5-header-icons .wvh5-icon-label {
        color: var(--wvh5-row2-fg, var(--wvh5-fg, inherit));
    }
    .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: #fbf8f1;
    --wvh5-fg: #2f3a1c;
    --wvh5-icon: #2f3a1c;
    --wvh5-accent: #b58a2f;
    --wvh5-accent-fg: #ffffff;
    --wvh5-border: #e6dfcc;
    --wvh5-nav-weight: 600;
}
:root {
    --wvh5-row2-bg: #fbf8f1;
    --wvh5-row2-fg: #2f3a1c;
}
:root {
    --wvh5-panel-bg: #ffffff;
    --wvh5-panel-fg: #23261a;
}
:root {
    --wvh5-topbar-bg: #2f3a1c;
    --wvh5-topbar-fg: #efe6c8;
}

/* === assets/frontend/css/header/header_5_panel.css === */
/* ============================================================
   Header 5 — Açılır menü PANEL GÖRÜNÜMLERİ (Mega / Mega Resimli grupları)
   Yalnız panel ayarı kaydedilmiş gruplarda kullanılan .wvh5-panel* / .wvh5p-* sınıfları.
   Masaüstü paneli 992px ve üstünde açılır (alt genişliklerde menü hamburger paneline geçer);
   mobil menüdeki küçük görsel (.wvh5-mm-thumb) her genişlikte geçerlidir.
   Renkler header token'larından gelir (--wvh5-panel-bg/fg, --wvh5-accent, --wvh5-border).
   ============================================================ */

/* ---- Mobil menü: alt öğe küçük görselleri (grup ayarı "mobil görseller") ---- */
.wvh5-mm-thumb {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 10px;
    background: var(--wv-gray-100, #f3f3f3);
}
.wvh5-mobile-sub-menu--thumbs > li > a,
.wvh5-dd-link--thumb {
    display: flex;
    align-items: center;
}
.wvh5-mobile-sub-menu--thumbs > li > a .fa-chevron-right {
    margin-left: auto;
}

@media (min-width: 992px) {

    /* ---- Ortak panel ---- */
    .wvh5-navbar .dropdown-menu.wvh5-panel {
        padding: 28px 0 30px;
        /* Çok öğeli panel ekranın altına taşmasın: header altında kalan yükseklikle sınırlanır */
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overscroll-behavior: contain;
        color: var(--wvh5-panel-fg, #1f2b3e);
        background: var(--wvh5-panel-bg, #fff);
    }
    .wvh5-panel a {
        color: inherit;
        text-decoration: none;
    }
    .wvh5-panel a:hover,
    .wvh5-panel a:focus-visible {
        color: var(--wvh5-accent, #1f2b3e);
    }
    .wvh5-panel a:focus-visible {
        outline: 2px solid var(--wvh5-accent, #1f2b3e);
        outline-offset: 2px;
    }

    /* Açılış animasyonu (panel görünür olduğunda bir kez oynar) */
    .wvh5-panel--anim-fade { animation: wvh5pFade 0.22s ease both; }
    .wvh5-panel--anim-slide { animation: wvh5pSlide 0.26s cubic-bezier(.2, .7, .2, 1) both; }
    @keyframes wvh5pFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes wvh5pSlide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) {
        .wvh5-panel--anim-fade,
        .wvh5-panel--anim-slide { animation: none; }
    }

    /* Mega menü header'ın alt kenarından açılır (header_5.js hizalar); bağlantı ile panel arasındaki
       boşluğa görünmez köprü konur, fare aşağı inerken menü kapanmaz */
    .wvh5-navbar .nav-item.wvh5-mm-gapped > .nav-link { position: relative; }
    .wvh5-navbar .nav-item.wvh5-mm-gapped > .nav-link::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: var(--wvh5-mm-gap, 0px);
    }

    /* İçerik kadar genişlik: panel menü başlığının altında açılır, ekran dışına taşarsa JS kaydırır */
    .wvh5-navbar .nav-item.wvh5-panel-host--auto { position: relative; }
    .wvh5-navbar .dropdown-menu.wvh5-panel--w-auto {
        width: max-content;
        min-width: 420px;
        max-width: min(1100px, 94vw);
        left: 0;
        right: auto;
        border: 1px solid var(--wvh5-border, #eee);
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    }
    .wvh5-panel--w-auto > .container {
        width: auto;
        max-width: none;
        padding: 0 28px;
    }
    /* Kesirli sütunların içerik genişliği sıfıra iner; içerik kadar genişlikte her düzene taban genişlik verilir */
    .wvh5-panel--w-auto .wvh5p-cols { min-width: min(calc(var(--wvh5p-cols, 4) * 170px), calc(94vw - 58px)); }
    .wvh5-panel--w-auto .wvh5p-strip { min-width: min(calc(var(--wvh5p-cols, 6) * 120px), calc(94vw - 58px)); }
    .wvh5-panel--w-auto .wvh5p-cards { min-width: min(calc(var(--wvh5p-cols, 5) * 170px), calc(94vw - 58px)); }
    .wvh5-panel--w-auto .wvh5p-bento { min-width: min(780px, calc(94vw - 58px)); }
    /* Sekmeli düzende geniş görsel paneli büyütmesin: sabit genişlik */
    .wvh5-panel--w-auto .wvh5p-tabs { width: min(860px, calc(94vw - 58px)); }
    .wvh5-panel--w-auto .wvh5p-shop { min-width: min(940px, calc(94vw - 58px)); }
    .wvh5-panel--w-auto .wvh5p-type { min-width: min(620px, calc(94vw - 58px)); }

    /* Üst satır: grup adı + Tümünü gör */
    .wvh5p-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
    }
    .wvh5p-head-title {
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.7;
    }
    .wvh5p-all {
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
    }
    .wvh5p-all .fa-arrow-right {
        font-size: 0.75em;
        margin-left: 4px;
        transition: transform 0.2s;
    }
    .wvh5p-all:hover .fa-arrow-right { transform: translateX(3px); }
    .wvh5p-foot {
        margin-top: 18px;
        text-align: center;
    }

    /* Görsel kutuları ve oranları */
    .wvh5p-img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .wvh5p-img--empty {
        background: var(--wv-gray-100, #f2f2f2);
    }
    .wvh5-panel--r-square .wvh5p-card-media,
    .wvh5-panel--r-circle .wvh5p-card-media,
    .wvh5-panel--r-square .wvh5p-strip-item .wvh5p-img,
    .wvh5-panel--r-circle .wvh5p-strip-item .wvh5p-img,
    .wvh5-panel--r-square .wvh5p-pane-media,
    .wvh5-panel--r-circle .wvh5p-pane-media,
    .wvh5-panel--r-square .wvh5p-product-media,
    .wvh5-panel--r-circle .wvh5p-product-media { aspect-ratio: 1 / 1; }
    .wvh5-panel--r-portrait .wvh5p-card-media,
    .wvh5-panel--r-portrait .wvh5p-strip-item .wvh5p-img,
    .wvh5-panel--r-portrait .wvh5p-pane-media,
    .wvh5-panel--r-portrait .wvh5p-product-media { aspect-ratio: 4 / 5; }
    .wvh5-panel--r-circle .wvh5p-card-media,
    .wvh5-panel--r-circle .wvh5p-strip-item .wvh5p-img,
    .wvh5-panel--r-circle .wvh5p-pane-media { border-radius: 50%; }

    /* ---- 1 ve 4: metin sütunları ---- */
    .wvh5p-cols {
        display: grid;
        grid-template-columns: repeat(var(--wvh5p-cols, 4), minmax(0, 1fr));
        gap: 26px 32px;
    }
    .wvh5-panel--divider .wvh5p-col + .wvh5p-col {
        border-left: 1px solid var(--wvh5-border, #eee);
        padding-left: 32px;
    }
    .wvh5-panel--divider .wvh5p-cols > .wvh5p-col.is-row-start {
        border-left: 0;
        padding-left: 0;
    }
    /* Alt başlıksız menü: sütunlara yukarıdan aşağı dağılan sade liste */
    .wvh5p-cols--flat {
        display: block;
        columns: var(--wvh5p-cols, 4);
        column-gap: 32px;
    }
    .wvh5p-cols--flat .wvh5p-col {
        break-inside: avoid;
        border-left: 0 !important;
        padding-left: 0 !important;
    }
    .wvh5p-cols--flat .wvh5p-col-title {
        font-weight: 500;
        margin-bottom: 0;
        padding: 7px 0;
    }
    .wvh5-panel--divider .wvh5p-cols--flat { column-rule: 1px solid var(--wvh5-border, #eee); }
    .wvh5p-col-title {
        display: block;
        font-weight: 700;
        font-size: 0.95rem;
        margin-bottom: 10px;
    }
    .wvh5p-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .wvh5p-list a {
        display: block;
        padding: 5px 0;
        font-size: 0.9rem;
        opacity: 0.85;
    }
    .wvh5p-list a:hover { opacity: 1; }

    /* ---- 2: daire şerit ---- */
    /* Satır, sütun sayısından az öğe içeriyorsa ortalanır (sola dayalı boşluk kalmaz) */
    .wvh5p-strip {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 22px 18px;
    }
    .wvh5p-strip-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        flex: 0 0 calc((100% - (var(--wvh5p-cols, 6) - 1) * 18px) / var(--wvh5p-cols, 6));
        min-width: 0;
        text-align: center;
        font-size: 0.9rem;
    }
    .wvh5p-strip-item .wvh5p-img {
        width: 84px;
        max-width: 100%;
        border-radius: 12px;
        transition: transform 0.25s;
    }
    .wvh5p-strip-item:hover .wvh5p-img { transform: translateY(-3px); }
    /* Satır ayracı: ikinci ve sonraki satırların üstünde ince çizgi (öğe tam hücre genişliğinde) */
    .wvh5-panel--divider .wvh5p-strip { row-gap: 0; }
    .wvh5-panel--divider .wvh5p-strip-item { padding: 14px 0; }
    .wvh5-panel--divider .wvh5p-strip-item:not(.is-first-row) { border-top: 1px solid var(--wvh5-border, #eee); }

    /* ---- 3: kart ızgarası ---- */
    .wvh5p-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    .wvh5p-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 0 0 calc((100% - (var(--wvh5p-cols, 5) - 1) * 20px) / var(--wvh5p-cols, 5));
        min-width: 0;
    }
    .wvh5p-card-media {
        display: block;
        overflow: hidden;
        border-radius: 12px;
        background: var(--wv-gray-100, #f3f3f3);
    }
    .wvh5p-card-media .wvh5p-img {
        width: 100%;
        height: 100%;
        transition: transform 0.45s ease;
    }
    .wvh5p-card:hover .wvh5p-card-media .wvh5p-img { transform: scale(1.05); }
    .wvh5p-card-name {
        font-weight: 600;
        font-size: 0.92rem;
    }

    /* ---- 4: sütunlar + kampanya ---- */
    .wvh5p-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(240px, 26%, 340px);
        gap: 36px;
        align-items: stretch;
    }
    .wvh5p-split--solo { grid-template-columns: minmax(0, 1fr); }
    .wvh5p-banner {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 14px;
        min-height: 280px;
        background: var(--wv-gray-100, #f3f3f3);
    }
    .wvh5p-banner-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
    .wvh5p-banner:hover .wvh5p-banner-img { transform: scale(1.04); }
    .wvh5p-banner-body {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 60px 22px 22px;
        color: #fff;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
    }
    .wvh5-panel .wvh5p-banner:hover { color: #fff; }
    .wvh5p-banner-title {
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .wvh5p-banner-text {
        font-size: 0.88rem;
        opacity: 0.9;
    }
    .wvh5p-banner-btn {
        align-self: flex-start;
        margin-top: 8px;
        padding: 8px 16px;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--wvh5-accent-fg, #fff);
        background: var(--wvh5-accent, #1f2b3e);
    }

    /* ---- 5: sol sekmeli ---- */
    .wvh5p-tabs {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 32px;
        min-height: 300px;
    }
    .wvh5p-tabs-nav {
        list-style: none;
        margin: 0;
        padding: 0 20px 0 0;
        border-right: 1px solid var(--wvh5-border, #eee);
    }
    .wvh5p-tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 0.93rem;
        font-weight: 500;
    }
    .wvh5p-tab .fa-chevron-right {
        font-size: 0.7em;
        opacity: 0.4;
    }
    .wvh5p-tab.is-active {
        font-weight: 700;
        background: var(--wvh5-hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--wvh5-accent, #1f2b3e);
    }
    .wvh5p-tab.is-active .fa-chevron-right { opacity: 1; }
    .wvh5p-pane { display: none; }
    .wvh5p-pane.is-active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(180px, 24%, 280px);
        gap: 32px;
        animation: wvh5pFade 0.2s ease both;
    }
    .wvh5p-pane-links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(var(--wvh5p-cols, 3), minmax(0, 1fr));
        gap: 4px 28px;
    }
    .wvh5p-pane-links a {
        display: block;
        padding: 6px 0;
        font-size: 0.92rem;
    }
    .wvh5p-pane-media {
        display: block;
        align-self: start;
        overflow: hidden;
        border-radius: 12px;
    }
    .wvh5p-pane-media .wvh5p-img { height: 100%; }
    /* Alt başlıksız öğe: görsel başlığın altında geniş şerit olarak durur */
    .wvh5p-pane.wvh5p-pane--bare.is-active {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        align-content: start;
    }
    .wvh5-panel .wvh5p-pane--bare .wvh5p-pane-media {
        aspect-ratio: 3 / 1;
        border-radius: 12px;
    }
    .wvh5p-pane--bare .wvh5p-pane-media .wvh5p-img { object-position: 50% 30%; }

    /* ---- 6: ürünlü panel ---- */
    .wvh5p-shop {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 36px;
    }
    .wvh5p-shop-links {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .wvh5p-shop-links a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
        font-size: 0.92rem;
        font-weight: 500;
    }
    /* Üzerine gelinen alt öğe vurgulanır; sağda yalnız etkin ürün bölmesi görünür */
    .wvh5p-shop-links a.is-active {
        font-weight: 700;
        color: var(--wvh5-accent, #1f2b3e);
    }
    .wvh5p-shop-pane { display: none; }
    .wvh5p-shop-pane.is-active {
        display: block;
        animation: wvh5pFade 0.2s ease both;
    }
    .wvh5p-shop-thumb {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 8px;
    }
    .wvh5p-shop-grid {
        display: grid;
        grid-template-columns: repeat(var(--wvh5p-pcols, 4), minmax(0, 220px));
        gap: 20px;
        justify-content: start;
    }
    .wvh5p-product {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
    }
    .wvh5p-product-media {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 12px;
        background: var(--wv-gray-100, #f3f3f3);
    }
    .wvh5p-product-media .wvh5p-img {
        height: 100%;
        transition: transform 0.45s ease;
    }
    .wvh5p-product:hover .wvh5p-product-media .wvh5p-img { transform: scale(1.05); }
    .wvh5p-product-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--wvh5-accent-fg, #fff);
        background: var(--wvh5-accent, #1f2b3e);
    }
    .wvh5p-product-name {
        font-size: 0.88rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .wvh5p-product-price { font-size: 0.9rem; }
    .wvh5p-product-price del {
        opacity: 0.55;
        margin-right: 4px;
        font-size: 0.82rem;
    }

    /* ---- 7: kolaj ---- */
    .wvh5p-bento {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        grid-template-rows: repeat(2, minmax(150px, 1fr));
        gap: 14px;
        height: clamp(320px, 34vw, 420px);
    }
    .wvh5p-bento--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .wvh5p-bento--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
    /* 3 öğe: büyük karo yerine eşit, daha alçak karolar (ürün görselleri kırpılıp bozulmasın) */
    .wvh5p-bento--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 1fr;
        height: clamp(280px, 26vw, 360px);
    }
    .wvh5p-bento--4 { grid-template-columns: 1.4fr 1fr 1fr; }
    .wvh5p-tile {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 14px;
        background: var(--wv-gray-100, #f3f3f3);
    }
    .wvh5p-bento:not(.wvh5p-bento--1):not(.wvh5p-bento--2):not(.wvh5p-bento--3) .wvh5p-tile--big { grid-row: span 2; }
    .wvh5p-bento--3 .wvh5p-tile--big .wvh5p-tile-name { font-size: 1rem; padding: 40px 16px 14px; }
    .wvh5p-bento--4 .wvh5p-tile:last-child { grid-column: span 2; }
    .wvh5p-tile .wvh5p-img {
        position: absolute;
        inset: 0;
        height: 100%;
        transition: transform 0.6s ease;
    }
    .wvh5p-tile:hover .wvh5p-img { transform: scale(1.05); }
    .wvh5p-tile-name {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 40px 16px 14px;
        font-weight: 700;
        color: #fff;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    }
    .wvh5p-tile--big .wvh5p-tile-name {
        font-size: 1.25rem;
        padding: 60px 22px 20px;
    }
    .wvh5-panel .wvh5p-tile:hover { color: #fff; }
    .wvh5p-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
    }
    .wvh5p-chip {
        padding: 8px 14px;
        border: 1px solid var(--wvh5-border, #e5e5e5);
        border-radius: 999px;
        font-size: 0.85rem;
    }
    .wvh5p-chip:hover { border-color: var(--wvh5-accent, #1f2b3e); }

    /* ---- 8: minimal tipografik ---- */
    .wvh5p-type {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(220px, 28%, 340px);
        gap: 48px;
        align-items: start;
    }
    .wvh5p-type--solo { grid-template-columns: minmax(0, 1fr); }
    .wvh5p-type-links {
        list-style: none;
        margin: 0 0 20px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(var(--wvh5p-cols, 2), minmax(0, 1fr));
        gap: 14px 40px;
    }
    .wvh5p-type-link {
        display: inline-block;
        font-size: clamp(1.35rem, 1.9vw, 1.9rem);
        font-weight: 300;
        line-height: 1.15;
        letter-spacing: -0.01em;
        background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
        transition: background-size 0.3s ease;
    }
    .wvh5p-type-link:hover { background-size: 100% 1px; }
    .wvh5p-type-sub {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
        margin-top: 6px;
        font-size: 0.82rem;
        opacity: 0.7;
    }
    .wvh5p-type-media {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 4px;
        aspect-ratio: 4 / 5;
    }
    .wvh5p-type-media .wvh5p-img { height: 100%; }
    .wvh5p-type-caption {
        position: absolute;
        left: 16px;
        bottom: 14px;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 600;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
        z-index: 1;
    }
    .wvh5p-type-caption:empty { display: none; }
    .wvh5p-type-media .wvh5p-img { transition: opacity 0.2s; }
    /* Açık renkli görselde yazı okunsun: başlığın arkasına alttan koyulaşan geçiş */
    .wvh5p-type-media--caption::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
        pointer-events: none;
    }
}

/* Dar masaüstü (992-1199px): yan sütunlar daralır, görsel sütunlar biraz küçülür */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .wvh5p-tabs { grid-template-columns: 210px minmax(0, 1fr); gap: 22px; }
    .wvh5p-shop { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
    .wvh5p-pane.is-active { grid-template-columns: minmax(0, 1fr) 170px; gap: 22px; }
    .wvh5p-cards { gap: 14px; }
}

/* ============================================================
   ALT MENÜ GÖRÜNÜMLERİ ("Alt Menü" grupları, .wvh5s / .wvh5s-*)
   Menü başlığının altında açılan dar kutu. Ayarı olmayan grup Klasik görünümün bugünkü
   stiliyle kalır (header_5_base.css .wvh5-submenu); buradaki kurallar yalnız ayarlı kutularda
   (.wvh5s) ve kenar taşma düzeltmesinde (.is-flip / .wvh5s-end) geçerlidir.
   ============================================================ */
@media (min-width: 992px) {
    /* Ekranın sağ kenarına taşan kutu ve yana açılan liste ters yöne açılır (header_5.js ekler) */
    .wvh5-navbar .wvh5-submenu.wvh5s-end { left: auto; right: 0; }
    .wvh5-submenu-parent.is-flip > .wvh5-submenu-child { left: auto; right: 100%; }
    .wvh5-submenu-parent.is-flip > .dropdown-item > .fa-chevron-right { transform: scaleX(-1); }

    .wvh5-navbar .wvh5-submenu.wvh5s {
        color: var(--wvh5-panel-fg, #1f2b3e);
        background: var(--wvh5-panel-bg, #fff);
        border-radius: 10px;
    }
    .wvh5s a { color: inherit; text-decoration: none; }
    .wvh5s a:hover,
    .wvh5s a:focus-visible { color: var(--wvh5-accent, #1f2b3e); }
    .wvh5s a:focus-visible,
    .wvh5s button:focus-visible { outline: 2px solid var(--wvh5-accent, #1f2b3e); outline-offset: -2px; }

    /* Kutu altı "Tümünü gör" */
    .wvh5s-all {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--wvh5-border, #eee);
        font-size: 0.82rem;
        font-weight: 600;
    }
    .wvh5s-all .fa-arrow-right { font-size: 0.7rem; }

    /* ---- 2 / 3: görselli ve ikonlu liste ---- */
    .wvh5s-list { list-style: none; margin: 0; padding: 0; }
    .wvh5-navbar .wvh5-submenu.wvh5s .wvh5s-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 7px 14px;
        font-size: 0.88rem;
        line-height: 1.3;
        white-space: normal;
        color: inherit;
    }
    .wvh5s-name { flex: 1 1 auto; min-width: 0; }
    .wvh5s-arrow { flex: 0 0 auto; font-size: 0.6rem; opacity: 0.5; }

    .wvh5-navbar .wvh5-submenu.wvh5s--v2 { width: 260px; }
    .wvh5s-thumb {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        background: var(--wv-gray-100, #f2f2f2);
        transition: transform 0.2s;
    }
    .wvh5s-list--square .wvh5s-thumb { border-radius: 8px; }
    .wvh5s-thumb--empty {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--wv-gray-500, #6b7280);
    }
    .wvh5s-link:hover .wvh5s-thumb { transform: scale(1.06); }

    .wvh5-navbar .wvh5-submenu.wvh5s--v3 { width: 250px; padding: 8px; }
    .wvh5-navbar .wvh5-submenu.wvh5s--v3 .wvh5s-link {
        padding: 6px 10px;
        border-radius: 8px;
        transition: background-color 0.15s, box-shadow 0.15s;
    }
    .wvh5-navbar .wvh5-submenu.wvh5s--v3 .wvh5s-link:hover {
        background: var(--wvh5-hover-bg, #f5f5f5);
        box-shadow: inset 3px 0 0 var(--wvh5-accent, #1f2b3e);
    }
    .wvh5s-ic {
        flex: 0 0 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--wvh5-accent, #1f2b3e);
        background: var(--wvh5-hover-bg, #f3f4f6);
    }
    .wvh5s--v3 .wvh5-submenu-child { top: -8px; }

    /* ---- 4: iki sütun ---- */
    .wvh5-navbar .wvh5-submenu.wvh5s--v4 {
        width: max-content;
        min-width: 300px;
        max-width: min(560px, 94vw);
        padding: 18px 22px;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .wvh5s-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(180px, 1fr));
        gap: 16px 32px;
    }
    .wvh5s-grid--one { grid-template-columns: minmax(180px, 1fr); }
    .wvh5s-cell-title { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
    .wvh5s-kids { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.84rem; }
    .wvh5s-kids li a { display: block; padding: 3px 0; opacity: 0.75; transition: opacity 0.15s; }
    .wvh5s-kids li a:hover { opacity: 1; }
    .wvh5s-kids--sub { margin: 0 0 2px; padding-left: 12px; font-size: 0.8rem; }

    /* ---- 5: liste + vitrin görseli ---- */
    .wvh5-navbar .wvh5-submenu.wvh5s--v5 {
        width: max-content;
        min-width: 280px;
        max-width: min(560px, 94vw);
        padding: 18px;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .wvh5s-show {
        display: grid;
        grid-template-columns: minmax(200px, 1fr) 200px;
        gap: 22px;
        align-items: start;
    }
    .wvh5s-show--solo { grid-template-columns: minmax(240px, 1fr); }
    .wvh5s-show-list { list-style: none; margin: 0; padding: 0; }
    .wvh5s-show-list > li + li { margin-top: 10px; }
    .wvh5s-show-link { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
    .wvh5s-show-sub {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 10px;
        margin-top: 3px;
        font-size: 0.8rem;
    }
    .wvh5s-show-sub a { opacity: 0.7; }
    .wvh5s-show-sub a:hover { opacity: 1; }
    .wvh5s-show .wvh5s-show-media {
        width: 200px;
        border: 1px solid var(--wvh5-border, #eee);
        border-radius: 8px;
        background: var(--wv-gray-100, #f2f2f2);
    }

    /* ---- 6: iç içe açılan ---- */
    .wvh5-navbar .wvh5-submenu.wvh5s--v6 {
        width: 260px;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .wvh5s-acc { list-style: none; margin: 0; padding: 0; }
    .wvh5s-acc-head { display: flex; align-items: center; }
    .wvh5s-acc-link {
        flex: 1 1 auto;
        min-width: 0;
        padding: 8px 4px 8px 16px;
        font-size: 0.88rem;
        line-height: 1.3;
    }
    .wvh5s-acc-btn {
        flex: 0 0 36px;
        width: 36px;
        height: 34px;
        margin-right: 6px;
        border: 0;
        border-radius: 6px;
        color: inherit;
        background: transparent;
        cursor: pointer;
    }
    .wvh5s-acc-btn:hover { background: var(--wvh5-hover-bg, #f5f5f5); }
    .wvh5s-acc-btn .fa-chevron-down { font-size: 0.65rem; opacity: 0.6; transition: transform 0.2s; }
    .wvh5s-acc-row.is-open > .wvh5s-acc-head .fa-chevron-down { transform: rotate(180deg); }
    .wvh5s-acc--sub { display: none; padding-bottom: 4px; background: var(--wvh5-hover-bg, #f7f7f7); }
    .wvh5s-acc-row.is-open > .wvh5s-acc--sub { display: block; }
    .wvh5s-acc--sub .wvh5s-acc-link { padding-left: 28px; font-size: 0.84rem; }
    .wvh5s-acc--sub .wvh5s-acc--sub .wvh5s-acc-link { padding-left: 40px; }
    .wvh5s--v6 .wvh5s-all { margin: 8px 16px 4px; }
}

/* ============================================================
   MOBİL MENÜ GÖRÜNÜMLERİ (header 5 hamburger paneli; 992px altında)
   Kart ızgarası katmanlı menünün (.wvh5-dd) kök panelini değiştirir; sekmeli, yan sütunlu ve
   tam ekran görünümleri .wvh5-mx kökünü kullanır. Renk rolleri #wvh5-mobileMenu'de sabittir
   (header_5_base.css); vurgu için site paleti (--wv-primary) kullanılır.
   ============================================================ */

/* ---- Kart ızgarası ---- */
/* Kart: üstte kapak görseli, altta başlık (ürün fotoğrafı beyaz zeminli olsa da kart sınırı belli olur) */
.wvh5-mt-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 0 8px;
}
.wvh5-mt-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: 1px solid var(--wvh5-border, #e8e8e8);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bs-offcanvas-bg, #fff);
    text-align: left;
}
.wvh5-mt-tile-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--wvh5-panel-alt-bg, #f7f8fa);
}
.wvh5-mt-tile-img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 300;
    color: var(--wvh5-muted, #9aa0a6);
}
.wvh5-mt-tile-name {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border-top: 1px solid var(--wvh5-border-soft, #f1f1f1);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
}
.wvh5-mt-tile:focus-visible { outline: 2px solid var(--wv-primary, #1f2b3e); outline-offset: 2px; }

/* ---- Ortak kök ---- */
.wvh5-mx.offcanvas-start {
    width: 100%;
    max-width: 420px;
}
.wvh5-mx .offcanvas-body { padding: 0; }
.wvh5-mx-all {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.wvh5-mx-all .fa-arrow-right { font-size: 0.7rem; }
.wvh5-mx summary { list-style: none; cursor: pointer; }
.wvh5-mx summary::-webkit-details-marker { display: none; }

/* ---- Sekmeli ---- */
.wvh5-mx-tabbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 16px;
    background: var(--bs-offcanvas-bg, #fff);
    border-bottom: 1px solid var(--wvh5-border, #e8e8e8);
    scrollbar-width: none;
}
.wvh5-mx-tabbar::-webkit-scrollbar { display: none; }
.wvh5-mx-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--wvh5-border, #e8e8e8);
    border-radius: 999px;
    background: none;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}
.wvh5-mx-tab--link { border-color: transparent; font-weight: 500; }
#wvh5-mobileMenu .wvh5-mx-tab[aria-selected="true"] {
    color: #fff;
    background: var(--wv-primary, #1f2b3e);
    border-color: var(--wv-primary, #1f2b3e);
}
.wvh5-mx--tabs .wvh5-mx-pane { padding: 4px 16px 24px; }
.wvh5-mx--tabs .wvh5-mx-all { border-bottom: 1px solid var(--wvh5-border-soft, #f1f1f1); }
.wvh5-mx-row {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 0;
    border-bottom: 1px solid var(--wvh5-border-soft, #f1f1f1);
    font-size: 1rem;
    text-decoration: none;
}
.wvh5-mx-row-name { flex: 1 1 auto; min-width: 0; }
#wvh5-mobileMenu .wvh5-mx-row .fa-chevron-down {
    flex: 0 0 auto;
    padding-left: 10px;
    font-size: 0.72rem;
    color: var(--wvh5-muted, #9aa0a6);
    transition: transform 0.2s;
}
.wvh5-mx-acc[open] > .wvh5-mx-row .fa-chevron-down { transform: rotate(180deg); }
.wvh5-mx-kids {
    list-style: none;
    margin: 0;
    padding: 4px 0 8px 14px;
    border-bottom: 1px solid var(--wvh5-border-soft, #f1f1f1);
}
.wvh5-mx-kids a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.95rem;
    text-decoration: none;
}
.wvh5-mx-kids-all { font-weight: 600; }

/* ---- Yan sütunlu ---- */
.wvh5-mx--split .offcanvas-body { display: flex; overflow: hidden; }
.wvh5-mx-split {
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    width: 100%;
    min-height: 0;
}
.wvh5-mx-split--solo { grid-template-columns: minmax(0, 1fr); }
.wvh5-mx-split--solo .wvh5-mx-main { display: none; }
.wvh5-mx-side {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--wvh5-panel-alt-bg, #f7f8fa);
}
.wvh5-mx-side-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 12px 10px 12px 12px;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.wvh5-mx-side-item--link { font-weight: 500; }
.wvh5-mx-side-item[aria-selected="true"] {
    background: var(--bs-offcanvas-bg, #fff);
    border-left-color: var(--wv-primary, #1f2b3e);
}
.wvh5-mx-main {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px 24px;
}
.wvh5-mx-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 10px;
    margin-bottom: 8px;
}
.wvh5-mx-main-title { font-size: 0.95rem; font-weight: 700; }
.wvh5-mx--split .wvh5-mx-all { font-size: 0.78rem; }
.wvh5-mx-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 8px;
    margin-bottom: 18px;
}
@media (min-width: 360px) {
    .wvh5-mx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wvh5-mx-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 0.74rem;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.wvh5-mx-media {
    width: 100%;
    max-width: 76px;
    height: auto;
    aspect-ratio: 1;
    border: 1px solid var(--wvh5-border, #e8e8e8);
    border-radius: 14px;
    object-fit: cover;
    background: var(--wvh5-panel-alt-bg, #f7f8fa);
}
.wvh5-mx-media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wvh5-muted, #9aa0a6);
}
.wvh5-mx-sec-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-bottom: 6px;
    border-top: 1px solid var(--wvh5-border-soft, #f1f1f1);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
#wvh5-mobileMenu .wvh5-mx-sec-title .fa-chevron-right { font-size: 0.6rem; color: var(--wvh5-muted, #9aa0a6); }

/* ---- Tam ekran ---- */
.wvh5-mx--full.offcanvas-start { max-width: none; }
.wvh5-mx--full .offcanvas-body { padding: 8px 24px 32px; }
.wvh5-mx-big { display: block; border-bottom: 1px solid var(--wvh5-border-soft, #f1f1f1); }
.wvh5-mx--full.showing .wvh5-mx-big,
.wvh5-mx--full.show .wvh5-mx-big {
    animation: wvh5MxIn 0.45s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--wvh5-mx-i, 1) * 45ms + 60ms);
}
@keyframes wvh5MxIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .wvh5-mx--full.showing .wvh5-mx-big,
    .wvh5-mx--full.show .wvh5-mx-big { animation: none; }
}
.wvh5-mx-big-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 14px 0;
    font-size: 1.55rem;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.wvh5-mx-plus {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}
.wvh5-mx-plus::before,
.wvh5-mx-plus::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1.5px;
    margin-top: -0.75px;
    background: currentColor;
    transition: transform 0.25s;
}
.wvh5-mx-plus::after { transform: rotate(90deg); }
.wvh5-mx-big[open] .wvh5-mx-plus::after { transform: rotate(0deg); }
.wvh5-mx-big-sub { padding: 0 0 18px; }
.wvh5-mx-big-sublink {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 1.05rem;
    text-decoration: none;
}
.wvh5-mx-big-kids {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
    margin: -6px 0 6px;
}
#wvh5-mobileMenu .wvh5-mx-big-kids a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.88rem;
    color: #6b7280;
    text-decoration: none;
}
.wvh5-mx--full .wvh5-mx-all { margin-top: 6px; }

/* === 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 --- */