@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Cinzel:wght@700;900&display=swap');

/* Yöre Kapışması yayın grafiği teması.
   index.html'deki stilleri kimlik ve sınıf adlarıyla ezer; index.html'in yapısına dokunmaz.
   Görsel dil: gece düğünü, kilim ve çini motifi, altın varak, sıcak ampul ışığı.
   Güvenli alan: üst 120, sağ 140 ve alt 380 piksel TikTok arayüzüne ayrılır.
   Renk kuralı: sarı, kırmızı ve yeşil bir arada kullanılmaz; bu katmanda yeşil hiç yoktur.
   Telefon maliyeti: canlandırmalar yalnız transform ve opacity kullanır; backdrop-filter ve filter yoktur. */

:root {
  --gece: #0b0816; --gece2: #1a1030;
  --lake: rgba(16, 10, 28, .88);
  --altin: #f2c45a; --altin-acik: #fff0c2; --altin-koyu: #9a6a1f; --krem: #fff6e0; --soluk: #cdc2e2;
  --kina: #8e1b24; --kenar: rgba(242, 205, 120, .5);
  --varak: linear-gradient(180deg, #fff6d6 0%, #f7d684 34%, #d39b3a 58%, #f4d27c 80%, #b57d2c 100%);
  --yazi: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --logo: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --sol: 60px; --sag: 164px; --orta: 488px; /* içerik sütunu 60-916 px, ortası 488 px */
}

html, body { font-family: var(--yazi); }

/* ---------- Zemin: 3B gelmezse görünen yedek sahne ---------- */
#sahne {
  background:
    radial-gradient(ellipse 60% 26% at 50% 80%, rgba(196, 120, 40, .32), transparent 70%),
    var(--zemin) 0 0 / 120px 120px,
    linear-gradient(180deg, #07050f 0%, #170d29 55%, #2a170a 100%);
}
.isiklar span { width: 30px; height: 30px; margin: -6px; box-shadow: none;
  background: radial-gradient(circle, #fff6d6 0 22%, #f6c55a 34%, rgba(246, 197, 90, .25) 52%, transparent 70%); }
/* Sahne düzeni: kalıcı panolar üstte 124-600 piksel ve altta 1136-1534 piksel arasında durur; 600-1136 arası 3B sahneye kalır. */
#sahne.uc-boyut #etiketler {
  background: linear-gradient(180deg, rgba(7, 5, 15, .86) 0%, rgba(7, 5, 15, .6) 78%, transparent 100%) 0 0 / 100% 660px no-repeat,
              linear-gradient(0deg, rgba(7, 5, 15, .82) 0%, rgba(7, 5, 15, .5) 50%, transparent 100%) 0 100% / 100% 860px no-repeat;
}

/* ---------- Başlık logotipi ---------- */
header { top: 124px; left: var(--sol); right: var(--sag); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; }
/* Tek satır logo; iki yanında kilim süslemesi */
header h1 {
  flex: 0 0 100%; position: relative; height: 48px;
  font-size: 0; color: transparent; text-shadow: none; letter-spacing: 0;
  background: var(--suslem-sol) left center / 150px 20px no-repeat, var(--suslem-sag) right center / 150px 20px no-repeat;
}
/* Gölge kopyası: başlığın arkasında, altın harflerin kalıbı */
header::before, header h1::after {
  content: 'SANAL KÖY DÜĞÜNÜ'; position: absolute; left: 0; right: 0; top: 0;
  font: 900 44px/48px var(--logo); text-align: center; letter-spacing: .03em; white-space: nowrap;
}
header::before { top: 3px; color: #1a0c03; -webkit-text-stroke: 5px #1a0c03; }
header h1::after { background: var(--varak); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(90, 52, 10, .55); }

#sahnede {
  margin-top: 0; padding: 8px 20px 9px 18px; display: flex; align-items: center; gap: 12px;
  font: 600 30px/1 var(--yazi); letter-spacing: .02em; color: var(--krem); white-space: nowrap;
  background: var(--lake); border: 1.5px solid var(--kenar); border-radius: 10px;
}
#sahnede::before { content: ''; flex: 0 0 14px; height: 14px; background: var(--altin); transform: rotate(45deg); }
#sure {
  position: relative; margin-top: 0; min-width: 128px; padding: 4px 16px 5px; text-align: center;
  font: 800 42px/1 var(--yazi); color: var(--altin-acik); letter-spacing: .02em;
  background: linear-gradient(180deg, #2c1a3c, #140b20); border: 2px solid var(--altin); border-radius: 10px;
}
/* Son 15 saniye: index.html #sure'a "gerilim" sınıfını ekler (yapı değişikliği tarifine bakın) */
#sure.gerilim { color: #fff; border-color: #ff6b57; background: linear-gradient(180deg, #8c1420, #3c070d); animation: gerilim 1s infinite; }
#sure.gerilim::after { content: ''; position: absolute; inset: -4px; border: 3px solid #ff6b57; border-radius: 13px; animation: gerilim-halka 1s infinite ease-out; }
@keyframes gerilim { 0% { transform: scale(1.08) } 25%, 100% { transform: scale(1) } }
@keyframes gerilim-halka { 0% { opacity: .9; transform: scale(1) } 70%, 100% { opacity: 0; transform: scale(1.35, 1.6) } }

/* ---------- Puan tablosu ---------- */
/* Puan tablosu lake bir panoda durur; arka sıradaki dansçıların 3B ad etiketleri panonun altında kalır. */
#puanlar {
  top: 238px; left: 46px; right: 148px; gap: 3px; padding: 7px 18px 8px 14px; border-radius: 14px;
  background: var(--kose-ust-sol) left 5px top 5px / 24px no-repeat, var(--kose-ust-sag) right 5px top 5px / 24px no-repeat,
              var(--kose-alt-sol) left 5px bottom 5px / 24px no-repeat, var(--kose-alt-sag) right 5px bottom 5px / 24px no-repeat,
              rgba(12, 8, 22, .84);
  border: 1.5px solid var(--kenar);
}
.puan {
  position: relative; height: 42px; padding-left: 54px;
  grid-template-columns: 1fr auto; grid-template-areas: "ad sayi" "cubuk cubuk";
  column-gap: 12px; row-gap: 2px; align-items: end; font-size: 30px;
}
.puan[data-k="halay"]  { --y1: #f0604c; --y2: #a3202a; --y3: #4c0b12; --iz: rgba(163, 32, 42, .22); --simge: var(--s-halay);  --simge-renk: #fff1d6; }
.puan[data-k="horon"]  { --y1: #eef1f5; --y2: #8e98a6; --y3: #333a45; --iz: rgba(160, 170, 184, .16); --simge: var(--s-horon); --simge-renk: #1b2029; }
.puan[data-k="zeybek"] { --y1: #79a2ff; --y2: #2a4fb4; --y3: #0f1f55; --iz: rgba(60, 100, 220, .22); --simge: var(--s-zeybek); --simge-renk: #fff1d6; }
.puan[data-k="sira"]   { --y1: #f2b66c; --y2: #9c5f26; --y3: #40230b; --iz: rgba(200, 130, 60, .2);  --simge: var(--s-sira);   --simge-renk: #fff1d6; }
/* Yöre rozeti: çini yıldızı, yöre rengi, çalgı simgesi */
.puan::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 42px; height: 42px; margin-top: -21px;
  clip-path: polygon(50% 0%, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%, 100% 50%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50% 100%, 35.4% 85.4%, 14.6% 85.4%, 14.6% 64.6%, 0% 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%);
  background: var(--yildiz) center / 100% 100% no-repeat, radial-gradient(circle at 50% 30%, var(--y1), var(--y2) 58%, var(--y3));
}
.puan::after {
  content: ''; position: absolute; left: 10px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  background: var(--simge-renk); -webkit-mask: var(--simge) center / contain no-repeat; mask: var(--simge) center / contain no-repeat;
}
.puan > div:first-child { grid-area: ad; overflow: hidden; text-overflow: ellipsis; font: 700 30px/1 var(--yazi); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; color: var(--krem); }
.puan small { display: inline; margin-left: 12px; font: 500 30px/1 var(--yazi); text-transform: none; letter-spacing: .01em; color: var(--soluk); }
.puan .sayi { grid-area: sayi; font: 800 32px/1 var(--yazi); color: var(--krem); letter-spacing: .02em; }
.puan .cubuk {
  grid-area: cubuk; position: relative; height: 8px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .15)), var(--iz);
  border: 1.5px solid rgba(242, 205, 120, .32);
}
.puan .dolu {
  position: relative; overflow: hidden; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38) 0, rgba(255, 255, 255, 0) 48%),
              repeating-linear-gradient(135deg, transparent 0 9px, rgba(0, 0, 0, .14) 9px 11px),
              linear-gradient(90deg, var(--y2), var(--y1)) !important;
}
/* Akan ışık: dolu kısmın içinde soldan sağa geçen parıltı */
.puan .dolu::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 140px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 248, 220, .7), rgba(255, 255, 255, 0));
  transform: translateX(-160px); animation: akis 3.2s infinite cubic-bezier(.45, 0, .35, 1);
}
.puan:nth-child(2) .dolu::after { animation-delay: .5s; }
.puan:nth-child(3) .dolu::after { animation-delay: 1s; }
.puan:nth-child(4) .dolu::after { animation-delay: 1.5s; }
.puan:nth-child(5) .dolu::after { animation-delay: 2s; }
.puan:nth-child(6) .dolu::after { animation-delay: 2.5s; }
@keyframes akis { 0% { transform: translateX(-160px) } 60%, 100% { transform: translateX(880px) } }
/* Önde olan yöre: altın ad, altın sayı, parlak çerçeve */
.puan.onde .dolu { box-shadow: none; }
.puan.onde > div:first-child, .puan.onde .sayi { color: var(--altin-acik); }
.puan.onde .cubuk { border-color: var(--altin); }
.puan.onde .sayi::before {
  content: ''; display: inline-block; width: 24px; height: 24px; margin-right: 8px; vertical-align: 2px;
  background: var(--altin); clip-path: polygon(50% 0%, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%, 100% 50%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50% 100%, 35.4% 85.4%, 14.6% 85.4%, 14.6% 64.6%, 0% 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%);
}

/* ---------- Yönerge ---------- */
#yonerge {
  top: auto; bottom: 702px; left: var(--sol); right: var(--sag); padding: 6px 16px 7px; border-radius: 10px;
  font: 600 30px/1.2 var(--yazi); color: var(--soluk); letter-spacing: .01em; background: rgba(14, 9, 26, .74);
}
#yonerge b { color: var(--altin-acik); font-weight: 800; letter-spacing: .04em; }

/* ---------- Halaybaşı kartı ---------- */
#halaybasi {
  top: 442px; left: var(--orta); right: auto; width: max-content; max-width: 856px; height: 64px; padding: 0 24px 0 74px; gap: 12px;
  font: 600 30px/1 var(--yazi); color: var(--krem); border-radius: 32px;
  background: linear-gradient(180deg, rgba(74, 20, 30, .94), rgba(26, 10, 24, .94));
  border: 2px solid var(--altin); box-shadow: 0 0 0 5px rgba(16, 10, 28, .7), 0 0 0 6.5px rgba(242, 205, 120, .3);
}
#halaybasi::before {
  content: ''; position: absolute; left: 5px; top: 5px; width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #d8433a, #7e131b 70%); border: 3px solid var(--altin);
}
#halaybasi::after {
  content: ''; position: absolute; left: 15px; top: 14px; width: 30px; height: 30px; transform-origin: 15% 10%;
  background: var(--krem); -webkit-mask: var(--s-mendil) center / contain no-repeat; mask: var(--s-mendil) center / contain no-repeat;
  animation: mendil-salla 1.1s infinite alternate ease-in-out;
}
@keyframes mendil-salla { from { transform: rotate(-9deg) } to { transform: rotate(11deg) } }
#puanlar.kalabalik ~ #halaybasi { top: 532px; }
#kalkan { padding: 5px 12px 6px; font: 700 30px/1 var(--yazi); color: #9fdcff; border: 1.5px solid rgba(159, 220, 255, .6); border-radius: 8px; background: rgba(20, 40, 70, .55); }
#halaybasi.bos { opacity: 1; border-style: solid; border-color: rgba(242, 205, 120, .42); color: var(--soluk); background: var(--lake); box-shadow: none; }
#halaybasi.bos::before { background: radial-gradient(circle at 50% 32%, #4a2a3a, #24121e 70%); border-color: rgba(242, 205, 120, .45); }
#halaybasi.bos::after { background: rgba(255, 240, 210, .55); animation: none; transform: rotate(-6deg); }
/* Önerilen yapı: fotoğraf, "Halaybaşı" etiketi, ad ve jeton ayrı öğelerde */
#halaybasi:has(.bas) { padding-left: 78px; }
#halaybasi .bas {
  position: absolute; left: 5px; top: 4px; width: 54px; height: 54px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font: 800 30px/1 var(--yazi); color: #5a3a1a;
  background: #e8c39e; border: 3px solid var(--altin); box-shadow: 0 0 0 3px #4a141e;
}
#halaybasi .bas img { width: 100%; height: 100%; object-fit: cover; }
#halaybasi:has(.bas)::before { left: 40px; top: 36px; width: 26px; height: 26px; z-index: 1; border-width: 2px; }
#halaybasi:has(.bas)::after { left: 45px; top: 41px; width: 16px; height: 16px; z-index: 1; }
#halaybasi .hb-yazi { display: flex; align-items: baseline; gap: 10px; }
#halaybasi .hb-yazi small { font: 600 30px/1 var(--yazi); color: #f2cd78; letter-spacing: .03em; }
#halaybasi .hb-ad { font: 800 34px/1 var(--yazi); color: var(--altin-acik); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#halaybasi .hb-jeton { padding-left: 14px; border-left: 1.5px solid rgba(242, 205, 120, .35); font: 700 30px/1 var(--yazi); color: var(--krem); }

/* ---------- Nasıl oynanır satırı (#oyunSatiri) ---------- */
#oyunSatiri {
  top: auto; bottom: 582px; left: var(--sol); right: var(--sag); padding: 8px 18px 10px; border-radius: 12px;
  font: 600 30px/1.4 var(--yazi); color: var(--soluk); letter-spacing: .01em;
  background: var(--lake); border: 1.5px solid var(--kenar);
}
#oyunSatiri b { display: inline-flex; align-items: center; gap: 8px; margin: 0 4px; padding: 0 2px 1px; font: 800 32px/1.2 var(--yazi); letter-spacing: .05em; color: var(--krem); border-bottom: 4px solid var(--y2, var(--altin)); }
#oyunSatiri b::before { content: ''; width: 30px; height: 30px; background: var(--altin); -webkit-mask: var(--simge) center / contain no-repeat; mask: var(--simge) center / contain no-repeat; }
#oyunSatiri b[data-k="halay"]  { --y2: #c72f35; --simge: var(--s-halay); }
#oyunSatiri b[data-k="horon"]  { --y2: #9aa4b2; --simge: var(--s-horon); }
#oyunSatiri b[data-k="zeybek"] { --y2: #3d66d6; --simge: var(--s-zeybek); }
#oyunSatiri b[data-k="sira"]   { --y2: #b8763a; --simge: var(--s-sira); }

/* ---------- Sofra sorusu ve kültür bilgisi kartı (#kart) ---------- */
#kart {
  top: auto; bottom: 790px; left: var(--sol); right: var(--sag); padding: 22px 30px 24px; border-radius: 14px;
  background: var(--kose-ust-sol) left 7px top 7px / 30px no-repeat, var(--kose-ust-sag) right 7px top 7px / 30px no-repeat,
              var(--kose-alt-sol) left 7px bottom 7px / 30px no-repeat, var(--kose-alt-sag) right 7px bottom 7px / 30px no-repeat,
              linear-gradient(180deg, rgba(22, 30, 64, .96), rgba(10, 10, 28, .96));
  border: 2px solid var(--krem); box-shadow: 0 0 0 5px rgba(10, 10, 28, .85), 0 0 0 6.5px rgba(255, 246, 224, .35);
}
#kart small { font: 700 30px/1 var(--yazi); color: #f2cd78; letter-spacing: .06em; text-transform: uppercase; }
#kart p { font: 700 40px/1.22 var(--yazi); color: var(--krem); margin-top: 10px; }

/* ---------- "yapay zekâ" etiketleri (anons ve bildirim içinde) ---------- */
#anons .yz { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 30px/1 var(--yazi); color: var(--soluk); }
#anons .yz::before { content: ''; width: 24px; height: 24px; background: var(--altin); -webkit-mask: var(--s-yz) center / contain no-repeat; mask: var(--s-yz) center / contain no-repeat; }
.bildirim .yz { display: inline-block; margin-left: 12px; padding: 2px 10px 3px; font: 600 30px/1 var(--yazi); color: var(--soluk); border: 1px solid rgba(242, 205, 120, .4); border-radius: 6px; }

/* ---------- Bildirim kartları ---------- */
#bildirimler { top: 612px; left: var(--sol); right: var(--sag); gap: 10px; z-index: 13; }
.bildirim {
  position: relative; padding: 12px 28px 13px 52px; border-radius: 8px;
  font: 700 30px/1.1 var(--yazi); color: var(--krem); letter-spacing: .01em;
  background: linear-gradient(90deg, rgba(48, 18, 34, .95), rgba(18, 10, 30, .95));
  border: 1.5px solid rgba(242, 205, 120, .5);
  animation: bildirim-gir 3.2s forwards;
}
.bildirim::before { content: ''; position: absolute; left: 22px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--altin); transform: rotate(45deg); }
@keyframes bildirim-gir {
  0% { opacity: 0; transform: translateX(-36px) }
  9% { opacity: 1; transform: translateX(4px) }
  14%, 82% { opacity: 1; transform: none }
  100% { opacity: 0; transform: translateY(-8px) }
}

/* ---------- Anons kutusu ---------- */
#anons {
  top: auto; bottom: 790px; left: var(--sol); right: var(--sag); z-index: 13; gap: 26px; padding: 24px 30px 24px 24px; border-radius: 14px;
  background: var(--kose-ust-sol) left 7px top 7px / 30px no-repeat, var(--kose-ust-sag) right 7px top 7px / 30px no-repeat,
              var(--kose-alt-sol) left 7px bottom 7px / 30px no-repeat, var(--kose-alt-sag) right 7px bottom 7px / 30px no-repeat,
              linear-gradient(180deg, rgba(40, 18, 44, .96), rgba(14, 8, 24, .96));
  border: 2px solid var(--altin); box-shadow: 0 0 0 5px rgba(14, 8, 24, .85), 0 0 0 6.5px rgba(242, 205, 120, .4);
  transform: translateY(24px) scale(.98);
}
#anons.acik { transform: none; }
#anons .bas { flex: 0 0 104px; height: 104px; border: 4px solid var(--altin); box-shadow: 0 0 0 4px #160c22, 0 0 0 6px var(--kina); font: 800 46px/1 var(--yazi); }
#anons p { font: 600 34px/1.25 var(--yazi); color: var(--krem); }
#anons small { font: 700 30px/1.15 var(--yazi); color: #f2cd78; opacity: 1; margin-bottom: 8px; }
/* Sağ üst köşede ses dalgası rozeti: anonsun sesli okunduğunu gösterir */
#anons::before { content: ''; position: absolute; right: 22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: #160c22; border: 2px solid var(--altin); }
#anons::after {
  content: ''; position: absolute; right: 33px; top: -11px; width: 22px; height: 22px;
  background: var(--altin); -webkit-mask: var(--s-yz) center / contain no-repeat; mask: var(--s-yz) center / contain no-repeat;
}

/* ---------- Ortak hedef ---------- */
#hedef { top: auto; bottom: 498px; left: var(--sol); right: var(--sag); }
#hedef .yazi { align-items: center; font: 700 30px/1 var(--yazi); margin-bottom: 10px; color: var(--krem); letter-spacing: .02em; }
#hedef .yazi span:first-child { display: flex; align-items: center; gap: 12px; }
#hedef .yazi span:first-child::before {
  content: ''; width: 36px; height: 36px; background: var(--altin);
  -webkit-mask: var(--s-fisek) center / contain no-repeat; mask: var(--s-fisek) center / contain no-repeat;
}
#hedefSayi { font: 800 32px/1 var(--yazi); color: var(--altin-acik); }
#hedef .cubuk {
  position: relative; height: 28px; border-radius: 6px; border: 2px solid rgba(242, 205, 120, .6);
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), rgba(242, 205, 120, .3) calc(25% - 2px) 25%), rgba(10, 6, 18, .78);
}
#hedef .dolu {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 50%),
              repeating-linear-gradient(135deg, transparent 0 9px, rgba(90, 50, 0, .16) 9px 11px),
              linear-gradient(90deg, #9a5c18, #f2c45a 70%, #fff0c2);
}
#hedef .dolu::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 160px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 252, 235, .8), rgba(255, 255, 255, 0));
  animation: akis 3.6s .8s infinite cubic-bezier(.45, 0, .35, 1); transform: translateX(-180px);
}

/* ---------- Yapay zekâ etiketi ve müzik atfı: alt güvenli sınırın hemen üstünde ---------- */
#yzEtiket {
  top: auto; bottom: 432px; left: var(--orta); right: auto; transform: translateX(-50%); z-index: 14;
  padding: 8px 22px 9px 58px; white-space: nowrap; border-radius: 999px;
  font: 700 30px/1 var(--yazi); color: var(--krem); opacity: 1; letter-spacing: .02em;
  background: rgba(14, 9, 26, .86); border: 1.5px solid rgba(242, 205, 120, .55);
}
#yzEtiket::before {
  content: ''; position: absolute; left: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  background: var(--altin); -webkit-mask: var(--s-yz) center / contain no-repeat; mask: var(--s-yz) center / contain no-repeat;
}
#muzikAtif {
  top: auto; bottom: 386px; left: var(--sol); right: var(--sag); z-index: 14;
  font: 500 30px/1.12 var(--yazi); color: var(--soluk); opacity: .9; text-shadow: 0 2px 6px #000;
}

/* ---------- Tur afişi ---------- */
#afis {
  padding: 80px var(--sag) 80px var(--sol);
  font: 700 78px/1.12 var(--logo); color: #ffe6a6; letter-spacing: .01em;
  text-shadow: 0 4px 0 #3a1d05, 0 8px 24px rgba(0, 0, 0, .55);
  background: radial-gradient(ellipse 80% 60% at 45% 50%, rgba(10, 6, 18, .3), rgba(10, 6, 18, .82) 75%);
}
#afis::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 400px; margin-top: -200px; z-index: -1;
  background: var(--kilim) center top / 48px 16px repeat-x, var(--kilim) center bottom / 48px 16px repeat-x,
              linear-gradient(90deg, rgba(100, 14, 24, 0), rgba(110, 16, 26, .94) 16%, rgba(146, 26, 36, .97) 46%, rgba(110, 16, 26, .94) 84%, rgba(100, 14, 24, 0));
  transform: scaleX(.25); opacity: 0; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
#afis::after {
  content: ''; position: absolute; left: calc(var(--orta) - 60px); top: 50%; width: 120px; height: 120px; margin-top: -262px;
  background: var(--yildiz) center / 100% no-repeat, radial-gradient(circle, #2a0c14 0 55%, transparent 56%);
  transform: scale(.4) rotate(-45deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
#afis.acik::before { transform: none; opacity: 1; }
#afis.acik::after { transform: none; }

/* ---------- Mola perdesi ---------- */
#mola {
  padding: 80px var(--sag) 80px var(--sol); flex-direction: column;
  font: 700 52px/1.3 var(--logo); color: var(--krem);
  background:
    var(--kilim) center 132px / 48px 16px repeat-x,
    radial-gradient(ellipse 70% 40% at 45% 50%, rgba(255, 190, 110, .16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(255, 255, 255, .05) 34px, rgba(0, 0, 0, .3) 68px),
    linear-gradient(180deg, #520f19, #2c0810 62%, #14040a);
}
#mola::before {
  content: ''; width: 150px; height: 150px; margin-bottom: 36px;
  background: var(--yildiz) center / 100% no-repeat, radial-gradient(circle, #2a0c14 0 55%, transparent 56%);
}
#mola::after { content: 'Yöre Kapışması'; margin-top: 40px; font: 700 34px/1 var(--logo); letter-spacing: .3em; color: #f2cd78; }

/* ---------- Ses açma düğmesi: sahne ölçeğinin dışında, telefon pikseliyle ---------- */
#sesac {
  top: 1.2vh; /* logonun üstünde durmasın; düğme yalnız yayını açan cihazda, ilk dokunuşa kadar görünür */ left: 50%; transform: translateX(-50%); align-items: center; gap: 10px;
  padding: 11px 20px 11px 16px; border-radius: 999px; white-space: nowrap;
  font: 700 17px/1 var(--yazi); letter-spacing: .03em; color: var(--krem);
  background: rgba(16, 10, 28, .94); border: 1.5px solid var(--altin);
}
#sesac::before { content: ''; flex: 0 0 22px; height: 22px; background: var(--altin); -webkit-mask: var(--s-ses) center / contain no-repeat; mask: var(--s-ses) center / contain no-repeat; }
#sesac::after { content: ''; position: absolute; inset: -2px; border-radius: 999px; border: 2px solid var(--altin); animation: sesac-halka 1.6s infinite ease-out; pointer-events: none; }
@keyframes sesac-halka { 0% { opacity: .8; transform: scale(1) } 80%, 100% { opacity: 0; transform: scale(1.18, 1.5) } }

/* ---------- 3B sahnedeki ad etiketleri (yalnız renk ve yazı tipi) ---------- */
.etiket3b { font-family: var(--yazi); font-weight: 700; background: rgba(14, 9, 26, .74); border: 1px solid rgba(242, 205, 120, .22); border-radius: 8px; }
.etiket3b.hediyeli { color: var(--altin-acik); border: 2px solid var(--altin); }
.etiket3b.basi { background: linear-gradient(180deg, #8c1a24, #4c0a12); border: 2px solid var(--altin); color: var(--altin-acik); }

/* ==================== Yükleme ekranı (arayuz/yukleme.js) ==================== */
html.yukleniyor #pist, html.yukleniyor .isiklar { visibility: hidden; }
html.yukleniyor #bildirimler { top: 1356px; }
html.yukleniyor .bildirim:not(:last-child) { display: none; }
#yukleme {
  position: absolute; inset: 0; z-index: 12; overflow: hidden; transition: opacity .9s ease;
  background:
    radial-gradient(ellipse 62% 34% at 45% 36%, rgba(170, 96, 34, .3), transparent 72%),
    var(--zemin) 0 0 / 120px 120px,
    linear-gradient(180deg, #07050f 0%, #160c27 55%, #26140a 100%);
}
#yukleme.bitti { opacity: 0; pointer-events: none; }
#yukleme .y-tel { position: absolute; left: 0; top: 0; width: 1080px; height: 420px; }
#yukleme .y-ampul { position: absolute; width: 22px; height: 30px; margin: 0 0 0 -11px; }
#yukleme .y-ampul::before { content: ''; position: absolute; left: 8px; top: -8px; width: 6px; height: 10px; border-radius: 2px; background: #3a2a1a; }
#yukleme .y-ampul i {
  position: absolute; inset: 0; border-radius: 50% 50% 46% 46%; opacity: .28; transition: opacity .15s;
  background: radial-gradient(circle at 50% 60%, #fff6d6 0 24%, #f6c55a 52%, #a8742a 82%);
}
#yukleme .y-ampul b {
  position: absolute; left: 50%; top: 60%; width: 150px; height: 150px; margin: -75px 0 0 -75px; opacity: 0;
  background: radial-gradient(circle, rgba(255, 214, 130, .55) 0, rgba(255, 186, 90, .16) 36%, rgba(255, 186, 90, 0) 70%);
}
#yukleme .y-ampul.yandi i { opacity: 1; }
#yukleme .y-ampul.yandi b { animation: ampul-yan .7s forwards, ampul-titre 3.4s 1s infinite; animation-delay: 0s, var(--g, 1s); }
@keyframes ampul-yan { 0% { opacity: 0 } 30% { opacity: 1 } 45% { opacity: .35 } 65%, 100% { opacity: 1 } }
@keyframes ampul-titre { 0%, 100% { opacity: 1 } 50% { opacity: .72 } }

/* Davul vuruşuyla atan madalyon: halay ritmi D..tD.t. dakikada 104 vuruş, ölçü 2,308 saniye */
#yukleme .y-hale {
  position: absolute; left: 488px; top: 640px; width: 760px; height: 760px; margin: -380px 0 0 -380px;
  background: radial-gradient(circle, rgba(255, 190, 100, .3) 0, rgba(200, 110, 40, .12) 40%, transparent 68%);
  animation: hale 2.3077s infinite linear;
}
#yukleme .y-madalyon { position: absolute; left: 488px; top: 640px; width: 420px; height: 420px; margin: -210px 0 0 -210px; animation: davul 2.3077s infinite linear; will-change: transform; }
#yukleme .y-madalyon svg { width: 100%; height: 100%; display: block; }
#yukleme .y-dalga {
  position: absolute; left: 488px; top: 640px; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 50%;
  border: 3px solid rgba(242, 205, 120, .7); opacity: 0; animation: dalga 1.15385s infinite cubic-bezier(.1, .6, .3, 1);
}
@keyframes davul {
  0% { transform: scale(1.075) } 9% { transform: scale(1) }
  37.4% { transform: scale(1) } 37.5% { transform: scale(1.035) } 44% { transform: scale(1) }
  49.9% { transform: scale(1) } 50% { transform: scale(1.075) } 59% { transform: scale(1) }
  74.9% { transform: scale(1) } 75% { transform: scale(1.035) } 82%, 100% { transform: scale(1) }
}
@keyframes hale {
  0% { opacity: 1 } 14% { opacity: .5 } 37.4% { opacity: .5 } 37.5% { opacity: .8 } 46% { opacity: .5 }
  49.9% { opacity: .5 } 50% { opacity: 1 } 64% { opacity: .5 } 74.9% { opacity: .5 } 75% { opacity: .8 } 84%, 100% { opacity: .5 }
}
@keyframes dalga { 0% { opacity: .75; transform: scale(.98) } 100% { opacity: 0; transform: scale(1.55) } }

#yukleme .y-logo { position: absolute; top: 880px; left: var(--sol); right: var(--sag); height: 160px; text-align: center; }
#yukleme .y-ust { display: block; height: 40px; margin: 0 auto; width: 600px; font: 700 36px/40px var(--logo); letter-spacing: .5em; text-indent: .5em; color: #f4cf78;
  background: var(--suslem-sol) left center / 190px 24px no-repeat, var(--suslem-sag) right center / 190px 24px no-repeat; }
#yukleme .y-golge, #yukleme .y-ana { position: absolute; left: 0; right: 0; top: 36px; font: 900 100px/1.08 var(--logo); letter-spacing: .015em; white-space: nowrap; }
#yukleme .y-golge { top: 42px; color: #1a0c03; -webkit-text-stroke: 7px #1a0c03; }
#yukleme .y-ana { background: var(--varak); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(90, 52, 10, .55); }
#yukleme .y-serit { position: absolute; left: calc(var(--orta) - 300px); top: 1052px; width: 600px; height: 16px; background: var(--kilim) center / 48px 16px repeat-x; }
#yukleme .y-baslik { position: absolute; top: 1092px; left: var(--sol); right: var(--sag); text-align: center; font: 700 56px/1 var(--yazi); letter-spacing: .14em; text-indent: .14em; text-transform: uppercase; color: var(--krem); }
#yukleme .y-adim { position: absolute; top: 1162px; left: var(--sol); right: var(--sag); text-align: center; font: 500 34px/1 var(--yazi); color: var(--soluk); transition: opacity .35s; }
#yukleme .y-adim.gizli { opacity: 0; }
#yukleme .y-komut { position: absolute; top: 1232px; left: var(--sol); right: var(--sag); display: flex; justify-content: center; gap: 12px; }
#yukleme .y-cip {
  display: flex; align-items: center; gap: 10px; padding: 9px 18px 10px 12px; border-radius: 8px;
  font: 800 32px/1 var(--yazi); letter-spacing: .05em; color: var(--krem);
  background: linear-gradient(180deg, var(--y2), var(--y3)); border: 1.5px solid rgba(242, 205, 120, .55);
}
#yukleme .y-cip::before { content: ''; width: 34px; height: 34px; background: var(--simge-renk); -webkit-mask: var(--simge) center / contain no-repeat; mask: var(--simge) center / contain no-repeat; }
#yukleme .y-cip.halay  { --y2: #a3202a; --y3: #4c0b12; --simge: var(--s-halay);  --simge-renk: #fff1d6; }
#yukleme .y-cip.horon  { --y2: #6f7988; --y3: #262c35; --simge: var(--s-horon);  --simge-renk: #fff1d6; }
#yukleme .y-cip.zeybek { --y2: #2a4fb4; --y3: #0f1f55; --simge: var(--s-zeybek); --simge-renk: #fff1d6; }
#yukleme .y-cip.sira   { --y2: #9c5f26; --y3: #40230b; --simge: var(--s-sira);   --simge-renk: #fff1d6; }
#yukleme .y-alt { position: absolute; top: 1300px; left: var(--sol); right: var(--sag); text-align: center; font: 600 30px/1 var(--yazi); color: var(--soluk); }

/* @simgeler-basla: arayuz/*.svg dosyalarından üretildi, elle düzenlemeyin */
:root {
  --s-halay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 28v16c0 4 9.4 7 21 7s21-3 21-7V28' stroke-width='4.5'/%3E%3Cpath d='M11 32l7 12 7-11 7 13 7-13 7 11 7-12' stroke-width='3'/%3E%3Cpath d='M38 21L53 8' stroke-width='4.5'/%3E%3Cpath d='M26 21L12 7' stroke-width='3'/%3E%3C/g%3E%3Cellipse cx='32' cy='28' rx='21' ry='6.5'/%3E%3Ccircle cx='54.5' cy='6.5' r='4.5'/%3E%3C/svg%3E");
  --s-horon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='64' height='64' fill='%23fff'/%3E%3Cpath d='M5 47L59 27' stroke='%23000' stroke-width='7'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M32 21c7.5 0 11 8 11 18.5S38.5 57 32 57s-11-7-11-17.5S24.5 21 32 21z'/%3E%3Crect x='28.5' y='5' width='7' height='18' rx='2.5'/%3E%3Crect x='23' y='8.5' width='18' height='3' rx='1.5'/%3E%3Crect x='23' y='14' width='18' height='3' rx='1.5'/%3E%3C/g%3E%3Cpath d='M5 47L59 27' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M4 43.5Q30 30 58 23' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --s-zeybek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='64' height='64' fill='%23fff'/%3E%3Ccircle cx='20' cy='45' r='3.6' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Cellipse cx='19' cy='46' rx='15' ry='10.5' transform='rotate(-45 19 46)' mask='url(%23m)'/%3E%3Cpath d='M27 38L52 13' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M50 9l6 6M47 6l3 3M56 15l3 3M53 4l3 3M59 10l3 3' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M52 7l5 5' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  --s-sira: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='64' height='64' fill='%23fff'/%3E%3Ccircle cx='26' cy='38' r='5.5' fill='%23000'/%3E%3Ccircle cx='26' cy='38' r='3' fill='%23fff'/%3E%3Ccircle cx='26' cy='38' r='1.6' fill='%23000'/%3E%3Cpath d='M14 50l9-3' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='26' cy='40' r='20' mask='url(%23m)'/%3E%3Cpath d='M38 26L49 14' stroke='%23000' stroke-width='6.5' stroke-linecap='round'/%3E%3Cpath d='M49 13l9 5' stroke='%23000' stroke-width='5.5' stroke-linecap='round'/%3E%3Cpath d='M52 11l1.5-3M56 13.5l1.5-3M53 18l-1.5 3M57 20l-1.5 3' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --s-mendil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='64' height='64' fill='%23fff'/%3E%3Cpath d='M33 22l5 6-5 6-5-6zM21 30l3 4-3 4-3-4zM45 30l3 4-3 4-3-4z' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M7 9c9-4 18 3 27 0s16-5 23-1c-2 9 2 18-1 27s1 15-3 21c-9-3-17 3-26 0S12 54 8 56c2-8-3-16 0-24S5 17 7 9z' mask='url(%23m)'/%3E%3Cpath d='M8 58l-1 5M15 57l-1 5M22 58l0 5M29 58l1 5M36 58l1 5M43 57l2 5M50 56l2 5' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --s-fisek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%23000' stroke-linecap='round' stroke-width='4'%3E%3Cpath d='M32 4v12M32 48v12M4 32h12M48 32h12M12.2 12.2l8.5 8.5M43.3 43.3l8.5 8.5M12.2 51.8l8.5-8.5M43.3 20.7l8.5-8.5'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-linecap='round' stroke-width='2.4'%3E%3Cpath d='M21.3 6.1l2.3 5.5M40.4 52.4l2.3 5.5M6.1 42.7l5.5-2.3M52.4 23.6l5.5-2.3M42.7 6.1l-2.3 5.5M23.6 52.4l-2.3 5.5M6.1 21.3l5.5 2.3M52.4 40.4l5.5 2.3'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='7'/%3E%3C/svg%3E");
  --s-ses: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 24h11l15-13v42L19 40H8z'/%3E%3Cpath d='M42 23c4 5 4 13 0 18M49 16c8 9 8 23 0 32' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --s-yz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%23000' stroke-width='5.5' stroke-linecap='round'%3E%3Cpath d='M8 28v8M18 20v24M28 12v40M38 22v20M48 16v32M58 27v10'/%3E%3C/g%3E%3C/svg%3E");
  --yildiz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 63.5,17.5 82.5,17.5 82.5,36.5 96,50 82.5,63.5 82.5,82.5 63.5,82.5 50,96 36.5,82.5 17.5,82.5 17.5,63.5 4,50 17.5,36.5 17.5,17.5 36.5,17.5' fill='none' stroke='%23f6d27a' stroke-width='4' stroke-linejoin='round'/%3E%3Cpolygon points='50,12 60.2,22.2 74.6,22.2 74.6,36.6 84.8,46.8 84.8,53.2 74.6,63.4 74.6,77.8 60.2,77.8 50,88 39.8,77.8 25.4,77.8 25.4,63.4 15.2,53.2 15.2,46.8 25.4,36.6 25.4,22.2 39.8,22.2' fill='none' stroke='%238a5a14' stroke-width='1.6' stroke-linejoin='round' opacity='.9'/%3E%3C/svg%3E");
  --kilim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Crect width='48' height='16' fill='none'/%3E%3Cpath d='M0 1h48M0 15h48' stroke='%23c9963c' stroke-width='1.4'/%3E%3Cpath d='M12 3l7 5-7 5-7-5z' fill='%23f2cd78'/%3E%3Cpath d='M12 6l2.8 2-2.8 2-2.8-2z' fill='%238e1b24'/%3E%3Cpath d='M36 4.5l4.5 3.5-4.5 3.5-4.5-3.5z' fill='none' stroke='%23f2cd78' stroke-width='1.6'/%3E%3Cpath d='M24 8h0M0 8h1.5M46.5 8h1.5' stroke='%23f2cd78' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='8' r='1.4' fill='%23f2cd78'/%3E%3C/svg%3E");
  --zemin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg opacity='.07'%3E%3Cg fill='none' stroke='%23f2cd78' stroke-width='1.5'%3E%3Cpath d='M60 8l28 52-28 52-28-52z'/%3E%3Cpath d='M60 30l16 30-16 30-16-30z'/%3E%3Cpath d='M0 8l28 52L0 112M120 8L92 60l28 52'/%3E%3C/g%3E%3Cg fill='%23f2cd78'%3E%3Cpath d='M60 52l5 8-5 8-5-8z'/%3E%3Cpath d='M28 56l4 4-4 4-4-4zM92 56l4 4-4 4-4-4z'/%3E%3C/g%3E%3Cpath d='M52 18h16M52 102h16M44 4l-8 8M76 4l8 8M44 116l-8-8M76 116l8-8' stroke='%23f2cd78' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --suslem-sol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'%3E%3Cpath d='M0 10h118' stroke='%23c9963c' stroke-width='1.6'/%3E%3Cpath d='M40 10h78' stroke='%23f2cd78' stroke-width='2.2'/%3E%3Cpath d='M126 2l8 8-8 8-8-8z' fill='%23f2cd78'/%3E%3Cpath d='M126 6.5l3.5 3.5-3.5 3.5-3.5-3.5z' fill='%238e1b24'/%3E%3Cpath d='M142 5l5 5-5 5-5-5z' fill='%23f2cd78'/%3E%3Ccircle cx='155' cy='10' r='2.4' fill='%23f2cd78'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%23c9963c'/%3E%3Ccircle cx='20' cy='10' r='1.4' fill='%23c9963c'/%3E%3C/svg%3E");
  --suslem-sag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'%3E%3Cg transform='matrix(-1 0 0 1 160 0)'%3E%3Cpath d='M0 10h118' stroke='%23c9963c' stroke-width='1.6'/%3E%3Cpath d='M40 10h78' stroke='%23f2cd78' stroke-width='2.2'/%3E%3Cpath d='M126 2l8 8-8 8-8-8z' fill='%23f2cd78'/%3E%3Cpath d='M126 6.5l3.5 3.5-3.5 3.5-3.5-3.5z' fill='%238e1b24'/%3E%3Cpath d='M142 5l5 5-5 5-5-5z' fill='%23f2cd78'/%3E%3Ccircle cx='155' cy='10' r='2.4' fill='%23f2cd78'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%23c9963c'/%3E%3Ccircle cx='20' cy='10' r='1.4' fill='%23c9963c'/%3E%3C/g%3E%3C/svg%3E");
  --kose-ust-sol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M2 38V8a6 6 0 0 1 6-6h30' fill='none' stroke='%23f2cd78' stroke-width='2.4'/%3E%3Cpath d='M8 32V12a4 4 0 0 1 4-4h20' fill='none' stroke='%23a8742a' stroke-width='1.2'/%3E%3Cpath d='M14 8l4 6-4 6-4-6z' transform='translate(0 0)' fill='%23f2cd78'/%3E%3Ccircle cx='14' cy='14' r='2' fill='%232a1606'/%3E%3C/svg%3E");
  --kose-ust-sag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='matrix(-1 0 0 1 40 0)'%3E%3Cpath d='M2 38V8a6 6 0 0 1 6-6h30' fill='none' stroke='%23f2cd78' stroke-width='2.4'/%3E%3Cpath d='M8 32V12a4 4 0 0 1 4-4h20' fill='none' stroke='%23a8742a' stroke-width='1.2'/%3E%3Cpath d='M14 8l4 6-4 6-4-6z' transform='translate(0 0)' fill='%23f2cd78'/%3E%3Ccircle cx='14' cy='14' r='2' fill='%232a1606'/%3E%3C/g%3E%3C/svg%3E");
  --kose-alt-sol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='matrix(1 0 0 -1 0 40)'%3E%3Cpath d='M2 38V8a6 6 0 0 1 6-6h30' fill='none' stroke='%23f2cd78' stroke-width='2.4'/%3E%3Cpath d='M8 32V12a4 4 0 0 1 4-4h20' fill='none' stroke='%23a8742a' stroke-width='1.2'/%3E%3Cpath d='M14 8l4 6-4 6-4-6z' transform='translate(0 0)' fill='%23f2cd78'/%3E%3Ccircle cx='14' cy='14' r='2' fill='%232a1606'/%3E%3C/g%3E%3C/svg%3E");
  --kose-alt-sag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='matrix(-1 0 0 -1 40 40)'%3E%3Cpath d='M2 38V8a6 6 0 0 1 6-6h30' fill='none' stroke='%23f2cd78' stroke-width='2.4'/%3E%3Cpath d='M8 32V12a4 4 0 0 1 4-4h20' fill='none' stroke='%23a8742a' stroke-width='1.2'/%3E%3Cpath d='M14 8l4 6-4 6-4-6z' transform='translate(0 0)' fill='%23f2cd78'/%3E%3Ccircle cx='14' cy='14' r='2' fill='%232a1606'/%3E%3C/g%3E%3C/svg%3E");
}
/* @simgeler-bitir */


/* ---------- Etkileşim katmanı (sunucu ve sahne ajanı ekledi) ----------
   Başlık: sahnede "kapışma" yerine "düğün" kullanılır (etkileşim tasarımı 3.3).
   #masa: düğün sahibi, meydanı açan, gecenin müdavimi, şehirler ve takı panosu. Kartla aynı yerdedir;
   kart ya da anons açıkken görünmez. #kural: "Düğünde yeriniz" kural kartı. */
#masa {
  top: auto; bottom: 790px; left: var(--sol); right: var(--sag); max-height: 230px; padding: 16px 26px; border-radius: 14px;
  font: 600 30px/1.25 var(--yazi); color: var(--krem);
  background: linear-gradient(180deg, rgba(22, 30, 64, .94), rgba(10, 10, 28, .94)); border: 1.5px solid var(--kenar);
}
#masa b { font-weight: 800; color: #f2cd78; letter-spacing: .02em; }
#kural {
  top: 330px; left: var(--sol); right: var(--sag); border-radius: 14px; font: 600 31px/1.3 var(--yazi); color: var(--krem);
  background: linear-gradient(180deg, rgba(22, 16, 44, .97), rgba(10, 8, 22, .97)); border: 2px solid var(--altin);
  box-shadow: 0 0 0 5px rgba(10, 8, 22, .85), 0 0 0 6.5px rgba(242, 205, 120, .4);
}
#kural h2 { font: 900 50px/1.1 var(--logo); color: var(--altin-acik); }
#kural h3 { font: 700 34px/1.2 var(--yazi); color: #f2cd78; text-transform: uppercase; letter-spacing: .06em; }
#afis .dokum { font: 700 40px/1.35 var(--yazi); color: var(--krem); }
#kart.sunucu { border-color: #8fb8ff; box-shadow: 0 0 0 5px rgba(10, 10, 28, .85), 0 0 0 6.5px rgba(143, 184, 255, .45); }
#kart.sunucu small { color: #8fb8ff; }

/* Altı oyun: karşılama ve roman havası. Yeşil kullanılmaz. Simgesi henüz olmayan oyunda rozetin simge katmanı gizlenir. */
/* Karşılama klarnetle, roman havası darbukayla gösterilir. Bütün satırlar tek düzendedir; altı oyun 238-522 piksele sığar. */
.puan[data-k="karsilama"] { --y1: #b48cf0; --y2: #6b3fb0; --y3: #2a1450; --iz: rgba(120, 70, 200, .22); --simge: var(--s-karsilama); --simge-renk: #fff1d6; }
.puan[data-k="roman"]     { --y1: #f08cc4; --y2: #b03f82; --y3: #4a1236; --iz: rgba(200, 70, 140, .22); --simge: var(--s-roman);     --simge-renk: #fff1d6; }
#oyunSatiri b[data-k="karsilama"] { --y2: #8e5fd8; --simge: var(--s-karsilama); }
#oyunSatiri b[data-k="roman"] { --y2: #d4559f; --simge: var(--s-roman); }
#anons p .yz { display: flex; }

/* Karşılama (klarnet) ve Roman havası (darbuka) simgeleri */
:root {
  --s-karsilama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M47 9L19 43' stroke='%23000' stroke-width='6.5' stroke-linecap='round'/%3E%3Cpath d='M50 4l7 6-4 4-7-6z'/%3E%3Cpath d='M20 39l6 6-11 15c-3 2-9-3-7-6z'/%3E%3Cg fill='%23000'%3E%3Ccircle cx='40' cy='22' r='2.6'/%3E%3Ccircle cx='34' cy='29' r='2.6'/%3E%3Ccircle cx='28' cy='36' r='2.6'/%3E%3C/g%3E%3Cpath d='M44 13l6 5M38 20l5 4' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --s-roman: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='64' height='64' fill='%23fff'/%3E%3Cpath d='M19 20l4 6M27 20l2 6M37 20l-2 6M45 20l-4 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Cellipse cx='32' cy='10' rx='18' ry='5'/%3E%3Cpath d='M14 12c0 9 8 15 12 21l-5 22h22l-5-22c4-6 12-12 12-21-4 3-11 4-18 4s-14-1-18-4z' mask='url(%23m)'/%3E%3Crect x='18' y='55' width='28' height='5' rx='2.5'/%3E%3C/svg%3E");
}