/* Kostümlü Tayfa · yapım aşamasında sayfası
   Görsel dil kanalın yayın grafiklerinden: koyu lacivert zemin, sarı ve kırmızı vurgu,
   yoğun italik başlıklar, eğik paneller, soldan perde açılışı. Logo tek parça ve sabittir.
   Yatay ekranda logo kapaktaki eski yerine oturur; dikeyde üstte durur. */

:root {
  --laci: #0e1330;
  --laci2: #1b2358;
  --sari: #ffd23a;
  --kirmizi: #e8412f;
  --beyaz: #ffffff;
  --gok: #59acf4;
  --gok-koyu: #2f86e6;

  --baslik: "Barlow Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --govde: "Nunito", "Avenir Next", system-ui, sans-serif;

  --kenar: clamp(16px, 4vw, 72px);
  --bant-y: clamp(36px, 4.6svh, 48px);
  --ikaz-y: 6px;
  --alt-bosluk: calc(var(--bant-y) + var(--ikaz-y) + env(safe-area-inset-bottom));
  --gecis: cubic-bezier(.2, .8, .2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

body,
h1,
h2,
p,
ul,
figure { margin: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  min-height: 100vh;
  background: var(--laci);
  color: var(--beyaz);
  font-family: var(--govde);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

.gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Sahne: tam ekran, kapak görseli arkada ---- */
.sahne {
  --oy: .6; /* kapağın dikey hizası; logonun konum hesabı da bunu kullanır */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  height: 100svh;
  padding: max(20px, env(safe-area-inset-top)) 16px calc(var(--alt-bosluk) + 16px);
  overflow: hidden;
  isolation: isolate;
  container-type: size;
}

.sahne__fon,
.sahne__fon img,
.sahne__perde {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sahne__fon { z-index: -2; }

.sahne__fon img {
  object-fit: cover;
  object-position: 48% 100%;
}

/* dikeyde yazının arkasını gökyüzü rengiyle yumuşatır */
.sahne__perde {
  z-index: -1;
  background: linear-gradient(180deg, rgb(47 134 230 / .95) 0%, rgb(76 160 240 / .84) 30%, rgb(89 172 244 / 0) 56%);
}

/* ---- Logo ---- */
/* tek parça, sabit logo (onbellek/03-ilk-sponsor/logo/tam.png, 1060×250) */
.logo {
  position: relative;
  flex: none;
  width: min(92vw, 620px);
  aspect-ratio: 1060 / 250;
  filter: drop-shadow(0 8px 16px rgb(10 20 60 / .35));
}

.logo img {
  width: 100%;
  height: auto;
}

/* ---- Yayın grafikleri: eğik paneller ---- */
.yayin,
.soz-kutu {
  font-size: clamp(14px, 4.2vw, 18px);
  filter: drop-shadow(0 10px 18px rgb(5 8 25 / .45));
}

.yayin {
  display: grid;
  justify-items: center;
  gap: .4em;
  width: min(100%, 560px);
  margin-top: clamp(10px, 2.6svh, 28px);
}

.soz-kutu {
  display: flex;
  justify-content: center;
  width: min(100%, 560px);
  margin-top: .4em;
}

/* soldan perde açılışı (yayinGrafikleri.js'teki perde) */
.perde { animation: perde-ac .7s var(--gecis) var(--gecikme) both; }
.perde--1 { --gecikme: .2s; }
.perde--2 { --gecikme: .38s; }
.perde--3 { --gecikme: .56s; }

@keyframes perde-ac {
  0% { clip-path: inset(0 100% 0 0); transform: translateX(-6%); opacity: 0; }
  30% { opacity: 1; }
  99.9% { clip-path: inset(0 0 0 0); transform: none; }
  100% { clip-path: none; transform: none; opacity: 1; }
}

.yayin__ust,
.yayin__alt,
.soz { clip-path: polygon(.42em 0, 100% 0, calc(100% - .42em) 100%, 0 100%); }

.yayin__ust {
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .16em .85em .12em .6em;
  background: var(--laci);
  color: var(--beyaz);
  font: italic 800 clamp(26px, 8.6vw, 58px) / 1 var(--baslik);
  white-space: nowrap;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* inşaat ikaz şeridi: yarış grafiklerindeki damalı bayrağın yerini tutar */
.ikaz {
  flex: none;
  width: .72em;
  height: .72em;
  border: .06em solid var(--sari);
  background: repeating-linear-gradient(-45deg, var(--sari) 0 .12em, var(--laci) .12em .24em);
}

.yayin__alt {
  padding: .3em 1.1em .26em;
  background: var(--sari);
  color: var(--laci);
  font: italic 800 clamp(19px, 5.6vw, 30px) / 1 var(--baslik);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ---- Karakter sözleri ---- */
.soz {
  width: min(100%, 26em);
  padding: .7em 1.4em .75em;
  background: rgb(255 255 255 / .96);
  color: var(--laci);
}

.soz__liste {
  display: grid;
  padding: 0;
  list-style: none;
}

.soz__oge {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .3s, transform .3s, visibility 0s .3s;
}

.soz__oge.is-aktif {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .35s .12s, transform .35s var(--gecis) .12s;
}

.soz__kim {
  display: inline-block;
  margin-bottom: .4em;
  padding: .32em .7em .26em;
  background: var(--kim-zemin, var(--laci));
  color: var(--kim-yazi, var(--beyaz));
  font: italic 800 .82em / 1 var(--baslik);
  letter-spacing: .05em;
  text-transform: uppercase;
  clip-path: polygon(.3em 0, 100% 0, calc(100% - .3em) 100%, 0 100%);
}

.soz__metin {
  display: block;
  font-weight: 800;
  line-height: 1.3;
  quotes: "“" "”";
}

/* etiket renkleri karakterlerin kostümlerinden */
.soz__oge--dede { --kim-zemin: #7ed957; --kim-yazi: var(--laci); }
.soz__oge--panda { --kim-zemin: #ff8cc6; --kim-yazi: var(--laci); }
.soz__oge--tavsan { --kim-zemin: #d6372a; }
.soz__oge--kavgaci { --kim-zemin: #2b6be0; }
.soz__oge--rehber { --kim-zemin: #ff9a2e; --kim-yazi: var(--laci); }

/* ---- Bağlantılar ---- */
.baglantilar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-top: auto;
  padding-top: 16px;
  animation: belir .6s var(--gecis) .7s both;
}

@keyframes belir {
  from { opacity: 0; transform: translateY(10px); }
}

.dugme {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 44px;
  padding: 0 1.15em;
  background: var(--laci);
  color: var(--beyaz);
  font: 800 15px / 1 var(--govde);
  text-decoration: none;
  transform: skewX(-12deg);
  box-shadow: 0 8px 18px rgb(5 8 25 / .35);
  transition: background-color .2s, color .2s, transform .2s var(--gecis);
}

.dugme > * { transform: skewX(12deg); }

.dugme__simge {
  flex: none;
  width: 1.35em;
  height: 1.35em;
}

.dugme--youtube .dugme__simge { color: #ff3b30; }
.dugme--instagram .dugme__simge { color: #ff8cc6; }
.dugme--eposta .dugme__simge { color: var(--sari); }

.dugme:hover {
  background: var(--sari);
  color: var(--laci);
  transform: skewX(-12deg) translateY(-2px);
}

.dugme:hover .dugme__simge { color: currentColor; }

.dugme:focus-visible {
  outline: 3px solid var(--sari);
  outline-offset: 3px;
}

/* ---- Alt bant: ikaz şeridi + kayan yazı ---- */
.bant {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: var(--alt-bosluk);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--laci);
  font-size: clamp(13px, 1.9svh, 16px);
  animation: belir .6s var(--gecis) .5s both;
}

.bant::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--ikaz-y);
  background: repeating-linear-gradient(-45deg, var(--sari) 0 10px, var(--laci) 10px 20px);
}

.bant__etiket {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 1.5em 0 max(16px, env(safe-area-inset-left));
  background: var(--sari);
  color: var(--laci);
  font: italic 800 1.15em / 1 var(--baslik);
  letter-spacing: .03em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - .8em) 100%, 0 100%);
}

.bant__pencere {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.bant__kayan {
  display: flex;
  flex: none;
  width: max-content;
}

.bant__kayan.is-kayiyor { animation: bant-kay var(--bant-sure, 30s) linear infinite; }

@keyframes bant-kay {
  to { transform: translateX(-50%); }
}

.bant__iz {
  display: flex;
  flex: none;
  padding: 0;
  list-style: none;
}

.bant__iz li {
  display: flex;
  align-items: center;
  gap: 2.2em;
  padding-left: 2.2em;
  font-weight: 700;
  white-space: nowrap;
}

.bant__iz li::after {
  content: "";
  width: .5em;
  height: .5em;
  background: var(--sari);
  transform: rotate(45deg);
}

/* ---- Yatay ekran: kapak tam görünür, logo kapaktaki eski yerine oturur ---- */
@media (min-aspect-ratio: 6/5) {
  .sahne { display: block; padding: 0; }

  .sahne__fon img { object-position: 50% calc(var(--oy) * 100%); }

  .sahne__perde { background: linear-gradient(0deg, rgb(14 19 48 / .55) 0%, rgb(14 19 48 / 0) 38%); }

  /* object-fit: cover hesabının aynısı: kapak genişliği/yüksekliği ve kaydırması (1672×941) */
  .logo {
    --sw: max(100cqw, 100cqh * 1.776833);
    --sh: calc(var(--sw) / 1.776833);
    --sx: calc((100cqw - var(--sw)) / 2);
    --sy: calc((100cqh - var(--sh)) * var(--oy));
    position: absolute;
    top: calc(var(--sy) + var(--sh) * .191286);
    left: calc(var(--sx) + var(--sw) * .197368);
    width: calc(var(--sw) * .633971);
  }

  .yayin,
  .soz-kutu {
    position: absolute;
    left: var(--kenar);
    width: auto;
    margin: 0;
    font-size: clamp(14px, min(1.25vw, 2.2svh), 20px);
  }

  .yayin {
    bottom: calc(var(--alt-bosluk) + clamp(14px, 4svh, 44px));
    justify-items: start;
    max-width: min(56vw, 760px);
  }

  .yayin__ust { font-size: clamp(28px, min(3.9vw, 7svh), 72px); }
  .yayin__alt { margin-left: .9em; font-size: clamp(18px, min(2.1vw, 3.8svh), 38px); }

  /* söz kartı ve bağlantılar gökyüzünde, logonun üstünde karşılıklı durur */
  .soz-kutu,
  .baglantilar { top: max(16px, env(safe-area-inset-top), 2.6svh); }

  .soz { width: 24em; }

  .baglantilar {
    position: absolute;
    right: var(--kenar);
    margin: 0;
    padding: 0;
  }
}

/* dar ya da alçak yatay ekran: bağlantılar yalnız simge (yazı ekran okuyucuda kalır) */
@media (min-aspect-ratio: 6/5) and (max-width: 1000px), (min-aspect-ratio: 6/5) and (max-height: 540px) {
  .baglantilar { gap: 8px; }
  .dugme { padding: 0 .8em; }
  .dugme__yazi {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* çok geniş ekranda kapağın üstü fazla kırpılmasın, logo görünür kalsın */
@media (min-aspect-ratio: 13/5) {
  .sahne { --oy: .3; }
}

/* yatay telefon gibi alçak ekranlar: söz kartı gizlenir, bağlantılar yalnız simge */
@media (min-aspect-ratio: 6/5) and (max-height: 540px) {
  .soz-kutu { display: none; }
  .yayin { bottom: calc(var(--alt-bosluk) + 12px); }
  .dugme { min-height: 40px; }
}

/* çok kısa dikey ekranlar */
@media (max-aspect-ratio: 6/5) and (max-height: 600px) {
  .soz-kutu { display: none; }
}

/* hareketi azalt: her şey son hâliyle, animasyonsuz */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}