/* ==========================================================================
   BIO: Two Seconds — sayfaya özel bölümler.
   Palet, arka plan, araç çubuğu, hero ve alt bilgi ../styles.css'ten gelir.
   Vurgu rengi kartınkiyle aynı krem (script.js'teki accent: #d8c7b1) — afişin
   ve filmdeki kitabın kendi tonu.
   ========================================================================== */

:root { --ts: #d8c7b1; }

/* BIO: Tek kelimelik başlık — karusel başlığı kadar iri durabilir. */
#hero-title {
  font-size: clamp(30px, 6.4vw, 62px);
  line-height: 1.16;
  overflow-wrap: anywhere;
}

#hero { padding: 54px 0 40px; }

/* ── Künye satırı ───────────────────────────────────────────────────────── */
.spec {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  margin: 20px auto 0;
  padding: 0;
  /* BIO: Yedi öğe (asset sayısı eklendikten sonra) 640px'e sığmayıp ikinci
     satıra düşüyordu. Ölçülen genişlik: TR 755, EN 787, DE 835 — üçü de tek
     şerit kalsın diye 840. Dar ekranda zaten sarmalıyor. */
  max-width: 840px;
  list-style: none;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--text-dim);
}

/* BIO: Ayraç yalnızca aradakilerde; sarmalanınca satır başında nokta kalmasın
   diye ilk öğede gizli. */
.spec li + li::before {
  content: "·";
  margin: 0 12px 0 10px;
  color: color-mix(in srgb, var(--ts) 55%, transparent);
}

/* ── Bölüm başlıkları ───────────────────────────────────────────────────── */
.section-title {
  margin: 0 0 12px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 22px);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
  color: #fff;
}

.section-lead {
  margin: 0 auto 34px;
  max-width: 64ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-soft);
}

/* ── Metin blokları ─────────────────────────────────────────────────────── */
.prose {
  max-width: 68ch;
  margin: 0 auto;
}

.prose p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-soft);
}

.prose .pull {
  margin: 26px 0;
  padding-left: 18px;
  border-left: 2px solid color-mix(in srgb, var(--ts) 60%, transparent);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(15px, 2.1vw, 19px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #fff;
}

.note {
  max-width: 68ch;
  margin: 26px auto 0;
  font-size: 12.5px;
  line-height: 1.8;
  text-align: center;
  color: var(--text-dim);
}

/* BIO: Not içindeki dış bağlantı — küçük punto olduğu için altı hep çizili
   duruyor (yalnızca renkle ayrılmak 12.5px'te yeterli değil). */
.note-link {
  color: var(--ts);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ts) 45%, transparent);
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
  white-space: nowrap;
}

.note-link:hover,
.note-link:focus-visible {
  color: #fff;
  text-decoration-color: #fff;
}

.note-link:focus-visible { outline: 2px solid var(--ts); outline-offset: 3px; }

/* ── İzle ───────────────────────────────────────────────────────────────── */
.watch { padding-top: 18px; outline: none; }

/* BIO: Bu bölümde giriş cümlesi yok; başlık afişe yapışmasın diye boşluğu
   .section-lead'in bıraktığı kadar açıyoruz. */
.watch .section-title { margin-bottom: 34px; }

.poster {
  position: relative;
  display: block;
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 2px solid color-mix(in srgb, var(--ts) 45%, transparent);
  background: rgba(10, 24, 50, 0.5);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.poster img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.4s ease;
}

/* BIO: Oynat düğmesi posterin ortasında; afişin kendi yazısını örtmesin diye
   yarı saydam ve ince. */
.poster-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  color: #fff;
  background: rgba(7, 18, 41, 0.62);
  border: 2px solid color-mix(in srgb, var(--ts) 70%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--ts) 26%, transparent);
  backdrop-filter: blur(2px);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.4s ease;
}

.poster-play svg { width: 34px; height: 34px; margin-left: 4px; }

.poster-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 16px 12px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #fff;
  background: linear-gradient(to top, rgba(4, 10, 24, 0.88), transparent);
}

.poster:hover,
.poster:focus-visible {
  border-color: color-mix(in srgb, var(--ts) 62%, transparent);
  box-shadow: 0 20px 46px rgba(2, 8, 22, 0.55),
              0 0 44px color-mix(in srgb, var(--ts) 20%, transparent);
}

.poster:hover img,
.poster:focus-visible img { transform: scale(1.03); }

.poster:hover .poster-play,
.poster:focus-visible .poster-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(7, 18, 41, 0.8);
}

.poster:focus-visible { outline: 2px solid var(--ts); outline-offset: 4px; }

/* ── Platform düğmeleri ─────────────────────────────────────────────────── */
.links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 22px auto 0;
}

.lnk {
  --brand: var(--ts);
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(10, 24, 50, 0.5);
  border: 1px solid var(--line);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

/* BIO: Üçü de markaların sitelerinden ölçüldü:
   Higgsfield — higgsfield.ai'deki vurgu, asit sarısı rgb(209,254,23)
   YouTube    — rozetin kendi kırmızısı, ikondaki fill ile birebir aynı
   FilmFreeway— "Submit Now" düğmelerinin yeşili rgb(45,180,130)
   Hepsi koyu kart zemininde 5:1'in üstünde; yazıda değil, ikon/halka/okta. */
.lnk[data-brand="hf"] { --brand: #d1fe17; }
.lnk[data-brand="yt"] { --brand: #ff0000; }
.lnk[data-brand="ff"] { --brand: #2db482; }

/* BIO: YouTube'un rozeti kendi renklerini taşıyor (fill nitelikleri), bu
   yüzden dairenin currentColor'ından etkilenmesin. */
.lnk[data-brand="yt"] .lnk-ico svg { width: 22px; height: 22px; }

/* BIO: FilmFreeway'in "F" işareti PNG maske — dolgusu currentColor. */
.lnk-mark {
  display: block;
  width: 19px;
  height: 19px;
  background-color: currentColor;
  -webkit-mask: url("../assets/two-seconds/filmfreeway.png") center / contain no-repeat;
  mask: url("../assets/two-seconds/filmfreeway.png") center / contain no-repeat;
}

/* BIO: Üstünden geçen parıltı — hover'da soldan sağa süpürüyor. */
.lnk::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, var(--brand) 18%, transparent), transparent);
  transition: left 0.55s cubic-bezier(0.3, 0.7, 0.3, 1);
  pointer-events: none;
}

.lnk-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
              background 0.35s ease, box-shadow 0.35s ease;
}

.lnk-ico svg { width: 20px; height: 20px; display: block; }

.lnk-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.lnk-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #fff;
}

.lnk-sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.lnk-go {
  margin-left: auto;
  font-size: 15px;
  color: color-mix(in srgb, var(--brand) 75%, transparent);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.35s ease;
  opacity: 0.65;
}

.lnk:hover,
.lnk:focus-visible {
  transform: translateY(-5px);
  background: rgba(12, 30, 60, 0.66);
  border-color: color-mix(in srgb, var(--brand) 58%, transparent);
  box-shadow: 0 16px 34px rgba(2, 8, 22, 0.5),
              0 0 34px color-mix(in srgb, var(--brand) 16%, transparent);
}

.lnk:hover::after,
.lnk:focus-visible::after { left: 115%; }

.lnk:hover .lnk-ico,
.lnk:focus-visible .lnk-ico {
  transform: scale(1.12) rotate(-8deg);
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--brand) 30%, transparent);
}

.lnk:hover .lnk-go,
.lnk:focus-visible .lnk-go {
  transform: translate(3px, -3px);
  opacity: 1;
}

.lnk:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ── Festivaller ────────────────────────────────────────────────────────── */
.laurels { padding-top: 82px; }

/* BIO: Rozetler saydam zeminli ve kendi defne çerçevelerini taşıyor; üstlerine
   bir kart kutusu daha koymak iki çerçeve üst üste demek olurdu. Sarmalayan
   flex: tek rozet ortada durur, festival eklendikçe satır kendiliğinden büyür. */
.laurel-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.laurel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 10px;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.laurel img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  /* BIO: Altın rozet koyu lacivertin üstünde düz duruyordu; hafif bir sıcak
     parıltı onu zeminden ayırıyor, hover'da güçleniyor. */
  filter: drop-shadow(0 6px 20px rgba(2, 8, 22, 0.55))
          drop-shadow(0 0 16px rgba(216, 199, 177, 0.14));
  transition: filter 0.35s ease;
}

.laurel-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

/* BIO: Platform düğmelerindeki ad/alt satır tipografisinin aynısı. */
.laurel-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #fff;
  transition: color 0.3s ease;
}

.laurel-sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.laurel:hover,
.laurel:focus-visible { transform: translateY(-6px); }

.laurel:hover img,
.laurel:focus-visible img {
  filter: drop-shadow(0 10px 26px rgba(2, 8, 22, 0.6))
          drop-shadow(0 0 26px rgba(216, 199, 177, 0.3));
}

.laurel:focus-visible {
  outline: 2px solid var(--ts);
  outline-offset: 6px;
}

/* ── Konu · üç bakış ────────────────────────────────────────────────────── */
.story { padding-top: 82px; }

.gaze {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.gz {
  margin: 0;
  background: rgba(10, 24, 50, 0.5);
  border: 1px solid var(--line);
  border-top: 2px solid color-mix(in srgb, var(--ts) 45%, transparent);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 0.4s ease, box-shadow 0.4s ease;
}

.gz img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.gz:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--ts) 50%, transparent);
  box-shadow: 0 18px 38px rgba(2, 8, 22, 0.5);
}

.gz:hover img { transform: scale(1.045); }

.gz figcaption {
  display: block;
  padding: 16px 18px 18px;
}

.gz-tag {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--ts);
}

.gz-txt {
  display: block;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-soft);
}

/* ── 10 gün ─────────────────────────────────────────────────────────────── */
.tendays { padding-top: 82px; }

/* BIO: Beş kutu. Izgara yerine sarmalayan flex: dar ekranda son satır
   (3+2) ortalanıyor, ızgarada olduğu gibi sola yapışıp boş sütun bırakmıyor. */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
}

.stats li {
  /* BIO: Altı kutu geniş ekranda tek satır. Taban 150px'ken 960 dolayında
     beşi sığıp altıncısı alta düşüyordu (5+1); 130'da 980'e kadar altısı da
     aynı satırda kalıyor, altında medya sorgusu üçe indiriyor. */
  flex: 1 1 130px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 10px 18px;
  background: rgba(10, 24, 50, 0.5);
  border: 1px solid var(--line);
}

.st-n {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 3.4vw, 32px);
  letter-spacing: 0.02em;
  color: var(--ts);
}

.st-l {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--text-dim);
}

/* ── Üretim hattı ───────────────────────────────────────────────────────── */
.pipeline { padding-top: 82px; }

.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(10, 24, 50, 0.5);
  border: 1px solid var(--line);
  border-top: 2px solid color-mix(in srgb, var(--ts) 45%, transparent);
}

.step img,
.step video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #061024;
}

.step-body { padding: 20px 20px 22px; }

.step-no {
  display: block;
  margin-bottom: 10px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--ts) 62%, transparent);
}

.step-title {
  margin: 0 0 8px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: #fff;
}

.step-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-soft);
}

/* ── Künye ──────────────────────────────────────────────────────────────── */
.credits { padding-top: 82px; }

/* BIO: Yedi kart. auto-fit ile 5+2 gibi bölünüyor, son satır yarım kalıyor ve
   iki satırın yüksekliği tutmuyordu. Yönetmen künyenin başlığı olduğu için tam
   genişliğe alındı; kalan altı kart 3'e de 2'ye de tam bölünüyor, yani hiçbir
   kırılma noktasında boş hücre kalmıyor. */
.stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* BIO: Bütün satırlar en uzun satır kadar — tek satırlık değeri olan kart
     (ElevenLabs) ile iki satırlık olan (Seedance / Higgsfield) aynı boyda
     dursun; yoksa satır satır zıplıyor. */
  grid-auto-rows: 1fr;
  gap: 16px;
  margin: 0;
}

/* BIO: Künyenin baş satırı — bütün sütunları kaplar. */
.stk-lead { grid-column: 1 / -1; }

/* BIO: İçerik kartın ortasında — hem yatay hem dikey. Önceden etiket üstte,
   değer altta yaslıydı ve aradaki boşluk kartı boş gösteriyordu. */
.stk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 18px;
  text-align: center;
  background: rgba(10, 24, 50, 0.5);
  border: 1px solid var(--line);
  border-left: 2px solid color-mix(in srgb, var(--ts) 45%, transparent);
}

.stk dt {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--text-dim);
}

.stk dd {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #fff;
}

/* BIO: Baş satır tam genişlikte olduğu için değeri de bir tık iri. */
.stk-lead dd {
  font-size: 19px;
  letter-spacing: 0.04em;
}

.stk-note {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* ── Açılış animasyonu (../styles.css'teki bgs-enter'ı kullanır) ────────── */
body.is-entering .section-title,
body.is-entering .section-lead,
body.is-entering .poster,
body.is-entering .lnk,
body.is-entering .spec {
  animation: bgs-enter 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

body.is-entering .spec               { animation-delay: 380ms; }
body.is-entering #watch .section-title { animation-delay: 460ms; }
/* BIO: Bu bölümün giriş cümlesi kaldırıldığı için afiş bir kademe öne alındı. */
body.is-entering .poster             { animation-delay: 520ms; }
body.is-entering .lnk:nth-of-type(1) { animation-delay: 680ms; }
body.is-entering .lnk:nth-of-type(2) { animation-delay: 730ms; }
body.is-entering .lnk:nth-of-type(3) { animation-delay: 780ms; }

/* ── Duyarlı ────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .links { grid-template-columns: minmax(0, 1fr); }
  /* BIO: İki satır hâlinde 3+3 — büyüme kapalı ki iki satır aynı genişlikte
     olsun (gap 14px, üç sütun: (%100 - 28px) / 3). */
  .stats li { flex: 0 1 calc(33.333% - 9.4px); max-width: none; }
  /* BIO: Altı kart ikiye de tam bölünüyor — 3+3. */
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gaze { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .laurels, .story, .tendays, .pipeline, .credits { padding-top: 64px; }
}

@media (max-width: 640px) {
  #hero { padding: 32px 0 26px; }
  #hero-title { font-size: clamp(26px, 10vw, 40px); }
  .spec { font-size: 9.5px; }
  .spec li + li::before { margin: 0 8px 0 6px; }
  .section-lead { font-size: 13.5px; margin-bottom: 26px; }
  .poster-play { width: 62px; height: 62px; }
  .poster-play svg { width: 25px; height: 25px; }
  /* BIO: Dar ekranda iki sütun; beşinci kutu son satırda tek kalıyor ama
     diğerleriyle aynı genişlikte ve ortada duruyor (büyümesi kapalı). */
  .stats li { flex: 0 1 calc(50% - 7px); max-width: none; }
  .prose p { font-size: 14px; }
  .laurels, .story, .tendays, .pipeline, .credits { padding-top: 52px; }
  /* BIO: Dar ekranda rozet biraz küçülüyor; içindeki "FILM FESTIVAL" yazısı
     bundan daha küçükte okunmuyor. */
  .laurel img { width: 208px; }
  /* BIO: Dokunma hedefi 44px'in altına düşmesin. */
  .lnk { padding: 15px 16px; }
  .stack { grid-template-columns: minmax(0, 1fr); }
}

@media (hover: none) {
  .poster:hover img,
  .gz:hover img { transform: none; }
  .poster:hover .poster-play { transform: translate(-50%, -50%); }
  .lnk:hover, .gz:hover { transform: none; box-shadow: none; }
  .lnk:hover .lnk-ico { transform: none; }
  .laurel:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .poster, .poster img, .poster-play,
  .lnk, .lnk::after, .lnk-ico, .lnk-go,
  .laurel, .laurel img,
  .gz, .gz img { transition: none; }
  .laurel:hover, .laurel:focus-visible { transform: none; }
  .poster:hover img, .gz:hover img { transform: none; }
  .poster:hover .poster-play { transform: translate(-50%, -50%); }
  .lnk:hover, .lnk:focus-visible, .gz:hover { transform: none; }
  .lnk:hover .lnk-ico, .lnk:focus-visible .lnk-ico { transform: none; }
  .lnk:hover .lnk-go, .lnk:focus-visible .lnk-go { transform: none; }
}