/| / | olarak basıyor; diğer
satırlarla aynı "etiket solda, değer sağda" düzenine oturtuyoruz. */
.vn .vnc__rows .woocommerce-shipping-totals {
display: block !important;
justify-content: space-between;
align-items: baseline;
gap: 14px;
padding: 11px 0;
border-bottom: 1px solid var(--vn-line);
font-size: 15px;
}
.vn .vnc__rows .woocommerce-shipping-totals th {
display: block !important;
width: 100% !important;
text-align: start !important;
padding: 0;
border: 0;
font-weight: 400;
color: var(--vn-muted);
font-family: var(--vn-body);
font-size: 15px;
text-transform: none;
letter-spacing: 0;
}
.vn .vnc__rows .woocommerce-shipping-totals td {
display: block !important;
width: 100% !important;
text-align: start !important;
padding: 0;
border: 0;
}
.vn .vnc__rows ul#shipping_method { list-style: none; margin: 0; padding: 0; }
.vn .vnc__rows ul#shipping_method li { padding: 0; }
.vn .vnc__rows ul#shipping_method label { color: var(--vn-ink); font-size: 15px; }
.vn .vnc__rows .woocommerce-shipping-destination {
display: block;
margin-top: 6px;
font-size: 13px;
color: var(--vn-muted);
line-height: 1.45;
}
.vn .vnc__rows .shipping-calculator-button {
display: inline-block;
margin-top: 4px;
font-size: 13px;
color: var(--vn-sand-dk);
text-decoration: underline;
text-underline-offset: 2px;
}
/* --- Ödeme butonu --- */
.vn .vnc__summary .checkout-button {
text-transform: uppercase;
letter-spacing: .1em;
line-height: 1.3;
padding: 14px 18px;
text-align: center;
}
/* --- Masaüstünde sol sütun boş kalmasın: eylemler alta hizalansın --- */
@media (min-width: 900px) {
.vnc__form { display: flex; flex-direction: column; }
.vnc__actions { margin-top: auto; }
}
/* --- Dar ekranda kupon + güncelle alt alta --- */
@media (max-width: 599px) {
.vnc__actions { flex-direction: column; align-items: stretch; }
.vnc__coupon { flex: 1 1 auto; }
.vnc__actions .vnc__btn { width: 100%; }
}
/* WooCommerce'in varsayılan .cart-collaterals kuralı özet kartına
float:right ve width:48% veriyordu; kart daralıp başlık kırılıyordu. */
.vn .cart-collaterals,
.vn .vnc__summary { width: 100%; float: none; }
.vn .cart-collaterals .cart_totals,
.vn .vnc__summary .cart_totals,
.vn .vnc__card {
float: none !important;
width: 100% !important;
margin: 0 !important;
}
.vn .vnc__card-title { font-size: 18px; line-height: 1.25; }
/* ============================================================
13. SEPET BAŞLIĞI — üstteki boşluğu toparla
Başlık ile dil seçici aynı satırda; sayfa üstü fazla boşluk yok.
============================================================ */
.vn-cart { padding-block: clamp(20px, 3.5vw, 40px) clamp(40px, 7vw, 72px); }
.vn-cart__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: clamp(18px, 3vw, 28px);
}
.vn-cart__title { margin: 0 0 4px; }
.vn-cart__count { color: var(--vn-muted); font-size: 15px; margin: 0; }
.vn-cart__lang { margin: 0; flex: 0 0 auto; }
.vn-cart__lang .trp-language-switcher { position: static !important; box-shadow: none; margin: 0; }
/* Özet tablosu — yapısına geçtikten sonraki hizalama */
.vn table.vnc__rows { width: 100%; border-collapse: collapse; margin: 0 0 20px; border: 0; }
.vn table.vnc__rows tr.vnc__row { display: table-row; }
.vn table.vnc__rows th,
.vn table.vnc__rows td {
padding: 11px 0;
border: 0;
border-bottom: 1px solid var(--vn-line);
font-size: 15px;
vertical-align: baseline;
background: transparent;
}
.vn table.vnc__rows th {
text-align: start;
font-family: var(--vn-body);
font-weight: 400;
color: var(--vn-muted);
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
}
.vn table.vnc__rows td { text-align: end; color: var(--vn-ink); }
.vn table.vnc__rows tr.order-total th { color: var(--vn-ink); font-family: var(--vn-display); font-size: 17px; font-weight: 500; }
.vn table.vnc__rows tr.order-total td { font-family: var(--vn-display); font-size: 20px; font-weight: 500; }
.vn table.vnc__rows tr.order-total th,
.vn table.vnc__rows tr.order-total td { border-bottom: 0; padding-top: 16px; }
/* kargo satırı artık gerçek bir — içindekileri sadeleştir */
.vn table.vnc__rows ul#shipping_method,
.vn table.vnc__rows ul.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.vn table.vnc__rows ul#shipping_method li { padding: 0; }
.vn table.vnc__rows .woocommerce-shipping-destination { font-size: 13px; color: var(--vn-muted); margin: 6px 0 0; line-height: 1.45; }
.vn table.vnc__rows .shipping-calculator-button { font-size: 13px; color: var(--vn-sand-dk); text-decoration: underline; text-underline-offset: 2px; }
/* ============================================================
14. SEPET — son rötuşlar
============================================================ */
/* Kargo satırı: etiket üstte, seçenek altta — dar sütunda sıkışmasın */
.vn table.vnc__rows tr.woocommerce-shipping-totals {
display: block;
padding: 12px 0;
border-bottom: 1px solid var(--vn-line);
}
.vn table.vnc__rows tr.woocommerce-shipping-totals th,
.vn table.vnc__rows tr.woocommerce-shipping-totals td {
display: block;
width: 100%;
border: 0;
padding: 0;
text-align: start;
white-space: normal;
}
.vn table.vnc__rows tr.woocommerce-shipping-totals th { margin-bottom: 6px; }
.vn table.vnc__rows tr.woocommerce-shipping-totals label { color: var(--vn-ink); font-size: 15px; }
/* Ödeme butonu: tema/WooCommerce'ten gelen sözde-öğe artığını temizle */
.vn .checkout-button::before,
.vn .checkout-button::after,
.vn .vnc__summary a.button.alt::before,
.vn .vnc__summary a.button.alt::after {
content: none !important;
display: none !important;
}
/* ============================================================
15. ÜRÜNLER SAYFASI — filtre şeridi + ızgara
============================================================ */
.vn-shop__head {
background: var(--vn-surface);
padding-block: clamp(32px, 6vw, 64px);
margin-bottom: clamp(24px, 4vw, 40px);
}
.vn-shop__head h1 { margin: 0 0 10px; }
.vn-shop__lead { color: var(--vn-muted); font-size: 16px; max-width: 52ch; margin: 0; }
.vn-shop { padding-bottom: clamp(48px, 8vw, 88px); }
/* --- Filtre sekmeleri --- */
.vn-filters { margin-bottom: clamp(22px, 3.5vw, 34px); }
.vn-filters__list {
display: flex;
gap: 10px;
list-style: none;
margin: 0;
padding: 0 0 4px;
overflow-x: auto; /* mobilde yatay kaydırma */
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.vn-filters__list::-webkit-scrollbar { display: none; }
.vn-filters__list li { flex: 0 0 auto; }
.vn-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 11px 18px;
min-height: 44px; /* dokunma hedefi */
font-family: var(--vn-display);
font-size: 14px;
font-weight: 500;
letter-spacing: .04em;
text-decoration: none;
white-space: nowrap;
color: var(--vn-ink);
background: var(--vn-white);
border: 1px solid var(--vn-line);
border-radius: 999px;
cursor: pointer;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.vn-chip:hover { border-color: var(--vn-ink); }
.vn-chip.is-active { background: var(--vn-ink); border-color: var(--vn-ink); color: var(--vn-white); }
.vn-chip__n {
font-size: 12px;
font-weight: 400;
color: var(--vn-muted);
background: var(--vn-surface);
border-radius: 999px;
padding: 1px 7px;
min-width: 20px;
text-align: center;
}
.vn-chip.is-active .vn-chip__n { background: rgba(255,255,255,.16); color: var(--vn-white); }
/* --- Izgara + yükleniyor durumu --- */
.vn-shop__grid { transition: opacity .18s ease; min-height: 200px; }
.vn-shop__grid.is-loading { opacity: .45; pointer-events: none; }
.vn-shop__empty {
padding: 48px 20px;
text-align: center;
color: var(--vn-muted);
border: 1px dashed var(--vn-line);
border-radius: var(--vn-radius);
}
/* Ürün kartı başlığı: tema büyük-harf kuralını bastır */
.vn .vn-card__title,
.vn .vn-card__title a {
text-transform: none !important;
letter-spacing: 0;
font-size: 15px !important;
line-height: 1.35;
}
@media (min-width: 720px) {
.vn .vn-card__title,
.vn .vn-card__title a { font-size: 16px !important; }
}
.vn .vn-card__price { font-size: 16px; color: var(--vn-ink); }
.vn .vn-card__price .amount { color: var(--vn-ink); }
/* ============================================================
16. BAŞLIK — ince, sabit, sade
============================================================ */
.vn-skip {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--vn-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 4px 0;
}
.vn-skip:focus { left: 0; }
.vnh {
position: sticky; top: 0; z-index: 90;
background: var(--vn-white);
border-bottom: 1px solid var(--vn-line);
font-family: var(--vn-body);
}
.vnh.is-stuck { box-shadow: 0 1px 12px rgba(41,41,41,.06); }
.vnh__bar {
display: flex; align-items: center; gap: 16px;
max-width: var(--vn-max); margin-inline: auto;
padding: 0 var(--vn-gap);
height: 62px; /* ince */
}
@media (min-width: 900px) { .vnh__bar { height: 68px; } }
.vnh__burger {
display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
width: 40px; height: 40px; margin-inline-start: -8px;
background: none; border: 0; cursor: pointer; padding: 0;
}
.vnh__burger span { display: block; width: 21px; height: 1.5px; background: var(--vn-ink); transition: transform .2s ease; }
@media (min-width: 900px) { .vnh__burger { display: none; } }
.vnh__logo { display: flex; align-items: center; text-decoration: none; margin-inline: auto; }
@media (min-width: 900px) { .vnh__logo { margin-inline: 0; } }
.vnh__logo img { height: 26px; width: auto; object-fit: contain; }
.vnh__wordmark {
font-family: var(--vn-display); font-size: 19px; font-weight: 500;
letter-spacing: .22em; color: var(--vn-ink);
}
/* --- Masaüstü menü --- */
.vnh__nav { display: none; }
@media (min-width: 900px) {
.vnh__nav { display: block; margin-inline: auto; }
.vnh__nav > ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.vnh__nav > ul > li { position: static; }
.vnh__nav a {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--vn-display); font-size: 13px; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
color: var(--vn-ink) !important; padding: 22px 0;
}
.vnh__nav a:hover { color: var(--vn-sand-dk) !important; }
.vnh__caret { width: 10px; height: 7px; transition: transform .2s ease; }
.vnh__has-mega.is-open .vnh__caret { transform: rotate(180deg); }
}
/* --- Mega menü --- */
.vnh__mega { display: none; }
@media (min-width: 900px) {
.vnh__mega {
display: block;
position: absolute; inset-inline: 0; top: 100%;
background: var(--vn-white);
border-top: 1px solid var(--vn-line);
border-bottom: 1px solid var(--vn-line);
box-shadow: 0 14px 34px rgba(41,41,41,.07);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.vnh__has-mega.is-open .vnh__mega { opacity: 1; visibility: visible; transform: none; }
.vnh__mega-inner {
display: grid; grid-template-columns: 220px 1fr; gap: 44px;
max-width: var(--vn-max); margin-inline: auto;
padding: 30px var(--vn-gap) 34px;
}
.vnh__mega-label {
font-family: var(--vn-display); font-size: 11px; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase; color: var(--vn-sand-dk);
margin: 0 0 14px;
}
.vnh__mega-links { list-style: none; margin: 0; padding: 0; }
.vnh__mega-links li + li { margin-top: 2px; }
.vnh__mega-links a {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 9px 10px 9px 0;
font-family: var(--vn-body); font-size: 15px; font-weight: 400;
letter-spacing: 0; text-transform: none;
color: var(--vn-ink) !important; text-decoration: none; border-radius: var(--vn-radius);
}
.vnh__mega-links a:hover { color: var(--vn-sand-dk) !important; padding-inline-start: 8px; }
.vnh__mega-links span { font-size: 12px; color: var(--vn-muted); }
.vnh__mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vnh__mega-card { display: block; text-decoration: none; padding: 0 !important; }
.vnh__mega-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--vn-radius); background: var(--vn-surface); margin-bottom: 9px; }
.vnh__mega-name {
display: block; font-family: var(--vn-body); font-size: 13.5px; line-height: 1.4;
letter-spacing: 0; text-transform: none; color: var(--vn-ink) !important; margin-bottom: 3px;
}
.vnh__mega-price { display: block; font-family: var(--vn-display); font-size: 13.5px; font-weight: 500; color: var(--vn-ink); }
.vnh__mega-price .amount { color: var(--vn-ink); }
}
/* --- Sepet ikonu --- */
.vnh__cart { position: relative; display: inline-flex; color: var(--vn-ink) !important; text-decoration: none; padding: 6px; }
.vnh__cart svg { width: 22px; height: 22px; }
.vnh__cart-n {
position: absolute; top: -1px; inset-inline-end: -3px;
min-width: 17px; height: 17px; padding: 0 4px;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--vn-display); font-size: 10.5px; font-weight: 500;
background: var(--vn-sand-dk); color: #fff; border-radius: 999px;
}
/* ============================================================
17. MOBİL YAN PANEL
============================================================ */
.vn-drawer { position: fixed; inset: 0; z-index: 120; }
.vn-drawer[hidden] { display: none; }
.vn-drawer__scrim {
position: absolute; inset: 0; background: rgba(41,41,41,.42);
opacity: 0; transition: opacity .25s ease;
}
.vn-drawer.is-open .vn-drawer__scrim { opacity: 1; }
.vn-drawer__panel {
position: absolute; inset-block: 0; inset-inline-start: 0;
width: min(86vw, 330px);
background: var(--vn-white);
padding: 20px 24px 32px;
overflow-y: auto; z-index: 1;
transform: translateX(-100%);
transition: transform .25s ease;
}
.vn-drawer.is-open .vn-drawer__panel { transform: none; }
[dir="rtl"] .vn-drawer__panel { transform: translateX(100%); }
.vn-drawer__close {
background: none; border: 0; font-size: 30px; line-height: 1;
color: var(--vn-muted); cursor: pointer; padding: 0 0 14px; margin-inline-start: -4px;
}
.vn-drawer__nav { list-style: none; margin: 0 0 22px; padding: 0; }
.vn-drawer__nav a {
display: flex; justify-content: space-between; align-items: center;
padding: 13px 0; border-bottom: 1px solid var(--vn-line);
font-family: var(--vn-display); font-size: 16px; font-weight: 500;
color: var(--vn-ink) !important; text-decoration: none;
}
.vn-drawer__nav--sub a { font-family: var(--vn-body); font-size: 15px; font-weight: 400; }
.vn-drawer__nav--sub span { font-size: 12px; color: var(--vn-muted); }
.vn-drawer__nav--foot { margin-bottom: 0; }
.vn-drawer__label {
font-family: var(--vn-display); font-size: 11px; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase; color: var(--vn-sand-dk); margin: 0 0 6px;
}
/* ============================================================
18. ALT BİLGİ
============================================================ */
.vnf { background: var(--vn-ink); color: rgba(255,255,255,.72); font-family: var(--vn-body); }
.vnf__inner {
display: grid; gap: 34px;
grid-template-columns: 1fr;
max-width: var(--vn-max); margin-inline: auto;
padding: clamp(40px, 6vw, 64px) var(--vn-gap);
}
@media (min-width: 640px) { .vnf__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .vnf__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; } }
.vnf__logo {
display: inline-block; font-family: var(--vn-display); font-size: 19px; font-weight: 500;
letter-spacing: .22em; color: #fff !important; text-decoration: none; margin-bottom: 12px;
}
.vnf__tagline { color: rgba(255,255,255,.6); font-size: 14.5px; margin: 0 0 18px; max-width: 34ch; }
.vnf__badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vnf__badges li { position: relative; padding-inline-start: 22px; font-size: 13.5px; color: rgba(255,255,255,.72); }
.vnf__badges li::before {
content: ''; position: absolute; inset-inline-start: 0; top: 6px;
width: 11px; height: 6px;
border-inline-start: 1.5px solid var(--vn-sand); border-block-end: 1.5px solid var(--vn-sand);
transform: rotate(-45deg);
}
.vnf__badges em { font-style: normal; color: rgba(255,255,255,.45); }
.vnf__title {
font-family: var(--vn-display); font-size: 12px; font-weight: 500;
letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.vnf__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.vnf__links a { color: rgba(255,255,255,.72) !important; text-decoration: none; font-size: 14.5px; }
.vnf__links a:hover { color: var(--vn-sand) !important; }
.vnf__bottom { border-top: 1px solid rgba(255,255,255,.1); }
.vnf__bottom p {
max-width: var(--vn-max); margin-inline: auto;
padding: 18px var(--vn-gap); font-size: 13px; color: rgba(255,255,255,.45); margin-block: 0;
}
/* ============================================================
19. ÜRÜNLER SAYFASI BAŞLIĞI — ince ve sade
============================================================ */
.vn-shop__head {
background: transparent;
border-bottom: 1px solid var(--vn-line);
padding-block: clamp(22px, 3vw, 34px);
margin-bottom: clamp(20px, 3vw, 30px);
}
.vn-shop__head h1 { font-size: clamp(24px, 4vw, 34px); margin: 0 0 6px; }
.vn-shop__lead { font-size: 15px; }
/* Tema tüm bağlantılara altın rengi veriyordu — sepet/çip metinlerini düzelt */
.vn .vn-chip { color: var(--vn-ink) !important; }
.vn .vn-chip.is-active { color: var(--vn-white) !important; }
.vn .vn-btn { color: var(--vn-white) !important; }
.vn .vn-btn--ghost { color: var(--vn-ink) !important; }
.vn .vn-btn--ghost:hover { color: var(--vn-white) !important; }
.vn .vn-card__title a { color: var(--vn-ink) !important; }
.vn .vn-card__title a:hover { color: var(--vn-sand-dk) !important; }
/* ============================================================
20. ÜRÜNLER BAŞLIĞI — tek satır, ince
Başlık ve açıklama yan yana; sayfa üstü minimum yer kaplar.
============================================================ */
.vn-shop__head {
background: transparent;
border-bottom: 1px solid var(--vn-line);
padding-block: 14px !important;
margin-bottom: 20px !important;
}
.vn-shop__head-row {
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.vn .vn-shop__head h1 {
font-size: 22px !important;
line-height: 1.2;
margin: 0 !important;
white-space: nowrap;
}
@media (min-width: 900px) { .vn .vn-shop__head h1 { font-size: 26px !important; } }
.vn-shop__lead {
margin: 0 !important;
font-size: 14px;
color: var(--vn-muted);
}
@media (max-width: 699px) { .vn-shop__lead { display: none; } } /* mobilde başlık tek başına */
.vn-filters { margin-bottom: 20px; }
/* ============================================================
21. MEGA MENÜ DÜZELTMESİ
------------------------------------------------------------
Sorun: `.vnh__nav a` kuralı menü içindeki TÜM bağlantılara
inline-flex + dikey ortalama + 22px dolgu veriyordu. Mega menü
ürün kartları da bundan etkilenip görsel ve yazı yan yana
binmişti. Kuralı yalnızca üst düzey menü öğelerine bağlıyoruz.
============================================================ */
@media (min-width: 900px) {
/* üst düzey öğeler dışındaki bağlantılar nav kuralından muaf */
.vnh__nav .vnh__mega a {
display: block;
padding: 0;
font-family: var(--vn-body);
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
/* kategori listesi: ad solda, adet sağda */
.vnh__nav .vnh__mega .vnh__mega-links a {
display: flex !important;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 9px 0 !important;
font-size: 15px;
border-bottom: 1px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.vnh__nav .vnh__mega .vnh__mega-links a:hover {
color: var(--vn-sand-dk) !important;
border-bottom-color: var(--vn-line);
padding-inline-start: 0 !important;
}
/* ürün kartı: görsel üstte, ad ve fiyat altta */
.vnh__nav .vnh__mega .vnh__mega-card {
display: flex !important;
flex-direction: column;
gap: 0;
padding: 0 !important;
align-items: stretch;
}
.vnh__mega-card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--vn-radius);
background: var(--vn-surface);
margin: 0 0 10px;
}
.vnh__mega-name {
display: block;
font-size: 13.5px;
line-height: 1.4;
color: var(--vn-ink) !important;
margin-bottom: 4px;
/* uzun adlar kartı bozmasın */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vnh__mega-price {
display: block;
font-family: var(--vn-display);
font-size: 13.5px;
font-weight: 500;
color: var(--vn-ink) !important;
margin-top: auto;
}
.vnh__mega-price .amount,
.vnh__mega-price bdi { color: var(--vn-ink); }
/* ızgara ve sütun ölçüleri */
.vnh__mega-inner {
grid-template-columns: 200px minmax(0, 1fr);
gap: 48px;
padding-block: 28px 32px;
align-items: start;
}
.vnh__mega-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
}
}
/* Ürünler başlığı: beyaz zeminde sayfa dağınık görünüyordu —
hafif gri bir şerit başlığı içerikten ayırıyor. */
.vn-shop__head {
background: var(--vn-surface) !important;
border-bottom: 1px solid var(--vn-line);
margin-bottom: 24px !important;
}
/* ============================================================
22. BAŞLIK — tema buton/eleman stillerini bastır
Temanın global `button` kuralı hamburgere siyah zemin, kenarlık
ve 15px/28px dolgu veriyordu; çizgilerin yüksekliği de siliniyordu.
============================================================ */
.vnh__burger,
.vnh button.vnh__burger {
background: none !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
width: 40px !important;
height: 40px !important;
min-height: 0 !important;
border-radius: 0 !important;
display: inline-flex !important;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
}
@media (min-width: 900px) { .vnh__burger, .vnh button.vnh__burger { display: none !important; } }
.vnh__burger span {
display: block !important;
width: 21px !important;
height: 2px !important;
min-height: 2px !important;
background: var(--vn-ink) !important;
border-radius: 2px;
}
/* Kelime-logo */
.vnh__wordmark {
font-family: var(--vn-display);
font-size: 18px;
font-weight: 500;
letter-spacing: .24em;
color: var(--vn-ink) !important;
white-space: nowrap;
}
@media (min-width: 900px) { .vnh__wordmark { font-size: 19px; } }
.vnh__logo { text-decoration: none !important; }
/* Sepet ikonu tema buton stilinden etkilenmesin */
.vnh__cart {
background: none !important;
border: 0 !important;
padding: 6px !important;
min-height: 0 !important;
}
/* Marka logosu — logo1.png (koyu kahve VIVONEST kelime-logosu) */
.vnh__logo-img {
display: block;
height: 22px;
width: auto;
max-width: 170px;
object-fit: contain;
}
@media (min-width: 900px) { .vnh__logo-img { height: 26px; max-width: 200px; } }
/* ============================================================
23. ÜRÜN KARTI — yeniden tasarım
------------------------------------------------------------
Önceki hâlinde başlık ile fiyat arasında satır sayısına göre
değişen boşluk oluşuyor, dört ağır siyah buton yan yana gelince
ızgara ezici görünüyordu. Artık başlık iki satıra sabitleniyor,
buton hafif çerçeveli — üzerine gelince doluyor.
============================================================ */
.vn .vn-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--vn-white);
border: 1px solid var(--vn-line);
border-radius: 6px;
overflow: hidden;
transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.vn .vn-card:hover {
border-color: #DDD6C8;
box-shadow: 0 6px 22px rgba(41, 41, 41, .07);
transform: translateY(-2px);
}
.vn .vn-card__media {
position: relative;
display: block;
overflow: hidden;
background: var(--vn-surface);
}
.vn .vn-card__media img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform .5s cubic-bezier(.2, .6, .3, 1);
}
.vn .vn-card:hover .vn-card__media img { transform: scale(1.045); }
.vn .vn-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 14px 14px 16px;
gap: 0;
}
@media (min-width: 720px) { .vn .vn-card__body { padding: 16px 16px 18px; } }
.vn .vn-card__cat {
font-family: var(--vn-display);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--vn-muted);
margin: 0 0 7px;
}
/* başlık iki satıra sabit — kartlar aynı hizada kalsın */
.vn .vn-card__title {
margin: 0 0 10px;
min-height: 2.7em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vn .vn-card__price {
font-family: var(--vn-display);
font-size: 17px !important;
font-weight: 500;
color: var(--vn-ink);
margin: 0 0 14px;
line-height: 1.2;
}
.vn .vn-card__price del { color: #AFAFAF; font-weight: 300; font-size: 14px; margin-inline-end: 7px; }
.vn .vn-card__price ins { text-decoration: none; color: var(--vn-sand-dk); }
/* buton: hafif çerçeve, üzerine gelince dolar */
.vn .vn-card .vn-btn {
width: 100%;
margin-top: auto;
padding: 12px 10px;
min-height: 44px;
font-size: 11.5px;
letter-spacing: .14em;
border-radius: 4px;
background: transparent !important;
color: var(--vn-ink) !important;
border: 1px solid var(--vn-ink);
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.vn .vn-card .vn-btn:hover,
.vn .vn-card .vn-btn:focus-visible {
background: var(--vn-ink) !important;
color: var(--vn-white) !important;
border-color: var(--vn-ink);
}
/* rozet */
.vn .vn-card__badge {
inset-block-start: 12px;
inset-inline-start: 12px;
font-size: 10px;
letter-spacing: .12em;
padding: 5px 9px;
border-radius: 3px;
backdrop-filter: blur(2px);
}
/* ızgara aralığı biraz daha ferah */
.vn-products { gap: clamp(12px, 2.4vw, 22px); }
/* ============================================================
24. METİN SAYFALARI — İletişim, Gizlilik, İptal-İade
============================================================ */
.vn-page__head {
background: var(--vn-surface);
border-bottom: 1px solid var(--vn-line);
padding-block: 22px;
margin-bottom: clamp(28px, 4vw, 44px);
}
.vn .vn-page__head h1 { font-size: clamp(22px, 3.4vw, 28px) !important; margin: 0 !important; }
.vn-page { padding-bottom: clamp(48px, 8vw, 88px); }
/* Okunabilir metin sütunu */
.vn-prose { max-width: 74ch; font-size: 16px; line-height: 1.75; color: #444; }
.vn-prose > *:first-child { margin-top: 0; }
.vn .vn-prose h2 { font-size: clamp(19px, 2.6vw, 23px); margin: 2em 0 .6em; }
.vn .vn-prose h3 { font-size: clamp(16px, 2.2vw, 18px); margin: 1.7em 0 .5em; }
.vn-prose p { margin: 0 0 1.15em; }
.vn-prose ul, .vn-prose ol { margin: 0 0 1.3em; padding-inline-start: 1.3em; }
.vn-prose li { margin-bottom: .5em; }
.vn-prose a { color: var(--vn-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vn-sand); }
.vn-prose a:hover { color: var(--vn-sand-dk); }
.vn-prose strong { color: var(--vn-ink); font-weight: 500; }
.vn-prose img { border-radius: var(--vn-radius); margin: 1.5em 0; }
.vn-prose hr { border: 0; border-top: 1px solid var(--vn-line); margin: 2.4em 0; }
.vn-prose blockquote {
margin: 1.6em 0; padding: 4px 0 4px 18px;
border-inline-start: 2px solid var(--vn-sand);
color: var(--vn-muted); font-style: normal;
}
.vn-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; }
.vn-prose th, .vn-prose td { padding: 11px 12px; border: 1px solid var(--vn-line); text-align: start; }
.vn-prose th { background: var(--vn-surface); font-family: var(--vn-display); font-weight: 500; }
/* Uzun metinlerde yatay taşmayı engelle */
.vn-prose { overflow-wrap: anywhere; }
.vn-prose pre { overflow-x: auto; }
/* Elementor'dan kalan boş paragraf/aralık öğeleri metin sayfalarında
büyük bir boşluk bırakıyordu — toparlıyoruz. */
.vn-prose p:empty,
.vn-prose div:empty,
.vn-prose p > br:only-child { display: none; }
.vn-prose > p:first-child:has(> br:only-child) { display: none; }
.vn-page { padding-top: 0; }
.vn-prose > br { display: none; }
/* ============================================================
25. KURUMSAL MEGA MENÜSÜ — yasal sayfalar
============================================================ */
@media (min-width: 900px) {
.vnh__mega-inner--legal {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
padding-block: 26px 30px;
}
.vnh__nav .vnh__mega .vnh__mega-tile {
display: flex !important;
flex-direction: column;
gap: 5px;
padding: 16px 18px !important;
border: 1px solid var(--vn-line);
border-radius: 6px;
background: var(--vn-white);
transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.vnh__nav .vnh__mega .vnh__mega-tile:hover {
border-color: var(--vn-sand);
background: var(--vn-surface);
transform: translateY(-2px);
}
.vnh__mega-tile-title {
font-family: var(--vn-display);
font-size: 14.5px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--vn-ink) !important;
line-height: 1.3;
}
.vnh__mega-tile-desc {
font-family: var(--vn-body);
font-size: 12.5px;
font-weight: 300;
line-height: 1.45;
color: var(--vn-muted) !important;
text-transform: none;
letter-spacing: 0;
}
}
/* ============================================================
26. METİN SAYFALARI — giriş paragrafı
============================================================ */
.vn-prose .vn-lede {
font-size: 17px;
line-height: 1.6;
color: var(--vn-ink);
padding: 18px 20px;
background: var(--vn-surface);
border-inline-start: 3px solid var(--vn-sand);
border-radius: 0 var(--vn-radius) var(--vn-radius) 0;
margin-bottom: 26px;
}
.vn-prose > p > em:only-child { color: var(--vn-muted); font-size: 13.5px; font-style: normal; }
/* ============================================================
27. İLETİŞİM SAYFASI — bilgi kartları + harita
============================================================ */
.vn-contact { margin: 0 0 40px; }
.vn-contact__grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 24px;
}
@media (min-width: 560px) { .vn-contact__grid { grid-template-columns: repeat(2, 1fr); } }
.vn-contact__card {
display: flex;
flex-direction: column;
gap: 5px;
padding: 18px 20px;
border: 1px solid var(--vn-line);
border-radius: 6px;
background: var(--vn-white);
transition: border-color .18s ease;
}
.vn-contact__card:hover { border-color: var(--vn-sand); }
.vn-contact__label {
font-family: var(--vn-display);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--vn-sand-dk);
}
.vn-contact__value {
font-family: var(--vn-display);
font-size: 18px;
font-weight: 500;
color: var(--vn-ink) !important;
text-decoration: none !important;
line-height: 1.3;
overflow-wrap: anywhere;
}
a.vn-contact__value:hover { color: var(--vn-sand-dk) !important; }
.vn-contact__value--sm { font-size: 15.5px; font-weight: 400; font-family: var(--vn-body); }
.vn-contact__note { font-size: 13px; color: var(--vn-muted); line-height: 1.45; }
/* Harita */
.vn-contact__map {
position: relative;
overflow: hidden;
border: 1px solid var(--vn-line);
border-radius: 6px;
background: var(--vn-surface);
aspect-ratio: 16 / 10;
}
@media (min-width: 760px) { .vn-contact__map { aspect-ratio: 21 / 8; } }
.vn-contact__map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
filter: grayscale(.25);
}
.vn-contact__maplink { margin: 12px 0 0; }
.vn-contact__maplink a {
font-family: var(--vn-display);
font-size: 13px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--vn-ink) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--vn-sand);
padding-bottom: 3px;
}
.vn-contact__maplink a:hover { color: var(--vn-sand-dk) !important; border-color: var(--vn-sand-dk); }
/* İletişim sayfasındaki dev logo görselini kaldır */
.page-id-3 .vn-prose > p > img,
.page-id-3 .vn-prose > figure > img { max-width: 200px; height: auto; }
/* ============================================================
28. SEPET ROZETİ VE MİNİ SEPET
============================================================ */
.vnh__cart-wrap { position: relative; display: inline-flex; }
.vnh__cart-n {
position: absolute; top: -2px; inset-inline-end: -4px;
min-width: 18px; height: 18px; padding: 0 5px;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--vn-display); font-size: 10.5px; font-weight: 500; line-height: 1;
background: var(--vn-sand-dk); color: #fff !important; border-radius: 999px;
transition: transform .18s ease;
}
.vnh__cart-n.is-empty { display: none; }
.vnh__cart-n.is-bump { transform: scale(1.28); }
/* --- Açılır panel --- */
.vnh__minicart {
position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
width: min(92vw, 340px);
background: var(--vn-white);
border: 1px solid var(--vn-line);
border-radius: 8px;
box-shadow: 0 14px 38px rgba(41,41,41,.12);
padding: 16px;
z-index: 120;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.vnh__cart-wrap.is-open .vnh__minicart { opacity: 1; visibility: visible; transform: none; }
.vnh__minicart-empty { color: var(--vn-muted); font-size: 14.5px; text-align: center; margin: 8px 0 14px; }
.vnh__minicart-list { list-style: none; margin: 0 0 14px; padding: 0; max-height: 300px; overflow-y: auto; }
.vnh__minicart-item {
display: grid; grid-template-columns: 52px 1fr 22px; gap: 12px; align-items: center;
padding: 10px 0; border-bottom: 1px solid var(--vn-line);
}
.vnh__minicart-item:last-child { border-bottom: 0; }
.vnh__minicart-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 4px; background: var(--vn-surface); }
.vnh__minicart-info { min-width: 0; }
.vnh__minicart-name {
display: block; font-family: var(--vn-display); font-size: 13.5px; font-weight: 500;
line-height: 1.35; color: var(--vn-ink) !important; text-decoration: none;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.vnh__minicart-name:hover { color: var(--vn-sand-dk) !important; }
.vnh__minicart-meta { display: block; font-size: 12.5px; color: var(--vn-muted); margin-top: 3px; }
.vnh__minicart-meta .amount { color: var(--vn-muted); }
.vnh__minicart-x {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; font-size: 17px; line-height: 1;
color: var(--vn-muted) !important; text-decoration: none; border-radius: 50%;
}
.vnh__minicart-x:hover { background: var(--vn-surface); color: #b32d2e !important; }
.vnh__minicart-total {
display: flex; justify-content: space-between; align-items: baseline;
padding: 12px 0; border-top: 1px solid var(--vn-line); font-size: 14px;
}
.vnh__minicart-total span { color: var(--vn-muted); }
.vnh__minicart-total strong { font-family: var(--vn-display); font-size: 17px; font-weight: 500; }
.vnh__minicart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vnh__minicart-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 11px 8px; min-height: 44px;
font-family: var(--vn-display); font-size: 11.5px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase; text-align: center;
text-decoration: none !important; border-radius: 4px;
background: var(--vn-ink); color: var(--vn-white) !important;
border: 1px solid var(--vn-ink);
transition: background .18s ease, color .18s ease;
}
.vnh__minicart-btn:hover { background: var(--vn-sand-dk); border-color: var(--vn-sand-dk); }
.vnh__minicart-btn--ghost { background: transparent; color: var(--vn-ink) !important; }
.vnh__minicart-btn--ghost:hover { background: var(--vn-ink); color: var(--vn-white) !important; }
.vnh__minicart-empty + .vnh__minicart-btn { width: 100%; }
/* "Sepete eklendi" geri bildirimi */
.vn .vn-btn.added { position: relative; }
.vn .vn-btn.loading { opacity: .6; pointer-events: none; }
.vn .added_to_cart { display: none; } /* WooCommerce'in kendi "sepeti görüntüle" bağlantısı */
/* ============================================================
29. SEPET — kargo (yalnızca ülke seçimi)
============================================================ */
.vnc__ship { margin-top: 8px; }
.vnc__ship-label {
font-family: var(--vn-display); font-size: 12px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase; color: var(--vn-muted);
margin: 0 0 8px;
}
.vnc__ship-row { display: flex; gap: 8px; align-items: stretch; }
.vn .vnc__ship-select {
flex: 1 1 auto; min-width: 0;
min-height: 44px; padding: 9px 12px;
font-family: var(--vn-body); font-size: 15px; color: var(--vn-ink);
background: var(--vn-white) !important;
border: 1px solid var(--vn-line) !important;
border-radius: var(--vn-radius) !important;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237A7A7A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 11px !important;
padding-inline-end: 32px;
}
.vn .vnc__ship-select:focus { border-color: var(--vn-ink) !important; outline: none; }
.vnc__ship .vnc__btn { flex: 0 0 auto; padding: 10px 16px; min-height: 44px; font-size: 11.5px; }
.vnc__ship-note {
margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--vn-muted);
}
/* WooCommerce'in kendi eyalet/şehir/posta alanlarını sepette gizle */
.vnc__ship .woocommerce-shipping-calculator p:not(.vnc__ship-label):not(.vnc__ship-note),
.vnc__ship #calc_shipping_state_field,
.vnc__ship #calc_shipping_city_field,
.vnc__ship #calc_shipping_postcode_field { display: none !important; }
/* ============================================================
30. ÖDEME SAYFASI
============================================================ */
.vnck { padding-block: clamp(20px, 3vw, 34px) clamp(48px, 7vw, 80px); }
.vnck__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding-bottom: 18px; margin-bottom: clamp(20px, 3vw, 30px);
border-bottom: 1px solid var(--vn-line);
}
.vn .vnck__title { font-size: clamp(22px, 3.4vw, 28px) !important; margin: 0 0 6px !important; }
.vnck__steps { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--vn-muted); margin: 0; }
.vnck__steps a { color: var(--vn-muted) !important; text-decoration: none; }
.vnck__steps a:hover { color: var(--vn-ink) !important; }
.vnck__steps strong { color: var(--vn-ink); font-weight: 500; }
.vnck__back {
font-family: var(--vn-display); font-size: 12px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
color: var(--vn-ink) !important; text-decoration: none !important;
border-bottom: 1px solid var(--vn-sand); padding-bottom: 3px;
}
/* --- Izgara --- */
.vnck__grid { display: grid; gap: clamp(20px, 3vw, 36px); align-items: start; }
@media (min-width: 960px) { .vnck__grid { grid-template-columns: minmax(0, 1fr) 380px; } }
.vnck__card {
border: 1px solid var(--vn-line); border-radius: 8px;
background: #fff; padding: clamp(18px, 3vw, 26px);
margin-bottom: 18px;
}
.vn .vnck__card-title { font-size: 17px !important; margin: 0 0 18px !important; }
/* --- Form alanları --- */
.vnck .form-row { margin: 0 0 14px; padding: 0; }
.vnck .form-row label {
display: block; font-size: 13px; color: var(--vn-muted);
margin-bottom: 6px; font-weight: 400;
}
.vnck .form-row .required { color: #B3261E; text-decoration: none; }
.vnck input[type="text"], .vnck input[type="email"], .vnck input[type="tel"],
.vnck input[type="password"], .vnck textarea, .vnck select,
.vnck .select2-selection {
width: 100%; min-height: 48px; padding: 11px 14px !important;
font-family: var(--vn-body) !important; font-size: 15px !important;
color: var(--vn-ink) !important;
background: #fff !important;
border: 1px solid var(--vn-line) !important;
border-radius: 6px !important;
box-shadow: none !important;
}
.vnck textarea { min-height: 92px; }
.vnck input:focus, .vnck textarea:focus, .vnck select:focus { border-color: var(--vn-ink) !important; outline: none; }
@media (min-width: 620px) {
.vnck .vnck__fields > .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.vnck #billing_first_name_field, .vnck #billing_last_name_field { grid-column: span 1; }
.vnck #billing_email_field, .vnck #billing_phone_field { grid-column: span 1; }
.vnck .form-row-wide, .vnck #billing_address_1_field, .vnck #billing_address_2_field,
.vnck #billing_country_field, .vnck #order_comments_field { grid-column: 1 / -1; }
}
/* --- Sipariş özeti --- */
.vnck__summary {
border: 1px solid var(--vn-line); border-radius: 8px;
background: var(--vn-surface); overflow: hidden;
}
@media (min-width: 960px) { .vnck__summary { position: sticky; top: 84px; } }
.vnck__summary-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; padding: 16px 18px;
background: none; border: 0; cursor: pointer; text-align: start;
font-family: var(--vn-body);
}
@media (min-width: 960px) { .vnck__summary-toggle { cursor: default; pointer-events: none; } }
.vnck__summary-label { font-family: var(--vn-display); font-size: 15px; font-weight: 500; color: var(--vn-ink); }
.vnck__summary-count { display: block; font-family: var(--vn-body); font-size: 12.5px; font-weight: 400; color: var(--vn-muted); margin-top: 2px; }
.vnck__summary-right { display: flex; align-items: center; gap: 10px; }
.vnck__summary-total { font-family: var(--vn-display); font-size: 17px; font-weight: 500; color: var(--vn-ink); }
.vnck__summary-caret { width: 12px; height: 8px; color: var(--vn-muted); transition: transform .2s ease; }
.vnck__summary-toggle[aria-expanded="true"] .vnck__summary-caret { transform: rotate(180deg); }
@media (min-width: 960px) { .vnck__summary-caret { display: none; } }
.vnck__summary-body { padding: 0 18px 18px; border-top: 1px solid var(--vn-line); }
@media (max-width: 959px) { .vnck__summary-body[hidden] { display: none; } }
@media (min-width: 960px) { .vnck__summary-body[hidden] { display: block !important; } }
/* --- Ürün satırları --- */
.vnck__items { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 14px; }
.vnck__item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.vnck__item-media { position: relative; }
.vnck__item-media img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #fff; border: 1px solid var(--vn-line); }
.vnck__item-qty {
position: absolute; top: -7px; inset-inline-end: -7px;
min-width: 20px; height: 20px; padding: 0 5px;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--vn-display); font-size: 11px; font-weight: 500;
background: var(--vn-ink); color: #fff; border-radius: 999px;
}
.vnck__item-info { min-width: 0; }
.vnck__item-name { display: block; font-size: 13.5px; line-height: 1.4; color: var(--vn-ink); }
.vnck__item-info dl.variation { font-size: 12px; color: var(--vn-muted); margin: 3px 0 0; }
.vnck__item-price { font-family: var(--vn-display); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
/* --- Toplamlar --- */
.vnck__totals { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--vn-line); }
.vnck__total-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 0; font-size: 14px; }
.vnck__total-row dt { color: var(--vn-muted); margin: 0; }
.vnck__total-row dd { margin: 0; text-align: end; }
.vnck__total-row--discount dd { color: #2E7D32; }
.vnck__total-row--grand { border-top: 1px solid var(--vn-line); margin-top: 8px; padding-top: 14px; }
.vnck__total-row--grand dt { color: var(--vn-ink); font-family: var(--vn-display); font-size: 16px; font-weight: 500; }
.vnck__total-row--grand dd { font-family: var(--vn-display); font-size: 20px; font-weight: 500; }
/* WooCommerce kargo satırı tablo etiketleriyle geliyor */
.vnck__total-row--shipping { display: block; }
.vnck__total-row--shipping table,
.vnck__total-row--shipping tbody,
.vnck__total-row--shipping tr { display: block; width: 100%; }
.vnck__total-row--shipping th,
.vnck__total-row--shipping td { display: block; width: 100%; padding: 0; border: 0; text-align: start; font-weight: 400; }
.vnck__total-row--shipping th { color: var(--vn-muted); font-size: 14px; margin-bottom: 4px; font-family: var(--vn-body); text-transform: none; letter-spacing: 0; }
.vnck__total-row--shipping ul { list-style: none; margin: 0; padding: 0; }
.vnck__total-row--shipping label { font-size: 14px; color: var(--vn-ink); }
/* --- Ödeme yöntemleri --- */
.vnck__payment { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--vn-line); }
.vnck .wc_payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.vnck .wc_payment_method > label {
display: flex !important; align-items: center; gap: 10px;
padding: 13px 14px; border: 1px solid var(--vn-line); border-radius: 6px;
background: #fff; cursor: pointer; font-size: 14.5px; color: var(--vn-ink); margin: 0;
}
.vnck .wc_payment_method input:checked + label { border-color: var(--vn-ink); }
.vnck .payment_box {
background: #fff !important; border: 1px solid var(--vn-line); border-radius: 6px;
padding: 14px !important; margin: 6px 0 0 !important; font-size: 13.5px; color: var(--vn-muted);
}
.vnck .payment_box::before { display: none !important; }
.vnck #place_order,
.vnck .woocommerce-form__label + button,
.vnck button[name="woocommerce_checkout_place_order"] {
width: 100%; min-height: 56px; margin-top: 8px;
font-family: var(--vn-display) !important; font-size: 14px !important; font-weight: 500 !important;
letter-spacing: .12em; text-transform: uppercase;
background: var(--vn-ink) !important; color: #fff !important;
border: 1px solid var(--vn-ink) !important; border-radius: 6px !important;
}
.vnck #place_order:hover { background: var(--vn-sand-dk) !important; border-color: var(--vn-sand-dk) !important; }
.vnck .woocommerce-terms-and-conditions-wrapper { font-size: 13px; color: var(--vn-muted); margin-bottom: 12px; }
/* --- Bildirimler --- */
.vnck .woocommerce-error, .vnck .woocommerce-info, .vnck .woocommerce-message {
border-top-color: var(--vn-sand-dk); background: var(--vn-surface);
border-radius: 6px; font-size: 14.5px; list-style: none;
}
/* ============================================================
31. ÜRÜN SAYFASI
============================================================ */
.vnp {
max-width: var(--vn-max);
margin-inline: auto;
padding: clamp(14px, 2.5vw, 24px) var(--vn-gap) clamp(48px, 7vw, 80px);
}
.vnp__crumbs { display: flex; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--vn-muted); margin-bottom: 18px; }
.vnp__crumbs a { color: var(--vn-muted) !important; text-decoration: none; }
.vnp__crumbs a:hover { color: var(--vn-ink) !important; }
/* --- Üst blok --- */
.vnp__top { display: grid; gap: clamp(22px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .vnp__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
/* --- Galeri --- */
@media (min-width: 900px) { .vnp__gallery { position: sticky; top: 88px; } }
.vnp__stage { position: relative; border: 1px solid var(--vn-line); border-radius: 10px; overflow: hidden; background: var(--vn-surface); }
.vnp__stage img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.vnp__badge {
position: absolute; inset-block-start: 14px; inset-inline-start: 14px;
font-family: var(--vn-display); font-size: 11px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase;
padding: 6px 12px; border-radius: 3px;
background: var(--vn-sand-dk); color: #fff;
}
.vnp__badge--muted { background: var(--vn-muted); }
.vnp__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.vnp__thumbs::-webkit-scrollbar { display: none; }
.vnp__thumb {
flex: 0 0 auto; width: 72px; height: 72px; padding: 0;
border: 1px solid var(--vn-line); border-radius: 6px; overflow: hidden;
background: var(--vn-surface); cursor: pointer;
transition: border-color .18s ease;
}
.vnp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vnp__thumb.is-active, .vnp__thumb:hover { border-color: var(--vn-ink); }
/* --- Satın alma kutusu --- */
.vnp__cat {
font-family: var(--vn-display); font-size: 11px; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase;
color: var(--vn-sand-dk); margin: 0 0 10px;
}
.vn .vnp__title {
font-size: clamp(24px, 3.6vw, 34px) !important;
line-height: 1.2; margin: 0 0 14px !important;
text-transform: none !important; letter-spacing: 0;
}
.vnp__price { font-family: var(--vn-display); font-size: clamp(26px, 3.4vw, 32px); font-weight: 500; color: var(--vn-ink); margin-bottom: 16px; }
.vnp__price del { color: #AFAFAF; font-weight: 300; font-size: .62em; margin-inline-end: 10px; }
.vnp__price ins { text-decoration: none; color: var(--vn-sand-dk); }
.vnp__price .amount { color: inherit; }
.vnp__short { font-size: 15.5px; line-height: 1.65; color: var(--vn-muted); margin-bottom: 18px; }
.vnp__short p:last-child { margin-bottom: 0; }
.vnp__stock { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 20px; }
.vnp__stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.vnp__stock.is-in { color: #2E7D32; }
.vnp__stock.is-in::before { background: #2E7D32; }
.vnp__stock.is-out { color: #B3261E; }
.vnp__stock.is-out::before { background: #B3261E; }
/* --- Sepete ekle formu --- */
.vnp form.cart { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin: 0 0 22px; }
.vnp form.cart .quantity { flex: 0 0 auto; }
.vnp form.cart input.qty,
.vnp form.cart input[type="number"] {
width: 84px !important; min-height: 56px;
padding: 10px !important; text-align: center;
font-size: 16px !important; font-family: var(--vn-body) !important;
color: var(--vn-ink) !important;
background: #fff !important;
border: 1px solid var(--vn-line) !important;
border-radius: 6px !important;
}
.vnp form.cart button[type="submit"],
.vnp form.cart .single_add_to_cart_button {
flex: 1 1 220px; min-height: 56px;
font-family: var(--vn-display) !important; font-size: 14px !important; font-weight: 500 !important;
letter-spacing: .12em; text-transform: uppercase;
background: var(--vn-ink) !important; color: #fff !important;
border: 1px solid var(--vn-ink) !important; border-radius: 6px !important;
cursor: pointer;
transition: background .18s ease, border-color .18s ease;
}
.vnp form.cart button[type="submit"]:hover { background: var(--vn-sand-dk) !important; border-color: var(--vn-sand-dk) !important; }
/* --- Güven satırı --- */
.vnp__trust { list-style: none; margin: 0 0 18px; padding: 18px 0; border-block: 1px solid var(--vn-line); display: grid; gap: 12px; }
.vnp__trust li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--vn-muted); }
.vnp__trust svg { flex: 0 0 19px; width: 19px; height: 19px; margin-top: 1px; fill: none; stroke: var(--vn-sand-dk); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vnp__trust strong { color: var(--vn-ink); font-weight: 500; }
.vnp__help { font-size: 13.5px; line-height: 1.6; color: var(--vn-muted); margin: 0; }
.vnp__help a { color: var(--vn-ink); text-decoration: underline; text-underline-offset: 3px; }
/* --- Detay bölümleri --- */
.vnp__detail { margin-top: clamp(44px, 6vw, 72px); }
.vnp__section { padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--vn-line); margin-bottom: clamp(28px, 4vw, 40px); }
.vn .vnp__section h2 { font-size: clamp(19px, 2.6vw, 23px) !important; margin: 0 0 18px !important; }
.vnp__section .vn-prose { max-width: 68ch; }
.vnp__attrs table { width: 100%; border-collapse: collapse; max-width: 620px; font-size: 14.5px; }
.vnp__attrs th, .vnp__attrs td { padding: 12px 14px; border: 1px solid var(--vn-line); text-align: start; }
.vnp__attrs th { background: var(--vn-surface); font-family: var(--vn-display); font-weight: 500; width: 40%; }
.vnp__attrs p { margin: 0; }
.vnp__cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .vnp__cards { grid-template-columns: repeat(3, 1fr); } }
.vnp__info-card { border: 1px solid var(--vn-line); border-radius: 8px; padding: 20px; background: #fff; }
.vn .vnp__info-card h3 { font-size: 15px !important; margin: 0 0 8px !important; }
.vnp__info-card p { font-size: 13.5px; line-height: 1.6; color: var(--vn-muted); margin: 0; }
.vnp__info-card a { color: var(--vn-ink); text-decoration: underline; text-underline-offset: 3px; }
/* --- İlgili ürünler --- */
.vnp__related { margin-top: clamp(44px, 6vw, 72px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--vn-line); }
.vnp__related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.vn .vnp__related-head h2 { font-size: clamp(19px, 2.6vw, 23px) !important; margin: 0 !important; }
.vnp__related-all {
font-family: var(--vn-display); font-size: 12px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
color: var(--vn-ink) !important; text-decoration: none !important;
border-bottom: 1px solid var(--vn-sand); padding-bottom: 3px; white-space: nowrap;
}
/* --- Mobil yapışkan satın alma çubuğu --- */
.vnp__sticky {
position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
display: flex; align-items: center; gap: 12px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: #fff; border-top: 1px solid var(--vn-line);
box-shadow: 0 -4px 18px rgba(41,41,41,.08);
transform: translateY(100%); transition: transform .25s ease;
}
.vnp__sticky.is-on { transform: none; }
@media (min-width: 900px) { .vnp__sticky { display: none !important; } }
.vnp__sticky-info { min-width: 0; flex: 1 1 auto; }
.vnp__sticky-name { display: block; font-size: 12.5px; color: var(--vn-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vnp__sticky-price { display: block; font-family: var(--vn-display); font-size: 16px; font-weight: 500; color: var(--vn-ink); }
.vnp__sticky-price .amount { color: inherit; }
.vnp__sticky-btn {
flex: 0 0 auto; min-height: 48px; padding: 12px 24px;
font-family: var(--vn-display); font-size: 12.5px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
background: var(--vn-ink); color: #fff;
border: 0; border-radius: 6px; cursor: pointer;
}
/* Değerlendirmeler bloğunu sadeleştir */
.vnp #reviews { margin-top: clamp(44px, 6vw, 72px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--vn-line); }
.vn .vnp #reviews h2 { font-size: clamp(19px, 2.6vw, 23px) !important; }
/* ============================================================
32. ÜRÜN SAYFASI — düzeltmeler
============================================================ */
/* --- Küçük görseller ---
Bunlar |