/* ============================================================
   Vera Leath — Porto marka skin override'i
   Porto tüm CSS'lerinden SONRA yüklenir. Palet: espresso/cognac/gold/cream.
   ============================================================ */

:root {
    /* Primary = gold */
    --primary: #C8A15A;
    --primary-100: #BC9247;
    --primary-200: #B4893D;
    --primary-300: #A87E34;
    --primary--100: #D2AE6E;
    --primary--200: #D9BA82;
    --primary--300: #E0C596;
    --primary-rgba-0: rgba(200,161,90,0);
    --primary-rgba-10: rgba(200,161,90,.1);
    --primary-rgba-20: rgba(200,161,90,.2);
    --primary-rgba-30: rgba(200,161,90,.3);
    --primary-rgba-40: rgba(200,161,90,.4);
    --primary-rgba-50: rgba(200,161,90,.5);
    --primary-rgba-60: rgba(200,161,90,.6);
    --primary-rgba-70: rgba(200,161,90,.7);
    --primary-rgba-80: rgba(200,161,90,.8);
    --primary-rgba-90: rgba(200,161,90,.9);

    /* Secondary = cognac */
    --secondary: #7B4B2A;
    --secondary-100: #6E4325;
    --secondary-200: #653D21;
    --secondary-300: #5B371E;
    --secondary--100: #8A5731;
    --secondary--200: #99613A;
    --secondary--300: #A76E45;

    /* Marka tonlari */
    --vl-espresso: #1C1712;
    --vl-espresso-2: #2A211A;
    --vl-cognac: #7B4B2A;
    --vl-gold: #C8A15A;
    --vl-tan: #9A8574;
    --vl-cream: #F5EFE6;
    --vl-cream-2: #EFE6D8;
    --vl-line: #E2D6C4;
}

/* --- Tipografi: başlıklar serif (Playfair) --- */
h1, h2, h3, .font-serif,
.heading h1, .heading h2, .heading h3 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    letter-spacing: .2px;
    color: var(--vl-espresso);
}
body { color: #24201C; }

/* --- Marka yardimci sinifları --- */
.text-gold { color: var(--vl-gold) !important; }
.bg-espresso { background-color: var(--vl-espresso) !important; }
.bg-cream { background-color: var(--vl-cream) !important; }
.bg-cream-2 { background-color: var(--vl-cream-2) !important; }
.text-cream { color: var(--vl-cream) !important; }

/* Altin buton metni koyu olsun (okunurluk) */
.btn-primary {
    --bs-btn-color: var(--vl-espresso);
    --bs-btn-hover-color: var(--vl-espresso);
    --bs-btn-active-color: var(--vl-espresso);
    font-weight: 600;
    letter-spacing: .3px;
}

/* Duyuru çubuğu (açık) */
.vl-announce {
    background: var(--vl-cream-2);
    color: var(--vl-cognac);
    font-size: .76rem;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: .5rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--vl-line);
}

/* Header ince ayar */
#header .header-nav-main nav > ul > li > a { font-weight: 500; letter-spacing: .3px; }
#header .header-logo img { transition: none; }

/* Ürün kartı fiyat rengi */
.product .price .sale-price, .product-price .amount { color: var(--vl-espresso); font-weight: 700; }

/* ============================ Header / Footer ============================ */
body { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Üst bar (açık) */
.vl-topbar { font-size: .8rem; padding: .4rem 0; background: var(--vl-cream); border-bottom: 1px solid var(--vl-line); }
.vl-topbar a, .vl-topbar .vl-linkbtn { color: var(--vl-tan); opacity: 1; text-decoration: none; background: none; border: 0; padding: 0; font-size: .8rem; cursor: pointer; }
.vl-topbar a:hover, .vl-topbar .vl-linkbtn:hover { color: var(--vl-cognac); }
.vl-lang a { font-weight: 600; letter-spacing: .5px; color: var(--vl-espresso); }
.vl-lang a.active { color: var(--vl-cognac); }
.vl-lang .sep { color: var(--vl-line); margin: 0 .3rem; }

/* Header */
.vl-header { position: sticky; top: 0; z-index: 1020; background: var(--vl-cream); border-bottom: 1px solid var(--vl-line); }
.vl-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.vl-logo img { width: 44px; height: 44px; border-radius: 10px; }
.vl-logo-text { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.4rem; letter-spacing: 2px; color: var(--vl-espresso); line-height: 1; display: inline-flex; flex-direction: column; }
.vl-logo-text small { font-family: "Poppins", sans-serif; font-size: .52rem; letter-spacing: 3px; color: var(--vl-tan); font-weight: 500; margin-top: 3px; }
.vl-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: none; color: var(--vl-espresso); font-size: 1.1rem; text-decoration: none; position: relative; cursor: pointer; }
.vl-iconbtn:hover { color: var(--vl-cognac); }
.vl-cart-count { position: absolute; top: 2px; right: 2px; background: var(--vl-gold); color: var(--vl-espresso); font-size: .62rem; font-weight: 700; min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 999px; padding-inline: 3px; }
.vl-search { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.vl-search.open { max-height: 80px; padding-bottom: 1rem; }
.vl-search .form-control { border-radius: 999px 0 0 999px; border-color: var(--vl-line); }
.vl-search .btn { border-radius: 0 999px 999px 0; }

/* Kategori nav */
.vl-nav { border-top: 1px solid var(--vl-line); }
.vl-nav ul { padding: .7rem 0; }
.vl-nav a { color: var(--vl-espresso); font-size: .82rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color .2s, color .2s; }
.vl-nav a:hover { color: var(--vl-cognac); border-bottom-color: var(--vl-gold); }

/* Mobil menü */
.vl-offcanvas { background: var(--vl-cream); }
.vl-mobile-nav a { display: block; padding: .7rem 0; color: var(--vl-espresso); font-size: 1rem; text-decoration: none; border-bottom: 1px solid var(--vl-line); }
.vl-mobile-nav a:hover { color: var(--vl-cognac); }

/* Footer */
.vl-footer { background: var(--vl-espresso); color: #CBBEA9; padding: 3.5rem 0 1.5rem; margin-top: 4rem; }
.vl-footer-logo { width: 50px; border-radius: 11px; margin-bottom: .8rem; }
.vl-footer-tag { font-size: .9rem; max-width: 30ch; color: #CBBEA9; }
.vl-footer h4 { color: var(--vl-cream); font-family: "Poppins", sans-serif; font-size: .95rem; letter-spacing: .5px; margin-bottom: 1rem; }
.vl-footer a { color: #CBBEA9; font-size: .9rem; text-decoration: none; display: block; padding: .25rem 0; }
.vl-footer a:hover { color: var(--vl-gold); }
.vl-footer-bottom { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--vl-tan); }
.vl-pay { display: flex; gap: .5rem; }
.vl-pay span { font-size: .68rem; letter-spacing: .5px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: .3rem .55rem; border-radius: 6px; color: #CBBEA9; }

/* Bölüm başlıkları */
.vl-section { padding: 4rem 0; }
.vl-section-head { text-align: center; margin-bottom: 2.5rem; }
.vl-section-head .eyebrow { font-size: .74rem; letter-spacing: 3px; text-transform: uppercase; color: var(--vl-cognac); font-weight: 600; }
.vl-section-head h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); margin-top: .4rem; }
.vl-section-head p { color: var(--vl-tan); max-width: 52ch; margin: .3rem auto 0; }

/* Hero (açık / ferah) */
.vl-hero { position: relative; color: var(--vl-espresso); background: radial-gradient(120% 120% at 82% 0%, rgba(200,161,90,.12), transparent 55%), linear-gradient(160deg, #FCFAF6 0%, #F5EFE6 62%, #EFE6D8 140%); overflow: hidden; }
.vl-hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; padding: 5.5rem 0; }
.vl-hero h1 { color: var(--vl-espresso); font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.22; margin-bottom: 1.4rem; }
.vl-hero h1 .accent { color: var(--vl-cognac); font-style: italic; }
.vl-hero .eyebrow { display: inline-block; font-size: .76rem; letter-spacing: 4px; text-transform: uppercase; color: var(--vl-cognac); margin-bottom: 1.1rem; }
.vl-hero .lead { font-size: 1.1rem; color: var(--vl-muted, #6E645A); max-width: 34ch; margin-bottom: 2rem; }
.vl-hero-badge { justify-self: center; width: min(320px,80%); aspect-ratio: 1; border-radius: 26px; background: #fff; border: 1px solid var(--vl-line); box-shadow: 0 20px 50px -24px rgba(28,23,18,.35); display: grid; place-items: center; }
.vl-hero-badge img { width: 58%; }
@media (max-width: 991px) { .vl-hero-inner { grid-template-columns: 1fr; text-align: center; padding: 3.5rem 0; } .vl-hero .lead { margin-inline: auto; } .vl-hero-badge { grid-row: 1; margin-bottom: 1.5rem; } }

/* Trust (açık) */
.vl-trust { background: #fff; color: var(--vl-espresso); padding: 1.8rem 0; border-top: 1px solid var(--vl-line); border-bottom: 1px solid var(--vl-line); }
.vl-trust .item { display: flex; align-items: center; gap: .8rem; justify-content: center; }
.vl-trust i { color: var(--vl-gold); font-size: 1.5rem; }
.vl-trust strong { display: block; font-size: .92rem; color: var(--vl-espresso); }
.vl-trust span { font-size: .78rem; color: var(--vl-tan); }

/* Ürün kartı (marka) */
.vl-product { display: block; background: #fff; border: 1px solid var(--vl-line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; height: 100%; transition: transform .18s, box-shadow .2s; }
.vl-product:hover { transform: translateY(-4px); box-shadow: 0 12px 30px -14px rgba(28,23,18,.3); }
.vl-product-media { position: relative; aspect-ratio: 4/5; background: #ffffff; display: grid; place-items: center; overflow: hidden; }
.vl-product-media img { width: 100%; height: 100%; object-fit: contain; padding: 9%; }
.vl-product-media img.ph { width: 45%; height: auto; object-fit: contain; opacity: .45; padding: 0; }
.vl-product-badge { position: absolute; top: .7rem; left: .7rem; background: var(--vl-cognac); color: var(--vl-cream); font-size: .68rem; font-weight: 600; letter-spacing: .5px; padding: .28rem .6rem; border-radius: 999px; }
.vl-product-body { padding: 1rem 1.1rem 1.2rem; }
.vl-product-body h3 { font-size: 1.02rem; margin: 0 0 .2rem; }
.vl-product-body .sub { font-size: .8rem; color: var(--vl-tan); }
.vl-product-price { margin-top: .5rem; display: flex; align-items: baseline; gap: .5rem; }
.vl-product-price .now { font-weight: 700; color: var(--vl-espresso); }
.vl-product-price .old { color: var(--vl-tan); text-decoration: line-through; font-size: .85rem; }

/* Koleksiyon kartı */
.vl-coll { position: relative; display: flex; align-items: flex-end; aspect-ratio: 3/2; border-radius: 12px; overflow: hidden; padding: 1.4rem; background: linear-gradient(160deg, var(--vl-espresso), var(--vl-cognac)); color: var(--vl-cream); text-decoration: none; }
.vl-coll small { display: block; font-size: .74rem; letter-spacing: 1px; text-transform: uppercase; color: var(--vl-gold); }
.vl-coll .t { font-family: "Playfair Display", serif; font-size: 1.5rem; transition: color .2s; }
.vl-coll:hover .t { color: var(--vl-gold); }

/* ============================ Ic sayfalar ============================ */
.vl-page-head { background: var(--vl-cream-2); padding: 2.2rem 0; border-bottom: 1px solid var(--vl-line); text-align: center; }
.vl-page-head h1 { margin: 0; }
.vl-page-head p { color: var(--vl-tan); max-width: 56ch; margin: .5rem auto 0; }
.vl-crumb { font-size: .82rem; color: var(--vl-tan); }
.vl-crumb a { color: var(--vl-tan); text-decoration: none; }
.vl-crumb a:hover { color: var(--vl-cognac); }

/* Kart / özet */
.vl-card { background: #fff; border: 1px solid var(--vl-line); border-radius: 12px; padding: 1.6rem; }
.vl-summary { background: #fff; border: 1px solid var(--vl-line); border-radius: 12px; padding: 1.5rem; position: sticky; top: 160px; }
.vl-srow { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .95rem; }
.vl-srow.total { border-top: 1px solid var(--vl-line); margin-top: .5rem; padding-top: 1rem; font-size: 1.15rem; font-weight: 700; color: var(--vl-espresso); }

/* Adet */
.vl-qty { display: inline-flex; align-items: center; border: 1px solid var(--vl-line); border-radius: 999px; overflow: hidden; background: #fff; }
.vl-qty button { background: var(--vl-cream); border: 0; width: 38px; height: 42px; font-size: 1.1rem; cursor: pointer; color: var(--vl-espresso); }
.vl-qty input { width: 44px; text-align: center; border: 0; height: 42px; font-size: 1rem; }

/* Ürün detay */
.vl-pd-media { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #ffffff; display: grid; place-items: center; border: 1px solid var(--vl-line); }
.vl-pd-media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.vl-pd-media img.ph { width: 42%; height: auto; object-fit: contain; opacity: .45; padding: 0; }
.vl-pd-price { font-size: 1.8rem; font-weight: 700; color: var(--vl-espresso); }
.vl-pd-price .old { font-size: 1.1rem; color: var(--vl-tan); text-decoration: line-through; margin-left: .5rem; font-weight: 400; }
.vl-pd-meta { border-top: 1px solid var(--vl-line); margin-top: 1.4rem; padding-top: 1.2rem; font-size: .9rem; color: var(--vl-tan); }

/* Sepet öğesi */
.vl-cart-item { display: grid; grid-template-columns: 88px 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--vl-line); }
.vl-cart-thumb { width: 88px; aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; background: var(--vl-cream-2); display: grid; place-items: center; }
.vl-cart-thumb { background: #ffffff; }
.vl-cart-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.vl-cart-thumb img.ph { width: 55%; height: auto; object-fit: contain; opacity: .45; padding: 0; }
.vl-remove { background: none; border: 0; color: var(--vl-tan); font-size: .8rem; text-decoration: underline; cursor: pointer; }
.vl-remove:hover { color: #B23B3B; }

/* Boş durum */
.vl-empty { text-align: center; padding: 4rem 1rem; }
.vl-empty i { font-size: 3rem; color: var(--vl-tan); margin-bottom: 1rem; }

/* Legal / içerik sayfası */
.vl-content { max-width: 760px; margin: 0 auto; color: #4A423A; }
.vl-content h2 { font-size: 1.4rem; margin: 1.6rem 0 .6rem; }
.vl-content p, .vl-content li { line-height: 1.7; }
.vl-content ul, .vl-content ol { padding-left: 1.2rem; }

/* Sonuç sayfaları */
.vl-result { text-align: center; padding: 4rem 1rem; }
.vl-result .ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.2rem; font-size: 2rem; }
.vl-result .ico.ok { background: #E6F0E8; color: #3B7A4B; }
.vl-result .ico.err { background: #F6E4E4; color: #B23B3B; }

/* Auth kutusu */
.vl-auth { max-width: 440px; margin: 0 auto; }

/* Bölüm koyu link (outline-light düzeltme) */
.btn-outline-light { border-color: rgba(245,239,230,.6); color: var(--vl-cream); }
.btn-outline-light:hover { background: var(--vl-cream); color: var(--vl-espresso); border-color: var(--vl-cream); }

/* Ürün seçenekleri (varyant swatch) */
.vl-option-label { display:block; font-size:.78rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--vl-tan); margin-bottom:.5rem; }
.vl-swatches { display:flex; flex-wrap:wrap; gap:.5rem; }
.vl-swatch { position:relative; margin:0; }
.vl-swatch input { position:absolute; opacity:0; width:0; height:0; }
.vl-swatch span { display:inline-block; padding:.5rem 1.1rem; border:1px solid var(--vl-line); border-radius:999px; font-size:.9rem; cursor:pointer; transition:all .15s; background:#fff; color:var(--vl-espresso); }
.vl-swatch input:checked + span { border-color:var(--vl-espresso); background:var(--vl-espresso); color:var(--vl-cream); }
.vl-swatch span:hover { border-color:var(--vl-cognac); }
.vl-swatch input:focus-visible + span { outline:2px solid var(--vl-gold); }

/* ============================ Mobil iyileştirmeler ============================ */
@media (max-width: 991px) {
    .vl-section { padding: 2.8rem 0; }
    .vl-hero-inner { padding: 3rem 0 3.2rem; }
    .vl-footer { margin-top: 2.5rem; padding: 2.6rem 0 1.4rem; }
}
@media (max-width: 767px) {
    .vl-trust { padding: 1.2rem 0; }
    .vl-trust .item { justify-content: flex-start; }
    .vl-footer-bottom { flex-direction: column; align-items: flex-start; gap: .8rem; }
    .vl-hero-badge { max-width: 260px !important; }
}
@media (max-width: 575px) {
    .vl-topbar { font-size: .72rem; padding: .35rem 0; }
    .vl-logo { gap: .45rem; }
    .vl-logo img { width: 36px; height: 36px; }
    .vl-logo-text { font-size: 1.05rem; letter-spacing: 1.2px; }
    .vl-logo-text small { font-size: .44rem; letter-spacing: 1.8px; }
    .vl-iconbtn { width: 34px; height: 34px; font-size: 1rem; }
    .vl-header .py-3 { padding-top: .6rem !important; padding-bottom: .6rem !important; }
    .vl-hero h1 { font-size: 1.95rem; }
    .vl-hero .lead { font-size: 1rem; }
    .vl-section-head { margin-bottom: 1.8rem; }
    .vl-section-head h2 { font-size: 1.55rem; }
    /* Sepet öğesi: dar ekranda thumb küçült, fiyat/sil alta aksın */
    .vl-cart-item { grid-template-columns: 64px 1fr; }
    .vl-cart-thumb { width: 64px; }
    .vl-cart-item > .text-end { grid-column: 1 / -1; text-align: left !important; display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--vl-line); padding-top: .6rem; }
    .vl-cart-item > .text-end .mt-2 { margin-top: 0 !important; }
    /* Ürün detay fiyat */
    .vl-pd-price { font-size: 1.5rem; }
    .btn-lg { padding: .7rem 1.2rem; font-size: .95rem; }
}

/* Ürün galeri + zoom */
.vl-pd-media { position: relative; cursor: zoom-in; }
.vl-zoom-ico { position: absolute; bottom: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(28,23,18,.72); color: var(--vl-cream); display: grid; place-items: center; font-size: .9rem; opacity: 0; transition: opacity .2s; }
.vl-pd-media:hover .vl-zoom-ico { opacity: 1; }
.vl-thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.vl-thumb { width: 66px; height: 66px; border: 1px solid var(--vl-line); border-radius: 8px; overflow: hidden; background: #fff; padding: 4px; cursor: pointer; transition: border-color .15s; }
.vl-thumb:hover { border-color: var(--vl-tan); }
.vl-thumb.active { border-color: var(--vl-espresso); }
.vl-thumb img { width: 100%; height: 100%; object-fit: contain; }