/* vivo — içerik / ürün listesi ve detay */
.vv-kat-aciklama { margin-bottom: 36px; }
.vv-altkat { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.vv-altkat a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--vv-cizgi); font-weight: 700; color: var(--vv-baslik); transition: background-color .2s, border-color .2s; }
.vv-altkat a svg { width: 15px; height: 15px; }
.vv-altkat a:hover { border-color: var(--vv-vurgu); background: var(--vv-vurgu); }

.vv-kart-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.vv-kart { display: flex; flex-direction: column; border: 1px solid var(--vv-cizgi); background: var(--vv-beyaz); transition: border-color .3s; }
.vv-kart:hover { border-color: var(--vv-baslik); }
.vv-kart-gorsel { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--vv-vurgu-acik); }
.vv-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--vv-gecis); }
.vv-kart:hover .vv-kart-gorsel img { transform: scale(1.06); }
.vv-kart-gorsel > b { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: var(--vv-vurgu); font-family: var(--vv-dev-font); font-size: 38px; font-weight: 400; color: var(--vv-vurgu-yazi); }
.vv-urun .vv-kart-gorsel { background: var(--vv-beyaz); }
.vv-urun .vv-kart-gorsel img { padding: 20px; object-fit: contain; }
.vv-kart-yazi { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 22px 24px; }
.vv-kart-yazi b { font-size: 21px; line-height: 1.3; color: var(--vv-baslik); }
.vv-kart-yazi small { font-size: 15px; line-height: 1.6; }
.vv-kart-yazi em { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-weight: 700; color: var(--vv-baslik); }
.vv-kart-yazi em svg { width: 16px; height: 16px; transition: transform .3s var(--vv-gecis); }
.vv-kart:hover .vv-kart-yazi em svg { transform: translateX(5px); }
.vv-kart-gorsel > i { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--vv-vurgu); color: var(--vv-vurgu-yazi); }
.vv-kart-gorsel > i svg { width: 22px; height: 22px; margin-left: 3px; }

.vv-video-kutu { max-width: 1000px; margin: 0 auto 50px; aspect-ratio: 16 / 9; background: #000; }
.vv-video-kutu iframe { width: 100%; height: 100%; border: 0; }
.vv-yazi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: start; }
.vv-yazi.is-tek { grid-template-columns: minmax(0, 1fr); max-width: 940px; }
.vv-yazi-gorsel { position: sticky; top: 110px; }
.vv-yazi-gorsel a { display: block; overflow: hidden; }
.vv-yazi-gorsel img { width: 100%; transition: transform .8s var(--vv-gecis); }
.vv-yazi-gorsel a:hover img { transform: scale(1.03); }
.vv-yazi-metin h2 { margin-bottom: 26px; line-height: 1.5; }
.vv-yazi-ozet { margin-bottom: 1.2em; font-size: 20px; font-weight: 500; color: var(--vv-baslik); }
.vv-galeri { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 50px; }
.vv-galeri a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--vv-zemin); }
.vv-galeri img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--vv-gecis); }
.vv-galeri a:hover img { transform: scale(1.07); }
@media (max-width: 991px) {
	.vv-kart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.vv-yazi { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.vv-yazi-gorsel { position: static; }
	.vv-galeri { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.vv-kart-izgara { grid-template-columns: minmax(0, 1fr); }
	.vv-galeri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.vv-yazi-ozet { font-size: 18px; }
}