/* ══════════════════════════════════════════════════════════════════
   AVS FAN · TUR 4 · "Önce hesap, sonra fan."

   İKİ ZEMİN, BİR KESME.
   Fotoğrafların hepsi ölçülmüş koyu lacivert zeminde (#060D1E) ve
   mavi kenar ışığıyla çekilmiş; sahne kareleri gece. Sayfanın üst
   yarısı o zemini kullanıyor (film). İş yapılan alt yarı kâğıt:
   hesap, eksen, kanıt, form. Kesme sayfanın en büyük hareketi;
   kâğıt yapışık film sahnesinin üstüne kalkıyor.

   HAREKET KURALI
   · Yalnız transform ve opacity. Tek bir width/height/top/box-shadow
     animasyonu yok, stroke-dashoffset yok.
   · Tek bir sonsuz hareket adı var: `nefes`. Ekran başına birden
     fazla sürekli animasyon çalışmıyor.
   · Gizleyen her kural açma kuralıyla yan yana yazıldı ve hepsi
     `html.hareket` altında. Betik çalışmazsa sayfa hareketsiz ama
     eksiksiz okunur.
   · `prefers-reduced-motion: reduce` altında betik `hareket`
     sınıfını hiç eklemiyor; sayfa tam ve durgun.
   ══════════════════════════════════════════════════════════════════ */

/* ORTAK DİL AYRI DOSYADA: `varlik/dil.css`. Belirteçler, yazı tipi,
   temel sıfırlama, kapsayıcı, etiket, düğme, ALAN bileşeni, PANO
   cihazı, dip bilgi ve el altı çubuğu orada; ikisi de oradan geliyor.
   Bu dosya YALNIZ ana sayfaya ait olanı taşır ve `dil.css`ten SONRA
   yüklenir. Sebep dosyanın başında yazılı. */

/* Kaplayan kareler: `picture{display:contents}` artık `dil.css`te,
   yani `<img>` doğrudan kabın çocuğu; eskiden her kaplayan kutuya ayrı
   `height:100%` kuralı yazmak gerekiyordu, gerekmiyor. */

/* ══ AÇILIŞ ════════════════════════════════════════════════════════ */
/* `--nav` DÜŞÜLÜYOR: üst menü artık `position:fixed` değil `sticky`,
   yani akışta yer kaplıyor. Düşülmezse ilk ekran menü boyu kadar
   uzuyor ve ölçü listesi ekranın altında kalıyor. */
.acilis{
  position:relative;min-height:calc(100svh - var(--nav));
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(40px,7vh,84px) var(--oluk) 0;color:#fff;overflow:hidden;
}
/* KARE DE DÜZENİN İÇİNDE. `inset:0` idi, yani fotoğraf ekranın iki
   kenarına birden değiyordu; sayfadaki öteki on bölümün hepsi
   `--oluk`ta başlayıp `--oluk`ta bitiyor. Sonuç, geri bildirimdeki ekran
   görüntüsünde net görünen şey: fotoğrafın kütlesi sağda toplanıyor,
   sol taraf boş lacivert kalıyor ve hero sayfanın geri kalanıyla aynı
   düzeni konuşmuyordu. İkinci bölümde (`01 · imalat`) fotoğraf zaten
   sütunun içinde duruyor ve o bölüm "tam ortalı" görünüyor.
   `inset:0 var(--oluk)` kareyi tam olarak içerik kutusuna oturtuyor:
   nav, ölçü şeridi, bütün bölümler ve dip bilgi ile aynı iki kenar.
   Yan kazanç: kaynak 1672 px ve artık 2560 yerine ~1530 px'e
   basılıyor, yani büyütme 1,53 kattan 0,92'ye iniyor ve kare
   yumuşamıyor. */
/* 10 EKİM, TAM GENİŞLİK (Yusuf): görsel/video kenardan kenara. Yazının yeri
   değişmedi; o `.acilis`in kendi `--oluk` dolgusundan geliyor, bu kutudan değil. */
.acilis__kare{position:absolute;inset:0;z-index:0}
.acilis__kare img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
/* HAVA KATMANI. Posterle BİREBİR aynı kaplama kuralları: `object-fit` ve
   `object-position` ayrışırsa şeritler kanalların üstünden kayar. `screen`
   siyahı yok sayıyor, yani dosyadaki siyah zemin hiç çizilmiyor ve geriye
   yalnız ışık kalıyor. Yüklenene kadar saydam: kare hiç boş kalmıyor. */
.acilis__hava{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:60% 50%;
  mix-blend-mode:screen;pointer-events:none;opacity:0;
  transition:opacity var(--h-acilis) linear}
.acilis.havali .acilis__hava{opacity:1}
/* PERDE YATAY DEĞİL DİKEY. Burada tek bir `100deg` degrade vardı ve
   sol sütunu TEPEDEN TIRNAĞA karartıyordu; oysa yazı yalnız alt üçte
   ikide duruyor. Sonucu ölçüldü: 2560 px'te soldan x=1100'e kadar
   piksel sabit `#050D1C`, yani ekranın %43'ü düz lacivert duvar ve
   fotoğraf orada hiç görünmüyor. Buna üç kez "solda boşluk"
   denildi; boşluk değil, karartılmış fotoğraf. Yatay degradeyi
   gevşetmek iki kez denendi ve iki kez yetmedi, çünkü sorun opaklık
   miktarı değil KARARTMANIN YÖNÜ.

   Aynı ölçüm ikinci bir şey daha gösterdi: karartma solda toplandığı
   için SAĞ taraf açıkta kalıyordu ve oradaki yazılar okunmuyordu.
   Üstteki etiket 1,01:1 (eşik 4,5), ölçü etiketleri 1,06 ve 1,52,
   bir ölçü değeri 1,78. Lighthouse bunu göremez: axe fotoğraf
   üzerindeki yazıyı atlar, o yüzden Erişilebilirlik 100 diyordu.

   Yeni perde iki katman:
   1. DİKEY · üstte şeffaf, altta koyu. Yazı alta yapışık olduğu için
      karartma tam yazının olduğu yere iniyor ve fotoğrafın üst bandı
      SOLDAN SAĞA açık kalıyor.
   2. HAFİF YATAY · yalnız başlığın arkasına biraz fazladan koyuluk,
      %70'te tamamen bitiyor, yani sağ tarafı karartmıyor.
   Denetim: `arac/hero-kontrast.mjs` yazının ARKASINDAKİ gerçek
   pikseli okuyup WCAG oranını hesaplıyor. */
.acilis__kare::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,#060D1E00 0%,#060D1E0D 20%,#060D1E8C 46%,#060D1EE6 72%,#060D1EFA 100%),
    linear-gradient(100deg,#060D1E9E 0%,#060D1E4D 40%,#060D1E00 70%);
}
/* HERO'DA ETİKET DAHA AÇIK. Ortak `.etiket` rengi `--sonuk`
   (#8D98AC); düz zeminde doğru ama burada FOTOĞRAF üstünde ve 13 px.
   Ölçüldü: 390 ve 768'de yazının arkasındaki gerçek piksele göre
   3,64 ve 3,76:1, eşik 4,5. Üstelik 2560'ta parlak bir kanalın
   üstüne denk geldiğinde gri ton fotoğrafın tonuyla neredeyse
   birebir aynı oluyor. Paragrafla aynı açıklığa çekildi (7,3:1).
   Yalnız hero'da; öteki sayfalardaki `.etiket` düz zeminde ve
   olduğu gibi kalıyor. */
.acilis .etiket{color:#D7DDE8}
.acilis__ic{position:relative;z-index:1;max-width:var(--en);width:100%}
.acilis h1{font-size:var(--dev);margin:0 0 26px}
/* Etiket H1'in içinde (arama niyeti): başlığın sıkı satır aralığını
   almasın, dar ekranda iki satıra kırılınca üst üste binmesin. */
.acilis h1 .etiket{line-height:1.5}
.acilis__giris{max-width:48ch;font-size:var(--p2);color:#D7DDE8}
.acilis__dg{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* ÜCRETSİZ KEŞİF ROZETİ (1 Ekim): düğmelerin hemen üstünde, sayfanın
   ilk ekranında. Mavi etiket + bölge satırı; kutu yok, zemin karenin kendisi. */
.acilis__kesif{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:26px;
  font-size:var(--p1);color:#D7DDE8}
.acilis__kesif b{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;
  background:var(--mavi);color:#fff;font-size:var(--p0);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;border-radius:2px}
/* Şerit 1296 px genişti ama üç ölçü yalnız 420 px'ini dolduruyordu:
   çizginin sağında 876 px hiçbir şey yoktu. Sitenin en değerli
   ekranında, gözün başlıktan sonra indiği yerde boş bir çizgi.
   Ölçüler artık şeridi PAYLAŞIYOR; çizgi de içerik kadar uzun. */
.acilis__olcu{
  position:relative;z-index:1;max-width:var(--en);margin:44px 0 0;width:100%;
  display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr)) auto;
  gap:0 clamp(24px,4vw,56px);
  border-top:1px solid var(--cizgi-ters);padding:18px 0 26px;
}
.acilis__olcu div{min-width:0}
/* Katalog hücresi: şeridin sağ ucunda, sayılarla aynı tepe hizası. */
/* ŞERİDİN EN GÖZE ÇARPAN ÖĞESİ (9 Ekim, Umut): sayıların yanında küçük ve
   sönük kalıyordu, "PDF indir büyüsün, diğerlerinden önde olsun". Mavi
   çerçeve + hafif parıltı, büyük ikon ve dolu "İndir" düğmesi; yalnız burada,
   iç sayfalardaki `katalog-bag` aynı kalıyor. */
.acilis__olcu-katalog dd{margin-top:8px}
.acilis__olcu-katalog .katalog-bag{gap:16px;min-height:76px;padding:12px 12px 12px 12px;
  background:linear-gradient(135deg,#1E6BFF38,#0B1426D9 70%);-webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);border-color:#1E6BFFB3;letter-spacing:0;line-height:1.2;
  box-shadow:0 14px 36px -14px #1E6BFFA6;transition:border-color var(--h-kisa),background var(--h-kisa),transform var(--h-kisa)}
.acilis__olcu-katalog .katalog-bag:hover{background:linear-gradient(135deg,#1E6BFF59,#111D36E6 70%);
  border-color:var(--mavi-acik);transform:translateY(-1px)}
.acilis__olcu-katalog .katalog-bag__ikon{width:52px;height:52px;font-size:13px}
.acilis__olcu-katalog .katalog-bag b{font-size:var(--p2)}
.acilis__olcu-katalog .katalog-bag small{font-size:var(--p0);margin-left:0}
.acilis__olcu-katalog .katalog-bag::after{content:'İndir';margin-left:auto;padding:11px 16px;border-radius:2px;
  background:var(--mavi);color:#fff;font-size:var(--p1);font-weight:700;white-space:nowrap}
/* SAYFANIN İLK VE EN ÖNEMLİ SAYILARI. 21 px'te duruyorlardı, yani
   gövde metniyle aynı ağırlıkta; ziyaretçi onları okumuyordu bile.
   Mühendis ziyaretçi cümleyi değil RAKAMI arar. Ölçülen referanslarda
   (Polestar, Apple) sayfanın en büyük ikinci puntosu hep bir teknik
   değer; burada da öyle. Etiket küçük ve sönük, değer büyük ve beyaz. */
.acilis__olcu dt{font-size:var(--p0);color:var(--sonuk-ters);letter-spacing:.1em;
  text-transform:uppercase}
.acilis__olcu dd{margin:8px 0 0;font-size:clamp(26px,3.3vw,46px);font-weight:800;
  letter-spacing:-.035em;line-height:1}
.acilis__olcu small{font-size:var(--p1);font-weight:700;color:var(--sonuk-ters);
  letter-spacing:0;margin-left:2px}

/* satır kesme perdesi · başlık satırları aşağıdan çıkar */
.cik{display:block;overflow:hidden;padding-bottom:.06em}
.cik>span{display:block}

/* ══ HAVA ŞERİDİ ══════════════════════════════════════════════════
   İki bölümün arasına giren nefes. Bölüm değil: başlığı, metni, kendi
   dolgusu yok; yalnız içinden hava geçen yatay bir kanal. Yüksekliği
   bilerek kısa tutuldu, sayfayı uzatmasın diye.

   Tek satırla konuyor: `<?= havaSeridi() ?>`. Kaç kere konursa o kadar
   çıkar; her biri kendi gözcüsüyle yalnız ekrandayken oynar. */
/* `isolation`: video `screen` ile harmanlanıyor; harmanın hangi arka
   planla yapılacağı belirsiz kalmasın diye şerit kendi yalıtımını
   kuruyor. `contain:paint` de boyamayı kutunun içinde tutuyor.
   İkisi de DOĞRULUK için, hız için değil: ölçüldüğünde şeridin kare
   süresine getirdiği yük zaten sıfırdı (GPU açık, 16,5 ms, 32 ms üstü
   0). Bir süre bu ikisinin hızı düzelttiğini sandım, düzeltmedi;
   yanıltan şey GPU'suz ölçümdü. `07-bilgi/kararlar.md`, 23 Eylül. */
.serit-hava{position:relative;height:clamp(190px,30vh,340px);
  overflow:hidden;background:var(--gece);isolation:isolate;contain:paint}
/* SÖZLÜ ŞERİT · sayfanın ikinci ve son tipografik zirvesi. Şerit
   yükseliyor, yazı havanın önünden geçiyor. */
.serit-hava--soz{height:clamp(300px,52vh,520px);display:grid;align-items:center}
/* SESSİZ NEFES · metinsiz, tam ekran. Bilgi yoğun iki bölüm arasına
   konan sessiz ekran, sonraki bölümün ilk cümlesini yeniden değerli
   kılıyor. Ölçülen referansların hepsinde var (Renault'da dördü,
   Polestar'da galeri bölümü). Aynı bileşen, yalnız boyu değişiyor. */
/* Sessiz nefes TAM EKRAN değil, üçte iki. Bir tam ekran kelimesiz
   kare sayfaya 900 px ekliyordu ve sayfada zaten sözlü bir şerit var;
   iki uzun nefes üst üste "site bitti" hissi veriyor. */
.serit-hava--tam{height:min(66svh,560px)}
/* HEPSİ AYNI HÜCREDE. `display:grid` deyip bırakınca kare birinci
   satıra, yazı İKİNCİ satıra düşüyordu: yazı şeridin dışına taşıp
   görünmez oluyordu. Kare, video ve yazı üst üste durmalı. */
.serit-hava--soz>*{grid-area:1/1}
/* GÖLGE DEĞİL PERDE. 76 px'lik yazının altına 40 px bulanıklıkta bir
   `text-shadow` konmuştu; bulanıklık her karede yeniden hesaplanıyor
   ve şerit kaydıkça tam ekran boyunca sürüyor. Ölçüldü: 32 ms üstü
   kare sayısı 0-1'den 2-5'e çıkmıştı. Okunurluğu perde veriyor,
   perde tek bir gradyan ve bir kez boyanıyor. */
.serit-hava__soz{position:relative;z-index:2;margin:0;
  font-size:clamp(30px,5.6vw,76px);line-height:1.02;letter-spacing:-.035em;
  font-weight:800;color:#fff;text-wrap:balance}
.serit-hava--soz::before{content:'';position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,#060D1EE0 0%,#060D1EB3 42%,#060D1E45 72%,#060D1E00 100%)}
/* 22ch YAZIDA, kapta değil: `.kap` `margin-inline:auto` taşıdığı için daralan
   kap ortaya kayıyor, satır sitenin sol kenarından 66-664 px kopuyordu
   (28 Eylül, masaüstü incelemesi). */
.serit-hava--soz .kap{display:block}
.serit-hava__satir{display:block;max-width:22ch}
.serit-hava img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Hava katmanı posterle BİREBİR aynı kaplama kurallarını alır. */
.serit-hava__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;mix-blend-mode:screen;
  pointer-events:none;opacity:0;transition:opacity var(--h-sahne) linear}
.serit-hava.havali .serit-hava__video{opacity:1}
/* Üst ve alt kenar komşu bölümlere eriyor: şerit bir kutu gibi değil,
   iki bölümün arasından geçen bir hat gibi dursun. */
.serit-hava::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--gece),#060D1E00 34%,
                             #060D1E00 66%,var(--gece))}

/* ══ FİLM ══════════════════════════════════════════════════════════
   Betik yokken: dört kare art arda, her birinin altında kendi yazısı.
   Betik varken: tek yapışık sahne, kaydırma KONUMU kareyi seçer. */
.film{position:relative;background:var(--gece);color:#fff}
/* `--oluk`, `--kenar` DEĞİL: betik yokken de film bölümü sayfanın
   geri kalanıyla aynı kenardan başlayıp aynı kenarda bitsin. */
.film__ic{padding:clamp(48px,7vh,84px) var(--oluk) 0}
.film__adim{position:relative;padding:clamp(26px,4vh,42px) var(--oluk) 0}
/* `isolation`: hava katmanı `screen` ile harmanlanıyor; hangi arka
   planla harmanlanacağı belirsiz kalmasın diye kare kendi
   yalıtımını kuruyor. Kareler birbirinin üstüne yığılı ve geçiş
   sırasında opaklıkları değişiyor; yalıtım olmadan harmanın kökü
   geçiş boyunca değişiyor. */
.film__kare{position:relative;overflow:hidden;isolation:isolate}
.film__kare img{width:100%;height:100%;object-fit:cover}
/* Hava katmanı posterle BİREBİR aynı kaplama kurallarını alır;
   ayrışırsa hava bacanın üstünden kayar. Açılıştaki katmanla aynı
   mantık, aynı gerekçe. */
.film__hava{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;mix-blend-mode:screen;pointer-events:none;
  opacity:0;transition:opacity var(--h-sahne) linear}
.film__adim.havali .film__hava{opacity:1}
.film__yazi{padding-top:20px;max-width:46ch}
/* Numara ve başlık AYNI SATIRDA, numara başlık ölçeğinde. Bölüm
   başlığı yukarıda duruyor; adım bloğu onunla yarışmasın diye başlık
   bir kademe küçük, ağırlığı numarada. */
.film__no{display:flex;align-items:baseline;gap:10px;margin:0}
/* Numara bölüm başlığıyla YARIŞMASIN: başlık `--p5`, adım numarası
   bir kademe küçük. Kare dizilerindeki `.dizi__sayac b` ile aynı
   ölçek, çünkü ikisi de aynı işi yapıyor: kaçıncı adımdayız. */
.film__no b{font-size:var(--p4);line-height:.9;font-weight:800;
  letter-spacing:-.04em;color:var(--mavi-acik)}
.film__no span{font-size:var(--p1);color:var(--sonuk-ters)}
.film__yazi h3{font-size:var(--p3);margin:10px 0 8px;letter-spacing:-.01em}
.film__cumle{color:#C9D2E1;font-size:var(--p2);max-width:46ch}
/* TİPOGRAFİK ZİRVE. Sayfada dokuz bölüm başlığı vardı ve dokuzu da
   aynı ölçekteydi (`--p5`); hiçbir yerde göz bir şeye ÇARPMIYORDU.
   Bu bölüm artık tam boy bir kare taşıyor, yani sayfanın en sinematik
   ekranı; başlık da oraya göre. Açılıştan sonraki ikinci ve son
   zirve, fazlası zirve olmaktan çıkarır. */
.film__ic h2{font-size:clamp(34px,6.2vw,84px);line-height:.94;letter-spacing:-.035em;
  font-weight:800;max-width:11ch;text-wrap:balance}
.film__not{font-size:var(--p2);color:var(--sonuk-ters);margin-top:22px;max-width:32ch}
.film__not a{color:var(--mavi-acik)}
.film__ray{display:none}

/* Dört adım BEŞ ekran sürüyordu, adım başına bir tam ekran.
   Kaydırırken uzun geliyordu ve dört kısa cümle o kadar yer
   hak etmiyor. Adım başına 0,8 ekran: bölüm 4500 px'ten
   3780 px'e iniyor, geçişler de biraz hızlanıyor. */
/* Aynı gerekçe: dört adım 4,2 ekran sürüyordu ve sol sütun o dört
   ekran boyunca hiç değişmiyordu. Adım başına 0,8 -> 0,55 ekran. */
/* ADIM BIRIMININ PIKSEL TABANI VAR. Önce yol tamamen `svh` türevliydi
   (adet x .55 + 1) ve kısa ekranda her şey orantılı kısalıyordu; oysa
   insanın kaydırma girdisi ekran boyuyla KÜÇÜLMÜYOR, bir tekerlek
   çentiği her ekranda ~100 px (ölçülmedi, Chrome varsayılanı).

   480 SEÇİLMEDİ, TÜRETİLDİ. `arac/film.mjs`in iki eşiği birimi iki
   yerden kısıtlıyor ve `ana.js` `PENCERE` tablosuyla birlikte şu iki
   eşitsizliği veriyor (GECIS 0,40):
     yazı penceresi >= 55 px  ->  birim >= 55 / (0,40 x 0,32) = 430
     silme yolu    >= 120 px  ->  birim >= 120 / (0,40 x 0,64) = 469
   Bağlayıcı olan ikincisi; 480 onun %2 payla yukarısı. İlk denemede
   450 yazılmıştı çünkü yalnız birinci eşitsizlik hesaplanmıştı ve
   araç 700 px'lik ekranda silme yolunu 114 px ölçüp kusur verdi.
   GECIS ya da pencere genişlikleri değişirse bu sayı da değişir.
   900 px'lik ekranda hiçbir şey değişmiyor (.55 x 900 = 495 > 480). */
.hareket .film__yol{height:calc(100svh + var(--adet) * max(.55 * 100svh, 480px))}
/* SAHNE IZGARASI · `.dizi__sahne` ile birebir aynı: solda metin,
   sağda tek nesne, dikey ortalı, aynı sütun oranı ve aynı dolgu.
   Eskiden kare tam ekranı kaplıyor, yazı üstüne biniyordu; sayfadaki
   öbür üç sahneyle aynı dili konuşmuyordu. */
/* KARE ARTIK EKRAN KENARINA TAŞMIYOR · 27 Eylül'de geri alındı.
   Burada "fotoğrafın pencerenin kenarına DEĞMESİ ritmi kırıyor,
   pahalı duran sitelerin ortak hamlesi bu" yazıyordu ve sahne tek
   yanı `--oluk`, öteki yanı ekran kenarı olacak şekilde
   kuruluyordu. Büyük monitörde sonucu ölçüldü: 2560 px'te sayfada
   BEŞ ayrı sol kenar (513, 1209, 1261, 1467, 0) ve DÖRT ayrı sağ
   kenar (2047, 2560, 2587, 1351) vardı. Yani niyet "sinematik"ti
   ama gözün gördüğü şey hizasızlıktı ve iki kez söylendi.
   Kural artık tek: HER BÖLÜM `--oluk`ta başlar, `--oluk`ta biter.
   Tam genişlikte kalabilen tek şey bölüm ZEMİNİ ve kendini kaydıran
   şerit (`.isler`), çünkü onlar hizalanacak bir kenar taşımıyor. */
.hareket .film__sahne{position:sticky;top:0;height:100svh;overflow:hidden;
  transform-origin:50% 30%;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  align-items:center;align-content:center;
  column-gap:clamp(20px,4vw,64px);padding-inline:var(--oluk)}
.hareket .film__ic{grid-column:1;grid-row:1;padding:0;position:relative;z-index:2}
/* Perde artık tam ekran değil, sağ sütundaki çerçeve. Yüksekliği
   sabit: kareler birbirinin üstüne yığılı ve hepsi mutlak konumlu,
   yani kutunun boyunu içerik veremez. */
.hareket .film__perde{grid-column:2;grid-row:1;position:relative;height:100svh}
/* ÖLÇEK TABANDAN BÜYÜYOR. Öntanımlı merkez olunca %16'lık ölçek
   kutunun ALT kenarını da aşağı itiyor ve adım yazısı geçişin
   ortasında el altı çubuğunun altında kalıyordu. */
.hareket .film__adim{position:absolute;inset:0;padding:0;opacity:0;will-change:opacity}
/* YALNIZ `menzil <= 0` YEDEĞİ. Normal akışta `filmGuncelle()` her
   adıma satır içi opaklık yazıyor ve satır içi stil bu kuralı yeniyor;
   kural ancak sahnenin pisti sıfıra indiğinde (çok kısa ekran) devreye
   giriyor ve ilk adımı görünür tutuyor. Geçişi bu kural SÜRMÜYOR. */
.hareket .film__adim[data-ac]{opacity:1}
/* Kare perdeyi TAMAMEN dolduruyor: tepeden dibe, sağda pencere
   kenarına kadar. Ölçek merkezden büyüyor çünkü artık kırpılan bir
   kare; taşan payı perde yutuyor. */
.hareket .film__kare{--w:100;position:absolute;inset:0;overflow:hidden;
  transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
.hareket .film__kare img,.hareket .film__hava{width:100%;height:100%;object-fit:cover}
/* ── SİLME ÇİZGİSİ · erime değil ──────────────────────────────────
   İki endüstriyel fotoğraf çapraz eriyince ortada ikisi birden
   görünüyordu (ölçüldü: 96 px boyunca hayalet görüntü). Maskeyle her
   piksel tek bir fotoğraf gösteriyor, karışım yok. Çizgi soldan sağa,
   hafif eğik, yumuşak kenarlı: kareden geçen bir hava hamlesi gibi.
   `--w` JS'ten geliyor (0 kapalı, 100 açık).

   KURAL `[data-sil]`E BAĞLI, `.film__kare`ye DEĞİL. Koşulsuz olunca
   dört karenin dördü de sahne boyunca maskeli boyama yoluna giriyordu;
   içlerinde sonsuz `nefes` animasyonu koşan `img` var ve maske onun
   katman terfisini yiyor. Nitelik yalnız geçiş boyunca duruyor, yani
   kaydırmanın büyük kısmında maskeli öğe SIFIR. Betik yokken
   nitelik hiç konmuyor: kare tam görünür, yedek davranış sağlam.

   `#fff`/`#fff0`, `#000` DEĞİL: alfa maskelemede ikisi de çalışır ama
   luminance uygulayan bir motorda `#000` maskeyi ters çevirip kareyi
   tamamen yok eder. */
.hareket .film__kare[data-sil]{
  -webkit-mask-image:linear-gradient(100deg,#fff calc(var(--w) * 1.26% - 26%),#fff0 calc(var(--w) * 1.26%));
          mask-image:linear-gradient(100deg,#fff calc(var(--w) * 1.26% - 26%),#fff0 calc(var(--w) * 1.26%))}
/* Adım yazısı karenin DİBİNDE, üstünde. Sol sütundaki başlık bölümün
   kimliği, bu ise o anki karenin adı; ikisi ayrı yerde durmalı ki
   hangisinin ne olduğu karışmasın. */
.hareket .film__yazi{position:absolute;left:0;right:var(--kenar);
  bottom:clamp(40px,7vh,72px);padding-left:clamp(24px,3vw,44px);
  z-index:3;max-width:44ch}
/* Kare sağda pencereye değiyor, solda zemine ERİYOR: sert bir dikey
   kenar iki sütunu birbirine dikilmiş gibi gösteriyordu. Altta da
   yazının okunması için perde var; üstte yok, çünkü orada yazı yok
   ve gereksiz karartma kareyi öldürüyor. */
.hareket .film__kare::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--gece) 0%,#060D1EE0 4%,#060D1E8A 14%,#060D1E00 34%),
    linear-gradient(0deg,#060D1EF2 0%,#060D1EA1 18%,#060D1E2B 36%,#060D1E00 54%);
}
/* Nefes YALNIZ o an baskın olan karede çalışır: dördü birden
   canlı kalırsa ekran başına dört sürekli animasyon olur. */
.hareket .film__adim[data-ac] .film__kare img{animation:nefes var(--s-nefes-2) var(--e-yumusak) infinite alternate}
.hareket .film__ray{display:flex;gap:8px;margin-top:clamp(26px,4vh,42px)}
.hareket .film__ray i{
  display:block;width:46px;height:2px;background:#FFFFFF30;
  transform:scaleY(1);transform-origin:50% 50%;
  transition:transform var(--h-orta) var(--e-cik),background-color var(--h-orta) linear;
}
.hareket .film__ray i[data-ac]{background:var(--mavi-acik);transform:scaleY(3)}

/* AÇILIŞ HAMLESİ. Süzülme 17 saniyede yol alıyor; ilk üç saniyede
   %4 ediyor ve sayfa açılırken hiçbir şey olmuyor gibi duruyor.
   Kanaat o iki saniyede kuruluyor, o yüzden kare içeri BİR KEZ
   oturuyor: kutu ölçekleniyor, içindeki görsel süzülmeye devam
   ediyor. İki ayrı öğe, iki ayrı dönüşüm, çakışma yok. */
@keyframes acilisGiris{
  from{transform:scale(1.15)}
  to{transform:none}
}
@keyframes nefes{
  from{transform:scale(1.05) translate3d(0,0,0)}
  to{transform:scale(1.26) translate3d(-3.2%,-2.4%,0)}
}
/* İmleç yerine oturunca iki kez atıyor: sayı değişti demek. */
@keyframes atis{
  0%,100%{transform:scaleX(1);opacity:1}
  50%{transform:scaleX(3.4);opacity:.55}
}

/* ══ SAHNE ════════════════════════════════════════════════════════
   SAYFANIN GERİ KALANI DA SAHNE DİLİNE ÇEVRİLDİ.

   Müşterinin kararı net: kaydırmalı sahneler iyi, geri kalanı kötü.
   İyi olanların ortak formülü var ve tek yer burası:

     · ekranı dolduran yükseklik (100svh)
     · solda dikey ortalanmış SIKI metin, sağda tek NESNE
     · sütun oranı 1 / 1,15 · `.dizi__sahne` ile birebir aynı
     · başlık `--p5`, en çok 15ch; açıklama `--p2`, en çok 36ch

   Eskiden dokuz bölümün hepsi aynı kalıpla açılıyordu: etiket, dev
   başlık, sola yaslı içerik, altında bir ızgara. Büyük görseli olan
   bölümlerde tekrar görünmüyordu, görseli olmayanlarda göze
   batıyordu. Kalıp burada kırıldı; nesne her bölümde başka bir şey:
   hesapta pano, ailelerde ürün + eksen, sorularda liste, teklifte
   formun kendisi. */
.sahne{position:relative;z-index:3;background:var(--gece);color:#fff}
.sahne__ic{
  /* ÜST SINIR ŞART. `100svh` uzun ekranda içeriği ortalıyor ve altında
     üstünde 150 px'lik ölü bantlar bırakıyordu: 1200 px'lik bir
     pencerede teklif bölümünün üstünde 300 px boşluk vardı. Alt sınır
     hâlâ ekran boyu, ama 860 px'ten sonrası boşluğa gitmiyor. */
  /* 860 idi ve icerikten uzundu: bolumler arasinda uc kez ayni
     ~340 px'lik olu bant olusuyordu. 760 + daha dar dolgu ile icerik
     alani 568 px'e iniyor, eksen bolumunun icerigi tam o kadar. */
  min-height:min(100svh,760px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;align-content:center;
  column-gap:clamp(20px,4vw,64px);row-gap:clamp(26px,4vh,46px);
  padding-block:clamp(56px,8vh,96px);
}
.sahne__giris{min-width:0}
.sahne__giris h2{font-size:var(--p5);line-height:.98;letter-spacing:-.03em;
  font-weight:800;max-width:15ch;text-wrap:balance}
.sahne__aciklama{margin-top:18px;font-size:var(--p2);color:var(--sonuk-ters);max-width:36ch}
.sahne__ek{margin-top:14px;font-size:var(--p0);color:var(--sonuk-ters);max-width:38ch;line-height:1.55}
.sahne__nesne{min-width:0}
.sahne__dg{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}

/* ENİNE SAHNE · nesnesi bir SIRA olan bölüm (saha). Dört kare yan
   yana durmalı, yani ızgara tam genişlikte. Ritim yine de aynı:
   başlık bloğu kendi içinde 1 / 1,15 bölünüyor. */
.sahne__ic--enine{grid-template-columns:minmax(0,1fr);min-height:0;
  padding-block:clamp(64px,10vh,120px)}
/* Kanıt şeridi kapsayıcının DIŞINDA ve hemen altında: başlık bloğunun
   alt dolgusu ile şeridin üst boşluğu üst üste binince arada 135 px'lik
   ölü bir bant kalıyordu. Ölçüldü, göz kararı değil. */
.saha .sahne__ic{padding-bottom:0}
/* ÜSTTEN hizalı. `end` iken iki sütun alttan hizalanıyor ve 17 px'lik
   giriş cümlesi 58 px'lik başlığın tepe hizasının 32 px ÜSTÜNDE
   asılı kalıyordu. Giriş de bir kademe büyüdü: aradaki 3,4 kat fark
   bölümün iki parçasını birbirinden koparıyordu. */
.sahne__bas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  column-gap:clamp(20px,4vw,64px);row-gap:clamp(18px,3vh,28px);align-items:start}
.sahne__yan .sahne__aciklama{font-size:var(--p3);max-width:34ch;line-height:1.4}
.sahne__yan{min-width:0}
.sahne__yan .sahne__aciklama{margin-top:0}

/* ══ HESAP ════════════════════════════════════════════════════════
   Nesnesi hesabın kendisi. Bölümün kendine ait tek bir kuralı yok:
   yerleşimi `.sahne`, cihazı aşağıdaki `.pano` veriyor. */

/* `.pano` cihazı ve `.alan` bileşeni `dil.css`te: iç sayfalar da
   aynısını kullanıyor (iletişim formu, debi hesaplama). */

/* ══ SAHA ══════════════════════════════════════════════════════════ */
/* KANIT ŞERİDİ. Dört kare pencerenin bir kenarından öbürüne; aralarında
   yalnız saç teli kalınlığında bir çizgi. Kapsayıcının içindeyken
   "dört küçük fotoğraf" gibiydi, kenara değince tek bir BANT oluyor.
   Künye karenin ALTINDA değil ÜSTÜNDE: film sahnesiyle aynı dil ve
   dört kare birbirinden kopmuyor. */
.isler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--cizgi);margin-top:clamp(26px,3.6vh,44px)}
.is{position:relative;background:var(--gece);overflow:hidden}
.is__kare{position:relative;overflow:hidden;background:var(--gece-2);aspect-ratio:3/4}
.is__kare img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--h-uzun) var(--e-cik)}
.is:hover .is__kare img{transform:scale(1.045)}
/* Perde yalnız ALT YARIDA: üst yarı fotoğrafın kendisi, karartma
   yazının oturduğu yerde başlıyor. */
.is__yazi{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(16px,1.6vw,24px);
  background:linear-gradient(0deg,#060D1EF7 0%,#060D1EDB 34%,#060D1E80 64%,#060D1E00 100%)}
.is__debi{font-size:var(--p3);font-weight:800;letter-spacing:-.02em}
.is__debi small{font-size:var(--p0);font-weight:600;color:var(--sonuk-ters)}
.is h3{font-size:var(--p2);margin-top:2px}
/* İKİ SATIRA SABİT. Açıklamaların kimi bir kimi iki satırdı ve
   künyeler alta yaslı olduğu için dört debi rakamı 24 px şaşıyordu:
   tek sıradaki dört sayı ortak taban çizgisinde değildi (ölçüldü). */
.is__ozet{margin-top:6px;font-size:var(--p1);color:#C9D2E1;line-height:1.45;
  min-height:calc(2em * 1.45);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ══ SORULAR ═══════════════════════════════════════════════════════ */
/* Nesne: sorular listesinin kendisi. Kutu değil, üst üste dizilmiş
   satırlar; panonun kenarlığı burada gereksiz olurdu, çünkü açılan
   cevap kutunun boyunu sürekli değiştirir. */
.soru__liste{border-top:1px solid var(--cizgi-ters)}
.soru{border-bottom:1px solid var(--cizgi-ters)}
.soru summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:64px;padding:14px 0;cursor:pointer;list-style:none;
  font-size:var(--p2);font-weight:700;letter-spacing:-.01em;
  transition:color var(--h-kisa) linear;
}
.soru summary::-webkit-details-marker{display:none}
.soru summary::after{content:"+";font-size:var(--p3);font-weight:600;color:var(--sonuk);
  transition:transform var(--h-orta) var(--e-cik)}
.soru[open] summary::after{transform:rotate(45deg)}
.soru summary:hover{color:var(--mavi-acik)}
.soru__cevap{padding:0 0 22px;max-width:60ch;color:var(--sonuk-ters);font-size:var(--p1)}
.soru__cevap p{margin-bottom:10px}

/* ══ TEKLİF ════════════════════════════════════════════════════════
   Nesne: formun kendisi. İletişim listesi (telefon, WhatsApp, e-posta,
   adres, saat) buradan KALKTI; aynı beş satır tam altındaki dip
   bilgide zaten duruyordu. Yerinde kalan üçü tek satırda. */
.teklif__sira{margin:clamp(26px,3.6vh,36px) 0 0;padding:0;list-style:none}
.teklif__sira li{display:grid;grid-template-columns:34px minmax(0,1fr);
  gap:14px;align-items:baseline;padding:13px 0;max-width:42ch;
  border-top:1px solid var(--cizgi-ters);font-size:var(--p1);color:#D7DDE8}
.teklif__sira b{font-variant-numeric:tabular-nums;font-size:var(--p0);
  font-weight:700;letter-spacing:.1em;color:var(--sonuk-ters)}
/* Üç dönüşüm yolu tek satırda, ayraçları noktayla. */
.teklif__hat{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;
  margin-top:clamp(18px,2.6vh,26px);font-size:var(--p1)}
.teklif__hat a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--mavi-acik);text-underline-offset:4px;overflow-wrap:anywhere}
.teklif__hat a:not(:last-child)::after{content:'·';margin-left:20px;color:#FFFFFF54}

.tuzak{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* ══ DAR EKRAN ═════════════════════════════════════════════════════ */
@media (max-width:1020px){
  /* Sahne tek sütuna iniyor: solda metin sağda nesne düzeni 1020 px'in
     altında iki sütunu da eziyor. Yükseklik de serbest kalıyor;
     `100svh` burada içeriği sıkıştırmaktan başka bir şey yapmıyor. */
  .sahne__ic{grid-template-columns:minmax(0,1fr);min-height:0;
    padding-block:clamp(56px,9vh,96px)}
  .sahne__giris h2{max-width:none}
  .sahne__aciklama,.sahne__ek{max-width:56ch}
  .sahne__bas{grid-template-columns:minmax(0,1fr)}
  .teklif__sira li{max-width:none}
  .soru__cevap{max-width:none}
}

@media (max-width:900px){
  /* Film sahnesi de kare dizileriyle aynı yere düşüyor: üstte metin,
     altta kare. Sütun oranı burada iş görmüyor. */
  /* Telefonda kare ALTTA ve perdenin TAMAMINI dolduruyor. Eski kural
     `max-height:32svh` diyordu; kare `position:absolute;inset:0`
     olunca o sınır kareyi perdenin üst 270 px'ine hapsetti ve altında
     200 px'lik boş bir kutu kaldı. Ölçüldü, gözle değil. */
  .hareket .film__sahne{grid-template-columns:minmax(0,1fr);
    align-content:center;gap:clamp(12px,2.4vh,22px);padding:0}
  .hareket .film__ic{grid-column:1;grid-row:1;padding-inline:var(--kenar)}
  .hareket .film__perde{grid-column:1;grid-row:2;height:min(58svh,520px)}
  .hareket .film__kare{max-height:none}
  .hareket .film__yazi{right:var(--kenar);padding-left:var(--kenar);
    bottom:clamp(20px,3vh,34px)}
  /* Kare telefonda iki kenara da değiyor; karartma yalnız altta. */
  .hareket .film__kare::after{
    background:linear-gradient(0deg,#060D1EF7 0%,#060D1EB8 24%,#060D1E38 46%,#060D1E00 62%)}
  .hareket .film__ray{margin-top:clamp(14px,2vh,20px)}
  .film__ic h2{max-width:none}
}

/* FİLM SAHNESİ MENÜNÜN ALTINDAN BAŞLIYOR (telefon ve tablet dikey).
   `top:0` iken bölüm etiketi logonun arkasında, adım yazısı telefonda alt
   çubuğun altında kalıyordu (iPhone SE3: yazının altı 611, çubuk 612).
   Önce yalnız ≤760'a yazılmıştı; tablet dikeyde sahnenin üstü menünün
   altında, alt yarısı boş kalıyordu (28 Eylül, tablet incelemesi). Sahne
   menünün altındaki alana oturuyor, kare kalan boyu dolduruyor. `ana.js`
   ilerlemeyi sahnenin kendi `top` değerinden okuyor. */
@media (max-width:900px){
  .hareket .film__yol{height:calc(100svh - var(--nav) + var(--adet) * max(.55 * 100svh, 480px))}
  .hareket .film__sahne{top:var(--nav);height:calc(100svh - var(--nav));
    padding-top:14px;padding-bottom:24px;
    grid-template-rows:auto minmax(0,1fr);align-content:stretch}
  .hareket .film__perde{height:auto;min-height:0;align-self:stretch}
}
@media (max-width:760px){
  /* Çapa payı, gövde alt dolgusu ve el altı çubuğu `dil.css`te; burada
     ikinci bir kopyası vardı ve ikisi ayrı ayrı bozuluyordu (mavi hücre). */
  /* Telefonda sahnenin altında el altı çubuğu var (bkz. ≤900 bloğu). */
  .hareket .film__sahne{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* Alt dolgu ŞART: bölüm `100svh` yüksekliğinde, el altı çubuğu ise
     ekranın alt 70 px'ini kaplıyor. Ölçü listesi tam oraya denk
     geliyordu: "90 - 95.000 m³/h" satırı ilk ekranda çubuğun
     altında kalıyor, yalnız başlıkları görünüyordu. */
  .acilis{padding-top:96px;padding-bottom:78px}
  /* Dar ekranda 16:9 kare dikey kırpılıyor ve görünen pencere genişliğin
     yalnızca dörtte biri kadar: `60%` odakta kanalın gövdesi kalıyordu,
     havanın döküldüğü menfezler kadrajın dışındaydı. Pencere sağa
     kaydırıldı; poster ile hava katmanı AYNI değeri almalı. */
  .acilis__kare img,.acilis__hava{object-position:86% 50%}
  .acilis__olcu{grid-template-columns:repeat(3,auto);gap:0 clamp(14px,4.5vw,28px)}
  .acilis__olcu dd{font-size:var(--p2)}
  /* Dar ekranda katalog sayıların altında, kendi satırında. */
  .acilis__olcu-katalog{grid-column:1/-1;margin-top:16px}
  .acilis__olcu-katalog .katalog-bag{display:flex}
  .isler{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* İki sütunda kare 195 px'e iniyor; üç satırlık künye fotoğrafın
     yarısını yiyor. Özet düşüyor, debi ve ad kalıyor. */
  .is__ozet{display:none}
  /* Panodaki iki sütunluk giriş ızgarası: taban alanı ve tavan
     yüksekliği yan yana 150 px'e iniyordu. */
  .pano__giris{grid-template-columns:minmax(0,1fr)}
  .pano__model{flex-direction:column;align-items:stretch}
  .pano__model .dg{width:100%}
}

/* 320-430 px · en dar telefonlar. */
@media (max-width:430px){
  .isler{grid-template-columns:minmax(0,1fr)}
  .is__kare{aspect-ratio:4/3}
  .is__ozet{display:-webkit-box}
  .sahne__dg .dg,.acilis__dg .dg{max-width:100%}
  .teklif__hat{gap:0}
  .teklif__hat a{flex-basis:100%}
  .teklif__hat a:not(:last-child)::after{content:none}
}

@media (max-width:380px){
  .acilis__olcu{grid-template-columns:repeat(2,auto)}
  .acilis__olcu div:nth-child(3){display:none}
}

/* ══ GİZLE–AÇ ÇİFTLERİ ═════════════════════════════════════════════
   Her gizleyen kuralın hemen altında onu açan kural var ve ikisi de
   `html.hareket` altında. Betik `hareket` sınıfını ancak gözlemciyi
   kurduktan sonra ekliyor; eklenmezse bu blok hiç uygulanmıyor. */
.hareket .acilis .cik>span,
.hareket .sahne .cik>span{transform:translateY(112%);
  transition:transform var(--y-giris-sure) var(--y-giris);
  transition-delay:calc(var(--n,0) * var(--s-adim))}
.hareket .gor .cik>span{transform:none}

/* NESNE tek parça olan bölümlerde bir bütün olarak giriyor
   (hesap panosu, aileler panosu, teklif formu); nesnesi bir LİSTE
   olanlarda satır satır giriyor (saha kareleri, sorular). İç içe iki
   dönüşüm olmasın diye ikisi aynı anda değil. */
.hareket .acilis__giris,.hareket .acilis__kesif,.hareket .acilis__dg,.hareket .acilis__olcu,
.hareket .sahne .etiket,.hareket .sahne__aciklama,.hareket .sahne__ek,
.hareket .sahne__dg,
.hareket .hesap .sahne__nesne,.hareket .teklif .sahne__nesne,
.hareket .teklif__sira,.hareket .teklif__hat,
.hareket .dizi__kiyas,
.hareket .is,.hareket .soru,.hareket .nerede__satir,.hareket .vitrin__madde,
.hareket .alt__bas,.hareket .alt__ust{
  /* 24 px'ti ve hiç fark edilmiyordu: gözün hareketi görmesi için
     mesafe punto yüksekliğinden büyük olmalı. */
  /* GİRİŞ ARTIK YAYLA. 820 ms'lik düz bir eğriydi: bölüm ekranı
     kaplarken hâlâ yarı görünmez duruyordu ve ziyaretçi boş bir
     ekrandan kaydırıyordu. Yay 691 ms'de yerine oturuyor ve hedefi
     birazcık aşıyor; hem daha kısa hem daha canlı. Opaklık yayla
     salınmamalı (yanıp sönerdi), o yüzden o düz ve daha hızlı. */
  opacity:0;transform:translateY(58px);
  transition:opacity var(--h-orta) linear,
             transform var(--y-giris-sure) var(--y-giris);
  transition-delay:calc(var(--n,0) * var(--s-adim));
}
.hareket .gor .acilis__giris,.hareket .gor .acilis__kesif,.hareket .gor .acilis__dg,.hareket .gor.acilis .acilis__olcu,
.hareket .gor .etiket,.hareket .gor .sahne__aciklama,.hareket .gor .sahne__ek,
.hareket .gor .sahne__dg,.hareket .gor .sahne__nesne,
.hareket .gor .teklif__sira,.hareket .gor .teklif__hat,
.hareket .gor .dizi__kiyas,
.hareket .gor .is,.hareket .gor .soru,.hareket .gor .nerede__satir,.hareket .gor .vitrin__madde,
.hareket .gor .alt__bas,.hareket .gor .alt__ust{opacity:1;transform:none}

/* Açılış karesi yüklenir yüklenmez nefes alır; tek sonsuz hareket adı. */
/* Açılış karesi yalnız EKRANDAYKEN süzülüyor. Sayfanın dibindeyken de
   dönüyordu; baskın film karesiyle birlikte aynı anda iki tam ekran
   görsel ölçekleniyor ve 32 ms üstü kareler çıkıyordu. */
.hareket .acilis__kare{animation:acilisGiris var(--h-acilis) var(--e-cik) both}
.hareket .acilis__kare img{animation:nefes var(--s-nefes) var(--e-yumusak) infinite alternate;
  animation-play-state:paused}
.hareket .acilis.ekranda .acilis__kare img{animation-play-state:running}
/* Hava katmanı geldiyse süzülme DURUR. İki sebep: ekran başına tek sürekli
   hareket kuralı, ve daha sertesi, poster süzülürken video süzülmediği için
   şeritler kanalların üstünden kayardı. Süzülme yedek hareket: video
   inmediyse ya da otomatik oynatma reddedildiyse kare yine de yaşıyor. */
.hareket .acilis.havali .acilis__kare img{animation:none}
/* Baskın film karesi de süzülüyor. Yalnız BASKIN olan: dördü birden
   dönerse ekran başına bir sürekli hareket kuralı bozulur. */
/* `will-change` ŞART: süzülen kare tam ekran ve %26'ya kadar
   büyüyor. Kendi katmanına alınmazsa her karede yeniden taranıyor ve
   32 ms üstü kareler çıkıyor (ölçüldü: 0 → 5, geri 0). */
.hareket .film__adim[data-ac] .film__kare img{
  animation:nefes var(--s-nefes-2) var(--e-yumusak) infinite alternate;
  animation-play-state:paused;
  will-change:transform;backface-visibility:hidden}
/* Açılış karesi gibi film de yalnız EKRANDAYKEN süzülüyor. Açılıştaki
   kural konurken film unutulmuştu: sayfanın en başında, film daha
   ekranda değilken tam ekran bir görsel boşuna ölçekleniyordu ve
   ekran başına tek sürekli hareket kuralı ilk ekranda zaten
   bozuluyordu. Bunu gören `butce.mjs` videoyu saymaya başlayınca oldu. */
.hareket .film.ekranda .film__adim[data-ac] .film__kare img{animation-play-state:running}
/* Hava katmanı oynayan karede süzülme DURUR: poster ölçeklenirken
   video ölçeklenmiyor ve hava bacanın üstünden kayıyor. Açılışta
   da aynı kural var, sebebi de aynı. */
.hareket .film__adim.havali .film__kare img{animation:none}
.hareket .acilis__kare img{will-change:transform;backface-visibility:hidden}

/* ── kaydırma çizgisi · sayfanın tepesinde, her zaman hareketli ──── */
.ilerle{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;
  background:var(--mavi-acik);transform:scaleX(var(--p,0));transform-origin:left center;
  pointer-events:none}


/* Başlığın ikinci satırı birinciden az sonra çıkar. */
.hareket .cik+.cik>span{transition-delay:var(--s-adim)}

/* ══ KARE DİZİSİ · kaydırmayla oynayan ürün animasyonu ══════════════
   Sayfanın istediği şey buydu: bölüm bir fotoğraf değil bir hareket,
   ve hareketi kullanıcı sürüyor.

   Yol 190vh: 36 kare için kare başına ~5vh düşüyor. Daha kısa yolda
   hızlı kaydırmada basamaklı görünüyor, daha uzunda sayfa uzuyor. */
.dizi{position:relative;background:var(--gece);color:#fff}
/* KAYDIRMA BÜTÇESİ · SAHNENİN BOŞLUĞU BOŞLUK DEĞİL, ANİMASYONUN PİSTİ.
   190vh'ten 130vh'e indirilmişti çünkü ekran görüntüsünde bölümün
   büyük kısmı boş görünüyor. Ölçünce anlaşıldı: 130vh'de kaydırma
   menzili 270 px ve 36 kare oraya sığıyor, yani KARE BAŞINA 7,5 PX.
   O eşikte hızlı kaydırmada kare atlıyor, yavaşta basamaklı
   görünüyor; sayfanın en beğenilen parçası bozuluyor.
   Ölçülen eşik 14 px/kare. 170vh onu 17,5 px'e çıkarıyor.
   Durağan karede "boş" görünen yer, animasyonun oynadığı yerdir.

   PIKSEL TABANI, film yolundaki ile aynı sebeple. 170vh eşiği yalnız
   900 px'lik ekranda tutuyordu: 700 px'te menzil 490 px'e iniyor ve
   36 kare için 13,6 px/kare ediyor, yani YUKARIDAKİ KENDİ EŞİĞİMİZİN
   ALTI. Kaydırma girdisi ekran boyuyla küçülmediği için oran tek
   başına yetmiyor. Taban = 36 kare x 14 px = 504 px menzil. */
.dizi__yol{position:relative;height:max(170vh, calc(100vh + 504px))}
/* Hava sahnesinde kare SOLDA, yazi SAGDA: iki dizi arka arkaya ayni
   duzende gelirse sayfa tekrar ediyor. */
.hava .dizi__kare{grid-column:1;grid-row:1}
.hava .dizi__ic{grid-column:2;grid-row:1;justify-self:end}
/* `align-content` SART: tek satirlik izgara 100svh sahnenin tepesine
   yapisiyordu, altinda yarim ekran bosluk kaliyordu. `align-items`
   ogeyi satirin icinde ortaliyor, satiri sahnede degil. */
/* KARE KENARA TAŞIYOR. Ürün renderi 720 px genişliğinde bir kaynak;
   kapsayıcı içinde 590 px'e sıkışıyor ve etrafında bir ekran boyu boş
   kalıyordu (ölçüldü: üstte 350 px, altta 240 px). Sütun pencerenin
   kenarına kadar uzayınca render 740 px'e çıkıyor, yani neredeyse
   kendi çözünürlüğünde; büyütme yok, boşluk da yok.
   Yön dönüşümlü: imalat sağ, debi sol, bakım sağ. Aynı düzen üç kez
   arka arkaya gelirse sayfa kendini tekrar ediyor. */
.dizi__sahne{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  align-items:center;align-content:center;column-gap:clamp(20px,4vw,56px);
  /* OLUK SAHNEDE, SÜTUNDA DEĞİL. `--oluk` içindeki `100%`
     kullanıldığı yerin kapsayıcısına göre çözülüyor; sütuna yazınca
     yüzde sütunun genişliğine vuruyor ve değer `--kenar`a düşüyordu
     (ölçüldü: başlık x=72, sayfanın geri kalanı x=132). Sahne tam
     genişlikte olduğu için yüzde orada pencereyi görüyor. */
  padding-inline:var(--oluk)}
/* `.hava` sahnesi AYNAYDI: fotoğraf solda ekran kenarına, yazı sağda
   `--oluk`ta biterdi. Artık iki sahne de iki yanından `--oluk`
   aldığı için ayrı bir kural gerekmiyor; sütun sırası zaten
   `.hava .dizi__kare{grid-column:1}` ile dönüyor. */
/* GENİŞ EKRANDA FAZLA GENİŞLİK FOTOĞRAFA GİDİYOR, METNE DEĞİL.
   Sütunlar `1fr / 1,12fr` oranındaydı, yani ekran büyüdükçe METİN
   SÜTUNU da büyüyordu. Ama metnin içeriği sabit (`h2` 15ch, paragraf
   36ch), o yüzden blok sütunun içinde küçük bir ada gibi kalıyor ve
   aradaki boşluk ekranla birlikte açılıyordu. Ölçüldü, 2560'ta
   `hava` sahnesinde fotoğrafla metin arasında 649 px ölü bant vardı
   (`montaj`da aynı boşluk 56 px). Müşterinin "bazı bölümler ortalı
   durmuyor" dediği şey bu.

   1600'den sonra metin sütunu 640 px'te sabitleniyor (tam 1600'deki
   değeri, yani kırılma noktasında sıçrama yok) ve kalan her piksel
   fotoğrafa gidiyor. Fotoğraf genişlikten faydalanıyor, metin
   faydalanmıyor. */
@media (min-width:1600px){
  .dizi__sahne{grid-template-columns:minmax(0,640px) minmax(0,1fr)}
  .hava .dizi__sahne{grid-template-columns:minmax(0,1fr) minmax(0,640px)}
}
/* Betiksiz hâl: son kare duruyor, sayfa eksiksiz okunuyor. */
.dizi__kare{grid-column:2;grid-row:1;position:relative;line-height:0}
.dizi__ilk,.dizi__tuval{width:100%;height:auto;max-height:84svh;object-fit:contain}
.dizi__tuval{display:none}
/* Karenin lacivert zemini sayfanınkinden bir tık açık; köşeler
   yumuşatılmazsa fotoğrafın dikdörtgeni seçiliyor. `mask-image`
   canvas üzerinde tutmadı, karartma ayrı katman olarak konuyor. */
/* Karartma artık YALNIZ İÇ YANDA ve üst/altta. Dış yan pencereye
   değiyor; orada karartma olursa kare kenara "değmiyor", kenardan
   kaçıyor gibi duruyor ve taşmanın bütün etkisi kayboluyor. */
.dizi__kare::after{content:'';position:absolute;inset:-1px;pointer-events:none;
  background:
    radial-gradient(136% 128% at 50% 46%,#060D1E00 54%,#060D1EC4 100%),
    linear-gradient(90deg,var(--gece),#060D1E00 14%),
    linear-gradient(180deg,var(--gece),#060D1E00 10%,#060D1E00 90%,var(--gece))}
.hava .dizi__kare::after{
  background:
    radial-gradient(136% 128% at 50% 46%,#060D1E00 54%,#060D1EC4 100%),
    linear-gradient(270deg,var(--gece),#060D1E00 14%),
    linear-gradient(180deg,var(--gece),#060D1E00 10%,#060D1E00 90%,var(--gece))}
/* Poster ilk kare gelene kadar duruyor: `hareket` sinifi eklenir
   eklenmez gizlenirse aradaki boslukta bos tuval goruluyor. */
.hareket .dizi.yuklendi .dizi__ilk{display:none}
.hareket .dizi.yuklendi .dizi__tuval{display:block}
.dizi:not(.yuklendi) .dizi__tuval{display:none}
/* 3D KOLU (9 Ekim): `montaj.js` kare dizisinin yerine WebGL tuvali koyuyor.
   Kareyle aynı yer ve oran; hareket azaltılmışsa da görünür (fan bütün durur). */
.dizi__uc{display:none;width:100%;aspect-ratio:16/10;max-height:76svh}
.dizi.uc-boyut .dizi__ilk,.dizi.uc-boyut .dizi__tuval{display:none!important}
.dizi.uc-boyut .dizi__uc{display:block}
.dizi.uc-bekle:not(.uc-boyut) .dizi__ilk{visibility:hidden}
.dizi.uc-bekle:not(.uc-boyut) .dizi__tuval{display:none!important}
/* MASAÜSTÜNDE 3D BÜTÜN SAHNEYİ KULLANIYOR (Yusuf, 9 Ekim: "alan yetmiyor").
   Sağ sütun ~640x400 px'ti; ayrık fan ~2,4 m boyunda, sığmak için küçülüyordu.
   Tuval sahnenin tamamı, metin üstünde; model `montaj.js`'te kadrajın sağına
   kaydırılıyor (`setViewOffset`). Solda okuma için karartma. */
@media (min-width:901px){
  /* grid-area:auto ŞART: ızgaradaki mutlak öğe `inset:0`ı kendi sütununa göre
     alıyordu (724x617 kaldı, betik onu telefon sanıp masaüstü ayarını hiç kullanmadı). */
  .dizi.uc-boyut .dizi__kare{position:absolute;inset:0;z-index:0;grid-area:auto}
  .dizi.uc-boyut .dizi__uc{height:100%;aspect-ratio:auto;max-height:none}
  .dizi.uc-boyut .dizi__ic{position:relative;z-index:1}
  .dizi.uc-boyut .dizi__kare::after{background:
    linear-gradient(90deg,var(--gece) 0%,#060D1EB3 28%,#060D1E00 46%),
    linear-gradient(180deg,var(--gece),#060D1E00 12%,#060D1E00 88%,var(--gece))}
}
/* `max-width:32ch` govde puntosuna gore ~290 px ediyordu; 58 px'lik
   baslik orada dort satira boluyordu. Genislik sutundan gelsin,
   sinir yalniz paragrafta olsun. */
.dizi__ic{grid-column:1;grid-row:1;position:relative;z-index:2}
.dizi__ic h2{font-size:var(--p5);line-height:.98;letter-spacing:-.03em;
  font-weight:800;max-width:15ch;text-wrap:balance}
.dizi__not{margin-top:18px;font-size:var(--p2);color:var(--sonuk-ters);
  max-width:36ch}
/* Filtre karşılaştırması: bölümün sorduğu soruya üç satırlık cevap. */
.dizi__kiyas{margin-top:22px;border-top:1px solid var(--cizgi-ters);max-width:40ch}
.dizi__kiyas div{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);
  gap:6px 18px;padding:12px 0;border-bottom:1px solid var(--cizgi-ters)}
.dizi__kiyas dt{font-size:var(--p1);font-weight:800;letter-spacing:-.01em}
.dizi__kiyas dd{margin:0;font-size:var(--p1);color:var(--sonuk-ters);line-height:1.45}
@media (max-width:900px){.dizi__kiyas div{grid-template-columns:minmax(0,1fr)}}

/* Sahnenin altındaki tek bağlantı. Satır kutusu 44 px: cümle içinde
   değil, kendi başına duran bir hedef. */
.dizi__bag{margin-top:24px;font-size:var(--p1)}
.dizi__bag a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--mavi-acik);text-underline-offset:4px}
/* Parça sayacı: kaydırdıkça kaç parçanın yerine oturduğunu söylüyor.
   Hareketin bir SAYI'ya bağlanması onu süs olmaktan çıkarıyor. */
/* Sayaç artık iki şey söylüyor: kaçıncı parça ve HANGİ parça. */
.dizi__sayac{margin-top:26px;display:flex;align-items:baseline;gap:12px;
  font-size:var(--p1);color:var(--sonuk-ters);font-variant-numeric:tabular-nums}
.dizi__sayac b{font-size:var(--p4);color:var(--mavi-acik);font-weight:800}
.dizi__parca{font-size:var(--p35);font-weight:700;letter-spacing:-.02em;color:#fff}
/* ÖLÇÜ SAYACI · "11.500 m³/h · hesabınızdaki debi" tek satıra
   diziliyordu: telefonda 370 px'e sığmayıp sarıyor ve "debi" tek
   başına ikinci satıra, x=103'e yetim düşüyordu. Birim artık sayıdan
   kopmuyor (ikisi bir kutuda, `nowrap`), açıklama ise bilinçli olarak
   alt satırda ve bir künye gibi küçük. Böylece sayı gerçekten sayfanın
   en büyük rakamı oluyor, yanındaki yazıyla boy ölçüşmüyor. */
.dizi__sayac--olcu{flex-direction:column;align-items:flex-start;gap:6px}
.dizi__olcu{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.dizi__sayac--olcu b{font-size:var(--p5);line-height:.95;letter-spacing:-.035em}
.dizi__olcu i{font-style:normal;font-size:var(--p2);font-weight:700;
  color:var(--sonuk-ters)}
.dizi__sayac--olcu .dizi__parca{font-size:var(--p1);font-weight:600;
  letter-spacing:0;color:var(--sonuk-ters)}
/* Canlı hedef: hesap bölümündeki debi değişince burası da değişiyor. */
.dizi__hedef{font-variant-numeric:tabular-nums}
@media (max-width:900px){
  /* Telefonda 24 kare: 155vh menzili 464 px yapıyor, kare başına
     19 px. Aynı eşik, daha az kare. Taban = 24 x 14 = 336 px. */
  .dizi__yol{height:max(155vh, calc(100vh + 336px))}
  .dizi__ic,.hava .dizi__ic{padding-left:0;padding-right:0}
  /* `.hava .dizi__sahne` BURAYA DA YAZILMAK ZORUNDA. Masaüstünde
     hava sahnesi kareyi SOLA taşıyor (`padding:0 var(--oluk) 0 0`) ve
     o kuralın belirginliği 0,2,0; buradaki `.dizi__sahne` 0,1,0 ve
     medya sorgusu belirginliği değiştirmiyor. Sonuç: telefonda debi
     bölümünün başlığı, paragrafı ve sayacı ekranın sol kenarına
     yapışıyordu (ölçüldü: x=0, öbür iki sahne x=20).
     `--ic` bu stil sayfasinda YOK, site.css'in belirtecidir; tanimsiz
     degisken yuzunden dolgu hic uygulanmiyordu. Buranin belirteci
     `--kenar`. */
  .dizi__sahne,.hava .dizi__sahne{grid-template-columns:minmax(0,1fr);
    align-content:center;
    gap:clamp(14px,3vh,28px);padding:0 var(--kenar)}
  /* Izgara yerlesimi artik SARMALAYICIDA. Kural hala `.dizi__ilk` ve
     `.dizi__tuval`i hedefliyordu; onlar izgara ogesi olmaktan cikinca
     sarmalayici masaustu kuralindaki 2. sutunda kaldi ve telefonda
     yazi yarim sutuna sikisip kare sagdan tasti. */
  .dizi__kare,.hava .dizi__kare{grid-column:1;grid-row:1}
  .dizi__ilk,.dizi__tuval,.dizi__uc{max-height:46svh}
  .dizi__ic,.hava .dizi__ic{grid-column:1;grid-row:2;max-width:none;
    justify-self:stretch}
  .dizi__ic h2{max-width:none}
}
@media (max-width:900px){
  /* Kare dizisi sahnesi de (film kuralıyla aynı gerekçe, ≤900 bloğundan
     SONRA durmak zorunda: oradaki `padding` kısaltması alt dolguyu siliyor): "Sulu filtre" satırı çubuğun 36 px altındaydı. */
  /* `.dizi` öneki: ≤900'deki `.hava .dizi__sahne{padding}` (0,2,0) yenmeli. */
  .dizi .dizi__sahne{top:var(--nav);height:calc(100svh - var(--nav));
    padding-bottom:24px;
    grid-template-rows:minmax(0,1fr) auto;align-content:stretch}
  /* Kare KALAN yeri alıyor, metin önce yerleşiyor: sabit 46svh'lik kare
     uzun metinli sahnede (filtre kıyası) yazıyı çubuğun altına itiyordu. */
  .dizi__kare{min-height:0;height:100%;display:flex;align-items:center}
  .dizi__ilk,.dizi__tuval{width:100%;height:100%;max-height:none;object-fit:contain}
  .dizi__uc{height:100%;aspect-ratio:auto;max-height:none}
  /* Metin sıkı: bakım sahnesinde (başlık + not + üç satırlık kıyas)
     metin 555-581 px'ti, menü ile çubuk arası 427-518. Kıyas iki sütuna
     döner, aralar daralır. Yine sığmayan sahne `ana.js`te `sigmaz`
     alır ve yapışmadan akar (aşağıda). */
  .dizi__sahne,.hava .dizi__sahne{gap:12px}
  .dizi__not{margin-top:10px}
  .dizi__kiyas{margin-top:12px}
  .dizi__kiyas div{grid-template-columns:92px minmax(0,1fr);padding:8px 0;gap:2px 12px}
  .dizi__kiyas dd{line-height:1.35}
  .dizi.sigmaz .dizi__yol{height:auto}
  .dizi.sigmaz .dizi__sahne{position:static;height:auto;padding-block:48px}
  .dizi.sigmaz .dizi__ilk{display:block!important;height:auto;max-height:46svh}
  .dizi.sigmaz .dizi__tuval{display:none!important}
  .dizi.sigmaz.uc-boyut .dizi__ilk{display:none!important}
  .dizi.sigmaz .dizi__uc{height:auto;aspect-ratio:720/406;max-height:46svh}
}
/* Telefonda alt çubuk payı (tablette çubuk yok). */
@media (max-width:760px){
  .dizi .dizi__sahne{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .dizi__yol{height:auto}
  .dizi__sahne{position:static;height:auto;padding-block:var(--h-sahne, 80px)}
}


/* ══ NEREDE NE KULLANILIR ═════════════════════════════════════════
   Eski aile ekseninin yerine. Nesnesi bir LİSTE: iki sütunlu satırlar,
   kart değil; satırları üst çizgi ayırıyor. Her satırda küçük ürün
   karesi, ne işe yaradığı, nerede kullanıldığı (çip) ve aileler. */
.nerede__liste{list-style:none;margin:clamp(30px,5vh,52px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.nerede__satir{display:grid;grid-template-columns:clamp(96px,10vw,150px) minmax(0,1fr);gap:clamp(16px,2vw,26px);
  padding-block:clamp(20px,3vh,30px);border-top:1px solid var(--cizgi);align-items:start}
.nerede__f{display:block;aspect-ratio:4/3;background:var(--gece-2);border:1px solid var(--cizgi);overflow:hidden}
.nerede__f img,.nerede__f .gorselsiz{width:100%;height:100%;object-fit:contain;padding:8%}
.nerede__f .sema-akis{width:100%;height:100%;aspect-ratio:auto;background:none}
.nerede__satir h3{font-size:var(--p3);font-weight:800;letter-spacing:-.02em;line-height:1.15;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.nerede__no{font-size:var(--p0);color:var(--mavi-acik);font-weight:700}
.nerede__rozet{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--mavi);color:#fff;padding:4px 8px;border-radius:2px;align-self:center}
.nerede__ne{margin-top:8px;color:var(--sonuk-ters);font-size:var(--p1);line-height:1.5;max-width:52ch}
.nerede__yer,.nerede__aile{margin-top:12px;display:grid;grid-template-columns:6.4em minmax(0,1fr);
  column-gap:8px;align-items:baseline;font-size:var(--p0)}
.nerede__dizi{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.nerede__et{font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sonuk);padding-top:5px}
.nerede__aile .nerede__et{padding-top:0}
.nerede__cip{padding:4px 10px;border:1px solid var(--cizgi);border-radius:2px;color:#D7DDE8}
.nerede__aile a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid #FFFFFF40;padding-bottom:1px}
.nerede__aile a:hover{color:var(--mavi-acik);border-bottom-color:var(--mavi-acik)}
.nerede__aile small{color:var(--sonuk);font-weight:600;margin-left:2px}
.nerede__satir--vurgu .nerede__f{border-color:var(--mavi)}
@media (max-width:1020px){.nerede__liste{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){
  .nerede__satir{grid-template-columns:84px minmax(0,1fr);gap:14px}
  .nerede__yer,.nerede__aile{grid-template-columns:minmax(0,1fr);row-gap:6px}
}

/* ══ ELEKTROSTATİK FİLTRE · vitrin ═══════════════════════════════
   Umut: en çok talep gören ürün. Sahne düzeni; nesne ürünün kendisi,
   pano yüzeyinde büyük. Maddeler ürün kaydının açıklamasından. */
.vitrin__madde{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;max-width:52ch}
.vitrin__madde li{padding:12px 0;border-top:1px solid var(--cizgi);color:var(--sonuk-ters);font-size:var(--p1);line-height:1.5}
.vitrin__madde b{display:block;color:#fff;font-size:var(--p1);font-weight:800;margin-bottom:2px}
.vitrin__f{display:grid;place-items:center;aspect-ratio:5/4;padding:clamp(24px,5vw,72px);
  border-color:var(--mavi)}
.vitrin__f img,.vitrin__f .gorselsiz{width:100%;height:100%;object-fit:contain}

/* ═══ YORUMLAR (10 Ekim) · Google Haritalar yorumları, yatay kaydırılan şerit.
   Kartlar sayfa kenarından başlayıp sağa taşar; kaydırma-yakalama ile kart kart durur. */
.yorumlar .sahne__ic{padding-bottom:0}
.yorum__ozet{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0}
.yorum__puan{font-size:clamp(44px,5vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.yorum__ozet .yorum__yildiz{font-size:var(--p3)}
.yorum__adet{font-size:var(--p1);color:var(--sonuk)}
.yorum__yildiz{color:#FBBC04;letter-spacing:.08em}
.yorum__serit{list-style:none;margin:clamp(28px,4vh,44px) 0 0;padding:0 var(--oluk) clamp(56px,8vh,96px);
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,30vw,400px);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--oluk);
  scrollbar-width:thin;scrollbar-color:#FFFFFF33 transparent;overscroll-behavior-x:contain}
.yorum{scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;
  padding:clamp(20px,2.2vw,28px);background:var(--gece-2);border:1px solid var(--cizgi);border-radius:3px}
.yorum__ust{display:flex;justify-content:space-between;align-items:center;margin:0;font-size:var(--p1)}
.yorum__zaman{font-size:var(--p0);color:var(--sonuk)}
.yorum__metin{margin:0;flex:1;font-size:var(--p1);line-height:1.6;color:#D7DDE8;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.yorum__kim{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;margin:0;
  padding-top:14px;border-top:1px solid var(--cizgi)}
.yorum__harf{grid-row:span 2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--mavi);color:#fff;font-weight:800}
.yorum__kim b{font-size:var(--p1);color:#fff}
.yorum__kim span:last-child{font-size:var(--p0);color:var(--sonuk)}
@media (max-width:760px){.yorum__serit{grid-auto-columns:82vw}}