/* === assets/frontend/css/palette/palette.css === */
/* --- SITE RENK PALETI --- */
/* Bu dosya panelden otomatik uretilir, elle duzenlemeyin. */
:root {
--wv-primary: #111827;
--wv-primary-fg: #ffffff;
--wv-secondary: #4b5563;
--wv-secondary-fg: #ffffff;
--wv-accent: #1a1a1a;
--wv-accent-fg: #ffffff;
--wv-white: #ffffff;
--wv-gray-50: #f9fafb;
--wv-gray-100: #f3f4f6;
--wv-gray-200: #e5e7eb;
--wv-gray-300: #d1d5db;
--wv-gray-500: #6b7280;
--wv-gray-700: #374151;
--wv-gray-900: #111827;
--wv-success: #16a34a;
--wv-danger: #dc2626;
--wv-warning: #f59e0b;
--wv-info: #2563eb;
--wv-primary-hover: #0e1421;
--wv-primary-soft: #e7e8e9;
--wv-secondary-hover: #404854;
--wv-secondary-soft: #edeeef;
--wv-accent-hover: #161616;
--wv-accent-soft: #e8e8e8;
--wv-success-soft: #e8f6ed;
--wv-danger-soft: #fce9e9;
--wv-warning-soft: #fef5e7;
--wv-info-soft: #e9effd;
--wv-body-bg: var(--wv-gray-50);
--wv-text: var(--wv-gray-900);
--wv-muted: var(--wv-gray-500);
--wv-border: var(--wv-gray-200);
}
/* === assets/frontend/css/theme.css === */
/* Genel CSS */
a {
text-decoration: none;
outline: none;
-webkit-transition: color 0.3s;
-ms-transition: color 0.3s;
transition: color 0.3s;
}
/* bs row padding */
.row {
--bs-gutter-x: 0.5rem;
}
.breadcrumb {
padding: 10px;
}
/* Page width: Tam Genişlik (Kenar Boşluksuz)
Bootstrap container/container-fluid'in padding'i yok, viewport kenarlarına dayanır.
İçerideki .row'ların --bs-gutter-x kaynaklı negative margin'i overflow yaratmasın diye
overflow-x:clip (position:sticky'yi bozmaz, hidden'a göre daha güvenli). */
.container-full {
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
overflow-x: clip;
}
/* container-full sayfa genişliği seçildiğinde, listing toolbar'ının
"X Ürün" sayacı (ps-0) ve sağdaki sıralama select'i (pe-0) viewport kenarına
yapışıyor. Bootstrap utility'leri padding'i sıfırladığı için doğrudan
ilgili elementlere ufak yatay margin veriyoruz. */
.container-full .ecom-products-toolbar #pagination-results2 {
margin-left: 5px;
}
.container-full .ecom-products-toolbar .ecom-sort-select {
margin-right: 5px;
}
/* Cart Icon Button */
.shpcrt-icon-wrapper {
position: fixed;
top: 20px;
right: 20px;
z-index: 2999;
}
.shpcrt-cart-btn {
background: var(--wv-primary, #2c3e50);
color: white;
border: none;
padding: 15px 20px;
border-radius: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
}
.shpcrt-cart-btn:hover {
background: var(--wv-primary-hover, #34495e);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.shpcrt-cart-icon {
font-size: 24px;
}
.shpcrt-badge {
background: var(--wv-danger, #e74c3c);
color: white;
border-radius: 50%;
padding: 2px 8px;
font-size: 12px;
font-weight: bold;
}
/* Overlay */
.shpcrt-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 3000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.shpcrt-overlay.shpcrt-active {
opacity: 1;
visibility: visible;
}
/* Sidebar */
.shpcrt-sidebar {
position: fixed;
top: 0;
right: -450px;
width: 450px;
height: 100%;
background: white;
z-index: 3001;
transition: right 0.3s ease;
display: flex;
flex-direction: column;
box-shadow: -5px 0 25px rgba(0,0,0,0.2);
}
.shpcrt-sidebar.shpcrt-active {
right: 0;
}
/* Header */
.shpcrt-header {
padding: 20px;
background: var(--wv-white, #fff);
color: var(--wv-gray-900, #333);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--wv-gray-200, #eee);
flex-shrink: 0;
}
.shpcrt-header h2 {
font-size: 20px;
font-weight: 600;
color: var(--wv-gray-900, #333);
}
.shpcrt-close-btn {
background: var(--wv-gray-50, #f5f5f5);
border: none;
color: var(--wv-gray-900, #333);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.shpcrt-close-btn:hover {
background: var(--wv-gray-200, #e0e0e0);
}
/* Delivery Info */
.shpcrt-delivery-info {
background: var(--wv-gray-50, #f8f9fa);
padding: 12px 20px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--wv-gray-200, #eee);
flex-shrink: 0;
}
.shpcrt-delivery-icon {
font-size: 20px;
}
.shpcrt-delivery-text {
flex: 1;
}
.shpcrt-delivery-title {
font-size: 13px;
font-weight: 600;
color: var(--wv-gray-900, #333);
margin-bottom: 2px;
}
.shpcrt-delivery-desc {
font-size: 11px;
color: var(--wv-gray-500, #666);
}
/* Mini Cart Wrapper */
.mini-cart {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Cart Items Container */
.shpcrt-items-container {
flex: 1;
overflow-y: auto;
padding: 15px;
background: var(--wv-gray-50, #fafafa);
}
.shpcrt-items-container::-webkit-scrollbar {
width: 6px;
}
.shpcrt-items-container::-webkit-scrollbar-track {
background: var(--wv-gray-100, #f1f1f1);
}
.shpcrt-items-container::-webkit-scrollbar-thumb {
background: var(--wv-gray-300, #ccc);
border-radius: 3px;
}
/* Cart Item */
.shpcrt-item {
background: white;
border-radius: 8px;
padding: 12px;
margin-bottom: 10px;
border: 1px solid var(--wv-gray-200, #e9ecef);
}
.shpcrt-item-content {
display: flex;
gap: 12px;
}
.shpcrt-item-image {
width: 80px;
height: 80px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
background: var(--wv-gray-50, #f5f5f5);
}
.shpcrt-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.shpcrt-item-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.shpcrt-item-top {
display: flex;
justify-content: space-between;
gap: 10px;
}
.shpcrt-item-details {
flex: 1;
}
.shpcrt-campaign-label {
display: inline-block;
font-size: 11px;
font-weight: 600;
color: var(--wv-accent, #BB851B);
line-height: 1.3;
margin-bottom: 3px;
}
.shpcrt-item-title {
font-size: 14px;
font-weight: 500;
color: var(--wv-gray-900, #333);
margin-bottom: 4px;
line-height: 1.3;
}
.shpcrt-item-title-info {
color: var(--wv-gray-500, #707070);
font-size: 13px;
font-weight: 500;
margin-bottom: 5px;
}
.shpcrt-price-wrapper {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.shpcrt-old-price {
font-size: 12px;
color: var(--wv-gray-500, #999);
text-decoration: line-through;
}
.shpcrt-new-price {
font-size: 14px;
font-weight: 700;
color: var(--wv-accent, #ff6b35);
}
/* Quantity and Remove */
.shpcrt-item-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.shpcrt-qty-wrapper {
display: flex;
align-items: center;
background: var(--wv-gray-50, #f5f5f5);
border-radius: 6px;
border: 1px solid var(--wv-gray-200, #e0e0e0);
}
.shpcrt-qty-btn {
background: none;
border: none;
width: 28px;
height: 28px;
cursor: pointer;
font-size: 16px;
color: var(--wv-gray-500, #666);
font-weight: 600;
transition: all 0.2s ease;
}
.shpcrt-qty-btn:hover {
color: var(--wv-gray-900, #333);
}
.shpcrt-qty-input {
width: 32px;
text-align: center;
border: none;
background: transparent;
font-size: 14px;
font-weight: 600;
color: var(--wv-gray-900, #333);
}
.shpcrt-remove-text {
font-size: 13px;
color: var(--wv-gray-500, #666);
text-decoration: underline;
cursor: pointer;
transition: color 0.2s;
}
.shpcrt-remove-text:hover {
color: var(--wv-danger, #e74c3c);
}
/* Variants */
.shpcrt-variants {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.shpcrt-variant-item {
font-size: 11px;
color: var(--wv-gray-500, #666);
background: var(--wv-gray-50, #f5f5f5);
padding: 3px 8px;
border-radius: 4px;
}
/* Campaign Badge */
.shpcrt-campaign {
margin-top: 6px;
background: #e8f5e9;
color: #2e7d32;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
}
/* Promo Code */
.shpcrt-promo-section {
padding: 15px 20px;
background: white;
border-top: 1px solid var(--wv-gray-200, #eee);
border-bottom: 1px solid var(--wv-gray-200, #eee);
flex-shrink: 0;
}
.shpcrt-promo-wrapper {
display: flex;
align-items: center;
gap: 8px;
background: var(--wv-gray-50, #f8f9fa);
padding: 10px 12px;
border-radius: 6px;
border: 1px dashed var(--wv-gray-300, #ccc);
}
.shpcrt-promo-icon {
width: 20px;
height: 20px;
background: var(--wv-primary, #4caf50);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
}
.shpcrt-promo-text {
flex: 1;
font-size: 13px;
color: var(--wv-gray-900, #333);
}
.shpcrt-promo-btn {
font-size: 12px;
color: var(--wv-gray-500, #666);
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
}
/* Footer */
.shpcrt-footer {
padding: 20px;
background: white;
border-top: 1px solid var(--wv-gray-200, #eee);
flex-shrink: 0;
}
.shpcrt-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.shpcrt-summary-label {
font-size: 14px;
color: var(--wv-gray-500, #666);
}
.shpcrt-summary-value {
font-size: 14px;
color: var(--wv-gray-900, #333);
font-weight: 500;
}
.shpcrt-total-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.shpcrt-total-label {
font-size: 16px;
font-weight: 600;
color: var(--wv-gray-900, #333);
}
.shpcrt-total-price {
font-size: 20px;
font-weight: 700;
color: var(--wv-gray-900, #333);
}
.shpcrt-checkout-btn {
width: 100%;
background: var(--wv-primary, #4caf50);
color: white;
border: none;
padding: 14px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
margin-top: 10px;
transition: all 0.3s ease;
}
.shpcrt-checkout-btn:hover {
background: var(--wv-primary-hover, #45a049);
transform: translateY(-1px);
}
.shpcrt-continue-btn {
width: 100%;
background: var(--wv-primary-soft, white);
border:none;
color: var(--wv-primary, #666);
padding: 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.shpcrt-continue-btn:hover {
background: var(--wv-primary, #f5f5f5);
color: var(--wv-primary-fg, #666);
}
/* Responsive */
@media (max-width: 768px) {
.shpcrt-sidebar {
width: 100%;
right: -100%;
}
.shpcrt-header {
padding: 15px;
}
.shpcrt-header h2 {
font-size: 18px;
}
.shpcrt-delivery-info {
padding: 10px 15px;
}
.shpcrt-items-container {
padding: 10px;
}
.shpcrt-item {
padding: 10px;
margin-bottom: 8px;
}
.shpcrt-item-image {
width: 70px;
height: 70px;
}
.shpcrt-item-title {
font-size: 13px;
}
.shpcrt-old-price {
font-size: 11px;
}
.shpcrt-new-price {
font-size: 13px;
}
.shpcrt-qty-btn {
width: 26px;
height: 26px;
font-size: 14px;
}
.shpcrt-qty-input {
width: 30px;
font-size: 13px;
}
.shpcrt-remove-text {
font-size: 12px;
}
.shpcrt-variant-item {
font-size: 10px;
padding: 2px 6px;
}
.shpcrt-campaign {
font-size: 10px;
padding: 3px 6px;
}
.shpcrt-promo-section {
padding: 12px 15px;
}
.shpcrt-footer {
padding: 15px;
}
.shpcrt-summary-label,
.shpcrt-summary-value {
font-size: 13px;
}
.shpcrt-total-label {
font-size: 15px;
}
.shpcrt-total-price {
font-size: 18px;
}
.shpcrt-checkout-btn {
padding: 13px;
font-size: 14px;
}
.shpcrt-continue-btn {
padding: 11px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.shpcrt-cart-btn {
padding: 12px 16px;
font-size: 14px;
}
}
/* ============================================================
TOAST — minimal pill (header-içi mobile, sağ üst desktop)
============================================================ */
.toast-container {
position: fixed;
top: 18px;
right: 20px;
z-index: 999999;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
pointer-events: none;
will-change: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.toast {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--wv-white, #fff);
border-radius: 6px;
padding: 10px 14px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.06);
font-size: 13px;
font-weight: 500;
color: var(--wv-gray-900, #1f2937);
line-height: 1.3;
width: max-content;
max-width: 320px;
opacity: 0;
transform: translateY(-8px) scale(0.96);
transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: auto;
}
.toast-content { width: max-content; max-width: 100%; }
.toast.show {
opacity: 1;
transform: translateY(0) scale(1);
}
.toast-content {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.toast-icon {
width: 22px;
height: 22px;
border-radius: 50%;
flex-shrink: 0;
color: var(--wv-white, #fff);
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.toast.success .toast-icon { background: var(--wv-success, #10b981); }
.toast.error .toast-icon { background: var(--wv-danger, #ef4444); }
.toast.warning .toast-icon { background: var(--wv-warning, #f59e0b); }
.toast.info .toast-icon { background: var(--wv-info, #3b82f6); }
.toast-text { min-width: 0; }
.toast-message {
font-size: 13px;
color: var(--wv-gray-900, #1f2937);
font-weight: 500;
text-align: center;
word-break: break-word;
overflow-wrap: anywhere;
}
/* Eski markup ile uyum için artık kullanılmayan elemanlar gizlensin */
.toast-close,
.toast-progress,
.toast-title { display: none !important; }
/* Mobile: header içine ortada konumlandır (görseldeki gibi) */
@media (max-width: 767.98px) {
.toast-container {
top: 12px;
left: 50%;
right: auto;
transform: translate3d(-50%, 0, 0);
align-items: center;
}
.toast {
font-size: 12.5px;
padding: 8px 14px;
max-width: calc(100vw - 24px);
}
.toast-message { max-width: none; }
}
/* product card image ratio */
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-9-16 { aspect-ratio: 9 / 16; }
/* product rating */
.product-rating {
position: relative;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
min-height: 14px;
}
.rating-score {
font-weight: 600;
color: var(--wv-gray-900, #1a1a1a);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.stars-display {
width: 90px;
height: 15px;
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(90deg, #FFB800 var(--percent), var(--wv-gray-200, #E0E0E0) var(--percent));
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat left center;
-webkit-mask-size: 100% 100%;
mask: url('data:image/svg+xml;utf8,') no-repeat left center;
mask-size: 100% 100%;
}
.stars-display::before, .stars-display::after {
content: none !important;
display: none !important;
}
.review-count {
color: var(--wv-gray-500, #888);
font-size: 11px;
white-space: nowrap;
margin-left: 100px;
}
/* Modal Genel Ayarları: Pürüzsüz köşeler ve yumuşak, geniş bir gölge */
.minimal-modal {
border-radius: 24px;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
background-color: var(--wv-white, #ffffff);
}
/* Özel Form Modalı: iframe içindeki form, kendi genişliğine göre sütuna geçer.
Varsayılan modal (500px) iframe'i 768px eşiğinin altında bıraktığı için alanlar
masaüstünde de alt alta düşüyordu. Geniş ekranda pencere büyütülür; mobilde
dokunulmaz, alanlar tek sütun kalır. */
@media (min-width: 900px) {
#customFormModal .modal-dialog { max-width: 860px; }
}
/* iframe'in kendi border-radius'u mobilde kaydırma sırasında kırpmayı bırakabiliyor
(köşede arka plan sızıyor). Kırpmayı iframe'e değil kapsayıcılara yaptırıyoruz. */
#customFormModal .modal-content { overflow: hidden; }
#customFormModal .modal-body { overflow: hidden; border-radius: inherit; }
/* Kaydırma iframe'in sonuna gelince hareket arkadaki sayfaya/modala taşmasın */
#customFormModal .modal-body,
#customform-modal-frame { overscroll-behavior: contain; }
/* Kapatma butonunu sağ üst köşeye sabitleme ve hafif şeffaflaştırma */
.minimal-close {
position: absolute;
top: 24px;
right: 24px;
z-index: 10;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.minimal-close:hover {
opacity: 1;
}
/* Minimal Input: Kutuyu kaldır, sadece alt çizgi bırak */
.minimal-input {
border: none;
border-bottom: 2px solid var(--wv-gray-200, #e9ecef);
border-radius: 0;
padding: 10px 0;
font-size: 1.1rem;
background-color: transparent;
box-shadow: none !important; /* Bootstrap'in mavi parlama efektini kapatır */
transition: border-color 0.3s ease;
text-align: center; /* Yazıyı ortala */
}
/* Inputa tıklandığında alt çizginin siyah olması (Yüksek kontrast) */
.minimal-input:focus {
border-bottom: 2px solid var(--wv-gray-900, #212529);
}
/* Gönder Butonu Efektleri */
.minimal-btn {
border-radius: 12px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.minimal-btn:hover {
transform: translateY(-2px); /* Üzerine gelince çok hafif yukarı kalkar */
box-shadow: 0 8px 15px rgba(33, 37, 41, 0.2);
}
/* Kisa icerikli sayfalarda (or. sonuc bulunamayan arama/kategori) footer'in
yukari cikmamasi icin: govde dikey flex olur, ana icerik (#wsv-main) kalan
alani doldurur, footer her zaman ekranin altina yapisik kalir. */
body {
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
}
#wsv-main {
flex: 1 0 auto;
width: 100%;
}
/* =============================================
LAYOUT SATIRLARI — MODÜLLER ARASI DİKEY BOŞLUK
---------------------------------------------
Modüllerin bir kısmı kendi sarmalayıcısında mt-3 taşır (Öne Çıkan Ürünler,
Resim+Yazı, Video), bir kısmı taşımaz (Banner, HTML, Kayan Yazı). Bu yüzden
aynı satır ayarıyla farklı boşluklar oluşuyor, düzen dengesiz görünüyordu.
Çözüm: dikey boşluk TEK YERDEN — satırın kendi ayarlarından — yönetilir.
Modül üstü boşluk sıfırlanır (Bootstrap utility'leri !important taşıdığı için
burada da gerekir). Aynı satırda alt alta düşen modüller birbirine yapışmasın
diye satıra row-gap verilir; bu boşluk yalnızca satır kaydığında (mobil)
devreye girer, yan yana dizilimde fazladan boşluk yaratmaz.
============================================= */
.layout-row-wrapper > .container > .row,
.layout-row-wrapper > .container-fluid > .row,
.layout-row > .container > .row,
.layout-row > .container-fluid > .row {
row-gap: 1rem;
}
.layout-row-wrapper > .container > .row > [class*="col-"],
.layout-row-wrapper > .container-fluid > .row > [class*="col-"],
.layout-row > .container > .row > [class*="col-"],
.layout-row > .container-fluid > .row > [class*="col-"] {
margin-top: 0 !important;
}
/* Kenar boşluksuz satırlarda modüller doğrudan sarmalayıcının altındadır */
.layout-row-wrapper.layout-row-container-full > [class*="col-"],
.layout-row.layout-row-container-full > [class*="col-"] {
margin-top: 0 !important;
}
/* === assets/frontend/css/theme_custom.css === */
/* --- THEME CUSTOM --- */
body {
font-family: "Roboto", sans-serif;
background-color: var(--wv-gray-50, #f5f5f5);
color: var(--wv-gray-900, #000000);
}
a {
color: var(--wv-primary, #000000);
}
button {
background-color: var(--wv-primary, #000000);
color: var(--wv-primary-fg, #ffffff);
}
i {
color: var(--wv-gray-900, #000000);
}
button i {
color: currentColor;
}
.breadcrumb {
background: transparent;
border-radius: 8px;
margin: 10px 0;
font-size: 14px;
}
.breadcrumb a {
color: var(--wv-primary, #2ba40a);
text-decoration: none;
}
.breadcrumb a:hover {
color: var(--wv-primary-hover, #52fb46);
}
.breadcrumb i {
color: var(--wv-primary, #2ba40a);
text-decoration: none;
}
.breadcrumb span.active {
color: var(--wv-gray-700, #2e8500);
font-weight: 700;
}
.shpcrt-header {
background: var(--wv-white, #ffffff);
border-bottom-color: var(--wv-white, #ffffff);
}
.shpcrt-header h2 {
color: var(--wv-gray-900, #333333);
font-weight: 600;
}
.shpcrt-close-btn {
background: var(--wv-gray-50, #f5f5f5);
color: var(--wv-gray-900, #333333);
}
.shpcrt-items-container {
background: var(--wv-gray-50, #fafafa);
}
.shpcrt-item {
background: var(--wv-white, #ffffff);
border-color: var(--wv-gray-200, #e9ecef);
}
.shpcrt-item-title {
color: var(--wv-gray-900, #333333);
font-weight: 500;
}
.shpcrt-new-price {
color: var(--wv-accent, #ff6b35);
font-weight: 700;
}
.shpcrt-qty-wrapper {
background: var(--wv-gray-50, #f5f5f5);
border-color: var(--wv-gray-200, #e0e0e0);
}
.shpcrt-qty-btn {
color: var(--wv-gray-500, #666666);
}
.shpcrt-qty-input {
color: var(--wv-gray-900, #333333);
font-weight: 600;
}
.shpcrt-remove-text {
color: var(--wv-gray-500, #666666);
font-weight: 400;
}
.shpcrt-remove-text:hover {
color: var(--wv-danger, #e74c3c);
}
.shpcrt-footer {
background: var(--wv-white, #ffffff);
border-color: var(--wv-gray-200, #eeeeee);
}
.shpcrt-total-label {
color: var(--wv-gray-900, #333333);
font-weight: 600;
}
.shpcrt-total-price {
color: var(--wv-gray-900, #333333);
font-weight: 700;
}
.shpcrt-continue-btn {
background: var(--wv-primary-soft, #ffffff);
color: var(--wv-primary, #666666);
}
.shpcrt-continue-btn:hover {
background: var(--wv-primary, #ffffff);
color: var(--wv-primary-fg, #666666);
}
.shpcrt-checkout-btn {
background: var(--wv-primary, #4caf50);
color: var(--wv-primary-fg, #ffffff);
}
.shpcrt-checkout-btn:hover {
background: var(--wv-primary-hover, #4caf50);
color: var(--wv-primary-fg, #ffffff);
}
/* === assets/frontend/css/product/product_1_base.css === */
.pd-badges-wrapper {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
z-index: 100;
display: flex;
justify-content: space-between;
align-items:center;
}
.pd-product-badge {
background: transparent;
color: var(--wv-gray-900, #000000);
padding: 5px 14px;
border-radius: 8px;
font-size: 13px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.pd-campaign-badge {
padding: 5px 14px;
border-radius: 8px;
font-size: 13px;
background: var(--wv-accent, #ff4757);
color: var(--wv-accent-fg, #fff);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.pd-info-card {
border-radius: 8px;
padding: 10px;
margin-bottom: 20px;
/* Kart çok kısalınca (örneğin kargo geri sayım modülü kapalıyken) sağdaki
absolute ikon sütunu buton satırıyla çakışıyordu; taban yükseklik verilir */
min-height: 150px;
}
.pd-info-card-html {
border-radius: 8px;
margin-bottom: 20px;
}
.pd-brand {
font-size: 18px;
margin-bottom: 5px;
}
.pd-title {
font-size: 18px;
margin-bottom: 1px;
}
.pd-subtitle {
font-size: 14px;
margin-bottom: 10px;
}
.pd-price-box {
display: flex;
align-items: center;
gap: 15px;
margin: 5px 0 15px 0;
}
.pd-discount-price {
font-size: 18px;
font-weight: 500;
color:var(--wv-gray-900, #000000);
}
.pd-old-price {
font-size: 18px;
text-decoration: line-through;
}
.pd-price {
font-size: 18px;
}
.pd-discount-badge {
background: var(--wv-success, #00b894);
color: var(--wv-white, #fff);
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
display: inline-block;
}
.pd-campaign {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--wv-white, #fff);
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
.pd-campaign-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.pd-campaign-text {
font-size: 13px;
opacity: 0.95;
}
.pd-variant-section {
margin-bottom: 25px;
}
.pd-variant-label {
font-size: 15px;
margin-bottom: 12px;
}
.pd-color-options {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.pd-color-option {
position: relative;
}
.pd-color-option input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.pd-color-option label {
display: block;
width: 30px;
height: 30px;
border: 2px solid var(--wv-gray-200, #e0e0e0);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
}
.pd-color-option input[type="radio"]:disabled + label {
opacity: 0.3;
cursor: not-allowed;
}
.pd-size-options {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.pd-size-option {
position: relative;
}
.pd-size-option input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.pd-size-option label {
display: block;
min-width: 40px;
padding: 5px;
border: 2px solid var(--wv-gray-200, #efefef);
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
text-align: center;
min-height: 30px;
}
.pd-size-option input[type="radio"]:disabled + label {
opacity: 0.3;
cursor: not-allowed;
text-decoration: line-through;
}
.pd-quantity {
display: flex;
align-items: center;
gap: 25px;
/* Dar alanda buton satiri sarabilsin; tasma/ust uste binme olmasin */
flex-wrap: wrap;
}
.pd-quantity-controls {
display: flex;
border: 2px solid var(--wv-gray-200, #e0e0e0);
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
}
.pd-mobile-qty input[type="number"]::-webkit-inner-spin-button, .pd-mobile-qty input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pd-mobile-qty input[type="number"] {
-moz-appearance: textfield;
}
.pd-qty-btn {
width: 40px;
height: 40px;
border: none;
cursor: pointer;
font-size: 18px;
transition: all 0.3s;
}
.pd-qty-input[type="number"]::-webkit-inner-spin-button, .pd-qty-input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pd-qty-input[type="number"] {
-moz-appearance: textfield;
}
.pd-qty-input {
width: 60px;
border: none;
border-left: 2px solid var(--wv-gray-200, #e0e0e0);
border-right: 2px solid var(--wv-gray-200, #e0e0e0);
text-align: center;
}
.pd-add-to-cart {
width: 100%;
max-width: 450px;
/* Esnek genislik: dar ekranda buton kalan alana sigar, sigmiyorsa alt satira iner */
flex: 1 1 220px;
border: none;
padding: 10px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
.pd-notify-btn {
width: 100%;
max-width: 450px;
/* Esnek genislik: sepete ekle butonuyla ayni satir davranisi */
flex: 1 1 220px;
background: var(--wv-primary, #187416);
color: var(--wv-primary-fg, #ffffff);
border: none;
padding: 10px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.pd-notify-btn:hover {
background: var(--wv-primary-hover, #5da93d);
}
.pd-favorite-btn {
width: 100%;
background: var(--wv-white, #fff);
color: var(--wv-gray-900, #333);
border: 2px solid var(--wv-gray-200, #e0e0e0);
padding: 14px;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.pd-favorite-btn:hover {
border-color: var(--wv-accent, #ff6b35);
color: var(--wv-accent, #ff6b35);
}
.pd-size-table {
position: absolute;
top: 0;
right: 0;
display:inline-flex;
align-items:center;
font-size:14px;
color:var(--wv-gray-900, #000000);
gap:8px;
padding:10px;
font-weight:500;
}
.pd-size-table i {
vertical-align: middle;
font-size: 14px;
position: relative;
top: 1px;
color:var(--wv-gray-900, #000000);
}
.pd-tabs {
border-radius: 8px;
overflow: hidden;
}
.pd-tabs .nav-tabs {
border-bottom: 2px solid var(--wv-gray-200, #f0f0f0);
padding: 0;
}
.pd-tabs .nav-tabs .nav-link {
padding: 18px 30px;
border: none;
cursor: pointer;
font-size: 15px;
border-bottom: 3px solid transparent;
transition: all 0.3s;
white-space: nowrap;
border-radius: 0;
}
.pd-tabs .tab-content {
padding: 18px 22px;
}
.pd-tabs .tab-content img {
width: 100%;
}
.pd-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
}
.pd-feature-item {
padding: 18px 20px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s;
}
.pd-feature-label {
font-size: 14px;
}
.pd-feature-value {
font-size: 14px;
text-align: right;
}
.pd-review-item {
padding: 20px 0;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.pd-review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.pd-review-date {
font-size: 13px;
}
.pd-similar-products {
border-radius: 8px;
padding: 25px;
margin-top: 20px;
margin-bottom: 20px;
}
.pd-section-title {
font-size: 22px;
margin-bottom: 20px;
}
.pd-bundle {
background: var(--wv-white, #fff);
border-radius: 12px;
padding: 10px;
margin-top: 30px;
border: 1px solid var(--wv-gray-200, #e0e0e0);
}
.pd-bundle-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.pd-bundle-title {
font-size: 18px;
font-weight: 600;
color: var(--wv-gray-900, #333);
}
.pd-bundle-savings {
background: var(--wv-accent, #ff6b35);
color: var(--wv-accent-fg, #fff);
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
}
.pd-bundle-content {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.pd-bundle-products {
flex: 1;
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.pd-bundle-item {
display: flex;
align-items: stretch;
gap: 15px;
padding: 15px;
background: var(--wv-gray-50, #f9f9f9);
border-radius: 8px;
min-width: 200px;
}
.pd-bundle-item-img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
align-self: center;
}
.pd-bundle-item-info {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.pd-bundle-item-title {
font-size: 13px;
margin-bottom: 8px;
line-height: 1.4;
}
.pd-bundle-item-price {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: auto;
}
.pd-bundle-item-old-price {
font-size: 12px;
color: var(--wv-gray-500, #999);
text-decoration: line-through;
}
.pd-bundle-item-new-price {
font-size: 16px;
font-weight: 700;
}
.pd-bundle-plus {
font-size: 24px;
font-weight: 600;
color: var(--wv-gray-500, #999);
margin: 0 10px;
}
.pd-bundle-actions {
display: flex;
flex-direction: column;
gap: 15px;
min-width: 250px;
}
.pd-bundle-total-box {
text-align: right;
}
.pd-bundle-total-label {
font-size: 14px;
color: var(--wv-gray-500, #666);
margin-bottom: 5px;
}
.pd-bundle-total-price {
font-size: 28px;
font-weight: 700;
color: var(--wv-accent, #ff6b35);
}
.pd-bundle-add-btn {
width: 100%;
background: var(--wv-accent, #ff6b35);
color: var(--wv-accent-fg, #fff);
border: none;
padding: 14px 20px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.pd-bundle-add-btn:hover {
background: var(--wv-accent-hover, #e55a2b);
}
.pd-mobile-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid var(--wv-gray-200, #e0e0e0);
padding: 15px;
z-index: 1000;
box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}
.pd-mobile-bar-content {
display: flex;
align-items: center;
gap: 10px;
}
.pd-mobile-price {
flex: 1;
}
.pd-mobile-price-amount {
font-size: 14px;
white-space: nowrap;
}
.pd-mobile-qty {
display: flex;
border: 1px solid var(--wv-gray-200, #e0e0e0);
border-radius: 6px;
overflow: hidden;
max-width: 30%;
}
.pd-mobile-qty button {
width: 35px;
height: 35px;
border: none;
cursor: pointer;
}
.pd-mobile-qty input {
width: 30px;
border: none;
border-left: 1px solid var(--wv-gray-200, #e0e0e0);
border-right: 1px solid var(--wv-gray-200, #e0e0e0);
text-align: center;
}
.pd-mobile-add-btn {
flex: 1;
border: none;
padding: 8px;
border-radius: 6px;
font-size: 14px;
white-space: nowrap;
}
/* Mobil quantity butonlarında çift tıklama zoom'unu engelle */
.pd-mobile-qty button,
.pd-mobile-qty input {
touch-action: manipulation;
}
/* pd-info-card sağ üst aksiyonlar */
.pd-info-card .pd-top-actions {
position: absolute;
top: 10px;
right: 15px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
z-index: 2;
}
.pd-info-card .pd-icon-btn {
background: var(--wv-gray-100, #f5f5f5);
border: none;
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--wv-gray-900, #333);
font-size: 15px;
transition: background 0.2s, color 0.2s;
padding: 0;
}
.pd-info-card .pd-icon-btn:hover {
background: var(--wv-gray-200, #e9e9e9);
color: var(--wv-gray-900, #000);
}
.pd-info-card .pd-icon-btn.active {
background: #ffe5e5;
color: var(--wv-danger, #e53935);
}
.pd-info-card .pd-size-table-link {
font-size: 13px;
color: var(--wv-gray-900, #333);
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
margin-top: 4px;
}
.pd-info-card .pd-size-table-link:hover {
color: var(--wv-gray-900, #000);
text-decoration: underline !important;
}
.pd-info-card .pd-size-table-link i {
font-size: 11px;
}
/* Başlık ve marka ikon alanıyla çakışmasın */
.pd-info-card .pd-title,
.pd-info-card .pd-subtitle {
padding-right: 55px;
}
/* Sağdaki absolute ikon sütunu, kart kısayken (ör. kargo geri sayım modülü
kapalıyken) aşağı sarkıp sepete ekle satırıyla çakışabiliyor (1366px'te
görülür). Buton satırında ikon şeridi kadar sağ boşluk bırakılır. */
@media (min-width: 768px) {
.pd-info-card .pd-quantity {
padding-right: 60px;
}
}
.beden-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.beden-overlay.active { opacity: 1; visibility: visible; }
.beden-sidebar { position: fixed; top: 0; right: -700px; width: 700px; max-width: 100%; height: 100%; background: var(--wv-white, #fff); z-index: 9999; transition: right 0.4s ease; display: flex; flex-direction: column; }
.beden-sidebar.active { right: 0; }
.beden-header { display: flex; justify-content: space-between; align-items: center; padding: 25px 30px; border-bottom: 1px solid var(--wv-gray-200, #e5e5e5); }
.beden-header h2 { font-size: 15px; font-weight: bold; letter-spacing: 2px; color: var(--wv-gray-900, #000); margin: 0; }
.beden-close { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--wv-gray-900, #000); line-height: 1; }
.beden-content { flex: 1; padding: 30px 40px; overflow-y: auto; }
.beden-content h3 { font-size: 16px; font-weight: bold; margin-bottom: 15px; color: var(--wv-gray-900, #000); }
.beden-content p { font-size: 13px; color: var(--wv-gray-700, #555); line-height: 1.6; margin-bottom: 30px; }
.tablo-baslik { font-size: 14px; font-weight: bold; margin-bottom: 20px; color: var(--wv-gray-900, #000); }
.tablo-wrapper { display: flex; gap: 30px; align-items: flex-start; }
.beden-gorsel { width: 140px; flex-shrink: 0; }
.beden-gorsel img { width: 100%; height: auto; display: block; }
.beden-tablo { width:100%; flex: 1; border-collapse: collapse; font-size: 13px; }
.beden-tablo th, .beden-tablo td { padding: 14px 10px; text-align: left; border-bottom: 1px solid var(--wv-gray-200, #eee); }
.beden-tablo th { font-weight: normal; color: var(--wv-gray-500, #888); font-size: 11px; letter-spacing: 1px; }
.beden-tablo th:first-child { background: var(--wv-gray-100, #f5f5f5); font-weight: bold; color: var(--wv-gray-900, #333); }
.beden-tablo td { color: var(--wv-gray-900, #333); }
.beden-tablo td:first-child { font-weight: bold; }
.beden-full-image img { max-width: 100%; height: auto; }
@media (max-width: 768px) {
.pd-quantity, .pd-add-to-cart {
display: none;
}
.pd-price-box {
margin-bottom: 0;
}
.pd-old-price {
font-size: 16px;
text-decoration: line-through;
}
.pd-mobile-bar {
display: block;
}
body {
padding-bottom: 80px;
}
.pd-title {
font-size: 16px;
}
.pd-brand { font-size: 16px; }
.pd-price {
font-size: 16px;
}
.pd-tabs .nav-tabs .nav-link {
padding: 15px 20px;
font-size: 14px;
}
.pd-bundle-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.pd-bundle-title {
font-size: 16px;
width: 100%;
}
.pd-bundle-savings {
align-self: flex-end;
}
.pd-bundle-content {
flex-direction: column;
}
.pd-bundle-products {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.pd-bundle-item {
width: 100%;
min-width: auto;
}
.pd-bundle-plus {
align-self: center;
margin: 5px 0;
}
.pd-bundle-actions {
width: 100%;
flex-direction: row;
align-items: center;
}
.pd-bundle-total-box {
text-align: left;
flex: 1;
}
.pd-bundle-total-label {
font-size: 13px;
}
.pd-bundle-total-price {
font-size: 22px;
}
.pd-bundle-add-btn {
flex: 0 0 55%;
padding: 12px 16px;
font-size: 14px;
}
}
.cargo-countdown-container > div {
/* flex-direction: column; */
/* text-align: center; */
}
#cargo-time-display {
font-size: 15px;
}
.beden-content { padding: 20px; }
.tablo-wrapper { flex-direction: column; }
.beden-gorsel { width: 100px; margin: 0 auto; }
.beden-tablo th, .beden-tablo td { padding: 10px 6px; font-size: 12px; }
}
@media (max-width: 576px) {
.pd-info-card .pd-top-actions {
top: 8px;
right: 10px;
}
.pd-info-card .pd-icon-btn {
width: 34px;
height: 34px;
font-size: 13px;
}
.pd-info-card .pd-size-table-link {
font-size: 12px;
}
}
#mainSwiper {
border-radius: 8px;
-webkit-user-select: none;
}
#mainSwiper, #mainSwiper .swiper-wrapper, #mainSwiper .swiper-slide {
width: 100% !important;
}
#mainSwiper img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
border-radius: 6px;
}
#thumbsSwiper {
margin-top: 12px;
}
#thumbsSwiper .swiper-slide {
width: 80px !important;
height: 80px !important;
opacity: 0.6;
cursor: pointer;
}
#thumbsSwiper .swiper-slide-thumb-active {
opacity: 1;
}
#thumbsSwiper img {
width: 100%;
height: 100%;
/* contain: urun gorseli thumb'da da kirpilmaz (3:4 oranli magazalarda kenar kaybi olmasin) */
object-fit: contain;
border-radius: 6px;
}
.pd-size-option.out-of-stock > label,
.pd-color-option.out-of-stock > label {
position: relative;
opacity: 0.5;
}
.pd-size-option > label::after,
.pd-color-option > label::after {
content: none;
}
.pd-size-option.out-of-stock > label::after,
.pd-color-option.out-of-stock > label::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 2px;
background: var(--wv-gray-500, #838383);
transform: translate(-50%, -50%) rotate(-45deg);
pointer-events: none;
}
.add-to-cart-btn.disabled, .pd-add-to-cart.disabled, button.out-of-stock {
cursor: not-allowed !important;
opacity: 0.6 !important;
}
input[type="number"]:focus {
outline: none !important;
box-shadow: none !important;
border-color: inherit !important;
}
.campaign-box {
padding: 12px;
border-radius: 8px;
font-size: 0.85rem;
display: flex;
align-items: start;
}
.campaign-box i {
font-size: 1.2rem;
margin-right: 10px;
margin-top: 2px;
}
.campaign-link {
text-decoration: underline;
font-weight: 600;
cursor: pointer;
}
.cargo-countdown-container {
margin: 20px 0px 10px 0px;
max-width: 360px;
animation: fadeIn 0.5s ease-in;
}
@media (max-width: 768px) {
.cargo-countdown-container {
max-width: 220px;
margin: 30px 0 10px 0;
}
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.cargo-countdown-text-container {
display: flex;
align-items: center;
gap: 15px;
}
.cargo-countdown-text {
font-size: 14px;
}
#cargo-time-display {
font-size: 15px;
}
.cargo-progress-bar {
position: relative;
animation: progressPulse 2s ease-in-out infinite;
}
@keyframes progressPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}
.cargo-progress-bar::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: progressShine 2s ease-in-out infinite;
}
@keyframes progressShine {
0%: { transform: translateX(-100%); };
100%: { transform: translateX(200%); };
}
.pd-bundle-item:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.pd-bundle-item-img-link {
flex-shrink: 0;
}
.pd-bundle-item-action {
flex-shrink: 0;
display: flex;
align-items: center;
align-self: center;
}
/*.pd-bundle-item-cart-btn {
border: none;
width: 34px;
height: 34px;
border-radius: 50%;
font-size: 14px;
cursor: pointer;
transition: background 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.pd-bundle-item-cart-btn i {
margin: 0;
pointer-events: none;
}*/
.pd-bundle-swiper .pd-bundle-item {
height: 100%;
}
.pd-bundle-products .pd-bundle-item-img {
width: 70px;
height: 70px;
}
.pd-bundle-products .pd-bundle-item-title {
font-size: 13px;
}
.pd-bundle-products .pd-bundle-item-new-price {
font-size: 14px;
}
.pd-bundle-products .pd-bundle-item-cart-btn {
width: 38px;
height: 38px;
font-size: 15px;
}
/* Galeri slider oklari: Swiper varsayilani (44px ok simgesi) cok buyuk kaliyor.
Mobile-first: mobilde kucuk ok, masaustunde orta boy. Tiklanabilir alan
44x44px dokunma hedefi standardinin altina dusurulmez. */
#mainSwiper {
--swiper-navigation-size: 20px;
}
#mainSwiper .swiper-button-prev,
#mainSwiper .swiper-button-next {
width: 44px;
height: 44px;
}
@media (min-width: 768px) {
#mainSwiper {
--swiper-navigation-size: 28px;
}
}
/* === assets/frontend/css/product/product_1.css === */
/* --- THEME CUSTOM --- */
.pd-product-badge {
font-weight: 600;
}
.pd-campaign-badge {
background: var(--wv-accent, #ff4757);
color: var(--wv-accent-fg, #ffffff);
font-weight: 600;
}
.pd-info-card {
background: var(--wv-white, #ffffff);
}
.pd-info-card-html {
background: transparent;
}
.pd-brand {
font-weight: 600;
color: var(--wv-primary, #ff7300);
}
.pd-title {
font-weight: 600;
color: var(--wv-gray-900, #000000);
}
.pd-subtitle {
font-weight: 600;
color: var(--wv-gray-900, #222);
}
.pd-discount-price {
color: var(--wv-gray-900, #000000);
font-weight: 500;
}
.pd-old-price {
color: var(--wv-gray-900, #000000);
}
.pd-price {
font-weight: 700;
color: var(--wv-accent, #ff7847);
}
.pd-variant-label {
font-weight: 600;
color: var(--wv-gray-900, #333);
}
.pd-color-option input[type="radio"]:checked + label {
border-color: var(--wv-accent, #ff6b35);
}
.pd-size-option label {
background: var(--wv-white, #fff);
font-weight: 500;
}
.pd-size-option label:hover {
border-color: var(--wv-accent, #ff6b35);
}
.pd-size-option input[type="radio"]:checked + label {
border-color: var(--wv-accent, #ff6b35);
color: var(--wv-accent, #ff6b35);
}
.pd-qty-btn {
background: var(--wv-primary-soft, #bddfb3);
color: var(--wv-gray-900, #000000);
}
.pd-qty-btn:hover {
background: var(--wv-primary, #87c48e);
color: var(--wv-primary-fg, #000000);
}
.pd-qty-input {
font-weight: 700;
}
.pd-add-to-cart {
background: var(--wv-primary, #187416);
color: var(--wv-primary-fg, #ffffff);
font-weight: 600;
}
.pd-add-to-cart:hover {
background: var(--wv-primary-hover, #5da93d);
}
.pd-add-to-cart.added {
background: var(--wv-success, #00b894);
}
.pd-add-to-cart.added:hover {
background: var(--wv-success, #00a383);
}
.pd-notify-btn {
background: var(--wv-primary, #187416);
color: var(--wv-primary-fg, #ffffff);
font-weight: 500;
}
.pd-notify-btn:hover {
background: var(--wv-primary-hover, #5da93d);
}
.pd-size-table {
color: var(--wv-gray-900, #000000);
font-weight: 500;
}
.pd-size-table i {
color: var(--wv-gray-900, #000000);
}
.pd-tabs {
background: transparent;
}
.pd-tabs .nav-tabs .nav-link {
background: var(--wv-gray-100, #34b11b);
font-weight: 600;
color: var(--wv-gray-700, #a91919);
}
.pd-tabs .nav-tabs .nav-link:hover {
color: var(--wv-primary, #ff6b35);
border-color: transparent;
}
.pd-tabs .nav-tabs .nav-link.active {
color: var(--wv-primary, #08ba25);
border-bottom-color: var(--wv-primary, #42a60c);
background: none;
}
.pd-feature-item {
background: var(--wv-gray-50, #f8f8f8);
}
.pd-feature-item:hover {
background: var(--wv-gray-100, #f0f0f0);
}
.pd-feature-label {
color: var(--wv-gray-500, #666);
font-weight: 500;
}
.pd-feature-value {
color: var(--wv-gray-900, #9a4c4c);
font-weight: 600;
}
.pd-review-item {
border-bottom-color: var(--wv-gray-200, #f0f0f0);
}
.pd-reviewer-name {
font-weight: 600;
color: var(--wv-gray-900, #333);
}
.pd-review-date {
color: var(--wv-gray-500, #999);
}
.pd-similar-products {
background: var(--wv-white, #ffffff);
}
.pd-section-title {
font-weight: 600;
color: var(--wv-gray-900, #000000);
}
.pd-mobile-bar {
background: var(--wv-white, #fff);
}
.pd-mobile-price-amount {
font-weight: 500;
color: var(--wv-gray-900, #000000);
}
.pd-mobile-qty button {
background: var(--wv-white, #ffffff);
color: var(--wv-gray-900, #333);
}
.pd-mobile-qty input {
font-weight: 600;
}
.pd-mobile-add-btn {
background: var(--wv-primary, #ff6b35);
color: var(--wv-primary-fg, #fff);
font-weight: 600;
}
#mainSwiper {
background: none;
}
.swiper-button-next, .swiper-button-prev {
color: var(--wv-accent, #ff6b35) !important;
}
.pd-size-option.out-of-stock label {
color: var(--wv-gray-500, #999) !important;
}
.add-to-cart-btn.disabled, .pd-add-to-cart.disabled, button.out-of-stock {
background-color: var(--wv-gray-300, #ccc) !important;
}
.cargo-countdown-text {
color: var(--wv-gray-900, #050505);
}
#cargo-time-display {
color: var(--wv-danger, #dc3545);
}
.cargo-progress-bar {
background: var(--wv-danger, #dc3545);
}
.pd-bundle-item-action i {
color: var(--wv-gray-900, #000000);
}
/* === assets/frontend/css/widgets/product_cards/product_card_1_base.css === */
/* --- PRODUCT CARD 1 BASE CSS (editable:false) --- */
.ecom-product-card {
border-width: 1px;
border-style: solid;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 8px;
}
.ecom-product-card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.ecom-product-image-wrapper {
position: relative;
overflow: hidden;
}
.ecom-product-image {
width: 100%;
/* width/height attribute'leri yalnizca CLS oran bilgisidir; boyutu CSS yonetir */
height: 100%;
/* contain: urun gorseli asla kirpilmaz; bosluklar kart zeminiyle dolar */
object-fit: contain;
}
.ecom-product-badge {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
z-index: 2;
}
.ecom-product-badge.flash {
background: var(--wv-warning, #ff9500);
}
.ecom-product-badge.stock {
background: var(--wv-success, #00b894);
}
.ecom-product-heart {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: var(--wv-gray-500, #888);
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
transition: color 0.2s, background 0.2s, transform 0.2s;
z-index: 2;
}
.ecom-product-heart:hover {
background: var(--wv-white, #fff);
color: var(--wv-danger, #e53935);
transform: scale(1.08);
}
.ecom-product-heart.active {
color: var(--wv-danger, #e53935);
}
.ecom-product-heart:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ecom-product-info {
padding: 8px;
display: flex;
flex-direction: column;
flex: 1;
}
.ecom-product-title, .ecom-product-title a {
font-size: 14px;
margin-bottom: 8px;
height: calc(14.5px * 1.4 * 2);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ecom-product-price-wrapper {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ecom-product-old-price {
font-size: 14px;
text-decoration: line-through;
}
.ecom-product-price {
font-size: 14px;
}
.product-rating{
margin:5px 0;
}
.ecom-product-discount-badge {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
color: var(--wv-accent, #e53935);
}
.ecom-product-campaign {
display: flex;
align-items: center;
gap: 6px;
background-color: transparent;
color: var(--wv-accent, #ff6b35);
font-weight: 600;
font-size: 12px;
padding: 0 0 6px 0;
line-height: 1.3;
flex-wrap: wrap;
margin-top: 5px;
}
.ecom-campaign-label {
white-space: nowrap;
}
.ecom-product-installment {
font-size: 11px;
color: var(--wv-gray-500, #666);
margin-top: 5px;
}
.ecom-add-to-cart-btn {
width: 100%;
border: none;
padding: 12px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
margin-top: auto;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.ecom-add-to-cart-btn:hover {
transform: translateY(-2px);
}
.ecom-add-to-cart-btn:active {
transform: translateY(0);
}
.ecom-add-to-cart-btn:disabled, .ecom-add-to-cart-btn:disabled:hover {
box-shadow: none;
cursor: default;
transform: none;
}
.product-card-notify-btn {
width: 100%;
border: none;
padding: 12px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
margin-top: auto;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.product-card-notify-btn:hover {
transform: translateY(-2px);
}
.product-card-notify-btn:active {
transform: translateY(0);
}
.product-card-notify-btn:disabled, .product-card-notify-btn:disabled:hover {
box-shadow: none;
cursor: default;
transform: none;
}
.owl-stage {
display: flex !important;
align-items: stretch;
}
.owl-item {
display: flex !important;
flex-direction: column;
height: auto !important;
}
.owl-item .ecom-product-card {
flex: 1 0 auto;
display: flex;
flex-direction: column;
height: 100%;
}
.product-image-slider .swiper-pagination {
bottom: 5px !important;
}
.product-image-slider .swiper-pagination-bullet {
width: 6px;
height: 6px;
opacity: 0.5;
}
.product-image-slider .swiper-pagination-bullet-active {
opacity: 1;
width: 12px;
border-radius: 4px;
}
@media (max-width: 768px) {
.swiper-wrapper {
height: auto;
}
}
/* === assets/frontend/css/widgets/product_cards/product_card_1.css === */
/* --- THEME CUSTOM --- */
.ecom-product-card {
background: none;
border-color: var(--wv-gray-200, #3a9e10);
border-radius: 8px;
}
.ecom-product-image-wrapper {
background: none;
}
.ecom-product-badge {
background: var(--wv-accent, #ff6b35);
color: var(--wv-accent-fg, #fff);
font-weight: 600;
}
.ecom-product-title, .ecom-product-title a {
color: var(--wv-gray-900, #333);
font-weight: 400;
}
.ecom-product-old-price {
color: var(--wv-gray-500, #999);
font-weight: 500;
}
.ecom-product-price {
font-weight: 700;
color: var(--wv-accent, #ff6b35);
}
.ecom-add-to-cart-btn {
background: var(--wv-primary, #12640c);
color: var(--wv-primary-fg, #ffffff);
font-weight: 500;
}
.ecom-add-to-cart-btn:hover {
background: var(--wv-primary-hover, #e55a2b);
}
.ecom-add-to-cart-btn:disabled, .ecom-add-to-cart-btn:disabled:hover {
background: var(--wv-gray-500, #6d6d6d);
}
.ecom-add-to-cart-btn.added {
background: var(--wv-success, #00b894);
}
.ecom-add-to-cart-btn.added:hover {
background: var(--wv-success, #00a383);
}
.product-card-notify-btn {
background: var(--wv-primary, #187416);
color: var(--wv-primary-fg, #ffffff);
font-weight: 500;
}
.product-card-notify-btn:hover {
background: var(--wv-primary-hover, #5da93d);
}
.product-image-slider .swiper-pagination-bullet {
background: var(--wv-accent, #ff6b35);
}
.ecom-product-discount-badge {
color: var(--wv-accent, #e53935);
font-weight: 600;
}
.ecom-product-campaign {
color: var(--wv-accent, #c62828);
font-weight: 600;
border-bottom-color: var(--wv-accent, #c62828);
}
/* === assets/frontend/css/header/header_5_base.css === */
/* --- HEADER 5 BASE CSS (editable:false) --- */
/* Parametrik header: tum gorunum varyantlari .wvh5--* modifier siniflariyla cozulur.
Renkler header_5.css (panelden uretilir) icindeki CSS degiskenlerinden gelir. */
/* Sticky footer: icerik az olsa bile footer her zaman en altta kalsin */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ============================================================
RENK MODELI — rol tabanli
Panelden yalnizca ROLLER secilir (Renkler bolumu, 4 grup):
--wvh5-bg / --wvh5-fg / --wvh5-icon : header yuzeyi ve icerigi
--wvh5-accent / --wvh5-accent-fg : rozet, hover, secili durum
--wvh5-border : cizgi ve kenarliklar
--wvh5-row2-bg / --wvh5-row2-fg : alt satir yuzeyi
--wvh5-panel-bg / --wvh5-panel-fg : acilir paneller
--wvh5-topbar-bg / --wvh5-topbar-fg : duyuru serididir (.wvh5-top-bar)
Eleman basina renk YOKTUR: her yeni parca bu rollerden birine baglanir.
Ince tonlar (hover zemini, ikincil yuzey, soluk yazi) rollerden turetilir;
asagidaki --wvh5-hover-bg / --wvh5-panel-alt-bg / --wvh5-muted bunlardir.
============================================================ */
/* Rollerden turetilen ic tonlar. Panelde ayri ayar olarak gorunmezler:
secilen rollerden hesaplanirlar, boylece tenant 6 renk secince hover
zemini / ikincil yuzey / soluk yazi kendiliginden uyumlu olur.
:root'ta durmalari sart — mobil menu offcanvas'i ve arama katmani
nav'in DISINDA basilir, navbar'da tanimlansa oralara ulasmazlardi. */
:root {
--wvh5-hover-bg: color-mix(in srgb, var(--wvh5-accent, #1f2b3e) 8%, transparent);
--wvh5-panel-alt-bg: color-mix(in srgb, var(--wvh5-panel-fg, #1f2b3e) 4%, var(--wvh5-panel-bg, #ffffff));
--wvh5-muted: color-mix(in srgb, var(--wvh5-panel-fg, #1f2b3e) 55%, transparent);
--wvh5-border-soft: color-mix(in srgb, var(--wvh5-border, #e8e8e8) 55%, transparent);
}
/* ---------- Nav govdesi ---------- */
.wvh5-navbar.navbar {
background-color: var(--wvh5-bg, #ffffff);
color: var(--wvh5-fg, #1f2b3e);
/* Header ile sayfa icerigi arasinda nefes payi: her ekranda 10px.
Dis bosluk (margin) kullanilir: ic dolgu --wvh5-py yogunluk ayarina
bagli oldugu icin oraya eklenirse yogunluk secimiyle birlikte degisirdi.
Sayfanin ilk blogu tam ekran slider ise .wvh5--flush-bottom ile sifirlanir. */
margin-bottom: 10px;
/* Yogunluk (density) degiskenleri: modifier siniflar asagida ezer */
--wvh5-py: 0.5rem;
--wvh5-link-py: 1.25rem;
/* Genis arama cubugunun akiskan tavani: dar masaustunde daralir, genis
ekranda buyur. Hem grid kolonu hem formun max-width'i bu degeri kullanir
ki ikisi hicbir genislikte birbirinden ayrilmasin. */
--wvh5-bar-max: clamp(240px, 36vw, 620px);
padding-top: var(--wvh5-py);
padding-bottom: var(--wvh5-py);
flex-wrap: wrap; /* alt satir menu (below) icin */
transition: padding 0.25s ease;
}
/* ---------- Tema sizintisi kalkani ----------
theme_custom.css header'in icine karisir:
i { color: ... } button i { color: ... } button { background: ...; color: ... }
Bu kurallar her yeni ikon/dugmede tek tek ezilmek zorunda kaliniyordu
(unutulan biri yanlis renkte kaliyordu). Kalkan bir kez burada kurulur:
header icindeki tum ikon ve dugmeler rengini kendi kapsayicisindan alir.
Ozgullugu tek sinif + eleman: asagidaki rol kurallari bunu rahatca ezer. */
.wvh5-navbar i,
.wvh5-navbar button,
.wvh5-navbar button i,
.wvh5-navbar a,
.wvh5-navbar a i {
color: inherit;
}
.wvh5-navbar button {
background-color: transparent;
}
.wvh5-navbar .nav-link {
color: var(--wvh5-fg, #1f2b3e);
}
/* Ikonlar (menu ikonlari, sag ikon grubu, hamburger) tek rolden beslenir */
.wvh5-navbar .navbar-toggler,
.wvh5-navbar .wsv-menu-ic,
.wvh5-header-icons .btn {
color: var(--wvh5-icon, var(--wvh5-fg, #1f2b3e));
}
/* Menu baglantilarinin kalinligi Renkler bolumunden secilir.
Deger header_5.css'te (panelden uretilen) --wvh5-nav-weight ile gelir;
tanimli degilse tarayici varsayilani olan normal (400) kullanilir.
Ust satir, alt satir ve mobil menu ayni kalinligi paylasir. */
.wvh5-navbar .nav-link {
font-weight: var(--wvh5-nav-weight, 400);
}
/* ---------- Renk semasi: koyu ----------
Hazir koyu palet. Uc sinifli secici, header_5.css'teki (panelden uretilen)
iki sinifli tanimlari AYNI ELEMAN uzerinde ezer; acik semada panel renkleri
gecerlidir. Panel bir degiskeni baska bir elemanda tanimliyorsa (ornegin
.wvh5-extra) buradaki tanim ona ulasmaz — o durumda asagidaki gibi ayri ve
daha guclu bir kural gerekir. */
.wvh5-navbar.navbar.wvh5--scheme-dark {
--wvh5-bg: #111827;
--wvh5-fg: #f3f4f6;
--wvh5-icon: #f3f4f6;
--wvh5-accent: #f3f4f6;
--wvh5-accent-fg: #111827;
--wvh5-border: rgba(255, 255, 255, 0.12);
--wvh5-row2-bg: #0f172a;
--wvh5-row2-fg: #e5e7eb;
--wvh5-panel-bg: #1f2937;
--wvh5-panel-fg: #f3f4f6;
}
.wvh5-navbar.navbar.wvh5--scheme-dark .wvh5-inline-search-input {
color: #f3f4f6;
}
.wvh5-navbar.navbar.wvh5--scheme-dark .wvh5-inline-search-input::placeholder {
color: #6b7280;
}
.wvh5-navbar.navbar.wvh5--scheme-dark .wvh5-inline-search-input:focus {
background: #111827;
border-color: #4b5563;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
/* ---------- Buzlu cam efekti ----------
Nav yari saydamlasir, arkadaki icerik bulanik gorunur (header 3'teki gibi).
Yapiskan header ile birlikte en iyi sonucu verir. */
.wvh5-navbar.navbar.wvh5--glass {
background-color: color-mix(in srgb, var(--wvh5-bg, #ffffff) 65%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.wvh5-navbar.navbar.wvh5--glass .wvh5-row2 {
background: transparent;
}
/* Yogunluk secenekleri
(secici .wvh5-navbar.navbar ile ayni ozgullukte olmali; tek sinifla yazilirsa
yukaridaki varsayilan degisken tanimi kazanir ve yogunluk hic uygulanmaz) */
.wvh5-navbar.wvh5--density-compact { --wvh5-py: 0.15rem; --wvh5-link-py: 0.75rem; }
.wvh5-navbar.wvh5--density-normal { --wvh5-py: 0.5rem; --wvh5-link-py: 1.25rem; }
.wvh5-navbar.wvh5--density-wide { --wvh5-py: 1.25rem; --wvh5-link-py: 1.75rem; }
/* Ilk blok tam ekran slider: header'a yapissin diye alt bosluk kalkar.
Sinifi sayfa controller'i (header_flush_bottom bayragi) ekler. */
.wvh5-navbar.navbar.wvh5--flush-bottom {
margin-bottom: 0;
}
/* Kenar/golge secenekleri */
.wvh5--edge-line { border-bottom: 1px solid var(--wvh5-border, #e8e8e8); }
.wvh5--edge-shadow { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
/* Yapiskanlik secenekleri (shrink de yapiskandir, JS scroll'da kucultur) */
.wvh5--sticky-sticky,
.wvh5--sticky-shrink {
position: sticky;
top: 0;
z-index: 1030;
}
.wvh5--sticky-shrink.wvh5-shrunk {
--wvh5-py: 0.1rem;
--wvh5-link-py: 0.65rem;
}
.wvh5--sticky-shrink.wvh5-shrunk .wvh5-logo {
min-height: 32px;
}
/* ---------- Mobil satir duzeni ----------
Navbar'in Bootstrap'ten miras flex-wrap'i mobilde ikon grubunu alt satira
sarabiliyordu. Secici .wvh5-navbar ile guclendirildi: Bootstrap'in
".navbar > .container-fluid { flex-wrap: inherit }" kuralini ezmek sart,
yoksa nowrap uygulanmaz. Satir 1 icerigi asla sarmaz: dar ekranda once
ikonlar sikisir, sonra logo alani daralir; ikon grubu sabit kalir. */
.wvh5-navbar .wvh5-grid {
flex-wrap: nowrap;
}
.wvh5-cell-start {
min-width: 0;
flex-shrink: 1;
overflow: hidden;
}
.wvh5-cell-end,
.wvh5-header-icons {
flex-shrink: 0;
}
/* Otomatik sikisma (mobile-first): en dar ekran tabandir, genisledikce buyur.
320px'de 4 ikon + logo tek satirda kalir; 376px+ ve 481px+ kademeli ferahlar. */
@media (min-width: 376px) {
.wvh5-header-icons .btn,
.wvh5-header-icons > a {
--bs-btn-padding-x: 0.1rem;
min-width: 40px;
min-height: 40px;
}
.wvh5-header-icons .btn {
font-size: 1.1rem;
}
}
@media (min-width: 481px) {
.wvh5-header-icons .btn,
.wvh5-header-icons > a {
--bs-btn-padding-x: 0.15rem;
min-width: 44px;
min-height: 44px;
}
.wvh5-header-icons .btn {
font-size: 1.2rem;
}
}
/* Tablet bandi (iPad dikey/yatay-dar): mobil duzen genis ekranda kaybolmasin,
ikonlar ve dokunma alanlari bir kademe buyur */
@media (min-width: 768px) and (max-width: 991.98px) {
.wvh5-header-icons .btn,
.wvh5-header-icons > a {
--bs-btn-padding-x: 0.4rem;
min-width: 48px;
min-height: 48px;
}
.wvh5-header-icons .btn {
font-size: 1.4rem;
}
.wvh5-navbar .navbar-toggler {
font-size: 1.15rem;
}
.wvh5-logo {
min-height: 46px;
}
}
/* Ikon grubu ile logo arasinda her kosulda nefes payi kalsin */
.wvh5-header-icons {
padding-left: 8px;
}
/* ---------- Logo ---------- */
.wvh5-logo {
min-width: 0;
max-width: 100%;
}
.wvh5-logo img {
height: 100%;
width: auto;
max-width: 100%;
display: block;
object-fit: contain;
}
.wvh5-logo {
font-weight: 700;
font-size: 2rem;
letter-spacing: -1px;
color: var(--wvh5-fg, #000) !important;
/* Sabit height yerine min-height: dikey/kare logolar tasmadan sigsin */
min-height: 40px;
display: flex;
align-items: center;
transition: min-height 0.25s ease;
}
.navbar-toggler:focus {
outline: 0;
box-shadow: none;
}
/* ---------- Ikon grubu ---------- */
/* Rengi yukaridaki ortak ikon kuralindan gelir (--wvh5-icon) */
.wvh5-header-icons .btn {
border: none;
font-size: 1rem;
position: relative;
}
/* Cizgisel modda sepet icin SVG ikon (FA ucretsiz sette outline bag yok) */
.wvh5-svg-icon {
width: 1.15em;
height: 1.15em;
display: inline-block;
vertical-align: -0.15em;
}
/* Taban (en dar ekran): ikon genisligi ekranla orantili suzulur —
320px'te ~33px, 360px'te ~37px, 375px+ 38px. Sabit kademe yerine
akiskan kuculme: cok dar cihazlarda logoya alan kalir. */
.wvh5-header-icons .btn,
.wvh5-header-icons > a {
--bs-btn-padding-x: 0.05rem;
min-width: clamp(32px, 10.5vw, 38px);
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Hamburger de dar ekranda gereksiz yatay bosluk birakmasin */
.wvh5-navbar .navbar-toggler {
padding-left: 0.35rem;
padding-right: 0.35rem;
}
/* Hamburger sagda: dugme flex sirasiyla ikon grubunun sagina gecer
(bassparmak erisimi). Dugme yalniz mobilde gorundugu icin masaustu
grid duzeni etkilenmez; logo me-auto ile solda kalir. */
.wvh5--toggler-right .navbar-toggler {
order: 10;
}
/* Ikon etiketleri temel kural: mobil/tablette HER ZAMAN gizli.
Masaustu (>=992px) blogu, "Metinli" secildiyse gorunur yapar.
Bu satir olmadan etiketler mobilde basilir ve duzeni kirar. */
.wvh5-icon-label {
display: none;
}
.wvh5-cart-badge {
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
font-size: 0.7rem;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
background: var(--wvh5-accent, #1f2b3e);
color: var(--wvh5-accent-fg, #ffffff);
}
/* ---------- Ust bar (duyurular) ---------- */
.wvh5-top-bar {
background-color: var(--wvh5-topbar-bg, #1a2421);
color: var(--wvh5-topbar-fg, #ffffff);
font-size: 13px;
}
.wvh5-top-bar a {
color: var(--wvh5-topbar-fg, #ffffff);
text-decoration: underline;
}
.wvh5-announcement-item.active,
.wvh5-announcement-item.active a {
color: inherit;
}
.wvh5-announcement-item.active a {
color: var(--wvh5-topbar-fg, #ffffff);
}
.wvh5-announcement-wrapper {
height: 24px;
overflow: hidden;
display: flex;
align-items: center;
}
.wvh5-announcement-item {
display: none;
width: 100%;
text-align: center;
}
.wvh5-announcement-item.active {
display: block;
}
/* ---------- Duyuru gecis animasyonlari ----------
Duyurular sayfasindan secilir (site_announce_anim). Rotasyon JS'i
degismez: .active sinifi eklendiginde giren duyuru secili animasyonla
belirir. Bilinmeyen deger PHP tarafinda fade'e dusurulur. */
.wvh5-ann-anim--fade .wvh5-announcement-item.active { animation: wvh5AnnFade 0.5s ease; }
.wvh5-ann-anim--slide-up .wvh5-announcement-item.active { animation: wvh5AnnSlideUp 0.45s ease; }
.wvh5-ann-anim--slide-left .wvh5-announcement-item.active { animation: wvh5AnnSlideLeft 0.45s ease; }
.wvh5-ann-anim--zoom .wvh5-announcement-item.active { animation: wvh5AnnZoom 0.4s ease; }
.wvh5-ann-anim--flip { perspective: 400px; }
.wvh5-ann-anim--flip .wvh5-announcement-item.active {
animation: wvh5AnnFlip 0.5s ease;
transform-origin: center bottom;
}
/* Kayan (marquee): TUM duyurular ayraclarla yan yana tek serit olur ve
kesintisiz akar. Serit JS'te icerik iki kez basilarak kurulur; %50
kaydirma ile dongu eksiz devam eder. Sure: --wvh5-ann-dur (hizin 4 kati). */
/* Sarmalayici tam genislik alir: flex ortalamasi yuzunden icerik kadar
daralip ortada baslamasin, bar bastan sona dolu aksin */
.wvh5-ann-anim--marquee {
width: 100%;
}
/* Ozgun ogeler kayan modda her kosulda gizli: sunucu ilk ogeye .active
basar; gizlenmezse seridin yaninda sabit bir kopya gorunur */
.wvh5-ann-anim--marquee .wvh5-announcement-item {
display: none;
}
.wvh5-ann-track {
display: flex;
width: max-content;
animation: wvh5AnnMarqueeTrack var(--wvh5-ann-dur, 16000ms) linear infinite;
}
/* Fare seridin uzerindeyken akis durur: kullanici linki kacirmadan tiklayabilir */
.wvh5-ann-anim--marquee:hover .wvh5-ann-track {
animation-play-state: paused;
}
.wvh5-ann-group {
display: flex;
}
.wvh5-ann-piece {
display: inline-flex;
align-items: center;
white-space: nowrap;
font-weight: 700;
}
.wvh5-ann-piece::after {
content: "\2022";
margin: 0 28px;
opacity: 0.5;
}
@keyframes wvh5AnnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wvh5AnnSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wvh5AnnSlideLeft { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes wvh5AnnZoom { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes wvh5AnnFlip { from { opacity: 0; transform: rotateX(80deg); } to { opacity: 1; transform: none; } }
@keyframes wvh5AnnMarqueeTrack { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ---------- Arama katmani (overlay) ---------- */
#wvh5-searchOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px;
z-index: 2000;
background: var(--wvh5-bg, #ffffff);
border-bottom: 1px solid var(--wvh5-border, #ddd);
display: none;
}
.wvh5-search-input {
border: none;
border-bottom: 1px solid var(--wvh5-border, #000);
width: 100%;
padding: 10px;
/* Mobile-first: mobil tabanda 16px ZORUNLU; masaustu asagidaki kirilimda buyur.
16px'in altinda bir deger iOS Safari'de odaklanma aninda sayfayi otomatik
yakinlastirir; sayfa o anda viewport'tan genis kalir ve parmakla her yone
kaydirilabilir hale gelir (arama ikonu da input'a odak verdigi icin ayni
davranisi tetikler). Yer tutucu yazi input font boyutunu miras alir. */
font-size: 16px;
outline: none;
background: transparent;
color: inherit;
}
@media (min-width: 768px) {
.wvh5-search-input {
font-size: 1.2rem;
}
}
.wvh5-search-close {
cursor: pointer;
position: absolute;
right: 20px;
top: 20px;
font-size: 1.5rem;
}
.search-logo span img {
height: 40px;
}
/* Arama sonuc listesi (overlay ve genis bar ortak) */
.wvh5-search-results-dropdown {
display: none;
background: var(--wvh5-panel-bg, #fff);
color: var(--wvh5-panel-fg, #1f2b3e);
border: 1px solid var(--wvh5-border, #eee);
border-radius: 0 0 8px 8px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
max-height: 60vh;
overflow-y: auto;
}
.wvh5-search-results-dropdown.active {
display: block;
}
.wvh5-search-results-dropdown .section-title {
padding: 10px 20px;
font-size: 14px;
border-bottom: 1px solid var(--wvh5-border, #eee);
}
.wvh5-search-results-dropdown .result-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
cursor: pointer;
transition: background 0.2s;
border-bottom: 1px solid var(--wvh5-border-soft, #f0f0f0);
}
.wvh5-search-results-dropdown .result-item:last-child {
border-bottom: none;
}
.wvh5-search-results-dropdown .result-item:hover {
background: var(--wvh5-hover-bg, #f7f7f7);
}
.wvh5-search-results-dropdown .product-name {
font-size: 14px;
}
.wvh5-search-results-dropdown .product-price {
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.wvh5-search-results-dropdown .original-price {
text-decoration: line-through;
font-size: 12px;
}
.wvh5-search-results-dropdown .special-price {
font-weight: 700;
}
.wvh5-search-results-dropdown .no-results {
padding: 30px 20px;
text-align: center;
font-size: 14px;
}
/* ---------- Genis arama cubugu (yalnizca masaustunde gorunur) ---------- */
.wvh5-inline-search {
position: relative;
display: none; /* mobilde gizli; masaustu blogu asagida acar */
width: 100%;
/* Sabit 560px yerine akiskan tavan: kolon daraldiginda cubuk da daralir */
max-width: var(--wvh5-bar-max, 560px);
min-width: 0;
}
.wvh5-inline-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--wvh5-muted, #8a94a3);
font-size: 0.9rem;
pointer-events: none;
transition: color 0.2s;
}
.wvh5-inline-search-input {
border: 1px solid var(--wvh5-border, #d9dee6);
border-radius: 10px;
padding: 10px 16px 10px 40px;
font-size: 0.95rem;
/* Kutu formun tamamini kaplar; dolgu ve kenarlik genislige dahildir
(min-width:0 olmadan input'un varsayilan taban genisligi kolonu tasirir) */
width: 100%;
min-width: 0;
box-sizing: border-box;
background: var(--wvh5-panel-bg, #f6f7f9);
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* Dokunmatik cihazda (tablet vb.) genis bar da 16px olur: kucuk yazi tipi
odaklanma aninda otomatik yakinlastirmayi tetikler. Fare kullanilan
masaustunde 0.95rem korunur. */
@media (pointer: coarse) {
.wvh5-inline-search-input {
font-size: 16px;
}
}
/* Yer tutucu yazi: belirgin koyulukta baslar
(opacity:1 sart: Firefox placeholder'i varsayilan olarak soluklastirir) */
.wvh5-search-input::placeholder,
.wvh5-inline-search-input::placeholder {
color: var(--wvh5-muted, #3f4856);
opacity: 1;
transition: opacity 0.2s;
}
/* Kutuya odaklaninca yer tutucu soluklasarak yazmaya davet eder */
.wvh5-search-input:focus::placeholder,
.wvh5-inline-search-input:focus::placeholder {
opacity: 0.35;
}
/* Odakta: zemin beyaza döner, ince vurgu halkası belirir */
.wvh5-inline-search-input:focus {
outline: none;
background: var(--wvh5-panel-bg, #fff);
border-color: var(--wvh5-accent, #a8b8cf);
box-shadow: 0 0 0 3px rgba(31, 43, 62, 0.08);
}
.wvh5-inline-search:focus-within .wvh5-inline-search-icon {
color: var(--wvh5-fg, #1f2b3e);
}
/* ---------- Katalog dugmesi ve mega paneli ---------- */
.wvh5-catalog {
position: relative;
}
.wvh5-catalog-btn {
display: inline-flex;
align-items: center;
gap: 10px;
border: none;
background: var(--wvh5-panel-bg, #f4f6f9);
color: var(--wvh5-panel-fg, #1f2b3e);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 10px 14px;
border-radius: 8px;
cursor: pointer;
min-height: 44px;
white-space: nowrap;
transition: filter 0.15s;
}
.wvh5-catalog-btn:hover {
filter: brightness(0.96);
}
/* Uc bolmeli katalog paneli: sol = 1. seviye, orta = alt basliklar, sag = resimli kartlar */
.wvh5-catalog-panel {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1050;
background: var(--wvh5-panel-bg, #fff);
color: var(--wvh5-panel-fg, #1f2b3e);
border: 1px solid var(--wvh5-border, #e6e9ef);
/* Ust koseler duz: panel header'in devami gibi durur */
border-radius: 0 0 10px 10px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
width: min(1040px, 92vw);
height: min(560px, 70vh);
overflow: hidden;
}
.wvh5-catalog-panel.open {
display: flex;
}
/* Katalog satir 2'deyken: satirin 8px alt ic boslugu telafi edilir,
panel header'in alt cizgisine bitisik acilir */
.wvh5-r2-start .wvh5-catalog-panel {
top: calc(100% + 8px);
}
/* Sol bolme: 1. seviye kategoriler */
.wvh5-cat-l1 {
flex: 0 0 250px;
border-right: 1px solid var(--wvh5-border, #eef1f6);
overflow-y: auto;
padding: 6px 0;
background: var(--wvh5-panel-bg, #ffffff);
}
.wvh5-cat-l1-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 18px;
font-size: 0.9rem;
font-weight: 500;
color: var(--wvh5-panel-fg, #1f2b3e);
text-decoration: none;
border-bottom: 1px solid var(--wvh5-border-soft, #f4f6f9);
min-height: 44px;
}
.wvh5-cat-l1-item i {
font-size: 0.7rem;
color: var(--wvh5-muted, #94a3b8);
}
.wvh5-cat-l1-item:hover,
.wvh5-cat-l1-item.active {
background: var(--wvh5-hover-bg, #f4f7fb);
color: var(--wvh5-accent, #000);
}
/* Detay bolmeleri: yalniz aktif olan gorunur */
.wvh5-cat-detail {
display: none;
flex: 1 1 auto;
min-width: 0;
}
.wvh5-cat-detail.active {
display: flex;
}
/* Orta bolme: alt baslik listesi */
.wvh5-cat-l2 {
flex: 0 0 240px;
border-right: 1px solid var(--wvh5-border, #eef1f6);
background: var(--wvh5-panel-alt-bg, #f8fafc);
overflow-y: auto;
padding: 12px 0;
}
.wvh5-cat-l2 a {
display: block;
padding: 9px 20px;
font-size: 0.88rem;
color: var(--wvh5-panel-fg, #334155);
text-decoration: none;
}
.wvh5-cat-l2 a:hover {
color: var(--wvh5-accent, #000);
background: var(--wvh5-hover-bg, #eef2f7);
}
/* Alt kirilim satirlari: enter oku (kategori kenar cubuguyla ayni gorsel dil) */
.wvh5-cat-l2-arrow {
font-size: 10px;
margin-right: 6px;
color: var(--wvh5-muted, #94a3b8);
}
/* 3. kirilim satiri: ok zaten alt kategori oldugunu gosterir, girinti verilmez;
dikey bosluk da ana satirlardan (9px) ayri, sikisik tutulur */
.wvh5-cat-l2 a.wvh5-cat-l2-sub {
padding: 0 20px;
}
/* Gorseli olan alt baslik yoksa kart alani basilmaz; liste ayni dar
genislikte kalir, panel ise bos alan olusmasin diye daralir
(wvh5-catalog-panel--slim sinifini JS aktif detaya gore ekler) */
.wvh5-cat-detail--nocards .wvh5-cat-l2 {
border-right: none;
}
.wvh5-catalog-panel--slim {
width: auto;
min-width: 0;
}
/* Sag bolme: resimli kategori kartlari */
.wvh5-cat-cards {
flex: 1 1 auto;
min-width: 0;
overflow-y: auto;
padding: 24px;
background: var(--wvh5-panel-bg, #ffffff);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 22px;
align-content: start;
}
.wvh5-cat-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--wvh5-panel-fg, #1f2b3e);
text-align: center;
}
.wvh5-cat-card img {
width: 96px;
height: 96px;
object-fit: contain;
}
.wvh5-cat-card span {
font-size: 0.85rem;
font-weight: 500;
}
.wvh5-cat-card:hover span {
text-decoration: underline;
}
.wvh5-cat-empty {
padding: 30px;
color: var(--wvh5-muted, #94a3b8);
font-size: 0.9rem;
}
.wvh5-inline-search .wvh5-search-results-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
border-radius: 10px;
z-index: 1040;
}
/* ---------- Mobil offcanvas menu ---------- */
/* TEMA SIZINTISI KALKANI (mobil)
Mobil menu DISINDA basilir; navbar kokundeki kalkan oraya ulasmaz.
theme_custom.css'in "button i { color: ... }" kurali .wvh5-dd-link ve
.wvh5-dd-back BUTON oldugu icin geri okunu ve menu ogesi ikonlarini
temanin renginde birakiyordu.
Mobil menu her zaman acik zeminde acildigindan renkler degiskene degil
sabite baglanir. Kural her iki gorunumu de kapsar: akordeon
(.wvh5-mobile-nav-link) ve katmanli (.wvh5-dd-link / .wvh5-dd-back). */
/* Renk ROLLERI mobil menude sabitlenir.
Roller :root'ta tanimli oldugu icin panelden secilen header/panel renkleri
buraya da siziyordu: acilir liste (--wvh5-panel-bg), secili satir
(--wvh5-hover-bg) ve kenarliklar tenant renginde cikiyordu. Mobil menu
her zaman acik zeminde acildigindan bu roller burada sabite baglanir;
asagidaki kurallarin hicbiri degismek zorunda kalmaz. */
#wvh5-mobileMenu {
--wvh5-fg: #1f2b3e;
--wvh5-icon: #1f2b3e;
--wvh5-panel-bg: #ffffff;
--wvh5-panel-fg: #1f2b3e;
--wvh5-panel-alt-bg: #f7f8fa;
--wvh5-hover-bg: #f0f2f5;
--wvh5-muted: #9aa0a6;
--wvh5-border: #e8e8e8;
--wvh5-border-soft: #f1f1f1;
--wvh5-accent: #1f2b3e;
--wvh5-accent-fg: #ffffff;
}
#wvh5-mobileMenu,
#wvh5-mobileMenu a,
#wvh5-mobileMenu button {
color: #1f2b3e;
}
#wvh5-mobileMenu i,
#wvh5-mobileMenu a i,
#wvh5-mobileMenu button i,
#wvh5-mobileMenu .wsv-menu-ic {
color: inherit;
}
/* Tek istisna: yon okları ikincil kalir (tiklanabilir alanin kendisi degil,
yalnizca yon gostergesi). Alt tercih cubugundaki (dil/para birimi) acilir
liste oku da buna dahildir — o blok da offcanvas'in icinde basilir. */
#wvh5-mobileMenu .wvh5-dd-link .fa-chevron-right,
#wvh5-mobileMenu .wvh5-mobile-nav-link .fa-chevron-right,
#wvh5-mobileMenu .wvh5-mm-dd-btn i {
color: #9aa0a6;
}
.offcanvas-start {
width: 85%;
}
#wvh5-mobileMenu .collapsing {
transition-duration: 0.2s;
}
.wvh5-mobile-nav-link {
font-size: 1rem;
text-transform: uppercase;
padding: 15px 0;
border-bottom: 1px solid var(--wvh5-border-soft, #f1f1f1);
display: flex;
justify-content: flex-start;
align-items: center;
text-decoration: none;
min-height: 44px;
}
/* Ok isareti saga itilir; ikon + yazi solda yan yana kalir
(space-between kullanilmaz: ikonlu ogelerde yaziyi ortaya iterdi) */
.wvh5-mobile-nav-link .fa-chevron-right {
margin-left: auto;
padding-left: 10px;
}
.wvh5-mobile-sub-menu {
list-style: none;
padding-left: 0;
}
.wvh5-mobile-sub-menu li a {
display: block;
padding: 10px 0 10px 15px;
text-decoration: none;
font-size: 0.95rem;
min-height: 44px;
display: flex;
align-items: center;
}
/* Alt menu satirindaki yon oku saga itilir.
Markup'ta Bootstrap'in float-end sinifi var ama satir FLEX kutu oldugu
icin float etkisizdir; ok yazinin hemen yanina yapisik kaliyordu.
Ust seviyedeki (.wvh5-mobile-nav-link) cozumun aynisi uygulanir. */
.wvh5-mobile-sub-menu li a .fa-chevron-right {
margin-left: auto;
padding-left: 10px;
flex-shrink: 0;
}
/* Katalog grubunun alt ogeleri: ust seviye ogeler gibi cizgiyle bolunmus satirlar
(yalniz katalog grubuna ozel; diger gruplarin alt menusu degismez) */
.wvh5-mobile-sub-menu--catalog > li > a {
padding: 14px 0 14px 12px;
font-size: 1rem;
border-bottom: 1px solid var(--wvh5-border-soft, #f1f1f1);
justify-content: flex-start;
}
.wvh5-mobile-sub-menu--catalog > li > a .fa-chevron-right {
margin-left: auto;
padding-left: 10px;
}
.offcanvas-header .btn-close {
opacity: 1;
}
.mobile-menu-logo {
/* Sabit height yerine min-height: dikey/kare logolar tasmadan sigsin */
min-height: 30px;
display: flex;
align-items: center;
}
.mobile-menu-logo img {
height: 100%;
width: auto;
display: block;
}
/* ---------- Katmanli (drill-down) mobil menu ---------- */
/* Alt kategoriye dokununca panel yana kayar; "Geri" satiri ust panele doner.
Yalnizca .wvh5-dd kokune sahip offcanvas'i etkiler (akordeon degismez). */
.wvh5-dd.offcanvas-start {
width: 100%;
max-width: 420px;
}
.wvh5-dd .offcanvas-body {
padding: 0;
overflow: hidden;
}
.wvh5-dd-viewport {
position: relative;
height: 100%;
overflow: hidden;
}
.wvh5-dd-panel {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 16px 24px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--bs-offcanvas-bg, #fff);
transform: translateX(110%);
transition: transform 0.3s ease;
}
/* Aktif panelin ust zinciri: hafif solda bekler (derinlik hissi) */
.wvh5-dd-panel.is-left {
transform: translateX(-35%);
}
.wvh5-dd-panel.is-active {
transform: translateX(0);
z-index: 2;
}
.wvh5-dd-link {
display: flex;
width: 100%;
justify-content: flex-start;
align-items: center;
min-height: 48px;
padding: 13px 0;
border: 0;
border-bottom: 1px solid var(--wvh5-border-soft, #f1f1f1);
background: none;
color: inherit;
font-size: 1rem;
text-align: left;
text-decoration: none;
}
/* Yalnizca ok isareti kucuk/gri olur ve saga itilir; menu ogesinin kendi
ikonu (wsv-menu-ic) dogal boyut ve renginde yazinin solunda kalir */
.wvh5-dd-link .fa-chevron-right {
margin-left: auto;
padding-left: 10px;
font-size: 0.75rem;
color: var(--wvh5-muted, #9aa0a6);
}
/* Kok paneldeki ust seviye ogeler akordeondaki gibi vurgulu */
.wvh5-dd-panel[data-dd-panel="root"] > .wvh5-dd-link {
text-transform: uppercase;
font-weight: 600;
}
.wvh5-dd-back {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 13px 0;
border: 0;
border-bottom: 1px solid var(--wvh5-border, #e8e8e8);
background: none;
color: inherit;
font-size: 1rem;
font-weight: 700;
text-align: left;
}
.wvh5-dd-back .fa-chevron-left {
font-size: 0.8rem;
}
.wvh5-dd-viewall {
font-weight: 600;
}
/* ---------- Mobil menu alt tercih cubugu (para birimi + dil) ----------
Offcanvas govdesinin kardesi olarak basilir: govde kayar, cubuk ekranin
altinda sabit kalir. Solda para birimi, sagda dil; her ikisi modern
acilir listedir: tetik buton aktif degeri gosterir, secenek listesi
yukari dogru acilir. Yalniz birden fazla aktif secenegi olan taraf
basilir; tek kalan taraf kendi yarisinda durur, genislemez. */
/* ---------- Ek ogeler (telefon, bilgi metni) ---------- */
/* Header satirlarindaki bolgelere eklenen serbest ogeler.
YALNIZ MASAUSTU: her oge "d-none d-xl-inline-flex" ile basilir, yani
1200px altinda (mobil ve tablet) hic gorunmez ve mobil menuye de dusmez.
Kirilim PHP tarafinda WVH5_EXTRA_BREAKPOINT sabitiyle belirlenir; biri
degisirse digeri de degismeli. */
.wvh5-extra {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 4px 6px;
color: inherit;
text-decoration: none;
line-height: 1.2;
}
.wvh5-extra:hover {
color: inherit;
opacity: 0.75;
}
/* Ikon ve iki metin satiri kendi renklerini Renkler bolumundeki "Ek Ogeler"
grubundan alir. Deger yoksa navbar'in yazi rengi miras alinir. */
.wvh5-extra i {
flex-shrink: 0;
line-height: 1;
color: var(--wvh5-icon, inherit);
}
/* Tek satirli oge (yalniz telefon ya da yalniz yazi): ikon metinle ayni olcude */
.wvh5-extra--single i {
font-size: 1.05rem;
}
/* Iki satirli oge (telefon + yazi): ikon tek satirdakinden belirgin buyuktur.
Dikey ortalamayi kok kuraldaki align-items: center yapar. */
.wvh5-extra--stack i {
font-size: 1.5rem;
}
.wvh5-extra-text {
display: flex;
flex-direction: column;
min-width: 0;
gap: 1px;
}
/* Telefon: ustteki belirgin satir. Numaranin okunurlugu icin rakam
genislikleri esitlenir (kayan hizalama olmaz). */
.wvh5-extra-phone {
font-size: 0.9rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--wvh5-accent, inherit);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Yazi: telefonla birlikteyken ikincil satir, tek basinayken ana satir */
.wvh5-extra-note {
font-size: 0.9rem;
font-weight: 600;
color: var(--wvh5-fg, inherit);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Iki satirli ogede vurgu alan tipine degil POZISYONA baglidir: ustteki satir
birincil, alttaki ikincil. Panelden telefon ile yazi yer degistirildiginde
(swap) stil de kendiliginden takip eder, ayri bir kural gerekmez. */
.wvh5-extra--stack .wvh5-extra-text > :first-child {
font-size: 0.9rem;
font-weight: 600;
}
.wvh5-extra--stack .wvh5-extra-text > :last-child {
font-size: 0.72rem;
font-weight: 400;
opacity: 0.7;
}
/* Baglantili satirlar hicbir durumda alti cizili olmaz: header'da tel: ve
URL baglantilari duz metin gibi durmali. Fare geri bildirimi kok kuraldaki
opacity ile verilir (.wvh5-extra:hover). Renk de korunur.
Bootstrap 5 ogelerini varsayilan olarak alti cizili yaptigi icin
hover durumu da acikca sifirlanir. */
a.wvh5-extra-phone,
a.wvh5-extra-phone:hover,
a.wvh5-extra-phone:focus {
color: var(--wvh5-accent, inherit);
text-decoration: none;
}
a.wvh5-extra-note,
a.wvh5-extra-note:hover,
a.wvh5-extra-note:focus {
color: var(--wvh5-fg, inherit);
text-decoration: none;
}
.wvh5-mm-prefs {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--wvh5-border, #e8e8e8);
background: var(--bs-offcanvas-bg, #fff);
}
.wvh5-mm-dd {
position: relative;
flex: 0 0 calc(50% - 6px);
max-width: calc(50% - 6px);
min-width: 0;
}
/* Dil sagda durur; para birimi yoksa bile sag yarida kalir */
.wvh5-mm-dd--lang {
margin-left: auto;
}
.wvh5-mm-dd-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--wvh5-border, #e0e0e0);
border-radius: 10px;
background: var(--wvh5-panel-alt-bg, #f7f8fa);
color: inherit;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
}
.wvh5-mm-dd-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wvh5-mm-dd-btn i {
font-size: 0.7rem;
color: var(--wvh5-muted, #9aa0a6);
flex-shrink: 0;
transition: transform 0.2s ease;
}
.wvh5-mm-dd.open .wvh5-mm-dd-btn i {
transform: rotate(180deg);
}
.wvh5-mm-dd-btn:disabled {
opacity: 0.55;
cursor: default;
}
/* Secenek listesi: tetigin ustune acilir, yumusak golgeli kart */
.wvh5-mm-dd-list {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + 8px);
display: none;
padding: 6px;
background: var(--wvh5-panel-bg, #fff);
border: 1px solid var(--wvh5-border, #ececec);
border-radius: 12px;
box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18);
max-height: 45vh;
overflow-y: auto;
z-index: 5;
}
.wvh5-mm-dd.open .wvh5-mm-dd-list {
display: block;
}
.wvh5-mm-opt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: none;
color: inherit;
font-size: 0.9rem;
text-align: left;
cursor: pointer;
}
.wvh5-mm-opt:hover {
background: var(--wvh5-hover-bg, #f5f6f8);
}
/* Aktif secenek: hafif dolgu + onay isareti */
.wvh5-mm-opt.is-active {
background: var(--wvh5-hover-bg, #f0f2f5);
font-weight: 700;
}
.wvh5-mm-opt.is-active::after {
content: "\2713";
font-size: 0.85rem;
flex-shrink: 0;
}
@media (max-width: 768px) {
.wvh5-search-results-dropdown .result-item {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.wvh5-search-results-dropdown .product-price {
font-size: 13px;
}
.search-logo span img {
height: 30px;
}
}
/* ============================================================
MASAUSTU YERLESIMI (>= 992px)
Parametreler grid hucrelerine soyle dagilir:
- logo solda: [logo][orta hucre][sag hucre]
- logo ortada: [orta hucre][logo][sag hucre] (DOM sirasi da boyle)
============================================================ */
@media (min-width: 992px) {
.wvh5-grid {
display: grid !important;
align-items: center;
width: 100%;
}
/* Logo solda: YAN KOLONLAR HER ZAMAN ESIT ESNER.
Orta hucreye ne konursa konsun (menu, arama cubugu, ek oge) logo ile
ikonlarin arasindaki bosluga gore degil VIEWPORT'a gore ortalanir.
Yan kolonlarin tabani 0'dir: esitligi bozacak hicbir taban yok, yani
ortalama her ekran genisliginde korunur. */
.wvh5--logo-left .wvh5-grid {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
/* Genis arama cubugu satir 1 ortasinda: yan kolonlar yine esit; farkli olan
tek sey orta kolonun cubuk icin esneyebilen akiskan tavanidir.
Tavan sabit degil (bkz. --wvh5-bar-max): dar ekranda kuculdugu icin yan
kolonlara logo ve ikonlara yetecek alan kalir, ortalama da bozulmaz. */
.wvh5--logo-left.wvh5--bar-r1 .wvh5-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, var(--wvh5-bar-max, 560px)) minmax(0, 1fr);
/* Cubuk logoya ve ikonlara yapismasin; bosluk da ekranla akar */
column-gap: clamp(12px, 2vw, 28px);
}
/* Logo ortada: iki yan hucre esit esner, logo tam ortada kalir */
.wvh5--logo-center .wvh5-grid {
grid-template-columns: 1fr auto 1fr;
}
/* Orta hucre: icerigi HER ZAMAN ortalanir (menu, arama cubugu, ek oge farketmez).
Kolonlar esit oldugu icin bu ortalama viewport'a goredir. */
.wvh5-cell-mid {
min-width: 0;
align-items: center;
justify-content: center;
}
/* Tek istisna — split sol yarim: ortalanmaz, logoya yaslanir */
.wvh5--menu-r1-split .wvh5-cell-mid {
justify-content: flex-end;
padding-right: 30px;
}
.wvh5--search-bar .wvh5-inline-search {
display: block;
}
/* Baslangic hucresi: logo + katalog dugmesi arasi bosluk */
.wvh5-cell-start {
gap: 14px;
min-width: 0;
}
.wvh5-cell-end {
justify-content: flex-end;
margin: 0;
min-width: 0;
}
/* Sag menu ikonlardan once, ikonlar sag kenarda */
.wvh5-end-menu {
margin-right: auto;
min-width: 0;
}
/* Split sag yarim logonun hemen saginda durur */
.wvh5--menu-r1-split .wvh5-end-menu {
padding-left: 30px;
}
/* Sag menu: ikon grubuyla arasinda bosluk */
.wvh5--menu-r1-right .wvh5-end-menu {
margin-right: 12px;
}
.wvh5-logo {
justify-self: center;
margin: 0;
}
/* ---------- Satir 2 (alt satir): sol / orta / sag bolgeler ---------- */
/* Iki satirli duzende nav'in alt ic boslugu kaldirilir; yerine satir 2
kendi esit dikey boslugunu tasir. Boylece icerik ust cizgi (border-top)
ile alt cizgi arasinda tam ortalanir. */
.wvh5--rows2.navbar {
padding-bottom: 0;
}
.wvh5-row2 {
width: 100%;
border-top: 1px solid var(--wvh5-border, #ececec);
margin-top: var(--wvh5-py);
background: var(--wvh5-row2-bg, transparent);
color: var(--wvh5-row2-fg, inherit);
}
/* Alt satir: satir 1'deki kuralla ayni gerekce — yan kolonlar HER ZAMAN
esit esner, orta bolgeye ne konursa konsun viewport'a gore ortalanir */
.wvh5-row2-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 16px;
padding-top: 8px;
padding-bottom: 8px;
}
/* Genis arama cubugu alt satir ortasinda: yan kolonlar yine esit,
orta kolonun tavani cubugun akiskan max genisligidir */
.wvh5--bar-r2 .wvh5-row2-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, var(--wvh5-bar-max, 560px)) minmax(0, 1fr);
}
.wvh5-r2-start {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.wvh5-r2-mid {
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
}
.wvh5-r2-end {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
min-width: 0;
}
.wvh5-row2-nav {
flex-direction: row;
flex-wrap: wrap;
}
.wvh5--menu-r2-center .wvh5-row2-nav {
justify-content: center;
}
.wvh5-row2 .nav-link {
color: var(--wvh5-row2-fg, var(--wvh5-fg, #1f2b3e));
}
/* Ikon grubu alt satira alindiginda da KENDI renk ayarini kullanir.
Bu secici (3 sinif) yukaridaki .wvh5-header-icons .btn kuralindan (2 sinif)
guclu oldugu icin zincir burada da bastan kurulmali; yoksa "Alt Satir Yazi
Rengi" ikon rengi ayarini ezer. Ikon ayari yoksa alt satir rengine duser. */
.wvh5-row2 .wvh5-header-icons .btn {
color: var(--wvh5-icon, var(--wvh5-row2-fg, var(--wvh5-fg, #1f2b3e)));
}
/* Masaustu ikon araliklari ferah */
.wvh5-header-icons .btn,
.wvh5-header-icons > a {
--bs-btn-padding-x: 0.75rem;
}
/* ---------- Menu linkleri ve acilir menuler ----------
Yatay olculer akiskan (clamp): 992px'te sikisik, genisledikce buyur.
Sabit kademeler dar masaustunde (iPad Pro, kucuk laptop) tasma yapiyordu. */
.wvh5-navbar .nav-link {
font-size: clamp(0.74rem, 0.35rem + 0.55vw, 0.85rem);
text-transform: uppercase;
padding: var(--wvh5-link-py, 1.25rem) clamp(0.3rem, -1.1rem + 2.1vw, 1rem) !important;
white-space: nowrap;
transition: padding 0.25s ease;
}
/* Konteyner kenar bosluklari da akiskan: px-lg-5'in sabit 3rem'i dar
masaustunde cok yer yiyordu */
.wvh5-navbar .px-lg-5 {
padding-left: clamp(1.25rem, -3rem + 6vw, 3rem) !important;
padding-right: clamp(1.25rem, -3rem + 6vw, 3rem) !important;
}
.wvh5-catalog-btn {
font-size: clamp(0.82rem, 0.4rem + 0.6vw, 1rem);
padding: clamp(7px, 1vw, 10px) clamp(9px, 1.4vw, 14px);
}
/* Alt satirdaki menu linkleri daha az dikey bosluk kullanir */
.wvh5-row2 .nav-link {
padding: 0.75rem 1rem !important;
}
/* ---------- Ikon etiketleri (yalniz masaustu) ---------- */
.wvh5--iconlabels-text .wvh5-header-icons .btn {
gap: 8px;
padding-left: 0.6rem;
padding-right: 0.6rem;
}
.wvh5--iconlabels-text .wvh5-icon-label {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.15;
text-align: left;
}
.wvh5-icon-label strong {
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.wvh5-icon-label small {
font-size: 0.68rem;
opacity: 0.65;
white-space: nowrap;
}
/* Metinli modda adet zaten "N urun" olarak yazildigi icin rozet gereksiz
(mobilde etiketler gizli oldugundan rozet orada gorunmeye devam eder) */
.wvh5--iconlabels-text .wvh5-cart-badge {
display: none;
}
.wvh5-navbar .nav-item {
position: static;
}
.wvh5-navbar .nav-item:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.wvh5-navbar .dropdown-menu {
width: 100%;
left: 0;
right: 0;
border: none;
border-top: 1px solid var(--wvh5-border, #eee);
border-bottom: 1px solid var(--wvh5-border, #eee);
border-radius: 0;
padding: 30px 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
margin-top: 0;
}
.wvh5-mega-menu-title {
margin-bottom: 15px;
display: block;
font-size: 0.9rem;
}
.wvh5-mega-menu-list {
list-style: none;
padding: 0;
}
.wvh5-mega-menu-list li a {
text-decoration: none;
font-size: 0.9rem;
display: block;
padding: 5px 0;
transition: color 0.2s;
}
.wvh5-mega-menu-list li a:hover {
text-decoration: underline;
}
.wvh5-navbar .wvh5-dropdown-classic {
position: relative;
}
.wvh5-navbar .wvh5-submenu {
width: 220px;
left: 0;
right: auto;
border: 1px solid var(--wvh5-border, #eee);
border-radius: 6px;
padding: 8px 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.wvh5-navbar .wvh5-submenu .dropdown-item {
font-size: 0.85rem;
padding: 8px 16px;
transition: background-color 0.15s, color 0.15s;
}
.wvh5-submenu-parent {
position: relative;
}
.wvh5-submenu-parent:hover > .wvh5-submenu-child {
display: block;
}
.wvh5-submenu-child {
display: none;
position: absolute;
top: 0;
left: 100%;
min-width: 200px;
background: var(--wvh5-panel-bg, #fff);
border: 1px solid var(--wvh5-border, #eee);
border-radius: 6px;
padding: 8px 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
list-style: none;
margin: 0;
}
.wvh5-submenu-child .dropdown-item {
font-size: 0.85rem;
padding: 8px 18px;
color: var(--wvh5-panel-fg, #333);
}
.wvh5-submenu-child .dropdown-item:hover {
background-color: var(--wvh5-hover-bg, #f5f5f5);
color: var(--wvh5-accent, #000);
}
}
/* ============================================================
DAR MASAUSTU BANDI (992-1199px; iPad Pro yatay, kucuk laptop)
Akiskan clamp kurallari yukarida; burada yalnizca bosluk incelikleri kalir.
============================================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
.wvh5-header-icons .btn,
.wvh5-header-icons > a {
--bs-btn-padding-x: 0.3rem;
}
/* Split ve sag menu bosluklari da daralir */
.wvh5--menu-r1-split .wvh5-cell-mid {
padding-right: 14px;
}
.wvh5--menu-r1-split .wvh5-end-menu {
padding-left: 14px;
}
.wvh5--menu-r1-right .wvh5-end-menu {
margin-right: 6px;
}
.wvh5-row2-grid {
gap: 10px;
}
}
/* === assets/frontend/css/header/header_5.css === */
/* --- HEADER GENEL --- */
:root {
--wvh5-bg: #ffffff;
--wvh5-fg: #1f2b3e;
--wvh5-icon: #1f2b3e;
--wvh5-accent: #1f2b3e;
--wvh5-accent-fg: #ffffff;
--wvh5-border: #e8e8e8;
--wvh5-nav-weight: 600;
}
:root {
--wvh5-row2-bg: #ffffff;
--wvh5-row2-fg: #000000;
}
:root {
--wvh5-panel-bg: #ffffff;
--wvh5-panel-fg: #000000;
}
:root {
--wvh5-topbar-bg: #1a2421;
--wvh5-topbar-fg: #ffffff;
}
/* === assets/frontend/css/footer/footer_3_base.css === */
/* ============================================================
footer_3 — Görsel/Builder footer temel stilleri
Dinamik değerler (renk, sütun) footer_3.php'de CSS değişkeniyle gelir.
============================================================ */
.ft3 { display: block; width: 100%; }
.ft3 * { box-sizing: border-box; }
.ft3-body {
color: var(--ft3-fg, 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 --- */