/*
 | Vidanya Tema: KOZMETİK — luciacosmetic.com dizayn KLONU (tema hattı #31)
 |------------------------------------------------------------------------------
 | "Zarif Altın & Antrasit" — fildişi/şampanya zemin, sıcak altın aksan, mermer
 | beyazı kartlar, serif display başlıklar. luciacosmetic.com storefront'unun
 | görsel sistemi (marka adı/logosu OLMADAN) demo temaya uyarlandı. Düz CSS
 | (Tailwind değil); demo home blade'inin .vd-* kancalarını + paylaşılan Bagisto
 | header/footer/ürün-kartı sınıflarını hedefler. Banner/kart görselleri = mevcut
 | demo kategori görsellerimiz (metin HTML katmanında; görsele gömülü marka yok).
*/

:root {
    --vd-bg: #f6f1e7;          /* şampanya/fildişi zemin */
    --vd-paper: #ffffff;       /* kart yüzeyi */
    --vd-ink: #1c1c1e;         /* antrasit metin */
    --vd-ink-soft: #55524c;    /* ikincil metin */
    --vd-muted: #8a7d6a;
    --vd-gold: #b8934a;        /* altın aksan */
    --vd-gold-dark: #9a7838;
    --vd-gold-soft: #dcc9a4;
    --vd-line: #e7e1d6;        /* ince ayraç */
    --vd-serif: Georgia, "Times New Roman", "Nimbus Roman", serif;
}

/* ---- Zemin & tipografi ---- */
body { background-color: var(--vd-bg) !important; color: var(--vd-ink); -webkit-font-smoothing: antialiased; }
main#main { background: transparent !important; }
h1, h2, h3, h4 { font-family: var(--vd-serif) !important; letter-spacing: .005em; color: var(--vd-ink); font-weight: 600; }
/* İKON KORUMASI: serif kuralı ikon fontunu ezip □ yapmasın */
[class*="icon-"], [class*="icon-"]::before { font-family: "vidanya-shop" !important; }
a { transition: color .18s ease; }
a:hover { color: var(--vd-gold); }

/* ---- Butonlar (lucia: antrasit dolgu → altın hover, keskin köşe, uppercase) ---- */
.primary-button { background-color: var(--vd-ink) !important; color: var(--vd-bg) !important; border: 1px solid var(--vd-ink) !important; border-radius: 2px !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.primary-button:hover { background-color: var(--vd-gold) !important; border-color: var(--vd-gold) !important; color: #fff !important; opacity: 1 !important; }
.secondary-button { background-color: transparent !important; color: var(--vd-ink) !important; border: 1px solid var(--vd-ink) !important; border-radius: 2px !important; text-transform: uppercase; letter-spacing: .08em; transition: background-color .2s ease, color .2s ease; }
.secondary-button:hover { background-color: var(--vd-ink) !important; color: var(--vd-bg) !important; }

/* ---- Header — fildişi zemin, ince altın alt çizgi, altın hover ---- */
#app header, header.sticky, header.shadow-gray { background-color: var(--vd-bg) !important; border-bottom: 1px solid var(--vd-line); box-shadow: none !important; }
#app header a:hover { color: var(--vd-gold); }

/* ---- ÜRÜN KARTI (paylaşılan .vd-card) — lucia: temiz beyaz kart, ince çizgi ---- */
.vd-card { background: var(--vd-paper) !important; border: 1px solid var(--vd-line) !important; border-radius: 10px !important; overflow: hidden; box-shadow: none; transition: transform .25s ease, box-shadow .25s ease; }
.vd-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(28,28,30,.10) !important; }
.vd-card__media { border-radius: 0 !important; background: #f7f3ec; }
.vd-card__media img { border-radius: 0 !important; }
.vd-card__body { background: transparent !important; padding: .9rem 1rem 1.1rem !important; margin-top: 0 !important; transform: none !important; border-top: 1px solid var(--vd-line); }
.vd-card__name { font-family: var(--vd-sans, inherit) !important; font-weight: 500 !important; font-size: .95rem !important; color: var(--vd-ink) !important; }
.vd-card__price { color: var(--vd-gold-dark) !important; font-weight: 600 !important; }
.vd-card .bg-navyBlue { background: var(--vd-gold) !important; border-radius: 2px !important; letter-spacing: .08em; }
.vd-card .bg-red-600 { border-radius: 2px !important; }

/* Carousel okları — altın çerçeveli daire */
.vd-section .icon-arrow-left-stylish, .vd-section .icon-arrow-right-stylish { border-color: var(--vd-line) !important; background: #fff !important; color: var(--vd-ink) !important; }
.vd-section .icon-arrow-left-stylish:hover, .vd-section .icon-arrow-right-stylish:hover { border-color: var(--vd-gold) !important; color: var(--vd-gold) !important; }

/* === HERO — geniş yuvarlak şampanya banner (lucia üst banner dili) === */
.vd-hero { max-width: 1360px; margin: 14px auto 0; padding: 0 clamp(1rem, 4vw, 3rem); }
.vd-hero__inner { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--vd-line); aspect-ratio: 40/15; display: flex; align-items: center; background: #efe7d8; }
.vd-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-hero__inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,241,231,.94) 0%, rgba(246,241,231,.72) 42%, rgba(246,241,231,0) 72%); }
.vd-hero__text { position: relative; z-index: 2; max-width: 540px; padding: clamp(1.5rem, 5vw, 4rem); }
.vd-hero__eyebrow { display: block; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--vd-gold-dark); margin-bottom: 1.1rem; }
.vd-hero__title { font-family: var(--vd-serif) !important; font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 600; line-height: 1.06; margin: 0 0 1.1rem; color: var(--vd-ink) !important; }
.vd-hero__sub { font-size: 1rem; line-height: 1.75; color: var(--vd-ink-soft); margin: 0 0 1.8rem; max-width: 44ch; }
.vd-hero__cta { display: inline-block; padding: .95rem 2.6rem; background: var(--vd-ink); color: var(--vd-bg); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; font-weight: 500; border-radius: 2px; transition: background-color .2s ease; }
.vd-hero__cta:hover { background: var(--vd-gold); color: #fff; }

/* === Bölüm başlıkları — SOLA hizalı serif + sağda "Tümünü gör" (lucia) === */
.vd-section { max-width: 1360px; margin: 0 auto; padding: 2.8rem clamp(1rem, 4vw, 3rem) .6rem; }
.vd-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.vd-section__title { font-family: var(--vd-serif) !important; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; margin: 0; color: var(--vd-ink); }
.vd-section__link { flex: 0 0 auto; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--vd-gold-dark); white-space: nowrap; }
.vd-section__link:hover { color: var(--vd-gold); }

/* === Kayan yazı şeridi (lucia: serif uppercase altın + ✦, iki set → -50%) === */
.vd-marquee { overflow: hidden; margin: 1.5rem 0; padding: .85rem 0; border-block: 1px solid var(--vd-line); background: linear-gradient(90deg, #fffdf9, #f4ecdd 50%, #fffdf9); }
.vd-marquee__track { display: flex; width: max-content; animation: vd-marquee 40s linear infinite; }
.vd-marquee:hover .vd-marquee__track { animation-play-state: paused; }
.vd-marquee__set { display: flex; align-items: center; flex: 0 0 auto; }
.vd-marquee__set > span { white-space: nowrap; font-family: var(--vd-serif); font-size: .9rem; letter-spacing: .22em; text-transform: uppercase; color: var(--vd-gold-dark); padding: 0 1.6rem; }
.vd-marquee__set > i { font-style: normal; color: var(--vd-line); font-size: .8rem; }
@keyframes vd-marquee { to { transform: translateX(-50%); } }

/* === Banner ikilisi — GÖRSEL banner (lucia .vd-columns dili): 16/9, yuvarlak === */
.vd-banners { max-width: 1360px; margin: 1.5rem auto; padding: 0 clamp(1rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.vd-banner { position: relative; overflow: hidden; display: block; aspect-ratio: 16/9; border-radius: 16px; border: 1px solid var(--vd-line); transition: transform .35s ease, box-shadow .35s ease; }
.vd-banner:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(28,28,30,.12); }
.vd-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vd-banner:hover img { transform: scale(1.04); }
.vd-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,24,20,.55) 0%, rgba(28,24,20,.15) 55%, transparent 100%); }
.vd-banner__text { position: absolute; z-index: 2; left: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; padding: 0 2.2rem; color: #fff; }
.vd-banner__eyebrow { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; opacity: .9; margin-bottom: .5rem; }
.vd-banner__title { font-family: var(--vd-serif) !important; font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 600; line-height: 1.1; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.vd-banner__cta { margin-top: .9rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .95; }

/* === Popüler Koleksiyonlar — 5 GÖRSEL kart (lucia .lc-pbrands / .lc-bcard) === */
.vd-pbrands { max-width: 1360px; margin: 2.6rem auto 1rem; padding: 0 clamp(1rem, 4vw, 3rem); }
.vd-pbrands__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.3rem; }
.vd-pbrands__head h2 { font-family: var(--vd-serif) !important; font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 600; margin: 0 0 .3rem; }
.vd-pbrands__head p { font-size: .88rem; color: var(--vd-ink-soft); margin: 0; }
.vd-pbrands__all { flex: 0 0 auto; border: 1px solid var(--vd-ink); border-radius: 999px; padding: .5rem 1.2rem; font-size: .76rem; letter-spacing: .04em; color: var(--vd-ink); transition: background-color .2s ease, color .2s ease; }
.vd-pbrands__all:hover { background: var(--vd-ink); color: #fff; }
.vd-pbrands__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.vd-bcard { position: relative; display: block; overflow: hidden; border: 1px solid var(--vd-line); border-radius: 10px; background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.vd-bcard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(28,28,30,.1); }
.vd-bcard__media { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; }
.vd-bcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.vd-bcard:hover .vd-bcard__media img { transform: scale(1.05); }
.vd-bcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(28,24,20,.62) 100%); }
.vd-bcard__text { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem .6rem 1.1rem; color: #fff; }
.vd-bcard__kicker { font-size: .56rem; letter-spacing: .28em; text-transform: uppercase; opacity: .88; margin-bottom: .35rem; }
.vd-bcard__brand { font-family: var(--vd-serif); font-size: 1.02rem; letter-spacing: .06em; line-height: 1.1; text-shadow: 0 2px 12px rgba(0,0,0,.4); }

/* === MARKA/İÇERİK RAFI — lucia: ≥1280 sol dikey sabit sütun; altında yatay şerit === */
.vd-brands { margin: 1.5rem auto 2rem; max-width: 1360px; padding: 0 clamp(1rem, 4vw, 3rem); }
.vd-brands__title { font-family: var(--vd-serif) !important; font-size: 1.05rem; letter-spacing: .02em; color: var(--vd-ink); margin: 0 0 .7rem; }
.vd-brands__list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.vd-brands__list a { display: inline-block; padding: .45rem .9rem; border-radius: 8px; border: 1px solid var(--vd-line); background: var(--vd-paper); font-size: .8rem; line-height: 1.35; color: var(--vd-ink-soft); }
.vd-brands__list a:hover { background: var(--vd-bg); color: var(--vd-gold-dark); border-color: var(--vd-gold-soft); }

@media (min-width: 1280px) {
    main:has(.vd-brands) { position: relative; padding-left: 252px; }
    .vd-brands { position: absolute; left: 0; top: 0; bottom: 0; width: 220px; max-width: none; margin: 0; padding: 18px 14px 28px; border-right: 1px solid var(--vd-line); background: var(--vd-paper); }
    .vd-brands__title { position: sticky; top: 24px; background: var(--vd-paper); padding-bottom: 6px; z-index: 1; }
    .vd-brands__list { position: sticky; top: 62px; display: block; max-height: calc(100vh - 120px); overflow-y: auto; }
    .vd-brands__list li { display: block; }
    .vd-brands__list a { display: block; border: 0; background: transparent; padding: .35rem .5rem; border-radius: 8px; font-size: .8rem; }
    .vd-brands__list a:hover { background: var(--vd-bg); border-color: transparent; }
    .vd-brands__list::-webkit-scrollbar { width: 6px; }
    .vd-brands__list::-webkit-scrollbar-thumb { background: var(--vd-line); border-radius: 3px; }
}

/* === Footer — lucia: koyu antrasit, fildişi metin, altın "Abone Ol" === */
#app footer { background: #241f1a !important; border-top: 2px solid var(--vd-gold); color: #efe7d8 !important; }
#app footer * { color: #efe7d8 !important; }
#app footer a:hover { color: var(--vd-gold-soft) !important; }
#app footer h1, #app footer h2, #app footer h3, #app footer h4, #app footer .text-3xl, #app footer .italic { color: #fff !important; font-family: var(--vd-serif) !important; }
#app footer [class*="border"] { border-color: rgba(220,201,164,.22) !important; }
#app footer button { background: var(--vd-gold) !important; color: #fff !important; border-radius: 6px !important; }
#app footer button:hover { background: var(--vd-gold-dark) !important; }

/* === Ürün detay sektörel bandı (PDP) === */
.vd-product-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1200px; margin: 1.4rem auto 0; padding: 0 clamp(1rem, 4vw, 2rem); }
.vd-band-item { background: var(--vd-paper); border: 1px solid var(--vd-line); border-radius: 12px; padding: 1rem 1.4rem; display: flex; gap: .8rem; align-items: center; }
.vd-band-item::before { content: "✦"; color: var(--vd-gold); font-size: .85rem; }
.vd-band-copy strong { display: block; font-size: .84rem; font-weight: 600; color: var(--vd-ink); }
.vd-band-copy em { font-style: normal; font-size: .74rem; color: var(--vd-muted); }

/* === ÜRÜN DETAY (vd-pdp) — lucia dili: serif başlık, altın fiyat === */
.vd-pdp__gallery img { border-radius: 12px !important; border: 1px solid var(--vd-line); background: #fff; }
.vd-pdp__title { font-family: var(--vd-serif) !important; font-weight: 600 !important; font-size: clamp(1.9rem, 3vw, 2.7rem) !important; }
.vd-pdp__price { color: var(--vd-gold-dark) !important; letter-spacing: .04em; font-weight: 600; }
.vd-pdp__short { line-height: 1.85; color: var(--vd-ink-soft) !important; }
.vd-pdp__actions .rounded-xl { border-radius: 2px !important; border-color: var(--vd-ink) !important; }
.vd-pdp__share { border-top: 1px solid var(--vd-line); padding-top: 1.3rem; }
.vd-pdp__info .bg-white { border-color: var(--vd-gold) !important; color: var(--vd-gold-dark); }
.vd-pdp__accordions .bg-gray-100 { background: #f5efe4 !important; border-radius: 10px; }
.vd-pdp-assoc h2 { font-family: var(--vd-serif) !important; font-weight: 600; }

@media (max-width: 1024px) { .vd-pbrands__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .vd-product-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
    .vd-hero__inner { aspect-ratio: 4/5; }
    .vd-hero__inner::after { background: linear-gradient(180deg, rgba(246,241,231,.35) 0%, rgba(246,241,231,.92) 60%); }
    .vd-hero__text { max-width: none; }
    .vd-banners { grid-template-columns: 1fr; }
    .vd-pbrands__grid { grid-template-columns: repeat(2, 1fr); }
    .vd-pbrands__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) { .vd-product-band { grid-template-columns: 1fr; } }