/* =========================================================================
   YARIŞMA ARENASI — « arène / projecteur » tasarım sistemi, önek ya-
   Sözlük: fransızca arena sahnesi imza olarak. piste (içerik genişliği),
   portik (başlangıç kapısı = başlık), tribun (nav tribünü), afis (program
   afişi = ana sayfa kahramanı), kolon (numaralı yarış kolonu = bölüm),
   engel (engel = kart), etiket (etiket), kayit/kayit defteri (kayıt
   defteri akışı), ouverture (yazı başı), planche (lidersiz görsel),
   colonne (okuma sütunu), uyari (sık yapılan hatalar kutusu), kontrol
   (kontrol listesi kutusu), tableau (tablo sahnesi), suite (sonraki
   dosya), kirmizi (kırmızı top ayraç), socle (kürsü = footer).
   Palet: sahne gecesi (derin füme) + güvenlik sarısı + sinyal kırmızısı,
   sıcak kağıt zemin. Sarı ve kırmızı birkaç vurgu noktasında tutulur;
   zemin hep sıcak kağıt kalır. Uzak yazı tipi yok, gradyan süs yok,
   emoji yok. Koyu mod otomatiktir (prefers-color-scheme).
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. RENKLER · sahne gecesi ve sıcak kağıt ------------------------ */
  --kagit:        #f6efe0;  /* sıcak kağıt: her sayfanın zemini            */
  --kagit-creux:  #ece1c8;  /* rezerv, sıralı bölümler                     */
  --kagit-vif:    #fbf5e6;  /* en açık rezerv: kontrol kutusu, tablo satırı */
  --murekkep:     #1c1e22;  /* sahne gecesi mürekkebi: metin               */
  --sahne:        #191b20;  /* en koyu zemin: portik, socle, tablo başı    */
  --sahne-derin:  #101216;  /* daha derin sahne: kutular, tablo başlığı    */
  --murekkep-douce: #565648; /* altyazı, meta, chapo                       */
  --sinyal:       #b52a19;  /* sinyal kırmızısı: bağ, strong, vurgu (>=4.5:1) */
  --sinyal-koyu:  #8f1f12;  /* sinyal basılı / hover                       */
  --sinyal-acik:  #e05a41;  /* koyu zemin üstü sinyal                      */
  --sari:         #8a6d13;  /* güvenlik sarısının kağıt üstü tonu: plaket  */
  --sari-sahne:   #f2c437;  /* gerçek güvenlik sarısı: koyu zemin üstü     */
  --filet:        #d7c9a8;  /* kağıt üstü hairline                         */
  --filet-sahne:  #33363d;  /* koyu zemin üstü hairline                    */

  /* Koyu mod: projektörler sonrası arena. */
  --nuit-kagit:   #14161a;
  --nuit-creux:   #1d2026;
  --nuit-metin:   #e9e2cf;
  --nuit-douce:   #a9a690;

  /* ---- 2. TİP · sistem yığınları, dışarıdan hiçbir şey çekilmez -------- */
  --police-baslik: "Iowan Old Style", "Iowan Old Style Roman", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --police-metin: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --baslik-agirlik: 600;
  --caps-aralik: 0.2em;     /* plaket, kicker, sezon satırı                */

  --govde-boyut: clamp(1.02rem, 0.97rem + 0.22vw, 1.12rem);
  --govde-satir: 1.66;
  --h1-olcek: clamp(2.5rem, 1.3rem + 4.6vw, 5rem);
  --h2-olcek: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  --h3-olcek: clamp(1.13rem, 1.02rem + 0.55vw, 1.44rem);

  /* ---- 3. RİTİM --------------------------------------------------------- */
  --olcu:         63ch;     /* okuma sütunu                                */
  --olcek-genis:  1360px;
  --kenar:        clamp(1.1rem, 4vw, 4rem);
  --sut:          clamp(0.9rem, 2.2vw, 2rem);
  --nefes:        clamp(2.4rem, 5.5vw, 5.2rem);
  --tume:         clamp(1.2rem, 3vw, 3.2rem);

  /* ---- 4. AYRINTI ------------------------------------------------------- */
  --hiz: 150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kagit:       var(--nuit-kagit);
    --kagit-creux: var(--nuit-creux);
    --kagit-vif:   #23262d;
    --murekkep:    var(--nuit-metin);
    --murekkep-douce: var(--nuit-douce);
    --sinyal:      var(--sinyal-acik);
    --sinyal-koyu: #f0765f;
    --sari:        #cfa62b;
    --filet:       #383c45;
  }
}

/* =========================================================================
   TABAN
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--police-metin);
  font-size: var(--govde-boyut);
  line-height: var(--govde-satir);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.ya-glyph { display: inline-block; vertical-align: -0.12em; }

h1, h2, h3, h4 {
  font-family: var(--police-baslik);
  font-weight: var(--baslik-agirlik);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--h1-olcek); }
h2 { font-size: var(--h2-olcek); }
h3 { font-size: var(--h3-olcek); }

p, ul, ol { margin: 0 0 1.12em; }
a {
  color: var(--sinyal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--hiz);
}
a:hover { color: var(--sinyal-koyu); }
:focus-visible {
  outline: 2px solid var(--sinyal);
  outline-offset: 3px;
  border-radius: 1px;
}
hr { border: 0; border-top: 1px solid var(--filet); margin: var(--nefes) 0; }
strong { color: var(--murekkep); }

::selection { background: var(--sinyal); color: #fbf5e6; }

/* Sayaçlar, mesafeler ve tarihler tabular rakamlarla okunur. */
.ya-tableau, .ya-jour, .ya-mentions, .ya-afis__sezon,
.ya-kolon-alani__numara, .ya-plaque, .ya-engel__not2 {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   İSKELET
   ========================================================================= */

/* Atlama bağı. Asla silinmez. */
.ya-evite {
  position: absolute; left: -9999px; top: 0;
  background: var(--sahne); color: var(--kagit-vif);
  padding: 0.7rem 1.15rem; z-index: 60;
}
.ya-evite:focus { left: 0.6rem; top: 0.6rem; }

.ya-piste {
  max-width: var(--olcek-genis);
  margin-inline: auto;
  padding-inline: var(--kenar);
}

/* ---- portik: başlangıç kapısı ----------------------------------------- */
.ya-portik {
  background: var(--sahne);
  color: var(--kagit-vif);
  border-bottom: 3px solid var(--sari-sahne);
}
.ya-portik__sira {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.4rem 2rem;
  padding-block: 1.1rem 1rem;
}
.ya-portik__mot {
  font-family: var(--police-baslik);
  font-size: 1.45rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--kagit-vif); text-decoration: none;
  transition: color var(--hiz);
}
.ya-portik__mot:hover { color: var(--sari-sahne); }
.ya-portik__mot span {
  display: block;
  font-family: var(--police-metin);
  font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--caps-aralik);
  color: var(--nuit-douce);
}
.ya-tribun ul {
  display: flex; flex-wrap: wrap; gap: 0.2rem 1.35rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.ya-tribun a { color: var(--nuit-douce); text-decoration: none; transition: color var(--hiz); }
.ya-tribun a:hover { color: var(--sari-sahne); }

/* =========================================================================
   AFİŞ: ana sayfa kahramanı, tipografik program afişi
   ========================================================================= */

.ya-afis {
  background: var(--sahne);
  color: var(--kagit-vif);
  padding-block: clamp(2.6rem, 6vw, 4.6rem);
  border-bottom: 1px solid var(--filet-sahne);
}
.ya-afis__kicker {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--caps-aralik);
  color: var(--sari-sahne);
  margin-bottom: 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 4px double var(--filet-sahne);
}
.ya-afis h1 {
  font-family: var(--police-metin);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  line-height: 0.98;
  margin-bottom: 1.1rem;
  max-width: 14ch;
}
.ya-afis__deck {
  max-width: 58ch;
  color: var(--nuit-douce);
  font-size: 1.04rem;
  margin-bottom: 1.6rem;
}
.ya-afis__sezon {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border-block: 4px double var(--filet-sahne);
  padding-block: 0.55rem;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--caps-aralik);
  color: var(--kagit-vif);
  margin-bottom: 0;
}

/* =========================================================================
   KOLON ALANI: numaralı bölümler 01-05
   ========================================================================= */

.ya-kolon-alani { padding-block: var(--tume) 0.4rem; }
.ya-kolon-alani--creux {
  background: var(--kagit-creux);
  padding-block: var(--tume);
  margin-block: var(--tume) 0;
  border-block: 1px solid var(--filet);
}
.ya-kolon-alani__kafa { margin-bottom: 1.6rem; }
.ya-kolon-alani__titre {
  display: flex; align-items: baseline; gap: 0.9rem;
  border-top: 3px solid var(--murekkep);
  padding-top: 0.9rem;
}
.ya-kolon-alani__numara {
  font-family: var(--police-metin);
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sari);
}
.ya-kolon-alani--creux .ya-kolon-alani__numara { color: var(--sinyal); }
.ya-kolon-alani__not {
  color: var(--murekkep-douce);
  max-width: 62ch;
  margin-bottom: 0;
}

/* =========================================================================
   ENGEL MOZAIĞİ: asimetrik kart ızgarası
   ========================================================================= */

.ya-engeller {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sut);
}
.ya-engel { grid-column: span 2; }
.ya-engel--kucuk { grid-column: span 2; }
.ya-engel--genis { grid-column: span 3; }
.ya-engel--tam { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .ya-engel, .ya-engel--kucuk, .ya-engel--genis { grid-column: span 3; }
}
@media (max-width: 640px) {
  .ya-engeller { grid-template-columns: 1fr; }
  .ya-engel, .ya-engel--kucuk, .ya-engel--genis, .ya-engel--tam { grid-column: 1 / -1; }
}

.ya-engel__cadre {
  border: 1px solid var(--filet);
  background: var(--kagit-vif);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ya-engel__cadre--pano { aspect-ratio: 21 / 9; }
.ya-engel__vue {
  width: 100%; height: 100%;
  object-fit: cover;
}
.ya-engel__etiket { padding-top: 0.7rem; }
.ya-engel__etiket .ya-plaque { margin-bottom: 0.35rem; }
.ya-engel__titre { margin-bottom: 0.35rem; }
.ya-engel__lien {
  color: var(--murekkep);
  text-decoration: none;
  background-image: linear-gradient(var(--sinyal), var(--sinyal));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: color var(--hiz), background-size var(--hiz);
}
.ya-engel__lien:hover { color: var(--sinyal); background-size: 100% 2px; }
.ya-engel__note {
  color: var(--murekkep-douce);
  font-size: 0.95rem;
  margin-bottom: 0;
}
.ya-engel__not2 {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sari);
  margin: 0.5rem 0 0;
}

/* ---- kayıt defteri: akış tarihli -------------------------------------- */
.ya-kayit {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: var(--olcek-genis);
  column-gap: clamp(1.6rem, 4vw, 3.4rem);
}
@media (max-width: 860px) { .ya-kayit { columns: 1; } }
.ya-giris {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--filet);
}
.ya-giris__vue {
  width: 116px; height: 87px;
  object-fit: cover;
  border: 1px solid var(--filet);
}
.ya-giris h3 { font-size: 1.12rem; margin-bottom: 0.3rem; }
.ya-giris h3 a { color: var(--murekkep); text-decoration: none; transition: color var(--hiz); }
.ya-giris h3 a:hover { color: var(--sinyal); }
.ya-giris p { font-size: 0.92rem; color: var(--murekkep-douce); margin-bottom: 0; }

.ya-jour {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--murekkep-douce);
  margin-bottom: 0.35rem;
}

/* ---- kırmızı ayraç ----------------------------------------------------- */
.ya-kirmizi {
  display: flex; justify-content: center;
  color: var(--filet);
  padding-block: var(--tume) 0;
}

/* =========================================================================
   SAHNE: iç sayfa gövdesi
   ========================================================================= */

.ya-sahne { padding-top: 1.1rem; }

/* fil: kırıntı yolu */
.ya-fil ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin: 0 0 var(--tume);
  padding: 0.55rem 0;
  border-block: 1px solid var(--filet);
  font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.ya-fil li { display: flex; align-items: center; gap: 0.3rem; }
.ya-fil li + li::before { content: "›"; color: var(--sari); }
.ya-fil a { color: var(--murekkep-douce); text-decoration: none; }
.ya-fil a:hover { color: var(--sinyal); }
.ya-fil [aria-current="page"] { color: var(--sinyal); font-weight: 700; }

/* ouverture: yazı başı */
.ya-ouverture { margin-bottom: 1.8rem; }
.ya-plaque {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--caps-aralik);
  color: var(--sari);
  margin-bottom: 0.9rem;
}
.ya-ouverture h1 { margin-bottom: 0.9rem; }
.ya-ouverture__chapo {
  font-family: var(--police-baslik);
  font-size: 1.16rem;
  line-height: 1.5;
  max-width: 58ch;
  color: var(--murekkep-douce);
  margin-bottom: 0;
}
.ya-mentions {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem;
  margin: 1.1rem 0 0; padding: 0.7rem 0;
  border-block: 4px double var(--filet);
  font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.ya-mentions a { color: var(--murekkep-douce); text-decoration: none; }
.ya-mentions a:hover { color: var(--sinyal); }

/* planche: lidersiz tam genişlik görsel (ilk görsel lazy değildir) */
.ya-planche { margin: 0 0 var(--tume); }
.ya-planche__vue {
  width: 100%;
  border: 1px solid var(--filet);
}

/* colonne: okuma sütunu */
.ya-colonne {
  max-width: calc(var(--olcu) + 2 * var(--kenar));
}
.ya-colonne > p:first-of-type::first-letter {
  font-family: var(--police-baslik);
  font-size: 3.1em; line-height: 0.82;
  float: left; padding-right: 0.09em;
  color: var(--sinyal);
  font-weight: 700;
}
@media (max-width: 760px) { .ya-colonne > p:first-of-type::first-letter { font-size: 1em; float: none; padding: 0; } }
.ya-colonne h2 {
  margin: 2rem 0 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--filet);
}
.ya-colonne table { margin-bottom: 0; }
.ya-colonne ul:not(.ya-checklist) { padding-left: 1.2rem; }

/* =========================================================================
   KUTULAR: tablo, kontrol listesi, uyarı
   ========================================================================= */

.ya-tableau { margin-block: 1.4rem 1.7rem; overflow-x: auto; }
.ya-tableau table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.ya-tableau caption {
  caption-side: top; text-align: left;
  font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--caps-aralik);
  color: var(--sari);
  padding-bottom: 0.55rem;
}
.ya-tableau thead th {
  background: var(--sahne);
  color: var(--kagit-vif);
  text-align: left;
  font-weight: 600;
  padding: 0.55rem 0.75rem;
  border-bottom: 3px solid var(--sari-sahne);
}
.ya-tableau tbody td, .ya-tableau tbody th {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
}
.ya-tableau tbody tr:nth-child(even) { background: var(--kagit-vif); }

.ya-kontrol {
  background: var(--kagit-vif);
  border: 1px solid var(--filet);
  border-left: 4px solid var(--sari-sahne);
  padding: 1.2rem 1.4rem;
  margin-block: 1.7rem;
}
.ya-kontrol h2 { font-size: 1.25rem; margin: 0 0 0.7rem; border: 0; padding: 0; }
.ya-kontrol ul { list-style: none; margin: 0; padding: 0; }
.ya-kontrol li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.ya-kontrol li::before {
  content: "";
  position: absolute; left: 0; top: 0.38em;
  width: 0.72em; height: 0.72em;
  border: 2px solid var(--sinyal);
}

.ya-uyari {
  background: var(--sahne);
  color: var(--kagit-vif);
  border-left: 4px solid var(--sinyal-acik);
  padding: 1.2rem 1.4rem;
  margin-block: 1.7rem;
}
.ya-uyari h2 {
  font-size: 1.25rem;
  color: var(--sari-sahne);
  margin: 0 0 0.7rem;
  border: 0; padding: 0;
}
.ya-uyari ul { list-style: none; margin: 0; padding: 0; }
.ya-uyari li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--nuit-douce);
}
.ya-uyari li::before {
  content: "";
  position: absolute; left: 0; top: 0.42em;
  width: 0.72em; height: 0.72em;
  background: var(--sinyal-acik);
}

/* =========================================================================
   SUITE, NOT, SOCLE
   ========================================================================= */

.ya-suite {
  margin-top: 2rem;
  border-block: 4px double var(--filet);
  padding-block: 1.1rem;
}
.ya-suite h2 { font-size: 1.2rem; margin-bottom: 0.7rem; }
.ya-suite ul { list-style: none; margin: 0; padding: 0; }
.ya-suite li { margin-bottom: 0.45rem; }

.ya-not {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  color: var(--murekkep-douce);
  border-top: 1px solid var(--filet);
  padding-top: 1rem;
}

.ya-socle {
  margin-top: var(--nefes);
  background: var(--sahne);
  color: var(--nuit-douce);
  border-top: 3px solid var(--sari-sahne);
}
.ya-socle__sira {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sut);
  padding-block: 2.2rem;
}
@media (max-width: 760px) { .ya-socle__sira { grid-template-columns: 1fr; } }
.ya-socle h2 {
  font-family: var(--police-metin);
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--caps-aralik);
  color: var(--sari-sahne);
  margin-bottom: 0.8rem;
}
.ya-socle ul { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.ya-socle li { margin-bottom: 0.45rem; }
.ya-socle a { color: var(--nuit-douce); text-decoration: none; transition: color var(--hiz); }
.ya-socle a:hover { color: var(--sari-sahne); }
.ya-socle__taban {
  display: flex; align-items: center; gap: 0.5rem;
  border-top: 1px solid var(--filet-sahne);
  padding-block: 1.1rem;
  font-size: 0.82rem;
}

/* =========================================================================
   BASKI: projenin kâğıt hali
   ========================================================================= */

@media print {
  :root { --kagit: #ffffff; --murekkep: #000000; --sinyal: #000000; --sari: #444444; }
  .ya-evite, .ya-tribun, .ya-suite, .ya-kirmizi { display: none; }
  body { font-size: 10.5pt; }
  .ya-afis, .ya-portik, .ya-socle { background: #ffffff; color: #000000; border-color: #000000; }
  .ya-afis__kicker, .ya-afis__sezon, .ya-socle h2 { color: #000000; }
  a { color: #000000; text-decoration: underline; }
  .ya-engel__vue, .ya-giris__vue, .ya-planche__vue { max-height: 6cm; object-fit: contain; }
  .ya-tableau { overflow: visible; }
}