/* Gizli Talihli — sinematik, sıcak-koyu editoryal düzen.
   Zemin: sıcak gece siyahı, metin: krem. Vurgular: limon (eylem), lila (ikinci ses),
   bilet mavisi (yalnız bilet öğeleri), kehribar (bekleyen durum).
   Görsellerin hepsi Codex'in; burada çizim/illüstrasyon yok, yalnız tipografi, renk ve yerleşim. */
:root {
  --zemin: #12110f;
  --yuzey: #1b1916;
  --yuzey-2: #24211d;
  --ince: rgba(243, 237, 225, 0.12);
  --ince-2: rgba(243, 237, 225, 0.24);
  --krem: #f3ede1;
  --soluk: rgba(243, 237, 225, 0.66);
  --murekkep: #12110f;
  --limon: #c8ff3e;
  --lila: #b9a6ff;
  --buz: #bcdcf0;
  --kehribar: #ffb43c;
  --baslik-font: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --govde-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono-font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --el-font: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;
  --genislik: 1200px;
  --ust-yukseklik: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--zemin);
  color: var(--krem);
  font: 400 17px/1.6 var(--govde-font);
  -webkit-font-smoothing: antialiased;
}
/* Hafif gren: yalnız doku */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--limon); text-underline-offset: 3px; }
a:hover { color: var(--krem); }
:focus-visible { outline: 2px solid var(--limon); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--limon); color: var(--murekkep); }

.atla { position: absolute; left: -999px; top: 8px; background: var(--limon); color: var(--murekkep); padding: 8px 12px; z-index: 200; }
.atla:focus { left: 8px; }

.etiket {
  margin: 0;
  font: 700 12px/1.3 var(--mono-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--limon);
}
.kucuk-not { font-size: 14px; color: var(--soluk); margin: 8px 0 0; }

/* ------------------------------------------------------------ Üst bar */
.ust {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}
.ust.dolu {
  background: rgba(18, 17, 15, 0.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--ince);
}
.ust-ic {
  position: relative;
  max-width: var(--genislik); margin: 0 auto;
  min-height: var(--ust-yukseklik); padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
@media (min-width: 761px) { .ust-ic .menu-kutu { margin-left: auto; } }
.logo { display: flex; align-items: center; gap: 12px; color: var(--krem); text-decoration: none; }
.logo:hover { color: var(--krem); }
.logo-ad { font: 800 17px/1 var(--baslik-font); letter-spacing: 0.01em; text-transform: uppercase; }
.logo-bilet {
  width: 30px; height: 20px; flex: none;
  border: 2px solid var(--krem); border-radius: 3px;
  background: linear-gradient(90deg, var(--limon) 0 35%, transparent 35%) 4px 4px / 60% 4px no-repeat, var(--buz);
  transform: rotate(-6deg);
}

.menu-kutu summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--ince-2); border-radius: 6px;
  background: rgba(18, 17, 15, 0.5);
  font: 700 12px/1 var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase;
}
.menu-kutu summary::-webkit-details-marker { display: none; }
.menu-cizgi, .menu-cizgi::before { display: block; width: 14px; height: 2px; background: currentColor; }
.menu-cizgi { position: relative; margin-top: -5px; }
.menu-cizgi::before { content: ""; position: absolute; top: 5px; }
.menu-kutu[open] summary { background: var(--limon); color: var(--murekkep); border-color: var(--limon); }
.menu { display: flex; gap: 4px; }
.menu a {
  color: var(--soluk); text-decoration: none;
  font: 700 12px/1 var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 12px; border-radius: 6px; white-space: nowrap;
}
.menu a:hover { color: var(--krem); background: rgba(243, 237, 225, 0.08); }

@media (max-width: 760px) {
  .ust-ic { padding: 0 16px; }
  .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    padding: 8px 16px 18px;
    background: var(--zemin);
    border-bottom: 1px solid var(--ince);
  }
  .menu a { font: 800 30px/1 var(--baslik-font); letter-spacing: -0.01em; text-transform: uppercase; color: var(--krem); padding: 16px 0; border-radius: 0; border-top: 1px solid var(--ince); }
  .menu a:first-child { border-top: 0; }
  .menu a:hover { background: none; color: var(--limon); }
}
@media (min-width: 761px) { .menu-kutu summary { display: none; } .menu-insta { display: none; } }
.ust-insta {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 9px 14px; border-radius: 999px;
  background: var(--limon); color: var(--murekkep); text-decoration: none;
  font: 700 12px/1 var(--mono-font); letter-spacing: 0.08em;
}
.ust-insta:hover { color: var(--murekkep); filter: brightness(1.05); }
.ust-insta[hidden] { display: none; }
@media (max-width: 760px) { .ust-insta { display: none; } .menu-insta { color: var(--limon) !important; } }
.alt-insta a { color: var(--limon); text-decoration: none; font-weight: 700; }
.alt-insta a:hover { text-decoration: underline; }

main { display: block; }

/* ------------------------------------------------------------ Kapak */
.kapak {
  --kapak-odak: 62% 50%;
  --kapak-odak-mobil: 77% 50%;
  position: relative;
  height: clamp(620px, 100svh, 1000px);
  overflow: hidden;
  background: var(--zemin);
  isolation: isolate;
}
.kapak-gorsel { position: absolute; inset: 0; margin: 0; z-index: -2; }
.kapak-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: var(--kapak-odak-mobil); }
@media (min-width: 761px) { .kapak-gorsel img { object-position: var(--kapak-odak); } }
.kapak-perde {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(18, 17, 15, 0.7) 0%, rgba(18, 17, 15, 0) 22%),
    linear-gradient(0deg, var(--zemin) 0%, rgba(18, 17, 15, 0.92) 34%, rgba(18, 17, 15, 0.25) 60%, rgba(18, 17, 15, 0) 74%);
}
@media (min-width: 900px) {
  .kapak-perde {
    background:
      linear-gradient(180deg, rgba(18, 17, 15, 0.6) 0%, rgba(18, 17, 15, 0) 20%),
      linear-gradient(0deg, var(--zemin) 0%, rgba(18, 17, 15, 0) 28%),
      linear-gradient(90deg, rgba(18, 17, 15, 0.94) 0%, rgba(18, 17, 15, 0.72) 30%, rgba(18, 17, 15, 0.12) 56%, rgba(18, 17, 15, 0) 70%);
  }
}
.kar, .kar::after {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 110px 80px, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(2.5px 2.5px at 160px 150px, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 60px 170px, rgba(255, 255, 255, 0.55), transparent 60%);
  background-size: 200px 200px;
  opacity: 0.35;
}
.kar::after { content: ""; background-size: 310px 310px; opacity: 0.8; }

.kapak-ic {
  height: 100%;
  max-width: var(--genislik); margin: 0 auto;
  padding: calc(var(--ust-yukseklik) + 16px) 16px 28px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
@media (min-width: 900px) { .kapak-ic { padding: calc(var(--ust-yukseklik) + 24px) 24px 72px; } }

.hud {
  list-style: none; margin: 0; padding: 0;
  display: inline-flex; align-self: flex-start; max-width: 100%;
  border: 1px solid var(--ince-2); border-radius: 8px;
  background: rgba(18, 17, 15, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hud li { display: flex; flex-direction: column; gap: 3px; padding: 9px 14px; min-width: 0; }
.hud li + li { border-left: 1px solid var(--ince); }
.hud span { font: 500 10px/1.2 var(--mono-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soluk); white-space: nowrap; }
.hud strong { font: 700 14px/1.2 var(--mono-font); color: var(--krem); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hud li:nth-child(2) strong { color: var(--limon); }
@media (max-width: 420px) {
  .hud li { padding: 8px 10px; }
  .hud span { font-size: 9px; letter-spacing: 0.1em; }
  .hud strong { font-size: 12px; }
}

.kapak-metin { max-width: 760px; }
.kunye {
  margin: 0 0 16px; display: flex; align-items: center; gap: 10px;
  font: 700 12px/1.3 var(--mono-font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--limon);
}
@media (max-width: 420px) { .kunye { font-size: 10.5px; letter-spacing: 0.12em; } }
.kunye::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--limon); box-shadow: 0 0 12px var(--limon); }
.kapak-baslik { margin: 0 0 18px; }
.kapak-ust {
  display: block; margin-bottom: 0.7em;
  font: 500 clamp(19px, 2.3vw, 30px)/1.2 var(--baslik-font);
  color: var(--lila);
}
.kapak-ana {
  display: block;
  font: 800 clamp(50px, 14.6vw, 150px)/0.86 var(--baslik-font);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--krem);
}
.kapak-alt { margin: 0 0 28px; font-size: 18px; color: var(--soluk); max-width: 46ch; }

.eylem {
  display: inline-grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
  width: 100%; max-width: 400px;
  padding: 16px 22px 16px 20px;
  background: var(--limon); color: var(--murekkep);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 12px 40px rgba(200, 255, 62, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.eylem:hover { color: var(--murekkep); transform: translateY(-2px); box-shadow: 0 16px 48px rgba(200, 255, 62, 0.28); }
.eylem-isik { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--murekkep); box-shadow: 0 0 0 4px rgba(18, 17, 15, 0.15); }
.eylem-ana { font: 800 21px/1.1 var(--baslik-font); text-transform: uppercase; letter-spacing: -0.005em; }
.eylem-alt { font: 700 12px/1.3 var(--mono-font); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }

@media (prefers-reduced-motion: no-preference) {
  .kar { animation: kar-yag 30s linear infinite; }
  .kar::after { animation: kar-yag-2 44s linear infinite; }
  @keyframes kar-yag { to { background-position: 40px 200px; } }
  @keyframes kar-yag-2 { to { background-position: -60px 310px; } }
  .kapak-gorsel img { animation: kapak-gir 2.2s cubic-bezier(.2, .8, .2, 1) both; }
  .kapak-metin > *, .hud { animation: metin-gir 0.9s cubic-bezier(.2, .8, .2, 1) both; }
  .kapak-baslik { animation-delay: 0.12s; }
  .kapak-alt { animation-delay: 0.22s; }
  .eylem { animation-delay: 0.32s; }
  .eylem-isik { animation: nabiz 2.2s ease-in-out infinite; }
  @keyframes kapak-gir { from { opacity: 0; transform: scale(1.08); } }
  @keyframes metin-gir { from { opacity: 0; transform: translateY(20px); } }
  @keyframes nabiz { 50% { box-shadow: 0 0 0 9px rgba(18, 17, 15, 0); } }
}

/* ------------------------------------------------------------ Kayan şerit (yalnız gerçek bilgiler) */
.kayan {
  overflow: hidden;
  background: var(--limon); color: var(--murekkep);
  font: 700 13px/1 var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase;
}
.kayan-ic { display: flex; width: max-content; }
.kayan-grup { display: flex; flex: none; align-items: center; gap: 22px; padding: 14px 11px; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .kayan-ic { animation: kay 36s linear infinite; }
  @keyframes kay { to { transform: translateX(-50%); } }
}

/* ------------------------------------------------------------ Bölüm başlıkları */
.bolum { max-width: var(--genislik); margin: 0 auto; padding: 88px 16px 0; scroll-margin-top: var(--ust-yukseklik); }
@media (min-width: 900px) { .bolum { padding: 128px 24px 0; } }
.bolum-bas { margin-bottom: 36px; }
.bolum-bas .etiket { margin-bottom: 14px; }
.bolum-bas h2 {
  margin: 0;
  font: 800 clamp(44px, 10vw, 104px)/0.9 var(--baslik-font);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.bolum-alt { margin: 16px 0 0; color: var(--soluk); max-width: 56ch; font-size: 18px; }

/* Paneller: ince çizgili koyu yüzey, mono başlık satırı */
.panel-bas {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--ince);
  font: 700 12px/1.3 var(--mono-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soluk);
}
.durum-etiket {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 9px 5px;
  border: 1px solid currentColor; border-radius: 4px;
  font: 700 11px/1 var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--buz);
  white-space: nowrap;
}
.durum-etiket::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.durum-etiket.kapali { color: var(--kehribar); }
.durum-etiket.acik { color: var(--limon); }

/* ------------------------------------------------------------ 01 Hikâye */
.hikaye { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .hikaye { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 72px; } }
.vaat {
  margin: 0;
  font: 500 clamp(23px, 2.7vw, 36px)/1.32 var(--baslik-font);
  letter-spacing: -0.015em;
  color: var(--krem);
}
.vaat mark {
  background: var(--limon); color: var(--murekkep);
  padding: 0 0.14em; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.kareler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kare {
  margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 3 / 4.3;
  border: 2px solid var(--krem); border-radius: 6px;
  background: var(--yuzey);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.kare:first-child { transform: rotate(-2deg); }
.kare:last-child { transform: rotate(2deg) translateY(24px); }
.kare img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.kare:last-child img { object-position: 35% 40%; }
.kutu {
  position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px);
  padding: 4px 8px;
  background: var(--limon); color: var(--murekkep);
  border: 2px solid var(--murekkep);
  font: 400 clamp(15px, 3.8vw, 19px)/1.15 var(--el-font);
  text-transform: uppercase;
}
.balon {
  position: absolute; left: 8px; right: 8px; top: 10px;
  padding: 7px 10px;
  background: #fff; color: var(--murekkep);
  border: 2px solid var(--murekkep); border-radius: 50% / 46%;
  font: 400 clamp(15px, 3.8vw, 19px)/1.12 var(--el-font);
  text-align: center;
}
.balon::after {
  content: ""; position: absolute; left: 24%; bottom: -13px;
  width: 16px; height: 14px; background: #fff;
  border-right: 2px solid var(--murekkep); border-bottom: 2px solid var(--murekkep);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: skewX(28deg);
}

.serit-baslik { margin: 96px 0 18px; }
.serit { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .serit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.serit-kare {
  position: relative;
  padding: 26px 24px 28px;
  background: var(--yuzey);
  border: 1px solid var(--ince); border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.serit-kare:hover { border-color: var(--ince-2); transform: translateY(-2px); }
.serit-no {
  display: block; margin-bottom: 18px;
  font: 800 64px/0.9 var(--baslik-font); letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--limon);
}
.serit-kare:nth-child(2) .serit-no { -webkit-text-stroke-color: var(--lila); }
.serit-kare:nth-child(3) .serit-no { -webkit-text-stroke-color: var(--buz); }
.serit-kare h3 { margin: 0 0 10px; font: 800 clamp(22px, 5vw, 25px)/1.1 var(--baslik-font); text-transform: uppercase; letter-spacing: -0.01em; }
.serit-kare p { margin: 0; color: var(--soluk); }

/* ------------------------------------------------------------ Şu an: dosya + oy kartı */
.simdi-ic { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .simdi-ic { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; } }
.dosya, .oy-karti {
  padding: 22px 20px 24px;
  background: var(--yuzey);
  border: 1px solid var(--ince); border-radius: 14px;
}
@media (min-width: 900px) { .dosya, .oy-karti { padding: 28px 28px 30px; } }
.dosya-ozet { margin: 0 0 24px; font-size: 18px; max-width: 46ch; }

.bilet {
  position: relative; margin: 0 0 16px; max-width: 520px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  color: var(--murekkep);
  background:
    repeating-radial-gradient(circle at 0 100%, transparent 0 10px, rgba(18, 17, 15, 0.07) 10px 11px),
    var(--buz);
  border-radius: 10px;
}
.bilet > div { padding: 14px 18px 16px; }
.bilet-kocan { position: relative; border-left: 2px dashed rgba(18, 17, 15, 0.55); background: rgba(255, 255, 255, 0.45); border-radius: 0 10px 10px 0; }
.bilet-kocan::before, .bilet-kocan::after {
  content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--yuzey);
}
.bilet-kocan::before { top: -10px; }
.bilet-kocan::after { bottom: -10px; }
.bilet dt { font: 700 11px/1.2 var(--mono-font); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(18, 17, 15, 0.7); }
.bilet dd {
  margin: 6px 0 0;
  font: 800 clamp(22px, 6.2vw, 34px)/1 var(--baslik-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; white-space: nowrap;
}
@media (max-width: 480px) {
  .bilet > div { padding: 12px 14px 14px; }
  .bilet-kocan { max-width: 104px; }
  .bilet dt { letter-spacing: 0.08em; }
  .bilet dd { font-size: clamp(19px, 5.8vw, 26px); }
}

.sayaclar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.sayaclar li { padding: 14px 12px 12px; border: 1px solid var(--ince); border-radius: 10px; background: var(--yuzey-2); }
.sayaclar strong { display: block; font: 800 clamp(24px, 6.4vw, 32px)/1 var(--baslik-font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sayaclar span { display: block; margin-top: 8px; font: 500 10.5px/1.3 var(--mono-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soluk); }

.oy-karti { display: flex; flex-direction: column; }
.oy-soru { margin: 6px 0 10px; font: 800 clamp(48px, 9vw, 76px)/0.9 var(--baslik-font); letter-spacing: -0.04em; text-transform: uppercase; color: var(--lila); }
.oy-nasil { margin: 0 0 24px; color: var(--soluk); max-width: 40ch; }
.dugme {
  display: block; width: 100%; margin-top: auto; text-align: center; text-decoration: none;
  font: 700 13px/1.2 var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 16px 18px; border-radius: 8px;
  border: 0; background: var(--limon); color: var(--murekkep);
  cursor: pointer;
}
.dugme:hover { color: var(--murekkep); }
.dugme.pasif, .dugme:disabled {
  background: transparent; color: var(--soluk);
  border: 1px dashed var(--ince-2); cursor: not-allowed;
}
.oy-gerekce { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--soluk); }

/* ------------------------------------------------------------ 02 Bölümler */
.bolum-listesi { display: grid; gap: 20px; }
.bolum-bileti {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas: "kocan gorsel" "kocan govde";
  background: var(--yuzey);
  border: 1px solid var(--ince); border-radius: 14px;
  overflow: hidden;
}
@media (min-width: 760px) {
  .bolum-bileti { grid-template-columns: 76px minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "kocan gorsel govde"; }
}
.bb-kocan {
  grid-area: kocan;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 18px 0;
  background: var(--buz); color: var(--murekkep);
  border-right: 2px dashed rgba(18, 17, 15, 0.5);
}
.bb-kod { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 12px/1 var(--mono-font); letter-spacing: 0.24em; }
.bb-no { font: 800 clamp(26px, 5vw, 40px)/1 var(--baslik-font); letter-spacing: -0.04em; }
.bb-gorsel { grid-area: gorsel; position: relative; aspect-ratio: 16 / 10; background: var(--zemin); overflow: hidden; }
.bb-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: transform 0.6s ease; }
.bolum-bileti:hover .bb-gorsel img { transform: scale(1.03); }
@media (min-width: 760px) {
  .bb-gorsel { aspect-ratio: auto; min-height: 340px; }
  .bb-gorsel img { position: absolute; inset: 0; }
}
.bb-govde { grid-area: govde; padding: 22px 20px 26px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 760px) { .bb-govde { padding: 32px 36px; } }
.bb-govde .panel-bas { margin-bottom: 18px; }
.bb-govde h3 { margin: 0 0 12px; font: 800 clamp(52px, 9vw, 96px)/0.88 var(--baslik-font); letter-spacing: -0.045em; text-transform: uppercase; }
.bb-govde p { margin: 0; color: var(--soluk); max-width: 44ch; }
.bb-baglanti { display: inline-block; margin-top: 16px; font: 700 13px/1 var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase; }

/* ------------------------------------------------------------ 03 Karar kaydı */
.kayit {
  max-width: 880px;
  padding: 22px 20px 24px;
  background: var(--yuzey);
  border: 1px solid var(--ince); border-radius: 14px;
}
@media (min-width: 900px) { .kayit { padding: 28px 28px 30px; } }
.kayit .panel-bas { margin-bottom: 4px; }
.kayit-satir {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--ince);
}
.kayit-bolum { font: 700 12px/1.2 var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase; }
.kayit-iz { height: 10px; border: 1px dashed var(--ince-2); border-radius: 999px; }
.kayit-sonuc { font: 700 12px/1.2 var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soluk); white-space: nowrap; }
.kayit-sonuc.secildi { color: var(--limon); }
.kayit-detay { display: flex; flex-direction: column; gap: 2px; }
.kayit-detay span { font-size: 14px; color: var(--soluk); }
.kayit-not { margin: 18px 0 0; color: var(--soluk); max-width: 60ch; }

/* ------------------------------------------------------------ 04 Karakterler */
.karakterler { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .karakterler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.karakter {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--yuzey);
  border: 1px solid var(--ince); border-radius: 14px;
  overflow: hidden;
}
.karakter-kare { position: relative; aspect-ratio: 4 / 3; background: var(--zemin); overflow: hidden; }
.karakter-kare img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.karakter-govde { padding: 22px 22px 28px; }
.karakter .rol { display: block; margin-bottom: 8px; font: 700 12px/1.2 var(--mono-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--limon); }
.karakter h3 { margin: 0 0 10px; font: 800 clamp(40px, 8vw, 56px)/0.9 var(--baslik-font); letter-spacing: -0.04em; text-transform: uppercase; }
.karakter p { margin: 0; color: var(--soluk); }

/* Görseli olmayan karakter: çizim yok, yalnızca repliği (tipografi). Görseller Codex'te. */
.ses-karti { display: grid; place-items: center; text-align: center; padding: 28px 20px; background: var(--lila); }
.ses-karti .balon { position: relative; inset: auto; display: inline-block; max-width: 300px; padding: 16px 22px; font-size: clamp(22px, 5.6vw, 28px); }
.ses-karti small { display: block; margin-top: 26px; font: 700 11px/1.2 var(--mono-font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--murekkep); }

/* ------------------------------------------------------------ Alt bilgi */
.alt { margin-top: 140px; border-top: 1px solid var(--ince); overflow: hidden; }
.alt-icerik { max-width: var(--genislik); margin: 0 auto; padding: 40px 16px 24px; }
@media (min-width: 900px) { .alt-icerik { padding: 48px 24px 32px; } }
.alt-icerik p { margin: 0 0 10px; max-width: 70ch; font-size: 15px; color: var(--soluk); }
.alt-icerik .alt-tarih { font: 700 11px/1.4 var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase; }
.alt-dev {
  margin: 0 0 -0.07em; padding: 0 8px;
  font: 800 10.4vw/0.86 var(--baslik-font);
  letter-spacing: -0.05em; text-transform: uppercase; text-align: center; white-space: nowrap;
  color: var(--limon);
}

.hata { max-width: var(--genislik); margin: 96px auto 16px; padding: 12px 16px; border: 1px solid var(--ince-2); background: var(--yuzey); }

/* ------------------------------------------------------------ Kaydırınca beliren öğeler */
.hareketli .beliren { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.hareketli .beliren.gorundu { opacity: 1; transform: none; }
.hareketli .serit-kare:nth-child(2) { transition-delay: 0.08s; }
.hareketli .serit-kare:nth-child(3) { transition-delay: 0.16s; }

/* ------------------------------------------------------------ Oy akışı: yapışkan çubuk, kapak düğmeleri, oy paneli */
.oy-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; padding: 0 24px; min-height: 34px;
  background: var(--zemin); color: var(--krem);
  border: 0; border-top: 1px solid var(--ince); border-bottom: 1px solid var(--ince);
  font: 700 11px/1 var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase;
  text-align: left; cursor: pointer;
}
.oy-bar:hover { background: var(--yuzey); }
.oy-bar-ad { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--limon); }
.nokta { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--kehribar); box-shadow: 0 0 10px var(--kehribar); }
.acik .nokta, .nokta.acik { background: var(--limon); box-shadow: 0 0 10px var(--limon); }
.oy-bar-cubuk { position: relative; height: 6px; border-radius: 999px; background: var(--yuzey-2); border: 1px dashed var(--ince-2); overflow: hidden; }
.oy-bar-cubuk.dolu { border-style: solid; border-color: transparent; background: var(--buz); }
.oy-bar-a { display: block; height: 100%; width: 0; background: var(--lila); }
.oy-bar-durum { white-space: nowrap; color: var(--soluk); }
@media (max-width: 760px) {
  .oy-bar { padding: 0 16px; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .oy-bar-durum { font-size: 10px; letter-spacing: 0.08em; }
}
/* Üst bar kapak üstünde şeffafken oy çubuğu yine okunur kalsın */
.ust:not(.dolu) .oy-bar { background: rgba(18, 17, 15, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top-color: transparent; }
.kapak-ic { padding-top: calc(var(--ust-yukseklik) + 34px + 12px); }
.bolum { scroll-margin-top: calc(var(--ust-yukseklik) + 34px); }

.eylemler { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-bottom: 18px; }
.eylem { margin: 0; }
.eylem-ikincil {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 22px; min-height: 60px;
  background: rgba(18, 17, 15, 0.55); color: var(--krem);
  border: 1px solid var(--ince-2); border-radius: 8px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 800 16px/1 var(--baslik-font); text-transform: uppercase; letter-spacing: 0.01em;
  cursor: pointer;
}
.eylem-ikincil:hover { border-color: var(--krem); }
@media (max-width: 480px) { .eylem-ikincil { width: 100%; justify-content: center; } }
.sonraki { margin: 0; font: 500 12px/1.4 var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soluk); }
.sonraki strong { color: var(--krem); font-weight: 700; }
.kunye-ayrac { opacity: 0.5; }
@media (max-width: 420px) { .kunye { flex-wrap: wrap; row-gap: 4px; } .kunye-ayrac { display: none; } .kunye span[data-alan="yayin_notu"] { width: 100%; padding-left: 18px; } }

/* Oy kartı: ana sayfa, panel ve bölüm dosyasında aynı */
.oy-soru { margin: 6px 0 10px; font: 800 clamp(34px, 7vw, 52px)/0.95 var(--baslik-font); letter-spacing: -0.035em; text-transform: none; color: var(--krem); }
.oy-soru.bekliyor { color: var(--lila); text-transform: uppercase; font-size: clamp(44px, 9vw, 72px); letter-spacing: -0.04em; }
.secenekler { margin: 6px 0 18px; }
.secenek-adlar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font: 800 clamp(20px, 4.4vw, 28px)/1 var(--baslik-font); text-transform: uppercase; letter-spacing: -0.02em; }
.secenek-adlar .a { color: var(--lila); }
.secenek-adlar .b { color: var(--buz); text-align: right; }
.secenek-cubuk { position: relative; height: 22px; border-radius: 6px; overflow: hidden; background: var(--buz); }
.secenek-cubuk .a { position: absolute; inset: 0 auto 0 0; background: var(--lila); }
.secenek-cubuk.bos { background: var(--yuzey-2); border: 1px dashed var(--ince-2); }
.secenek-cubuk.bos .a { display: none; }
.secenek-yuzde { display: flex; justify-content: space-between; margin-top: 8px; font: 700 13px/1 var(--mono-font); letter-spacing: 0.08em; }
.secenek-yuzde .a { color: var(--lila); }
.secenek-yuzde .b { color: var(--buz); }
.secenek-yuzde.bos { color: var(--soluk); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
.oy-karti .dugme + .dugme { margin-top: 10px; }
.dugme.ikincil { background: transparent; color: var(--krem); border: 1px solid var(--ince-2); margin-top: 10px; }
.dugme.ikincil:hover { color: var(--krem); border-color: var(--krem); }

/* Oy paneli: üstten inen yaprak (Saveo'daki gibi "pull down" hissi) */
.oy-sayfa {
  position: fixed; inset: 0 auto auto 50%; transform: translateX(-50%);
  width: min(100vw, 760px); max-width: none; max-height: 92vh; overflow: auto;
  margin: 0; padding: 0; border: 0;
  background: var(--zemin); color: var(--krem);
  border-radius: 0 0 18px 18px;
  border: 1px solid var(--ince); border-top: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.oy-sayfa::backdrop { background: rgba(18, 17, 15, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.oy-sayfa-ic { padding: 18px 20px 22px; }
@media (min-width: 760px) { .oy-sayfa-ic { padding: 22px 28px 28px; } }
.oy-sayfa-ic::after { content: ""; display: block; width: 44px; height: 4px; margin: 18px auto 0; border-radius: 999px; background: var(--ince-2); }
.oy-sayfa .panel-bas { margin-bottom: 14px; }
.oy-sayfa-h { margin: 0 0 6px; font: 800 clamp(26px, 5vw, 36px)/1 var(--baslik-font); letter-spacing: -0.03em; }
.oy-sayfa .oy-soru { font-size: clamp(22px, 4.2vw, 30px); margin: 0 0 14px; }
.oy-sayfa .oy-soru.bekliyor { font-size: clamp(30px, 6vw, 44px); }
.oy-sayfa .oy-nasil { margin-bottom: 16px; }
.oy-sayfa-dosya {
  display: block; margin-top: 10px; padding: 14px 18px; text-align: center; text-decoration: none;
  border: 1px solid var(--ince-2); border-radius: 8px; color: var(--krem);
  font: 700 13px/1.2 var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase;
}
.oy-sayfa-dosya:hover { color: var(--krem); border-color: var(--krem); }
.kapat { background: none; border: 1px solid var(--ince-2); border-radius: 6px; color: var(--krem); padding: 7px 10px; font: 700 11px/1 var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.kapat:hover { border-color: var(--krem); }
@media (prefers-reduced-motion: no-preference) {
  .oy-sayfa[open] { animation: yaprak-in 0.35s cubic-bezier(.2, .8, .2, 1); }
  @keyframes yaprak-in { from { transform: translate(-50%, -24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
}

/* Dosya bağlantısı (ana sayfa Dosya paneli) */
.dosya-baglanti { display: inline-block; margin-top: 18px; font: 700 13px/1 var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.dosya-baglanti:hover { text-decoration: underline; }

/* ------------------------------------------------------------ Bölüm dosyası sayfası */
.dosya-sayfa .ust { position: sticky; }
.dosya-ana { max-width: var(--genislik); margin: 0 auto; padding: 32px 16px 0; }
@media (min-width: 900px) { .dosya-ana { padding: 48px 24px 0; } }
.dosya-ic { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .dosya-ic { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: 40px; align-items: start; } }
.dosya-poster {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: 14px; border: 1px solid var(--ince); background: var(--yuzey);
}
.dosya-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.dosya-poster-no {
  position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 8px; background: rgba(18, 17, 15, 0.7); color: var(--krem);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dosya-poster-no span { font: 700 10px/1 var(--mono-font); letter-spacing: 0.2em; color: var(--limon); }
.dosya-poster-no strong { font: 800 34px/1 var(--baslik-font); letter-spacing: -0.04em; }
.dosya-h { margin: 12px 0 14px; font: 800 clamp(48px, 10vw, 110px)/0.88 var(--baslik-font); letter-spacing: -0.045em; text-transform: uppercase; }
.dosya-metin .dosya-ozet { margin-bottom: 22px; }
.dosya-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
@media (max-width: 480px) { .dosya-dugmeler .dugme-kucuk { flex: 1 1 100%; } }
.dugme-kucuk {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  border-radius: 8px; text-decoration: none;
  font: 700 12px/1 var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--limon); color: var(--murekkep);
}
.dugme-kucuk.ikincil { background: transparent; color: var(--krem); border: 1px solid var(--ince-2); }
.dugme-kucuk.ikincil:hover { border-color: var(--krem); color: var(--krem); }
.dugme-kucuk.pasif { background: transparent; color: var(--soluk); border: 1px dashed var(--ince-2); cursor: not-allowed; pointer-events: none; }
.dosya-sonuc { margin-top: 20px; padding: 22px 20px; background: var(--yuzey); border: 1px solid var(--ince); border-radius: 14px; }
.dosya-sonuc p:last-child { margin: 10px 0 0; }
.dosya-gezinti { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--ince); }
.dosya-gezinti a { font: 700 12px/1.4 var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.dosya-gezinti a:hover { text-decoration: underline; }
.dosya-sayfa .alt { margin-top: 96px; }

/* Canlı sayım etiketi */
.sayim-not { margin: 10px 0 0; font: 500 12px/1.5 var(--mono-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soluk); }
.canli-etiket {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 2px; margin-right: 4px; border-radius: 4px;
  background: var(--limon); color: var(--murekkep);
  font: 700 10px/1.3 var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase;
}
.canli-etiket::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--murekkep); }
.canli-etiket.donmus { background: var(--buz); }
@media (prefers-reduced-motion: no-preference) {
  .canli-etiket:not(.donmus)::before { animation: canli-nabiz 1.6s ease-in-out infinite; }
  @keyframes canli-nabiz { 50% { opacity: 0.25; } }
}