/* Halay Başı ekran yazıları: dikey (9:16) yayına göre, ölçüler vh. */
body { background: #1a0d12; }

.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; }
.top .call em { font-style: normal; font-size: 1.3vh; font-weight: 900; padding: 0.1vh 0.8vh; border-radius: 1vh; background: #ff6fa0; color: #3a0018; }
.top .call em + em { background: #6fb3ff; color: #00203a; }

.lead { display: flex; flex-direction: column; align-items: center; padding: 0.4vh 1.4vh 0.5vh; border-radius: 2vh; background: linear-gradient(180deg, #a3122ee8, #5a0a1ae8); border: 0.3vh solid #ffd6e3; box-shadow: 0 0.6vh 2vh #0007; }
.lead small { font-size: 1.15vh; font-weight: 900; color: #ffd6e3; text-transform: uppercase; letter-spacing: 0.06em; }
.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.14); box-shadow: 0 0 3vh #ff4f6d; } }

.info { display: flex; gap: 0.8vh; }
.info span { padding: 0.25vh 1vh; border-radius: 2vh; background: #0b0d14b8; font-size: 1.25vh; font-weight: 800; }
.info b { color: var(--gold); font-weight: 900; }

/* beğeni: coşku çubuğu */
.likes { position: absolute; left: 1vh; top: 15vh; 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, #ffd166); transition: width 0.4s; }
.likes small { color: #ffffffcc; }
.likes.on { background: #a3122ee8; box-shadow: 0 0 2vh #ff4f6d; animation: beat 0.46s ease-in-out infinite; }
.likes.on small { color: #fff; font-weight: 900; }
@keyframes beat { 50% { transform: scale(1.06); } }

/* sol: düğünün ağaları */
.board { position: absolute; left: 1vh; top: 18.4vh; width: 19vh; padding: 0.7vh; }
.board h4 { font-size: 1.2vh; }
.board li { font-size: 1.35vh; padding: 0.25vh 0.3vh; }
.board li > i { font-style: normal; width: 1.9vh; text-align: center; font-weight: 900; color: var(--gold); }
.board .av { width: 2.2vh; height: 2.2vh; font-size: 1.1vh; }
.board li:first-child { background: linear-gradient(90deg, #d1142e66, transparent); border-radius: 1vh; }

.guide { top: 11vh; }
.guide div { width: 7vh; padding: 0.3vh 0.3vh; }
.guide img { width: 3.2vh; height: 3.2vh; }
.guide i { font-size: 2.4vh; line-height: 3.2vh; }
.guide span { font-size: 1.05vh; }

.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; }

/* isim etiketleri: başların üstünde */
.tags { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.4vh; padding: 0.2vh 0.8vh 0.2vh 0.2vh; border-radius: 2vh; background: #0b0d14cc; border: 0.18vh solid #ffffff33; font-size: 1.25vh; font-weight: 800; white-space: nowrap; will-change: transform; }
.tag .av { width: 2vh; height: 2vh; font-size: 1vh; }
.tag.t-lead { flex-wrap: wrap; justify-content: center; max-width: 15vh; padding: 0.15vh 0.7vh 0.2vh 0.2vh; background: linear-gradient(180deg, #c8102ef0, #6a0a1cf0); border-color: #ffd6e3; font-size: 1.3vh; gap: 0.1vh 0.4vh; }
.tag.t-lead small { flex-basis: 100%; text-align: center; font-size: 0.85vh; line-height: 1.1; font-weight: 900; color: #ffe08a; letter-spacing: 0.06em; }
.tag.t-lead .av { width: 2vh; height: 2vh; border: 0.15vh solid #fff; }

/* olay duyuruları */
.calls { position: absolute; left: 50%; top: 31vh; 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.8vh; 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); } }

.big { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 7.5vh; 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 #5a0a1a) 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); } }

@media (min-aspect-ratio: 1/1) {
  .likes { top: 10vh; }
  .board { top: 13.4vh; }
}

/* düğün fotoğrafı: altın hedefi dolunca */
.photo { position: absolute; left: 50%; top: 24vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.8vh; width: min(84%, 52vh); 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.2vh; font-weight: 900; }
.photo small { font-size: 1.4vh; font-weight: 800; color: #9b1238; text-transform: uppercase; letter-spacing: 0.05em; }
.photo .pc { display: flex; align-items: center; gap: 1.2vh; font-size: 2vh; font-weight: 900; }
.photo .pc .av { width: 6.5vh; height: 6.5vh; font-size: 2.8vh; border: 0.5vh solid #fff; box-shadow: 0 0.6vh 1.6vh #0004; }
.photo .pc .heart { color: #e8194f; font-size: 4vh; font-style: normal; }
.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; }
.photo .pl { font-size: 1.6vh; font-weight: 900; color: #b0102c; }
.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.3vh; width: 11vh; font-weight: 900; font-size: 1.45vh; text-align: center; }
.podium .p .av { width: 6vh; height: 6vh; font-size: 3vh; border: 0.5vh solid #fff; box-shadow: 0 0.6vh 1.6vh #0004; }
.podium .p.r1 .av { width: 7.6vh; height: 7.6vh; 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.2vh; }
.podium .p small { font-size: 1.2vh; color: #9b1238; text-transform: none; letter-spacing: 0; }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) scale(0.7); } }

/* isim etiketleri: hediye atanlar */
.tag { transform-origin: 0 0; }
.tag.t-gift { background: #3a0c1fdd; border-color: #ff8fb8; }
.tag.t-top { background: linear-gradient(180deg, #a07a12ee, #5e4308ee); border-color: #ffe08a; box-shadow: 0 0 1.2vh #ffd24a88; }
.tag .rk { flex: none; display: grid; place-items: center; width: 1.7vh; height: 1.7vh; border-radius: 50%; background: #fff3b0; color: #5e4308; font-size: 1.05vh; font-weight: 900; }

/* hediye kartı: üstte ortada, büyük */
.gifts { position: absolute; z-index: 5; left: 50%; top: 16.5vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.7vh; width: 96%; }
.gc { position: relative; display: flex; align-items: center; gap: 1vh; padding: 0.6vh 1.6vh 0.6vh 0.6vh; border-radius: 4vh; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000) 0%, #2b0a17f2 55%); border: 0.3vh solid var(--c); box-shadow: 0 0 2.4vh color-mix(in srgb, var(--c) 60%, transparent), 0 0.8vh 2vh #0008; animation: gcin 3.6s ease-out forwards; max-width: 100%; }
.gc .av { width: 4.8vh; height: 4.8vh; font-size: 2.2vh; border: 0.3vh solid #fff; }
.gc .t { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.gc .t span { font-size: 1.5vh; font-weight: 800; color: #ffffffd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22vh; }
.gc .t b { font-size: 2.2vh; font-weight: 900; color: var(--c); white-space: nowrap; text-shadow: 0 0.2vh 0 #0008; }
.gc img { width: 5.2vh; height: 5.2vh; object-fit: contain; filter: drop-shadow(0 0.4vh 0.8vh #0009); animation: gcgift 0.9s ease-out; }
.gc .x { font-style: normal; font-size: 2.6vh; font-weight: 900; color: #fff; text-shadow: 0 0.2vh 0 var(--c), 0 0 1vh var(--c); }
.gc .x:empty { display: none; }
@keyframes gcin { 0% { opacity: 0; transform: translateY(-1.5vh) scale(0.6); } 8% { opacity: 1; transform: scale(1.08); } 14% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-0.6vh); } }
@keyframes gcgift { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }

/* sahnede yükselen yazılar */
.ft { position: absolute; left: 0; top: 0; font-size: 2.6vh; font-weight: 900; color: var(--c); white-space: nowrap; pointer-events: none; -webkit-text-stroke: 0.18vh #2a0610; paint-order: stroke fill; text-shadow: 0 0.35vh 0 #2a0610, 0 0 1.6vh var(--c); z-index: 3000; will-change: transform; }
.ft.big { font-size: 3.4vh; font-style: italic; }

/* izleyenlerin konuşma balonu */
.bubble { position: absolute; left: 0; top: 0; max-width: 22vh; padding: 0.6vh 1.1vh; border-radius: 1.6vh; background: #fffdf7; color: #2a1018; font-size: 1.35vh; font-weight: 800; line-height: 1.2; text-align: center; box-shadow: 0 0.5vh 1.4vh #0006; border: 0.2vh solid #f0d8c0; z-index: 2900; pointer-events: none; will-change: transform; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -0.9vh; transform: translateX(-50%); border: 0.55vh solid transparent; border-top: 0.6vh solid #fffdf7; border-bottom: 0; }

/* gelin ve damadın başındaki etiket */
.ctag { position: absolute; left: 0; top: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2vh 0.5vh; max-width: 17vh; padding: 0.2vh 0.8vh 0.3vh 0.3vh; border-radius: 1.6vh; font-size: 1.3vh; font-weight: 900; white-space: nowrap; transform-origin: 0 0; z-index: 2700; box-shadow: 0 0.5vh 1.4vh #0007; will-change: transform; }
.ctag small { flex-basis: 100%; text-align: center; font-size: 1vh; letter-spacing: 0.06em; }
.ctag .av { width: 2.4vh; height: 2.4vh; font-size: 1.3vh; border: 0.2vh solid #fff; }
.ctag.gelin { background: linear-gradient(180deg, #fff4f8f2, #ffd3e3f2); color: #7a0f34; border: 0.25vh solid #ff8fb8; }
.ctag.damat { background: linear-gradient(180deg, #1d2238f2, #0d1020f2); color: #fff; border: 0.25vh solid #8fb8ff; }
.ctag.damat small { color: #bcd6ff; }
.ctag.gelin small { color: #d0306a; }