/* Gelin Alma Konvoyu ekran yazıları: dikey (9:16) yayına göre, ölçüler vh. */
body { background: #2a1830; }

.top { position: absolute; left: 0; right: 0; top: 1.2vh; display: flex; flex-direction: column; align-items: center; gap: 0.6vh; }
.top .call { display: flex; align-items: center; gap: 0.6vh; padding: 0.45vh 1.5vh; border-radius: 3vh; background: #0b0d14d9; border: 0.25vh solid #ffffff22; font-size: 1.7vh; font-weight: 800; }
.top .call i { font-style: normal; }
.top .call b { color: var(--gold); font-weight: 900; }

.lead { display: flex; flex-direction: column; align-items: center; padding: 0.4vh 1.4vh 0.5vh; border-radius: 2vh; background: linear-gradient(180deg, #7a1030e8, #4a0a1ee8); border: 0.3vh solid #ffd6e3; box-shadow: 0 0.6vh 2vh #0007; }
.lead small { font-size: 1.15vh; font-weight: 800; color: #ffd6e3; text-transform: uppercase; letter-spacing: 0.05em; }
.lead .who { display: flex; align-items: center; gap: 0.6vh; font-size: 1.9vh; font-weight: 900; max-width: 34vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead .av { width: 2.8vh; height: 2.8vh; border: 0.2vh solid #fff; }
.lead.pulse { animation: pulse 0.8s ease-out; }
@keyframes pulse { 30% { transform: scale(1.12); box-shadow: 0 0 3vh #ffc94a; } }

.trip { display: flex; align-items: center; gap: 0.6vh; padding: 0.3vh 1vh; border-radius: 2vh; background: #0b0d14b8; font-size: 1.25vh; font-weight: 800; }
.trip .bar { width: 14vh; height: 0.9vh; border-radius: 1vh; background: #ffffff22; overflow: hidden; }
.trip .bar i { display: block; height: 100%; width: 0; border-radius: 1vh; background: linear-gradient(90deg, #ff8fb8, #ffd166); transition: width 0.5s; }
.trip b { min-width: 5vh; color: #ffd6e3; }

/* sol üst: ilk 3 sıralaması (iri, eğik adlar, altın rakamlar, yuvarlak foto; kutusuz, gölgeli yazı) */
.top3 { position: absolute; left: 1.2vh; top: 16.5vh; width: 30vh; }
.top3 h4 { margin: 0 0 0.4vh; font-size: 1.35vh; font-weight: 900; letter-spacing: 0.08em; color: var(--gold); text-shadow: 0 0.2vh 0.6vh #000; }
.top3 ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5vh; }
.top3 li { display: flex; align-items: center; gap: 0.9vh; }
.top3 li > i { width: 2.4vh; font-size: 3.4vh; font-weight: 900; font-style: italic; text-align: center; background: linear-gradient(180deg, #fff3b0, #f5b301); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0.25vh 0.3vh #000c); }
.top3 .av { width: 4.6vh; height: 4.6vh; font-size: 2vh; border: 0.35vh solid #fff; box-shadow: 0 0.3vh 1vh #000a; }
.top3 li.r1 .av { border-color: #f5b301; width: 5.2vh; height: 5.2vh; }
.top3 .who { display: flex; flex-direction: column; min-width: 0; font-size: 2.3vh; font-weight: 900; font-style: italic; line-height: 1.05; text-shadow: 0 0.25vh 0.5vh #000, 0 0 0.3vh #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top3 .who small { font-size: 1.2vh; font-weight: 800; font-style: normal; color: #ffd166; }
.top3 li.empty { font-size: 1.5vh; font-weight: 700; color: #ffffffcc; text-shadow: 0 0.2vh 0.5vh #000; }

.guide { top: 17vh; }
.guide div { width: 7.4vh; padding: 0.35vh 0.3vh; }
.guide img { width: 3.4vh; height: 3.4vh; }
.guide i { font-size: 2.5vh; line-height: 3.4vh; }
.guide span { font-size: 1.1vh; }

.feed { bottom: 4vh; }
.feed div { font-size: 1.45vh; padding: 0.35vh 1.1vh 0.35vh 0.35vh; }
.feed .av { width: 2.4vh; height: 2.4vh; }

/* olay duyuruları: ortada üstte */
.calls { position: absolute; left: 50%; top: 24vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.6vh; width: 94%; }
.calls .c { display: flex; align-items: center; gap: 0.8vh; padding: 0.5vh 1.6vh 0.5vh 0.5vh; border-radius: 3vh; background: #2b0a17e8; border: 0.3vh solid #ffd6e3aa; font-size: 1.85vh; font-weight: 800; white-space: nowrap; max-width: 100%; animation: call 3s ease-out forwards; box-shadow: 0 0.6vh 2vh #0007; }
.calls .c .av { width: 3.6vh; height: 3.6vh; border: 0.25vh solid #fff; }
.calls .c b { color: var(--gold); }
.calls .c span { overflow: hidden; text-overflow: ellipsis; }
@keyframes call { 0% { opacity: 0; transform: scale(0.7); } 8% { opacity: 1; transform: scale(1.06); } 14% { transform: scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1vh); } }

/* öne geçen: alt ortada "X, Y'yi tokatladı!" */
.slaps { position: absolute; left: 50%; bottom: 21vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.6vh; width: 96%; pointer-events: none; }
.slaps .s { display: flex; align-items: center; gap: 0.9vh; padding: 0.5vh 0.5vh; border-radius: 3vh; background: linear-gradient(90deg, #3a1306f0, #1a0a10f0); border: 0.3vh solid #ffb347; font-size: 2vh; font-weight: 800; white-space: nowrap; max-width: 100%; box-shadow: 0 0 2.4vh #ff8c2a66, 0 0.6vh 2vh #0008; animation: slap 3.4s ease-out forwards; }
.slaps .s span { padding: 0 0.4vh; overflow: hidden; text-overflow: ellipsis; }
.slaps .s b { color: var(--gold); }
.slaps .s em { font-style: normal; color: #ffd0d0; }
.slaps .s i { font-style: normal; color: #9ae6b4; font-size: 1.6vh; }
.slaps .s .av { width: 3.8vh; height: 3.8vh; border: 0.25vh solid #fff; flex: none; }
/* tokat sahnesi: tokatlayan (solda) ile tokatlanan (sağda) arasında el savrulur, tokatlanan sarsılıp yana yatar */
.slaps .s .vs { position: relative; display: flex; align-items: center; gap: 2.6vh; padding: 0 0.4vh; overflow: visible; }
.slaps .s .vs .av { width: 4.6vh; height: 4.6vh; }
.slaps .s .hitter { border-color: #ffd166; animation: hitter 0.9s ease-out; }
.slaps .s .victim { border-color: #ff5d5d; animation: victim 0.9s ease-out 0.28s both; }
.slaps .s .hand { position: absolute; left: 3.2vh; top: 50%; font-size: 3.4vh; line-height: 1; text-decoration: none; transform-origin: 20% 90%; animation: hand 0.75s cubic-bezier(.2,.9,.3,1.2) both; filter: drop-shadow(0 0.2vh 0.3vh #000a); }
.slaps .s .pow { position: absolute; right: -1.4vh; top: -1.6vh; font-size: 1.6vh; font-weight: 900; font-style: italic; text-decoration: none; color: #fff3b0; -webkit-text-stroke: 0.15vh #b3121b; animation: pow 0.9s ease-out 0.3s both; }
@keyframes hand { 0% { opacity: 0; transform: translate(-1vh, -50%) rotate(-70deg) scale(0.6); } 30% { opacity: 1; transform: translate(0, -50%) rotate(-40deg) scale(1.1); } 50% { transform: translate(3.4vh, -50%) rotate(25deg) scale(1.15); } 70% { transform: translate(3vh, -50%) rotate(10deg) scale(1); } 100% { opacity: 0.85; transform: translate(1.6vh, -50%) rotate(-10deg) scale(0.9); } }
@keyframes victim { 0% { transform: none; } 15% { transform: translateX(1.2vh) rotate(22deg) scale(0.92); filter: brightness(1.8); } 35% { transform: translateX(-0.5vh) rotate(-10deg); filter: none; } 55% { transform: translateX(0.3vh) rotate(5deg); } 100% { transform: none; } }
@keyframes hitter { 0% { transform: scale(0.7); } 40% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes pow { 0% { opacity: 0; transform: scale(0.3) rotate(-12deg); } 25% { opacity: 1; transform: scale(1.3) rotate(-8deg); } 70% { opacity: 1; transform: scale(1) rotate(-8deg); } 100% { opacity: 0; transform: scale(1.1) rotate(-8deg); } }
@keyframes slap { 0% { opacity: 0; transform: translateX(-12vh) skewX(-12deg); } 7% { opacity: 1; transform: translateX(1.5vh) skewX(-6deg); } 12% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(1vh); } }

/* EN ÖNDE! gibi iri yazı */
.big { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 8vh; font-weight: 900; font-style: italic; white-space: nowrap; background: linear-gradient(180deg, #fff3b0, #ffc94a 55%, #f08c00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0.5vh 0 #5a2a00) drop-shadow(0 1vh 3vh #000a); animation: big 1.8s ease-out forwards; }
@keyframes big { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); } }

/* beğeni hedefi: davul zurna */
.likes { position: absolute; left: 1vh; top: 9.4vh; display: flex; align-items: center; gap: 0.5vh; padding: 0.3vh 0.9vh; border-radius: 2vh; background: #0b0d14b8; font-size: 1.2vh; font-weight: 800; }
.likes i { font-style: normal; font-size: 1.5vh; }
.likes .bar { width: 9vh; height: 0.9vh; border-radius: 1vh; background: #ffffff22; overflow: hidden; }
.likes .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff4f6d, #ff8fa3); transition: width 0.4s; }
.likes small { color: #ffffffcc; }

/* yol kesme */
.block { position: absolute; left: 50%; bottom: 20vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5vh; padding: 1.2vh 2.2vh; border-radius: 2.4vh; background: #1a0a10ee; border: 0.4vh solid #ef4444; box-shadow: 0 0 4vh #ef444477; text-align: center; animation: pop 0.4s ease-out; }
.block b { font-size: 3.4vh; font-weight: 900; color: #fff; letter-spacing: 0.03em; }
.block small { font-size: 1.5vh; font-weight: 700; color: #ffd6d6; }
.block .bar { width: 30vh; height: 1.6vh; border-radius: 1vh; background: #ffffff22; overflow: hidden; }
.block .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f59e0b, #ffe08a); transition: width 0.3s; }
.block em { font-style: normal; font-size: 1.6vh; font-weight: 900; color: var(--gold); }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) scale(0.7); } }

/* salona varış: düğün fotoğrafı */
.photo { position: absolute; left: 50%; top: 46vh; transform: translateX(-50%) scale(0.86); transform-origin: top center; display: flex; flex-direction: column; align-items: center; gap: 0.8vh; width: 80%; padding: 1.6vh 1.4vh; border-radius: 3vh; background: linear-gradient(180deg, #fff8f0f2, #ffe4ecf2); color: #4a0a1e; box-shadow: 0 2vh 6vh #000a; border: 0.6vh solid #fff; animation: pop 0.6s ease-out; }
.photo h2 { margin: 0; font-size: 3.6vh; font-weight: 900; }
.photo small { font-size: 1.5vh; font-weight: 800; color: #9b1238; text-transform: uppercase; letter-spacing: 0.05em; }
.photo .pc { display: flex; align-items: center; gap: 1.2vh; font-size: 2.2vh; font-weight: 900; }
.photo .pc .av { width: 7vh; height: 7vh; font-size: 3vh; border: 0.5vh solid #fff; box-shadow: 0 0.6vh 1.6vh #0004; }
.photo .pc .heart { color: #e8194f; font-size: 4vh; }
.photo .pc .n { display: flex; flex-direction: column; align-items: center; gap: 0.4vh; max-width: 14vh; text-align: center; }
.photo .pc .n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14vh; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 1.4vh; }
.podium .p { display: flex; flex-direction: column; align-items: center; gap: 0.4vh; width: 11vh; font-weight: 900; font-size: 1.5vh; text-align: center; }
.podium .p .av { width: 8vh; height: 8vh; font-size: 3.4vh; border: 0.5vh solid #fff; box-shadow: 0 0.6vh 1.6vh #0004; }
.podium .p.r1 .av { width: 10vh; height: 10vh; border-color: #ffc94a; }
.podium .p span { max-width: 11vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .p em { font-style: normal; font-size: 2.4vh; }
.podium .p small { font-size: 1.25vh; color: #9b1238; text-transform: none; letter-spacing: 0; }

/* dikeyde sıralama üstteki gelin / damat şeridinin altında ve daha küçük (önce üst üste biniyordu, sol tarafın üçte birini kaplıyordu) */
@media (max-aspect-ratio: 1/1) {
  .top3 { top: 19.6vh; width: 24vh; }
  .top3 .who { font-size: 1.75vh; }
  .top3 .av { width: 3.6vh; height: 3.6vh; }
  .top3 li.r1 .av { width: 4vh; height: 4vh; }
  .top3 li > i { font-size: 2.6vh; width: 2vh; }
}

/* yatay yayında yazılar biraz küçülür */
@media (min-aspect-ratio: 1/1) {
  .board { top: 11vh; }
  .guide { top: 11vh; }
}

/* kamera: izlenen araba ya da seçili açı (sağ üstte, rehberin üstünde) */
.watching { position: absolute; right: 1.4vh; top: 9.6vh; max-width: 30vh; padding: 0.4vh 1.1vh; border-radius: 2vh; background: #0b0d14d8; border: 0.25vh solid #38d5f5; font-size: 1.35vh; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 1.4vh #38d5f566; }
/* OBS Etkileşim: sıralamadaki isme tıklayınca kamera o arabaya gider */
.top3 li { pointer-events: auto; cursor: pointer; }

/* üstte: gelin ve damat olanlar (fotoğraf + ad) */
.coupleHud { display: flex; align-items: center; gap: 1.2vh; padding: 0.35vh 1.2vh; border-radius: 2.2vh; background: linear-gradient(90deg, #5c0a22e8, #2a1020e8); border: 0.25vh solid #ffd6e3aa; font-size: 1.45vh; font-weight: 800; max-width: 46vh; }
.coupleHud .who { display: flex; align-items: center; gap: 0.5vh; min-width: 0; }
.coupleHud b { color: #ffd6e3; white-space: nowrap; }
.coupleHud em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14vh; }
.coupleHud small { font-size: 1.15vh; font-weight: 700; color: #ffffffa0; white-space: nowrap; }
.coupleHud .av { width: 2.4vh; height: 2.4vh; font-size: 1.2vh; border: 0.18vh solid #fff; }

/* (11 Kasım 2026 inceleme) dikeyde 11 hediye kartı tek sütuna sığmıyordu, sonuncusu ekranın altında kesikti: iki sütun */
@media (max-aspect-ratio: 1/1) {
  .guide { display: grid; grid-template-columns: repeat(2, auto); gap: 0.6vh; top: 19.6vh; }
  .guide div { width: 6.8vh; }
}
/* yol kesilince kutu en altta (gelin arabasını ve tokat bildirimlerini örtmesin), alt soldaki olay listesi o sırada gizli */
.hud.blocking .block { bottom: 2vh; }
.hud.blocking .feed { opacity: 0; }
/* dikeyde düğün fotoğrafı kartı altta ve küçük: üstte salon tabelası, ortada gelin arabası görünsün */
@media (max-aspect-ratio: 1/1) {
  .photo { top: auto; bottom: 2vh; transform: translateX(-50%) scale(0.74); transform-origin: bottom center; }
}