/* vivo — ana sayfa */

/* Vitrin: vitrin görselleri üst üste, yumuşak geçiş (yazılar görselin içinde) */
.vv-vitrin { position: relative; overflow: hidden; background: var(--vv-vurgu-acik); }
.vv-vitrin-iz { display: grid; }
.vv-vslayt { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; transition: opacity .9s, visibility .9s; }
.vv-vslayt.is-aktif { opacity: 1; visibility: visible; }
.vv-vslayt img { width: 100%; aspect-ratio: 1920 / 1000; object-fit: cover; }
.vv-vitrin-ok { position: absolute; bottom: 24px; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; background: var(--vv-beyaz); color: var(--vv-baslik); cursor: pointer; transition: background-color .2s, color .2s; }
.vv-vitrin-ok:hover { background: var(--vv-vurgu); color: var(--vv-vurgu-yazi); }
.vv-vitrin-ok svg { width: 20px; height: 20px; }
.vv-vitrin-onceki { right: 80px; }
.vv-vitrin-sonraki { right: 24px; }
.vv-vitrin-noktalar { position: absolute; left: 0; right: 0; bottom: 47px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.vv-vitrin-noktalar button { width: 34px; height: 6px; padding: 0; border: 0; background: rgba(255, 255, 255, .7); cursor: pointer; transition: background-color .2s, width .3s var(--vv-gecis); }
.vv-vitrin-noktalar button.is-secili { width: 54px; background: var(--vv-vurgu); }

/* Hoşgeldin: açık vurgu zemini, solda yazı + video, sağda dairenin önünde kahraman görseli */
.vv-giris { position: relative; overflow: hidden; background: var(--vv-vurgu-acik); }
.vv-giris-izgara { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 50px; align-items: end; padding-top: 70px; }
.vv-giris-yazi { padding-bottom: 80px; }
.vv-giris-yazi h1 { margin-bottom: 22px; font-size: clamp(40px, 5.2vw, 68px); }
.vv-giris-yazi .vv-metin { margin-bottom: 30px; font-size: 19px; font-weight: 500; color: var(--vv-baslik); }
.vv-giris-yazi .vv-metin iframe { max-width: 560px; }
.vv-giris-gorsel { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 100%; }
.vv-giris-gorsel img { position: relative; z-index: 2; max-height: 720px; width: auto; }
.vv-daire { position: absolute; z-index: 1; left: 50%; bottom: 60px; width: min(480px, 90%); aspect-ratio: 1; border-radius: 50%; background: var(--vv-vurgu); transform: translateX(-50%); }
.vv-giris-gorsel .vv-noktalar { position: absolute; z-index: 0; top: 40px; right: 0; width: 160px; height: 112px; }

/* İsim kartı + hikâye */
.vv-hikaye { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 70px; align-items: center; }
.vv-isim-kart { padding: 44px 40px; border: 1px solid var(--vv-cizgi); background: var(--vv-beyaz); }
.vv-isim-kart > p { margin: 0; font-family: var(--vv-dev-font); font-size: 15px; letter-spacing: 2px; color: var(--vv-baslik); }
.vv-isim-kart h2 { margin-bottom: 28px; font-family: var(--vv-font); font-size: clamp(38px, 4.2vw, 56px); font-weight: 700; letter-spacing: -1px; color: var(--vv-vurgu-koyu); }
.vv-isim-alt { display: block; margin: -16px 0 28px; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--vv-baslik); }
.vv-isim-fotolar { display: flex; }
.vv-isim-fotolar a { display: block; width: 92px; height: 92px; margin-right: -18px; overflow: hidden; border: 4px solid var(--vv-beyaz); border-radius: 50%; transition: transform .3s var(--vv-gecis); }
.vv-isim-fotolar a:hover { z-index: 1; transform: scale(1.12); }
.vv-isim-fotolar img { width: 100%; height: 100%; object-fit: cover; }
.vv-hikaye-yazi h2 { margin-bottom: 26px; }
.vv-hikaye-yazi p { margin-bottom: 30px; font-size: 18px; }

/* Tanıtım kutusu */
.vv-tanitim { padding-top: 30px; }
.vv-tanitim > h2 { margin-bottom: 44px; }
.vv-tanitim-kutu { padding: 46px 50px; border: 1px solid var(--vv-cizgi); background: var(--vv-beyaz); }
.vv-tanitim-kutu h3 { margin-bottom: 20px; font-size: 26px; font-weight: 700; }
.vv-tanitim-kutu h3 span { padding: 0 .1em; background: linear-gradient(transparent 60%, var(--vv-vurgu) 60%); }

/* Program: kartlar + ortada görsel */
.vv-program { background: var(--vv-zemin); }
.vv-program-ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; margin-bottom: 50px; }
.vv-program-ust .vv-metin { font-size: 19px; }
.vv-program-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.vv-program-sutun { display: flex; flex-direction: column; gap: 20px; }
.vv-pkart { display: flex; flex-direction: column; gap: 8px; padding: 26px 26px 22px; border: 1px solid var(--vv-cizgi); background: var(--vv-beyaz); transition: border-color .3s; }
.vv-pkart:hover { border-color: var(--vv-baslik); }
.vv-pkart i { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; background: var(--vv-vurgu); color: var(--vv-vurgu-yazi); transition: transform .4s var(--vv-gecis); }
.vv-pkart:hover i { transform: rotate(-8deg) scale(1.06); }
.vv-pkart i svg { width: 28px; height: 28px; }
.vv-pkart b { font-size: 21px; color: var(--vv-baslik); }
.vv-pkart small { font-size: 15px; line-height: 1.6; }
.vv-pkart em, .vv-yorum em { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-style: normal; font-weight: 700; color: var(--vv-baslik); }
.vv-pkart em svg, .vv-yorum em svg { width: 16px; height: 16px; transition: transform .3s var(--vv-gecis); }
.vv-pkart:hover em svg, .vv-yorum:hover em svg { transform: translateX(5px); }
.vv-program-gorsel { position: relative; display: flex; justify-content: center; align-self: end; }
.vv-program-gorsel .vv-daire { bottom: 40px; width: 88%; }
.vv-program-gorsel img { position: relative; z-index: 2; max-height: 620px; width: auto; }
.vv-orta-dugme { margin-top: 50px; text-align: center; }

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

/* Yorumlar */
.vv-yorum-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 44px; }
.vv-yorum-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.vv-yorum { display: flex; flex-direction: column; border: 1px solid var(--vv-cizgi); background: var(--vv-beyaz); transition: border-color .3s; }
.vv-yorum:hover { border-color: var(--vv-baslik); }
.vv-yorum-gorsel { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--vv-vurgu-acik); }
.vv-yorum-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--vv-gecis); }
.vv-yorum:hover .vv-yorum-gorsel img { transform: scale(1.06); }
.vv-yorum-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-yorum-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-yorum-gorsel > i svg { width: 22px; height: 22px; margin-left: 3px; }
.vv-yorum-yazi { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 22px 22px 20px; }
.vv-tirnak { width: 30px; height: 30px; color: var(--vv-vurgu-koyu); }
.vv-yorum-yazi b { font-size: 19px; line-height: 1.3; color: var(--vv-baslik); }
.vv-yorum-yazi small { font-size: 15px; line-height: 1.6; }
.vv-yorum-yazi em { margin-top: auto; padding-top: 6px; }

/* Fırsat */
.vv-firsat { background: var(--vv-koyu); color: rgba(255, 255, 255, .78); overflow: hidden; }
.vv-firsat-izgara { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: center; }
.vv-firsat-gorsel { position: relative; display: flex; justify-content: center; align-self: end; padding-top: 60px; }
.vv-blok { position: absolute; left: 8%; right: 8%; top: 120px; bottom: 0; background: var(--vv-vurgu); }
.vv-firsat-gorsel img { position: relative; z-index: 1; max-height: 640px; width: auto; }
.vv-firsat-yazi { padding: 80px 0; }
.vv-firsat-yazi h2 { margin-bottom: 24px; color: var(--vv-beyaz); }
.vv-firsat-yazi .vv-metin { margin-bottom: 32px; }
.vv-firsat-yazi .vv-metin h6 { margin: 0 0 6px; color: var(--vv-vurgu); }
.vv-firsat-yazi .vv-metin li::marker { color: var(--vv-vurgu); }
.vv-firsat-yazi .vv-metin strong, .vv-firsat-yazi .vv-metin b { color: var(--vv-beyaz); }

@media (max-width: 1100px) {
	.vv-yorum-izgara, .vv-blog-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vv-program-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.vv-program-gorsel { display: none; }
}
@media (max-width: 991px) {
	.vv-giris-izgara { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 50px; }
	.vv-giris-yazi { padding-bottom: 30px; }
	.vv-giris-gorsel img { max-height: 480px; }
	.vv-hikaye, .vv-program-ust, .vv-firsat-izgara { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.vv-firsat-yazi { padding: 0 0 60px; order: -1; padding-top: 60px; }
	.vv-firsat-gorsel img { max-height: 460px; }
}
@media (max-width: 640px) {
	.vv-giris-yazi .vv-metin { font-size: 17px; }
	.vv-isim-kart, .vv-tanitim-kutu { padding: 30px 22px; }
	.vv-isim-fotolar a { width: 74px; height: 74px; }
	.vv-program-izgara, .vv-yorum-izgara, .vv-blog-izgara { grid-template-columns: minmax(0, 1fr); }
	.vv-vitrin-ok { display: none; }
	.vv-vitrin-noktalar { bottom: 10px; }
	.vv-vitrin-noktalar button { width: 22px; height: 4px; }
	.vv-vitrin-noktalar button.is-secili { width: 34px; }
	.vv-yorum-ust .vv-dugme { width: 100%; justify-content: space-between; }
}