Yükseklik doğrudan .wc-carousel'a verilir; slide'lar kutuyu doldurur.
Bu sayede slide geçişlerinde / loop clone'larında yükseklik sabit kalır.
============================================================ */
.wc-carousel-slider { --slider-ratio: 16 / 9; }
.wc-carousel-slider .wc-carousel {
width: 100%;
aspect-ratio: var(--slider-ratio);
overflow: hidden;
}
/* JS slide'ları .wc-track içine taşıyor → track de tam dolsun */
.wc-carousel-slider .wc-carousel .wc-track {
position: absolute !important;
inset: 0 !important;
width: 100%;
height: 100%;
}
/* Tüm slide'lar carousel'i tam doldursun (ilk slide dahil) — hero scope'unda da geçerli */
.wc-carousel-slider .wc-carousel .wc-slide,
.wc-carousel-slider .wc-carousel .wc-slide:first-child,
.hero-slider-wrap .wc-slide,
.hero-slider-wrap .wc-slide:first-child {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* Tüm slide görselleri kutuya cover + center ile otursun */
.wc-carousel-slider .wc-carousel .wc-slide img,
.hero-slider-wrap .wc-slide img,
.hero-slider-wrap .hero-slider-img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
}
/* ============================================================
Carousel kök
============================================================ */
.wc-carousel {
position: relative;
width: 100%;
border-radius: var(--wc-radius);
overflow: hidden;
background: transparent;
box-shadow: var(--wc-shadow);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.wc-carousel { cursor: grab; }
.wc-carousel.is-grabbing { cursor: grabbing; }
/* Yerel gorsel suruklemeyi kapat: swipe sirasinda resim "hayaleti" olusmasin */
.wc-carousel img {
-webkit-user-drag: none;
user-select: none;
pointer-events: none;
}
.wc-track {
position: relative;
width: 100%;
}
/* ---------- Slides ---------- */
.wc-slide {
position: absolute; inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform var(--wc-transition) var(--wc-ease),
opacity var(--wc-transition) var(--wc-ease);
will-change: transform, opacity;
}
.wc-slide__media {
position: relative;
width: 100%;
height: auto;
display: block;
transition: transform 8000ms var(--wc-ease);
}
.wc-slide__link {
position: absolute; inset: 0;
z-index: 2;
display: block;
text-decoration: none;
}
/* Aktif slide — track'e yüksekliği bu verir */
.wc-slide.is-active {
position: relative;
inset: auto;
opacity: 1; visibility: visible; pointer-events: auto;
}
/* ---------- Effect: SLIDE ---------- */
.wc-carousel[data-effect="slide"] .wc-slide { transform: translateX(100%); opacity: 1; visibility: visible; }
.wc-carousel[data-effect="slide"] .wc-slide.is-prev { transform: translateX(-100%); opacity: 1; visibility: visible; pointer-events: none; }
.wc-carousel[data-effect="slide"] .wc-slide.is-active { transform: translateX(0); opacity: 1; visibility: visible; }
/* ---------- Effect: FADE ---------- */
.wc-carousel[data-effect="fade"] .wc-slide { transform: none; }
.wc-carousel[data-effect="fade"] .wc-slide.is-active { opacity: 1; }
/* ---------- Effect: SCALE (Ken Burns + fade) ---------- */
.wc-carousel[data-effect="scale"] .wc-slide { transform: scale(1.06); }
.wc-carousel[data-effect="scale"] .wc-slide.is-active { transform: scale(1); }
.wc-carousel[data-effect="scale"] .wc-slide.is-active .wc-slide__media { transform: scale(1.08); }
/* ============================================================
Kontroller
============================================================ */
.wc-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
/* Responsive: 28px (mobil) ↔ 48px (desktop) — slider genişliğine göre akıcı */
width: clamp(28px, 4.5vw, 48px);
height: clamp(28px, 4.5vw, 48px);
border-radius: 999px;
background: var(--wc-control-bg);
color: var(--wc-control-fg);
border: none;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 5;
box-shadow: 0 6px 20px -6px rgba(0,0,0,0.35);
transition: background .2s, transform .2s, opacity .2s;
backdrop-filter: blur(6px);
}
.wc-arrow:hover { background: var(--wv-white, #fff); transform: translateY(-50%) scale(1.06); }
.wc-arrow:active { transform: translateY(-50%) scale(0.96); }
.wc-arrow:focus-visible { outline: 2px solid var(--wc-primary); outline-offset: 3px; }
.wc-arrow.wc-arrow--prev { left: clamp(6px, 1.5vw, 18px); }
.wc-arrow.wc-arrow--next { right: clamp(6px, 1.5vw, 18px); }
.wc-arrow svg {
width: clamp(12px, 2vw, 20px);
height: clamp(12px, 2vw, 20px);
}
/* Dots */
.wc-dots {
position: absolute; left: 0; right: 0; bottom: 18px;
display: flex; justify-content: center; gap: 8px;
z-index: 5;
}
.wc-dots__btn {
width: 28px; height: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.4);
border: none; cursor: pointer;
transition: background .25s ease, width .35s var(--wc-ease);
padding: 0;
}
.wc-dots__btn:hover { background: rgba(255,255,255,0.7); }
.wc-dots__btn.is-active { background: var(--wv-white, #fff); width: 44px; }
.wc-dots__btn:focus-visible { outline: 2px solid var(--wc-primary); outline-offset: 3px; }
/* Autoplay progress bar */
.wc-progress {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: rgba(255, 255, 255, 0.25);
z-index: 5;
pointer-events: none;
}
.wc-progress__bar {
height: 100%;
width: 0%;
background: var(--wv-white, #fff);
}
/* Erişilebilirlik: motion azaltma */
@media (prefers-reduced-motion: reduce) {
.wc-slide,
.wc-progress__bar { transition: none !important; }
}
/* =========================================================
HERO MODULE — CSS Grid tabanlı, kullanıcı tasarımlı
---------------------------------------------------------
- Container: --hero-cols-{bp} ve --hero-rows-{bp} CSS variable'ları
ile her breakpoint için farklı grid template kullanır.
- Item: --ga-{bp} (grid-area) variable'ları ile her breakpoint'te
ayrı konumlandırılır.
- Bootstrap'ten bağımsız çalışır, dış CSS ile çakışmaz.
========================================================= */
.hero-module {
display: grid;
width: 100%;
aspect-ratio: var(--hero-cols-mobile) / var(--hero-rows-mobile);
grid-template-columns: repeat(var(--hero-cols-mobile, 12), 1fr);
grid-template-rows: repeat(var(--hero-rows-mobile, 8), 1fr);
gap: 8px;
box-sizing: border-box;
}
@media (min-width: 768px) {
.hero-module {
aspect-ratio: var(--hero-cols-tablet) / var(--hero-rows-tablet);
grid-template-columns: repeat(var(--hero-cols-tablet, 12), 1fr);
grid-template-rows: repeat(var(--hero-rows-tablet, 8), 1fr);
gap: 10px;
}
}
@media (min-width: 992px) {
.hero-module {
aspect-ratio: var(--hero-cols-desktop) / var(--hero-rows-desktop);
grid-template-columns: repeat(var(--hero-cols-desktop, 12), 1fr);
grid-template-rows: repeat(var(--hero-rows-desktop, 8), 1fr);
gap: 12px;
}
}
/* Item — her breakpoint için kendi grid-area'sı */
.hero-module__item {
grid-area: var(--ga-mobile);
overflow: hidden;
border-radius: 8px;
position: relative;
min-width: 0;
min-height: 0;
}
@media (min-width: 768px) {
.hero-module__item {
grid-area: var(--ga-tablet);
}
}
@media (min-width: 992px) {
.hero-module__item {
grid-area: var(--ga-desktop);
}
}
/* Cihaz başına gizleme — kullanıcı admin'den belirli bir bp'de item'ı gizleyebilir */
@media (max-width: 767.98px) {
.hero-module__item.hero-hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.hero-module__item.hero-hide-tablet { display: none !important; }
}
@media (min-width: 992px) {
.hero-module__item.hero-hide-desktop { display: none !important; }
}
/* Lift effect — hover destekleyen cihazlarda banner hafifçe yükselir ve gölge alır */
@media (hover: hover) {
.hero-module__item--lift {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-module__item--lift:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
z-index: 2;
}
/* Zoom effect — hover'da resim, kutunun içinde taşmadan yakınlaşır */
.hero-module__item--zoom {
overflow: hidden;
}
.hero-module__item--zoom .hero-banner-img {
transition: transform 0.4s ease;
}
.hero-module__item--zoom:hover .hero-banner-img {
transform: scale(1.04);
}
}
/* Banner içeriği */
.hero-banner-link {
display: block;
width: 100%;
height: 100%;
}
.hero-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Slider içeriği — wc-carousel ile uyum, hero kutusuna sığar */
.hero-slider-wrap,
.hero-slider-wrap .wc-carousel {
width: 100%;
height: 100%;
overflow: hidden;
}
.hero-slider-wrap .wc-carousel { border-radius: 0; }
/* === 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/featured_category/fcat.css === */
/* ==========================================================
Kategori Vitrini (Featured Category) — ortak stiller
Tüm görünümler bu dosyayı yükler; görünüme özel kurallar
fcat_{id}.css dosyalarındadır. Mobile-first.
========================================================== */
/* Şablonsuz varsayılan başlık: featured modülüyle aynı dil */
.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;
line-height: 1.3;
}
.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, gezinme okları sağda */
.fcat-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.fcat-head .wesiva-main-title { margin-bottom: 0; }
/* Kaydırma okları (yalnızca kaydırmalı görünümlerde basılır) */
.fcat-nav { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
.fcat-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;
}
.fcat-nav-btn:hover {
border-color: var(--wv-primary, #667eea);
color: var(--wv-primary, #667eea);
}
/* Yatay kaydırmalı şerit: dokunmatikte yerel kaydırma, masaüstünde ok + sürükleme */
.fcat-scroll {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-behavior: smooth;
}
.fcat-scroll::-webkit-scrollbar { display: none; }
.fcat-scroll > * { scroll-snap-align: start; }
.fcat-scroll.fcat-dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
user-select: none;
}
/* Ürün adedi rozeti: sayaç ayarı açık görünümlerde kullanılır */
.fcat-count {
display: inline-block;
font-size: 0.72rem;
font-weight: 500;
color: var(--wv-gray-500, #64748b);
line-height: 1.2;
}
/* Kategori kısa açıklaması: açıklama ayarı açık görünümlerde kullanılır.
En fazla 2 satır; taşan metin üç noktayla kesilir (görüntü bozulmaz). */
.fcat-desc {
font-size: 0.75rem;
color: var(--wv-gray-500, #64748b);
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Mobilde şablonlu başlık düz başlıkla aynı boyuta çekilir */
@media (max-width: 768px) {
.wesiva-main-title { font-size: 1rem; }
.wesiva-main-title-template div { font-size: 1rem !important; }
}
/* === assets/frontend/css/featured_category/fcat_6.css === */
/* ==========================================================
Kategori Vitrini Görünüm 6 — Hap Butonlar
Mobile-first: hap butonlar satır satır sarar, ortalanır.
========================================================== */
.fcat-v6-haplar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.fcat-v6-hap {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 5px 16px 5px 6px;
min-height: 46px;
border: 1px solid var(--wv-gray-200, #e2e8f0);
border-radius: 999px;
background: var(--wv-white, #ffffff);
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.fcat-v6-hap:hover {
border-color: var(--wv-primary, #667eea);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.fcat-v6-hap img {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
display: block;
background: var(--wv-gray-50, #f5f7fa);
}
.fcat-v6-name {
font-size: 0.82rem;
font-weight: 500;
color: var(--wv-gray-700, #334155);
line-height: 1.2;
white-space: nowrap;
}
.fcat-v6-hap:hover .fcat-v6-name { color: var(--wv-primary, #667eea); }
/* Görsel gizliyken hap iki yandan eşit iç boşluk alır */
.fcat-v6-gorselsiz .fcat-v6-hap { padding: 5px 16px; }
@media (min-width: 768px) {
.fcat-v6-haplar { gap: 12px; }
.fcat-v6-hap { padding: 6px 18px 6px 7px; }
.fcat-v6-gorselsiz .fcat-v6-hap { padding: 6px 18px; }
.fcat-v6-hap img { width: 38px; height: 38px; }
.fcat-v6-name { font-size: 0.87rem; }
}
/* === assets/frontend/css/featured/featured.css === */
/* Şablonsuz varsayılan başlık: site fontunu kalıtır, altında modern kısa
vurgu çizgisi bulunur. Çizgi currentColor kullandığı için formdaki
"Başlık Rengi" seçimine otomatik uyar. */
.wesiva-main-title {
/* Şablonlarla aynı boyut ölçeği: şablonlu/şablonsuz başlık eşit görünür */
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;
line-height: 1.3;
}
.wesiva-main-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 44px;
height: 3px;
border-radius: 2px;
background: currentColor;
opacity: 0.85;
}
.wesiva-nav-tabs {
display: flex;
gap: 8px;
border-bottom: none;
margin-bottom: 40px;
padding: 8px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.wesiva-nav-tabs::-webkit-scrollbar {
display: none;
}
.wesiva-nav-tabs .nav-item {
flex: 0 0 auto;
}
.wesiva-nav-tabs .wesiva-nav-link {
display: inline-block;
background: var(--wv-gray-50, #f5f7fa);
color: var(--wv-gray-700, #334155);
border: none;
border-radius: 999px;
padding: 10px 16px;
line-height: 1;
position: relative;
transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.wesiva-nav-tabs .wesiva-nav-link:hover {
background: rgba(102,126,234,0.1);
color: var(--wv-gray-900, #1f2a44);
}
.wesiva-nav-tabs .wesiva-nav-link:focus-visible {
outline: 2px solid var(--wv-primary, #667eea);
outline-offset: 2px;
}
.wesiva-nav-tabs .wesiva-nav-link.active {
background: linear-gradient(135deg, var(--wv-primary, #667eea) 0%, var(--wv-primary-hover, #764ba2) 100%);
color: var(--wv-primary-fg, #ffffff);
}
.wesiva-nav-tabs .wesiva-nav-link.active::after {
content: '';
position: absolute;
left: 16px;
right: 16px;
bottom: -6px;
height: 3px;
border-radius: 3px;
background: currentColor;
opacity: .35;
}
.wesiva-text-tabs {
gap: 16px;
padding: 0;
margin-bottom: 24px;
}
.wesiva-text-tabs .wesiva-nav-link {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: var(--wv-gray-500, #9aa4b2);
font-weight: 500;
padding: 0 10px 10px 0;
}
.wesiva-text-tabs .wesiva-nav-link:hover {
background: transparent !important;
color: var(--wv-gray-900, #0f172a);
}
.wesiva-text-tabs .wesiva-nav-link.active {
background: transparent !important;
color: var(--wv-gray-900, #0f172a) !important;
}
.wesiva-text-tabs .wesiva-nav-link.active::after {
content: '';
position: absolute;
left: 0;
right: auto;
bottom: -6px;
width: 100%;
height: 2px;
border-radius: 2px;
background: currentColor;
opacity: 1;
}
.wesiva-nav-tabs .wesiva-nav-link.active::after {
display: none;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.wesiva-main-title {
font-size: 1rem;
margin-bottom: 5px;
}
.wesiva-text-tabs .wesiva-nav-link.active {
background: transparent !important;
color: var(--wv-gray-900, #0f172a) !important;
font-size: 0.8rem;
}
.wesiva-nav-tabs {
scroll-snap-type: x mandatory;
}
.wesiva-nav-tabs .wesiva-nav-link {
scroll-snap-align: start;
font-size: 0.8rem;
}
}
/* Aktif olmayan tab basliklari hafif soluk gorunur (sablonlu ve duz tablar dahil) */
.wesiva-nav-tabs .wesiva-nav-link:not(.active),
.wesiva-text-tabs .wesiva-nav-link:not(.active) {
opacity: 0.45;
transition: opacity .2s ease;
}
.wesiva-nav-tabs .wesiva-nav-link:not(.active):hover,
.wesiva-text-tabs .wesiva-nav-link:not(.active):hover {
opacity: 0.8;
}
/* ============================================================
Owl init oncesi kart duzeni (CLS + tab flash onlemi)
Owl yuklenene kadar kartlar dikey yigilmak yerine son haline
yakin (breakpoint'e gore N'li yatay) dizilir; owl init olunca
.owl-loaded sinifi geldigi icin bu kurallar kendiliginden devre
disi kalir. --fmi-* degiskenleri view'dan inline verilir.
============================================================ */
.product-slider:not(.owl-loaded) {
display: flex;
overflow: hidden;
}
.product-slider:not(.owl-loaded) > * {
flex: 0 0 calc(100% / var(--fmi-0, 2));
max-width: calc(100% / var(--fmi-0, 2));
padding: 0 7px; /* owl margin: 15px yaklasik karsiligi */
box-sizing: border-box;
}
@media (min-width: 576px) {
.product-slider:not(.owl-loaded) > * {
flex: 0 0 calc(100% / var(--fmi-576, 3));
max-width: calc(100% / var(--fmi-576, 3));
}
}
@media (min-width: 768px) {
.product-slider:not(.owl-loaded) > * {
flex: 0 0 calc(100% / var(--fmi-768, 4));
max-width: calc(100% / var(--fmi-768, 4));
}
}
@media (min-width: 992px) {
.product-slider:not(.owl-loaded) > * {
flex: 0 0 calc(100% / var(--fmi-992, 4));
max-width: calc(100% / var(--fmi-992, 4));
}
}
/* ==========================================================
Başlık şablonu tutarlılık düzeltmeleri
Şablon HTML'i inline font-size (clamp) taşır; bağlama göre
boyut burada normalize edilir.
========================================================== */
/* Sekme butonlarının yazı boyutu sabitlenir (şablonlu/şablonsuz aynı) */
.wesiva-nav-tabs .wesiva-nav-link {
font-size: 0.9rem;
}
/* Sekme içine basılan şablon, kendi inline boyutunu değil sekmenin
boyutunu kullanır; dekor (çizgi/nokta) aynen kalır */
.wesiva-nav-tabs .wesiva-nav-link div {
font-size: inherit !important;
line-height: inherit !important;
}
@media (max-width: 768px) {
/* Mobilde sekmeler tek boyut: şablonlu ve düz etiket eşitlenir */
.wesiva-nav-tabs .wesiva-nav-link {
font-size: 0.8rem;
}
/* Mobilde ana başlık şablonu, düz başlıkla (1rem) aynı boyuta çekilir */
.wesiva-main-title-template div {
font-size: 1rem !important;
}
}
/* ==========================================================
Masaüstü sütun sayısı (panel: "Masaüstünde Yan Yana Ürün")
Bootstrap 12'lik ızgara 5'e ve 7'ye bölünmediği için bu kart
sınıfları .row > * kuralını (flex:0 0 auto) koruyarak yalnız
genişliği ezer. 1.php / 2.php bs_grid_class içinde kullanır.
========================================================== */
@media (min-width: 992px) {
.row > .ftr-lg-5n { width: 20%; }
}
@media (min-width: 1200px) {
.row > .ftr-xl-5n { width: 20%; }
.row > .ftr-xl-7n { width: 14.2857%; }
}
/* Fiyat yanındaki "+ KDV" ibaresi: fiyattan küçük ve soluk, fiyatla birlikte ölçeklenir */
.ftr-tax-suffix {
font-size: 0.72em;
font-weight: 500;
color: var(--wv-gray-500, #666);
white-space: nowrap;
}
/* === assets/frontend/css/featured/featured_9.css === */
/* ==========================================================
Featured Görünüm 9 — Günün Ürünü
Kendi kart tasarımına sahip B sınıfı görünüm; tüm kurallar
.ftr-v9 kökü altındadır, site kart sistemine dokunmaz.
Mobile-first: görsel üstte, bilgi altta; >=768px yan yana.
========================================================== */
.ftr-v9-stage {
display: flex;
flex-direction: column;
border: 1px solid var(--wv-gray-200, #e8eaef);
border-radius: 14px;
background: var(--ftr-kart-bg, var(--wv-white, #fff));
overflow: hidden;
margin-top: 14px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ftr-v9-stage:hover {
border-color: var(--wv-gray-300, #d3d8e0);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
color: inherit;
}
/* Görsel alanı */
.ftr-v9-img {
position: relative;
display: block;
background: var(--ftr-gorsel-bg, var(--wv-gray-50, #f5f6f8));
}
.ftr-v9-img img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
display: block;
}
/* Rozet ve indirim: bilgi bloğunun en üstünde yan yana çipler */
.ftr-v9-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
/* Ürün etiketi (rozet): rengi ürün ayarından gelir */
.ftr-v9-badge {
font-size: 11px;
font-weight: 600;
line-height: 1;
padding: 6px 10px;
border-radius: 6px;
background: var(--wv-primary, #1f2b3e);
color: var(--wv-primary-fg, #fff);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* İndirim rozeti */
.ftr-v9-discount {
font-size: 11px;
font-weight: 700;
line-height: 1;
padding: 6px 10px;
border-radius: 6px;
background: var(--wv-accent, #e53935);
color: var(--wv-accent-fg, #fff);
white-space: nowrap;
}
/* Bilgi bloğu */
.ftr-v9-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 18px 16px 20px;
}
.ftr-v9-name {
font-size: 19px;
font-weight: 650;
line-height: 1.3;
color: var(--wv-gray-900, #1f2b3e);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ftr-v9-variant { font-size: 12px; color: var(--wv-gray-500, #94a3b8); }
.ftr-v9-rating {
display: flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
color: var(--wv-gray-900, #1f2b3e);
}
.ftr-v9-star { color: #f5a623; }
.ftr-v9-rating-count { color: var(--wv-gray-500, #94a3b8); }
/* Fiyat satırı: dar ekranda sarmalı, taşma olmaz */
.ftr-v9-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 10px;
font-size: 22px;
min-width: 0;
}
.ftr-v9-price strong { font-weight: 750; color: var(--wv-gray-900, #1f2b3e); }
.ftr-v9-old { font-size: 14px; color: var(--wv-gray-500, #9aa3b0); }
.ftr-v9-campaign {
font-size: 12px;
font-weight: 600;
color: var(--wv-accent-hover, #c62828);
}
/* İnceleme butonu */
.ftr-v9-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
padding: 12px 22px;
min-height: 44px;
border-radius: 8px;
background: var(--wv-primary, #1f2b3e);
color: var(--wv-primary-fg, #fff);
font-size: 13.5px;
font-weight: 600;
/* Hareket eden ozellikler tek tek yazilir: "all" kullanilirsa
tarayici her hesaplanan degeri izler ve gecis pahalilasir */
transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
/* Ok isareti: hover'da ileri kayar */
.ftr-v9-cta > span {
display: inline-block;
transition: transform 0.18s ease;
}
/* Vurgu hem sahneye hem dogrudan butona gelince calisir.
Onceki hal yalnizca arka plani #1f2b3e'den #0f1826'ya cekiyordu; iki koyu ton
birbirine cok yakin oldugu icin animasyon fark edilmiyordu. Artik yukselme,
golge ve ok kaymasi birlikte veriliyor. */
.ftr-v9-stage:hover .ftr-v9-cta,
.ftr-v9-cta:hover {
background: var(--wv-primary-hover, #0f1826);
transform: translateY(-2px);
box-shadow: 0 8px 18px -6px rgba(31, 43, 62, 0.55);
}
.ftr-v9-stage:hover .ftr-v9-cta > span,
.ftr-v9-cta:hover > span {
transform: translateX(4px);
}
/* Hareketi azalt tercihi: yalnizca renk degisir */
@media (prefers-reduced-motion: reduce) {
.ftr-v9-cta,
.ftr-v9-cta > span {
transition: background 0.18s ease;
}
.ftr-v9-stage:hover .ftr-v9-cta,
.ftr-v9-cta:hover {
transform: none;
box-shadow: none;
}
.ftr-v9-stage:hover .ftr-v9-cta > span,
.ftr-v9-cta:hover > span {
transform: none;
}
}
@media (min-width: 768px) {
.ftr-v9-stage {
flex-direction: row;
align-items: stretch;
}
.ftr-v9-img {
flex: 0 0 46%;
max-width: 46%;
}
.ftr-v9-img img { height: 100%; aspect-ratio: auto; }
.ftr-v9-meta {
flex: 1;
justify-content: center;
padding: 28px 32px;
gap: 10px;
}
.ftr-v9-name { font-size: 24px; }
.ftr-v9-price { font-size: 26px; }
}
/* === assets/frontend/css/featured/featured_8.css === */
/* ==========================================================
Featured Görünüm 8 — Overlay Vitrin
Kendi kart tasarımına sahip B sınıfı görünüm; tüm kurallar
.ftr-v8 kökü altındadır, site kart sistemine dokunmaz.
Yazı okunurluğu koyu degrade ile sağlanır.
Mobile-first: 2 kolon; >=768px 3, >=1200px 4 kolon.
========================================================== */
.ftr-v8-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 14px;
}
.ftr-v8-card {
position: relative;
display: block;
/* Oran, sitenin urun karti ayarindan gelir (kare 1:1 veya portre 3:4).
Degisken her zaman view tarafindan basilir; yedek deger yalnizca
eski onbellekten gelen HTML icin durur. */
aspect-ratio: var(--ftr-v8-en-boy, 3 / 4);
border-radius: 12px;
overflow: hidden;
background: var(--ftr-gorsel-bg, var(--wv-gray-50, #f5f6f8));
text-decoration: none;
color: var(--wv-white, #fff);
}
.ftr-v8-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.ftr-v8-card:hover .ftr-v8-photo { transform: scale(1.045); }
.ftr-v8-card:hover { color: var(--wv-white, #fff); }
/* Ürün etiketi (rozet): rengi ürün ayarından gelir */
.ftr-v8-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
font-size: 10px;
font-weight: 600;
line-height: 1;
padding: 5px 8px;
border-radius: 5px;
background: var(--wv-primary, #1f2b3e);
color: var(--wv-primary-fg, #fff);
max-width: 55%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* İndirim rozeti: sağ üst köşe */
.ftr-v8-discount {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
font-size: 10px;
font-weight: 700;
line-height: 1;
padding: 5px 8px;
border-radius: 5px;
background: var(--wv-accent, #e53935);
color: var(--wv-accent-fg, #fff);
white-space: nowrap;
}
/* Alt yazı bloğu: koyu degrade üzerinde ad + fiyat */
.ftr-v8-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
display: flex;
flex-direction: column;
gap: 3px;
padding: 26px 12px 12px;
background: linear-gradient(to top, rgba(var(--ftr-v8-ov-rgb, 10, 14, 22), 0.82) 0%, rgba(var(--ftr-v8-ov-rgb, 10, 14, 22), 0.45) 55%, rgba(var(--ftr-v8-ov-rgb, 10, 14, 22), 0) 100%);
}
.ftr-v8-name {
font-size: 13px;
font-weight: 500;
line-height: 1.35;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Varyant bilgisi ("+3 Renk"): degrade zemin üzerinde okunur açık ton */
.ftr-v8-variant {
font-size: 11px;
color: rgba(255, 255, 255, 0.78);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Fiyat satırı: dar kartta sarmalı, taşma olmaz */
.ftr-v8-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 7px;
font-size: 14px;
min-width: 0;
}
.ftr-v8-price strong { font-weight: 700; }
.ftr-v8-old {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.65);
}
@media (min-width: 768px) {
.ftr-v8-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (min-width: 1200px) {
/* Sütun sayısı panelden gelir (--ftr-v8-sutun, 3-5); ayar yoksa 4 */
.ftr-v8-grid { grid-template-columns: repeat(var(--ftr-v8-sutun, 4), 1fr); }
}
/* Hareket azaltma tercihinde yakınlaşma animasyonu kapatılır */
@media (prefers-reduced-motion: reduce) {
.ftr-v8-photo { transition: none; }
.ftr-v8-card:hover .ftr-v8-photo { transform: none; }
}
/* Fiyat yanındaki "+ KDV" ibaresi: fiyattan küçük ve soluk, fiyatla birlikte ölçeklenir */
.ftr-tax-suffix {
font-size: 0.72em;
font-weight: 500;
color: var(--wv-gray-500, #666);
white-space: nowrap;
}
/* === assets/frontend/css/extension/modules/banner/banner.css === */
/* Overlay Banner Container */
.banner-overlay-container {
position: relative;
overflow: hidden;
border-radius: 10px;
}
/* .banner-col d-flex olduğu için içindeki .row varsayılan flex item davranışıyla
yalnızca içeriği kadar genişler. Banner kartının parent col'u tam doldurması için
.row'a flex-grow:1 ve width:100% veriyoruz. */
.banner-col > .row {
flex: 1 1 auto;
width: 100%;
min-width: 0;
}
/* Bannerlar alt alta dizildiğinde araya dikey boşluk (tüm ekran genişliklerinde).
Kartlara mt-2 verilmiyor — mt-2 ilk karta da margin eklediği için masaüstünde
yükseklik eşitlemesini bozuyordu. row-gap yalnızca satır aralarına uygulanır:
ilk satırın üstünde boşluk oluşmaz, yan yana duran kartlar da etkilenmez.
Yatay boşluk zaten .row üzerindeki --bs-gutter-x (0.5rem) ile aynı ölçüde. */
.banner-col > .row {
row-gap: 0.5rem;
}
.banner-overlay-container img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
}
/* Hover efektleri — yalnızca hover destekleyen cihazlarda */
@media (hover: hover) {
/* Lift effect — banner hafifçe yükselir ve gölge alır */
.banner-effect-lift {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.banner-effect-lift:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
z-index: 2;
}
/* Zoom effect — hover'da resim, kutunun içinde taşmadan yakınlaşır */
.banner-effect-zoom img {
transition: transform 0.4s ease;
}
.banner-effect-zoom:hover img {
transform: scale(1.04);
}
}
/* Desktop: Banner yüksekliklerini eşitle */
@media (min-width: 992px) {
.banner-col .banner-overlay-container {
height: 100%;
}
.banner-col .banner-overlay-container img {
height: 100%;
object-fit: cover;
}
/* Dikey stack edilmiş banner'lar (col-lg-12): row'u column yap, alanı eşit dağıt */
.banner-col > .row:has(> .col-lg-12) {
flex-direction: column;
flex-wrap: nowrap;
}
.banner-col > .row:has(> .col-lg-12) > [class*="col-"] {
flex: 1 1 auto;
}
}
/* Yan modüle yükseklik uydurma (masaüstü)
Aynı satırda (.row veya kenar boşluksuz satır) banner olmayan ve o kırılımda
görünür bir modül varsa banner
görseli akıştan çıkarılır (position:absolute) ve satır yüksekliğini yan modül
belirler; banner o yüksekliği object-fit:cover ile doldurur. Satırda yalnızca
banner modülleri varsa bu kural devreye girmez, görsel kendi oranında kalır.
Görünürlük sınıfları generate_visibility_class() çıktısına göre ayrıştırılır:
lg (992–1199) tablet bayrağını, xl (1200+) masaüstü bayrağını temsil eder. */
@media (min-width: 992px) and (max-width: 1199.98px) {
:is(.row, .layout-row-container-full):has(> :not(.banner-col):is(:not(.d-none):not(.d-md-none), .d-md-block)) > .banner-col .banner-overlay-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
@media (min-width: 1200px) {
:is(.row, .layout-row-container-full):has(> :not(.banner-col):is(.d-xl-block, :not(.d-none):not(.d-md-none):not(.d-xl-none), .d-md-block:not(.d-xl-none))) > .banner-col .banner-overlay-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
/* === 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_6.css === */
/* Fırsat Görünüm 6 — Flip Saat (mobile-first) */
.frs-v6-box { border-radius: 16px; overflow: hidden; border: 1px solid var(--frs-cizgi); background: var(--frs-kart); }
.frs-v6-top {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 24px 12px;
text-align: center;
background: var(--frs-zemin, var(--wv-gray-100, #f3f4f6));
}
.frs-v6-top .wesiva-main-title::after { left: 50%; transform: translateX(-50%); }
.frs-v6-top .frs-cd-units { justify-content: center; }
.frs-v6 .frs-cd--flip .frs-cd-u b { min-width: 48px; }
.frs-v6-product { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; padding: 16px; }
.frs-v6-media { aspect-ratio: 1 / 1; border-radius: 10px; }
.frs-v6-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.frs-v6-btn { grid-column: 1 / -1; }
@media (min-width: 768px) {
.frs-v6 .frs-cd--flip .frs-cd-u b { min-width: 80px; }
.frs-v6-top { padding: 32px 24px; }
.frs-v6-product { grid-template-columns: 120px 1fr auto; gap: 20px; padding: 20px 24px; }
.frs-v6-btn { grid-column: auto; }
}
/* === assets/frontend/css/featured/featured_10.css === */
/* ==========================================================
Featured Görünüm 10 — Akan Şerit
Kendi kart tasarımına sahip B sınıfı görünüm; tüm kurallar
.ftr-v10 kökü altındadır, site kart sistemine dokunmaz.
Saf CSS animasyon (GPU dostu, JS yok); üzerine gelince durur;
hareket azaltma tercihinde animasyon kapalı, elle kaydırılır.
========================================================== */
/* Bant: JS otomatik kaydırmalı yatay alan; fareyle sürüklenebilir,
dokunmatikte yerel kaydırma çalışır. Akış JS (10.js) ile sürülür. */
.ftr-v10-band {
overflow-x: auto;
margin-top: 14px;
padding: 2px; /* kart gölgeleri kırpılmasın */
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox: kaydırma çubuğu gizli */
cursor: grab;
}
.ftr-v10-band::-webkit-scrollbar { display: none; }
.ftr-v10-band.ftr-v10-dragging {
cursor: grabbing;
user-select: none;
-webkit-user-select: none;
}
/* Akış: transform ile, yani compositor üzerinde. Süreyi 10.js şerit
genişliğinden hesaplayıp animationDuration olarak yazar (sabit piksel hızı).
Şerit iki özdeş kümeden oluştuğu için -50% tam bir küme kaydırır ve döngü
eksiz devam eder. scrollLeft ile sürülen eski yöntem her karede tam piksele
yuvarlandığı için düşük hızlarda titriyordu. */
.ftr-v10-track {
display: flex;
width: max-content;
animation: ftrV10Akis 30s linear infinite;
will-change: transform;
}
@keyframes ftrV10Akis {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* Üzerine gelince / dokununca / odaklanınca ve sürüklerken akış durur */
.ftr-v10-band:hover .ftr-v10-track,
.ftr-v10-band.ftr-v10-duraklat .ftr-v10-track,
.ftr-v10-band.ftr-v10-dragging .ftr-v10-track {
animation-play-state: paused;
}
.ftr-v10-set {
display: flex;
gap: 10px;
padding-right: 10px; /* kümeler arası boşluk döngüde kaybolmasın */
}
/* Kompakt kart: görsel solda, bilgi sağda */
.ftr-v10-card {
display: flex;
align-items: center;
gap: 10px;
width: 240px;
flex-shrink: 0;
border: 1px solid var(--wv-gray-200, #e8eaef);
border-radius: 10px;
background: var(--ftr-kart-bg, var(--wv-white, #fff));
padding: 8px 12px 8px 8px;
min-height: 80px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ftr-v10-card:hover {
border-color: var(--wv-gray-300, #d3d8e0);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
color: inherit;
}
.ftr-v10-img {
position: relative;
flex: 0 0 60px;
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
background: var(--ftr-gorsel-bg, var(--wv-gray-50, #f5f6f8));
}
.ftr-v10-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
-webkit-user-drag: none;
user-select: none;
}
/* Ürün etiketi (rozet): rengi ürün ayarından gelir */
.ftr-v10-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-v10-meta {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.ftr-v10-name {
font-size: 12.5px;
font-weight: 500;
line-height: 1.35;
color: var(--wv-gray-900, #1f2b3e);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Varyant bilgisi ("+3 Renk"): Minimal Kart ile aynı sönük ton */
.ftr-v10-variant { font-size: 11px; color: var(--wv-gray-500, #94a3b8); }
/* Fiyat satırı: dar kartta sarmalı, taşma olmaz */
.ftr-v10-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 6px;
font-size: 13px;
min-width: 0;
}
.ftr-v10-price strong { font-weight: 700; color: var(--wv-gray-900, #1f2b3e); }
.ftr-v10-old { font-size: 11px; color: var(--wv-gray-500, #9aa3b0); }
.ftr-v10-discount {
font-size: 9.5px;
font-weight: 700;
color: var(--wv-accent, #e53935);
white-space: nowrap;
}
/* Hareket azaltma tercihi: otomatik akış kapatılır, şerit elle kaydırılabilir
kalır; tekrar kümesi gereksizdir, gizlenir */
@media (prefers-reduced-motion: reduce) {
.ftr-v10-track { animation: none; }
.ftr-v10-set[aria-hidden="true"] { display: none; }
}
/* === 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_12.css === */
/* ==========================================================
Featured Görünüm 12 — Fiyat Listesi
Kendi kart tasarımına sahip B sınıfı görünüm; tüm kurallar
.ftr-v12 kökü altındadır, site kart sistemine dokunmaz.
Menü estetiği: ad solda, noktalı çizgi, fiyat sağda.
Mobile-first: küçük görsel gizlenmez, boyutlar küçülür.
========================================================== */
.ftr-v12-list {
display: flex;
flex-direction: column;
margin-top: 10px;
}
.ftr-v12-row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 4px;
min-height: 56px;
border-bottom: 1px solid var(--wv-gray-200, #eceef2);
text-decoration: none;
color: inherit;
transition: background 0.15s;
}
.ftr-v12-row:last-child { border-bottom: none; }
.ftr-v12-row:hover {
background: rgba(15, 23, 42, 0.03);
color: inherit;
}
.ftr-v12-img {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 6px;
overflow: hidden;
background: var(--ftr-gorsel-bg, var(--wv-gray-50, #f5f6f8));
}
.ftr-v12-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.ftr-v12-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex-shrink: 1;
}
.ftr-v12-name {
font-size: 13.5px;
font-weight: 500;
line-height: 1.35;
color: var(--wv-gray-900, #1f2b3e);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ftr-v12-variant { font-size: 11px; color: var(--wv-gray-500, #94a3b8); }
/* Ürün etiketi (rozet): ad ile aynı satırda küçük çip; rengi ürün ayarından gelir */
.ftr-v12-badge {
display: inline-block;
font-size: 9px;
font-weight: 600;
line-height: 1;
padding: 3px 6px;
border-radius: 4px;
background: var(--wv-primary, #1f2b3e);
color: var(--wv-primary-fg, #fff);
vertical-align: middle;
margin-right: 4px;
white-space: nowrap;
}
/* Puan satırı */
.ftr-v12-rating {
display: flex;
align-items: center;
gap: 3px;
font-size: 11px;
color: var(--wv-gray-900, #1f2b3e);
}
.ftr-v12-star { color: #f5a623; font-size: 11px; }
.ftr-v12-rating-count { color: var(--wv-gray-500, #94a3b8); }
/* Kampanya satırı */
.ftr-v12-campaign {
font-size: 10.5px;
font-weight: 600;
color: var(--wv-accent-hover, #c62828);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Noktalı ara çizgi (menü estetiği) */
.ftr-v12-dots {
flex: 1 1 20px;
min-width: 20px;
border-bottom: 2px dotted var(--wv-gray-300, #d3d8e0);
align-self: center;
margin-top: 6px;
}
/* Sağ blok: dar ekranda sığmazsa alt satıra sararak taşma önlenir */
.ftr-v12-right {
display: flex;
align-items: baseline;
justify-content: flex-end;
flex-wrap: wrap;
gap: 2px 8px;
flex-shrink: 0;
max-width: 45%;
}
.ftr-v12-price {
font-size: 14.5px;
font-weight: 700;
color: var(--wv-gray-900, #1f2b3e);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ftr-v12-old {
font-size: 12px;
color: var(--wv-gray-500, #9aa3b0);
white-space: nowrap;
}
/* İndirim yüzdesi: fiyatın solunda kırmızı vurgu */
.ftr-v12-discount {
font-size: 10px;
font-weight: 700;
color: var(--wv-accent, #e53935);
white-space: nowrap;
}
@media (min-width: 768px) {
.ftr-v12-row { padding: 13px 6px; gap: 14px; }
.ftr-v12-name { font-size: 14.5px; }
.ftr-v12-price { font-size: 15.5px; }
}
/* === assets/frontend/css/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_12.css === */
/* Galeri Görünüm 12 — Polaroid (beyaz çerçeve bilinçli sabit renk: fotoğraf kâğıdı) */
.wgl-polaroid-liste {
display: grid;
grid-template-columns: repeat(var(--wgl-s), minmax(0, 1fr));
gap: 20px 14px;
padding: 8px 4px;
}
.wgl-polaroid {
margin: 0;
padding: 8px 8px 0;
background: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
transform: rotate(-2.5deg);
transition: transform 0.25s ease;
min-width: 0;
}
.wgl-polaroid:nth-child(even) { transform: rotate(2deg); }
.wgl-polaroid:nth-child(3n) { transform: rotate(-1deg); }
.wgl-polaroid:hover,
.wgl-polaroid:focus-within { transform: rotate(0) scale(1.03); }
.wgl-polaroid .wgl-kutu { border-radius: 0; }
.wgl-polaroid-yazi {
min-height: 40px;
padding: 8px 2px 10px;
font-size: 0.8125rem;
line-height: 1.3;
color: #374151;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (min-width: 768px) {
.wgl-polaroid-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Masaüstü satır adedi panel ayarından (3-6) */
@media (min-width: 992px) {
.wgl-polaroid-liste { grid-template-columns: repeat(var(--wgl-s), minmax(0, 1fr)); gap: 32px 24px; padding: 12px 8px; }
.wgl-polaroid { padding: 12px 12px 0; }
}
@media (prefers-reduced-motion: reduce) {
.wgl-polaroid { transition: none; }
}
/* === 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_1.css === */
/* Blog Yazıları — Görünüm 1: Dergi Manşeti (mobile-first) */
.wbl-v1-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 992px) {
.wbl-v1-grid { grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: stretch; }
.wbl-v1-grid.wbl-v1-tek { grid-template-columns: 1fr; }
}
/* Manşet: görsel üstünde degrade + yazı */
.wbl-v1-lead {
position: relative;
display: block;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
min-height: 300px;
color: var(--wv-white, #ffffff);
}
.wbl-v1-lead .wbl-media { position: absolute; inset: 0; }
.wbl-v1-lead::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 14, 22, 0) 30%, rgba(10, 14, 22, 0.85) 100%);
}
.wbl-v1-lead:hover img { transform: scale(1.04); }
.wbl-v1-lead-body {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
}
.wbl-v1-lead-title {
font-size: clamp(1.2rem, 3.2vw, 1.75rem);
font-weight: 800;
line-height: 1.2;
color: var(--wv-white, #ffffff);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wbl-v1-lead-excerpt {
display: none;
font-size: 0.9rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.86);
}
.wbl-v1-lead .wbl-meta { color: rgba(255, 255, 255, 0.8); }
@media (min-width: 768px) {
.wbl-v1-lead { min-height: 420px; }
.wbl-v1-lead-body { padding: 28px; }
.wbl-v1-lead-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Yan liste */
.wbl-v1-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wbl-v1-list li + li { border-top: 1px solid var(--wv-gray-200, #e2e8f0); }
.wbl-v1-item {
display: flex;
gap: 14px;
align-items: center;
padding: 12px 0;
text-decoration: none;
min-height: 44px;
}
.wbl-v1-list li:first-child .wbl-v1-item { padding-top: 0; }
.wbl-v1-thumb { flex: 0 0 96px; width: 96px; aspect-ratio: 4 / 3; border-radius: 10px; }
.wbl-v1-thumb .wbl-ph { font-size: 1.3rem; }
.wbl-v1-item-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wbl-v1-item-title {
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
color: var(--wv-gray-900, #1f2937);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.15s ease;
}
.wbl-v1-item:hover .wbl-v1-item-title { color: var(--wv-primary, #2c6ed0); }
.wbl-v1-item:hover img { transform: scale(1.06); }
@media (min-width: 992px) {
.wbl-v1-list { justify-content: space-between; height: 100%; }
.wbl-v1-thumb { flex-basis: 112px; width: 112px; }
}
/* === 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_7.css === */
/* Güven Rozetleri Görünüm 7 — Taşan İkon
İkon, kartın üst kenarına oturan vurgu renkli dairedir. Liste üstüne
boşluk verilir ki taşan daire (kaydırma düzeninde de) kesilmesin. */
.gvn-v7 .gvn-liste { padding-top: 34px; row-gap: 46px; }
.gvn-v7 .gvn-kart { padding-top: 46px; }
.gvn-v7 .gvn-kart .gvn-ikon {
position: absolute;
top: 0;
left: 50%;
width: 64px;
height: 64px;
font-size: 1.4rem;
color: var(--gvn-a-yazi);
background: var(--gvn-a);
border: 4px solid var(--wv-body-bg, #ffffff);
border-radius: 50%;
box-sizing: border-box;
transform: translate(-50%, -50%);
}
.gvn-v7.gvn-ikon--kare .gvn-kart .gvn-ikon { border-radius: 14px; }
.gvn-v7 .gvn-kart .gvn-ikon.gvn-ikon-resim { width: 64px; height: 64px; padding: 10px; background: var(--gvn-kart-zemin); border-color: var(--gvn-cizgi); border-radius: 50%; }
.gvn-v7 .gvn-ikon-resim img { max-width: 100%; }
@media (min-width: 768px) {
.gvn-v7 .gvn-liste { row-gap: 52px; }
.gvn-v7 .gvn-kart { padding-top: 50px; }
}
/* === 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 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
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 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: #111317;
--wvh5-fg: #ffffff;
--wvh5-icon: #ffffff;
--wvh5-accent: #9bb26b;
--wvh5-accent-fg: #111317;
--wvh5-border: #262932;
--wvh5-nav-weight: 500;
}
:root {
--wvh5-row2-bg: #111317;
--wvh5-row2-fg: #d9dbd2;
}
:root {
--wvh5-panel-bg: #ffffff;
--wvh5-panel-fg: #111317;
}
:root {
--wvh5-topbar-bg: #9bb26b;
--wvh5-topbar-fg: #111317;
}
/* === 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 --- */