/* ============================================================
   Nevada Mods — Sinematik vitrin (public) stilleri
   Sadece body.site altinda calisir; admin panele dokunmaz.
   ============================================================ */

body.site {
  /* v13.36: Sinematik-monokrom tema. Sicak/mavi accent kaldirildi; artik
     krom-beyaz ana vurgu + kisilmis celik-mavi tek sinyal rengi. Zemin
     soguk-notr murekkep. "Genc luks / otomotiv sinematik" yonu. */
  --ink-0:   #08090B;   /* en koyu zemin (soguk murekkep) */
  --ink-1:   #0E0F12;   /* panel */
  --ink-2:   #15161A;   /* yukseltilmis yuzey */
  --ink-3:   #1D1F24;   /* hover / kenar */
  --line:    #24262B;   /* hairline */
  --line-2:  #34373E;
  --text:    #F4F5F7;   /* krom beyaz (hafif soguk) */
  --text-2:  #9DA1A8;   /* gri */
  --text-3:  #63666C;   /* soluk gri */
  --chrome-a:#F4F5F7;   /* isik parlaklik ucu (ana vurgu) */
  --chrome-b:#AEB0B6;   /* platin */
  --chrome-c:#77797F;   /* golge tarafi */

  /* v13.60: BASLIK + BUTON RENGI — tek kaynak, gradyan yok.
     --title       : sayfa basliklari. TEMAYA UYAR ama saf beyaz/siyah DEGIL
                     (koyu: yumusak krom beyaz / acik: yumusak murekkep).
     --title-media : gorsel/video USTUNDEKI basliklar (hero slaytlari).
                     Her iki temada da ACIK kalir — arkasi fotograf.
     --btn-*       : birincil buton. Duz dolgu (iki-tonlu sert gradyan yok). */
  --title:        #ECEEF2;
  --title-media:  #F2F3F5;
  --title-shadow: none;

  --btn-fill:      #E6E8EC;   /* birincil buton dolgusu */
  --btn-fill-hi:   #F3F4F6;   /* hover */
  --btn-ink:       #16181D;   /* buton yazisi */
  --btn-media-fill:#EDEEF1;   /* gorsel ustundeki buton — temadan bagimsiz */
  --btn-media-ink: #14161B;

  /* Tek sinyal rengi: kisilmis celik-mavi (eski parlak #4da3ff'in asil hali).
     TUM mavi vurgular bu degiskenden gelir -> tek yerden ayarlanir. */
  --accent:   #6E8598;  /* celik mavi — link, teknik etiket, aktif iz */
  --accent-2: #556879;  /* koyu celik — hover/kenar */

  /* v13.44: "Yumuşak Premium" tipografi — Archivo/Inter -> Hanken Grotesk.
     Mono (küçük teknik etiketler/eyebrow/sayaç) korunur; kimlik bozulmaz. */
  --display: "Hanken Grotesk", system-ui, sans-serif;
  --body:    "Hanken Grotesk", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* gercekci sinematik zamanlama */
  --ease-cine:  cubic-bezier(0.16, 1, 0.3, 1);     /* guclu yavaslama */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);

  background: var(--ink-0);
  color: var(--text);
  font-family: var(--body);
}

/* ambians: hafif film grain + vinyet, sabit */
body.site .backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.6), transparent 55%),
    var(--ink-0);
}
body.site .backdrop::after {
  content: ""; position: absolute; inset: 0; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- ust bar ---- */
body.site .brand-strip {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: baseline; gap: 16px;
  padding: 20px 30px; backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(11,12,14,.85), rgba(11,12,14,.35) 70%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
body.site .brand-name {
  font-family: var(--display); font-weight: 600; font-size: 17px;
  letter-spacing: .26em; color: var(--text); text-decoration: none;
}
body.site .brand-dot { color: var(--chrome-b); margin: 0 1px; }
body.site .brand-sub {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .3em; color: var(--text-3); text-transform: uppercase;
}

/* ============================================================
   Ducati tarzi navigasyon — kartsiz, sadece linkler
   ============================================================ */
/* Yatay taşmayı engelle: hero'nun 100vw tam-genişlik breakout'u + dikey
   kaydırma çubuğunun genişliği, altta yatay bir çubuk yaratıyordu.
   overflow-x: clip taşmayı keser; dikey scroll/sticky/Lenis'i bozmaz. */
html { overflow-x: clip; }
body.site { overflow-x: clip; }

.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 22px clamp(24px, 5vw, 60px);
}
.site-nav__brand {
  font-family: var(--display); font-weight: 600; font-size: 18px;
  letter-spacing: .16em; color: var(--text); text-decoration: none;
  text-transform: uppercase; white-space: nowrap;
}
.site-nav__links { display: flex; align-items: center; gap: 34px; margin-left: 26px; }
.site-nav__links a {
  font-family: var(--body); font-weight: 600; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: #E4E6EA; text-decoration: none;
  position: relative; padding: 6px 0; transition: color .4s var(--ease-cine);
}
.site-nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--chrome-a); transition: width .4s var(--ease-cine);
}
.site-nav__links a:hover { color: var(--text); }
.site-nav__links a:hover::after { width: 100%; }
.site-nav__sub {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .3em; color: var(--text-3); text-transform: uppercase;
}
@media (max-width: 720px){
  .site-nav { gap: 14px; padding: 16px 20px; }
  .site-nav__links { gap: 16px; margin-left: 0; }
  .site-nav__links a { font-size: 10.5px; letter-spacing: .08em; }
  .site-nav__sub { display: none; }
}

/* ---- sol dikey sosyal cubuk (v14.00.1) ----
   Istek: (1) ust ve alt kilavuz cizgileri KALDIR, (2) ikonlar GERCEK marka
   renk/sekli. Cozum: cizgiler silindi; her ikon kendi resmi marka renginde
   (Instagram gercek gradyan). Davranis aynen: hero uzerinde gizli, kaydirinca
   soldan suzulup gelir (nav ile kardes -> .site-nav.is-scrolled ~ .social-rail). */
.social-rail {
  position: fixed; left: 0; top: 50%;
  transform: translate(-12px, -50%);           /* gizliyken hafif solda */
  opacity: 0; pointer-events: none;
  z-index: 45; display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 10px 14px;
  transition: opacity .6s var(--ease-cine), transform .6s var(--ease-cine);
}
/* kaydirilinca gorunur (nav ile ayni esik: >60px) */
.site-nav.is-scrolled ~ .social-rail {
  opacity: 1; pointer-events: auto; transform: translate(0, -50%);
}
.social-rail a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 11px; text-decoration: none;
  border: 1px solid transparent; background: transparent;
  transition: background .3s var(--ease-cine), border-color .3s var(--ease-cine),
              transform .3s var(--ease-cine), box-shadow .3s var(--ease-cine),
              filter .3s var(--ease-cine);
}
.social-rail a svg { display: block; width: 20px; height: 20px; }
/* GERCEK marka renkleri (Instagram gradyani SVG icinde) */
.social-rail a[data-brand="youtube"]  { color:#FF0000; }
.social-rail a[data-brand="discord"]  { color:#5865F2; }
.social-rail a[data-brand="telegram"] { color:#26A5E4; }
.social-rail a[data-brand="facebook"] { color:#1877F2; }
.social-rail a[data-brand="patreon"]  { color:#FF424D; }
.social-rail a[data-brand="tiktok"]   { color:#FE2C55; }
.social-rail a[data-brand="instagram"]{ color:#D62976; }  /* gradyan yoksa yedek */
.social-rail a:hover {
  /* zeminde ikonun kendi marka renginden hafif bir ton */
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,.26);
  transform: translateY(-2px);
}
.social-rail a:active { transform: translateY(0); }
/* karti/modal acikken ray zaten gizli (body.gd-open kurali); menu-open'da da
   dokunmatikte cakismasin diye kapali tut */
body.site .site-nav.menu-open ~ .social-rail { opacity: 0; pointer-events: none; }
@media (max-width: 900px){ .social-rail { display: none; } }
@media (prefers-reduced-motion: reduce){
  .social-rail { transition: opacity .2s linear; }
}

/* ============================================================
   HAKKIMIZDA sayfasi
   ============================================================ */
.cine-about {
  min-height: 100vh; display: flex; align-items: center;
  padding: 130px clamp(28px, 8vw, 140px) 90px; position: relative;
}
.cine-about__inner { max-width: 820px; }
.cine-about__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 7vw, 92px); line-height: .96; letter-spacing: -.03em;
  text-transform: uppercase; margin: 12px 0 34px;
  color: var(--title); text-shadow: var(--title-shadow);
}
.cine-about__body { margin-bottom: 40px; }
.cine-about__body p {
  font-size: clamp(15px, 1.6vw, 18px); line-height: 1.75; color: var(--text-2);
  margin: 0 0 20px; max-width: 720px;
}

body.site .stage {
  position: relative; z-index: 1;
  display: block !important;      /* eski flex ortalamayi kir */
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* ============================================================
   HERO — Rockstar tarzi tam-ekran sinematik sahne
   ============================================================ */
.cine-hero {
  position: relative; width: 100vw; height: 100vh; min-height: 620px;
  overflow: hidden; display: flex; align-items: flex-end;
  perspective: 1600px; margin: 0; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;   /* tam-genislik garanti */
}
.cine-hero__scene { position: absolute; inset: 0; transform-style: preserve-3d; }

/* arka plan: TUM ekrani kaplar (cover), buyuk + Ken Burns */
.cine-hero__bg {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  filter: brightness(.5) saturate(.9) blur(2px);
  transform: scale(1.12);
  animation: kenburns 34s var(--ease-soft) infinite alternate;
  will-change: transform;
}
/* on plan: araci ekranin ortasindan saga, BUYUK yerlestir */
.cine-hero__fg {
  position: absolute; inset: 0;
  background-size: contain; background-position: center bottom;
  background-repeat: no-repeat;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.6));
  transform: translateZ(60px) scale(1.02);
  will-change: transform;
}
/* kesim (seffaf PNG) modu: buyuk, saga yasli, sinematik golge */
.cine-hero__fg.cut {
  background-position: right 2% bottom 0;
  background-size: 62% auto;
  filter: drop-shadow(0 60px 80px rgba(0,0,0,.8));
}
@media (max-width: 1100px){ .cine-hero__fg.cut { background-size: 82% auto; background-position: center bottom; } }
@media (max-width: 640px){ .cine-hero__fg.cut { background-size: 130% auto; background-position: center 78%; opacity:.9; } }

.cine-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,12,14,.5) 0%, transparent 26%, transparent 50%, rgba(11,12,14,.92) 94%),
    linear-gradient(90deg, rgba(11,12,14,.85) 0%, rgba(11,12,14,.35) 40%, transparent 62%);
}
/* v13.50: banner-VIDEO hero'da yazi-tarafi scrim guclendirildi.
   Parlak/acik videolarda (or. gumus Passat) baslik + lede HER ZAMAN okunur.
   Slaytlarin per-slide dark_text kontrast sistemine dokunmaz (yalniz --video). */
.cine-hero--video .cine-hero__scrim{
  background:
    linear-gradient(180deg,
      rgba(11,12,14,.55) 0%, rgba(11,12,14,.12) 28%, transparent 50%,
      rgba(11,12,14,.72) 80%, rgba(11,12,14,.95) 100%),
    linear-gradient(90deg,
      rgba(11,12,14,.92) 0%, rgba(11,12,14,.70) 32%,
      rgba(11,12,14,.34) 58%, transparent 82%);
}
/* video-hero icerigi alt kenardan taskin/kesik olmasin: guvenli alt bosluk */
.cine-hero--video .cine-hero__content{ padding-bottom: clamp(64px, 12vh, 140px); }

.cine-hero__sweep {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.06) 45%, rgba(255,255,255,.11) 50%, transparent);
  mix-blend-mode: screen; pointer-events: none;
  animation: sweep 10s var(--ease-inout) infinite;
}

.cine-hero__content {
  position: relative; z-index: 5;
  padding: 0 clamp(28px, 7vw, 120px) clamp(60px, 11vh, 130px);
  max-width: 1200px; width: 100%;
}
.cine-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .36em;
  text-transform: uppercase; color: var(--chrome-b); margin-bottom: 22px;
}
.cine-eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--chrome-b), transparent); }
.cine-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(46px, 9vw, 128px); line-height: .92;
  letter-spacing: -.03em; margin: 0 0 24px; text-transform: uppercase;
  color: var(--title-media);   /* v13.60: gorsel ustu -> her temada acik */
}
.cine-lede {
  font-size: clamp(15px, 1.5vw, 19px); color: var(--text-2);
  max-width: 560px; line-height: 1.6; margin: 0 0 34px;
}
.cine-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.cine-scrollcue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 6; font-family: var(--mono); font-size: 10px; letter-spacing: .3em;
  color: var(--text-3); text-transform: uppercase; display: flex;
  flex-direction: column; align-items: center; gap: 8px;
}
.cine-scrollcue span { width: 1px; height: 38px; background: linear-gradient(180deg, var(--chrome-b), transparent); animation: cue 2.4s var(--ease-inout) infinite; }
.cine-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-decoration: none;
  padding: 15px 26px; border-radius: 3px; cursor: pointer;
  transition: transform .5s var(--ease-cine), box-shadow .5s var(--ease-cine);
}
/* v13.60: iki-tonlu krom gradyan + agir golge kaldirildi.
   Duz dolgu, yumusak golge, hafif parlama. Tam siyah/tam beyaz blok yok. */
.cine-btn--primary {
  color: var(--btn-ink);
  background: var(--btn-fill);
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  transition: transform .5s var(--ease-cine), box-shadow .5s var(--ease-cine),
              background .35s var(--ease-cine);
}
.cine-btn--primary:hover {
  transform: translateY(-2px);
  background: var(--btn-fill-hi);
  box-shadow: 0 10px 26px rgba(0,0,0,.2);
}
.cine-btn--primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease-cine);
}
.cine-btn--primary:hover::after { left: 130%; }
.cine-btn--ghost {
  color: var(--text); border: 1px solid var(--line-2);
  background: transparent;
}
.cine-btn--ghost:hover { border-color: var(--chrome-c); background: rgba(255,255,255,.05); transform: translateY(-2px); }

/* alt kayan ipucu */
.cine-scrollcue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 6; font-family: var(--mono); font-size: 10px; letter-spacing: .3em;
  color: var(--text-3); text-transform: uppercase; display: flex;
  flex-direction: column; align-items: center; gap: 8px;
}
.cine-scrollcue span { width: 1px; height: 34px; background: linear-gradient(180deg, var(--chrome-b), transparent); animation: cue 2.4s var(--ease-inout) infinite; }

/* ============================================================
   KATALOG — Rockstar tarzi tam-genislik paneller
   ============================================================ */
.cine-catalog { position: relative; padding: clamp(70px,11vh,130px) 0 clamp(40px,7vh,90px); }
.cine-catalog-head { padding: 0 clamp(28px,7vw,120px); margin-bottom: 44px; }
.cine-sec-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 14px;
}
.cine-sec-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 5vw, 60px); letter-spacing: -.02em;
  line-height: 1.0; margin: 0; color: var(--text); text-transform: uppercase;
}
.cine-sec-sub { color: var(--text-2); font-size: 15.5px; line-height: 1.6; margin: 10px 0 0; }

.cine-panels { display: flex; flex-direction: column; gap: 0; }
.cine-panel {
  position: relative; display: block; text-decoration: none;
  height: clamp(360px, 62vh, 620px); overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.05);
}
.cine-panel__media { position: absolute; inset: 0; }
.cine-panel__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.05); filter: brightness(.62) saturate(.95);
  transition: transform 1.4s var(--ease-cine), filter 1.4s var(--ease-cine);
  will-change: transform;
}
.cine-panel:hover .cine-panel__media img { transform: scale(1.12); filter: brightness(.8) saturate(1.05); }
.cine-panel__grad {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,12,14,.9) 0%, rgba(11,12,14,.4) 35%, transparent 65%),
              linear-gradient(0deg, rgba(11,12,14,.7), transparent 45%);
}
.cine-panel__inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(28px, 7vw, 120px); gap: 30px;
}
.cine-panel__eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--chrome-b); margin-bottom: 16px;
}
.cine-panel__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(32px, 6vw, 82px); line-height: .95; letter-spacing: -.03em;
  text-transform: uppercase; margin: 0; color: var(--text);
  text-shadow: 0 4px 40px rgba(0,0,0,.5);
  transition: transform .8s var(--ease-cine);
}
.cine-panel:hover .cine-panel__title { transform: translateX(10px); }
.cine-panel__cta {
  flex: 0 0 auto;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px; border: 1px solid var(--line-2); border-radius: 3px;
  background: rgba(255,255,255,.03); backdrop-filter: blur(6px);
  transition: background .5s var(--ease-cine), color .5s var(--ease-cine), transform .5s var(--ease-cine);
}
.cine-panel__cta b { transition: transform .5s var(--ease-cine); }
.cine-panel:hover .cine-panel__cta { background: var(--chrome-a); color: var(--ink-0); border-color: var(--chrome-a); }
.cine-panel:hover .cine-panel__cta b { transform: translateX(5px); }
@media (max-width: 720px){
  .cine-panel__cta { display: none; }
  .cine-panel__inner { align-items: flex-end; padding-bottom: 40px; }
}
.cine-card__noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-family: var(--mono); font-size: 12px; letter-spacing: .2em; background: var(--ink-2); }

/* ============================================================
   Scroll-reveal maskesi (IntersectionObserver ile .in eklenir)
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(28px);
  clip-path: inset(0 0 100% 0);
  transition: opacity 1s var(--ease-cine), transform 1s var(--ease-cine), clip-path 1.1s var(--ease-cine);
  will-change: opacity, transform, clip-path;
}
.reveal.in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

/* ============================================================
   MOD DETAY — paralaks galeri
   ============================================================ */
.cine-detail { padding: clamp(30px,5vh,60px) clamp(24px,6vw,90px) 90px; }
.cine-back {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--text-3);
  margin-bottom: 30px; transition: color .4s var(--ease-cine);
}
.cine-back:hover { color: var(--text); }

.cine-detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px){ .cine-detail-grid { grid-template-columns: 1fr; gap: 30px; } }

.cine-stage-frame {
  position: relative; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden;
  background: var(--ink-2);
  /* v14.05: gorsel will-change+GSAP paralaks yuzunden kendi GPU katmaninda ->
     overflow:hidden+border-radius bunu KOSEDE tam kirpamiyordu (ince bosluk).
     clip-path her tur cocugu kusursuz keser; golge de clip'e uyan drop-shadow.
     (Kullanilmayan perspective kaldirildi — dikey scrub paralaks 2D translate.) */
  clip-path: inset(0 round 12px);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.20));
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.cine-stage-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .8s var(--ease-cine), transform 6s var(--ease-soft);
  transform: scale(1.06);
}
.cine-stage-frame.zoom img { transform: scale(1.14); }  /* JS ile yavas Ken Burns */
/* v14.00 — \"kata\" duzeltmesi: eski overlay transparent 70%'te BIRDEN kararip
   fotografin altinda sert bir kivrim/cizgi olusturuyordu (ozellikle acik temada
   acik zeminli fotoda). Artik uzun ve yumusak bir rampa + temaya duyarli ton
   -> gorunur kenar/kat yok, sadece hafif bir dip golgesi. */
.cine-stage-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
              transparent 46%,
              color-mix(in srgb, var(--ink-0) 20%, transparent) 78%,
              color-mix(in srgb, var(--ink-0) 34%, transparent) 100%);
}
.cine-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cine-thumb {
  width: 92px; height: 60px; border-radius: 5px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: var(--ink-2); padding: 0;
  opacity: .6; transition: opacity .4s var(--ease-cine), border-color .4s var(--ease-cine), transform .4s var(--ease-cine);
}
.cine-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cine-thumb:hover { opacity: .85; transform: translateY(-2px); }
.cine-thumb.active { opacity: 1; border-color: var(--chrome-b); }

.cine-info-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.cine-info-title { font-family: var(--display); font-weight: 600; font-size: clamp(26px,3.4vw,42px); letter-spacing: -.02em; line-height: 1.05; margin: 0 0 18px; color: var(--text); }
.cine-tier {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--ink-1); margin-bottom: 22px;
}
.cine-tier .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chrome-b); box-shadow: 0 0 10px var(--chrome-b); }
.cine-tier b { color: var(--text); font-weight: 500; }
.cine-desc { color: var(--text-2); font-size: 15px; line-height: 1.7; margin-bottom: 28px; }
.cine-cta { width: 100%; justify-content: center; }
.cine-hint { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 12px; text-align: center; letter-spacing: .04em; }

.cine-admin-link { text-align: center; padding: 40px; }
.cine-admin-link a { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--text-3); text-decoration: none; border-bottom: 1px solid transparent; transition: color .4s, border-color .4s; }
.cine-admin-link a:hover { color: var(--text-2); border-color: var(--line-2); }

/* ---- footer public ---- */
body.site .foot {
  position: relative; z-index: 1; text-align: center;
  padding: 34px 24px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text-3);
}
body.site .foot a { color: var(--text-2); text-decoration: none; }
body.site .foot a:hover { color: var(--text); }
body.site .demo-pill { color: var(--chrome-b); }

/* ============================================================
   keyframes
   ============================================================ */
@keyframes kenburns {
  0%   { transform: scale(1.16) translate(0, 0); }
  100% { transform: scale(1.24) translate(-2.5%, -2%); }
}
@keyframes sweep {
  0%   { left: -50%; opacity: 0; }
  35%  { opacity: 1; }
  70%  { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}
@keyframes divsweep {
  0% { left: -30%; } 60% { left: 130%; } 100% { left: 130%; }
}
@keyframes cue {
  0%,100% { opacity: .3; transform: scaleY(.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ---- erisilebilirlik: hareket azaltma ---- */
@media (prefers-reduced-motion: reduce) {
  body.site * { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; clip-path: none; }
}

/* ---- mobil ---- */
@media (max-width: 640px) {
  .cine-hero { height: 82vh; min-height: 460px; }
  .cine-hero__content { padding-bottom: 60px; }
  .brand-sub { display: none; }
}

/* ============================================================
   v13.13 — GSAP + Lenis hareket motoru destek stilleri
   ============================================================ */

/* Lenis momentum scroll — zorunlu stiller */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* SplitText — baslik satir maskesi (maskeden yukseliye acilir) */
.cine-title .cine-line-mask {
  display: block; overflow: hidden;
  padding-bottom: .06em;   /* alt uzantilar (g, y, p) kirpilmasin */
}
.cine-title .cine-line {
  display: block; will-change: transform;
  /* v13.58: gradyan yok -> satirlar da duz baslik rengini alir */
  background: none;
  color: var(--title-media); -webkit-text-fill-color: var(--title-media);
}

/* GSAP scrub'li ogeler icin GPU ipuclari */
.cine-hero__bg, .cine-panel__media img, #cineStageImg { will-change: transform; }
/* Not: hero icerigi flash'ini cine.js senkron gsap.set() ile onler; GSAP yoksa
   veya reduced-motion'da bu kod calismaz, icerik normal gorunur (saglam fallback). */

/* ============================================================
   v13.14 — ROCKSTAR MIMARISI
   Slaytli hero, saydam nav, hikaye bolumleri, kayan serit,
   siyah yumusak bolum gecisleri, duzenleme-modu etiketleri
   ============================================================ */

/* ---- NAV: en üstte tam saydam; kaydırınca YUMUŞAK bant gelir ----
   Bant ayrı bir ::before katmanı: üstte opak, aşağı indikçe hiç yoktan
   şeffaflaşır (maske sayesinde arka plan + blur birlikte erir; sert alt
   çizgi yok). Menü yazıları bandın üstünde tam net kalır. */
.site-nav {
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  transition: padding .5s var(--ease-cine);
}
.site-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
              rgba(11,12,14,.94) 0%, rgba(11,12,14,.62) 45%, rgba(11,12,14,0) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
  opacity: 0;
  transition: opacity .6s var(--ease-cine);
}
.site-nav.is-scrolled::before { opacity: 1; }
.site-nav.is-scrolled { padding-top: 14px; padding-bottom: 14px; }

/* ---- HERO SLAYT SISTEMI ---- */
.cine-hero--slides .cine-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  will-change: opacity;
}
.cine-hero--slides .cine-slide.is-active { opacity: 1; visibility: visible; }
.cine-slide__bg {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  filter: brightness(.55) saturate(.95);
  transform: scale(1.08);
  will-change: transform;
}

/* slayt metinleri: ust uste, aktif olan gorunur */
.cine-hero__content { position: relative; }
.cine-slide-text { display: none; }
.cine-slide-text.is-active { display: block; }

/* v14.27: Instagram/Stories tarzi gecis gostergesi (sag alt).
   Dinlenme halinde KUCUK YUVARLAK NOKTA; sadece o an AKTIF olan banner'in
   noktasi genis bir "cubuk"a donusup dolar (ilerleme). Slayt degisince o
   cubuk KALICI dolu kalmaz -- capraz-solmayla tekrar sade noktaya doner ve
   sirayi yeni aktif nokta devralir (bkz. cine.js fillDot()). Buton kutusu
   HER ZAMAN ayni sabit genislikte (40px) -- nokta<->cubuk gecisinde satir
   genisligi ZIPLAMAZ, sadece ic gorsel capraz-soler. */
.cine-slide-nav {
  position: absolute; z-index: 7;
  right: clamp(24px, 5vw, 60px); bottom: clamp(28px, 6vh, 56px);
}
/* v14.29b: gosterge ESKI (daha buyuk) haline dondu (kullanici istegi:
   alttaki kontrol alani bu kadar kucuk olmasin). Buton kutusu sabit 40px;
   dinlenmede kucuk yuvarlak nokta, aktifte capraz-solmayla cubuga doner. */
.cine-slide-dot {
  position: relative; width: 40px; height: 22px; padding: 0;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cine-slide-dot__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.42); opacity: 1; transform: scale(1);
  transition: opacity .3s var(--ease-cine), transform .3s var(--ease-cine), background .25s;
}
.cine-slide-dot:hover .cine-slide-dot__dot { background: rgba(255,255,255,.8); }
.cine-slide-dot__track {
  position: absolute; left: 2px; right: 2px; top: 50%; height: 3px;
  transform: translateY(-50%); border-radius: 2px;
  background: rgba(255,255,255,.18);
  opacity: 0; transition: opacity .3s var(--ease-cine);
}
.cine-slide-dot__fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0%;
  background: var(--chrome-a); border-radius: 2px;
  box-shadow: 0 0 10px rgba(244,246,248,.55);
}
/* aktif: nokta soner-kuculur, cubuk belirir (dolumu cine.js/GSAP yapar) */
.cine-slide-dot.is-active .cine-slide-dot__dot { opacity: 0; transform: scale(.35); }
.cine-slide-dot.is-active .cine-slide-dot__track { opacity: 1; }
@media (max-width: 640px){ .cine-slide-nav { right: 18px; bottom: 20px; } .cine-slide-dot { width: 30px; } }

/* v14.27: elle surukleme icin imlec ipucu + tarayicinin kendi yatay
   pan/zoom jestini bu alanda devre disi birak (dikey sayfa kaydirmasi
   pan-y ile SERBEST kalir -- cine.js sadece yatay niyeti ele alir).
   Tum hero'ya uygulanir (sadece gorsel degil, yazi ustunden de suruklenebilsin). */
.cine-hero--slides { touch-action: pan-y; cursor: grab; }
.cine-hero--slides.is-dragging { cursor: grabbing; }
.cine-hero--slides .cine-slide-nav,
.cine-hero--slides .cine-actions { touch-action: auto; cursor: auto; }

/* ---- SIYAH YUMUSAK GECIS MASKELERI (Rockstar bolum kaynasmasi) ---- */
.cine-fade { position: absolute; left: 0; right: 0; height: clamp(90px, 16vh, 200px); pointer-events: none; z-index: 4; }
.cine-fade--bottom { bottom: 0; background: linear-gradient(180deg, transparent, var(--ink-0)); }
.cine-fade--top    { top: 0;    background: linear-gradient(0deg,   transparent, var(--ink-0)); }
.cine-catalog { position: relative; }

/* ---- HIKAYE BOLUMLERI: gorsel + bilgi, donusumlu yon ---- */
.cine-stories { position: relative; padding: clamp(50px,8vh,110px) 0 0; }
.cine-story {
  position: relative;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(30px, 5vw, 80px); align-items: center;
  padding: clamp(40px,7vh,90px) clamp(28px,7vw,120px);
}
.cine-story--flip { grid-template-columns: 1fr 1.15fr; }
.cine-story--flip .cine-story__media { order: 2; }
.cine-story--flip .cine-story__text  { order: 1; }
.cine-story__media {
  position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.cine-story__media img {
  width: 100%; height: 110%; object-fit: cover; display: block;
  will-change: transform;
}
.cine-story__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(28px, 4.4vw, 56px); line-height: 1.0; letter-spacing: -.02em;
  text-transform: uppercase; margin: 10px 0 20px;
  color: var(--title); text-shadow: var(--title-shadow);
}
.cine-story__body p {
  color: var(--text-2); font-size: clamp(14.5px, 1.4vw, 17px);
  line-height: 1.75; margin: 0 0 16px; max-width: 560px;
}
.cine-story__text .cine-btn { margin-top: 8px; }
@media (max-width: 860px){
  .cine-story, .cine-story--flip { grid-template-columns: 1fr; gap: 24px; }
  .cine-story--flip .cine-story__media { order: 0; }
  .cine-story--flip .cine-story__text { order: 1; }
}

/* ---- KAYAN FOTO SERIDI (sagdan sola sonsuz) ---- */
.cine-strip {
  position: relative; overflow: hidden;
  padding: clamp(40px,7vh,80px) 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cine-strip__track {
  display: flex; gap: clamp(14px, 2vw, 26px); width: max-content;
  will-change: transform;
}
.cine-strip__item {
  flex: 0 0 auto; width: clamp(240px, 26vw, 420px); aspect-ratio: 16/9;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--line);
  background: var(--ink-2);
}
.cine-strip__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.8) saturate(.95);
  transition: filter .6s var(--ease-cine), transform .6s var(--ease-cine);
}
.cine-strip__item:hover img { filter: brightness(1) saturate(1.05); transform: scale(1.04); }

/* ---- DUZENLEME MODU ETIKETLERI (sadece admin + ?duzenleme=1) ---- */
.edit-tag {
  position: absolute; top: 10px; left: 10px; z-index: 60;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; color: #0b0c0e;
  background: #ffd84d; border-radius: 4px; padding: 4px 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); pointer-events: none;
}
.edit-tag--sec { top: 18px; left: clamp(28px,7vw,120px); }
.cine-slide-text { position: relative; }
.cine-slide-text .edit-tag { top: -34px; left: 0; }
.cine-catalog-head { position: relative; }
.cine-catalog-head .edit-tag { top: -30px; left: clamp(28px,7vw,120px); }

/* ============================================================
   v13.15 — ROCKSTAR OLCEGI
   Tipografi kucultuldu + panelden --tscale ile ayarlanir,
   nav ferahtatildi (3 bolge), katalog kayan kart bandina donustu.
   Bu blok sonda oldugu icin yukaridaki eski olculeri ezer.
   ============================================================ */

/* ---- TIPOGRAFI: Rockstar olcusu × panel carpani ---- */
body.site { font-size: calc(15px * var(--tscale, 1)); }

.cine-title {
  font-size: calc(clamp(32px, 5.5vw, 78px) * var(--tscale, 1));
  line-height: 1.0; letter-spacing: -.02em; margin-bottom: 18px;
}
.cine-lede {
  font-size: calc(clamp(14px, 1.25vw, 16.5px) * var(--tscale, 1));
  max-width: 480px; margin-bottom: 26px;
}
.cine-eyebrow { font-size: calc(11px * var(--tscale, 1)); margin-bottom: 16px; }
.cine-btn { font-size: calc(13px * var(--tscale, 1)); padding: 13px 22px; }

.cine-sec-eyebrow { font-size: calc(10.5px * var(--tscale, 1)); }
.cine-sec-title {
  font-size: calc(clamp(22px, 3.2vw, 40px) * var(--tscale, 1));
  letter-spacing: -.01em;
}

.cine-story__title { font-size: calc(clamp(22px, 3.2vw, 42px) * var(--tscale, 1)); margin: 8px 0 16px; }
.cine-story__body p { font-size: calc(clamp(13.5px, 1.2vw, 15.5px) * var(--tscale, 1)); line-height: 1.7; }

.cine-about__title { font-size: calc(clamp(30px, 5vw, 64px) * var(--tscale, 1)); }
.cine-about__body p { font-size: calc(clamp(14px, 1.4vw, 16.5px) * var(--tscale, 1)); }
.cine-info-title { font-size: calc(clamp(22px, 2.8vw, 34px) * var(--tscale, 1)); }

/* ---- NAV: Rockstar gibi acik ve ferah — logo | ortada linkler | sag bilgi ---- */
.site-nav {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
  padding: 26px clamp(28px, 5vw, 70px);
}
.site-nav__brand { justify-self: start; font-size: calc(17px * var(--tscale, 1)); letter-spacing: .18em; }
.site-nav__links { justify-self: center; margin-left: 0; gap: clamp(28px, 4vw, 52px); }
.site-nav__links a { font-size: calc(13px * var(--tscale, 1)); font-weight: 600; letter-spacing: .06em; padding: 8px 0; }
.site-nav__sub { justify-self: end; margin-left: 0; font-size: calc(10px * var(--tscale, 1)); }
.site-nav.is-scrolled { padding-top: 15px; padding-bottom: 15px; }
@media (max-width: 860px){
  .site-nav { grid-template-columns: auto 1fr; }
  .site-nav__links { justify-self: end; gap: 18px; }
  .site-nav__sub { display: none; }
}

/* hero icerigine daha genis nefes payi */
.cine-hero__content { padding-bottom: clamp(70px, 13vh, 150px); max-width: 1080px; }

/* ---- KATALOG: kayan kart bandi (Rockstar alt-serit hissi) ---- */
.cine-cat-band {
  position: relative; overflow: hidden;
  padding: 6px 0 10px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* tek mod: bant kaymaz, kart sola hizali sabit durur */
.cine-cat-band.is-static {
  mask-image: none; -webkit-mask-image: none;
  padding-left: clamp(28px, 7vw, 120px); padding-right: clamp(28px, 7vw, 120px);
}
.cine-cat-track {
  display: flex; gap: clamp(16px, 2vw, 28px); width: max-content;
  will-change: transform; padding: 4px 2px;
}
.cine-cat-band.is-static .cine-cat-track { width: auto; flex-wrap: wrap; }

.cine-cat-card {
  position: relative; flex: 0 0 auto;
  width: clamp(300px, 36vw, 560px); aspect-ratio: 16/9;
  border-radius: 10px; overflow: hidden; text-decoration: none;
  border: 1px solid var(--line); background: var(--ink-2);
  transform: translateZ(0);
  transition: transform .7s var(--ease-cine), border-color .7s var(--ease-cine), box-shadow .7s var(--ease-cine);
}
.cine-cat-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-2);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.cine-cat-card__media { position: absolute; inset: 0; }
.cine-cat-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.72) saturate(.95);
  transform: scale(1.03);
  transition: transform 1.2s var(--ease-cine), filter 1.2s var(--ease-cine);
}
.cine-cat-card:hover .cine-cat-card__media img { transform: scale(1.09); filter: brightness(.9) saturate(1.05); }
.cine-cat-card__grad {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,12,14,.88) 0%, rgba(11,12,14,.25) 45%, transparent 70%);
}
.cine-cat-card__inner {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 20px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 14px;
}
.cine-cat-card__eyebrow {
  font-family: var(--mono); font-size: calc(10px * var(--tscale, 1));
  letter-spacing: .24em; text-transform: uppercase; color: var(--chrome-b);
  margin-bottom: 8px;
}
.cine-cat-card__title {
  font-family: var(--display); font-weight: 600;
  font-size: calc(clamp(17px, 1.8vw, 24px) * var(--tscale, 1));
  line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase;
  margin: 0; color: var(--text);
}
.cine-cat-card__cta {
  flex: 0 0 auto; font-family: var(--mono);
  font-size: calc(11px * var(--tscale, 1)); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-2);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .5s var(--ease-cine), transform .5s var(--ease-cine), color .5s var(--ease-cine);
}
.cine-cat-card:hover .cine-cat-card__cta { opacity: 1; transform: translateX(0); color: var(--chrome-a); }

/* katalog basligi ile bant arasi bosluk azalt — daha toplu, ferah blok */
.cine-catalog { padding: clamp(56px,9vh,100px) 0 clamp(50px,8vh,90px); }
.cine-catalog-head { margin-bottom: 30px; }

/* slayt gecisi: gorsel katmanina yumusak filtre gecisi icin */
.cine-slide__bg { transition: none; }

/* ============================================================
   v13.16 — ROCKSTAR SAHNE KUTUSU
   Hero tam ekran degil: kenarlardan bosluklu, yuvarlatilmis sahne.
   Hafif scrim, scroll'la koyulasan alt gecis, surukleme imleci.
   ============================================================ */

/* hero: full-bleed hack iptal -> kenarlardan nefes alan kutu */
.cine-hero--slides {
  width: auto; left: auto; right: auto;
  margin: calc(78px + 2vh) clamp(16px, 3.5vw, 76px) 0;
  margin-left: clamp(16px, 3.5vw, 76px);   /* eski -50vw kesin ezilsin */
  margin-right: clamp(16px, 3.5vw, 76px);
  height: min(84vh, 880px); min-height: 520px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 40px 110px rgba(0,0,0,.55);
  cursor: grab;
}
.cine-hero--slides.is-dragging { cursor: grabbing; }
.cine-hero--slides.is-dragging .cine-slide__bg { transition: none; }
@media (max-width: 640px){
  .cine-hero--slides { margin: 70px 10px 0; height: 76vh; min-height: 440px; border-radius: 14px; }
}

/* Rockstar olcusu: baslik tavani 64px */
.cine-title { font-size: calc(clamp(28px, 4.6vw, 64px) * var(--tscale, 1)); }
.cine-hero__content { padding-bottom: clamp(48px, 9vh, 100px); }

/* scrim: HAFIF — Rockstar'daki gibi gorsel nefes alsin */
.cine-hero--slides .cine-hero__scrim {
  background:
    linear-gradient(180deg, rgba(11,12,14,.30) 0%, transparent 28%, transparent 52%, rgba(11,12,14,.72) 97%),
    linear-gradient(90deg, rgba(11,12,14,.50) 0%, rgba(11,12,14,.16) 40%, transparent 58%);
}

/* alt siyahlik: baslangicta HAFIF (JS scroll'la .88'e kadar koyulastirir).
   Renk saf siyah degil, zemin tonu — "kapkara" asla olmaz. */
.cine-hero--slides .cine-fade--bottom {
  height: clamp(70px, 12vh, 150px);
  background: linear-gradient(180deg, transparent, rgba(11,12,14,.94));
  opacity: .35;
}

/* dokunmatik: dikey kaydirma calissin, yatay surukleme bize kalsin */
.cine-hero--slides { touch-action: pan-y; }
.cine-hero--slides .cine-hero__content a { cursor: pointer; }

/* ============================================================
   v13.17 — ROCKSTAR BIREBIR UST
   Cerceve/kutu iptal: hero usttte TAM GENISLIK, kenarsiz.
   Gorsel aydinlik, karartma minimum, alt gecis sabit-yumusak.
   ============================================================ */

/* sahne kutusu geri alindi -> tam genislik, cercevesiz */
.cine-hero--slides {
  width: 100vw; left: 50%; right: 50%;
  margin: 0 -50vw 0;
  margin-left: -50vw; margin-right: -50vw;
  height: 100svh; min-height: 560px; max-height: none;
  border-radius: 0; border: none; box-shadow: none;
}
@media (max-width: 640px){
  .cine-hero--slides { margin: 0 -50vw 0; margin-left: -50vw; margin-right: -50vw;
    height: 86svh; min-height: 460px; border-radius: 0; }
}

/* gorsel AYDINLIK — Rockstar parlakliginda; karartma yok denecek kadar az */
.cine-hero--slides .cine-slide__bg {
  filter: brightness(.82) saturate(1);
  transform: none;                 /* zoom yok: taban olcek 1 (JS KB acarsa kendisi verir) */
}

/* scrim: minimum — sadece yazi bolgesinde okunabilirlik */
.cine-hero--slides .cine-hero__scrim {
  background:
    linear-gradient(180deg, rgba(11,12,14,.16) 0%, transparent 22%, transparent 58%, rgba(11,12,14,.55) 100%),
    linear-gradient(90deg, rgba(11,12,14,.38) 0%, rgba(11,12,14,.10) 36%, transparent 55%);
}

/* alt gecis: SABIT ve YUMUSAK — scroll'la koyulasma yok, sadece nazik kaynasma */
.cine-hero--slides .cine-fade--bottom {
  height: clamp(80px, 14vh, 170px);
  background: linear-gradient(180deg, transparent, rgba(11,12,14,.55) 55%, rgba(11,12,14,.92));
  opacity: 1;
}

/* ============================================================
   v13.17 — ROCKSTAR AYNISI: cercevesiz tam-genislik ust, aydinlik gorsel
   Kutu denemesi geri alindi. Bu blok v13.16 kutusunu ezer.
   ============================================================ */

/* hero: KENARDAN KENARA, cercevesiz (Rockstar duzeni) */
.cine-hero--slides {
  width: 100vw; left: 50%; right: 50%;
  margin: 0; margin-left: -50vw; margin-right: -50vw;
  height: 92vh; min-height: 560px; max-height: none;
  border-radius: 0; border: 0; box-shadow: none;
}
@media (max-width: 640px){
  .cine-hero--slides { margin: 0; margin-left: -50vw; margin-right: -50vw; height: 80vh; min-height: 460px; border-radius: 0; }
}

/* gorsel AYDINLIK — Rockstar parlakliginda */
.cine-slide__bg { filter: brightness(.82) saturate(1); }

/* karartma sadece yazi bolgesinde: ust cok hafif (nav okunurlugu),
   sol-alt yazi zonu, geri kalani temiz */
.cine-hero--slides .cine-hero__scrim {
  background:
    linear-gradient(180deg, rgba(11,12,14,.28) 0%, transparent 18%, transparent 58%, rgba(11,12,14,.58) 100%),
    linear-gradient(90deg, rgba(11,12,14,.42) 0%, rgba(11,12,14,.12) 38%, transparent 55%);
}

/* ============================================================
   v13.19 — ROCKSTAR: hero foto -> siyah KATALOG uzun yumusak erime.
   Onceki alt gecis %55 opakti -> dipte foto yari gorunuyor, sonra
   katalog birden tam siyah basliyordu = gorunur cizgi.
   Cozum: erime UZUN + opaklik 1 + en dipte TAM --ink-0 (katalog zemini).
   Kademeli duraklar: koyulasma alta yiginlir -> arac ust kismi net kalir,
   "koyulasma baslangic cizgisi" gorunmez, foto siyaha kaynasir.
   ============================================================ */
.cine-hero--slides .cine-fade--bottom {
  height: clamp(200px, 30vh, 420px);
  opacity: 1;
  background: linear-gradient(180deg,
    rgba(11,12,14,0)    0%,
    rgba(11,12,14,.04) 24%,
    rgba(11,12,14,.14) 44%,
    rgba(11,12,14,.36) 62%,
    rgba(11,12,14,.64) 78%,
    rgba(11,12,14,.88) 91%,
    var(--ink-0)      100%);
}

/* v13.31: baslik arkasi karartma KALDIRILDI (kullanici istegi). */
.cine-title { text-shadow: none; }

/* ============================================================
   v13.20 — ROCKSTAR KONTROLLER + SCROLL KARARMA + SERIT SURUKLEME
   ============================================================ */

/* --- asagi kaydirinca hero kararir (scroll-scrub, JS doldurur) --- */
.cine-hero__scrolldark {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0;  /* JS: 0 -> ~.72 */
  background:
    radial-gradient(130% 110% at 50% 42%, rgba(11,12,14,0) 0%, rgba(11,12,14,.35) 62%, rgba(11,12,14,.9) 100%),
    linear-gradient(180deg, rgba(11,12,14,.15), rgba(11,12,14,.55));
}

/* --- SLAYT KONTROL CUBUGU (durdur/oynat + ileri/geri + cubuklar).
   v14.29b: ESKI (daha buyuk) hale dondu (kullanici istegi). --- */
.cine-slide-nav { display: flex; align-items: center; gap: 12px; }
.cine-slide-dots { display: flex; align-items: center; gap: 10px; }

.cine-slide-ctrl {
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: var(--chrome-a); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .35s var(--ease-cine), border-color .35s var(--ease-cine), transform .3s var(--ease-cine);
}
.cine-slide-ctrl:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.38); transform: translateY(-1px); }
.cine-slide-ctrl:active { transform: translateY(0) scale(.95); }
.cine-slide-ctrl svg { display: block; }

/* durdur/oynat ikonu (CSS ile cizili, keskin) */
.cine-slide-toggle .cine-ico--pause { display: inline-flex; gap: 3px; align-items: center; }
.cine-slide-toggle .cine-ico--pause i { width: 3px; height: 12px; background: currentColor; border-radius: 1px; display: block; }
.cine-slide-toggle .cine-ico--play {
  width: 0; height: 0; margin-left: 2px; display: none;
  border-left: 11px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.cine-slide-toggle.is-paused .cine-ico--pause { display: none; }
.cine-slide-toggle.is-paused .cine-ico--play { display: block; }

@media (max-width: 640px){
  .cine-slide-ctrl { width: 30px; height: 30px; }
  .cine-slide-nav { gap: 8px; }
}

/* ============================================================
   v13.22 — BANNER RENGI TEPE TINTI + OTOMATIK YAZI KONTRASTI
            + SAYFA GECISI (elle surukleme kaldirildi)
   ============================================================ */

/* elle surukleme kalkti -> normal imlec (yon tuslari yeterli) */
.cine-hero--slides { cursor: default; }

/* ============================================================
   v13.22.4 — SADE SIYAH GECIS (renk/ambient sistemi kapatildi)
   Hero fotografi altta duz siyaha (--ink-0) yumusakca erir; sayfa zemini
   duz siyah. Renkli tint/ambient yok. Slayt gecisi + kontroller aynen kalir.
   ============================================================ */
.cine-slide__toptint { display: none; }
.cine-slide__botfade { display: none; }
.site-ambient        { display: none; }

/* slaytlarda alt gecis: TEK YUMUSAK siyah gradyan (transparent -> ink-0).
   Uzun ve cok-durakli -> dip cizgisi/bant olmaz, siyaha kaynasir. */
.cine-hero--slides .cine-fade--bottom {
  display: block;
  height: clamp(180px, 28vh, 380px); opacity: 1;
  background: linear-gradient(180deg,
    rgba(11,12,14,0)    0%,
    rgba(11,12,14,.06) 26%,
    rgba(11,12,14,.20) 46%,
    rgba(11,12,14,.46) 64%,
    rgba(11,12,14,.74) 82%,
    var(--ink-0)      100%);
}

/* scrim'in TEPE karartmasini kaldir ki tint gorunsun; alt + sol-yazi
   bolgesi okunurlugu icin karartma korunur. */
.cine-hero--slides .cine-hero__scrim {
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(11,12,14,.55) 100%),
    /* v13.59: yazi bolgesi (sol) karartmasi guclendirildi — beyaz baslik
       PARLAK banner'da da okunur kalsin. Sagda tint bozulmaz. */
    linear-gradient(90deg, rgba(6,8,11,.78) 0%, rgba(6,8,11,.55) 26%,
                            rgba(6,8,11,.22) 46%, transparent 64%);
}

/* --- v13.59: SLAYT YAZI RENGI TEK TIP ---
   Eski davranis: admin bir slayta "koyu yazi" (dark_text) secince baslik/lede/
   buton SIYAH oluyordu. Artik TUM slaytlarda yazi BEYAZ. Okunurlugu renk degil,
   scrim + halo saglar (asagidaki v13.52 blogu tum slaytlara uygulanir).
   NOT: CMS'teki dark_text anahtari artik renk degistirmez (zararsiz, no-op). */
.cine-slide-text[data-theme="dark"] .cine-title,
.cine-slide-text[data-theme="dark"] .cine-title .cine-line {
  background: none;
  -webkit-text-fill-color: var(--title-media); color: var(--title-media);
}
.cine-slide-text[data-theme="dark"] .cine-eyebrow { color: var(--chrome-b); }
.cine-slide-text[data-theme="dark"] .cine-eyebrow::before {
  background: linear-gradient(90deg, var(--chrome-b), transparent);
}
.cine-slide-text[data-theme="dark"] .cine-lede { color: var(--text-2); }
/* hero butonlari fotograf ustunde: her temada ACIK dolgu, duz. */
.cine-slide-text .cine-btn--primary,
.cine-hero--video .cine-slide-text .cine-btn--primary {
  color: var(--btn-media-ink); background: var(--btn-media-fill);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.cine-slide-text .cine-btn--primary:hover,
.cine-hero--video .cine-slide-text .cine-btn--primary:hover {
  background: #FFFFFF; box-shadow: 0 12px 30px rgba(0,0,0,.34);
}
.cine-slide-text .cine-btn--ghost,
.cine-hero--video .cine-slide-text .cine-btn--ghost {
  color: #F2F3F5; border-color: rgba(255,255,255,.40); background: rgba(255,255,255,.06);
}
.cine-slide-text .cine-btn--ghost:hover,
.cine-hero--video .cine-slide-text .cine-btn--ghost:hover {
  border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.13);
}

/* sayfa gecisi sirasinda iki slayt yan yana kayar -> tasma gizli */
.cine-hero--slides { overflow: hidden; }
.cine-hero--slides .cine-slide { backface-visibility: hidden; }

/* --- KAYAN SERIT: elle surukleme + link --- */
.cine-strip { cursor: grab; touch-action: pan-y; }
.cine-strip.is-dragging { cursor: grabbing; }
.cine-strip.is-dragging .cine-strip__track { user-select: none; }
.cine-strip__item--link { display: block; cursor: pointer; }
.cine-strip__item--link img { transition: transform .6s var(--ease-cine), filter .6s var(--ease-cine); }
.cine-strip__item--link:hover img { transform: scale(1.045); filter: brightness(1.06); }

/* ---- SSS / FAQ ---- */
.cine-faq { max-width: 820px; margin: 0 auto; padding: clamp(90px,14vh,150px) clamp(20px,4vw,40px) 80px; }
.cine-faq__head { margin-bottom: 40px; }
.cine-faq__eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--chrome-b); margin-bottom: 12px; }
.cine-faq__title { font-family: var(--display); font-weight: 600; font-size: clamp(30px,5vw,46px); letter-spacing: -.02em; margin: 0; }
.cine-faq__q {
  border: 1px solid var(--line); border-radius: 12px; background: var(--ink-1);
  margin-bottom: 12px; overflow: hidden;
}
.cine-faq__q > summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font-size: 16px; font-weight: 600;
  color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.cine-faq__q > summary::-webkit-details-marker { display: none; }
.cine-faq__q > summary::after { content: "+"; font-size: 22px; color: var(--text-3); transition: transform .3s var(--ease-cine); }
.cine-faq__q[open] > summary::after { transform: rotate(45deg); }
.cine-faq__q > summary:hover { color: var(--chrome-a); }
.cine-faq__a { padding: 0 22px 20px; color: var(--text-2); font-size: 14.5px; line-height: 1.65; }
.cine-faq__a a { color: var(--chrome-b); }
.cine-faq__note {
  margin-top: 30px; padding: 16px 20px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text-2); font-size: 13.5px;
}

/* ============================================================
   v13.23 — ROCKSTAR HERO GEÇİŞİ (TEPE BANNER RENGİ + ALT SİYAH ERİME)
   Bir onceki v13.22.4 "sade siyah" bloğu tepe rengini kapatmisti; burada
   Rockstar duzenine geri donuluyor ve ikisi TEK tutarli sistemde birlesir:

   (1) ÜST  : aktif slaytin banner rengi (--bc) yari-saydam tepe tinti olur;
              fotografin ust tonuyla kaynasir (Rockstar'daki renkli gokyuzu).
   (2) ALT  : tam-genislik, yari-saydam LINEER gradyan. Tepede TAM ŞEFFAF
              baslar, asagi indikce kademeli koyulasir ve en dipte SAF SİYAHA
              (--ink-0) erir. Katalog zemini de --ink-0 oldugundan bolum
              gecisi gorunmez cizgi birakmadan kesintisiz olur.
   Bu blok dosyanin sonunda oldugundan v13.22.4'teki display:none / eski
   fade tanimlarini ezer. Renk basina tek katman -> bakim kolay.
   ============================================================ */

/* (1) TEPE BANNER RENGİ — her slayt kendi --bc rengini tasir.
   v13.24: soft-light (neredeyse gorunmez) yerine NORMAL kaplama + color-mix.
   Banner rengi tepede GORUNUR bir katman olarak durur, asagi indikce alfasi
   dusup seffaflasir -> alttaki siyah erimeye devrederek siyaha kaynasir.
   color-mix, rengi tam banner tonunda alfali uretir (gri kirlenme olmaz).
   >>> Tepe renk gucunu ayarlamak icin asagidaki % (alfa) degerlerini degistir. */
.cine-hero--slides .cine-slide__toptint {
  display: block;
  position: absolute; left: 0; right: 0; top: 0;
  height: clamp(240px, 54vh, 640px);
  z-index: 2; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bc, transparent) 55%, transparent)  0%,
    color-mix(in srgb, var(--bc, transparent) 42%, transparent) 14%,
    color-mix(in srgb, var(--bc, transparent) 22%, transparent) 34%,
    color-mix(in srgb, var(--bc, transparent) 8%,  transparent) 52%,
    transparent 100%);
}

/* (2) ALT SİYAH ERİME — v13.25: DAHA ASAGIDA + DAHA KISA.
   Banner/foto tam gorunsun; siyah sadece en alt ince seritte devreye girer.
   Yukseklik dusuruldu (top kenar asagi kaydi) ve duraklar dibe yiginildi.
   >>> Siyahi daha da asagi istersen height'i kucult; yukari istersen buyut. */
.cine-hero--slides .cine-fade--bottom {
  display: block; opacity: 1;
  height: clamp(120px, 18vh, 260px);
  background: linear-gradient(180deg,
    rgba(11,12,14,0)    0%,
    rgba(11,12,14,.04) 34%,
    rgba(11,12,14,.14) 56%,
    rgba(11,12,14,.40) 74%,
    rgba(11,12,14,.74) 89%,
    var(--ink-0)      100%);
}

/* scrim: tepesi acik kalsin ki banner tinti net gorunsun. Sadece sol-alt
   yazi bolgesi + en alt hafif okunurluk karartmasi korunur.             */
.cine-hero--slides .cine-hero__scrim {
  background:
    linear-gradient(180deg, transparent 0%, transparent 78%, rgba(11,12,14,.26) 100%),
    linear-gradient(90deg, rgba(11,12,14,.34) 0%, rgba(11,12,14,.08) 42%, transparent 62%);
}

/* ============================================================
   v13.28 — İKİ BUTON + STİL SİSTEMİ (solid / ghost / glass)
   Butonlarda --btn ile özel renk seçilebilir; verilmezse marka mavisi.
   ============================================================ */
.cine-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* SOLID — dolu renkli buton (renk seçilebilir) */
.cine-btn--solid {
  --btn: var(--accent);
  color: #08121f; border: none;
  background: var(--btn);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.cine-btn--solid:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 18px 46px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.cine-btn--solid::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease-cine);
}
.cine-btn--solid:hover::after { left: 130%; }

/* GLASS — yarı saydam, buğulu cam his (backdrop-filter) */
.cine-btn--glass {
  --btn: var(--accent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--btn) 55%, transparent);
  background: color-mix(in srgb, var(--btn) 16%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.cine-btn--glass:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--btn) 28%, transparent);
  border-color: color-mix(in srgb, var(--btn) 80%, transparent);
}

/* ghost'ta da özel renk kenarı kullanılabilir (seçilirse) */
.cine-btn--ghost[style*="--btn"] { border-color: color-mix(in srgb, var(--btn, var(--accent)) 55%, transparent); color: #fff; }
.cine-btn--ghost[style*="--btn"]:hover { border-color: var(--btn); background: color-mix(in srgb, var(--btn) 10%, transparent); }

.cine-btn--sm { padding: 10px 18px; font-size: 12px; }

/* ============================================================
   v13.28 — POSTER VİTRİNİ (Rockstar oyun kütüphanesi tarzı)
   Dikey posterler yatay kayar; hover'da açıklama/buton belirir.
   ============================================================ */
.cine-posters { position: relative; padding: 70px 0 40px; }
.cine-posters__head { max-width: 1300px; margin: 0 auto 26px; padding: 0 clamp(20px, 5vw, 70px); }
.cine-posters__title {
  font-family: var(--display); font-weight: 600;
  font-size: calc(clamp(26px, 3.4vw, 42px) * var(--tscale, 1));
  letter-spacing: -.01em; margin: 6px 0 0; color: var(--text);
}
.cine-poster-band { position: relative; }
.cine-poster-track {
  display: flex; gap: 18px;
  padding: 6px clamp(20px, 5vw, 70px) 22px;
  overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.cine-poster-track::-webkit-scrollbar { display: none; }
.cine-poster {
  flex: 0 0 auto; width: clamp(210px, 22vw, 280px);
  scroll-snap-align: start;
}
.cine-poster__img {
  position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2);
  transform: translateZ(0);
  transition: transform .6s var(--ease-cine), box-shadow .6s var(--ease-cine), border-color .4s;
}
.cine-poster__img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease-cine), filter .6s var(--ease-cine);
  filter: saturate(.92) brightness(.86); }
.cine-poster__noimg { position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-3); background: #0e1524; font-size: 13px; }
.cine-poster:hover .cine-poster__img {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
  border-color: rgba(110,133,152,.4);
}
.cine-poster:hover .cine-poster__img img { transform: scale(1.08); filter: saturate(1.05) brightness(1); }
.cine-poster__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 8px; padding: 18px 16px 18px;
  background: linear-gradient(to top, rgba(6,10,18,.92) 8%, rgba(6,10,18,.35) 45%, transparent 72%);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-cine), transform .5s var(--ease-cine);
}
.cine-poster:hover .cine-poster__overlay { opacity: 1; transform: translateY(0); }
.cine-poster__name { font-family: var(--display); font-weight: 600; font-size: 18px; color: #fff; margin: 0; line-height: 1.2; }
.cine-poster__desc { font-size: 12.5px; color: var(--text-2); margin: 0; line-height: 1.5; }
.cine-poster__overlay .cine-btn { align-self: flex-start; margin-top: 4px; }

.cine-poster-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; z-index: 3;
  border: 1px solid var(--line-2); background: rgba(12,18,30,.75);
  backdrop-filter: blur(8px); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity .4s, background .3s, transform .3s;
}
.cine-poster-band:hover .cine-poster-nav { opacity: 1; }
.cine-poster-nav:hover { background: rgba(110,133,152,.85); transform: translateY(-50%) scale(1.08); }
.cine-poster-nav--prev { left: 14px; }
.cine-poster-nav--next { right: 14px; }
.cine-poster-nav[hidden] { display: none; }

/* ============================================================
   v13.28 — VİDEO VİTRİNİ (yatay video blokları)
   ============================================================ */
.cine-video { position: relative; padding: 60px clamp(20px, 5vw, 70px); max-width: 1300px; margin: 0 auto; }
.cine-video__frame {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: 0 40px 90px rgba(0,0,0,.5);
}
.cine-video__ratio { position: relative; aspect-ratio: 16/9; background: #06090f; }
.cine-video__ratio iframe, .cine-video__ratio video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover;
}
.cine-video__text { max-width: 760px; margin: 26px auto 0; text-align: center; }
.cine-video__title {
  font-family: var(--display); font-weight: 600;
  font-size: calc(clamp(24px, 3vw, 38px) * var(--tscale, 1));
  margin: 6px 0 12px; color: var(--text); letter-spacing: -.01em;
}
.cine-video__body p { color: var(--text-2); font-size: calc(15px * var(--tscale, 1)); line-height: 1.7; margin: 0 0 10px; }
.cine-video__text .cine-btn-row, .cine-video__text .cine-btn { justify-content: center; margin-top: 14px; }

/* ============================================================
   v13.31 — POSTER RAIL (sol-önde başlık + kenar karartmalı otomatik akış)
   ============================================================ */
.cine-posters--rail { padding: clamp(50px,8vh,84px) 0; }
.cine-posters--rail .cine-posters__inner {
  display: grid; grid-template-columns: minmax(230px, 30%) 1fr;
  align-items: center; gap: clamp(16px, 3vw, 44px);
}
.cine-posters__lead { padding-left: clamp(20px, 5vw, 70px); }
.cine-posters__lead .cine-posters__title { margin: 6px 0 0; }
.cine-posters__desc-lead {
  color: var(--text-2); font-size: calc(15px * var(--tscale,1));
  line-height: 1.65; margin: 14px 0 20px; max-width: 380px;
}
.cine-posters--rail .cine-poster-band {
  position: relative; overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 90%, transparent 100%);
}
.cine-posters--rail .cine-poster-track {
  display: flex; gap: 18px; width: max-content;
  padding: 10px 0 22px; overflow: visible; scroll-snap-type: none;
  will-change: transform;
}
.cine-poster.is-link { cursor: pointer; }

/* ============================================================
   v13.31 — VİDEO BOYDAN BOYA (kontrolsüz · loop · alta yumuşak siyah geçiş)
   ============================================================ */
.cine-video--full { padding: 0; max-width: none; margin: clamp(20px,5vh,48px) 0; }
.cine-video--full .cine-video__stage {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  aspect-ratio: 16 / 9; max-height: 90vh; overflow: hidden; background: #06090f;
}
.cine-video--full .cine-video__media { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cine-video--full .cine-video__media video,
.cine-video--full .cine-video__media iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover;
}
.cine-video__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--ink-0) 2%, rgba(11,12,14,.6) 40%, transparent 100%);
}
.cine-video__overlay {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: clamp(22px,5vw,62px) clamp(20px,5vw,70px); max-width: 720px;
}
.cine-video__overlay .cine-sec-eyebrow { margin-bottom: 10px; }
.cine-video--full .cine-video__title { margin: 0 0 12px; color: var(--text); }
.cine-video--full .cine-video__body p { color: var(--text-2); font-size: calc(15px*var(--tscale,1)); line-height: 1.6; margin: 0 0 8px; }
.cine-video--full .cine-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }

@media (max-width: 680px) {
  .cine-poster { width: 62vw; }
  .cine-poster__overlay { opacity: 1; transform: none; }
  .cine-posters--rail .cine-posters__inner { grid-template-columns: 1fr; gap: 18px; }
  .cine-posters__lead { padding: 0 20px; }
  .cine-video--full .cine-video__stage { aspect-ratio: 4 / 5; max-height: none; }
  .cine-video__overlay { max-width: 100%; }
}

/* ============================================================
   v13.28 — KÜTÜPHANEM (ana sayfa temasıyla, yatay, animasyonlu)
   ============================================================ */
.lib-hero { position: relative; padding: clamp(90px, 14vh, 150px) clamp(20px, 5vw, 70px) 30px; }
.lib-hero__inner { max-width: 900px; }
.lib-hero__title {
  font-family: var(--display); font-weight: 600;
  font-size: calc(clamp(38px, 6vw, 72px) * var(--tscale, 1));
  letter-spacing: -.02em; margin: 8px 0 14px; color: #fff; line-height: .98;
}
.lib-hero__lede { color: var(--text-2); font-size: calc(16px * var(--tscale, 1)); line-height: 1.7; max-width: 620px; margin: 0 0 22px; }
.lib-hero__lede b { color: var(--text); }
.lib-logout { color: var(--text-3); text-decoration: underline; margin-left: 8px; font-size: 13px; transition: color .3s; }
.lib-logout:hover { color: var(--text); }

/* v13.30 — ÜYELİK KARTI (metalik konsiyerj kimlik kartı) */
.lib-card-wrap { max-width: 1300px; margin: 0 auto; padding: 4px clamp(20px, 5vw, 70px) 14px; }
.lib-card {
  position: relative; overflow: hidden; max-width: 440px;
  border-radius: 16px; padding: 22px 24px 20px;
  background: linear-gradient(128deg, #22262d 0%, #31363f 26%, #454b54 46%, #2a2e36 60%, #171a20 100%);
  border: 1px solid #4a505a;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.lib-card__sweep {
  position: absolute; top: -20%; left: -70%; width: 45%; height: 140%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(244,246,248,.15), transparent);
  transform: skewX(-16deg); animation: libsweep 6s var(--ease-cine, ease-in-out) infinite;
}
@keyframes libsweep { 0%, 8% { left: -70%; } 62%, 100% { left: 150%; } }
.lib-card__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lib-card__brand { font-family: var(--display); font-weight: 600; letter-spacing: .24em; font-size: 13px; color: #D6DCE2; text-transform: uppercase; }
.lib-card__dot { color: #8b929b; margin: 0 2px; }
.lib-card__tier {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: #cfd5db; border: 1px solid #5a616b; border-radius: 20px; padding: 5px 11px; white-space: nowrap;
}
.lib-card__tier.is-paid { color: #0B0C0E; border-color: transparent; background: linear-gradient(135deg, #e7ebef, #aab1b9); }
.lib-card__chip {
  width: 40px; height: 29px; margin-top: 18px; border-radius: 6px; position: relative;
  background: linear-gradient(135deg, #cfd5db 0%, #9aa1a9 48%, #c3c9d0 100%); border: 1px solid #7c838c;
}
.lib-card__hello { position: relative; margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #9299a2; }
.lib-card__name { position: relative; font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: .04em; color: #F4F6F8; margin-top: 3px; }
.lib-card__meta { position: relative; display: flex; gap: 26px; margin-top: 16px; flex-wrap: wrap; }
.lib-card__meta small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: #8b929b; margin-bottom: 3px; }
.lib-card__meta span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: #D6DCE2; }
@media (max-width: 520px) { .lib-card { max-width: 100%; } .lib-card__meta { gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .lib-card__sweep { animation: none; opacity: 0; } }

.lib-shelf { padding: 26px 0 34px; }
.lib-shelf__head { max-width: 1300px; margin: 0 auto 18px; padding: 0 clamp(20px, 5vw, 70px); }
.lib-shelf__title {
  font-family: var(--display); font-weight: 600;
  font-size: calc(clamp(22px, 2.8vw, 34px) * var(--tscale, 1));
  margin: 5px 0 0; color: var(--text); display: flex; align-items: center; gap: 12px;
}
.lib-count { font-size: 14px; font-weight: 700; color: #0B1116; background: var(--accent); border-radius: 20px; padding: 3px 12px; letter-spacing: 0; }
.lib-poster { width: clamp(230px, 24vw, 300px); }
.lib-poster .cine-poster__overlay { opacity: 1; transform: none;
  background: linear-gradient(to top, rgba(6,10,18,.94) 12%, rgba(6,10,18,.4) 48%, transparent 78%); }
.lib-poster--locked .cine-poster__img img { filter: saturate(.5) brightness(.55); }
.lib-poster--locked:hover .cine-poster__img img { filter: saturate(.7) brightness(.7); }
.lib-lock-badge { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 18px;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(6,10,18,.7); backdrop-filter: blur(6px); }
.lib-empty { max-width: 1300px; margin: 0 auto; padding: 22px clamp(20px, 5vw, 70px);
  color: var(--text-2); font-size: 15px; }
.lib-soon { font-size: 12.5px; color: var(--text-3); }

/* ============================================================
   v13.33 — ETKİNLİK / SIRALAMA
   ============================================================ */

/* --- Kütüphanem: katılım paneli --- */
.lib-event { max-width: 1300px; margin: 8px auto 0; padding: 10px clamp(20px, 5vw, 70px) 4px; }
.lib-event__head { margin-bottom: 16px; }
.lib-event__title { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.01em; color: var(--text); margin: 4px 0 6px; }
.lib-event__lede { color: var(--text-2); font-size: 14.5px; max-width: 560px; }
.lib-event__lede a { color: var(--accent); text-decoration: none; }
.lib-event__lede a:hover { text-decoration: underline; }
.lib-event__panel { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  background: var(--ink-1); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 24px; }
.lib-event__stat { display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
.lib-event__stat small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3); }
.lib-event__stat strong { font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--text); }
.lib-event__form { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 240px; }
.lib-event__toggle { display: flex; align-items: center; gap: 10px; cursor: pointer;
  color: var(--text-2); font-size: 14px; user-select: none; }
.lib-event__toggle input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.lib-event__actions { display: flex; align-items: center; gap: 14px; }
.lib-event__badge { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); }
.lib-event__badge.is-on { color: #7be0a3; border-color: rgba(123,224,163,.4); background: rgba(123,224,163,.08); }
.lib-event__off { color: var(--text-3); font-size: 14px; margin: 0; }
.lib-event__note { max-width: 640px; margin: 12px 2px 0; color: var(--text-3); font-size: 12px; line-height: 1.6; }

/* --- Etkinlik sayfası --- */
.evt-hero { max-width: 1300px; margin: 0 auto;
  /* v13.61: ust -> sabit nav'in altina girmesin; alt -> icerikle arada nefes */
  padding: clamp(126px, 18vh, 190px) clamp(20px, 5vw, 70px) 8px; }
.evt-hero__title { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 7vw, 76px);
  line-height: .98; letter-spacing: -.02em;
  color: var(--title); text-shadow: var(--title-shadow); margin: 10px 0 18px; }
.evt-hero__lede { color: var(--text-2); font-size: 15.5px; max-width: 620px; }

.evt-tabs { max-width: 1300px; margin: 26px auto 0; padding: 0 clamp(20px, 5vw, 70px);
  display: flex; gap: 10px; }
.evt-tab { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3); }
.evt-tab.is-active { color: var(--btn-ink); background: var(--btn-fill);
  border-color: var(--btn-fill); }   /* v13.60: duz dolgu */

.evt-me { max-width: 1300px; margin: 40px auto 0; padding: 0 clamp(20px, 5vw, 70px);
  display: flex; align-items: center; gap: 18px; }
.evt-me__rank { font-family: var(--display); font-weight: 600; font-size: 30px; color: var(--accent); min-width: 60px; }
.evt-me__body { display: flex; flex-direction: column; gap: 2px; }
.evt-me__body small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3); }
.evt-me__body strong { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--text); }
.evt-me__hidden { font-size: 12px; color: var(--text-3); font-style: italic; }
.evt-join { max-width: 1300px; margin: 40px auto 0; padding: 16px clamp(20px, 5vw, 70px);
  color: var(--text-2); font-size: 14.5px; }
.evt-join a { color: var(--accent); text-decoration: none; }
.evt-join a:hover { text-decoration: underline; }

.evt-board { max-width: 1300px; margin: 44px auto 0; padding: 0 clamp(20px, 5vw, 70px) 60px; }
.evt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.evt-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px;
  background: var(--ink-1); border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px;
  transition: border-color .25s var(--ease-soft), transform .25s var(--ease-soft); }
.evt-row:hover { border-color: var(--line-2); transform: translateX(2px); }
.evt-row__rank { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--text-3);
  text-align: center; }
.evt-row.is-top { background: var(--ink-2); }
.evt-row__rank.medal-1 { color: #FFD84D; }
.evt-row__rank.medal-2 { color: var(--chrome-b); }
.evt-row__rank.medal-3 { color: #d68a4a; }
.evt-row__name { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-row__name em { color: var(--accent); font-style: normal; font-weight: 500; font-size: 13px; }
.evt-row__val { font-family: var(--mono); font-size: 14px; color: var(--text-2); }
.evt-row.is-me { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(110,133,152,.25) inset; }
.evt-empty { color: var(--text-2); font-size: 15px; padding: 30px 0; text-align: center; }

/* ============================================================
   v13.36 — Sinematik-monokrom tipografi katmani
   Buyuk hero basliklari: keskin uppercase + siki harf araligi.
   Ağirliklar yukarida 600'e cekildi; burada karakter veriliyor.
   ============================================================ */
body.site .cine-title,
body.site .cine-about__title,
body.site .cine-story__title,
body.site .cine-panel__title,
body.site .cine-info-title,
body.site .cine-faq__title,
body.site .lib-hero__title,
body.site .evt-hero__title {
  text-transform: uppercase;
  letter-spacing: -0.01em;   /* buyuk boyutta siki, "otomotiv" his */
  font-weight: 600;
}
/* Kucuk marka/etiket basliklari: uppercase ama GENIS harf araligi
   (teknik/endustriyel dokunus). */
body.site .lib-card__brand,
body.site .cine-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
}
/* Poster ve kart isimleri: hafif siki, temiz. Sert beyaz yerine krom. */
/* v13.62: AYRIM — kart ismi SAYFA yuzeyinde (temaya uyar),
   poster ismi FOTOGRAF ustunde (her temada acik kalmali). */
body.site .lib-card__name {
  color: var(--title);
  -webkit-text-fill-color: var(--title);
  letter-spacing: -0.01em;
}
body.site .cine-poster__name {
  color: var(--title-media);
  -webkit-text-fill-color: var(--title-media);
  letter-spacing: -0.01em;
}

/* ============================================================
   v13.38 — SAYFA ACILIS ANIMASYONU
   Hero'suz sayfalarda icerik gir:s oncesi gizli baslar; JS
   (cine.js pageEnter) sahneler. GSAP yoksa .lenis-ready gelmez,
   asagidaki kural devre disi kalir -> icerik normal gorunur (guvenli).
   ============================================================ */
html.lenis-ready body.site main.stage > *,
html.lenis-ready body.site main.stage .pageblock {
  /* flash onleme: JS acana kadar gizli (yalnizca hero'suz sayfalarda
     JS bunlari sahneler; hero'lu sayfada zaten dokunulmaz) */
  will-change: transform, opacity;
}
/* Nav girisi icin baslangic gizliligi yalnizca motor hazirsa */
html.lenis-ready body.site .site-nav { opacity: 1; }

/* ============================================================
   v13.38 — ILETISIM SAYFASI (sinematik tema uyumlu)
   Iki sutun: solda baslik+bilgi, sagda form paneli. Celik/krom
   palet, ince hairline'lar, sakin gecisler.
   ============================================================ */
.cine-contact {
  min-height: 100vh; display: flex; align-items: center;
  padding: 130px clamp(28px, 8vw, 140px) 90px; position: relative;
}
.cine-contact__grid {
  width: 100%; max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.cine-contact__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 6vw, 84px); line-height: .96; letter-spacing: -.03em;
  text-transform: uppercase; margin: 12px 0 22px;
  color: var(--title); text-shadow: var(--title-shadow);
}
.cine-contact__facts {
  margin-top: 40px; display: flex; flex-direction: column; gap: 0;
  border-top: .5px solid var(--line);
}
.cine-contact__fact {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 16px 0; border-bottom: .5px solid var(--line);
}
.cine-contact__fact-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-3);
}
.cine-contact__fact-v {
  font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--text);
}
.cine-contact__mail {
  color: var(--accent); text-decoration: none;
  transition: color .3s var(--ease-soft);
}
.cine-contact__mail:hover { color: var(--chrome-a); }

/* --- FORM PANELI --- */
.cine-contact__panel {
  background: var(--ink-1); border: .5px solid var(--line);
  border-radius: 14px; padding: clamp(24px, 3vw, 38px);
}
.cine-form { display: flex; flex-direction: column; gap: 16px; }
.cine-form__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.cine-field { display: flex; flex-direction: column; gap: 8px; }
.cine-field__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-3);
}
.cine-input {
  width: 100%; box-sizing: border-box;
  background: var(--ink-0); border: .5px solid var(--line-2);
  border-radius: 8px; padding: 12px 14px;
  color: var(--text); font-family: var(--body); font-size: 14.5px;
  transition: border-color .3s var(--ease-soft), background .3s var(--ease-soft);
  -webkit-appearance: none; appearance: none;
}
.cine-input::placeholder { color: var(--text-3); }
.cine-input:hover { border-color: var(--chrome-c); }
.cine-input:focus {
  outline: none; border-color: var(--accent);
  background: var(--ink-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.cine-input--area { resize: vertical; min-height: 150px; line-height: 1.6; font-family: var(--body); }
.cine-form__submit { margin-top: 6px; align-self: flex-start; }

/* honeypot: gizli bot tuzagi */
.cine-hp { position: absolute; left: -9999px; top: -9999px; }

/* hata / basari durumlari */
.cine-contact__err {
  background: color-mix(in srgb, #E24B4A 12%, transparent);
  border: .5px solid color-mix(in srgb, #E24B4A 45%, transparent);
  color: #F5B3B3;
  border-radius: 8px; padding: 12px 14px; margin-bottom: 16px;
  font-size: 14px;
}
.cine-contact__done { text-align: left; padding: 8px 0; }
.cine-contact__done-mark {
  width: 46px; height: 46px; border-radius: 50%;
  border: .5px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 18px;
}
.cine-contact__done-title {
  font-family: var(--display); font-weight: 600; font-size: 26px;
  text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 10px; color: var(--text);
}

@media (max-width: 820px) {
  .cine-contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .cine-form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   v13.39 — ISTATISTIK + IS ORTAKLARI bolumleri (sinematik tema)
   ============================================================ */
/* --- ISTATISTIK --- */
.cine-stats {
  padding: clamp(70px, 10vw, 130px) clamp(28px, 8vw, 140px);
  border-top: .5px solid var(--line);
}
.cine-stats__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.cine-stats__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(28px, 4vw, 52px); letter-spacing: -.02em;
  text-transform: uppercase; margin: 10px 0 46px; color: var(--text);
}
.cine-stats__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(24px, 4vw, 64px); align-items: start;
}
.cine-stat { display: flex; flex-direction: column; gap: 10px; }
.cine-stat__num {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(44px, 7vw, 88px); line-height: 1; letter-spacing: -.03em;
  color: var(--title); text-shadow: var(--title-shadow);
}
.cine-stat__label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--text-3);
}

/* --- IS ORTAKLARI --- */
.cine-partners {
  padding: clamp(70px, 10vw, 120px) clamp(28px, 8vw, 140px);
  border-top: .5px solid var(--line);
}
.cine-partners__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.cine-partners__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 3.4vw, 44px); letter-spacing: -.02em;
  text-transform: uppercase; margin: 10px 0 44px; color: var(--text);
}
.cine-partners__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(20px, 4vw, 56px); align-items: center;
}
.cine-partner {
  display: flex; align-items: center; justify-content: center;
  min-width: 120px; height: 60px; padding: 0 10px;
  opacity: .68; transition: opacity .35s var(--ease-soft), filter .35s var(--ease-soft);
  filter: grayscale(1);
  text-decoration: none;
}
.cine-partner:hover { opacity: 1; filter: grayscale(0); }
.cine-partner img { max-height: 46px; max-width: 150px; object-fit: contain; display: block; }
.cine-partner__name {
  font-family: var(--display); font-weight: 600; font-size: 18px;
  letter-spacing: .04em; color: var(--text-2);
}

/* ============================================================
   v13.40 — ÜST BANNER VİDEO MODU
   Video etkinse hero slider yerine tam ekran, kullanıcı müdahalesiz
   video. Alt geçiş 'fade' (karartmalı, varsayılan) veya 'sharp' (keskin).
   ============================================================ */
.cine-hero--video {
  position: relative; overflow: hidden;
  /* base .cine-hero'nun tam-genislik hilesini (100vw + left:50% + -50vw)
     KORU; slider gibi kenar boslugu YAPMA -> gercek tam ekran. */
  width: 100vw; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  margin-top: 0; margin-bottom: 0;
  height: 100vh; min-height: 620px; border-radius: 0;
}
.cine-hero__video { position: absolute; inset: 0; z-index: 0; background: var(--ink-0); }
.cine-hero__video video,
.cine-hero__video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  border: 0; pointer-events: none;   /* kullanıcı müdahale edemez */
}
/* iframe (youtube/vimeo) tam kaplama için ölçekli */
.cine-hero__video iframe {
  width: 100vw; height: 56.25vw;      /* 16:9 */
  min-height: 100%; min-width: 177.77vh;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.cine-hero--video .cine-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,9,11,.35) 0%, rgba(8,9,11,.15) 40%, rgba(8,9,11,.55) 100%);
}
.cine-hero--video .cine-hero__content--video {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(60px, 10vh, 120px);
  padding: 0 clamp(28px, 7vw, 120px);
}
/* keskin alt: alttaki yumuşak karartma yok (fade div zaten render edilmez) */
@media (max-width: 640px) {
  .cine-hero--video { height: 76vh; min-height: 380px; }
}


/* ============================================================
   v13.48 — AYDINLIK TEMA (opt-in) + tema düğmesi
   ------------------------------------------------------------
   Dark tema VARSAYILAN ve degistirilmedi. Tum light mantigi
   burada, <html data-site-theme="light"> altinda izole.
   NOT: per-slide .cine-slide-text[data-theme] kontrast
   mekanizmasindan AYRI attribute (data-site-theme) kullanildi
   -> secici cakismasi yok.
   Gorsel-ustu scrim'ler (hero/poster/galeri foto ustu) ve modal
   karartmalari HER IKI temada da KOYU kalir — bu dogru davranistir
   (yazi/okunurluk fotografin uzerinde, sayfanin degil).
   ============================================================ */

/* ---- tema düğmesi (her iki temada görünür) ---- */
.site-nav__end{ justify-self:end; display:flex; align-items:center; gap:16px; }
.site-nav__end .site-nav__sub{ margin-left:0; }
.theme-toggle{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); background:transparent; color:var(--text-2);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:color .35s var(--ease-cine), border-color .35s var(--ease-cine),
             background .35s var(--ease-cine), transform .35s var(--ease-cine);
}
.theme-toggle:hover{ color:var(--text); border-color:var(--chrome-c); transform:translateY(-1px); }
.theme-toggle:active{ transform:translateY(0) scale(.94); }
.theme-toggle .tt-ic{ display:block; }
.theme-toggle .tt-moon{ display:none; }
html[data-site-theme="light"] .theme-toggle .tt-sun{ display:none; }
html[data-site-theme="light"] .theme-toggle .tt-moon{ display:block; }

/* ---- v13.49: kebab (⋮) menü düğmesi — yalnız mobilde görünür ---- */
.nav-menu-btn{
  display:none;  /* masaüstünde gizli; linkler satır-içi kalir */
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; padding:0;
  align-items:center; justify-content:center;
  border:1px solid var(--line-2); background:transparent; color:var(--text-2);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:color .3s var(--ease-cine), border-color .3s var(--ease-cine),
             background .3s var(--ease-cine), transform .3s var(--ease-cine);
}
.nav-menu-btn:hover{ color:var(--text); border-color:var(--chrome-c); }
.nav-menu-btn:active{ transform:scale(.94); }
body.site .site-nav.menu-open .nav-menu-btn{ color:var(--accent); border-color:var(--accent); }

/* ---- v13.49: mobilde nav linkleri kebab menüsünde açılır panel olur ---- */
@media (max-width:860px){
  body.site .site-nav{ grid-template-columns:1fr auto; }
  body.site .site-nav__end{ justify-self:end; gap:8px; }
  .theme-toggle{ width:34px; height:34px; }
  .nav-menu-btn{ display:inline-flex; width:34px; height:34px; }

  /* linkler: satır-içi değil, sağ-üstten açılan panel */
  body.site .site-nav__links{
    position:absolute; top:calc(100% - 2px); right:clamp(12px,4vw,28px);
    display:flex; flex-direction:column; align-items:stretch; justify-self:auto;
    gap:2px; min-width:min(240px, calc(100vw - 32px)); margin:0; padding:8px;
    background:var(--ink-1); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.5); backdrop-filter:blur(12px);
    opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top right;
    visibility:hidden; pointer-events:none; z-index:60;
    transition:opacity .28s var(--ease-cine), transform .28s var(--ease-cine), visibility .28s;
  }
  body.site .site-nav.menu-open .site-nav__links{
    opacity:1; transform:translateY(0) scale(1); visibility:visible; pointer-events:auto;
  }
  body.site .site-nav__links a{
    display:block; padding:12px 14px; border-radius:9px; font-size:13px;
    letter-spacing:.06em; color:var(--text);
    transition:background .25s var(--ease-cine), color .25s var(--ease-cine);
  }
  body.site .site-nav__links a:hover{ background:var(--ink-3); }
  body.site .site-nav__links a::after{ display:none; }  /* panelde alt-çizgi yok */

  /* açık temada panel gölgesi yumuşak-soğuk */
  html[data-site-theme="light"] body.site .site-nav__links{ box-shadow:0 24px 60px rgba(28,38,54,.18); }
}

/* ---- AYDINLIK PALET (280 var() cagrisi bunlari okur -> ~%90'i cascade ile) ---- */
html[data-site-theme="light"] body.site{
  --ink-0:   #EAECEF;   /* sayfa zemini (soguk kagit) */
  --ink-1:   #F2F3F6;   /* panel */
  --ink-2:   #F8F9FB;   /* yukseltilmis yuzey */
  --ink-3:   #FFFFFF;   /* hover / ust */
  --line:    #DBDEE3;   /* hairline */
  --line-2:  #C6CAD1;
  --text:    #14161B;   /* murekkep */
  --text-2:  #4A4E58;   /* ikincil gri */
  --text-3:  #787D87;   /* soluk gri */
  --chrome-a:#1E212A;   /* ana vurgu = acikta KOYU */
  --chrome-b:#5A5F69;
  --chrome-c:#9296A0;
  --accent:  #43607A;   /* celik mavi — kagit uzerinde okunur kontrast icin koyulastirildi */
  --accent-2:#314A60;

  /* v13.60: acik temada baslik = yumusak murekkep (saf siyah DEGIL),
     birincil buton = yumusak koyu dolgu (tam siyah blok DEGIL). */
  --title:       #232730;
  --btn-fill:    #272B34;
  --btn-fill-hi: #363B46;
  --btn-ink:     #F0F1F4;
  color-scheme: light;
}

/* ---- sayfa-yuzeyi chrome duzeltmeleri (yalniz light) ---- */

/* ambians: koyu vinyet -> yumusak acik ambians */
html[data-site-theme="light"] body.site .backdrop{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(60,70,90,.10), transparent 55%),
    var(--ink-0);
}

/* nav scrim: koyu -> acik (dark rule .site-nav::before ile ayni yapida) */
html[data-site-theme="light"] body.site .site-nav::before{
  background:linear-gradient(180deg,
              rgba(238,240,244,.94) 0%, rgba(238,240,244,.62) 45%, rgba(238,240,244,0) 100%);
}
/* nav linkleri: acik-gri (#E4E6EA) -> koyu */
html[data-site-theme="light"] body.site .site-nav__links a{ color:#3B3F48; }

/* bolum ayirici hairline */
html[data-site-theme="light"] body.site .cine-panel{ border-top-color:rgba(0,0,0,.07); }
/* panel CTA cam dolgu (beyaz cam acikta kayboluyor) */
html[data-site-theme="light"] body.site .cine-panel__cta{ background:rgba(0,0,0,.04); }
html[data-site-theme="light"] body.site .cine-panel__cta:hover{ background:rgba(0,0,0,.07); }

/* sol sosyal ray hover cami */
html[data-site-theme="light"] body.site .social-rail a:hover{
  background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12);
}

/* poster carousel oklari: koyu cam -> acik cam + koyu ikon */
html[data-site-theme="light"] body.site .cine-poster-nav{
  background:rgba(255,255,255,.72); color:var(--text);
}

/* video alt gecisi -> sayfa zeminine karisim (mid-stop acik) */
html[data-site-theme="light"] body.site .cine-video__fade{
  background:linear-gradient(to top, var(--ink-0) 2%, rgba(234,236,239,.6) 40%, transparent 100%);
}

/* en belirgin kart golgesi: agir siyah -> yumusak soguk (digerleri iter. 2) */
html[data-site-theme="light"] body.site .cine-poster{ box-shadow:0 26px 60px rgba(28,38,54,.16); }

/* ---- GALERI (light) — v13.47 galeri var-clean, sadece 2 nokta kiriliyor ---- */
/* avatar bas harfleri color:var(--ink-0) -> acikta gumus uzerinde kayboluyor */
html[data-site-theme="light"] body.site .gd__avatar{ color:#1A1C22; }
/* yukle butonu hover #fff -> acikta acik-yazi ile kayboluyor */
html[data-site-theme="light"] body.site .gm__go:hover{ background:var(--text); }

/* ============================================================
   v13.51 — HERO YAZI DUZELTMESI (acik tema)
   Hero gorseli her temada SINEMATIK kalir (koyu scrim + parlak arac).
   Acik temada --chrome/--text koyulastigi icin krom-degrade baslik
   gorselde kayboluyordu. Cozum: hero metnini KOYU-TEMA krom
   degerlerine sabitle. Yalniz [data-theme="light"] slaytlara uygulanir
   -> per-slide "koyu yazi" (dark_text) sistemi aynen calisir.
   ============================================================ */
html[data-site-theme="light"] body.site .cine-slide-text .cine-title{
  background:none; color:var(--title-media); -webkit-text-fill-color:var(--title-media);
}
html[data-site-theme="light"] body.site .cine-slide-text .cine-lede{ color:#C7CACF; }
html[data-site-theme="light"] body.site .cine-slide-text .cine-eyebrow{ color:#AEB0B6; }
html[data-site-theme="light"] body.site .cine-slide-text .cine-eyebrow::before{
  background:linear-gradient(90deg, #AEB0B6, transparent);
}

/* ============================================================
   v13.52 — HERO ACIK-YAZI OKUNURLUK (kesin cozum)
   Krom-degrade baslik parlak gorselde (gumus Passat) grounding'siz
   kalip "fosforlu"/ucuk goruluyordu. Cozum gorselden BAGIMSIZ:
   - Baslik (degrade metin): filter drop-shadow -> koyu halo, her harf okunur.
   - Eyebrow + lede (duz renk): text-shadow.
   - Metin kutusunun arkasina lokal koyu plaka (gorsel scrim'inden ayri).
   Yalniz ACIK-YAZI baglami: .cine-slide-text[data-theme="light"] + video hero.
   Per-slide "koyu yazi" (data-theme="dark") slaytlarina DOKUNMAZ.
   Her iki site temasinda (koyu/acik) calisir; koyu gorselde halo zaten gorunmez. */
.cine-slide-text .cine-title,
.cine-hero--video .cine-slide-text .cine-title{
  /* v13.61: agir cift halo -> tek, cok hafif golge (leke birakmaz) */
  filter: drop-shadow(0 1px 6px rgba(6,8,11,.35));
}
.cine-slide-text .cine-lede,
.cine-hero--video .cine-slide-text .cine-lede{
  text-shadow: 0 1px 4px rgba(6,8,11,.35);
}
.cine-slide-text .cine-eyebrow,
.cine-hero--video .cine-slide-text .cine-eyebrow{
  text-shadow: 0 1px 4px rgba(6,8,11,.35);
}
/* v13.61: LOKAL KOYU PLAKA KALDIRILDI.
   Metin blogunun arkasindaki radial kutu fotograf uzerinde gorunur bir
   dikdortgen leke birakiyordu. Okunurluk artik yalnizca hero scrim'inden
   (sol karartma gradyani) gelir — leke yok. */

/* ============================================================================
   v13.56 — AÇIK TEMA YAZI KONTRAST DÜZELTMESİ
   Sorun: açık temada --text koyulaşınca, KOYU görsel/video üstündeki yazılar
   (video overlay, poster başlığı, katalog kartı, kayan şerit) koyu-üstüne-koyu
   olup kayboluyordu. Kural: koyu zeminli her yerde yazı BEYAZ; gerçek açık
   yüzeylerde (panel/kart/gövde) yazı KOYU kalır (zaten --text ile öyle).
   Başlıklar/degrade metinlere DOKUNULMAZ (kendi kontrastları var).
   ============================================================================ */
/* --- koyu MEDYA üstündeki yazılar: her temada BEYAZ ve belirgin --- */
html[data-site-theme="light"] body.site .cine-video__overlay,
html[data-site-theme="light"] body.site .cine-video__title,
html[data-site-theme="light"] body.site .cine-video__body,
html[data-site-theme="light"] body.site .cine-video__body p,
html[data-site-theme="light"] body.site .cine-video__overlay .cine-sec-eyebrow,
html[data-site-theme="light"] body.site .cine-poster__overlay,
html[data-site-theme="light"] body.site .cine-poster__name,
html[data-site-theme="light"] body.site .cine-poster__desc,
html[data-site-theme="light"] body.site .cine-cat-card__inner,
html[data-site-theme="light"] body.site .cine-cat-card__eyebrow,
html[data-site-theme="light"] body.site .cine-cat-card__title,
html[data-site-theme="light"] body.site .cine-cat-card__cta {
  color: #F4F5F7 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
/* katalog kartı eyebrow biraz daha yumuşak beyaz (okunur ama bağırmaz) */
html[data-site-theme="light"] body.site .cine-cat-card__eyebrow { color:#E4E6EA !important; }

/* --- açık YÜZEYLERDEKİ başlık/gövde: net KOYU (görünmez kalmasın) --- */
html[data-site-theme="light"] body.site .cine-sec-title,
html[data-site-theme="light"] body.site .cine-story__title,
html[data-site-theme="light"] body.site .cine-stats__title,
html[data-site-theme="light"] body.site .cine-posters__title,
html[data-site-theme="light"] body.site .cine-partners__title,
html[data-site-theme="light"] body.site .cine-stat__num {
  color: #14161B;
}
html[data-site-theme="light"] body.site .cine-story__body,
html[data-site-theme="light"] body.site .cine-story__body p,
html[data-site-theme="light"] body.site .cine-posters__desc-lead,
html[data-site-theme="light"] body.site .cine-stat__label {
  color: #3A3E47;
}

/* ============================================================================
   v13.56 — GÖRSELSİZ PLACEHOLDER: "görsel yok" yerine markalı degrade.
   Böylece henüz görsel eklenmemiş bölümler (hikaye/poster/katalog) kırık
   değil, TASARLANMIŞ görünür. Görsel eklenince otomatik kaybolur.
   ============================================================================ */
.cine-card__noimg, .cine-poster__noimg {
  color: rgba(255,255,255,.30) !important;
  font-family: var(--mono); font-size: 11px; letter-spacing:.32em; text-transform:uppercase;
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(229,56,59,.18), transparent 55%),
    radial-gradient(120% 120% at 85% 110%, rgba(40,46,58,.55), transparent 60%),
    linear-gradient(160deg, #16181d 0%, #0d0f13 100%) !important;
}
.cine-card__noimg::after, .cine-poster__noimg::after {
  content:"NEVADA"; position:absolute; left:50%; top:calc(50% - 18px); transform:translateX(-50%);
  font-family: var(--display, var(--mono)); font-weight:700; font-size:22px; letter-spacing:.14em;
  color: rgba(255,255,255,.10);
}
html[data-site-theme="light"] body.site .cine-card__noimg,
html[data-site-theme="light"] body.site .cine-poster__noimg {
  color: rgba(255,255,255,.42) !important;   /* koyu placeholder her temada koyu kalir */
}

/* ============================================================
   v13.58 — DUZ BASLIK RENGI + YUMUSAK TEMA GECISI
   ------------------------------------------------------------
   1) Basliklardaki krom gradyani (cift renk hissi) kaldirildi.
      Tum basliklar tek renk: var(--title) -> her iki temada BEYAZ.
      Rengi degistirmek icin body.site icindeki --title yeter.
   2) Tema degisimi artik ani degil: <html> uzerine .theme-anim
      sinifi 700ms binerek renk/zemin/kenar/golge gecisleri animasyonlanir.
   ============================================================ */

/* --- gradyansiz baslik ailesi (gradyan olmayan basliklar da beyaza cekilir) --- */
body.site .cine-faq__title,
body.site .cine-stats__title,
body.site .cine-partners__title,
body.site .cine-posters__title,
body.site .gal-hero__title,
body.site .lib-hero__title,
body.site .pf-guest__title{
  color: var(--title);
  -webkit-text-fill-color: var(--title);
  text-shadow: var(--title-shadow);
}


/* --- yumusak tema gecisi ---
   Yalniz tema degisimi sirasinda (.theme-anim, ~700ms) aktif. Sonra kalkar,
   boylece kaydirma/GSAP animasyonlarina kalici maliyet binmez.
   background-image de listede: backdrop'un radial gradyanlari ayni yapida
   oldugu icin tarayici bunlari interpole eder (vinyet de yumusak doner). */
html.theme-anim body.site,
html.theme-anim body.site *,
html.theme-anim body.site *::before,
html.theme-anim body.site *::after{
  transition: background-color .55s var(--ease-soft),
              background-image .55s var(--ease-soft),
              border-color .55s var(--ease-soft),
              color .55s var(--ease-soft),
              -webkit-text-fill-color .55s var(--ease-soft),
              fill .55s var(--ease-soft),
              stroke .55s var(--ease-soft),
              box-shadow .55s var(--ease-soft),
              opacity .55s var(--ease-soft) !important;
}
@media (prefers-reduced-motion: reduce){
  html.theme-anim body.site,
  html.theme-anim body.site *,
  html.theme-anim body.site *::before,
  html.theme-anim body.site *::after{ transition: none !important; }
}

/* ============================================================
   v13.59 — LISANS PORTALI (/claim, /result) SITE DILINDE
   ------------------------------------------------------------
   Eski portal style.css'in mavi/neon dilindeydi; ana site ile uyumsuzdu.
   Artik body.site altinda, ayni monokrom-sinematik dil: ink yuzeyler,
   hairline kenarlar, mono etiketler, krom birincil buton.
   ============================================================ */
.nvp {
  position: relative; z-index: 1;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: clamp(120px,16vh,170px) clamp(18px,5vw,60px) clamp(70px,10vh,110px);
}
.nvp__card {
  width: min(600px, 100%);
  background: var(--ink-1); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 40px 110px rgba(0,0,0,.42);
}
.nvp__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -.02em;
  color: var(--title); -webkit-text-fill-color: var(--title);
  text-shadow: var(--title-shadow); margin: 6px 0 8px;
}
.nvp__sub { color: var(--text-2); font-size: 14.5px; line-height: 1.6; margin: 0 0 28px; }
.nvp__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 12px;
}
.nvp__hint { color: var(--text-3); font-size: 12.5px; line-height: 1.6; margin: 12px 0 0; }
.nvp__btn { width: 100%; justify-content: center; }
.nvp__btn + .nvp__btn { margin-top: 10px; }
.nvp__row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.nvp__row .cine-btn { flex: 1 1 auto; justify-content: center; }

.nvp__input {
  width: 100%; box-sizing: border-box;
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 14px 16px; color: var(--text); font-family: var(--body); font-size: 14.5px;
  transition: border-color .35s var(--ease-cine), background .35s var(--ease-cine);
}
.nvp__input::placeholder { color: var(--text-3); }
.nvp__input:focus { outline: none; border-color: var(--chrome-c); background: var(--ink-3); }

.nvp__divider {
  display: flex; align-items: center; gap: 14px; margin: 30px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--text-3);
}
.nvp__divider::before, .nvp__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* durum bildirimleri — renk degil, ton + ince kenar (monokrom dil) */
.nvp__alert {
  border: 1px solid var(--line-2); border-left-width: 3px; border-radius: 10px;
  background: var(--ink-2); color: var(--text-2);
  padding: 13px 16px; font-size: 14px; line-height: 1.6; margin: 0 0 18px;
}
.nvp__alert b { color: var(--text); }
.nvp__alert--ok   { border-left-color: #7FA98C; }
.nvp__alert--warn { border-left-color: #B99C63; }
.nvp__alert--err  { border-left-color: #B57070; }

/* lisans karti */
.nvp__key {
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--ink-2);
  padding: 18px 20px; margin: 0 0 20px;
}
.nvp__key-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nvp__key-mod { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--text); }
.nvp__key-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text-2);
}
.nvp__key-holder { color: var(--text-2); font-size: 13.5px; margin-top: 6px; }
.nvp__key-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.nvp__key-meta > div {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3);
}
.nvp__key-meta b {
  display: block; margin-top: 5px; font-family: var(--body); font-weight: 600;
  font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text);
  word-break: break-all;
}

.nvp__token {
  font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--text-3);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin: 0 0 12px;
  max-height: 108px; overflow: auto; word-break: break-all;
}

.nvp__how { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.nvp__how ol { margin: 0; padding-left: 20px; color: var(--text-2); }
.nvp__how li { font-size: 14px; line-height: 1.7; margin-bottom: 8px; }
.nvp__how b { color: var(--text); }

@media (max-width: 520px){
  .nvp__key-meta { grid-template-columns: 1fr; }
}


/* ============================================================
   v13.60 — ACIK TEMA BUTON/BASLIK RÖTUSU
   ============================================================ */
/* hayalet buton: koyu temada beyaz sis, acik temada murekkep sisi */
html[data-site-theme="light"] body.site .cine-btn--ghost:hover{
  background: rgba(0,0,0,.045);
}
/* video bolumu basligi fotograf/video ustunde -> her temada acik */
body.site .cine-video__overlay .cine-video__title{
  color: var(--title-media); -webkit-text-fill-color: var(--title-media);
}
/* galeri filtre sekmesi: duz dolgu (tam siyah/beyaz blok degil) */
body.site .gf__tab.is-active{
  color: var(--btn-ink); background: var(--btn-fill); border-color: var(--btn-fill);
}


/* ============================================================
   v13.61 — UYE KARTI ACIK TEMADA DA UYUMLU
   ------------------------------------------------------------
   Kart her temada KOYU metalikti; acik temada uzerindeki isim
   (--title -> koyu murekkep) kartin uzerinde kayboluyordu.
   Cozum: acik temada kart da PLATIN metalige doner, uzerindeki
   yazilar koyu olur. Koyu tema aynen korunur.
   ============================================================ */
html[data-site-theme="light"] body.site .lib-card{
  background: linear-gradient(128deg, #E3E6EA 0%, #F3F4F7 26%, #FCFCFD 46%,
                                       #E2E5EA 60%, #CBD0D7 100%);
  border-color: #C6CBD3;
  box-shadow: 0 16px 40px rgba(28,38,54,.16), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-site-theme="light"] body.site .lib-card__sweep{
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.8), transparent);
}
html[data-site-theme="light"] body.site .lib-card__brand{ color:#3A3F48; }
html[data-site-theme="light"] body.site .lib-card__dot{ color:#8B929B; }
html[data-site-theme="light"] body.site .lib-card__hello{ color:#6D737C; }
html[data-site-theme="light"] body.site .lib-card__meta small{ color:#797F88; }
html[data-site-theme="light"] body.site .lib-card__meta span{ color:#3A3F48; }
html[data-site-theme="light"] body.site .lib-card__tier{
  color:#4A4E58; border-color:#B7BCC4;
}
html[data-site-theme="light"] body.site .lib-card__tier.is-paid{
  color:#F1F2F4; border-color:transparent;
  background: linear-gradient(135deg, #3A3F48, #23262D);
}
html[data-site-theme="light"] body.site .lib-card__chip{
  background: linear-gradient(135deg, #C6CCD3 0%, #99A0A8 48%, #BEC4CB 100%);
  border-color:#98A0A9;
}

/* ============================================================
   v13.83 — BANNER RENGINDE UZUN ERIME + "ADA KART" (Rockstar)

   Onceki durum: hero dibi SABIT SIYAH'a (--ink-0) eriyordu ve erime kisaydi.
   Sonuc: kirmizi/krem/beyaz banner'da foto ile siyah arasinda gri, olu bir
   bant olusuyordu.

   Yeni durum:
   1) --fade  = banner gorselinin DIP bandinin baskin rengi (app.py:_img_fade_color).
      Kirmizi yogun banner -> kirmiziya, krem -> kreme, beyaz -> beyaza erir.
   2) Erime UZATILDI (clamp 260px..44vh..620px) ve solid --fade ile biter.
   3) .cine-below::before o rengi hero'nun BITTIGI yerden alip ~90vh boyunca
      siyaha (--ink-0) cozer -> hicbir yerde cizgi/bant yok.
   4) Hero'nun altina denk gelen ilk bolum = ADA KART: yuvarlak kose, kendi
      koyu zemini, ince kenar, derin golge; renkli zeminin uzerine binerek
      "yuzer" (negatif margin ile hero'nun icine tasar).

   Slayt degisince renk yumusakca gecer: @property ile --fade animate edilir
   (destegi olmayan tarayicida aninda degisir -> kirilma yok, sadece gecis yok).
   ============================================================ */

@property --fade {
  syntax: "<color>";
  inherits: true;
  initial-value: #08090B;
}

body.site {
  --fade: #08090B;                    /* fallback: eski siyah davranis */
  transition: --fade 1.1s var(--ease-cine, ease);
}

/* --- 1) hero dibi: uzun, banner renginde erime --- */
.cine-hero--slides .cine-fade--bottom,
.cine-hero--video  .cine-fade--bottom {
  display: block;
  opacity: 1;
  height: clamp(260px, 44vh, 620px);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fade)  0%, transparent)   0%,
    color-mix(in srgb, var(--fade)  7%, transparent)  24%,
    color-mix(in srgb, var(--fade) 24%, transparent)  43%,
    color-mix(in srgb, var(--fade) 50%, transparent)  60%,
    color-mix(in srgb, var(--fade) 76%, transparent)  76%,
    color-mix(in srgb, var(--fade) 93%, transparent)  89%,
    var(--fade) 100%);
}

/* scrim'in DIP karartmasi da artik siyah degil banner tonunda — yoksa acik
   (krem/beyaz) banner'larda dipte gri bulanti olusuyordu. Sol taraftaki yazi
   karartmasi aynen korunur (baslik okunurlugu). */
.cine-hero--slides .cine-hero__scrim {
  background:
    linear-gradient(180deg, transparent 0%, transparent 58%,
                    color-mix(in srgb, var(--fade) 42%, transparent) 100%),
    linear-gradient(90deg, rgba(6,8,11,.78) 0%, rgba(6,8,11,.55) 26%,
                            rgba(6,8,11,.22) 46%, transparent 64%);
}

/* --- 2) hero altinda rengin devami: ~90vh boyunca siyaha cozulur --- */
.cine-below { position: relative; }
.cine-below > * { position: relative; z-index: 1; }
.cine-below::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 90vh; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    var(--fade) 0%,
    color-mix(in srgb, var(--fade) 62%, var(--ink-0)) 22%,
    color-mix(in srgb, var(--fade) 28%, var(--ink-0)) 48%,
    color-mix(in srgb, var(--fade)  9%, var(--ink-0)) 72%,
    var(--ink-0) 100%);
}
/* bolum yoksa bile erime tamamlansin (dipte cizgi kalmasin) */
.cine-below:empty { min-height: 55vh; }

/* --- 3) ADA KART: hero'ya binen, yuzen icerik karti --- */
.cine-island {
  z-index: 2;
  max-width: 1280px;
  margin: clamp(-170px, -13vh, -90px) auto 0;
  padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 60px);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background: color-mix(in srgb, var(--ink-1) 86%, var(--fade));
  box-shadow:
    0 44px 110px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
/* bolumlerin kendi ust cizgisi kartin icinde anlamsiz */
.cine-island { border-top: 1px solid rgba(255,255,255,.10); }
/* kart icindeki bolum kendi devasa padding'ini kullanmasin */
.cine-island > .cine-stats__inner,
.cine-island > .cine-partners__inner,
.cine-island > .cine-posters__inner { padding-left: 0; padding-right: 0; }

@media (max-width: 900px) {
  .cine-island {
    margin: clamp(-90px, -8vh, -50px) 14px 0;
    border-radius: 18px;
    padding: clamp(22px, 5vw, 34px) clamp(16px, 5vw, 28px);
  }
  .cine-hero--slides .cine-fade--bottom,
  .cine-hero--video  .cine-fade--bottom { height: clamp(200px, 34vh, 380px); }
  .cine-below::before { height: 75vh; }
}

/* color-mix DESTEKLENMIYORSA (cok eski tarayici): yukaridaki background
   bildirimleri gecersiz sayilir ve dosyanin ustundeki duz-siyah gradyanlar
   yururlukte kalir -> site v13.82 gibi calisir, sadece renk efekti olmaz. */

/* ============================================================
   v13.84 — TAM KONTRAST (saf siyah / saf beyaz) + ADA KART CILASI
   ------------------------------------------------------------
   v13.60'ta yazi ve butonlar bilerek "yumusak" tutulmustu (#ECEEF2 / #232730).
   Sonuc: nav linkleri ve LICENSE PORTAL yazisi soluk, butonlar donuk goruyordu.
   Artik: KOYU temada saf BEYAZ, ACIK temada saf SIYAH. Ikincil yazilar da
   belirgin sekilde koyulastirildi/aclildi.
   ============================================================ */

body.site {
  --text:      #FFFFFF;
  --text-2:    #B9BDC4;      /* ikincil — daha okunur */
  --text-3:    #7B7F87;
  --title:     #FFFFFF;
  --chrome-a:  #FFFFFF;
  --btn-fill:    #FFFFFF;    /* birincil buton: SAF BEYAZ dolgu */
  --btn-fill-hi: #FFFFFF;
  --btn-ink:     #000000;    /* uzerinde SAF SIYAH yazi */
}

html[data-site-theme="light"] body.site {
  --text:      #000000;
  --text-2:    #3A3E46;
  --text-3:    #6B7079;
  --title:     #000000;
  --chrome-a:  #000000;
  --btn-fill:    #000000;    /* birincil buton: SAF SIYAH dolgu */
  --btn-fill-hi: #000000;
  --btn-ink:     #FFFFFF;    /* uzerinde SAF BEYAZ yazi */
}

/* nav: linkler + marka + "LICENSE PORTAL" -> tam kontrast, hafif daha kalin */
body.site .site-nav__links a,
html[data-site-theme="light"] body.site .site-nav__links a {
  color: var(--text);
  font-weight: 600;
  opacity: .92;
  transition: opacity .25s var(--ease-cine), color .25s var(--ease-cine);
}
body.site .site-nav__links a:hover { opacity: 1; }
body.site .site-nav__brand { color: var(--text); }
body.site .site-nav__sub,
body.site .brand-sub {
  color: var(--text-2);      /* eski hali okunmayacak kadar soluktu */
  opacity: 1;
}
/* tema dugmesi ve kebab: kenari ve ikonu belirgin */
body.site .theme-toggle,
body.site .nav-menu-btn { color: var(--text); border-color: var(--line-2); }

/* butonlar: duz, tam kontrast dolgu — hover'da renk degil yalniz yukselme */
body.site .cine-btn--primary,
body.site .cine-btn--solid {
  background: var(--btn-fill); color: var(--btn-ink); border-color: var(--btn-fill);
  font-weight: 700;
}
body.site .cine-btn--primary:hover,
body.site .cine-btn--solid:hover {
  background: var(--btn-fill-hi); color: var(--btn-ink);
  transform: translateY(-2px);
}
body.site .cine-btn--ghost { color: var(--text); border-color: var(--line-2); font-weight: 600; }
body.site .cine-btn--ghost:hover { border-color: var(--text); }

/* --- ADA KART: acik temada beyaz kagit + yumusak golge (gri blok degil) --- */
html[data-site-theme="light"] body.site .cine-island {
  background: color-mix(in srgb, #FFFFFF 92%, var(--fade));
  border: 1px solid rgba(0,0,0,.08);
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 40px 90px rgba(28,38,54,.18), inset 0 1px 0 rgba(255,255,255,.7);
}

/* KAYDIR ipucu kaldirildi (v13.84) — markup'tan da silindi, bu bir emniyet kemeri */
.cine-scrollcue { display: none !important; }

/* ============================================================
   v13.85 — NAV: BUGULU BANT + KAYDIRINCA GIZLENME (Rockstar)
   ------------------------------------------------------------
   Eski: is-scrolled sadece gradyan scrim'in opakligini aciyordu; bant
   yumusak bir "duman" gibiydi ve asagi inince hep ekranda kaliyordu.
   Yeni:
     .is-scrolled -> gercek BANT: yari saydam zemin + blur + alt hairline
     .is-hidden   -> bant yukari kayip kaybolur (asagi kaydirirken)
     yukari kaydirinca .is-hidden kalkar -> bant geri iner
   ============================================================ */

/* v14.00.1 — NAV BANDI: DUZ BANT + KAYDIRINCA KAYBOLMA (Rockstar tarzi)
   Istek: golgeli/gradyan degil DUZ bir bant; asagi indikce bulaniklasip
   KAYBOLSUN. Onceki maskeli gradyan kaldirildi. Ayrica lenis-ready kuralinin
   (opacity:1) bandi \"kaybolmaz\" yapan ozgullugunu ayni onekle geciyoruz. */
.site-nav {
  transition: opacity .5s var(--ease-cine),
              transform .5s var(--ease-cine),
              background .45s var(--ease-cine),
              backdrop-filter .45s var(--ease-cine),
              padding .5s var(--ease-cine);
  border-bottom: none;
  will-change: opacity, transform;
}

/* gradyan scrim kapali -> DUZ bant kullaniyoruz (cift katman olmasin) */
.site-nav.is-scrolled::before { opacity: 0; }

/* DUZ bant: yari saydam koyu zemin + blur, SERT alt cizgi/kata YOK */
.site-nav.is-scrolled {
  background: color-mix(in srgb, var(--ink-0) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
}

/* asagi kaydirinca bant TAMAMEN YUKARI kayar (translateY -100%) -> ekrandan
   tamamen cikar; yukari kaydirinca geri iner. transform kullaniyoruz cunku
   GSAP intro'su nav'a inline opacity biraktigindan opacity:0 ile gizleme
   ise yaramiyordu; transform'a GSAP dokunmaz. opacity de eklenir (cine.js
   intro sonrasi inline opacity'yi temizler -> yumusak solma da katkida). */
.site-nav.is-hidden,
html.lenis-ready body.site .site-nav.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/* mobil menu acikken gizlenmesin */
.site-nav.menu-open.is-hidden,
html.lenis-ready body.site .site-nav.menu-open.is-hidden {
  transform: none; opacity: 1; pointer-events: auto;
}

/* KART/MODAL ACIKKEN: nav ve sosyal ray devre disi — arkadaki butonlara
   yanlislikla basilmasin (kullanici istegi). */
body.gd-open .site-nav,
body.gd-open .social-rail {
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-cine);
}


/* ============================================================
   v13.90 — NAV SADELESTIRME: acilir gruplar + hesap rozeti
   ------------------------------------------------------------
   8 duz linkten 2 duz link + 2 acilir gruba indirildi (Etkinlik+Galeri+
   Topluluk -> "Topluluk"; Hakkimizda+SSS+Iletisim -> "Bilgi"). "Profilim"
   duz linkten cikip site-nav__end'e avatarli bir hesap rozetine tasindi.
   Tiklama-bazli acilir menu: hover degil (dokunmatikte hover calismaz),
   JS her [data-nav-pop] icin ayni davranisi yonetir (base.html).
   ============================================================ */

/* ---- ACILIR GRUP DUGMESI: mevcut .site-nav__links a ile ayni gorunum ---- */
.nav-drop{ position:relative; }
.nav-drop__btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--body); font-weight:600; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text); opacity:.92; background:none; border:0; cursor:pointer;
  padding:6px 0; position:relative; -webkit-tap-highlight-color:transparent;
  transition:opacity .25s var(--ease-cine), color .4s var(--ease-cine);
}
.nav-drop__btn::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--chrome-a); transition:width .4s var(--ease-cine);
}
.nav-drop__btn:hover{ opacity:1; }
.nav-drop__btn:hover::after{ width:100%; }
.nav-drop.is-open .nav-drop__btn,
.nav-drop.is-current .nav-drop__btn{ opacity:1; }
.nav-drop.is-current .nav-drop__btn::after{ width:100%; }
.nav-drop__caret{ opacity:.65; transition:transform .3s var(--ease-cine); }
.nav-drop.is-open .nav-drop__caret{ transform:rotate(180deg); opacity:1; }

/* ---- ACILIR PANEL: kart, masaustunde ortadan asagi sarkar ---- */
.nav-drop__menu{
  position:absolute; top:calc(100% + 16px); left:50%; min-width:208px;
  margin:0; padding:8px; list-style:none;
  background:var(--ink-1); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.5); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,-6px); transform-origin:top center;
  transition:opacity .26s var(--ease-cine), transform .26s var(--ease-cine), visibility .26s;
  z-index:70;
}
.nav-drop.is-open .nav-drop__menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.nav-drop__menu a{
  display:block; padding:10px 13px; border-radius:9px; font-size:13px;
  font-family:var(--body); font-weight:500; letter-spacing:.01em;
  color:var(--text-2); text-decoration:none; white-space:nowrap;
  transition:background .2s var(--ease-cine), color .2s var(--ease-cine);
}
.nav-drop__menu a:hover{ background:var(--ink-3); color:var(--text); }

/* hesap menusu: sag hizali, avatarin altindan sarkar, biraz genis */
.nav-drop__menu--acct{
  left:auto; right:0; transform:translateY(-6px); min-width:220px;
}
.nav-acct.is-open .nav-drop__menu--acct{ transform:translateY(0); }
.nav-drop__who{
  display:block; padding:8px 13px 10px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
  border-bottom:1px solid var(--line); margin-bottom:5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:220px;
}
.nav-drop__sep{ border:0; border-top:1px solid var(--line); margin:5px 6px; }

/* ---- HESAP ROZETI: avatar dugmesi (site-nav__end icinde) ---- */
.nav-acct{ position:relative; }
.nav-acct__btn{
  display:flex; align-items:center; justify-content:center; padding:0;
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--line-2); background:transparent; cursor:pointer;
  overflow:hidden; -webkit-tap-highlight-color:transparent;
  transition:border-color .3s var(--ease-cine), transform .3s var(--ease-cine);
}
.nav-acct__btn:hover{ border-color:var(--chrome-c); transform:translateY(-1px); }
.nav-acct.is-open .nav-acct__btn{ border-color:var(--accent); }
.nav-acct__av{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:12.5px; color:var(--text-2);
  background:var(--ink-2);
}
.nav-acct__av img{ width:100%; height:100%; object-fit:cover; display:block; }

.nav-acct__login{
  font-family:var(--body); font-weight:600; font-size:12.5px; letter-spacing:.05em;
  color:var(--text-2); text-decoration:none; white-space:nowrap; padding:6px 2px;
  transition:color .3s var(--ease-cine);
}
.nav-acct__login:hover{ color:var(--text); }

/* ---- MOBIL (<=860px): acilir gruplar kebab panelinin ICINDE, akista
   duz bir alt-liste olarak genisler -- masaustundeki gibi ayri bir kart
   olarak "kacmaz". Hesap rozeti site-nav__end'de kaldigi icin (kebab
   panelinin disinda) davranisi degismez, hep ayni floating kart. ---- */
@media (max-width:860px){
  body.site .site-nav__links .nav-drop{ width:100%; }
  body.site .site-nav__links .nav-drop__btn{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-radius:9px; font-size:13px; letter-spacing:.06em;
    opacity:1; text-transform:uppercase;
  }
  body.site .site-nav__links .nav-drop__btn:hover{ background:var(--ink-3); }
  body.site .site-nav__links .nav-drop__btn::after{ display:none; }
  body.site .site-nav__links .nav-drop.is-current .nav-drop__btn{ color:var(--accent); }
  body.site .site-nav__links .nav-drop__menu{
    position:static; transform:none !important; opacity:1; visibility:visible;
    pointer-events:auto; display:none; flex-direction:column;
    background:transparent; border:0; box-shadow:none; backdrop-filter:none;
    padding:2px 0 4px 10px; min-width:0; margin:0;
  }
  body.site .site-nav__links .nav-drop.is-open .nav-drop__menu{ display:flex; }
  body.site .site-nav__links .nav-drop__menu a{
    padding:11px 14px; font-size:12.5px; color:var(--text-2);
  }
  body.site .site-nav__links .nav-drop__menu a:hover{ background:var(--ink-3); color:var(--text); }

  .nav-acct__btn{ width:32px; height:32px; }
  .nav-drop__menu--acct{ min-width:200px; }
}

html[data-site-theme="light"] body.site .nav-acct__btn{ border-color:#C6CAD1; }

/* --- RTL (Arapça) temel düzeltmeler --------------------------------------
   Site ağırlıklı olarak akış-tabanlı; burada yalnızca yön bağımlı birkaç
   yeri çeviriyoruz. Tam RTL denetimi ana dili konuşan biriyle yapılmalı. */
html[dir="rtl"] body.site .site-nav__links{ direction:rtl; }
html[dir="rtl"] body.site .nav-drop__menu{ left:auto; right:50%; transform:translate(50%,-6px); }
html[dir="rtl"] body.site .nav-drop.is-open .nav-drop__menu{ transform:translate(50%,0); }
html[dir="rtl"] body.site .nav-drop__menu--acct{ right:auto; left:0; transform:translateY(-6px); }
html[dir="rtl"] body.site .nav-acct.is-open .nav-drop__menu--acct{ transform:translateY(0); }
html[dir="rtl"] body.site .nav-more__panel{ right:auto; left:0; }
/* RTL'de katman kaymasi ters yone gitmeli */
html[dir="rtl"] body.site .nav-more__panel.is-lang .nmp-slider{ transform:translateX(50%); }
html[dir="rtl"] body.site .nmp-head__t{ padding-right:0; padding-left:30px; }
html[dir="rtl"] body.site .mc__no{ text-align:left; }
html[dir="rtl"] body.site .mc-perks li{ flex-direction:row-reverse; text-align:right; }







/* ============================================================
   v13.98 — "⋮" MENÜSÜ: kompakt, saydam, açılınca büyüyen
   ------------------------------------------------------------
   Ana menü kısa (Dil · Koyu Tema · Giriş). "Dil"e basınca panel
   hem sola kayar hem YÜKSEKLİĞİ BÜYÜR — sabit yükseklik verip
   içini kaydırmak yerine bunu seçtim: kısa menüde boş alan
   kalmıyor, uzun listede kutu birden zıplamıyor.
   ============================================================ */
.nav-more{ position:relative; }
.nav-more__btn{
  width:34px; height:34px; flex:0 0 auto; display:inline-flex;
  align-items:center; justify-content:center; padding:0;
  border-radius:50%; border:1px solid var(--line-2); background:transparent;
  color:var(--text-2); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:color .3s var(--ease-cine), border-color .3s var(--ease-cine),
             background .3s var(--ease-cine);
}
.nav-more__btn:hover{ color:var(--text); border-color:var(--chrome-c); }
.nav-more.is-open .nav-more__btn{
  color:var(--text); border-color:transparent; background:rgba(255,255,255,.10);
}

/* --- panel: saydam cam --- */
.nav-more__panel{
  position:absolute; top:calc(100% + 14px); right:0; z-index:70;
  width:292px; overflow:hidden; border-radius:20px;
  background:rgba(22,26,31,.80);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 64px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px) scale(.97); transform-origin:top right;
  transition:opacity .24s var(--ease-cine), transform .24s var(--ease-cine),
             visibility .24s, height .3s var(--ease-cine,cubic-bezier(.2,.7,.2,1));
}
.nav-more.is-open .nav-more__panel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0) scale(1);
}

/* iki katman yan yana; panel kayar */
.nmp-slider{
  display:flex; width:200%;
  transition:transform .32s var(--ease-cine,cubic-bezier(.2,.7,.2,1));
}
/* JS yukseklik veremezse panel dogal boyunda acilir (asla 0 kalmaz) */
.nav-more__panel:not([style*="height"]) .nmp{ align-self:auto; }
.nav-more__panel.is-lang .nmp-slider{ transform:translateX(-50%); }
.nmp{ width:50%; flex:none; align-self:flex-start; }

/* --- ana menü --- */
.nmp--main{ padding:8px; }
.nmp-row{
  display:flex; align-items:center; gap:13px; width:100%; box-sizing:border-box;
  padding:11px 12px; border:0; border-radius:13px; background:none;
  color:var(--text); font-family:var(--body); font-size:15px; text-align:left;
  text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .18s var(--ease-cine);
}
.nmp-row:hover{ background:rgba(255,255,255,.07); }
.nmp-ic{
  width:22px; flex:none; display:flex; align-items:center; justify-content:center;
  color:var(--text-2);
}
.nmp-row__t{ flex:1; min-width:0; }
.nmp-row__c{ flex:none; color:var(--text-3); }

.nmp-sep{
  height:1px; margin:7px 12px; background:rgba(255,255,255,.09);
}

/* --- toggle anahtarı --- */
.nmp-sw{
  flex:none; width:42px; height:24px; border-radius:99px; position:relative;
  background:rgba(255,255,255,.16); transition:background .25s var(--ease-cine);
}
.nmp-sw i{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:transform .25s var(--ease-cine,cubic-bezier(.2,.7,.2,1));
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
[role="switch"][aria-checked="true"] .nmp-sw{ background:var(--accent,#7ED957); }
[role="switch"][aria-checked="true"] .nmp-sw i{ transform:translateX(18px); }

/* --- dil katmanı --- */
.nmp-head{
  display:flex; align-items:center; gap:6px; padding:11px 14px 11px 8px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.nmp-back{
  width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center;
  border:0; background:none; color:var(--text-2); cursor:pointer; border-radius:50%;
  transition:background .2s, color .2s;
}
.nmp-back:hover{ background:rgba(255,255,255,.08); color:var(--text); }
.nmp-head__t{
  flex:1; text-align:center; padding-right:30px;
  font-family:var(--display); font-weight:600; font-size:16px; color:var(--text);
}
.nmp-list{ padding:6px; }
.nav-more__panel.is-lang .nmp--lang{ max-height:none; }
.nav-more__panel.is-lang .nmp-list{ overflow-y:auto; }

.lang-row{
  display:flex; align-items:center; gap:13px; width:100%; box-sizing:border-box;
  padding:9px 11px; border-radius:11px; text-decoration:none;
  color:var(--text-2); font-size:14.5px; line-height:1.3;
  transition:background .18s var(--ease-cine), color .18s var(--ease-cine);
}
.lang-row:hover{ background:rgba(255,255,255,.07); color:var(--text); }
.lang-row__f{ flex:none; display:flex; }
.lang-row__f .lang-flag{ border-radius:3px; display:block; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.lang-row__n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lang-row__c{ flex:none; color:var(--text); }
.lang-row.is-on{ color:var(--text); font-weight:600; }

.site-nav__links a.nav-hot{ color:var(--text); opacity:1; }
.site-nav__links a.nav-hot::after{ width:100%; background:var(--accent); }

@media (max-width:860px){
  .nav-more__btn{ width:32px; height:32px; }
  .nav-more__panel{ width:272px; }
}
@media (max-width:340px){
  .nav-more__panel{ width:calc(100vw - 28px); }
}

/* açık tema: cam beyaza döner */
html[data-site-theme="light"] body.site .nav-more__panel{
  background:rgba(250,251,252,.86);
  border-color:rgba(20,28,40,.10);
  box-shadow:0 24px 64px rgba(28,38,54,.20), inset 0 1px 0 rgba(255,255,255,.7);
}
html[data-site-theme="light"] body.site .nmp-row:hover,
html[data-site-theme="light"] body.site .lang-row:hover,
html[data-site-theme="light"] body.site .nmp-back:hover{ background:rgba(20,28,40,.06); }
html[data-site-theme="light"] body.site .nmp-sep{ background:rgba(20,28,40,.10); }
html[data-site-theme="light"] body.site .nmp-sw{ background:rgba(20,28,40,.18); }
html[data-site-theme="light"] body.site .nav-more.is-open .nav-more__btn{
  background:rgba(20,28,40,.07);
}
html[data-site-theme="light"] body.site .nav-more__btn{ border-color:#C6CAD1; }

/* backdrop-filter desteklemeyen tarayıcıda okunabilirlik korunsun */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-more__panel{ background:var(--ink-1); }
  html[data-site-theme="light"] body.site .nav-more__panel{ background:#FAFBFC; }
}

@media (prefers-reduced-motion: reduce){
  .nmp-slider, .nav-more__panel{ transition:opacity .2s ease, visibility .2s; }
}

/* ==========================================================================
   v14.00 — ANA SAYFA TOPLULUK ONIZLEME BLOKLARI (Galeri / Sıralama)
   Panelden acilir; bolum sirasindan istenen yere tasinir. Sinematik monokrom
   dile sadik: koyu murekkep zemin, krom vurgu, sayilar mono.
   ========================================================================== */
.cine-community{
  padding: clamp(46px,7vh,82px) clamp(28px,7vw,120px);
  max-width: 1320px; margin: 0 auto; position: relative;
}
.cine-community__head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: clamp(20px,3vw,30px);
}
.cine-community__head .cine-sec-title{ margin: 4px 0 0; }
.cine-community__all{
  font-family: var(--mono); font-size: calc(11.5px * var(--tscale,1));
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
  text-decoration: none; white-space: nowrap; padding-bottom: 4px;
  border-bottom: 1px solid transparent; transition: color .4s var(--ease-cine), border-color .4s var(--ease-cine);
}
.cine-community__all:hover{ color: var(--chrome-a); border-bottom-color: var(--chrome-a); }

/* --- GALERI ızgarası --- */
.cine-gal-grid{
  display: grid; gap: clamp(10px,1.4vw,16px);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.cine-gal-cell{
  position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  text-decoration: none; background: var(--ink-2); border: 1px solid var(--line);
  display: block; isolation: isolate;
  transition: transform .5s var(--ease-cine), border-color .5s var(--ease-cine), box-shadow .5s var(--ease-cine);
}
.cine-gal-cell img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.86) saturate(1.02); transform: scale(1.02);
  transition: transform 1s var(--ease-cine), filter 1s var(--ease-cine);
}
.cine-gal-cell:hover{ transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 20px 46px rgba(0,0,0,.5); }
.cine-gal-cell:hover img{ transform: scale(1.08); filter: brightness(.98) saturate(1.06); }
.cine-gal-cell__grad{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(8,9,11,.78) 0%, rgba(8,9,11,.12) 42%, transparent 66%);
  opacity: 0; transition: opacity .5s var(--ease-cine);
}
.cine-gal-cell:hover .cine-gal-cell__grad{ opacity: 1; }
.cine-gal-cell__meta{
  position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease-cine), transform .5s var(--ease-cine);
}
.cine-gal-cell:hover .cine-gal-cell__meta{ opacity: 1; transform: none; }
.cine-gal-cell__meta b{
  font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cine-gal-cell__meta i{
  font-style: normal; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .04em; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- SIRALAMA listesi --- */
.cine-rank{
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--ink-1); max-width: 720px;
}
.cine-rank__row{
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center;
  gap: 14px; padding: 14px clamp(16px,2.4vw,22px);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease-cine);
}
.cine-rank__row:last-child{ border-bottom: none; }
.cine-rank__row:hover{ background: var(--ink-2); }
.cine-rank__no{
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  letter-spacing: .04em; color: var(--text-3); text-align: center;
}
.cine-rank__row--top .cine-rank__no{ color: var(--chrome-a); font-weight: 600; }
.cine-rank__name{
  font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cine-rank__val{ font-family: var(--mono); font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.cine-rank__val small{ font-size: 10px; color: var(--text-3); margin: 0 5px 0 1px; letter-spacing: .06em; }

@media (max-width: 560px){
  .cine-gal-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .cine-gal-cell__meta{ opacity: 1; transform: none; }
  .cine-gal-cell__grad{ opacity: 1; }
}

/* ==========================================================================
   v14.03 — FOTO ÇERÇEVE KENARI TEMİZLİĞİ (genel)
   Doğru yaklaşım: görsel DÜZ dikdörtgen kalır; yuvarlaklığı YALNIZCA kapsayıcı
   (overflow:hidden + border-radius) verir. Görsele ayrıca border-radius vermek
   çift kenar/ince şerit yaratıyordu (v14.03.1'de kaldırıldı). Kapsayıcı kendi
   katmanında temiz clip'lenir; açık temada foto kartlarının 1px halkası yumuşar.
   ========================================================================== */
.cine-cat-card, .cine-gal-cell, .cine-strip__item, .cine-poster__img,
.cine-panel, .cine-thumb, .cine-stage-frame {
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* açık temada foto çerçevelerinin sert 1px halkasını yumuşat */
html[data-site-theme="light"] .cine-cat-card,
html[data-site-theme="light"] .cine-gal-cell,
html[data-site-theme="light"] .cine-strip__item,
html[data-site-theme="light"] .cine-thumb {
  border-color: color-mix(in srgb, var(--line) 45%, transparent);
}

/* ==========================================================================
   v14.06 — FOTO KÖŞE KIRPMA DÜZELTMESİ (tüm görsel kapları)
   --------------------------------------------------------------------------
   Sorun: will-change / scale / GSAP transform'lu <img> kendi GPU katmanına
   düşünce, parent'taki "overflow:hidden + border-radius" o katmanı KÖŞEDE
   AA'sız kırpıyor -> testere gibi sert köşe ya da ince boşluk (ekran
   görüntüsündeki bozukluk). v14.05'te .cine-stage-frame'de kanıtlanan clip-path
   çözümü; bu sefer doğrudan MEDYANIN kendisine uygulanıyor. Böylece kutunun
   box-shadow'u ve hover koreografisi HİÇ bozulmadan köşeler her katmanda
   tereyağı gibi kesiliyor. Sadece CSS — HTML/şablon değişmiyor.
   --mediaR: köşe yarıçapı parent'ta tanımlı, img custom-prop mirasıyla alıyor.
   ========================================================================== */
.cine-poster__img  img,
.cine-cat-card__media img,
.cine-story__media img,
.cine-strip__item  img,
.cine-thumb        img{
  -webkit-clip-path: inset(0 round var(--mediaR, 12px));
          clip-path: inset(0 round var(--mediaR, 12px));
}
.cine-poster__img  { --mediaR: 14px; }
.cine-cat-card     { --mediaR: 10px; }
.cine-story__media { --mediaR: 10px; }
.cine-strip__item  { --mediaR: 8px;  }
.cine-thumb        { --mediaR: 5px;  }

/* iframe/video de aynı dertten muzdarip — özellikle iOS Safari border-radius'u
   iframe köşesine hiç uygulamıyor; clip-path zorla yuvarlıyor. */
.cine-video__frame .cine-video__ratio iframe,
.cine-video__frame .cine-video__ratio video{
  -webkit-clip-path: inset(0 round 16px);
          clip-path: inset(0 round 16px);
}

/* --------------------------------------------------------------------------
   v14.06 — KATMANA ÇIKARMA (kanıtlanmış cat-card deseni)
   Teşhis: .cine-cat-card KÖŞE olarak KUSURSUZ çünkü `transform:translateZ(0)`
   ile kendi GPU katmanına çıkıyor -> yuvarlak köşesini AA'lı kesiyor.
   .cine-story__media'da bu YOKTU; içindeki foto GSAP paralaks ile kendi
   katmanına düşüyor ama kap katmanda olmadığı için köşe AA'sız/testere.
   Çözüm: aynı deseni eksik kaplara da ver. box-shadow ETKİLENMEZ (overflow
   sadece ÇOCUĞU kırpar; gölge kutunun dışında çizilir — cat-card bunu kanıtlıyor).
   -------------------------------------------------------------------------- */
.cine-story__media,
.cine-strip__item,
.cine-thumb{
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* ==========================================================================
   v14.06-fix2 — .cine-story__media KESİN KÖŞE DÜZELTMESİ
   --------------------------------------------------------------------------
   TEŞHİS: .cine-story__media img { height:110% } — foto kaptan %10 uzun (GSAP
   paralaks). Bu yüzden clip-path'i FOTOĞRAFA koymak yanlıştı: fotonun yuvarlak
   köşeleri ekran DIŞINDA kalıyor, görünen köşeler kabın eski overflow+radius
   kırpmasından geliyor -> üst köşe yuvarlak, alt köşe sert ("arkadan sert köşe").
   ÇÖZÜM: .cine-stage-frame'in KANITLANMIŞ reçetesi — clip-path KABA uygulanır
   (her çocuğu, hangi katmanda olursa olsun, AA'lı keser); box-shadow clip'lenir
   diye onun yerine clip'e uyan drop-shadow konur.
   ========================================================================== */
.cine-story__media img{           /* eski (yanlış) img-clip'i geri al */
  -webkit-clip-path: none; clip-path: none;
}
.cine-story__media{
  /* ÖLÇÜLEN KUSUR: sağ kenarda foto->açık->KOYU 1px->beyaz, yani kenarlığın
     bıraktığı ince koyu DİKİŞ ("arkadan sert köşe").
     ÇÖZÜM: (1) kenarlığı kaldır -> dikiş yok. (2) cat-card'ın kanıtlı
     translateZ(0)'ı -> kap kendi katmanında, köşe AA'lı. (3) clip-path YOK ->
     box-shadow olduğu gibi KORUNUR (gölge garanti). (4) 16px -> daha yumuşak. */
  border: 0;
  border-radius: 16px;
  transform: translateZ(0);
  -webkit-clip-path: none; clip-path: none;
  filter: none;
  box-shadow: 0 26px 64px rgba(0,0,0,.32);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

/* ==========================================================================
   v14.09 — FOTO KÖŞE: TEK VE KESİN ÇÖZÜM ("arkadan sert köşe" biter)
   --------------------------------------------------------------------------
   KÖK NEDEN: Yuvarlaklık ya <img>'e (v14.06) ya da kabın
   "overflow:hidden + border-radius + translateZ" katmanına (fix2) bırakıldı.
   İkisi de foto kendi GPU katmanına düşünce (scale/parallax/will-change)
   köşeyi AA'sız kesip ARKADAN SERT KÖŞE bırakıyor.
   KANITLANMIŞ REÇETE (.cine-stage-frame, v14.05): clip-path KABIN KENDİSİNE
   konur -> hangi katmanda olursa olsun her çocuğu köşede AA'lı keser. clip-path
   box-shadow'u da kırptığı için dış gölge drop-shadow'a çevrilir (kırpılmaz,
   yuvarlak köşeye uyar). <img>'lerin kendi clip'i kaldırılır (çift kesim yok).
   1px border korunur: clip inset(0)=border kutusu, border-radius aynı R ->
   köşeler BİREBİR çakışır, dikiş kalmaz. Salt CSS; HTML/şablon değişmez.
   ========================================================================== */

/* 1) yuvarlaklık artık KABIN clip'i (her çocuğu, her katmanda temiz keser) */
.cine-poster__img { -webkit-clip-path: inset(0 round 14px); clip-path: inset(0 round 14px); }
.cine-story__media{ -webkit-clip-path: inset(0 round 16px); clip-path: inset(0 round 16px); }
.cine-cat-card    { -webkit-clip-path: inset(0 round 10px); clip-path: inset(0 round 10px); }
.cine-gal-cell    { -webkit-clip-path: inset(0 round 12px); clip-path: inset(0 round 12px); }
.cine-strip__item { -webkit-clip-path: inset(0 round 8px);  clip-path: inset(0 round 8px);  }
.cine-thumb       { -webkit-clip-path: inset(0 round 5px);  clip-path: inset(0 round 5px);  }

/* 2) <img>'lerin kendi clip'ini geri al (kap zaten kesiyor -> çift kenar yok) */
.cine-poster__img   img,
.cine-story__media  img,
.cine-cat-card__media img,
.cine-gal-cell      img,
.cine-strip__item   img,
.cine-thumb         img { -webkit-clip-path: none; clip-path: none; }

/* 3) clip-path box-shadow'u kırpar -> dış gölgeleri drop-shadow'a çevir.
      hover geçişleri için taban filter'ı şeffaf drop-shadow (yumuşak animasyon) */

/* story: sabit gölge (hover'da değişmiyor) */
.cine-story__media{
  box-shadow: none;
  filter: drop-shadow(0 26px 42px rgba(0,0,0,.34));
}

/* poster: gölge sadece hover'da */
.cine-poster__img{
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  transition: transform .6s var(--ease-cine), filter .6s var(--ease-cine), border-color .4s;
}
.cine-poster:hover .cine-poster__img{
  box-shadow: none;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.55));
}

/* kategori kartı: gölge hover'da */
.cine-cat-card{
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  transition: transform .7s var(--ease-cine), border-color .7s var(--ease-cine), filter .7s var(--ease-cine);
}
.cine-cat-card:hover{
  box-shadow: none;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
}

/* galeri hücresi: gölge hover'da */
.cine-gal-cell{
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  transition: transform .5s var(--ease-cine), border-color .5s var(--ease-cine), filter .5s var(--ease-cine);
}
.cine-gal-cell:hover{
  box-shadow: none;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.5));
}

/* açık tema: story gölgesi daha nazik */
html[data-site-theme="light"] body.site .cine-story__media{
  filter: drop-shadow(0 22px 40px rgba(28,38,54,.20));
}
html[data-site-theme="light"] body.site .cine-cat-card:hover{
  filter: drop-shadow(0 20px 40px rgba(28,38,54,.22));
}
html[data-site-theme="light"] body.site .cine-gal-cell:hover{
  filter: drop-shadow(0 16px 34px rgba(28,38,54,.22));
}

/* ==========================================================================
   v14.09b — .cine-island KÖŞE: "arkadan sert gölge çerçeve" biter
   --------------------------------------------------------------------------
   TEŞHİS: island'ın box-shadow yığınında `0 0 0 1px rgba(0,0,0,.35)` vardı —
   SIFIR bulanıklıklı sert halka. Kart GSAP reveal + z-index ile kendi
   katmanına düşünce bu halka köşede AA'sız/karemsi çiziliyor -> "gölge çerçeve".
   ÇÖZÜM (kanıtlı reçete): sert halkayı SİL (zaten 1px border var), büyük dış
   gölgeyi drop-shadow'a çevir (yuvarlak köşeye kusursuz uyar, kırpılmaz),
   inset üst parlamayı KORU (inset gölge clip'lenmez), ek güvenlik için
   clip-path ile köşeyi kesinле. Salt CSS.
   ========================================================================== */
.cine-island{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);   /* sert 1px halka kaldırıldı */
  filter: drop-shadow(0 40px 78px rgba(0,0,0,.5));
  -webkit-clip-path: inset(0 round 24px);
          clip-path: inset(0 round 24px);
}
html[data-site-theme="light"] body.site .cine-island{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  filter: drop-shadow(0 38px 66px rgba(28,38,54,.18));
}
@media (max-width: 900px){
  .cine-island{
    -webkit-clip-path: inset(0 round 18px);
            clip-path: inset(0 round 18px);
  }
}

/* ==========================================================================
   v14.09c — KUSURSUZ KENAR EŞİTLEME (borderless)
   --------------------------------------------------------------------------
   KALAN KAREMSİ KÖŞE = 1px border'ın border-box köşesindeki AA. Kusursuz
   frame'lerin (.cine-stage-frame, .cine-story__media) HİÇ border'ı yok —
   fark tam olarak bu. Büyük foto kaplarından border'ı kaldırıp onları
   borderless kusursuz reçeteyle BİREBİR aynı yapıyoruz. clip-path + drop-shadow
   zaten v14.09'da verildi. Thumbnail hariç (aktif seçim göstergesi + minik).
   ========================================================================== */
.cine-poster__img,
.cine-cat-card,
.cine-gal-cell,
.cine-strip__item{
  border: 0;
}
/* hover'daki border-color artık işlevsiz (border yok) — güvenli.
   açık temada foto kaplarının border'ını yumuşatan eski kural da moot. */

/* ============================================================
   v14.18.9 — HERO AFİŞ METNİ GEÇİŞİ DÜZELTMESİ
   Sorun: slayt geçerken eski yazı 0.7sn kaybolurken yeni yazı
   anında görünüyor; ikisi de "block" olduğu için normal akışta
   ALT ALTA yığılıyorlardı (PASSAT B8 + TUCSON üst üste).
   Çözüm: metinleri aynı grid hücresine koy -> dikey yığılma
   yerine AYNI yerde yumuşak crossfade. Layout aynı kalır çünkü
   hücre yüksekliği aktif metne göre oluşur; pasif metin display:none
   kalınca hücreyi işgal etmez.
   ============================================================ */
.cine-hero__content { display: grid; align-items: start; }
.cine-hero__content > .cine-slide-text { grid-area: 1 / 1; min-width: 0; }


/* ============================================================
   v14.30 — NAV BANDI KARARLILIGI + SAG ALT GECIS KONTROLU
   ------------------------------------------------------------
   Bu blok, ONCEKI kurallarin uzerine biner (dosya sonunda oldugu icin
   ayni ozgullukte son soz burasidir). Amaci mevcut gorunumu DEGISTIRMEK
   degil, gorunurdeki kucuk aksakliklari kapatmak.
   ============================================================ */

/* ---- 1) YATAY ZIPLAMA: kaydirma cubugu yeri hep ayrilsin --------------
   SORUN: mobil menu / kart modali acilinca body kaydirmasi kilitlenince
   dikey kaydirma cubugu KAYBOLUYOR ve sayfanin tamami ~15px saga kayiyor
   ("banner kayması"nin en gorunur sebebi buydu). scrollbar-gutter yeri
   HER ZAMAN ayirir -> cubuk gelse de gitse de sayfa yerinde durur.
   overflow-x: clip zaten yukarida; onu bozmaz. */
html { scrollbar-gutter: stable; }

/* ---- 2) CAPA KAYMASI: #katalog gibi baglantilar nav'in ALTINA girmesin -
   Nav position:fixed oldugu icin hedef bolum bandin arkasinda kaliyordu.
   scroll-padding-top kaydirmayi nav yuksekligi kadar erken durdurur. */
html { scroll-padding-top: 96px; }
@media (max-width: 720px){ html { scroll-padding-top: 74px; } }

/* ---- 3) BANT GECISI: katman bir kez kurulsun, her seferinde degil -----
   SORUN: .is-scrolled ilk kez binerken backdrop-filter SIFIRDAN yaratiliyor;
   tarayici o an yeni bir kompozit katman acip metni yeniden rasterize
   ediyor -> yazilarda 1px'lik titreme/kayma. Cozum: filtre bas
   bastan TANIMLI olsun (blur(0)) ve sadece DEGERI animasyona girsin.
   will-change kaldirildi: kalici katman promosyonu mobilde backdrop-filter
   ile birlesince surekli GPU maliyeti demek; translateZ(0) yeterli. */
body.site .site-nav {
  -webkit-backdrop-filter: blur(0px) saturate(1);
          backdrop-filter: blur(0px) saturate(1);
  background: color-mix(in srgb, var(--ink-0) 0%, transparent);
  transform: translateZ(0);
  will-change: auto;
  transition: transform .48s var(--ease-cine),
              background .45s var(--ease-cine),
              -webkit-backdrop-filter .45s var(--ease-cine),
              backdrop-filter .45s var(--ease-cine),
              padding .45s var(--ease-cine);
}

/* ---- 4) GIZLENME: SADECE transform ------------------------------------
   SORUN: .is-hidden hem transform hem opacity kullaniyordu. cine.js girisi
   nav'a INLINE opacity birakiyor; inline deger CSS'i her zaman yener ->
   opacity satiri ya hic calismiyor ya da GSAP onu temizledigi an bant
   beklenmedik sekilde solup kaliyordu. Tek surucu: transform. */
body.site .site-nav.is-hidden,
html.lenis-ready body.site .site-nav.is-hidden {
  transform: translateY(-100%) translateZ(0);
  opacity: 1;
  pointer-events: none;
}
body.site .site-nav.menu-open.is-hidden,
html.lenis-ready body.site .site-nav.menu-open.is-hidden {
  transform: translateZ(0); pointer-events: auto;
}

/* ---- 5) MOBIL MENU ACIKKEN ARKA SAYFA KAYMASIN ----------------------- */
body.site.nav-locked { overflow: hidden; }

/* ---- 6) SAG ALT KONTROL KUMESI (Rockstar) ----------------------------
   (a) Parlak bir banner uzerinde beyaz noktalar kayboluyordu -> kumenin
       arkasina yumusak, kenari olmayan bir karartma serilir.
   (b) Dokunma hedefi 22px'ti (Apple/Google onerisi 44px) -> gorunum
       degismeden ::after ile hit alani buyutuldu.
   (c) Hero'nun alt yazi bloguyla kisa ekranlarda ust uste biniyordu. */
.cine-slide-nav {
  padding: 10px 14px; border-radius: 999px;
  isolation: isolate;
}
.cine-slide-nav::before {
  content: ""; position: absolute; inset: -6px -10px; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 160% at 50% 50%, rgba(6,7,9,.46), rgba(6,7,9,0) 72%);
  opacity: 0; transition: opacity .45s var(--ease-cine);
}
/* scrim yalniz gerektiginde: hero acik bir gorseldeyse cine.js
   .needs-scrim ekler; ayrica uzerine gelince de belirir (geri bildirim) */
.cine-slide-nav.needs-scrim::before,
.cine-slide-nav:hover::before,
.cine-slide-nav:focus-within::before { opacity: 1; }

.cine-slide-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}

/* (d) Duraklatilmisken cubuk "olu" gorunmesin: hafif nabiz yerine
       sabit ama soluk bir dolgu -> durum belli olur, dikkat calmaz. */
.cine-slide-nav.is-paused .cine-slide-dot.is-active .cine-slide-dot__track {
  background: rgba(255,255,255,.28);
}

/* (e) Hero ekrandan cikinca kume de sessizce cekilsin (Rockstar: kontrol
       yalniz izlerken var). cine.js .is-idle ekler. */
.cine-slide-nav.is-idle {
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .5s var(--ease-cine), transform .5s var(--ease-cine);
}
.cine-slide-nav {
  transition: opacity .5s var(--ease-cine), transform .5s var(--ease-cine);
}

/* ---- 7) HAREKETI AZALT tercihi ---------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body.site .site-nav { transition: background .2s linear; }
  body.site .site-nav.is-hidden { transform: none; }
  .cine-slide-nav, .cine-slide-nav.is-idle { transition: none; opacity: 1; transform: none; }
}


/* ============================================================
   v14.31 — SAG ALT GOSTERGE: ROCKSTAR REFERANSI
   ------------------------------------------------------------
   Referans (rockstargames.com): duraklat dugmesi + AKTIF slayt icin GENIS
   dolan cubuk + pasif slaytlar icin KUCUK noktalar. Ok butonlari referansta
   YOK -> dinlenmede gizli, kumeye gelince/klavye odaginda belirir (v14.29b'de
   istenen oklar kaybolmadi, sadece sakin duruyor).

   ONCEKI HALDE NE YANLISTI: her nokta kutusu SABIT 40px'ti. Yani pasif
   noktalar birbirinden 40px uzakta duruyordu ve aktif "cubuk" da ayni 36px'e
   sikisiyordu -> referanstaki "kucuk noktalar yan yana, aktif olan genis
   cubuk" oransal farki hic olusmuyordu. Artik kutu GENISLIGI animasyonlu:
   pasif 14px, aktif 62px.
   ============================================================ */

.cine-slide-nav { gap: 10px; }

/* --- oklar: dinlenmede gizli, kumeye gelince yumusakca gelir --- */
.cine-slide-nav .cine-slide-ctrl#slidePrev,
.cine-slide-nav .cine-slide-ctrl#slideNext {
  width: 0; margin: 0; padding: 0; opacity: 0; transform: scale(.8);
  border-width: 0; pointer-events: none; overflow: hidden;
  transition: width .42s var(--ease-cine), opacity .32s var(--ease-cine),
              transform .42s var(--ease-cine), margin .42s var(--ease-cine);
}
.cine-slide-nav:hover .cine-slide-ctrl#slidePrev,
.cine-slide-nav:hover .cine-slide-ctrl#slideNext,
.cine-slide-nav:focus-within .cine-slide-ctrl#slidePrev,
.cine-slide-nav:focus-within .cine-slide-ctrl#slideNext {
  width: 34px; opacity: 1; transform: scale(1);
  border-width: 1px; pointer-events: auto;
}

/* --- nokta <-> cubuk: kutu genisligi animasyonlu --- */
.cine-slide-dots { gap: 9px; }
.cine-slide-dot {
  width: 14px; height: 22px; flex: 0 0 auto;
  transition: width .55s var(--ease-cine);
}
.cine-slide-dot.is-active { width: 62px; }

.cine-slide-dot__dot {
  width: 6px; height: 6px;
  background: rgba(255,255,255,.45);
}
.cine-slide-dot:hover .cine-slide-dot__dot { background: rgba(255,255,255,.85); }

/* cubuk: referanstaki gibi tam yuvarlak, biraz daha kalin */
.cine-slide-dot__track {
  left: 0; right: 0; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.26);
}
.cine-slide-dot__fill {
  border-radius: 999px;
  background: #fff;
  box-shadow: none;                     /* referansta parlama yok, duz beyaz */
}
/* aktif: nokta soner, cubuk belirir -- ikisi de kutu genisligiyle es zamanli */
.cine-slide-dot.is-active .cine-slide-dot__dot { opacity: 0; transform: scale(.3); }
.cine-slide-dot.is-active .cine-slide-dot__track { opacity: 1; }

@media (max-width: 640px){
  .cine-slide-dot { width: 12px; }
  .cine-slide-dot.is-active { width: 46px; }
  .cine-slide-dots { gap: 7px; }
}

/* --- SURUKLEME SIRASINDA BASLIKLAR KARISMASIN -----------------------------
   Surukleme onizlemesinde IKI metin ayni anda is-active olur (gerekli --
   hedef metin kenardan girer). Ikisi de ayni grid hucresinde (v14.18.9) ama
   yatay tasma kirpilmadigi icin giren metin cikanin uzerine binip okunamaz
   hale gelebiliyordu. Hucreyi kirpiyoruz: sadece sahnedeki metin gorunur. */
.cine-hero__content { overflow: hidden; }
/* will-change SADECE sahnedeki metinde: her slaytta kalici katman acmak
   (10 slaytli bir hero'da 10 kompozit katman) mobilde bellek yakar. */
.cine-hero__content > .cine-slide-text.is-active { will-change: transform; }
/* baslik satir maskeleri: satirlar birbirine girmesin */
.cine-title .cine-line-mask { display: block; overflow: hidden; }
.cine-title .cine-line { display: block; }
.cine-slide-text.is-active .cine-title .cine-line { will-change: transform; }

/* surukleme sirasinda metin secimi/imleci kapali -> mavi secim lekesi olmasin */
.cine-hero--slides.is-dragging,
.cine-hero--slides.is-dragging * {
  user-select: none; -webkit-user-select: none;
}

@media (prefers-reduced-motion: reduce){
  .cine-slide-dot, .cine-slide-nav .cine-slide-ctrl { transition: none; }
}


/* ============================================================
   v14.32 — HERO GECISI: SERT KESME YERINE SINEMATIK ERIME
   ------------------------------------------------------------
   Ekran goruntusundeki iki sorun:
     1) Iki afis yan yana kayarken aralarinda BICAK GIBI dikey bir cizgi
        vardi. Rockstar'da bu ek yumusakca erir.
     2) Yazi (PASSAT B8) YANLIS AFISIN uzerinde duruyordu. Sebep cine.js'te:
        .cine-hero__content max-width 1080px, afis ise tam ekran (~1900px).
        Ikisine de xPercent:100 verilince yazi ~820px geride kaliyordu.
        Duzeltme JS tarafinda (piksel bazli hareket); burada ilgili
        gorsel destek var.
   ============================================================ */

/* Kenar maskesi JS'ten (setEdgeFeather) inline biner ve gecis bitince
   kalkar. Maske uygulanan katmanin kendi kompozitini duzgun kurmasi icin: */
.cine-hero--slides .cine-slide { -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* v14.33: KENAR GOLGESI KALDIRILDI. Otomatik gecis artik cozulme oldugu icin
   ortada birbirine "degen" iki afis yok; golge sadece yapay bir kenar
   uretiyordu. Elle SURUKLEMEDE hala yan yana kayarlar -- orada isteyerek,
   parmagi takip eden fiziksel bir hareket var ve kenar dogaldir; oraya da
   sadece cok hafif bir govde golgesi biniyor. */
.cine-hero--slides.is-dragging .cine-slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 9%,
                                     rgba(0,0,0,0) 91%, rgba(0,0,0,.34) 100%);
}

/* v14.33: cozulmede giren/cikan afis hafifce olceklenir -> tasma kirpilsin
   (hero disina sizmasin) ve olcek merkezden buyusun. */
.cine-hero--slides { overflow: hidden; }
.cine-hero--slides .cine-slide { transform-origin: 50% 50%; backface-visibility: hidden; }

/* Yazi bloklari: gecis sirasinda birbirine binmesin diye ust uste ayni
   hucrede dururlar (v14.18.9) -- burada yalnizca capraz-solma icin
   kompozit ipucu veriyoruz, kalici katman acmadan. */
.cine-slide-text { backface-visibility: hidden; }


/* ============================================================
   v14.34 — BASLIK KIRPILMASI + ALTTAN GELIS
   ------------------------------------------------------------
   SORUN (ekran goruntusu): baslik "TUCSON" yerine "TUCSC" olarak kesiliyordu.
   SEBEP: v14.31'de .cine-hero__content'e overflow:hidden koymustum -- amac
   suruklemede yan yana duran iki yazinin birbirine tasmasini kirpmakti. Ama
   otomatik gecişte de yazi yatay kayiyordu ve kabin sag sinirina carpip
   harfleri kesiyordu.
   COZUM: otomatik gecişte yazi ARTIK YATAY HIC KAYMIYOR (cine.js v14.34 --
   sadece alttan yukselir), dolayisiyla kirpmaya gerek yok. Kirpma yalnizca
   ELLE SURUKLEME sirasinda -- gercekten yan yana iki yazi oldugu an -- acilir.
   ============================================================ */
.cine-hero__content { overflow: visible; }
.cine-hero--slides.is-dragging .cine-hero__content { overflow: hidden; }

/* Alttan yukselen yazi bloguna yer birak: yukselirken alt kenardan
   kirpilmasin diye kabin dip payini biraz genislet (gorunumu degistirmez,
   sadece tasma alani). */
.cine-hero--slides .cine-hero__content { padding-bottom: calc(clamp(60px, 11vh, 130px) + 8px); }


/* ============================================================
   v14.35 — HERO GEÇİŞİ: SAĞDAN SOLA KAYMA + ALTTAN YÜKSELEN YAZI
   ------------------------------------------------------------
   Referans: rockstargames.com üst banner'ı. Ekran görüntüsü ölçüldüğünde
   iki şey netleşiyor:
     (1) İki afiş AYNI ANDA, YAN YANA duruyor ve aralarında NET dikey bir
         sınır var. v14.32/33'te bu sınırı "hata" sanıp çözülmeye (dissolve)
         geçmiştim; yanlış teşhisti — sınır referansta da var, kasıtlı.
     (2) Sınır ekranın ~%61'indeyken ÇIKAN afişin yazısı yalnızca birkaç yüz
         piksel kaymış. Yani çıkan afiş girenden DAHA YAVAŞ kayıyor. Derinlik
         hissi bu hız farkından (paralaks) geliyor; eşit hızda kaydırılınca
         görüntü düz ve ucuz duruyor. Oran cine.js'te OUT_PARALLAX = 0.42.

   >>> KENARIN KİRLİ GÖRÜNMESİNİN GERÇEK SEBEBİ (v14.33'te bulunamamıştı):
   .cine-slide__bg, inset:-6% ile kendi afişinin DIŞINA taşıyor; afiş kutusu
   ise kırpmıyordu. Yan yana kayarken her fotoğraf komşusunun üstüne ~%6
   sarkıyor, sınırda ikili/bulaşık bir şerit oluşuyordu. Aşağıdaki tek satır
   (overflow:hidden) bunu kökten bitirir — maskeye/yumuşatmaya gerek yok.
   ============================================================ */

.cine-hero--slides .cine-slide {
  overflow: hidden;
  will-change: transform, opacity;
  --dim: 0;   /* GSAP tween'in başlangıç değerini okuyabilmesi için hep tanımlı */
}

/* ÇIKAN AFİŞİN KARARMASI — cine.js geçiş boyunca --dim'i 0 -> 0.34 tweenler.
   Ayrı bir <div> eklemek yerine pseudo-element: yeni DOM yok, bellek yok.
   z-index:3 -> hem fotoğrafın hem de banner rengi tintinin (z-index:2)
   üstünde kalır, yani afiş TOPLU olarak geri plana çekilmiş görünür.
   >>> Kararmayı istemezsen cine.js'te OUT_DIM = 0 yap. */
.cine-hero--slides .cine-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: rgba(6, 7, 9, var(--dim, 0));
}

/* v14.37 — KENAR KOYULAŞMASI KALDIRILDI (istek: "kararmayı da kaldır").
   Referans ölçüldüğünde dikişin iki yanında koyulaşma yok; iki afiş de eşit
   aydınlıkta, sınır tertemiz bir kesim. Kararma katmanının kendisi (::before /
   --dim) yerinde duruyor ama cine.js'te OUT_DIM = 0 olduğu için tamamen
   şeffaf — ileride derinlik istersen tek sayı değiştirmen yeterli. */

/* Yazı kabı: v14.37'de yazı artık ekran genişliğinin ~yarısı kadar yatay yol
   alıyor (afişten yavaş kayan Rockstar paralaksı). overflow AÇIK kalmalı ki
   yazı kabın 1080px'lik sınırında kesilmesin -- v14.34'teki "TUCSON -> TUCSC"
   kırpılmasının sebebi kabın overflow:hidden olmasıydı, hareketin kendisi
   değil. Yazı ekranın kenarında zaten .cine-hero'nun overflow:hidden'ı ile
   kırpılıyor; referansta da tam olarak öyle (çıkan başlık sol kenarda kesik). */
.cine-hero--slides .cine-hero__content { overflow: visible; }
.cine-hero--slides .cine-title .cine-line-mask { padding-bottom: .1em; }

/* Hareketi azalt: kayma yok, sade solma (cine.js REDUCED dalı ile eşleşir).
   v14.37: kenar gölgesi/koyulaşma zaten kaldırıldığı için burada bastırılacak
   bir şey kalmadı; kural sadeleşti. */
@media (prefers-reduced-motion: reduce) {
  .cine-hero--slides .cine-slide { box-shadow: none; }
}

/* ------------------------------------------------------------
   NOT (uygulanmadı, bilerek): .cine-hero__scrim, sahnenin son çocuğu ama
   z-index'i "auto". cine.js afişlere z-index 1/2/3 verdiği için scrim
   AFİŞLERİN ALTINDA kalıyor -> yazı okunabilirliği için yazılmış o gradyan
   pratikte hiç görünmüyor (ilk boyamada bir an görünüp goTo("init") ile
   kayboluyor; açılışta hafif bir parlaklık sıçraması bundan). Düzeltmek
   istersen tek satır yeter — ama hero belirgin şekilde KOYULAŞIR, o yüzden
   kararı sana bırakıyorum:
   .cine-hero--slides .cine-hero__scrim { z-index: 4; }
   ------------------------------------------------------------ */


/* ============================================================
   v14.36 — "AFİŞİN KENARINDA AÇIK RENK ŞERİT" HATASININ KÖKÜ
   ------------------------------------------------------------
   Ekran görüntüsü piksel piksel ölçüldü (1780px geniş pencere):
     - Şerit x=722 ile x=836 arasında: genişliği 114px = %6.4.
     - Şeridin İÇİ, DIŞINDAN tam 1/0.66 kat daha parlak.
   Bu iki sayı tek bir şeyi söylüyor:
     %6.4  = .cine-slide__bg üzerindeki inset:-6% taşması
     0.66  = 1 - OUT_DIM(0.34), yani çıkan afişin kararma katmanı
   Kararma katmanı (::before, inset:0) afiş KUTUSUNDA bitiyor; fotoğraf ise
   kutunun %6 dışına taşmaya devam ediyor. Sonuç: kutunun bittiği yerde
   kararmamış, açık renk bir fotoğraf şeridi. Yani v14.35'te koyduğum
   overflow:hidden ÇALIŞMIYOR.

   NEDEN ÇALIŞMIYOR: .cine-hero perspective:1600px + .cine-hero__scene
   transform-style:preserve-3d veriyor. Afişler böylece ortak bir 3B
   sahnede yaşıyor ve GSAP onlara translate3d/matrix3d yazıyor. Bu durumda
   tarayıcı (Chrome/WebKit) ara katmanlardaki overflow:hidden'ı 3B dönüşümlü
   torunlar için YOK SAYAR — bilinen ve uzun süredir açık bir davranış.
   Slayt modunda 3B'ye zaten ihtiyaç yok (translateZ kullanan .cine-hero__fg
   bu düzende hiç render edilmiyor), o yüzden burada düzleştiriyoruz.

   ÜÇ KATLI SAVUNMA (biri tutmazsa diğeri tutar):
     1) 3B bağlamı düzleştir -> overflow:hidden normal çalışsın
     2) clip-path: inset(0) -> 3B'den tamamen bağımsız, koşulsuz kırpar
     3) bg'nin taşmasını en baştan kaldır (inset:-6% -> 0); kalan tek taşma
        Ken Burns ölçeği olur, o da kırpılır. Kırpma tümden başarısız olsa
        bile artık ortada %6'lık hazır bir taşma yok.
   ============================================================ */

/* (1) 3B bağlamını düzleştir — sadece slayt modunda */
.cine-hero--slides { perspective: none; }
.cine-hero--slides .cine-hero__scene { transform-style: flat; }
.cine-hero--slides .cine-slide { transform-style: flat; }

/* (2) Koşulsuz kırpma. clip-path elemanın KENDİ dış gölgesini de kırpar —
   bu yüzden v14.35'teki box-shadow'lu kenar yukarıda içeri alındı. */
.cine-hero--slides .cine-slide { clip-path: inset(0); }

/* (3) Fotoğrafın hazır taşmasını kaldır. Ken Burns ölçeği (1.06 -> 1.14)
   zaten 1'in üstünde olduğu için kapsama garanti; -6% pay gereksizdi.
   >>> Ken Burns kapalıyken ölçek tam 1.0 -> sıfır taşma. */
.cine-hero--slides .cine-slide__bg { inset: 0; }


/* ============================================================
   v14.38 — "ORTADA KARARTI" İÇİN KALAN İKİ KAYNAK KAPATILDI
   ------------------------------------------------------------
   Yorumlar ayıklanıp gerçekten uygulanan kurallar tarandığında slayt
   modunda afişlerin ÜSTÜNDE duran tek sabit yatay karartma bu çıktı:

     .cine-hero--slides .cine-hero__scrim
        linear-gradient(90deg, rgba(6,8,11,.78) 0% ... transparent 64%)

   Bu, ekranın SOL %64'ünü kaplayan ve afişlerle BİRLİKTE KAYMAYAN sabit
   bir koyu yıkama. Afişler onun altından geçtiği için hareket "kayma" gibi
   değil, "bir karanlığın içinden geçiyor" gibi görünüyor; gradyanın bittiği
   %64 çizgisi de tam ekranın ortasına denk geliyor. Yazı okunabilirliği için
   konmuş, ama yeri yanlış: okunabilirlik afişin ÜSTÜNDE değil, afişin
   KENDİSİNDE olmalı ki onunla birlikte kaysın (Rockstar'da da öyle).

   Çözüm: yatay bileşen kaldırıldı, yerine her afişin kendi içinde ALTTAN
   yükselen dikey bir yıkama kondu. Dikey yıkama iki afişte de aynı olduğu
   için dikişte kesinti oluşturmaz — ne çizgi ne leke.
   ============================================================ */

/* Sabit yıkamanın yalnızca DİKEY (alta karışma) bileşeni kalsın.
   Yatay bileşen tamamen gitti. */
.cine-hero--slides .cine-hero__scrim {
  background: linear-gradient(180deg, transparent 0%, transparent 58%,
              color-mix(in srgb, var(--fade) 42%, transparent) 100%);
}

/* Okunabilirlik yıkaması artık afişin İÇİNDE -> afişle birlikte kayar.
   (Bu ::before v14.35'te kararma katmanıydı; OUT_DIM = 0 olduğu için boştu,
   şimdi işe yarar bir göreve geçti.) */
.cine-hero--slides .cine-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent 34%,
                              rgba(6,8,11,.24) 68%, rgba(6,8,11,.58) 100%);
}

/* clip-path GERİ ALINDI. v14.36'da üç katlı kırpma koymuştum; 3B bağlamı
   düzleştirmek + bg taşmasını sıfırlamak zaten yetiyor. clip-path ise hareket
   halindeki elemanın kenarında kenar yumuşatmadan (AA) kaynaklı 1px'lik yarı
   saydam bir sütun bırakabiliyor — arkadaki koyu sahne oradan sızınca ortada
   ince koyu bir çizgi olarak görünür. Gereksiz riski kaldırdık; dikiş payı
   (cine.js SEAM_BLEED) zaten aynı işi garantiye alıyor. */
.cine-hero--slides .cine-slide { clip-path: none; }


/* ============================================================
   v14.39 — AFİŞLERE MASKE UYGULANMASI KESİN OLARAK YASAKLANDI
   ------------------------------------------------------------
   Geçiş karesi ölçüldü: dikişin sağında, giren afişin ön kenarından
   başlayıp düzgün açılan ~172px'lik koyu bant = pencerenin %9.4'ü.
   setEdgeFeather tam %9'luk bir maske uyguluyordu; yani giren afişin ön
   kenarı %9 boyunca YARI SAYDAMDI ve arkasındaki koyu sahne oradan
   sızıyordu. "Ortada karartı" buydu.

   JS tarafında kaldırıldı; burada ayrıca CSS ile kilitliyoruz ki eski bir
   sürümden kalan satır ya da tarayıcı önbelleği aynı şeyi geri getiremesin.
   ============================================================ */
.cine-hero--slides .cine-slide {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}


/* ============================================================
   v14.41 — YAZI KIRPILMASINA KARŞI İKİNCİ KİLİT
   ------------------------------------------------------------
   Başlık "FALCON" yerine "FALCO" olarak, O harfinin ortasından dimdik
   kesilmiş çıkıyordu. Sebep: v14.37'de yazıya verdiğim yatay yol, yazı
   bloğunu .cine-hero__content kabının sağ kenarına (max-width: 1080px)
   dayıyordu. Asıl çözüm cine.js'te: yatay yol 0'a çekildi, yani yazı artık
   kabın dışına hiç çıkmıyor.

   Burası ikinci kilit: yazı bloğu herhangi bir sebeple (sürükleme, ileride
   eklenecek bir efekt) kaysa bile başlık ASLA yatayda kesilmesin.
   ============================================================ */

/* Satır maskesi yalnızca DİKEY kırpsın. overflow:hidden iki yönde birden
   kırpıyordu; maskenin işi ise sadece satırın alttan yükselirken üstten
   taşan kısmını gizlemek. clip-path ile bunu sadece dikeye indiriyoruz:
   yanlarda 100vw pay bırakıyoruz, üst/altta kırpma aynen sürüyor. */
.cine-hero--slides .cine-title .cine-line-mask {
  overflow: visible;
  clip-path: inset(0 -100vw);
}

/* Yazı kabı asla yatayda kırpmasın (sürükleme dahil) — dikey kırpmaya da
   gerek yok, blok zaten kendi maskesiyle çalışıyor. */
.cine-hero--slides .cine-hero__content,
.cine-hero--slides.is-dragging .cine-hero__content { overflow: visible; }


/* ============================================================
   v14.43 — YAZI AFİŞİYLE BİRLİKTE YOL ALIRKEN KIRPILMASIN
   ------------------------------------------------------------
   Yazı artık kendi afişinin piksel yolunu alıyor (bkz. cine.js v14.43), yani
   blok geçiş sırasında ekran genişliği kadar yol yapıyor. Daha önce tam bu
   yüzden başlık "FALCON" yerine "FALCO" olarak kesilmişti: yazı kabı
   (.cine-hero__content, max-width 1080px) kendi sağ kenarında kırpıyordu.
   Aşağıdaki kurallar bunu KESİN olarak kapatır — hangi durum sınıfı
   (is-dragging vb.) aktif olursa olsun kap yatayda kırpamaz.

   Yazının komşu afişin üstüne taşma riski YOK: blok, afişin sol kenarından
   ~90px içeride durduğu ve afişle birebir aynı yolu aldığı için her an kendi
   afişinin sınırları içinde kalır. Ekran kenarındaki kırpmayı ise
   .cine-hero'nun kendi overflow:hidden'ı yapar — referansta da öyle
   (çıkan başlık sol kenarda kesik görünür).
   ============================================================ */
.cine-hero--slides .cine-hero__content,
.cine-hero--slides.is-dragging .cine-hero__content {
  overflow: visible !important;
}
.cine-hero--slides .cine-slide-text { overflow: visible !important; }

/* Satır maskesi yalnızca DİKEY kırpsın (alttan yükselme maskesi). Yanlarda
   geniş pay bırakıyoruz ki blok yatay yol alırken harfler kesilmesin. */
.cine-hero--slides .cine-title .cine-line-mask {
  overflow: visible;
  clip-path: inset(0 -100vw);
}