/* ==========================================================================
   Masstaş — Vitrin teması
   masstas.css'ten SONRA yüklenir. Yeni bileşenler v- önekli. Temada şablonu
   olmayan sayfalardaki klasik bileşenler (sayfa başlığı, form, kart) en altta
   yalnızca tipografi ve renk olarak temaya uydurulur.
   ========================================================================== */

.vitrin {
    --v-siyah: #111;
    --v-metin: #1c1c1c;
    --v-soluk: #6e6e6e;
    --v-cizgi: #d9d9d9;
    --v-zemin: #f3f2ef;
    --v-ust: 88px;
    --v-kenar: clamp(16px, 2.4vw, 40px);
    --v-menu: 392px;
    --v-font: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --v-gecis: cubic-bezier(.2, .7, .2, 1);

    /* Klasik bileşenler de aynı yazı tipi ve nötr vurguyla görünsün */
    --font: var(--v-font);
    --siyah: var(--v-siyah);
    --accent: var(--v-siyah);
    --link: var(--v-siyah);
    --link-hover: #555;

    font-family: var(--v-font);
    color: var(--v-metin);
    background: #fff;
    padding-top: var(--v-ust);
}
.vitrin.v-seffaf { padding-top: 0; }
@media (max-width: 900px) { .vitrin { --v-ust: 64px; } }

.vitrin :focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.v-gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v-cizgili {
    display: inline-block; padding-bottom: 3px; border-bottom: 1px solid currentColor;
    font-size: 13px; text-transform: uppercase; letter-spacing: .06em; transition: opacity .2s ease;
}
.v-cizgili:hover { opacity: .6; }
.v-kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--v-soluk); }
.v-kirinti a { transition: color .2s ease; }
.v-kirinti a:hover { color: var(--v-siyah); }
.v-bos { padding: 60px var(--v-kenar); color: var(--v-soluk); }

/* ============================ ÜST ŞERİT ============================ */
.v-ust {
    position: fixed; top: 0; left: 0; right: 0; z-index: 85;
    height: var(--v-ust); background: #fff; color: var(--v-siyah);
    transition: background-color .3s ease, color .3s ease;
}
/* Anasayfa: slider üzerinde şeffaf, okunabilirlik için hafif üst gölge */
.v-seffaf .v-ust:not(.v-dolu) { background: transparent; color: #fff; }
.v-seffaf .v-ust:not(.v-dolu)::before {
    content: ""; position: absolute; inset: 0 0 -70px; pointer-events: none;
    background: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,0));
}
.v-ust-ic { position: relative; height: 100%; display: flex; align-items: center; gap: 24px; padding: 0 var(--v-kenar); }
.v-ust-sol, .v-ust-sag { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.v-ust-sol { height: 100%; }
.v-tetik { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); height: 100%; min-width: 0; }

.v-hamburger {
    flex: none; width: 30px; height: 18px; padding: 0; border: 0; background: none; color: inherit;
    display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;
}
.v-hamburger span { display: block; height: 1.5px; background: currentColor; transition: transform .3s var(--v-gecis), opacity .2s ease; }
.v-menu-acik .v-hamburger span:nth-child(1) { transform: translateY(8.25px) rotate(45deg); }
.v-menu-acik .v-hamburger span:nth-child(2) { opacity: 0; }
.v-menu-acik .v-hamburger span:nth-child(3) { transform: translateY(-8.25px) rotate(-45deg); }

.v-logo { display: block; min-width: 0; }
/* Yüklenen logo beyaz; beyaz şeritte siyaha çevrilir */
.v-logo img {
    display: block; height: clamp(34px, 3.3vw, 50px); width: auto; max-width: min(260px, 42vw);
    object-fit: contain; object-position: left center; filter: brightness(0); transition: filter .3s ease;
}
.v-seffaf .v-ust:not(.v-dolu) .v-logo img { filter: none; }

.v-ara {
    flex: none; display: flex; align-items: center; width: clamp(150px, 13vw, 200px);
    padding: 4px 0 5px; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit;
    font: 300 clamp(17px, 1.35vw, 22px)/1.2 var(--v-font); text-transform: uppercase; letter-spacing: .02em;
    text-align: left; cursor: text;
}
.v-ara-ikon { display: none; }

.v-ust-sag { justify-content: flex-end; gap: clamp(18px, 2vw, 32px); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.v-ust-sag > a { transition: opacity .2s ease; }
.v-ust-sag > a:hover { opacity: .55; }
.v-dil { position: relative; }
.v-dil-btn { padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.v-dil-liste {
    position: absolute; top: calc(100% + 6px); right: -14px; min-width: 170px; padding: 6px 0;
    background: #fff; color: var(--v-siyah); border: 1px solid var(--v-cizgi);
    font-size: 14px; text-transform: none; letter-spacing: 0;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
#dilSecici.acik .v-dil-liste { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.v-dil-liste a { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.v-dil-liste a:hover, .v-dil-liste a.aktif { background: var(--v-zemin); }
.v-dil-liste svg { flex: none; width: 20px; height: auto; }

@media (max-width: 900px) {
    .v-ust-ic { gap: 12px; }
    .v-ust-sol { flex: 1 1 auto; }
    .v-ust-sag { display: none; }
    .v-ara { width: auto; margin-right: -8px; padding: 8px; border: 0; }
    .v-ara-yazi { display: none; }
    .v-ara-ikon { display: block; }
}

/* ============================ SOL MENÜ ============================ */
.v-menu {
    position: fixed; z-index: 84; top: var(--v-ust); left: 0; bottom: 0;
    width: min(var(--v-menu), 100vw); background: #fff; color: var(--v-siyah);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .4s var(--v-gecis), visibility 0s linear .4s, box-shadow .4s ease;
}
.v-menu-acik .v-menu {
    transform: none; visibility: visible; box-shadow: 14px 0 34px -22px rgba(0,0,0,.28);
    transition: transform .4s var(--v-gecis), box-shadow .4s ease;
}
.v-menu-ic { display: flex; flex-direction: column; min-height: 100%; padding: clamp(24px, 4vh, 46px) 28px 34px var(--v-kenar); }
.v-menu-grup { list-style: none; margin: 0 0 clamp(18px, 3vh, 32px); padding: 0; }
.v-menu-grup > li > a,
.v-kat-ac {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
    padding: 3px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
    font: 400 clamp(16px, 1.25vw, 20px)/1.45 var(--v-font); text-transform: uppercase; letter-spacing: .02em;
    transition: opacity .2s ease;
}
.v-menu-grup > li > a:hover, .v-kat-ac:hover { opacity: .6; }
.v-menu-grup a.aktif { font-weight: 500; }
.v-kat-ac svg { flex: none; opacity: .75; transition: transform .25s ease; }
.v-kat-ac[aria-expanded="true"] svg { transform: rotate(90deg); }
/* Alt kategoriler — yükseklik animasyonu için grid 0fr → 1fr */
.v-alt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--v-gecis); }
.v-alt.acik { grid-template-rows: 1fr; }
.v-alt-ic { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-left: 14px; visibility: hidden; transition: visibility 0s linear .32s; }
.v-alt.acik .v-alt-ic { visibility: visible; transition: none; }
.v-alt-ic::before, .v-alt-ic::after { content: ""; flex: none; height: 6px; }
.v-alt-ic a { padding: 3px 0; font-size: 15px; letter-spacing: .01em; color: var(--v-soluk); transition: color .2s ease; }
.v-alt-ic a:hover, .v-alt-ic a.aktif { color: var(--v-siyah); }
.v-menu-alt { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--v-cizgi); display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--v-soluk); }
.v-menu-alt a:hover { color: var(--v-siyah); }
.v-menu-dil { display: flex; gap: 16px; margin-bottom: 8px; letter-spacing: .06em; }
.v-menu-dil a.aktif { color: var(--v-siyah); font-weight: 500; }

/* ============================ ANASAYFA ============================ */
.vitrin .v-hero { height: 100vh; height: 100svh; min-height: 520px; background: var(--v-zemin); }
.v-hero-metin { position: absolute; z-index: 5; left: var(--v-kenar); right: var(--v-kenar); top: 50%; transform: translateY(-50%); max-width: 560px; pointer-events: none; }
.v-hero-metin.hiza-orta { margin: 0 auto; text-align: center; }
.v-hero-metin.hiza-sag { margin-left: auto; text-align: right; }
.v-hero-metin > * { pointer-events: auto; }
.v-hero-ust { display: block; margin-bottom: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
.v-hero-metin h1 { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 52px); font-weight: 300; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; }
.v-hero-metin p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; opacity: .9; }
/* Tek satır: sığmazsa yatay kaydırılır (safe center → taşınca soldan başlar) */
.v-hero-linkler {
    position: absolute; z-index: 6; left: 0; right: 0; bottom: clamp(38px, 8vh, 76px);
    display: flex; flex-wrap: nowrap; justify-content: safe center; gap: clamp(18px, 2.4vw, 38px);
    padding: 0 var(--v-kenar); overflow-x: auto; scrollbar-width: none;
}
.v-hero-linkler::-webkit-scrollbar { display: none; }
.v-hero-linkler a { flex: none; white-space: nowrap; color: #fff; font-size: clamp(13px, 1.1vw, 19px); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 1px 14px rgba(0,0,0,.4); transition: opacity .2s ease; }
.v-hero-linkler a:first-child { font-weight: 500; }
.v-hero-linkler a:hover { opacity: .7; }
.vitrin .v-hero .hero-noktalar { left: auto; right: var(--v-kenar); bottom: 24px; }
.vitrin .v-hero .hero-nokta { width: 22px; height: 2px; }
@media (max-width: 700px) {
    .v-hero-linkler { gap: 6px 18px; }
    .v-hero-linkler a:nth-child(n+5) { display: none; }
    .vitrin .v-hero .hero-noktalar { right: 50%; transform: translateX(50%); bottom: 14px; }
}

/* Büyük görsel kartları (kategoriler, projeler) */
.v-vitrin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.v-vitrin-kart { position: relative; display: block; height: min(92vh, 60vw); overflow: hidden; background: var(--v-zemin); color: #fff; }
.v-vitrin-kart img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--v-gecis); }
.v-vitrin-kart:hover img { transform: scale(1.035); }
/* Beyaz zeminli ürün fotoğraflarında da ad okunsun: hafif alt gölge + yazı gölgesi */
.v-vitrin-kart::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; pointer-events: none; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3)); }
.v-vitrin-ad {
    position: absolute; z-index: 2; left: var(--v-kenar); right: var(--v-kenar); bottom: clamp(24px, 4vh, 44px);
    text-align: center; font-size: clamp(16px, 1.45vw, 23px); line-height: 1.25; text-transform: uppercase; letter-spacing: .03em;
    text-shadow: 0 1px 16px rgba(0,0,0,.45);
}
.v-vitrin-ad small { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .08em; opacity: .85; }
/* Tek kalan son kart tam genişlik */
.v-vitrin-kart:last-child:nth-child(odd) { grid-column: 1 / -1; height: min(86vh, 48vw); }
.v-vitrin-kart.yedek { background: #1d1d1d; }
.v-vitrin-kart.yedek img { object-fit: contain; padding: 22%; }
/* Projeler: ilk kart tam genişlik, kalanlar ikişer */
.v-projeler .v-vitrin-kart:last-child:nth-child(odd) { grid-column: auto; height: min(92vh, 60vw); }
.v-projeler .v-vitrin-kart:last-child:nth-child(even) { grid-column: 1 / -1; height: min(86vh, 48vw); }
.v-projeler .v-vitrin-kart:nth-child(1):first-child { grid-column: 1 / -1; height: min(88vh, 50vw); }
@media (max-width: 700px) {
    .v-vitrin { grid-template-columns: minmax(0, 1fr); }
    .v-vitrin .v-vitrin-kart { grid-column: auto !important; height: min(118vw, 86vh) !important; }
}

.v-bolum { padding-top: clamp(56px, 7vw, 110px); }
.v-bolum-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 0 var(--v-kenar); margin-bottom: clamp(16px, 2vw, 26px); }
.v-bolum-baslik { margin: 0; font-size: clamp(18px, 1.6vw, 24px); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
.v-metin-blok { max-width: 820px; margin: 0 auto; padding: clamp(64px, 9vw, 130px) var(--v-kenar); text-align: center; }
.v-metin-blok h2 { margin: 0 0 18px; font-size: clamp(22px, 2.3vw, 34px); font-weight: 300; text-transform: uppercase; letter-spacing: .02em; }
.v-metin-blok p { margin: 0 0 26px; font-size: 16px; line-height: 1.8; color: var(--v-soluk); }
.v-metin-blok .metin-alan { font-size: 16px; line-height: 1.8; }

.v-haberler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 4px; padding: 0 4px; }
.v-haber { display: flex; flex-direction: column; gap: 6px; }
.v-haber-gorsel { display: block; aspect-ratio: 4 / 3; margin-bottom: 6px; overflow: hidden; background: var(--v-zemin); }
.v-haber-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.v-haber-tarih { padding: 0 10px; font-size: 12px; letter-spacing: .06em; color: var(--v-soluk); }
.v-haber-baslik { padding: 0 10px; font-size: 14px; line-height: 1.4; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 800px) { .v-haberler { grid-template-columns: minmax(0, 1fr); } }

/* ============================ ÜRÜN IZGARASI ============================ */
.v-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) 4px; padding: 0 4px; }
.v-urun { display: block; min-width: 0; color: inherit; }
.v-urun-gorsel { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--v-zemin); }
.v-urun-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-urun-ikinci { opacity: 0; transition: opacity .45s ease; }
.v-urun:hover .v-urun-ikinci.hazir { opacity: 1; }
/* Listenin ilk iki ürünü: yan yana, ekranı dolduran büyük görsel */
.v-urun-buyuk { grid-column: span 2; }
.v-urun-buyuk .v-urun-gorsel { aspect-ratio: auto; height: min(calc(50vw - 6px), calc(100vh - var(--v-ust) - 170px)); min-height: 320px; }
.v-urun-bilgi { display: flex; flex-direction: column; gap: 3px; padding: 12px 10px 0; font-size: 12.5px; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; }
.v-urun-ad { color: var(--v-siyah); }
.v-urun-alt { color: var(--v-soluk); }
.v-urun-buyuk .v-urun-bilgi { font-size: 13.5px; }
@media (max-width: 1100px) {
    .v-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v-urun-buyuk { grid-column: auto; }
    .v-urun-buyuk .v-urun-gorsel { aspect-ratio: 1 / 1; height: auto; min-height: 0; }
}
@media (max-width: 700px) {
    .v-izgara { gap: 26px 3px; padding: 0 3px; }
    .v-urun-buyuk { grid-column: 1 / -1; }
    .v-urun-bilgi { padding: 9px 8px 0; font-size: 11.5px; }
}

/* ============================ LİSTE BAŞLIĞI ============================ */
.v-liste { padding-top: clamp(18px, 2.4vw, 34px); }
.v-liste-bas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 30px; padding: 0 var(--v-kenar) clamp(18px, 2.2vw, 30px); }
.v-liste-bas .v-kirinti { flex-basis: 100%; }
.v-liste-baslik { margin: 0; font-size: clamp(22px, 2.3vw, 34px); font-weight: 400; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; }
.v-alt-serit { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-bottom: 3px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.v-alt-serit a { padding-bottom: 2px; border-bottom: 1px solid transparent; color: var(--v-soluk); transition: color .2s ease, border-color .2s ease; }
.v-alt-serit a:hover, .v-alt-serit a.aktif { color: var(--v-siyah); border-bottom-color: currentColor; }
.v-liste-adet { margin-left: auto; padding-bottom: 3px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--v-soluk); }
@media (max-width: 700px) {
    .v-alt-serit {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        width: calc(100% + 2 * var(--v-kenar)); margin: 0 calc(-1 * var(--v-kenar)); padding: 0 var(--v-kenar) 4px;
    }
    .v-alt-serit::-webkit-scrollbar { display: none; }
    .v-alt-serit a { white-space: nowrap; }
    .v-liste-adet { margin-left: 0; }
}

.v-kat-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) 4px; padding: 0 4px; }
.v-kat-kart { display: block; color: inherit; }
.v-kat-gorsel { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--v-zemin); }
.v-kat-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--v-gecis); }
.v-kat-kart:hover .v-kat-gorsel img { transform: scale(1.03); }
.v-kat-kart.yedek .v-kat-gorsel { background: #1d1d1d; }
.v-kat-kart.yedek .v-kat-gorsel img { object-fit: contain; padding: 25%; }
@media (max-width: 900px) { .v-kat-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .v-kat-izgara { grid-template-columns: minmax(0, 1fr); } }

/* ============================ ÜRÜN DETAY ============================ */
.v-urun-detay {
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start;
    gap: clamp(28px, 4.5vw, 72px); padding: clamp(14px, 1.6vw, 24px) var(--v-kenar) 0 clamp(8px, 1.2vw, 18px);
}
.v-ud-galeri {
    position: sticky; top: calc(var(--v-ust) + 14px);
    display: grid; grid-template-columns: clamp(64px, 5.6vw, 92px) minmax(0, 1fr); align-items: start; gap: clamp(10px, 1.2vw, 18px);
}
.v-ud-galeri.tek { grid-template-columns: minmax(0, 1fr); }
.v-ud-kucukler {
    position: relative; display: flex; flex-direction: column; gap: 10px;
    max-height: calc(100vh - var(--v-ust) - 40px); overflow-y: auto; scrollbar-width: thin; padding-right: 2px;
}
.v-ud-kucuk { flex: none; display: block; aspect-ratio: 1 / 1.25; padding: 0; border: 1px solid transparent; background: var(--v-zemin); cursor: pointer; transition: border-color .2s ease; }
.v-ud-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.v-ud-kucuk:not(.aktif):hover { border-color: var(--v-cizgi); }
.v-ud-kucuk.aktif { border-color: var(--v-siyah); }
.v-ud-ana { position: relative; }
/* Görseller kare (1000x1000) kırpılır: yükseklik sınırı genişliğe de uygulanır ki
   kutu yayılıp yanlarda zemin rengi (gri) şerit bırakmasın */
.v-ud-ana img { display: block; width: 100%; max-width: calc(100vh - var(--v-ust) - 40px); aspect-ratio: 1 / 1; height: auto; margin: 0 auto; object-fit: contain; background: transparent; cursor: zoom-in; }
.v-ud-buyut {
    position: absolute; right: 18px; bottom: 18px; width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center; border: 0; background: #fff; color: var(--v-siyah); cursor: pointer; transition: transform .2s ease;
}
.v-ud-buyut:hover { transform: scale(1.06); }

.v-ud-bilgi { max-width: 620px; padding-top: 6px; }
.v-ud-baslik { margin: 16px 0 6px; font-size: clamp(21px, 1.9vw, 28px); font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: .01em; }
.v-ud-kod { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--v-soluk); }
.v-ud-fiyat { margin: 18px 0 0; font-size: 21px; font-weight: 500; }
.v-ud-aciklama { margin-top: 28px; }
.v-ud-ozet { margin: 0; font-size: 17px; line-height: 1.75; text-align: justify; hyphens: auto; }
.v-ud-govde { font-size: 16px; line-height: 1.75; }
.v-ud-govde > :first-child { margin-top: 0; }
.v-ud-govde:not(.kisa) { margin-top: 16px; }
.v-ud-govde:not(.kisa):not(.acik) { display: none; }
.v-ud-govde.kisa:not(.acik) {
    max-height: 9.5em; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.v-ud-devam { display: flex; margin: 12px auto 0; padding: 8px 14px; border: 0; background: none; color: var(--v-siyah); cursor: pointer; }
.v-ud-devam svg { transition: transform .25s ease; }
.v-ud-devam[aria-expanded="true"] svg { transform: rotate(180deg); }

.v-ud-tablo-kap { margin-top: 30px; overflow-x: auto; }
.v-ud-olculer { width: 100%; border-collapse: collapse; font-size: 15px; }
.v-ud-olculer th { padding: 0 12px 16px; border-bottom: 1px solid #b9b9b9; text-align: left; font-weight: 500; color: #555; white-space: nowrap; }
.v-ud-olculer td { padding: 18px 12px; white-space: nowrap; }
/* Özellik tablosu — ölçü tablosuyla aynı çizgisel dil */
.v-ud-ozellik { width: 100%; border-collapse: collapse; font-size: 15px; }
.v-ud-ozellik th, .v-ud-ozellik td { padding: 14px 12px; border-bottom: 1px solid var(--v-cizgi); text-align: left; vertical-align: top; }
.v-ud-ozellik thead th { padding: 0 12px 16px; border-bottom: 1px solid #b9b9b9; font-weight: 500; color: #555; white-space: nowrap; }
.v-ud-ozellik tbody th { font-weight: 500; }
.v-ud-ozellik tbody tr:last-child th, .v-ud-ozellik tbody tr:last-child td { border-bottom: 0; }
.v-ud-adet-bas, .v-ud-adet-hucre { width: 1%; text-align: right; }
.v-ud-adet-satir {
    display: flex; align-items: center; justify-content: space-between; margin-top: 30px; padding: 14px 12px;
    border-top: 1px solid #b9b9b9; border-bottom: 1px solid var(--v-cizgi); font-size: 15px; color: #555;
}
.v-adet { display: inline-flex; align-items: center; gap: 8px; }
.v-adet button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--v-siyah); font: 300 24px/1 var(--v-font); cursor: pointer; }
.v-adet button:hover { opacity: .6; }
.v-adet input {
    width: 2.8ch; min-width: 26px; height: 26px; padding: 0 4px; border: 0; border-radius: 13px;
    background: var(--v-siyah); color: #fff; font: 500 12px/26px var(--v-font); text-align: center;
    -moz-appearance: textfield; appearance: textfield;
}
.v-adet input::-webkit-outer-spin-button, .v-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.v-ud-kumas { margin-top: 26px; }
.v-ud-kumas h2 { margin: 0 0 12px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.v-swatchlar { display: flex; flex-wrap: wrap; gap: 12px; }
.v-swatch { width: 64px; padding: 0; border: 0; background: none; color: var(--v-soluk); font: 11px/1.3 var(--v-font); text-align: center; cursor: pointer; }
.v-swatch img { width: 64px; height: 64px; margin-bottom: 5px; object-fit: cover; border: 1px solid var(--v-cizgi); transition: border-color .2s ease; }
.v-swatch:hover img { border-color: var(--v-siyah); }
.v-swatch span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.v-ud-cta { display: flex; gap: 6px; margin-top: 26px; }
.v-dugme {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
    border: 1px solid var(--v-siyah); background: var(--v-siyah); color: #fff; text-align: center;
    font: 400 13.5px/1.2 var(--v-font); text-transform: uppercase; letter-spacing: .07em; transition: background .2s ease, color .2s ease;
}
.v-dugme:hover { background: #fff; color: var(--v-siyah); }
.v-ikon-grup { flex: none; display: flex; border: 1px solid var(--v-siyah); }
.v-ikon-grup > a, .v-ikon-grup > button { width: 46px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: #fff; color: var(--v-siyah); cursor: pointer; transition: background .2s ease; }
.v-ikon-grup > * + * { border-left: 1px solid var(--v-siyah); }
.v-ikon-grup > :hover { background: var(--v-zemin); }

@media (max-width: 900px) {
    .v-urun-detay { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 0; }
    .v-ud-galeri { position: static; grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .v-ud-kucukler { order: 2; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 0 var(--v-kenar) 4px; gap: 8px; }
    .v-ud-kucuk { width: 58px; }
    .v-ud-ana img { max-width: 100%; cursor: default; }
    .v-ud-bilgi { max-width: none; padding: 0 var(--v-kenar); }
    .v-ud-ozet { text-align: left; }
    .v-ud-cta { position: sticky; bottom: 0; z-index: 5; margin-top: 18px; padding: 10px 0; background: #fff; }
    .vitrin:has(.v-urun-detay) .v-wa { display: none; }
}

/* Büyütme penceresi */
.v-buyut { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: #fff; }
.v-buyut[hidden] { display: none; }
.v-buyut figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: calc(100vw - 140px); }
.v-buyut img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; }
.v-buyut figcaption { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--v-soluk); }
.v-buyut-kapat { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border: 0; background: none; color: var(--v-siyah); font: 300 38px/1 var(--v-font); cursor: pointer; }
.v-buyut-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 80px; border: 0; background: none; color: var(--v-siyah); font: 200 54px/1 var(--v-font); cursor: pointer; }
.v-buyut-ok[hidden] { display: none; }
.v-onceki { left: 8px; }
.v-sonraki { right: 8px; }
@media (max-width: 700px) { .v-buyut figure { max-width: 100vw; } .v-buyut-ok { display: none; } }

/* ============================ ALT BİLGİ ============================ */
.v-footer { margin-top: clamp(80px, 10vw, 150px); padding: clamp(40px, 5vw, 64px) var(--v-kenar) 24px; border-top: 1px solid var(--v-cizgi); font-size: 13px; }
.v-footer-ic { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 36px; }
.v-footer h4 { margin: 0 0 16px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.v-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.v-footer li { line-height: 1.5; color: var(--v-soluk); }
.v-footer a { color: var(--v-soluk); transition: color .2s ease; }
.v-footer a:hover { color: var(--v-siyah); }
.v-footer-logo { display: block; height: 42px; width: auto; max-width: 220px; margin-bottom: 16px; object-fit: contain; object-position: left; filter: brightness(0); }
.v-footer-marka p { max-width: 30ch; margin: 0 0 16px; line-height: 1.6; color: var(--v-soluk); }
.v-sosyal { display: flex; gap: 14px; }
.v-sosyal a { color: var(--v-siyah); }
.v-telif {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(36px, 5vw, 60px); padding-top: 18px;
    border-top: 1px solid var(--v-cizgi); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--v-soluk);
}
.v-telif-dil { display: flex; gap: 14px; }
.v-telif-dil a.aktif { color: var(--v-siyah); }
@media (max-width: 960px) { .v-footer-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v-footer-ic { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ============================ YÜZEN ÖĞELER ============================ */
.v-wa {
    position: fixed; left: 22px; bottom: 22px; z-index: 70; width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center; background: #fff; color: var(--v-siyah);
    border: 1px solid var(--v-cizgi); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.08); transition: transform .2s ease;
}
.v-wa:hover { transform: translateY(-2px); }
.cerez-acik .v-wa { bottom: 96px; }
@media (max-width: 700px) { .cerez-acik .v-wa { bottom: 150px; } }
/* Önizleme rozeti üst şeridin hemen altında — alttaki çerez şeridiyle çakışmasın */
.v-onizleme {
    position: fixed; left: 50%; top: calc(var(--v-ust) + 10px); z-index: 110; transform: translateX(-50%);
    padding: 9px 18px; border-radius: 40px; background: var(--v-siyah); color: #fff;
    font-size: 12px; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 8px 26px rgba(0,0,0,.25);
}
.v-onizleme a { text-decoration: underline; text-underline-offset: 3px; }
.v-menu-acik .v-onizleme { display: none; }
.v-bildirim {
    position: fixed; left: 50%; bottom: 70px; z-index: 130; transform: translate(-50%, 12px); opacity: 0;
    padding: 10px 18px; background: var(--v-siyah); color: #fff; font-size: 13px; transition: opacity .25s ease, transform .25s ease;
}
.v-bildirim.gir { opacity: 1; transform: translate(-50%, 0); }

/* ================= KLASİK ŞABLONLAR (iletişim, kariyer, sayfalar …) ================= */
.vitrin h1, .vitrin h2, .vitrin h3, .vitrin h4 { font-weight: 500; }
.vitrin .sayfa-hero { min-height: 300px; padding: 72px 0 46px; }
.vitrin .sayfa-hero h1 { padding-left: 0; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
.vitrin .sayfa-hero h1::before { display: none; }
.vitrin .sayfa-hero .sayfa-ozet { padding-left: 0; }
.vitrin .sayfa-hero.sade { padding: 40px 0 22px; background: #fff; border-bottom: 0; }
.vitrin .btn { border-radius: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.vitrin .btn:hover { transform: none; }
@media (max-width: 700px) { .vitrin .sayfa-hero { min-height: 220px; padding: 56px 0 32px; } }

@media (prefers-reduced-motion: reduce) {
    .v-menu, .v-alt, .v-alt-ic, .v-hamburger span, .v-vitrin-kart img, .v-kat-gorsel img, .v-urun-ikinci { transition: none !important; }
}