/* =========================================================
   MERİDYEN — Özel Konut
   Kaydırmayla sürülen tek film + bölümlü tanıtım sitesi
   ========================================================= */

/* ---------- 0. Temel ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;              /* smooth AÇILMAZ — scrub hissini bozar */
  background:#0A0908;
}
body{
  margin:0;
  background:#0A0908;
  color:#EFE9DF;
  font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:300;
  font-size:clamp(15.5px,1.02vw,17.5px);
  line-height:1.68;
  letter-spacing:.006em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.kilit{overflow:hidden;height:100vh}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:rgb(var(--vurgu,201 160 99)/.30);color:inherit}

/* ---------- 1. Değişkenler (JS her karede günceller) ---------- */
:root{
  --durak:0;            /* söz duraklaması 0..1  */
  --gece:0;             /* karanlık tema 0..1    */
  --siyah:0;            /* tam karanlık 0..1     */
  --vurgu:201 160 99;   /* filmden ölçülen vurgu */
  --golgeRGB:244 240 234; /* yazı halesi — temanın zıddı */

  --kagit:#F4F0EA;
  --murekkep:#17140F;
  --yumusak:#6E665B;
  --cizgi:rgba(23,20,15,.13);

  --alan:clamp(74px,11vh,150px);
  --oluk:clamp(20px,4.4vw,64px);
  --yay:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Tipografi ölçekleri ---------- */
.etiket{
  display:block;
  font-family:"Jost",sans-serif;
  font-weight:300;
  font-size:.66rem;
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--yumusak);
  margin:0 0 clamp(18px,2.4vw,32px);
}
.baslik{
  font-family:"Bodoni Moda",Georgia,serif;
  font-weight:400;
  font-optical-sizing:auto;
  font-size:clamp(2rem,4.3vw,3.9rem);
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
.baslik.dev{font-size:clamp(2.4rem,6.2vw,5.6rem)}
.giris-metin{
  max-width:56ch;
  color:var(--yumusak);
  font-size:1.02rem;
  line-height:1.8;
  margin:clamp(22px,2.6vw,34px) 0 0;
}
.giris-metin em{font-style:normal;color:var(--murekkep)}

/* =========================================================
   3. YÜKLEME PERDESİ
   ========================================================= */
.perde{
  position:fixed;inset:0;z-index:900;
  background:#080706;
  display:grid;place-items:center;
  transition:opacity 1.15s var(--yay),visibility 1.15s;
}
.perde.bitti{opacity:0;visibility:hidden;pointer-events:none}
.perde-ic{text-align:center}
.marka{
  display:block;
  font-family:"Jost",sans-serif;font-weight:200;
  font-size:clamp(.82rem,1.5vw,1.05rem);
  letter-spacing:.62em;text-indent:.62em;
  color:#EFE9DF;
}
.perde-alt{
  display:block;margin-top:14px;
  font-size:.58rem;letter-spacing:.46em;text-indent:.46em;
  color:rgba(239,233,223,.36);text-transform:uppercase;
}
.perde-cizgi{
  width:clamp(120px,18vw,220px);height:1px;margin:38px auto 0;
  background:rgba(239,233,223,.14);overflow:hidden;
}
.perde-cizgi i{
  display:block;height:100%;width:0%;
  background:rgb(var(--vurgu));
  transition:width .45s linear;
}

/* =========================================================
   4. FİLM  —  ekranda SADECE video + yazı
   ========================================================= */
.film-alan{position:relative;width:100%}
.sahne{
  position:sticky;top:0;
  height:100svh;min-height:100svh;
  overflow:hidden;
  background:#000;
  isolation:isolate;
}
.cerceve{position:absolute;inset:0;overflow:hidden}
.film-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* VİDEO ÖN PLANDA: ölçek yok, bulanıklık yok, üzerine perde yok.
     Tek dokunuş, tam karanlık anındaki sönme. */
  filter:brightness(calc(1 - var(--siyah)*.35));
  will-change:filter;
  backface-visibility:hidden;
}

/* Perde ve grain katmanları kaldırıldı — video hiçbir zaman örtülmez. */
.orgu,.vinyet{display:none}

/* ---- Sözler ----
   Yazı ASLA sabit ortada durmaz. Her söz, o plandaki odak noktasının
   TERSİNE çapalanır. Çapa göz kararı değil ölçümle seçildi: film 24x24
   parlaklık ızgarasına indirgenip her aday bölge için ortalama ton,
   doku (std sapma) ve kare-içi oynama hesaplandı; en sakin bölge kazandı.
   data-yer  = çapa,  data-yan = hangi kenara yaslandığı (hizalama + giriş yönü)
   data-mur  = mürekkep (acik/koyu),  data-hale = hale gücü               */
.soz-kat{position:absolute;inset:0;z-index:5;pointer-events:none}
.soz{
  --kenar:clamp(22px,6.2vw,110px);
  --tx:0px; --ty:0px;      /* çapanın kendi kaydırması */
  --dx:0px; --dy:0px;      /* JS'in yazdığı giriş + sürüklenme */
  --g:0;                   /* açılma ilerlemesi 0..1 */
  --haleGuc:1;
  position:absolute;
  margin:0;padding:1.9rem 0 0;
  /* Genişlik ch ile verilemez: ch gövde yazı tipinden okunuyor, satırların
     kendi Bodoni boyundan değil — 30ch 270px'e düşüp satırları kırıyordu. */
  width:min(46vw,640px);
  opacity:0;
  transform:translate(calc(var(--tx) + var(--dx)),calc(var(--ty) + var(--dy)));
  will-change:opacity,transform;
  /* Perde yerine: yazının KENDİ halesi. Videoyu örtmez, yalnız harfleri ayırır. */
  text-shadow:
     0 0 18px rgb(var(--golgeRGB) / calc(.55 * var(--haleGuc))),
     0 0 44px rgb(var(--golgeRGB) / calc(.62 * var(--haleGuc))),
     0 0 96px rgb(var(--golgeRGB) / calc(.55 * var(--haleGuc))),
     0 0 190px rgb(var(--golgeRGB) / calc(.42 * var(--haleGuc)));
}

/* mürekkep — ölçülen bölge tonuna göre önceden seçildi, kare kare değişmez */
.soz[data-mur="koyu"]{color:#17140F;--golgeRGB:244 240 234}
.soz[data-mur="acik"]{color:#EFE9DF;--golgeRGB:10 9 8}

/* çapalar */
.soz[data-yer="sol-ust"] {left:var(--kenar);top:13vh}
.soz[data-yer="sag-ust"] {right:var(--kenar);top:13vh}
.soz[data-yer="sol-orta"]{left:var(--kenar);top:50%;--ty:-50%}
.soz[data-yer="sag-orta"]{right:var(--kenar);top:50%;--ty:-50%}
.soz[data-yer="sol-alt"] {left:var(--kenar);bottom:15vh}
.soz[data-yer="sag-alt"] {right:var(--kenar);bottom:15vh}
.soz[data-yer="orta-ust"]{left:50%;top:12vh;--tx:-50%}
.soz[data-yer="orta-alt"]{left:50%;bottom:14vh;--tx:-50%}
.soz[data-yer="orta"]    {left:50%;top:50%;--tx:-50%;--ty:-50%}

.soz[data-yan="sol"] {text-align:left}
.soz[data-yan="sag"] {text-align:right}
.soz[data-yan="orta"]{text-align:center;width:min(82vw,900px)}

/* kendini çizen tüy çizgi — matbu bir imza, videoyu örtmez */
.soz::before{
  content:"";position:absolute;top:.55rem;height:1px;
  background:currentColor;opacity:.5;
  width:calc(var(--g) * 4.4rem);
  box-shadow:0 0 10px rgb(var(--golgeRGB) / calc(.7 * var(--haleGuc)));
}
.soz[data-yan="sol"]::before {left:0}
.soz[data-yan="sag"]::before {right:0}
.soz[data-yan="orta"]::before{left:50%;margin-left:calc(var(--g) * -2.2rem)}

.soz .ust{
  display:block;
  font-family:"Jost",sans-serif;font-weight:400;
  font-size:clamp(.82rem,1.18vw,1.06rem);
  /* Harf aralığı AÇILIRKEN oturuyor: geniş başlar, yerine çekilir.
     Lüks markalarda ölçülen dinlenme bandı .18–.24em; .30em fazlaydı
     (10px puntoda harfler arası 3px = kelime değil, harf dizisi). */
  --izle:calc(.235em + (1 - var(--g)) * .19em);
  letter-spacing:var(--izle);text-indent:var(--izle);
  text-transform:uppercase;
  margin:0 0 clamp(16px,2vw,26px);
  /* filmden ölçülen vurgu, mürekkebe doğru çekilir → her sahnede okunur.
     Küçük punto geniş halede eriyor; bu yüzden kendi DAR halesi var. */
  color:rgb(var(--vurgu));
  color:color-mix(in srgb, currentColor 88%, rgb(var(--vurgu)));
  text-shadow:
     0 0  3px rgb(var(--golgeRGB) / .95),
     0 0  8px rgb(var(--golgeRGB) / .90),
     0 0 20px rgb(var(--golgeRGB) / .84),
     0 0 46px rgb(var(--golgeRGB) / calc(.60 * var(--haleGuc)));
}
.soz .satir{
  font-family:"Bodoni Moda",Georgia,serif;
  font-weight:400;font-optical-sizing:auto;
  font-size:clamp(1.6rem,3.2vw,3.05rem);
  /* Lüks display serif bandı: satır aralığı 1.0–1.10, tracking negatif.
     1.2 + (-.014em) "web metni" gibi duruyordu; 1.08 + (-.024em) matbu
     bir ilan başlığı gibi duruyor. Türkçe'de ş/ç sedillası ve İ noktası
     için 1.0'ın altına inilmiyor. */
  line-height:1.08;
  letter-spacing:-.024em;
  margin:0;
}
.soz .satir em{font-style:italic;color:rgb(var(--vurgu))}
.soz-buyuk{width:min(50vw,700px)}
.soz-buyuk .satir{font-size:clamp(2rem,4.4vw,4.1rem);line-height:1.02;letter-spacing:-.032em}
.soz-kucuk .satir{font-size:clamp(1.45rem,2.7vw,2.5rem)}

/* kelime kelime açılma
   DİKKAT — burada `overflow:hidden` KULLANILAMAZ. Kullanıldığında yazının
   190px'lik halesi kelime kutusunun içinde hapsolup kutuyu baştan sona
   dolduruyor ve kenarında sert bir çizgiyle bitiyordu: ekranda her kelimenin
   arkasında görünür bir dikdörtgen "kalıp" oluşuyordu. Maske zaten yalnızca
   opak bir zemin üzerinde anlamlı; videonun üstünde hiçbir şey kazandırmıyor.
   Yerine: aşağıdan süzülme + odaklanma (blur) + açılma. */
.k{display:inline-block;vertical-align:baseline}
.k i{
  display:inline-block;font-style:inherit;
  transform:translateY(calc((1 - var(--w,0)) * .34em));
  filter:blur(calc((1 - var(--w,0)) * 7px));
  opacity:var(--w,0);
}
.soz .satir em .k i{font-style:italic}

/* ışıklar sönerken üst üste yığılan dörtlük */
.soz-yigin{width:min(80vw,760px)}
.soz-yigin .satir{
  font-size:clamp(1.5rem,3.2vw,2.9rem);
  line-height:1.5;
  opacity:0;
}
.soz-final{width:min(84vw,860px)}
.soz-final .satir{font-size:clamp(1.45rem,3vw,2.8rem);line-height:1.36}

/* kaydırma fısıltısı — ilk kaydırmada kalıcı kaybolur */
.kaydir{
  position:absolute;left:50%;bottom:clamp(26px,4.4vh,52px);
  transform:translateX(-50%);
  z-index:6;pointer-events:none;
  font-size:.58rem;letter-spacing:.5em;text-indent:.5em;
  text-transform:uppercase;
  color:rgb(var(--vurgu));
  opacity:0;
  animation:fisilti 3.4s ease-in-out 1.6s infinite;
}
.kaydir.sustu{animation:none;opacity:0!important;transition:opacity .6s}
@keyframes fisilti{0%,100%{opacity:0}45%{opacity:.72}}

/* =========================================================
   4b. FİLM DENETİMLERİ  (atla + ses)
   İkisi de videonun ÜSTÜNE katman koymaz: kutu yok, zemin yok,
   yalnızca kendi halesiyle duran ince işaretler. Renk `--vurgu`den
   geldiği için filmin paletiyle birlikte kayıyorlar.
   ========================================================= */
.atla,.ses-dugme{
  position:absolute;z-index:7;
  color:rgb(var(--vurgu));
  opacity:.5;
  transition:opacity .45s ease;
  text-shadow:0 0 10px rgb(var(--golgeRGB,10 9 8) / .55),
              0 0 28px rgb(var(--golgeRGB,10 9 8) / .35);
}
.atla:hover,.ses-dugme:hover{opacity:.95}

.atla{
  right:clamp(18px,3.4vw,42px);bottom:clamp(26px,4.4vh,52px);
  font-size:.56rem;letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid rgb(var(--vurgu) / .34);
  padding-bottom:.42em;
}
.atla.sustu{opacity:0;pointer-events:none}

/* Ses düğmesi: dört çubuk. Kapalıyken düz bir çizgi (sessizlik),
   açıkken dalgalanıyor. Simge yerine hareketin kendisi anlatıyor. */
.ses-dugme{
  left:clamp(18px,3.4vw,42px);bottom:clamp(24px,4.2vh,50px);
  display:flex;align-items:flex-end;gap:3px;height:16px;
  background:none;border:0;padding:6px 4px;cursor:pointer;
  filter:drop-shadow(0 0 9px rgb(var(--golgeRGB,10 9 8) / .6));
}
.ses-cubuk{
  display:block;width:2px;height:2px;
  background:rgb(var(--vurgu));
  transition:height .3s ease;
}
.ses-dugme.acik .ses-cubuk{animation:sesDalga 1.15s ease-in-out infinite}
.ses-dugme.acik .ses-cubuk:nth-child(2){animation-delay:.14s}
.ses-dugme.acik .ses-cubuk:nth-child(3){animation-delay:.29s}
.ses-dugme.acik .ses-cubuk:nth-child(4){animation-delay:.43s}
@keyframes sesDalga{0%,100%{height:2px}50%{height:14px}}

/* Film bitince ikisi de sahneden çekilir. */
body.gecti .atla,body.gecti .ses-dugme{opacity:0;pointer-events:none}

/* =========================================================
   5. ÜST ÇUBUK  (film bitince görünür)
   ========================================================= */
.tepe{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2vw,26px) var(--oluk);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .9s var(--yay),visibility .9s;
  color:#fff;
  /* mix-blend-mode:difference KALDIRILDI. Beyaz + difference, arkasındaki
     zemin orta tona (128,128,128) yaklaşınca kendi zıddına dönüşüp
     GÖRÜNMEZ oluyordu — bu evin fotoğrafları baştan sona bej/gri orta ton
     olduğu için marka ve RANDEVU bağlantısı okunmuyordu.
     Yerine kendi buzlu yüzeyi: arkası ne olursa olsun koyuluyor.
     Film ÜZERİNDE değil — bu çubuk yalnız `body.gecti` ile, film bittikten
     sonra görünür; videoya katman konmuyor. */
  background:linear-gradient(180deg,rgba(10,9,8,.60),rgba(10,9,8,.26) 64%,rgba(10,9,8,0));
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tepe{
    background:rgba(10,9,8,.26);
    -webkit-backdrop-filter:blur(20px) brightness(.62) saturate(1.15);
    backdrop-filter:blur(20px) brightness(.62) saturate(1.15);
    border-bottom:1px solid rgba(255,255,255,.10);
  }
}
body.gecti .tepe{opacity:1;visibility:visible;pointer-events:auto}
.tepe-marka{font-weight:200;font-size:.72rem;letter-spacing:.5em;text-indent:.5em}
.tepe-cta{
  font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid currentColor;
  transition:opacity .35s;
}
.tepe-cta:hover{opacity:.55}

/* =========================================================
   6. İÇERİK — bölümler
   ========================================================= */
.icerik{position:relative;z-index:20;background:#0A0908}
.kutu{width:min(1360px,100%);margin:0 auto;padding-inline:var(--oluk)}
.bolum{padding-block:var(--alan);position:relative}
.bolum-tepe{margin-bottom:clamp(44px,6vw,86px)}

/* --- tema: koyu --- */
.esik,.gece,.gorusme,.dip{
  --kagit:#0A0908;--murekkep:#EFE9DF;--yumusak:#948A7E;
  --cizgi:rgba(239,233,223,.15);
  background:var(--kagit);color:var(--murekkep);
}
/* --- tema: açık --- */
.mekanlar,.mimari,.kunye{
  --kagit:#F4F0EA;--murekkep:#17140F;--yumusak:#726A5E;
  --cizgi:rgba(23,20,15,.13);
  background:var(--kagit);color:var(--murekkep);
}
.mimari{--kagit:#EFEAE2;background:var(--kagit)}

/* A · eşik — filmin karanlığından doğar */
.esik{
  padding-top:clamp(120px,20vh,240px);
  background:linear-gradient(180deg,#000 0%,#0A0908 34%);
}
.esik .baslik{margin-top:0}
.sayilar{
  list-style:none;margin:clamp(56px,7vw,96px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--cizgi);border-block:1px solid var(--cizgi);
}
.sayilar li{
  background:var(--kagit);
  padding:clamp(24px,3vw,38px) clamp(14px,2vw,26px);
  display:flex;flex-direction:column;gap:10px;
}
.sayilar b{
  font-family:"Bodoni Moda",serif;font-weight:400;
  font-size:clamp(2rem,3.4vw,3rem);line-height:1;
  color:rgb(var(--vurgu));
}
.sayilar span{
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--yumusak);
}

/* B · mekânlar ızgarası */
.izgara{
  width:min(1360px,100%);margin:0 auto;padding-inline:var(--oluk);
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1.5vw,24px);
}
.kart{margin:0;grid-column:span 4}
.kart.k-genis{grid-column:span 8}
.kart.k-orta{grid-column:span 6}
.kart.k-tam{grid-column:span 12}
.kart.k-tam>img{aspect-ratio:21/9}
.kart>img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform 1.25s var(--yay),filter 1.25s var(--yay);
  filter:saturate(.94);
}
.kart{overflow:hidden}
.kart>img{will-change:transform}
.kart:hover>img{transform:scale(1.038);filter:saturate(1.02)}
.kart figcaption{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:16px 2px 0;border-top:1px solid var(--cizgi);margin-top:16px;
}
.kart figcaption b{
  font-family:"Bodoni Moda",serif;font-weight:400;font-size:1.02rem;
  letter-spacing:-.01em;
}
.kart figcaption span{font-size:.72rem;letter-spacing:.14em;color:var(--yumusak)}

/* C · mimari ikilileri */
.ikili{
  display:grid;grid-template-columns:7fr 5fr;
  gap:clamp(26px,4vw,72px);align-items:center;
  padding-block:clamp(44px,6vw,88px);
  border-top:1px solid var(--cizgi);
}
.ikili.ters{grid-template-columns:5fr 7fr}
.ikili.ters .ikili-gorsel{order:2}
.ikili.ters .ikili-metin{order:1}
.ikili-gorsel{overflow:hidden}
.ikili-gorsel img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.94)}
.ikili-metin .sira{
  display:block;font-size:.66rem;letter-spacing:.4em;
  color:rgb(var(--vurgu));margin-bottom:18px;
}
.ikili-metin h3{
  font-family:"Bodoni Moda",serif;font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2.15rem);line-height:1.14;
  letter-spacing:-.015em;margin:0 0 18px;
}
.ikili-metin p{margin:0;color:var(--yumusak);max-width:46ch;line-height:1.82}

/* D · gece şeridi */
.gece-serit{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.5vw,24px);
  margin-top:clamp(40px,5vw,72px);
}
.gece-serit figure{margin:0;overflow:hidden}
.gece-serit img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform 1.25s var(--yay);
}
.gece-serit figure:hover img{transform:scale(1.04)}
.gece-serit figcaption{
  padding-top:14px;margin-top:14px;border-top:1px solid var(--cizgi);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--yumusak);
}

/* E · künye */
.kunye-liste{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,90px)}
.kunye-liste>div{
  display:flex;justify-content:space-between;gap:24px;align-items:baseline;
  padding:clamp(15px,1.7vw,22px) 0;border-bottom:1px solid var(--cizgi);
}
.kunye-liste dt{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--yumusak)}
.kunye-liste dd{margin:0;text-align:right;font-size:.98rem}

/* F · görüşme */
.gorusme{padding-block:clamp(110px,17vh,220px)}
.baglanti{
  margin-top:clamp(52px,6vw,88px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--cizgi);border-block:1px solid var(--cizgi);
}
.baglanti a{
  background:var(--kagit);padding:clamp(24px,3vw,36px) clamp(16px,2vw,28px);
  display:flex;flex-direction:column;gap:12px;
  transition:background .5s var(--yay);
}
.baglanti a:hover{background:#131110}
.baglanti span{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--yumusak)}
.baglanti b{
  font-family:"Bodoni Moda",serif;font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.5rem);letter-spacing:-.01em;
}

/* dip */
.dip{padding-block:clamp(44px,5vw,72px);border-top:1px solid var(--cizgi);background:#050404}
.dip-ic{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.dip .marka{font-size:.68rem;letter-spacing:.5em;text-indent:.5em}
.dip-not{font-size:.64rem;letter-spacing:.2em;color:var(--yumusak);text-transform:uppercase}

/* =========================================================
   7. Bölüm giriş animasyonu (yalnız JS varsa gizle)
   ========================================================= */
html.js .gir{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.15s var(--yay),transform 1.15s var(--yay);
  transition-delay:calc(var(--g,0) * 110ms);
}
html.js .gir.gorundu{opacity:1;transform:none}
html.js .kart.gir,html.js .gece-serit figure.gir{transform:translateY(34px)}

/* =========================================================
   8. Duyarlılık
   ========================================================= */
@media (max-width:900px){
  .izgara{grid-template-columns:repeat(6,1fr)}
  .kart,.kart.k-genis,.kart.k-orta,.kart.k-tam{grid-column:span 6}
  .kart.k-tam>img{aspect-ratio:16/9}
  .ikili,.ikili.ters{grid-template-columns:1fr;gap:26px}
  .ikili.ters .ikili-gorsel{order:0}
  .ikili.ters .ikili-metin{order:0}
  .gece-serit{grid-template-columns:1fr}
  .kunye-liste{grid-template-columns:1fr}
  .dip-ic{flex-direction:column;align-items:flex-start;gap:14px}
}
/* Dar ekran: yan yana çapa yeri kalmıyor. Yatay çapa bırakılır,
   DİKEY çapa (üst / orta / alt) ve hizalama korunur — yazı yine
   sabit ortada durmaz, plana göre yer değiştirir. */
@media (max-width:760px){
  .soz,.soz-buyuk,.soz[data-yan="orta"]{width:calc(100vw - 2*var(--kenar))}
  .soz[data-yer="sag-ust"],.soz[data-yer="sag-orta"],.soz[data-yer="sag-alt"]{
    right:auto;left:var(--kenar)
  }
  .soz[data-yer="orta-ust"],.soz[data-yer="orta-alt"],.soz[data-yer="orta"]{
    left:var(--kenar);--tx:0px
  }
  .soz[data-yer="sol-ust"],.soz[data-yer="sag-ust"],.soz[data-yer="orta-ust"]{top:11vh}
  .soz[data-yer="sol-alt"],.soz[data-yer="sag-alt"],.soz[data-yer="orta-alt"]{bottom:13vh}
  .soz[data-yan="orta"]::before{left:0;margin-left:0}
}
@media (max-width:560px){
  .soz .satir{font-size:clamp(1.4rem,6.4vw,2.1rem)}
  .soz-buyuk .satir{font-size:clamp(1.7rem,7.8vw,2.5rem)}
  .soz-kucuk .satir,.soz-yigin .satir,.soz-final .satir{font-size:clamp(1.25rem,5.4vw,1.8rem)}
  /* Dar ekranda oturma payı küçültülür: geniş başlangıç etiketi
     satır kırıyordu. */
  .soz .ust{--izle:calc(.20em + (1 - var(--g)) * .09em);font-size:.84rem}
}

@media (prefers-reduced-motion:reduce){
  html.js .gir{opacity:1;transform:none;transition:none}
  .kaydir{animation:none;opacity:.6}
  .kart>img,.gece-serit img{transition:none}
  /* Ses çubukları da titremesin; açıkken sabit yükseklikte dursun. */
  .ses-dugme.acik .ses-cubuk{animation:none;height:10px}
  /* Filmi atla burada daha görünür: kaydırma yolu kısaltılsa bile
     bu ziyaretçiye doğrudan çıkış sunulmalı. */
  .atla{opacity:.8}
}