/* ══════════════════════════════════════════════════════════════════
   ANTALYA AVS FAN · stil sayfası
   22 Eylül 2026 · sıfırdan yazıldı

   ÖNCEKİ SÜRÜM NEDEN ATILDI: `stil.css` 2560 satıra çıkmıştı ve on
   turluk yamanın üst üste binmesinden oluşuyordu. Aynı işi yapan altı
   ayrı kart bileşeni, birbirini ezen `@media` blokları, otuz ayrı süre
   değeri. Üstüne yazılan her düzeltme bir öncekini kovalıyordu ve
   müşteri her seferinde "aynı" diyordu. Haklıydı: iskelet değişmiyordu.

   YÖN: açık, editoryal, endüstriyel. Türkiye'deki havalandırma
   sitelerinin neredeyse tamamı koyu mavi gradyan; ayrıca firmanın ürün
   fotoğrafları aydınlık zeminde, saha fotoğrafları gündüz çekilmiş.
   Kâğıt gibi bir zeminde ikisi de doğru duruyor.

   İLKELER
   1. Ekran başına tek fikir. Kart yok; ayırıcı olarak yalnız saç teli
      kalınlığında çizgi.
   2. Başlık ya devasa ya yok. Aradaki punto yok.
   3. Fotoğraf kutuya girmez, kenardan kenara.
   4. Hareket kararlıdır: kısa mesafe, kısa süre, sert yavaşlama.
      Kendi kendine yalnız hava akar.
   ══════════════════════════════════════════════════════════════════ */

/* ORTAK DİL AYRI DOSYADA: `varlik/dil.css`. Belirteçler, yazı tipi,
   temel sıfırlama, kapsayıcı, tipografi, düğme, ALAN bileşeni, PANO
   cihazı, ÜST MENÜ, dip bilgi ve el altı çubuğu orada; ana sayfa da
   iç sayfalar da oradan geliyor. Bu dosya YALNIZ iç sayfalara ait
   olanı taşır ve `dil.css`ten SONRA yüklenir.

   ESKİ SÖZLÜK. Bu dosya `--kagit`, `--koyu`, `--ic`, `--e-giris`
   adlarıyla yazılmıştı; adlar `dil.css`te takma ad olarak duruyor ve
   DEĞERLERİ oradan geliyor, yani iki dosya artık ayrışamaz.
   Yeni kural yazarken `--gece`, `--kenar`, `--e-cik` kullanılır. */

:root{
  /* İç sayfalara özgü tek ölçü: bölüm arası. */
  --ara:clamp(56px,8vh,112px);
}

/* Üst menü `dil.css`te: ana sayfa da artık AYNI `menu()` çıktısını
   basıyor. Eskiden ana sayfanın kendi `<header class="ust">`i vardı
   ve telefonda menüsü HİÇ YOKTU (bağlantılar `display:none`du,
   hamburger de yoktu); iç sayfalarda vardı. */

/* ── alt bilgi `dil.css`te ────────────────────────────────────────
   BURADA BİR KOPYASI DURUYORDU ve `dil.css`ten SONRA yüklendiği için
   onu eziyordu. Sonuç ölçüldü: aynı işaretleme ana sayfada 913 px,
   iç sayfalarda 1.244 px (+331). İlçe ayraçları da burada eski
   yazımdaydı (`inline-block` + dikey dolgu), nokta taban çizgisinin
   altına düşüyor ve dokuz ilçe tek bir yapışık dizeye dönüşüyordu.
   Ziyaretçi ana sayfadan ürün sayfasına geçince BAŞKA BİR SİTENİN
   dip bilgisini görüyordu. Kopya silindi; tek kaynak `dil.css`.

   DERS: ortak bir bloğu üçüncü dosyaya taşırken eskisini silmek
   yetmiyor, SİLİNDİĞİNİ ÖLÇMEK gerekiyor. */

/* ── bölüm iskeleti ────────────────────────────────────────────── */
.bolum{padding-block:var(--ara)}
.bolum--ters .etiket,.bolum--ters .giris,.bolum--ters .sonuk{color:#FFFFFF9E}
.bolum__bas .etiket{margin-bottom:18px}
@media (max-width:860px){.bolum__bas{grid-template-columns:minmax(0,1fr)}}

/* Kenardan kenara görsel: kabın içindeyken bile taşar. */

/* ── giriş hareketi ────────────────────────────────────────────── */
/* Kısa mesafe, kısa süre, sert yavaşlama. Önceki sürümde 16 px / .60s
   idi ve fark edilmiyordu; yavaş hareket görünmez hareket. */
/* GİRİŞ `translate` İLE, `transform` İLE DEĞİL.
   İkisi ayrı CSS özelliği ve birbirinin üstüne biniyor: eskiden giriş
   `transform:none` yazıyordu ve `html.js .ac.gorundu` (0,3,1) `.tilt`i
   (0,1,0) eziyordu — kart hiç eğilmiyordu, sınıf duruyor ama hiçbir
   şey yapmıyordu. Artık giriş `translate`, eğilme `transform`; ikisi
   birlikte uygulanıyor ve kimse kimseyi ezmiyor. */
html.js .ac{opacity:0;translate:0 22px}
html.js .ac.gorundu{opacity:1;translate:none;
  transition:opacity var(--h-orta) var(--e-giris),
             translate var(--y-giris-sure) var(--y-giris);
  transition-delay:calc(var(--i,0) * 50ms)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js .ac{opacity:1;translate:none}
}
body.duruk .ac{opacity:1;translate:none}

/* ══════════════════════════════════════════════════════════════════
   ANA SAYFA
   ══════════════════════════════════════════════════════════════════ */

/* ── 01 · hero ─────────────────────────────────────────────────────
   Açık sayfanın hero'su buradaydı: fotoğrafın ALTINDA duran iki sütunlu
   bir yazı bloğu. Ana sayfa sahnelere geçince markup'tan kalktı, kuralı
   da burada durmasın. Akış yolları (`.h-hat`, `.h-akis`) kaldı, onları
   yeni açılış sahnesi kullanıyor. */

/* Gösterge: kart değil, ölçü aleti okuması. */
/* Satır aralığı yoktu: telefonda iki sıraya düşünce "MOTOR GÜCÜ" ile
   üstündeki değer üst üste biniyordu. */
.olcu{display:flex;flex-wrap:wrap;gap:16px clamp(20px,2.6vw,42px);
  border-top:1px solid var(--cizgi);padding-top:14px;margin-top:6px}
.olcu div{padding-right:clamp(24px,3vw,48px)}
.olcu dt{font-size:var(--p0);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sonuk)}
/* Sayılar --p4'teydi (36 px) ve başlıkla yarışıp sahneyi 100svh'in
   dışına taşırıyordu. Burada bir alet okuması, manşet değil. */
.olcu dd{margin:3px 0 0;font-size:var(--p2);font-weight:800;letter-spacing:-.005em;
  font-variant-numeric:tabular-nums}
.olcu dd small{font-size:var(--p1);font-weight:600;color:var(--sonuk)}

/* Ürün aileleri eskiden yapışkan fotoğraflı bir listeydi. Yeni sahnede
   her aile ekranın içinde kendi başına duruyor; o listenin kuralları
   `.aile` adını yeni bileşenle paylaşıp çakışıyordu, kaldırıldı. */

/* ── 03 · imalat ───────────────────────────────────────────────── */

/* ── 04 · süreç ────────────────────────────────────────────────── */
@media (max-width:900px){
  .surec{grid-template-columns:minmax(0,1fr)}
}

/* ── 05 · debi · sayı baş rolde ────────────────────────────────── */
.debi{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(32px,5vw,88px);align-items:start}
/* Alan bileşeni `dil.css`te: hesap makinesi, teklif formu ve iletişim
   formu aynı alanları kullanıyor. */
@media (max-width:900px){
  .debi{grid-template-columns:minmax(0,1fr)}
}

/* ── 06 · saha ─────────────────────────────────────────────────── */
.saha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,36px)}
.saha figure{margin:0}
.saha figcaption{padding-top:16px;margin-top:16px;border-top:1px solid var(--cizgi)}
.saha h3{font-size:var(--p3);font-weight:700}
.saha p{font-size:var(--p1);color:var(--sonuk);margin-top:6px}
@media (max-width:860px){.saha{grid-template-columns:minmax(0,1fr)}}

/* ── 07 · teklif ───────────────────────────────────────────────── */
.teklif{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,88px);align-items:start}
.kunye{margin-top:clamp(28px,4vh,48px);border-top:1px solid #FFFFFF1F}
.kunye div{padding:18px 0;border-bottom:1px solid #FFFFFF1F;
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:16px}
.kunye dt{font-size:var(--p0);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#FFFFFF8A}
/* Adres satırı `adres()` içinde bölünmez boşluklarla bağlı (sokak
   numarası satır sonunda kopmasın diye). 320 px'de o tek parça
   kabı taşırıyordu; dar ekranda kopmasına izin veriyoruz. */
.kunye dd,.iletisim__yan dd,.alt dd{overflow-wrap:anywhere}
.bolunmez{white-space:normal}
/* GERCEKTEN BOLUNMEYEN PARCA. Yukaridaki `.bolunmez` adinin tersini
   yapiyor: adres satiri `&nbsp;` ile bagli ve dar ekranda kopabilsin
   diye `normal` veriyor. Formulun carpanlari icin bunun tersi lazim. */
.tekparca{white-space:nowrap}
.kunye dd{margin:0;font-size:var(--p2)}
/* Telefon ve WhatsApp satırları 19 px yüksekliğindeydi; parmak
   hedefi 44 px'in altındaydı. */
.kunye dd a{display:inline-block;padding-block:11px}
.tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sss{margin-top:clamp(32px,5vh,64px)}
/* Akordeon hem koyu (ana sayfa) hem açık (SSS sayfası) zeminde
   kullanılıyor. Kurallar koyu için yazılmıştı; açık zeminde çizgiler ve
   +/− işareti görünmez oluyordu. Varsayılan artık açık zemin. */
.sss details{border-top:1px solid var(--cizgi)}
.sss details:last-of-type{border-bottom:1px solid var(--cizgi)}
.bolum--ters .sss details,.bol--koyu .sss details{border-top-color:#FFFFFF1F}
.bolum--ters .sss details:last-of-type,
.bol--koyu .sss details:last-of-type{border-bottom-color:#FFFFFF1F}
.sss summary{cursor:pointer;list-style:none;padding:18px 0;
  font-size:var(--p3);font-weight:700;display:flex;justify-content:space-between;gap:16px}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";font-weight:400;color:var(--sonuk)}
.bolum--ters .sss summary::after,.bol--koyu .sss summary::after{color:#FFFFFF8A}
.sss details[open] summary::after{content:"−"}
.sss p{padding-bottom:20px;color:#FFFFFF9E;max-width:64ch}
@media (max-width:900px){
  .teklif{grid-template-columns:minmax(0,1fr)}
  .kunye div{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* ══════════════════════════════════════════════════════════════════
   İÇ SAYFALAR · ortak bileşenler

   Ana sayfa sıfırdan yazıldı; iç sayfaların şablonları (ürün, kategori,
   hizmet, referans, iletişim, SSS, ilçe, içerik sayfası) aynı veri ve
   SEO yapısıyla duruyor. Onların sınıf sözlüğü yeni sisteme burada
   bağlanıyor: on bir şablonu aynı anda yeniden yazmak, bugün iki kez
   yaşandığı gibi işlev kaybı riski taşıyor.
   ══════════════════════════════════════════════════════════════════ */

/* ── bölüm ve sayfa başı ───────────────────────────────────────── */
.bol{padding-block:var(--ara)}
.bol--ustsuz{padding-top:0}
.bol--koyu{background:var(--koyu);color:#fff}
.bol--koyu .sol,.bol--koyu .etiket{color:#FFFFFF9E}
.bol--acik{background:var(--kagit-2)}
.sayfabas{padding-bottom:clamp(28px,4vh,48px)}
/* Başlık bandının sağ yarısı (%53) bomboştu. Ölçüler oraya giriyor;
   ana sayfanın açılışındaki şeritle aynı dil. */
.sayfabas__ic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  column-gap:clamp(24px,4vw,64px);row-gap:clamp(22px,3.4vh,34px);align-items:end}
.sayfabas__ic--tek{grid-template-columns:minmax(0,1fr)}
.sayfabas__sol{min-width:0}
/* TEK SATIR, KAÇ KÜNYE OLURSA OLSUN. Esnek sarmayla üç künyeden
   uzun olanı satırı dolduruyor, üçüncüsü alta düşüyor ve sağ alt
   hücre boş kalıyordu: şeridin şekli L oluyordu (`/urun/salyangoz-fan`,
   ölçüldü: boş hücre 232x47). `grid-auto-flow:column` künyeleri sayıları
   kaç olursa olsun tek satırda ve eşit tutuyor; uzun değer kendi
   hücresinde iki satıra iner, komşusunun yerini almaz. */
.sayfabas__olcu{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:clamp(16px,2.2vw,28px);row-gap:8px;
  border-top:1px solid var(--cizgi);padding-top:18px}
/* KÜNYE KUTUSU KALKIYOR, ETIKET VE DEĞER DOĞRUDAN IZGARAYA GİRİYOR.
   `display:contents` ile her `dt` birinci satıra, her `dd` ikinci satıra
   düşüyor. Böylece etiketlerden biri iki satıra çıktığında (örn.
   `/referanslar`da ortadaki) değeri 17 px aşağı kaymıyor; bütün değerler
   ikinci satırın tepesinden başlıyor. Ölçüldü: dd y = 383/400/383 idi,
   artık üçü de aynı. */
.sayfabas__olcu div{display:contents}
.sayfabas__olcu dt{font-size:var(--p0);color:var(--sonuk);letter-spacing:.1em;
  text-transform:uppercase;line-height:1.35}
.sayfabas__olcu dd{margin:0;font-size:clamp(20px,2vw,29px);font-weight:800;
  letter-spacing:-.035em;line-height:1.08;overflow-wrap:anywhere;align-self:start}
.sayfabas__olcu small{font-size:var(--p1);font-weight:700;color:var(--sonuk);margin-left:2px}
/* Ölçü şeridindeki bağlantı (telefon) 183x24'tü; parmak hedefi. */
.sayfabas__olcu a{display:inline-flex;align-items:center;min-height:44px;color:var(--mavi-acik)}
/* Değer ikiye bölünmesin ("+90 543 / 695 64 13", "95.000 / m³/h"):
   masaüstünde hücreler içeriğe göre, telefon numarası tek parça. */
.sayfabas__olcu a{white-space:nowrap}
@media (min-width:901px){
  .sayfabas__olcu{grid-auto-columns:auto}
  .sayfabas__olcu dd{overflow-wrap:normal}
  .sayfabas__olcu small{white-space:nowrap}
}
.sayfabas__yazi{font-size:var(--p3)!important;font-weight:700;line-height:1.3}
@media (max-width:900px){
  .sayfabas__ic{grid-template-columns:minmax(0,1fr);align-items:start}
  /* TELEFONDA L ŞEKLİ. `auto-fit` 350 px'te iki sütun açıyor, üç
     künyenin üçüncüsü tek başına ikinci satıra düşüyor ve sağında
     167x47'lik boş hücre kalıyordu. Dokuz iç sayfanın dokuzunda da
     aynı. İki sütun bu genişlikte hem dar hem de asla dolmuyor;
     künyeler tek sütunda, etiket solda değer sağda bir künye listesine
     dönüyor. Satır hiç boş kalmıyor ve değer için bütün genişlik var. */
  .sayfabas__olcu{grid-auto-flow:row;grid-template-rows:none;
    grid-template-columns:minmax(0,1fr);row-gap:0}
  .sayfabas__olcu div{display:flex;align-items:baseline;
    justify-content:space-between;gap:18px;padding:11px 0;
    border-bottom:1px solid var(--cizgi)}
  .sayfabas__olcu div:last-child{border-bottom:0;padding-bottom:0}
  .sayfabas__olcu dt{flex:none}
  .sayfabas__olcu dd{text-align:right;font-size:clamp(19px,5vw,26px)}
}
.sayfabas .etiket{margin:14px 0 12px}
/* GİRİŞ VE GÖVDE PARAGRAFLARINDA YETİM SON SATIR. "...teklif alın."
   satırında tek başına "alın." kalıyordu (31 px, üstündeki satır 581).
   `pretty` yalnız SON satırı düzeltiyor, paragrafın geri kalanına
   dokunmuyor; desteklemeyen tarayıcıda hiçbir şey değişmiyor. */
.sayfabas .giris{margin-top:16px;text-wrap:pretty}
.yazi p,.dizi__not,.acilis__giris{text-wrap:pretty}
/* Ekmek kırıntısı bağlantıları 19 px yüksekliğindeydi. Kutu büyümesin
   diye dikey dolgu negatif kenar boşluğuyla dengeleniyor. */
.kirinti{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;
  font-size:var(--p0);color:var(--sonuk);margin:0 0 -6px -6px}
/* Yatay dolgu kısa kırıntıyı ("Ürünler" 41 px) 44 px'e taşıyor; sola
   kayan hizayı kabın negatif kenar boşluğu geri alıyor. */
.kirinti a,.kirinti>span{display:inline-block;padding:13px 6px}
.kirinti a:hover{color:var(--murekkep)}

/* Eski başlık maskesi: satırlar artık blok, kırpma yok. */
.cizgili span{display:block}
.cizgili b{font-weight:inherit}
.it{font-style:italic}
.sol{color:var(--sonuk);max-width:56ch}

/* ── etiket/açıklama çiftleri ─────────────────────────────────────
   Metnin içinde zaten var olan yapıyı görünür kılıyor. Etiket sol
   sütunda, beyaz ve kalın; açıklama sağda, sönük. Uzun metin duvarı
   taranabilir bir listeye dönüşüyor. */
/* GRUPLAMA RİTMİ. Giriş paragrafı ile etiket/açıklama bloğu arasındaki
   boşluk on geçişin onunda 23-24 px'ti: cümle altındaki grubu açıyor
   ama üstündekini kapatıyormuş gibi okunuyordu. Metin duvarı çözülmüştü,
   gruplama çözülmemişti. Cümle artık listesine 14 px'le yapışık, bir
   sonraki gruba 40-60 px'le uzak. */
.cift{margin:14px 0 0;border-top:1px solid var(--cizgi)}
.cift + p{margin-top:clamp(40px,5vh,60px)}
/* Etiket sütunu 220'den 190'a: açıklama 375 px'ti (~48 karakter),
   yanındaki gövde paragrafı 621 (~80). Aynı sütunda 1,7 kat ölçü
   oynaması. İkisi birbirine yaklaşıyor. */
.cift div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:6px 28px;padding:14px 0;border-bottom:1px solid var(--cizgi)}
.cift dt{font-size:var(--p2);font-weight:800;letter-spacing:-.01em;color:var(--murekkep)}
.cift dd{margin:0;font-size:var(--p2);color:var(--sonuk);line-height:1.55}
@media (max-width:760px){
  .cift div{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0}
}

/* ── metin blokları ────────────────────────────────────────────── */
/* 68ch ölçülen 621 px, yani satır başına ~80 karakter: gözün satır
   başını kaybettiği aralık 75'ten sonra başlıyor. */
.yazi{max-width:60ch;font-size:var(--p2)}
/* `max-width:none` idi ve KVKK sayfasında satır 1224 px, yani
   yaklaşık 170 karakter oluyordu; sitenin diğer metin sütunları
   561-760 px. Okunabilir satır uzunluğunun üst sınırı ~75 karakter.
   "Geniş" hâlâ geniş, ama okunur. */
.yazi--genis{max-width:76ch}
.yazi h2{font-size:var(--p4);font-weight:800;letter-spacing:-.015em;
  margin:clamp(28px,4vh,44px) 0 12px}
/* İlk başlık üst boşluk almaz: ürün sayfasında "Ürün açıklaması" yan
   sütunun "Bilgi" başlığından 28-44 px aşağıda başlıyordu. */
.yazi > h2:first-child{margin-top:0}
.yazi h3{font-size:var(--p3);font-weight:700;margin:24px 0 8px}
.yazi p{margin-bottom:14px}
.yazi ul{margin:0 0 16px;padding-left:20px;list-style:disc}
.yazi li{margin-bottom:6px}
.yazi a{color:var(--mavi);text-decoration:underline;text-underline-offset:3px}

/* ── ürün / hizmet / referans kartları · kutu değil satır ─────── */
.urunler,.hizmetler,.referanslar,.ikili{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(20px,2.4vw,40px)}
/* DÖRT SÜTUNLUK IZGARADA ÜÇ ÜRÜN. `auto-fill` boş rayları da açıyor:
   `/urun/salyangoz-fan`da üç kart soldan diziliyor, sağda 268x411'lik
   bir delik kalıyordu. Dörtten az öğede sütun sayısı öğe sayısı kadar;
   kartlar genişliyor, delik kapanıyor. Telefonda kural devre dışı. */
.urunler--az{grid-template-columns:repeat(var(--adet,3),minmax(0,1fr))}
@media (max-width:900px){
  .urunler--az{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
/* SÜTUN SAYISI ÖĞE SAYISINI BÖLMELİ (27 Eylül incelemesi). `auto-fill`
   sütunu genişliğe göre seçiyor, öğe sayısına bakmıyor: `/hizmet` 9
   öğeyle 1280'de 3, 2560'ta 7 boş hücre; `/urun` 16 öğeyle 1920'de 4
   boş hücre bırakıyordu. Sabit sayılar: 9 → 3, 16 → 4 (çok genişte 8),
   5 → 5. Telefonda ve tablette `auto-fill` yerinde. */
@media (min-width:901px){
  .hizmetler{grid-template-columns:repeat(3,minmax(0,1fr))}
  .urunler:has(> :nth-child(16):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1200px){
  .urunler:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:2200px){
  .urunler:has(> :nth-child(16):last-child){grid-template-columns:repeat(8,minmax(0,1fr))}
}
/* Az kartlı ızgarada kart 2560'ta 1166 px'e büyüyor, ürün fotoğrafının
   kendi kusurları görünüyordu. Tavan 520 px, kartlar soldan. */
@media (min-width:1600px){
  .urunler--az{grid-template-columns:repeat(var(--adet,3),minmax(0,520px));justify-content:start}
}
/* ── DÖNÜŞÜM KAROSU · ızgaranın son satırındaki deliği kapatan içerik ─
   13 aile kartı dört sütuna girince son satırda tek kart kalıyor ve
   sağında 873x413'lük bir boşluk açılıyordu: "içerik bitti, şablon
   devam ediyor". Boşluğa süs koymak yerine ziyaretçinin sonraki üç
   adımı konuyor. Kart dilinden ayrılsın diye çerçeveli ve karesiz. */
.karo{display:flex;flex-direction:column;min-height:220px;
  padding:clamp(20px,2vw,28px);border:1px solid var(--cizgi);
  transition:border-color var(--h-orta) var(--e-giris),
             background var(--h-orta) var(--e-giris)}
.karo:hover{border-color:var(--mavi-acik);background:var(--gece-2)}
.karo>b{font-size:var(--p3);font-weight:700;letter-spacing:-.01em;line-height:1.2}
/* Açıklama artan yeri yutuyor; sayı ve eylem birlikte dibe oturuyor.
   Ağırlık aşağıda olmazsa kutunun ortası havada kalıyor. */
.karo>span{flex:1 1 auto;margin-top:10px;font-size:var(--p1);color:var(--sonuk)}
.karo>em{font-style:normal;margin-top:18px;font-size:clamp(28px,3.2vw,44px);
  font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--murekkep)}
.karo__yazi{font-size:var(--p35)!important;letter-spacing:-.02em!important}
.karo>em small{display:block;margin-top:8px;font-size:var(--p0);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sonuk)}
.karo>i{margin-top:16px;font-size:var(--p0);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mavi-acik);font-style:normal}
.karo>i::after{content:' \2192';letter-spacing:0}
/* KART ALTI ORTAK TABAN ÇİZGİSİ. Aynı satırdaki kartların künyesi ve
   "AİLEYİ GÖR" bağlantısı hizasızdı: açıklaması bir satır uzun olan
   kart 23 px aşağı kayıyordu ve üç satırın üçünde de görünüyordu
   (ölçüldü: `.ur__debi` y = 1017/1017/1017/1040). Açıklamayı kısaltmak
   ya da kırpmak ürün adını da tehdit ediyor; onun yerine BOŞLUK
   açıklamanın hemen altına toplanıyor. Kart ızgara satırı boyunca
   uzuyor, açıklama artan yeri yutuyor, altındaki her şey dibe oturuyor.
   Ad iki satıra çıksa da, açıklama kısa kalsa da taban aynı yerde. */
.ur,.hz,.rf,.yk{background:none;border:0;border-radius:0}
.ur,.hz{display:flex}
.ur>a,.hz>a{display:flex;flex-direction:column;flex:1;min-width:0}
.rf>a,.yk>a{display:block}
.ur__f,.hz__f{flex:none}
.ur__g{flex:1;display:flex;flex-direction:column}
.ur__g>p,.hz>a>p{flex:1 1 auto}
/* Kutu YOK: ürün fotoğraflarının zemini sayfanın zemini. Arkasına bir
   yüzey konunca fotoğrafın dikdörtgeni ortaya çıkıyor. */
/* Kart kareleri de eriyor: `dil.css` içindeki `.eriyen` ile aynı
   karartma, burada sınıf eklemeden. */
.ur__f::after,.hz__f::after,.rf__f::after,.yk__f::after,.urun-bas__f::after{
  content:'';position:absolute;inset:-1px;pointer-events:none;
  background:
    radial-gradient(128% 124% at 50% 46%,#060D1E00 48%,var(--gece) 100%),
    linear-gradient(180deg,#060D1E00 74%,var(--gece))}
/* SABİT ORAN VE SABİT SIĞDIRMA. Aynı sıradaki üç kartın görselleri
   268x327, 268x168, 268x168 çıkıyordu: 159 px yükseklik farkı ve
   yan yana iki ayrı görsel dili. Oran artık her kartta aynı ve
   görsel kutuyu KAPLIYOR, içine oturmuyor. */
/* IZGARA SATIRI İÇERİĞE GÖRE BÜYÜYORDU, ÇERÇEVEYE GÖRE DEĞİL.
   `display:grid` + `place-items:center` tek satırı `auto` bırakıyor:
   satırın boyu görselden geliyor, görselin boyu ise `height:100%` ile
   satırdan. Döngüsel yüzde CSS'te `auto`ya düşer, yani ne yükseklik ne
   `object-fit` devreye giriyordu. Ölçüldü: 268x201'lik on üç çerçevenin
   içinde görsel boyu 146 ile 327 arasında; yedisi taşıp kırpılıyor,
   altısı ortada yüzüp üstünde 19-55 px ölü bant bırakıyordu. Aynı
   sırada dört ayrı davranış.
   Izgarayla çözülmedi: `1fr` satır bile en-boy oranından türeyen
   yükseklikle güvenilir çözülmüyor (denendi, görsel yine 116-323 px
   arası çıktı). Ayrıca `picture{display:contents}` yüzünden `>` seçici
   görseli değil `<picture>`ı yakalıyor. Kesin olan tek yol
   konumlandırma: `inset:0` her zaman konumlandırılmış atanın kutusuna,
   yani 268x201'e çözülür. */
.ur__f,.hz__f,.rf__f,.yk__f{position:relative;aspect-ratio:4/3;overflow:hidden;background:none}
.ur__f img,.hz__f img,.rf__f img,.yk__f img,
.ur__f svg,.hz__f svg,.rf__f svg,.yk__f svg,
.ur__f .gorselsiz,.hz__f .gorselsiz,.rf__f .gorselsiz,.yk__f .gorselsiz{
  position:absolute;inset:0;width:100%;height:100%}
/* ZEMİNİ OLAN FOTOĞRAF KUTUYU DOLDURUR. Kesik kareler aşağıda ayrı. */
.ur__f img,.hz__f img,.rf__f img,.yk__f img{object-fit:cover;
  transition:transform var(--h-orta) var(--e-giris)}
.ur>a:hover .ur__f img{transform:scale(1.03)}
.ur__g,.hz__g,.rf__g,.yk__g{padding-top:14px;margin-top:14px;
  border-top:1px solid var(--cizgi)}
.bol--koyu .ur__g,.bol--koyu .hz__g,.bol--koyu .rf__g{border-top-color:#FFFFFF1F}
/* KART EĞİLMESİ. `.tilt` markup'ta zaten vardı ama hiçbir kurala
   bağlı değildi: sınıf duruyor, hiçbir şey yapmıyordu. İmleç kartın
   üstündeyken kart o yöne doğru en çok 3,5 derece eğiliyor; kutu
   olmaktan çıkıp bir yüzeye dönüşüyor. Açılar `ortak.js`ten geliyor,
   el çekilince yayla yerine oturuyor. Dokunmatikte hiç kurulmuyor. */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;will-change:transform;
  transition:transform var(--y-tepki-sure) var(--y-tepki)}
/* İmleç kartın üstündeyken yay devrede DEĞİL: eğim parmağı anında
   takip etmeli, yoksa el sürüklüyormuş gibi duruyor. Yay yalnız
   geri dönüşte. */
.tilt:hover{transition-duration:var(--h-kisa);transition-timing-function:linear}
/* ÜRÜN ADINDA YETİM KELİME. "Endüstriyel Alçak Basınç Salyangoz / Fan"
   diye kırılıyor ve üç kartın üçünde de son satırda tek başına "Fan"
   kalıyordu (ölçüldü: son satır 37 px, en geniş satır 349). `balance`
   satırları eşit uzunluğa dağıtıyor; kısa başlıkta hiçbir şey
   değişmiyor, uzun olanda yetim kalkıyor. */
.ur h3,.hz h3,.rf h3,.yk h3{font-size:var(--p3);font-weight:700;
  letter-spacing:-.01em;text-wrap:balance}
.ur p,.hz p,.rf p,.yk p{font-size:var(--p1);color:var(--sonuk);margin-top:6px}
/* DİKKAT: `.ur__bag` kartın TAMAMINI saran bağlantı, etiket değil
   (parca.php `kategoriKarti`). Bu listeye konunca bütün kart metni
   büyük harfli, mavi ve kalın çıkıyordu. */
/* VERİ İLE EYLEM AYRI ŞEYLER. İkisi de aynı kuralı alınca kartın
   altı tek bir dizgeye dönüşüyordu: "9.000 - 51.000 M³/H İNCELE".
   Daha kötüsü `uppercase` birimi de büyütüyordu: M³/H. Büyük M
   "mega" demek; hesapla satan bir üreticide bu bir mühendislik
   hatası, üstelik sitenin geri kalanı doğru yazıyor. */
.ur__debi{display:block;margin-top:10px;font-size:var(--p1);
  font-weight:700;color:var(--sonuk);font-variant-numeric:tabular-nums}
/* KART EYLEMİNİN ÜÇ AYRI DİLİ VARDI. `.ur` ve `.karo` mavi, büyük
   harf, oklu; `.hz` ise italik, küçük harf, beyaz, oksuz ("Detay").
   `/hizmet`te ikisi AYNI IZGARA SATIRINDA yan yana duruyor ve aynı işi
   yapan iki bağlantı iki ayrı şey gibi okunuyordu. `.hz` de aynı dile
   alındı; sitede tek bir "buraya bas" biçimi kaldı. */
.ur__g i,.yk i,.hz>a>i{display:inline-block;margin-top:8px;font-size:var(--p0);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mavi-acik);font-style:normal}
.ur__g i::after,.yk i::after,.hz>a>i::after{content:' →';letter-spacing:0}
/* `display:block` yukarıdaki `.ur>a{display:flex}` ile aynı
   belirginlikte ve SONRA geldiği için onu eziyordu. */
.ur__bag{display:flex;flex-direction:column}

/* ── TEKNİK SAHNE · model seç, sayılarını gör ─────────────────────
   Solda model listesi, sağda yalnız o modelin sayıları. Sayfanın geri
   kalanıyla aynı ızgara oranı (1 / 1,15) ve aynı cihaz (`.pano`). */
.tek{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  column-gap:clamp(20px,4vw,64px);row-gap:clamp(24px,4vh,40px);align-items:start}
.tek__sol{min-width:0;position:sticky;top:calc(var(--nav) + 72px)}
.tek__ust{font-size:var(--p0);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sonuk);margin-bottom:10px}
.tek__liste{display:flex;flex-direction:column;align-items:flex-start}
/* Etkin olan beyaz, ötekiler sönük: hangisine bakıldığı listenin
   kendisinden okunuyor, ayrı bir işarete gerek kalmıyor.
   RENK SOLUK DEĞİL JETON. Burası `#FFFFFF4D` idi, yani zemine göre
   çöken bir saydamlık: `#0B1426` üstünde 2,68:1'e düşüyordu, 21 px
   kalın yazı için eşik 3:1. Bunlar sekme düğmesi, yani model seçmeye
   yarıyor; okunmaması doğrudan satış kaybı. Sitedeki bütün ikincil
   yazı zaten `--sonuk`, o da aynı zeminde 6,3:1. Etkin olan saf beyaz
   (18,4:1) ve 6 px sağa kayıyor, fark yine apaçık duruyor. */
.tek__model{display:flex;align-items:center;min-height:44px;padding:4px 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font-size:var(--p4);font-weight:800;letter-spacing:-.025em;line-height:1.1;
  color:var(--sonuk);transition:color var(--h-kisa) linear,transform var(--h-kisa) var(--e-cik)}
.tek__model:hover{color:#FFFFFF9E}
.tek__model.etkin{color:#fff;transform:translateX(6px)}
.tek__sag{min-width:0}
.tek__panel{padding:clamp(22px,3vw,32px)}
.tek__grup + .tek__grup{margin-top:clamp(22px,3vh,30px);
  border-top:1px solid var(--cizgi);padding-top:clamp(20px,2.6vh,26px)}
/* Etiket küçük ve sönük, değer büyük ve beyaz: panodaki okuma
   şeridinin aynı dili, yalnız daha küçük ölçekte. */
.tek__cift{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:clamp(16px,2.2vw,26px);margin-top:14px}
/* 1920'de yedinci ölçü tek başına alt satıra düşüyordu. */
@media (min-width:1600px){.tek__cift{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}}
.tek__cift dt{font-size:var(--p0);color:var(--sonuk);line-height:1.35}
.tek__cift dd{margin-top:4px;font-size:var(--p3);font-weight:800;
  letter-spacing:-.02em;overflow-wrap:anywhere}
/* Tam tablolar duruyor: hem "hepsini göreyim" diyen için, hem de
   Google'ın ürün verisini okuduğu yer orası. */
.tek__tum{margin-top:clamp(28px,4vh,44px);border-top:1px solid var(--cizgi)}
.tek__tum summary{display:flex;align-items:center;min-height:52px;cursor:pointer;
  list-style:none;font-size:var(--p1);font-weight:700;color:var(--mavi-acik)}
.tek__tum summary::-webkit-details-marker{display:none}
.tek__tum summary::after{content:'+';margin-left:10px;font-size:var(--p3);font-weight:600}
.tek__tum[open] summary::after{content:'–'}
@media (max-width:900px){
  .tek{grid-template-columns:minmax(0,1fr)}
  /* Telefonda liste yatay bir şeride iniyor: dokuz model alt alta
     ekranın tamamını yiyordu ve sayılar kaydırmadan görünmüyordu. */
  .tek__sol{position:static}
  .tek__liste{flex-direction:row;gap:18px;overflow-x:auto;scrollbar-width:none;
    border-bottom:1px solid var(--cizgi);padding-bottom:4px;
    /* Sağ kenardan solan kesim: liste burada bitmiyor, kaydırılıyor. */
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .tek__liste::-webkit-scrollbar{display:none}
  .tek__model{font-size:var(--p3);white-space:nowrap;padding:6px 0}
  .tek__model.etkin{transform:none;box-shadow:inset 0 -2px 0 var(--mavi-acik)}
}

/* ── teknik tablo ──────────────────────────────────────────────── */
.teknik{margin-block:clamp(24px,3vh,40px)}
.teknik h3,.tablo-sar h3{font-size:var(--p3);font-weight:700;margin-bottom:12px}
.tablo-sar{overflow-x:auto}
/* Geniş ekranda tablo kap boyunca 2371 px'e yayılıyor, sütunlar arası
   650 px'e açılıyordu. 1440 ve altında etkisiz (kap zaten dar). */
.tablo-sar{max-width:calc(1320px + var(--genis) * .25)}
.tablo{width:100%;border-collapse:collapse;font-size:var(--p1);
  font-variant-numeric:tabular-nums}
.tablo th,.tablo td{text-align:left;padding:12px 14px 12px 0;
  border-bottom:1px solid var(--cizgi);white-space:nowrap}
.tablo thead th{font-size:var(--p0);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sonuk)}
.tablo tbody tr:hover{background:var(--kagit-2)}
.bol--koyu .tablo th,.bol--koyu .tablo td{border-bottom-color:#FFFFFF1F}
.tablo-tum{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;
  background:none;color:inherit;border:1px solid var(--cizgi);border-radius:999px;
  padding:0 18px;font-size:var(--p0);font-weight:700;cursor:pointer}
.tablo-tum:hover{border-color:var(--murekkep)}
/* Düğme yalnız dar ekranda anlamlı: geniş ekranda bütün sütunlar zaten
   görünüyor. `.tum` sınıfı ikincil sütunları geri getiriyor. */
.tablo-sar.tum{overflow-x:auto}
@media (max-width:760px){
  .tablo [data-ikincil]{display:none}
  .tablo-sar.tum [data-ikincil]{display:table-cell}
  /* TELEFONDA ASIL SÜTUN EKRAN DIŞINDAYDI (27 Eylül incelemesi): mekân
     tablosunun "Bu debiyi karşılayan aileler" sütunu x=421'de başlıyordu,
     ekran 393. Başlıklar ve bağlantı listesi (son sütun) satıra kırılıyor;
     hâlâ taşan tabloda sağ kenar soluyor, kaydırılacağını söylüyor. */
  .tablo thead th{white-space:normal;min-width:9ch}
  .tablo td:last-child:has(a){white-space:normal;min-width:16ch}
  .tablo-sar.tasiyor{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
    mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .tablo-sar.tasiyor.sonda{-webkit-mask-image:none;mask-image:none}
}
@media (min-width:761px){.tablo-tum{display:none}}

/* ── ürün sayfası düzeni ──────────────────────────────────────── */
/* Geniş ekranda (1441+) sol sütun metne göre, aşağıdaki kurala bak.
   1440 ve altında onaylı oran. */
.urun-govde{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.urun-yan{position:sticky;top:110px}
/* Yan sütundaki hizmet listesi: bağlantılar 19 px yüksekliğindeydi. */
/* IKI AYRI SEY, IKI AYRI ETIKET. `<dl>` yalnız ürün sayfasındaki
   gerçek terim/değer çiftleri için (Ürün ailesi → adı, Debi aralığı →
   sayı). Yan sütundaki hizmet/mekân/aile listeleri terim değil, düz
   bağlantı listesi; onlar `<ul>`. Önceden hepsi `<dl><dd>` idi ve
   `<dt>` hiç yoktu: 28 sayfada 46 liste, ekran okuyucuya "tanım
   listesi" diye tanıtılıp sonra tek bir tanım vermiyordu. Lighthouse
   `definition-list` denetimi bunu ilçe ve mekân sayfalarında düşürdü
   (Erişilebilirlik 96); ana sayfada görünmediği için aylarca kaçtı. */
.urun-yan h2{font-size:var(--p4);font-weight:800;letter-spacing:-.015em;margin:0 0 12px}
.urun-yan dl{margin-top:14px}
/* Terim sitenin künye dilinde: küçük, aralıklı, sönük. Değerle aynı
   ağırlıktaydı, çift okunmuyordu. */
.urun-yan dt{font-size:var(--p0);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sonuk);padding-top:12px}
.urun-yan ul{margin:14px 0 0}
/* İkinci liste başlığı (hizmet sayfasında "Diğer hizmetler", ilçe
   sayfasında "hizmetler") bir önceki listenin son çizgisine yapışıyordu. */
.urun-yan :is(ul,dl)+h2{margin-top:36px}
/* `:is(dd,li)` tek etiket kadar özgül, yani `.urun-yan dd` ile aynı
   ağırlıkta; üç kuralı ikiye katlamak yerine tek seçicide topluyor.
   `margin:0` ŞART: `dil.css` yalnız `.alt dd`yi sıfırlıyor, genel bir
   `dd{margin:0}` yok ve tarayıcı varsayılanı 40 px. */
.urun-yan :is(dd,li){margin:0;border-bottom:1px solid var(--cizgi)}
.urun-yan :is(dd,li) a{display:block;padding:13px 0;font-size:var(--p1)}
.urun-yan :is(dd,li) a:hover{color:var(--mavi)}
.urun-yan>.dg{margin-top:22px}
/* ══ ÜRÜN BAŞI ════════════════════════════════════════════════════
   BU BLOK EKSİKTİ ve 47 ürün sayfasının hepsi kabuksuz duruyordu:
   `.urun-bas__ic`, `.sayac`, `.urun-bas__f`, `.urun-galeri`, `.etkin`
   için tek kural yoktu (`arac/sinif.mjs` saydı). Başlık, debi, özet ve
   düğmeler arasında 0 px boşluk vardı, fotoğraf da sütuna girmiyordu.

   Galeride ad çarpışması vardı: CSS `.ug`yi KAPSAYICI sanıyordu
   (`.ug button{width:72px}`), markup ise `.ug`yi DÜĞMEnin kendisine
   veriyordu. `.ug img{width:100%;height:100%}` ölçüsüz bir düğmenin
   içinde çözülemeyince galeri 1224x1598 px'e şişiyordu. Adlar markup'a
   göre düzeltildi; markup değil CSS değişti, çünkü ekranda duran o. */
.urun-bas__ic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(20px,3vh,36px)}
.urun-bas h1{margin-bottom:20px}
.urun-bas .sol{margin-top:18px;max-width:50ch}
.urun-bas .dgler{margin-top:30px}
/* Debi aralığı: sayfanın tek sayısı, etiketiyle birlikte tek satır. */
.sayac{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:22px}
.sayac small{font-size:var(--p0);letter-spacing:.14em;text-transform:uppercase;color:var(--sonuk)}
.sayac em{font-style:normal;font-size:var(--p3);font-weight:800;
  letter-spacing:-.02em;color:var(--mavi-acik);font-variant-numeric:tabular-nums}
.urun-bas__f{position:relative;margin:0;min-width:0}
/* Kaynaktan büyük basılmıyor: `--kare-en` karenin kendi genişliğinin
   1,6 katı, PHP'den geliyor. Küçük kare ortalanıyor ki sütunun
   solunda tek başına asılı kalmasın. */
.urun-bas__f--kucuk{display:grid;justify-items:center}
.urun-bas__f--kucuk>picture,.urun-bas__f--kucuk>img{max-width:var(--kare-en,100%)}
.urun-bas__f--kucuk img{max-width:var(--kare-en,100%)}
.urun-bas__f img{width:100%;height:auto;display:block}
/* Zemini kesilmiş katalog fotoğrafı: kutusuz yüzer, gölgesi kendinden. */
.urun-bas__f--kesik img{filter:drop-shadow(0 24px 40px #00000059)}
.urun-galeri{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ug{width:72px;height:72px;border:1px solid var(--cizgi);border-radius:2px;
  background:var(--kagit-2);padding:0;overflow:hidden;cursor:pointer;
  transition:border-color var(--h-kisa) linear}
.ug:hover{border-color:var(--murekkep)}
.ug.etkin{border-color:var(--mavi-acik)}
.ug img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:900px){
  .urun-bas__ic{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .urun-govde{grid-template-columns:minmax(0,1fr)}
  .urun-yan{position:static}
}

/* ── akış şeması (kategori kartı görseli yoksa) ───────────────── */
.sema-akis{background:var(--kagit-2);display:grid;place-items:center;aspect-ratio:4/3}
/* SINIF ADI CAKISMASIYDI. Bu iki kural SVG çizgisi için, ama sınıf
   adı `hk` idi ve `hakkımızda` sayfasının ızgara kapsayıcısı da `.hk`.
   Sonuç: `opacity:.25` bütün Hakkımızda bloğuna iniyordu, gövde
   yazısı `#FFFFFF` yerine `#484F5C` (2,23:1), alt not `#2C3548`
   (1,49:1) olarak basılıyordu. Yani sayfa okunmuyordu ve ne konsol ne
   de 200 bunu söylüyordu; Lighthouse `color-contrast` ile yakalandı.
   Ad `.ak` ve `.tz` ile aynı sözlüğe çekildi: `cz` = çizgi. */
/* `.cz` `.ak` `.tz` çizgi kuralları `dil.css`te: ana sayfa da kullanıyor (1 Ekim). */

/* ── iletişim sayfası ─────────────────────────────────────────────
   Form solda, doğrudan ulaşma kutusu sağda. Ana sayfadaki künye
   listesiyle AYNI SINIF ADINI taşıyordu: `.iletisim div{...}` oradaki
   tanım listesi için yazılmıştı ve buradaki her `.alan` kutusuna da
   ızgara + çizgi uyguluyordu, form dağılıyordu. */
/* Sahne oranı: solda cihaz (form), sağda künye. Ana sayfadaki
   1 / 1,15 ile aynı aile, yalnız yönü ters çünkü burada okunan şey
   değil DOLDURULAN şey baş rolde. */
.iletisim{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.iletisim__yan{min-width:0}
/* Telefon dip bilgideki gibi başlık ölçeğinde: sayfanın ikinci
   dönüşüm yolu, düğme değil rakam. */
.iletisim__tel{margin:10px 0 20px}
.iletisim__tel a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--p4);font-weight:800;letter-spacing:-.03em;color:var(--mavi-acik)}
.iletisim__yan dl{margin-top:30px;width:100%;
  border-top:1px solid var(--cizgi);padding-top:8px}
.iletisim__yan dt{font-size:var(--p0);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sonuk);margin-top:20px}
.iletisim__yan dd{margin:5px 0 0;font-size:var(--p1);line-height:1.55}
@media (max-width:1020px){
  .iletisim{grid-template-columns:minmax(0,1fr)}
}

/* ── form alanları `dil.css`te ─────────────────────────────────── */

/* ── iletişim formu bildirimi ─────────────────────────────────── */
/* `display` YOK: yukarıdaki gizleme kuralını ezip hata satırlarını
   sayfa açılışında görünür yapıyordu. */
/* Teklif sahnesinin altındaki SSS başlığı. */

/* ── teklif şeridi (iç sayfaların kapanışı) ───────────────────── */
.serit-teklif{background:var(--koyu);color:#fff;padding-block:clamp(48px,7vh,88px)}
.serit-teklif h2{font-size:var(--p5);line-height:.96;letter-spacing:-.02em;
  font-weight:800;max-width:18ch;margin-bottom:16px}
/* `h1,h2,p{margin:0}` sıfırlaması yüzünden başlıkla altındaki cümle
   arasında hiç boşluk yoktu. Bir denetim "23 px üst üste biniyor"
   demişti; o ölçüm başlık HENÜZ AÇILMAMIŞKEN (opaklık 0, kaymış)
   alınmıştı, açık hâlde çakışma yok. Yine de boşluk gerekiyordu. */
/* `.dg--ana` hariç: dolu düğmenin metni de beyaz olunca beyaz zeminde
   beyaz yazı çıkıyordu. */

/* El altı çubuğu `dil.css`te. */

/* ── patlatma sahnesi (imalat) ────────────────────────────────── */
.patlat{margin:0}
.patlat__sahne{position:relative;aspect-ratio:16/9;overflow:hidden}
.patlat__tuval{position:absolute;inset:0;width:100%;height:100%}
.patlat__taban{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity var(--h-orta) var(--e-giris)}
.patlat.bitti .patlat__taban{opacity:1}
.patlat.bitti .patlat__tuval{opacity:0;transition:opacity var(--h-orta) var(--e-giris)}
/* Etiketler adlandırdıkları parçanın üstünde duruyor. Konum vermek
   unutulmuştu: üçü de sol üst köşede üst üste biniyordu. Oranlar
   `$parca` dizisindeki kırpma alanlarından alındı. */
.patlat__etiket{position:absolute;padding:8px 12px;background:#FFFFFFF0;
  color:var(--murekkep);font-size:var(--p0);font-weight:700;opacity:0;
  transition:opacity var(--h-orta) var(--e-giris);pointer-events:none;
  max-width:min(240px,42vw)}
.patlat__etiket--kapak{left:2%;top:76%}
.patlat__etiket--kaset{left:24%;top:70%}
.patlat__etiket--cark{left:53%;top:60%}
@media (max-width:640px){
  .patlat__etiket--kapak{left:1%;top:70%}
  .patlat__etiket--kaset{left:1%;top:82%}
  .patlat__etiket--cark{left:52%;top:70%}
}
.patlat.acik .patlat__etiket{opacity:1}
.patlat__etiket small{display:block;font-weight:400;color:var(--sonuk)}
.patlat figcaption{margin-top:14px;font-size:var(--p1);color:#FFFFFF9E}

/* ── kesit çizimi ─────────────────────────────────────────────────
   Mutfağın izometrik havalandırma kesiti. Sınıf adları `kesit.svg`'den
   BİREBİR alınır; bir kez uydurulmuş (.k-oda, .k-kutu) ve kırk beş path
   varsayılan siyah dolguyla kara bir kütleye dönüşmüştü.

   Çizim zaten lacivert için üretilmişti; sayfa kâğıda çevrilince gri
   bir teknik resme dönüştürülmüştü. Sayfa geceye dönünce çizim de
   kendi zeminine döndü. */
.kesit{width:100%;height:auto;display:block;overflow:visible}

/* yüzeyler */
.k-zemin{fill:#0A1428;stroke:#FFFFFF14;stroke-width:1}
.k-izgara path{stroke:#FFFFFF0D;stroke-width:.8;fill:none}
.k-duvar{fill:#0E1A31;stroke:#FFFFFF12;stroke-width:1}
.k-duvar--yan{fill:#081120}
.k-bolme{fill:#132139;stroke:#FFFFFF14;stroke-width:1}
.k-tavan{fill:none;stroke:#FFFFFF2E;stroke-width:1;stroke-dasharray:7 6}

/* ocak, davlumbaz, tezgâh: fırınlanmış çelik */
.k-ocak-ust{fill:#2A3A5C}.k-ocak-sag{fill:#1B2745}.k-ocak-on{fill:#223152}
.k-davl-ust{fill:#3B4E75}.k-davl-sag{fill:#26355A}.k-davl-on{fill:#2F4166}
.k-tezgah-ust{fill:#22314F}.k-tezgah-sag{fill:#16223A}.k-tezgah-on{fill:#1C2A45}
.k-ocak-ust,.k-ocak-sag,.k-ocak-on,.k-davl-ust,.k-davl-sag,.k-davl-on{
  stroke:#FFFFFF1F;stroke-width:.9}
.k-tezgah-ust,.k-tezgah-sag,.k-tezgah-on{stroke:#FFFFFF17;stroke-width:.8}

/* menfez kutuları ve menfezden inen hava konisi */
.k-menfez-ust{fill:#33507A}.k-menfez-sag{fill:#22374F}.k-menfez-on{fill:#2A4463}
.k-menfez-ust,.k-menfez-sag,.k-menfez-on{stroke:#4D8DFF4D;stroke-width:.8}
.k-koni path{fill:url(#kKoni);opacity:calc(.55 * var(--akis,1))}

/* kanallar · gövde duran boru, akış içindeki hava */
.k-kanal .k-govde{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:11}
.k-kanal .k-akis{fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-width:4.5;stroke-dasharray:14 26}
.k-kanal--taze .k-govde{stroke:#1E6BFF33}
.k-kanal--taze .k-akis{stroke:#6FC4FF}
.k-kanal--egzoz .k-govde{stroke:#FF8A3D2E}
.k-kanal--egzoz .k-akis{stroke:#FFA867}
.k-boyun{fill:none;stroke:#FF8A3D2E;stroke-width:11;stroke-linecap:round}
/* Hero ile aynı ritim: desen turda 40 birim yol alıyor, süre sabit. */
.akis-sahne.canli .k-kanal .k-akis{
  animation:k-ak calc(40 / var(--hava-hizi) * 1s) linear infinite}
@keyframes k-ak{to{stroke-dashoffset:-40}}

/* çatı fanı · kutu, dönen çark yok (iki kez reddedildi) */
.k-fan-ust{fill:#3B4E75}.k-fan-sag{fill:#26355A}.k-fan-on{fill:#2F4166}
.k-fan-ust,.k-fan-sag,.k-fan-on{stroke:#FFFFFF24;stroke-width:.9}
.k-fan-cark{fill:none;stroke:#FF8A3D;stroke-width:2.4;stroke-dasharray:9 7}

/* etiketler */
.k-etiket .k-cizgi{stroke:#FFFFFF3D;stroke-width:1;fill:none}
.k-etiket .k-nokta{fill:#4D8DFF;stroke:#060D1E;stroke-width:1.5}
.k-etiket--egzoz .k-nokta{fill:#FF8A3D}
.k-ust{font:700 11px/1 Archivo,system-ui,sans-serif;letter-spacing:.1em;
  fill:#FFFFFFB8}
.k-alt{font:800 15px/1 Archivo,system-ui,sans-serif;fill:#FFFFFF;
  font-variant-numeric:tabular-nums}
.k-etiket--egzoz .k-alt{fill:#FFB183}
.k-etiket--taze .k-alt{fill:#8FD0FF}

/* Telefonda çizimin üstündeki balon etiketler kalkıyor; aynı değerler
   çizimin altında düz yazı olarak duruyor (`kesitEtiketleri()`). */
@media (max-width:760px){
  .k-etiket{display:none}
}
@media (prefers-reduced-motion:reduce){.k-kanal .k-akis{animation:none}}
body.duruk .k-kanal .k-akis{animation:none}

/* Aşamalar: `--p` (0..1) sahnenin kendi ilerlemesinden gelir; tanımsızsa
   1, yani çizim tam kurulu. Gizleyen kural açma değişkeniyle birlikte. */
.kesit{--a1:clamp(0, calc((var(--p, 1) - .00) * 9), 1);
       --a2:clamp(0, calc((var(--p, 1) - .16) * 3.4), 1);
       --a3:clamp(0, calc((var(--p, 1) - .46) * 6), 1);
       --a4:clamp(0, calc((var(--p, 1) - .62) * 5), 1)}
.k-a1,.k-a1b{opacity:var(--a1)}
.k-a1b{transform:translateY(calc((1 - var(--a1)) * 10px))}
.k-kanal .k-govde,.k-boyun{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--a2))}
.k-a3{opacity:var(--a3);transform-box:fill-box;transform-origin:center;
  transform:scale(calc(.82 + var(--a3) * .18))}
.k-kanal .k-akis,.k-koni,.k-fan-cark{opacity:var(--a4)}
.k-etiket{opacity:clamp(0, calc((var(--a4) - var(--s, 0) * .18) * 2.2), 1)}

/* ══════════════════════════════════════════════════════════════════
   İÇ SAYFALAR
   Ana sayfa sıfırdan yazıldığında iç sayfaların şablonları korundu.
   Aşağısı onların sözlüğünü yeni sisteme bağlar. Eksikti: kırk beş
   sınıfın stilde hiç karşılığı yoktu, `arac/sinif.mjs` bunları
   sayıyor.
   ══════════════════════════════════════════════════════════════════ */

/* ── ürün dizini (tüm ürünler, tek liste) ─────────────────────── */

/* ── referanslar sayfası · kutu değil, kayıt ──────────────────── */
/* RİTİM: dört satırın dördü de birebir aynıydı (1176x450, fotoğraf
   503x377 solda, sağda aynı yerde aynı boyda başlık ve sayı) ve sayfa
   "listeden ibaret" duruyordu. Üstelik sağ sütunun içeriği y=324'te
   bitip fotoğraf y=429'a kadar sürdüğü için her satırda 105x615'lik
   ölü bir sağ alt köşe kalıyordu.
   Çift satırlar yön değiştiriyor; ilk satır daha büyük çünkü ilk iş
   sayfanın kapağı. */
.refler{display:grid;gap:0}
.refler .rf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(32px,4vh,56px) 0;border-top:1px solid var(--cizgi)}
.refler .rf:last-child{border-bottom:1px solid var(--cizgi)}
.refler .rf:nth-child(even) .rf__f{grid-column:2;grid-row:1}
.refler .rf:nth-child(even) .rf__g{grid-column:1;grid-row:1}
/* İlk iş sayfanın kapağı: tam genişlikte, kare geniş oranda. */
.refler .rf:first-child{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  border-top:0;padding-top:0}
.refler .rf:first-child .rf__f{aspect-ratio:16/10}
.refler .rf:first-child .rf__g h2{font-size:var(--p5);line-height:1}
.refler .rf__f{aspect-ratio:4/3;position:relative}
/* TELEFONDA TEK SÜTUN. Izgaranın dar ekran karşılığı hiç yazılmamıştı:
   390 px'te iki sütun 170 px'e iniyor, başlık üç satıra bölünüyor ve
   fotoğraf yazının üstüne biniyordu. Çift satırların yön değiştirmesi
   de burada anlamsız; sütun tek. */
@media (max-width:760px){
  .refler .rf,
  .refler .rf:first-child{grid-template-columns:minmax(0,1fr);
    gap:clamp(16px,3vh,24px);align-items:start}
  .refler .rf__f,
  .refler .rf:nth-child(even) .rf__f{grid-column:1;grid-row:1}
  .refler .rf__g,
  .refler .rf:nth-child(even) .rf__g{grid-column:1;grid-row:2}
  .refler .rf:first-child .rf__f{aspect-ratio:4/3}
  .refler .rf:first-child .rf__g h2{font-size:var(--p4)}
}
/* Kart kuralı üst çizgi koyuyor; burada sütun zaten ayrılmış. */
.refler .rf__g{padding-top:0;margin-top:0;border-top:0}
.refler .rf__f img{object-fit:cover}
.refler .rf__g>b{display:block;font-size:var(--p0);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sonuk)}
.refler .rf__g h2{font-size:var(--p4);font-weight:800;letter-spacing:-.015em;
  margin-top:8px}
.refler .rf__g>p{font-size:var(--p2);color:var(--sonuk);margin-top:10px;max-width:52ch}
/* Devreye alınan debi: sayfadaki tek sayı, ölçü aleti gibi okunuyor. */
/* Kart kuralları (`.rf p`) buradan daha belirgin olduğu için sayı 15 px
   çıkıyordu; sayfadaki tek sayı bu, seçici ona göre yazılıyor. */
.refler .rf__g>.deger{font-size:var(--p5);line-height:1;font-weight:800;
  letter-spacing:-.03em;margin-top:18px;color:var(--murekkep);max-width:none}
.deger small{font-size:var(--p1);font-weight:700;color:var(--sonuk);margin-left:8px}
/* Şerit üç sütunluk kurulmuştu ama referansların çoğunda iki, birinde
   tek fotoğraf var: sağda boş ray kalıyor ve şerit bitmemiş duruyordu
   (iki fotoğrafta %32, tek fotoğrafta %70 boş). Telefonda 104 px'lik
   kare zaten okunmuyordu. İki sütun: satır dolar, kare 165 px'e çıkar. */
/* Hizmet sayfasının fotoğraf ızgarası. Kareler farklı oranlarda geliyor
   (dikey telefon karesi, yatay render); hepsi 4:3'e kırpılıyor ki satır
   hizası bozulmasın. */
.kareler{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.kareler figure{margin:0}
.kareler img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.kareler figcaption{font-size:var(--p0);color:var(--sonuk);margin-top:8px;line-height:1.45}
.rf__ek{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.rf__ek span,.rf__ek a{display:block;width:calc(104px + var(--genis) * .05);aspect-ratio:4/3;overflow:hidden;
  background:var(--kagit-2)}
/* Uygulamalar: kareler büyüteç açıyor (ortak.js `data-buyut`). */
.rf__ek a,a.rf__f{cursor:zoom-in}
.rf__ek a img,a.rf__f img{transition:transform .4s var(--e-yumusak)}
.rf__ek a:hover img,a.rf__f:hover img{transform:scale(1.04)}
.rf__say{margin-top:10px;font-size:var(--p0);color:var(--sonuk)}
.rf__ek img{width:100%;height:100%;object-fit:cover}
/* TELEFONDA İKİ SÜTUN. Şerit üç sütunluk kurulmuştu ama referansların
   çoğunda iki, birinde tek fotoğraf var: sağda boş ray kalıyor ve şerit
   bitmemiş gibi duruyordu (iki fotoğrafta %32, tek fotoğrafta %70 boş).
   104 px'lik kare de telefonda okunmuyordu. İki sütunda satır doluyor,
   kare 165 px'e çıkıyor. */
@media (max-width:760px){
  .rf__ek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .rf__ek span,.rf__ek a{width:auto}
  /* BURADA BİR KURAL VARDI VE ZARAR VERİYORDU. "Tek fotoğrafı olan
     referansta iki sütun yarısını boş bırakır" diye tek sütuna
     çekmiştim; sonuç, tek ek fotoğrafın 350x263'e çıkıp kartın KENDİ
     ana fotoğrafıyla aynı boya gelmesi oldu (ölçüldü: ikisi de
     350x263, üst üste iki aynı boy kare). Ek fotoğraf ektir, ana
     kareyle boy ölçüşmez. Kural kaldırıldı: tek fotoğraf da 170 px'lik
     hücresinde kalıyor. */
}
@media (max-width:820px){
  .refler .rf{grid-template-columns:minmax(0,1fr)}
  .refler .rf__f{grid-row:auto}
}

/* ── sık sorulanlar sayfası · solda yön, sağda liste ──────────── */
.sss-duzen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.sss-duzen__bas{position:sticky;top:110px}
.sol--kucuk{font-size:var(--p1);color:var(--sonuk);max-width:34ch}
@media (max-width:900px){
  .sss-duzen{grid-template-columns:minmax(0,1fr)}
  .sss-duzen__bas{position:static}
}

/* ── debi hesaplama sayfası ───────────────────────────────────── */
/* Cihaz 1320 px'i doldurunca girdi kutuları 1100 px oluyor ve üç
   haneli bir sayı için kürek gibi duruyor. */
.hesap{margin-top:clamp(8px,2vh,20px)}
/* 10 EKİM, İKİ SÜTUNLU CİHAZ (Yusuf: "debi hesabı sayfası güzelleşsin"). Eskiden
   880 px'lik tek sütun soldaydı, sağ üçte biri boştu ve sonuç formun altında
   kayboluyordu. Masaüstünde solda kadranlar (girdiler), sağda okuma: büyük sayı,
   formül ve öneri tek bakışta. Ana sayfadaki pano DOKUNULMADI; kural `.hesap`a bağlı. */
@media (min-width:901px){
  .hesap .pano{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    grid-template-rows:1fr auto;box-shadow:0 30px 80px -40px #1E6BFF59}
  .hesap .pano__giris{grid-column:1;grid-row:1 / span 2;grid-template-columns:minmax(0,1fr);
    align-content:center;gap:clamp(18px,2.4vw,28px);padding:clamp(28px,3.4vw,48px);
    border-right:1px solid var(--cizgi)}
  .hesap .pano--olcu .alan select,.hesap .pano--olcu .alan input{height:62px;font-size:var(--p3)}
  .hesap .pano__okuma{grid-column:2;grid-row:1;border-bottom:0;display:flex;flex-direction:column;
    justify-content:center;padding:clamp(32px,4vw,56px);
    background:radial-gradient(120% 90% at 80% 0%,#1E6BFF26,transparent 60%),var(--gece)}
  .hesap .pano__sayi span{font-size:clamp(64px,8vw,128px)}
  .hesap .pano__model{grid-column:2;grid-row:2;background:var(--gece);
    padding:clamp(22px,2.6vw,32px) clamp(32px,4vw,56px)}
}
/* TABLO HÜCRESİNDEKİ BAĞLANTI CÜMLE İÇİNDE DEĞİL, KENDİ BAŞINA BİR
   HEDEF. Mekân sayfalarının "bu debiyi karşılayan aileler" sütununda
   16 px yüksekliğinde kalıyordu. Dikey dolgu satır boyunu değil hedef
   kutusunu büyütüyor. */
/* Kisa kelimeler ("Sera" 31 px) esigin altina dusuyordu; esik yalniz
   boy degil EN de. Dip bilgideki ilce baglantilarinda kullanilan ayni
   cozum: yatay dolgu degil asgari genislik. */
/* Hücrede birden çok bağlantı varken asgari genişlik virgülü koparıyordu
   ("Sera ," 13 px boşluk); orada yatay dolgu, tek bağlantıda asgari en. */
.tablo td a:only-child{min-width:44px}
.tablo td a:not(:only-child){padding-inline:7px;margin-inline:-7px}
.tablo td a{display:inline-block;padding-block:13px;
  text-decoration:underline;text-underline-offset:3px;color:var(--mavi-acik)}
.formul{padding:18px 0;margin:8px 0 18px;border-top:1px solid var(--cizgi);
  border-bottom:1px solid var(--cizgi);font-size:var(--p3);
  font-variant-numeric:tabular-nums}

/* ── teklif şeridi ────────────────────────────────────────────── */
.serit-teklif__ic{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,auto);
  gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:820px){
  .serit-teklif__ic{grid-template-columns:minmax(0,1fr)}
}

/* ── aile gövdesi · metin + model cetveli ─────────────────────── */
.aile-govde{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.66fr);
  column-gap:clamp(28px,4.5vw,72px);row-gap:clamp(24px,3.4vh,36px);align-items:start}
.aile-cetvel dl{margin-top:16px;border-top:1px solid var(--cizgi)}
.aile-cetvel div{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:10px 18px;align-items:baseline;border-bottom:1px solid var(--cizgi)}
.aile-cetvel dt{min-width:0}
.aile-cetvel dt a{display:flex;align-items:center;min-height:52px;
  font-size:var(--p2);font-weight:700;letter-spacing:-.01em}
.aile-cetvel dt a:hover{color:var(--mavi-acik)}
.aile-cetvel dd{margin:0;font-size:var(--p3);font-weight:800;letter-spacing:-.02em;
  white-space:nowrap}
.aile-cetvel dd small{font-size:var(--p0);font-weight:600;color:var(--sonuk);margin-left:4px}
/* En dar telefonlarda model adı 88 px'lik sütunda 5 satıra kırılıyordu:
   ad üstte tam genişlik, debi altında. */
@media (max-width:430px){
  .aile-cetvel div{grid-template-columns:minmax(0,1fr);row-gap:0}
  .aile-cetvel dt a{min-height:44px}
  .aile-cetvel dd{font-size:var(--p2);padding-bottom:10px}
}
@media (max-width:900px){.aile-govde{grid-template-columns:minmax(0,1fr)}}
/* SOL SÜTUN METNE GÖRE YALNIZ GENİŞ EKRANDA. 27 Eylül'de her genişliğe
   `62ch` yazılmıştı: 901-1100 px'te metin sütunu yeri alıyor, model
   cetveli 0 px'e ezilip debiler adların üstüne biniyordu (28 Eylül,
   tablet incelemesi). 1440 ve altı onaylı oranına döndü. */
@media (min-width:1441px){
  .urun-govde,.aile-govde{grid-template-columns:minmax(0,62ch) minmax(0,1fr)}
}

/* ── ilçe / kategori sayfası · diğer aileler ──────────────────── */
.aileler{display:flex;flex-wrap:wrap;gap:10px}
.aileler a{display:inline-block;padding:12px 20px;border:1px solid var(--cizgi);
  border-radius:999px;font-size:var(--p1);font-weight:700}
.aileler a:hover{border-color:var(--murekkep);background:var(--murekkep);
  color:var(--kagit)}

/* ── hizmet kartındaki sıra numarası ──────────────────────────── */
.hz__no{display:block;margin-top:14px;font-size:var(--p0);font-weight:700;
  letter-spacing:.16em;color:var(--sonuk);font-variant-numeric:tabular-nums}

/* ── zemini kesilmiş ürün kareleri ───────────────────────────────
   `kesikMi()` zemini KALDIRILMIŞ (saydam PNG) katalog karelerini
   işaretliyor: 47 ürünün 37'si, 13 ailenin 11'i böyle. Kural bugüne
   kadar tam tersini yapıyordu. `cover` kutuyu doldurmak için ürünün
   KENDİSİNİ kırpıyor: 200x103'lük bir aksiyel aspiratör 268x201'lik
   çerçeveye 3,9 kat büyütülüp kenarlarından kesiliyordu. Zemini
   olmayan bir karede doldurulacak kutu yok, yalnız ürün var.
   Eriten karartma da kapalı: `::after` fotoğrafın dikdörtgenini
   sayfaya karıştırmak için var, burada eritilecek dikdörtgen yok ve
   karartma ürünün kendi kenarlarını yiyordu. */
.kesik-f img,.ur__f--kesik img,.hz__f--kesik img{object-fit:contain;padding:10px}
.kesik-f::after,.ur__f--kesik::after,.hz__f--kesik::after{content:none}

/* ── hakkımızda ───────────────────────────────────────────────── */
.hk{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.hk__not{padding-top:16px;margin-top:20px;border-top:1px solid var(--cizgi);
  font-size:var(--p1);color:var(--sonuk)}
.hk__yan{position:sticky;top:110px}
.hk__adim{margin-top:14px;list-style:none}
.hk__adim li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--cizgi)}
/* ADIM NUMARALARI 4,03:1 IDI. `--mavi` (#1E6BFF) koyu zeminde 17 px ve
   800 agirlikta, yani buyuk metin sayilmiyor ve esik 4,5:1. Alti adimin
   altisinda da ayni. `--mavi-acik` ile 11,5:1. */
.hk__adim b{font-size:var(--p2);font-weight:800;color:var(--mavi-acik);
  font-variant-numeric:tabular-nums}
.hk__adim span{font-size:var(--p2)}
@media (max-width:900px){
  .hk{grid-template-columns:minmax(0,1fr)}
  .hk__yan{position:static}
}

/* Tam genişlik fotoğraf + üstünde tek cümle. Fotoğraf atmosfer,
   kanıt değil: "tesisimiz" demiyor. */
.tamkare{position:relative;margin-block:clamp(48px,7vh,96px);
  min-height:clamp(380px,60vh,620px);display:grid;
  grid-template-areas:'k';isolation:isolate}
.tamkare__f,.tamkare__ic{grid-area:k}
.tamkare__f{overflow:hidden;background:var(--koyu)}
.tamkare__f img{width:100%;height:100%;object-fit:cover;opacity:.55}
/* HİZA `.kap` İLE BİREBİR OLMAK ZORUNDA.
   Eskiden `width:min(var(--en), 100% - var(--ic)*2)` yazıyordu ve iç
   dolgusu yoktu: kutu doğru genişlikteydi ama METİN kutunun kenarından
   başlıyordu, `.kap` ise `--kenar` kadar içeriden başlıyor. Sonuç, bu
   bölümün sayfanın geri kalanından bir `--kenar` kadar SOLDA durması.
   Ölçüldü: 2560'ta 441'e karşı 513, 1440'ta 72'ye karşı 132. Her
   ekranda vardı, büyük ekranda göze battı. `arac/hiza.mjs` bunu 98
   sayfayı tarayıp buldu. Artık `.kap`la aynı üç bildirim. */
.tamkare__ic{position:relative;align-self:center;color:#fff;
  width:100%;max-width:var(--en);margin-inline:auto;
  padding-inline:var(--kenar);padding-block:clamp(28px,4vh,56px)}
.tamkare__ic .etiket{color:#FFFFFFA3;margin-bottom:14px}
.tamkare__ic .sol{max-width:46ch;margin-top:18px;font-size:var(--p2);
  color:#FFFFFFD1}
.ara{font-size:var(--p5);line-height:.96;letter-spacing:-.02em;font-weight:800}
.tekSatir{display:block}

/* Üç sayı: kaynağı katalogdan türüyor, elle yazılmıyor. */
.usayi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);border-top:1px solid var(--cizgi);padding-top:28px}
.usayi>div{display:flex;flex-direction:column;gap:8px}
.usayi b{font-size:var(--p5);line-height:1;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.usayi b i{font-size:var(--p3);font-style:normal;margin-left:6px;color:var(--sonuk)}
/* `>` ŞART: sayının kendisi de bir `<span class="tab">`; doğrudan
   çocuk denmeyince üçüncü sayı 15 px çıkıyordu. */
.usayi>div>span{font-size:var(--p1);color:var(--sonuk);max-width:26ch}
/* Ekran okuyucuya kalan metin: `overflow` ve `nowrap` olmadan 1 px'lik
   kutudan taşıp sayfayı yana kaydırabiliyor. */
.gizli{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
@media (max-width:760px){.usayi{grid-template-columns:minmax(0,1fr);gap:26px}}

/* ESKİ ANA SAYFANIN TAM EKRAN SAHNE SİSTEMİ DE SİLİNDİ, 23 Eylül.
   Aynı gerekçe: ana sayfa `ana.php` + `ana.css` oldu ve o sistemin
   tek bir sınıfının bile bu dosyanın servis ettiği sayfalarda
   karşılığı yok. İç sayfaların giriş hareketi yukarıda, `.ac` ve
   `.cizgili` ile. */

/* ── ÜRÜN KATALOĞU (PDF) bağlantısı · `katalogBag()` ──────────────── */
.katalog-satir{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:0 0 34px}
.katalog-satir p{margin:0;max-width:52ch;color:var(--sonuk);font-size:var(--p1)}
.katalog-satir--yan{margin:22px 0 0}


/* ── AİLE SÜZGECİ · /urun "Tüm ürünler" (ortak.js `[data-suzgec]`) ──
   Düğmeler keskin köşeli, sitenin düğme dili; seçili olan dolu mavi.
   Telefonda tek satır, yana kayıyor: on dört aile alt alta altı satır
   yiyordu. */
.suzgec{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
/* Düğme `.dg dg--bos` (dil.css); burada yalnız boyu ve seçili hâli. */
.suzgec .dg{min-height:44px;padding:0 16px;gap:8px;white-space:nowrap}
.suzgec .dg small{font-size:12px;font-weight:600;color:var(--sonuk)}
.suzgec .dg[aria-current]{background:var(--mavi);border-color:var(--mavi);color:#fff}
.suzgec .dg[aria-current] small{color:#FFFFFFB3}
.suzgec__durum{min-height:1.5em;margin-bottom:22px;font-size:var(--p0);color:var(--sonuk)}
.suzgec__oge:not([hidden]){display:grid}
.urunler--suzgecli{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))!important}
@media (max-width:760px){
  .suzgec{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--kenar) * -1);
    padding-inline:var(--kenar);scrollbar-width:none;scroll-snap-type:x proximity}
  .suzgec::-webkit-scrollbar{display:none}
  .suzgec .dg{scroll-snap-align:start}
  /* Yana taşıyorsa sağ kenar soluyor (ortak.js `.tasiyor`/`.sonda`). */
  .suzgec.tasiyor{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
    mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .suzgec.sonda{-webkit-mask-image:none;mask-image:none}
}

/* ── KATALOG KUTUSU · /urun aile ızgarasının son satırında ──────────
   Sütun sayısı sabit ki kutu son satırın boşluğunu tam kaplasın
   (`--k4/--k3/--k2` PHP'den: o kırılımda kalan sütun sayısı). */
.urunler--aile{grid-template-columns:minmax(0,1fr)}
.katalog-karo{grid-column:1/-1}
@media (min-width:601px){.urunler--aile{grid-template-columns:repeat(2,minmax(0,1fr))}.katalog-karo{grid-column:span var(--k2)}}
@media (min-width:901px){.urunler--aile{grid-template-columns:repeat(3,minmax(0,1fr))}.katalog-karo{grid-column:span var(--k3)}}
@media (min-width:1200px){.urunler--aile{grid-template-columns:repeat(4,minmax(0,1fr))}.katalog-karo{grid-column:span var(--k4)}}
.katalog-karo{display:flex;gap:clamp(18px,2vw,28px);align-items:flex-start;min-height:220px;
  padding:clamp(22px,2.4vw,34px);background:var(--mavi);color:#fff;text-decoration:none;border-radius:2px;
  transition:background var(--h-kisa) var(--e-hizli)}
.katalog-karo:hover{background:#3D80FF}
.katalog-karo__ikon{flex:none;display:grid;place-items:center;width:64px;height:80px;
  border:2px solid #FFFFFFCC;border-radius:2px;font-size:var(--p0);font-weight:800;letter-spacing:.12em;
  clip-path:polygon(0 0,74% 0,100% 20%,100% 100%,0 100%)}
.katalog-karo__g{display:flex;flex-direction:column;min-height:100%;align-self:stretch}
.katalog-karo__g>b{font-size:var(--p35);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.katalog-karo__g>span{margin-top:10px;font-size:var(--p1);color:#FFFFFFD9;max-width:46ch;line-height:1.5}
.katalog-karo__g>i{margin-top:auto;padding-top:18px;font-style:normal;font-size:var(--p0);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase}
.katalog-karo__g>i small{margin-left:8px;font-weight:600;letter-spacing:.04em;color:#FFFFFFB3;text-transform:none}
.katalog-karo__g>i::after{content:' \2193';letter-spacing:0}
.karolar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(20px,2.4vw,40px);margin-top:clamp(20px,2.4vw,40px)}

/* Teknik resim (ölçü çizimi, `urun.cizim`): beyaz zeminli çizim koyu sayfada açık plakada. */
.teknik-cizim{margin:0 0 28px;padding:clamp(14px,2vw,26px);background:#F4F6FA;border-radius:2px}
.teknik-cizim img{display:block;width:100%;max-width:900px;height:auto;margin:0 auto}
.teknik-cizim figcaption{margin-top:10px;text-align:center;font-size:var(--p0);color:var(--gece-3)}