/* ══════════════════════════════════════════════════════════════════
   AVS FAN · ORTAK DİL

   NEDEN VAR: site iki stil sayfasından derleniyordu, `ana.css` ve
   `site.css`. İkisinin AYRI belirteç sözlüğü vardı ve aynı adlar
   farklı değerler taşıyordu:

     | | ana.css | site.css |
     |---|---|---|
     | --p0  | 13px | 12,5px |
     | --p2  | 17px | 17,5px |
     | --p3  | 21px | 19-23px |
     | --p5  | 30-58px | 38-68px |
     | --sonuk | #8D98AC | #8792A6 |
     | --cizgi | #FFFFFF1F | #FFFFFF17 |
     | oluk | 20-72px | 20-48px |

   Yani ana sayfadaki bir bölüm başlığı ile iç sayfadaki aynı rütbeli
   başlık farklı boydaydı, gövde metni farklı puntoydu, kenar boşluğu
   farklıydı. Göz bunu "iki ayrı site" diye okur; müşteri de öyle
   okudu. Düğmeler bir kez elle eşitlendi, dip bilgi bir kez daha
   eşitlendi; elle eşitlenen şey er geç yeniden ayrışır.

   Bu dosya ORTAK OLAN HER ŞEYİ taşır: 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. `ana.css` ve `site.css` yalnız kendi
   sayfalarına ait olanı taşır ve bunun ARDINDAN yüklenir.
   ══════════════════════════════════════════════════════════════════ */

/* ── yazı tipi · kendi sunucumuzda ─────────────────────────────── */
@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(font/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(font/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── belirteçler · TEK SÖZLÜK ──────────────────────────────────── */
:root{
  /* RENK KEYFİ DEĞİL, ÖLÇÜLDÜ. Firmanın bütün ürün ve sahne
     fotoğrafları koyu lacivert zeminde, mavi kenar ışığıyla çekilmiş:
     on iki karenin köşe ortalaması #060D1E. Sayfanın zemini o renk
     olunca ürün fotoğrafının bittiği yer görünmüyor. */
  --gece:#060D1E;          /* sayfa zemini */
  --gece-2:#0B1426;        /* kalkık yüzey · pano, kart */
  --gece-3:#111D36;        /* girdi yüzeyi */
  --murekkep:#FFFFFF;
  --sonuk:#8D98AC;
  --mavi:#1E6BFF;          /* marka aksanı · 07-bilgi/kararlar.md */
  --mavi-acik:#8AD4FF;     /* fotoğraflardaki kenar ışığı · ölçüldü */
  --cizgi:#FFFFFF1F;
  /* Harita kutusunun zemini: Google gömmesi beyaz açtığı için geç
     yüklenen çerçeve bir an parlıyordu. İki dosyada düz onaltılık
     olarak duruyordu, belirtece çıkarıldı. */
  --harita-zemin:#0E1526;

  /* ESKİ SÖZLÜK. İç sayfalar `--kagit` / `--koyu` adlarıyla, ana sayfa
     `--*-ters` adlarıyla yazılmıştı. Dört yüz satırı tek tek çevirmek
     yerine adlar takma ad olarak duruyor; DEĞERLERİ artık yukarıdan
     geliyor, yani ayrışamazlar. Yeni kural yazarken üsttekiler
     kullanılır. */
  --kagit:var(--gece);
  --kagit-2:var(--gece-2);
  --koyu:var(--gece-2);
  --koyu-2:var(--gece-3);
  --sonuk-ters:var(--sonuk);
  --mavi-koyu:var(--mavi-acik);
  --cizgi-ters:var(--cizgi);

  /* ── 1440'IN ÜSTÜ · TEK KALDIRAÇ ──────────────────────────────
     Sitedeki BÜTÜN ölçü belirteçleri 1060 ile 1600 px arasında
     tavanını dolduruyordu, yani 1440'ın üstünde sayfa donuyor ve
     yalnız tam ekran açılış fotoğrafı büyüyordu. Ölçüldü, içerik eni
     her ekranda aynı çıkıyordu:

       ekran   sol boşluk   içerik   sağ boşluk
        1440        132      1176         132
        1920        372      1176         372
        2560        692      1176         692
        3440       1132      1176        1132

     3440'ta ölü kenarlar (2264 px) içerikten GENİŞ. Göz bunu "solda
     boşluk kalmış" diye okuyor, çünkü sağ kenarı fotoğraf dolduruyor,
     sol kenarı hiçbir şey doldurmuyor.

     `--genis` 1440'ın üstünde kalan paydır, altında SIFIR. Büyümesi
     gereken her ölçü bunu kullanıyor; tek kaldıraç olduğu için "şu da
     büyüsün" dendiğinde tek satır değişiyor ve onaylanmış masaüstü
     düzenine (<=1440) hiçbir koşulda dokunulmuyor. `max(0px, ...)`
     şart: `calc` tek başına dar ekranda negatif pay verip ölçüleri
     KÜÇÜLTÜRDÜ. */
  --genis:max(0px, calc(100vw - 1440px));
  /* ara · tablo ile sonraki paragraf arası. Beş sayfa satır içi
     `var(--ar4)` kullanıyordu ama jeton hiç tanımlanmamıştı: pay 0. */
  --ar4:clamp(24px,3vh,40px);
  /* punto · sekiz basamak, rolleri yazılı */
  --p0:13px;                        /* etiket, dipnot */
  /* p1-p3 de aynı kaldıraçla hafif büyüyor (27 Eylül): 2560'ta h1 143,
     kap 2371 px iken gövde 17 px'te kalıyor, metin sütunu sıkışıyordu.
     1440 ve altında değer aynen 15/17/21. 2560'ta ~18/20/25. */
  --p1:calc(15px + var(--genis) * .0025);   /* küçük metin, düğme */
  --p2:calc(17px + var(--genis) * .003);    /* gövde */
  --p3:calc(21px + var(--genis) * .004);    /* giriş cümlesi, h3 */
  --p35:clamp(24px,2.6vw,32px);     /* alt başlık · 21 ile 34 arası */
  --p4:clamp(26px,3.2vw,34px);      /* bölüm içi başlık */
  /* bölüm başlığı · h2. Büyük ekranda büyüyor: sahne ızgaralarının
     metin sütunu genişlerken 58 px'lik başlık sütunun içinde küçük bir
     ada gibi kalıyordu. */
  --p5:min(calc(clamp(30px,5vw,58px) + var(--genis) * 0.016), 76px);
  --p6:clamp(36px,6vw,78px);        /* sayfa başlığı · iç sayfa h1 */
  /* açılış · yalnız ana sayfa hero. Büyük ekranda büyüyor: 2560'ta
     112 px'lik başlık 1534 px'lik sütunda ve tam ekran bir fotoğrafın
     üstünde küçük kalıyordu. */
  --dev:min(calc(clamp(40px,8.4vw,112px) + var(--genis) * 0.028), 152px);

  /* ölçü */
  /* Okuma genişliği 1440'ın üstünde büyüyor: her 100 px ekranın 32
     px'i içeriğe gidiyor, 1720'de duruyor. Gövde metni zaten `ch` ile
     kapalı, yani satır uzunluğu bozulmuyor; genişleyen şey ızgaralar
     ve fotoğraf kadrajı. Gerekçe yukarıda, `--genis`in yanında. */
  /* TAM GENİŞLİK (27 Eylül, iki kez: "büyük ekranda ortaya sıkışık",
     "hâlâ tam genişlik kullanmıyor"). Önce 0,32 pay ve 1720 tavan vardı
     (1920'de içerik %69), sonra 0,8 ve 2400 (%81). Artık pay 1,25 ve
     tavan yok: 1920'de kapsayıcı ekranın kendisi, üstünde de öyle; içeriği
     yalnız `--kenar` çerçeveliyor. 1440 ve altı değişmedi. */
  --en:calc(1320px + var(--genis) * 1.25);
  /* Yan boşluk büyük ekranda hafifçe büyüyor: tam genişlikte 72 px 3440'lık
     bir ekranda kenara yapışmış gibi duruyordu. 1920'de 82, 2560'ta 94,
     3440'ta 112 px. 1440 ve altında yine 20-72. */
  --kenar:calc(clamp(20px,5vw,72px) + var(--genis) * 0.02);
  /* TEK OKUMA KENARI. `.kap` 1320 px'te ortalanıyor, yani 1440'lık bir
     pencerede içerik x=132'den başlıyor. Tam genişlikte duran sahneler
     ise yalnız `--kenar` kadar içeriden başlıyordu: x=72. Sonuç, sayfa
     aşağı inerken sol kenarın 72 ile 132 arasında ÜÇ KEZ zıplaması;
     üstelik menüdeki logo 132'de, hemen altındaki açılış başlığı
     72'deydi. Göz bunu "hizasız" diye değil "özensiz" diye okur.
     Bu değer iki hizayı birleştiriyor: dar ekranda `--kenar`, geniş
     ekranda kapsayıcının sol kenarı. Ölçüldü: 1440'ta 132, 1280'de 72. */
  --oluk:max(var(--kenar),calc((100% - var(--en)) / 2 + var(--kenar)));
  --ic:var(--kenar);                /* iç sayfaların eski adı */
  --ara:clamp(56px,8vh,112px);
  /* NAV DA `--genis` İLE BÜYÜYOR. 77 px sabitti ve logonun tavanını o
     belirliyordu: 46 px'ten yukarı çıkılamıyordu. Logonun yazısı ince
     konturlu bir tipografi, küçükken kayboluyor; büyük ekranda okunur
     olması için önce nav'a yer açmak gerekti. Tavan 100 px, daha
     fazlası yapışkan üst çubuğu kaydırmada rahatsız edici bir bant
     yapıyor.

     İKİ JETON, ÇÜNKÜ İKİ AYRI ŞEY. `--nav-ic` şeridin İÇ yüksekliği
     (`.nav__ic{min-height}`), `--nav` ise ALTINDAKİ her şeyin
     kaçacağı toplam yükseklik, yani iç yükseklik artı 1 px alt çizgi.
     ÖNCE `.nav__ic{min-height:76px}` ve `--nav:77px` diye AYRI AYRI
     yazılıydı, yani ikisi elle eşitleniyordu; biri değişip öteki
     unutulsa yapışkan menü, mobil menü ve `:target` hedefleri sessizce
     1-20 px kayardı. Artık ilişki kodda yazılı. */
  --nav-ic:min(calc(76px + var(--genis) * 0.016), 99px);
  --nav:calc(var(--nav-ic) + 1px);

  /* süre ve eğri · satır içi sayı yok */
  --h-kisa:140ms;
  --h-orta:280ms;
  --h-uzun:620ms;
  --h-sahne:820ms;
  --s-adim:80ms;
  --s-nefes:17s;
  --s-nefes-2:13s;
  --s-cubuk:120ms;
  --h-atis:420ms;
  --h-acilis:1500ms;
  /* ── YAY EĞRİLERİ ─────────────────────────────────────────────
     Bir yayın "canlı" hissini veren şey ivmelenmesi ve hedefi birazcık
     AŞMASI. `cubic-bezier` bunu yapamaz: dört kontrol noktası var,
     salınım yok. `linear()` istediğin kadar nokta kabul ediyor, yani
     gerçek yay denklemini (kütle, sertlik, sönüm) örnekleyip doğrudan
     CSS'e verebiliyoruz.

     Framer Motion (bugünkü adı Motion) sitelerinin farkı işte bu
     fizik; kütüphanenin kendisi değil. `linear()` Safari 17.2'den
     (Aralık 2023) beri her yerde çalışıyor, yani bugün bedava.
     Eğriler `arac/yay.py` ile üretildi, elle yazılmadı.
  /* içeri yerleşme · bölüm ve kart girişi · sertlik 150, sönüm 20 */
  --y-giris-sure:691ms;
  --y-giris:linear(0, 0.019, 0.0679, 0.1364, 0.2164, 0.3018, 0.3879, 0.4714, 0.55, 0.6224, 0.6876, 0.7455, 0.796, 0.8393, 0.8761, 0.9068, 0.9321, 0.9526, 0.9689, 0.9817, 0.9915, 0.9988, 1.004, 1.0076, 1.0099, 1.0112, 1.0117, 1.0112, 1.0105, 1.0096, 1.0086, 1.0076, 1.0066, 1.0056, 1.0047, 1.0039, 1.0032, 1.0026, 1.0021, 1.0016, 1);
  /* dokunma tepkisi · düğme, kart, sekme · sertlik 420, sönüm 26 */
  --y-tepki-sure:531ms;
  --y-tepki:linear(0, 0.0529, 0.1802, 0.3425, 0.5112, 0.6674, 0.8002, 0.905, 0.9814, 1.0322, 1.0616, 1.0743, 1.0751, 1.0682, 1.0571, 1.0444, 1.0318, 1.0207, 1.0115, 1.0045, 0.9995, 0.9964, 0.9948, 0.9942, 0.9945, 0.9952, 0.9961, 0.9971, 0.998, 0.9988, 0.9994, 1);
  /* sayı değişti vuruşu · biraz taşar · sertlik 260, sönüm 14 */
  --y-vurus-sure:987ms;
  --y-vurus:linear(0, 0.0335, 0.1223, 0.2491, 0.3979, 0.5544, 0.7069, 0.8465, 0.9669, 1.0642, 1.1371, 1.186, 1.2126, 1.22, 1.2117, 1.1914, 1.1631, 1.1301, 1.0957, 1.0622, 1.0318, 1.0056, 0.9846, 0.9689, 0.9585, 0.953, 0.9516, 0.9537, 0.9583, 0.9646, 0.9719, 0.9795, 0.9868, 0.9934, 0.9991, 1.0037, 1.007, 1.0092, 1.0104, 1.0106, 1.0101, 1.0091, 1.0077, 1.0061, 1.0044, 1.0028, 1.0013, 1.0001, 0.9991, 0.9984, 0.9979, 0.9977, 0.9978, 0.998, 0.9983, 0.9987, 0.9991, 0.9994, 1);
  --e-cik:cubic-bezier(.16,1,.3,1);
  --e-giris:var(--e-cik);           /* iç sayfaların eski adı */
  --e-sert:cubic-bezier(.22,1.2,.36,1);
  --e-yumusak:cubic-bezier(.45,.05,.55,.95);
  --e-hizli:cubic-bezier(.2,.7,.3,1);
  --hava-hizi:70;
}

/* ── temel ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* `scroll-behavior:smooth` BİLEREK YOK: o an sayfa bir süre kendi
   kendine hareket ediyor ve müşterinin reddettiği "ataletli kaydırma"
   hissi tam olarak bu. Bağlantı ışınlar, kaydırma yalnız parmağa ait. */
/* ÇAPA PAYI TEK YERDE (27 Eylül): önce `html{scroll-padding-top}` ile
   `:target{scroll-margin-top}` birlikte vardı ve `scrollIntoView` İKİSİNE
   de uyduğu için telefonda hedef 79 px fazla aşağıya iniyordu. Artık yalnız
   kökteki pay: üst menü, sayfada şerit varsa şerit de (masaüstü 60, telefon 52). */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 12px)}
html:has(.syf){scroll-padding-top:calc(var(--nav) + 72px)}
body{margin:0;background:var(--gece);color:var(--murekkep);
  font:400 var(--p2)/1.55 Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
/* `<picture>` yerleşimde YOK SAYILIR; `<img>` doğrudan kabın çocuğu
   olur. Onsuz kutuyu dolduran hiçbir kural işlemiyor: yüzdeli yükseklik
   boyu olmayan <picture>'a çarpıp `auto`ya düşüyor ve `object-fit` hiç
   devreye girmiyor. İki stil sayfası bunu iki ayrı yoldan çözüyordu;
   ana sayfa `display:block` + her kaplayan kutuya ayrı `height:100%`
   kuralı yazıyordu. Tek yol kaldı, doğru olanı. */
picture{display:contents}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,dl,dd,ul,ol,fieldset{margin:0}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:.98}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
/* `hidden` özniteliği her yerde gerçekten gizli: bir sınıfın `display`ı onu
   yeniyordu ve her bileşen için ayrı `[hidden]` satırı yazılıyordu. */
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--mavi-acik);outline-offset:3px}

.kap{width:100%;max-width:var(--en);margin-inline:auto;padding-inline:var(--kenar)}
.atla{position:absolute;left:-9999px}
.atla:focus{left:var(--kenar);top:12px;z-index:99;background:var(--murekkep);
  color:var(--gece);padding:10px 16px}
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tab{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── tipografi ─────────────────────────────────────────────────── */
.etiket{display:block;font-size:var(--p0);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sonuk);margin-bottom:18px}
/* BÖLÜM ETİKETLERİ ARTIK HEPSİ AYNI. Dokuz bölümün üçünde mavi,
   altısında griydi ve hangisinin neden mavi olduğunun bir kuralı
   yoktu. Açık mavi sayfada 31 kez yazı rengi olarak geçiyordu; o
   sıklıkta bir renk aksan olmaktan çıkıyor. Mavi artık yalnız üç
   işte: SAYI, BAĞLANTI, birincil düğme. `--ters` adı markup'ta
   duruyor (geriye dönük), yaptığı iş yok. */
.etiket--ters{color:var(--sonuk)}
.buyuk{font-size:var(--p6);line-height:.96;letter-spacing:-.03em;font-weight:800}
.orta{font-size:var(--p4);line-height:1.12;letter-spacing:-.01em;font-weight:700}
.giris{font-size:var(--p3);line-height:1.45;max-width:46ch;color:var(--sonuk)}
.not{font-size:var(--p0);line-height:1.5;color:var(--sonuk);max-width:52ch;margin-top:18px}
.sonuk{color:var(--sonuk)}
/* 320 px'te tek bir uzun sözcük sayfayı yana kaydırabiliyor. Önce
   punto iniyor; kırma yalnız son çare. */
.buyuk,.dev,.ara{overflow-wrap:break-word}
/* `.dev` ölçüsü yalnız ana sayfanın `.acilis h1`indeydi; 404 başlığı
   (iç sayfa CSS'i) tarayıcı varsayılanında 34 px kalıyordu. */
.dev{font-size:var(--dev);line-height:.94;letter-spacing:-.035em;font-weight:800}

/* ── düğme ─────────────────────────────────────────────────────── */
/* DİL TEK KAYNAK. İki stil sayfası bir zamanlar ZIT yazıyordu: burada
   köşe 999px ve birincil düğme BEYAZ, ötekinde köşe 2px ve birincil
   MAVİ. Aynı sınıf adı, zıt sonuç. `--ana`/`--cerceve` iç sayfaların
   eski sözlüğü, aynı iki role bağlı. */
.dg{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:2px;
  border:1px solid transparent;font-size:var(--p1);font-weight:700;
  letter-spacing:.01em;text-decoration:none;touch-action:manipulation;
  /* Renk geçişleri kısa ve düz; HAREKET yayla. Düğme parmağın
     altından kaçmıyor, yerine oturuyor. */
  transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(var(--bs,1));
  transition:background var(--h-kisa) var(--e-hizli),
             color var(--h-kisa) var(--e-hizli),
             border-color var(--h-kisa) var(--e-hizli),
             opacity var(--h-kisa) linear,
             transform var(--y-tepki-sure) var(--y-tepki)}
/* MIKNATIS. İmleç düğmeye yaklaşınca düğme ona doğru birkaç piksel
   yaslanıyor. Ölçü küçük (en çok 6 px) çünkü büyük olanı oyuncak
   gibi duruyor; hissedilen şey düğmenin "farkında" olması.
   `--mx/--my` betikten geliyor (`ortak.js`), yalnız gerçek imleçli
   cihazlarda ve hareket azaltılmamışsa. */
.dg:active{--bs:.965;transition-duration:var(--h-kisa)}
.dg--dolu,.dg--ana{background:var(--mavi);color:#fff;border-color:var(--mavi)}
.dg--dolu:hover,.dg--ana:hover{opacity:.88}
/* Kenarlık mürekkep rengiyle çizilince koyu zeminde kayboluyordu. */
.dg--bos,.dg--cerceve,.dg--ters{border-color:#FFFFFF3D;color:var(--murekkep)}
.dg--bos:hover,.dg--cerceve:hover,.dg--ters:hover{border-color:var(--mavi-acik);color:var(--mavi-acik)}
.dg--koyu{background:var(--murekkep);color:var(--gece);border-color:var(--murekkep)}
.dg--koyu:hover{background:var(--mavi-acik);border-color:var(--mavi-acik);color:var(--gece)}
.dgler,.serit-teklif__dgler{display:flex;flex-wrap:wrap;gap:12px}

/* ── üst menü ──────────────────────────────────────────────────── */
/* Menü hero'nun üstünde saydam duruyor, sayfa kayınca zemin kazanıyor.
   Gece sayfada opak bir şerit ilk ekranı ikiye bölüyordu. */
.nav{position:sticky;top:0;z-index:40;background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--h-orta) var(--e-giris),
             border-color var(--h-kisa) var(--e-giris),
             transform var(--h-orta) var(--e-cik)}
.nav.yapisik{background:#060D1EF0;border-bottom-color:var(--cizgi)}
@supports (backdrop-filter:blur(1px)){
  /* Yalnız yapışık durumda: sürekli açık bir bulanıklık katmanı her
     karede yeniden hesaplanıyor. */
  .nav.yapisik{background:#060D1EC7;backdrop-filter:blur(14px)}
}
.nav__ic{display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:var(--nav-ic)}
.nav__marka{display:inline-flex;align-items:center;min-height:46px}
/* LOGO DA `--genis` KALDIRACINA BAĞLI. Önce `clamp(26px,2.4vw,34px)`
   idi, yani 1417'den sonra 34 px'te DONUYORDU. Büyük ekranda sayfanın
   geri kalanı `--genis` ile büyürken logo sabit kaldığı için oransal
   olarak küçülüyordu: 2560'ta nav 77 px yüksekliğinde ve içindeki
   logo 34 px, yani üstünde ve altında 21'er px boşluk. Geri bildirimdeki
   "logo küçülmüş" şikâyeti bu.
   Artık `--en`, `--dev` ve `--p5` ile aynı kalıpta büyüyor.
   TAVAN 46 px, iki sebeple: kaynak 461×128 ve 2 kat piksel
   yoğunluklu ekranda 64 px'e kadar keskin kalıyor (yani 46 rahat);
   77 px'lik nav'da üstte ve altta 15'er px nefes kalıyor. */
/* 27 Eylül: telefonda 30 px'e iniyordu (genişlik 108 px) ve 48 px'lik
   menü düğmesinin yanında küçük kalıyordu (geri bildirim). Alt sınır 40 px:
   telefonda 144 px genişlik, 1440'ta 48 px. Tavan aynı (58). */
.nav__marka img{height:min(calc(clamp(40px,3.3vw,50px) + var(--genis) * 0.016), 58px);width:auto}
.nav__ana{display:flex;gap:clamp(14px,1.9vw,30px);align-items:center}
/* 40 px'ti, esik 44. Fareyle sorun degil ama kural kural. */
.nav__ana a{display:inline-flex}
.nav__ana a{align-items:center;min-height:44px;
  font-size:var(--p1);font-weight:600;padding:8px 0;
  border-bottom:1px solid transparent;transition:border-color var(--h-kisa)}
.nav__ana a:hover,.nav__ana a[aria-current]{border-bottom-color:var(--murekkep)}
/* Telefon ile "Teklif al" tek sağ grup: `space-between` dört öğeyi
   eşit dağıtıp numarayı menüyle düğme arasında havada bırakıyordu.
   Telefon menü bağlantısıyla aynı dilde; yalnız 1200 px ve üstü. */
.nav__sag{display:flex;align-items:center;gap:clamp(16px,1.6vw,26px)}
.nav__mobil{display:none;width:48px;height:48px;border:1px solid var(--cizgi);
  border-radius:999px;background:none;align-items:center;justify-content:center}
.nav__mobil i{display:block;width:18px;height:1px;background:var(--murekkep);
  position:relative}
.nav__mobil i::before,.nav__mobil i::after{content:"";position:absolute;left:0;
  width:18px;height:1px;background:var(--murekkep)}
.nav__mobil i::before{top:-6px}.nav__mobil i::after{top:6px}
/* Açıkken çarpı: üç çizginin ortası söner, ikisi 45 derece döner. */
.nav__mobil i,.nav__mobil i::before,.nav__mobil i::after{transition:transform var(--h-kisa) var(--e-cik),top var(--h-kisa) var(--e-cik),background var(--h-kisa)}
.nav__mobil[aria-expanded="true"] i{background:transparent}
.nav__mobil[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.nav__mobil[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
.mobilmenu{display:none}
@keyframes menuGir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:980px){
  .nav__ana{display:none}
  .nav__mobil{display:flex}
  /* Tablette (761-980) hızlı eylem kalmıyordu: alt çubuk yalnız telefonda.
     "Teklif al" menü düğmesinin solunda kalır, telefonda alt çubuk var. */
  .nav__sag>:not(.dg){display:none}
  .nav__sag{margin-left:auto;margin-right:12px}
  .mobilmenu{display:block;position:fixed;inset:var(--nav) 0 0;z-index:39;
    background:var(--kagit);overflow:auto;overscroll-behavior:contain}
  .mobilmenu__ic{min-height:100%;display:flex;flex-direction:column;
    padding-block:8px calc(24px + env(safe-area-inset-bottom))}
  .mobilmenu__bag a{display:grid;grid-template-columns:36px 1fr auto;align-items:center;
    padding:14px 0;border-bottom:1px solid var(--cizgi);
    font-size:clamp(22px,6.2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
  .mobilmenu__no{font-size:var(--p0);font-weight:700;letter-spacing:.12em;color:var(--sonuk)}
  .mobilmenu__bag i{font-style:normal;font-weight:400;color:var(--sonuk)}
  .mobilmenu__bag a[aria-current] :is(span,i){color:var(--mavi-acik)}
  /* Eylemler dipte: bağlantı listesi kısa da olsa uzun da olsa ekranın altı. */
  .mobilmenu__alt{margin-top:auto;padding-top:28px;display:grid;gap:10px}
  .mobilmenu__alt .dg{width:100%;min-height:54px}
  .mobilmenu__ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
  /* Kanal düğmeleri: simge üstte, ad altta; ray ve alt çubukla aynı
     simgeler (`iletisimIkon()`). Düz çerçeveli `.dg`ler dar hücrede
     "E-posta"yı tireden bölüyordu ve sade duruyordu. */
  .mobilmenu__kanal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    min-height:68px;padding:0 6px;background:var(--gece-2);border:1px solid var(--cizgi);border-radius:2px;
    color:#fff;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
    transition:border-color var(--h-kisa),background var(--h-kisa)}
  .mobilmenu__kanal:active{background:var(--gece-3);border-color:var(--mavi-acik)}
  .mobilmenu__kanal svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .mobilmenu__kanal svg.dolu{fill:#3FD07A;stroke:none}
  .mobilmenu__kunye{margin-top:6px;font-size:var(--p0);color:var(--sonuk);line-height:1.7}
  /* Menü kendi eylemlerini taşıyor; alt çubuk açıkken üstünü örtüyordu. */
  .menu-acik .elalti{display:none}
}
@media (max-width:760px){.nav__sag{display:none}}
@media (max-width:980px){
  /* Menü açıkken üst çubuk opak: yarı saydam zeminin arkasından sayfanın
     fotoğrafı görünüyor, çubuk ile menü iki ayrı parça gibi duruyordu. */
  .menu-acik .nav{background:var(--kagit);backdrop-filter:none}
  @media (prefers-reduced-motion:no-preference){
    .mobilmenu:not([hidden]) .mobilmenu__bag a{animation:menuGir .42s var(--e-cik) both;
      animation-delay:calc(var(--i) * 32ms)}
    .mobilmenu:not([hidden]) .mobilmenu__alt{animation:menuGir .42s var(--e-cik) .2s both}
  }
}

/* ── SAYFA İÇİ ŞERİT ───────────────────────────────────────────────
   Renault'nun araç sayfasındaki desen: üst menü yukarıda kalırken
   sayfanın kendi menüsü onun altına yapışıyor ve ürünün adıyla
   birlikte bölümleri ve tek eylemi taşıyor. Uzun ürün sayfasında
   ziyaretçi ne nerede olduğunu kaybediyor ne de teklife gitmek için
   dibe kadar kaydırıyor. */
/* MENÜDEKİ DÜĞME HER SAYFADA KALIR. Bir süre şerit varken
   gizleniyordu ve menü sayfa değişince 268 px zıplıyordu: ziyaretçi
   aynı kabuğun yer değiştirdiğini görüyor. Çözüm gizlemek değil,
   İKİ BİRİNCİL olmamak: şerittekinin dolgusu kalkıyor, menüdeki
   mavi kalıyor. Aynı anda tek bir mavi düğme. */
.syf__dg.dg--dolu{background:none;border-color:#FFFFFF3D;color:var(--murekkep)}
.syf__dg.dg--dolu:hover{border-color:var(--mavi-acik);color:var(--mavi-acik);opacity:1}
.syf{position:sticky;top:var(--nav);z-index:35;
  background:#060D1EF0;border-bottom:1px solid var(--cizgi)}
@supports (backdrop-filter:blur(1px)){
  .syf{background:#060D1EC7;backdrop-filter:blur(14px)}
}
.syf__ic{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);min-height:60px}
.syf__ad{font-size:var(--p1);font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.syf__yol{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);
  margin-left:auto;overflow-x:auto;scrollbar-width:none}
.syf__yol::-webkit-scrollbar{display:none}
/* `min-width` HER GENISLIKTE: kisa bir etiket ("Bilgi") 31 px
   kaliyordu ve esik yalniz boy degil EN de. Once yalniz telefon
   kuralina yazilmisti, masaustunde kusur duruyordu. */
.syf__yol a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  white-space:nowrap;font-size:var(--p1);font-weight:600;color:var(--sonuk);
  border-bottom:1px solid transparent;transition:color var(--h-kisa) linear}
.syf__yol a:hover{color:#fff}
.syf__dg{min-height:44px;padding:0 20px;font-size:var(--p0);white-space:nowrap}
/* Tablette ürün adı 22 ch'de kesiliyor, bağlantılar 3 px kayıyordu:
   ad kalan yeri alır, bölüm bağlantıları kısılmaz. */
@media (min-width:761px) and (max-width:1020px){
  .syf__ad{flex:1 1 auto;min-width:0;max-width:none}
  .syf__yol{flex:none}
}
@media (max-width:760px){
  /* ÜRÜN ADI TELEFONDA KALKIYOR. Üç parça alt alta düşünce şerit üç
     satır oluyordu: üst menü 76 px + şerit 120 px, yani 844 px'lik bir
     ekranın dörtte biri sabit kabuk. Ad zaten hemen yukarıdaki h1'de
     yazıyor; şeritte kalması gereken şey bölümler ve tek eylem. */
  .syf__ad{display:none}
  .syf__ic{gap:12px;min-height:52px}
  .syf__yol{margin-left:0;gap:16px}
  /* 40x31'di, eşik 44x44. Kısa bir etiket ("Bilgi") enine de eşiğin
     altına düşüyordu, o yüzden hem boy hem en veriliyor. */
  .syf__yol a{min-height:44px;min-width:44px;justify-content:center}
  /* DÜĞME DE KALKIYOR: telefonda ekranın dibinde zaten sabit bir
     çubuk var ve üçüncü hücresi "Teklif". Şeritte ikinci bir teklif
     düğmesi hem yer yiyor hem de bölüm bağlantılarının üstüne
     biniyordu. Şeritte kalan tek iş: nerede olduğunu söylemek. */
  .syf__dg{display:none}
  /* Kenardan solan kesim "buradan kaydırılıyor" demenin en sessiz
     yolu; keskin kesim yazı yarıda kalmış gibi duruyordu. */
  /* Yalnız gerçekten taşıyorsa (`ortak.js` `.tasiyor` ekliyor): taşmayan
     şeritte son bağlantının harfleri boşuna siliniyordu. */
  .syf__yol.tasiyor{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
    mask-image:linear-gradient(90deg,#000 90%,transparent)}
  .syf__yol.sonda{-webkit-mask-image:none;mask-image:none}
}

/* ── ALAN · tek alan bileşeni ──────────────────────────────────────
   Sitede üç ayrı alan biçimi vardı: hesap panosunda dolu kutu, teklif
   formunda başka ölçüde dolu kutu, iç sayfalarda alt çizgili saydam
   alan. Aynı işi yapan üç görüntü. Kazanan dolu kutu: koyu zeminde
   alt çizgi bir alan olduğunu söylemiyor, kutu söylüyor. */
.alan{margin:0;min-width:0}
.alan--genis{grid-column:1/-1}
/* YALNIZ `label`. Bir zamanlar `.alan>span` de etiket sayılıyordu
   (eski `<label class="alan"><span>` yazımı için). O yazım kalkınca
   kural kaldı ve hata satırını yakaladı: `.alan>span` (0,1,1)
   `.alan__hata`ı (0,1,0) eziyor, yani her hata satırı sayfa açılışında
   büyük harfli bir ETİKET olarak görünüyordu. */
.alan>label{display:block;font-size:var(--p0);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sonuk);margin-bottom:8px}
/* BIRIM ETIKETI AA ESIGININ ALTINDAYDI. Girdinin biriminin ne oldugunu
   soyleyen tek isaret (m², m) #FFFFFF54 idi: koyu zemin uzerinde
   olculen kontrast 3,00:1, esik 4,5:1. Yeni deger #FFFFFF85 ile
   5,67:1; hala ikincil duruyor ama okunuyor. */
.alan>label i{font-style:normal;text-transform:none;letter-spacing:0;color:#FFFFFF85}
.alan select,.alan input,.alan textarea{
  width:100%;font:inherit;font-size:var(--p2);color:#fff;
  background:var(--gece-3);border:1px solid var(--cizgi);border-radius:2px;
  padding:14px;min-height:56px;
  transition:border-color var(--h-kisa) linear}
.alan textarea{resize:vertical;line-height:1.5;min-height:118px}
.alan select{appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),
                   linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:right 18px center,right 12px center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.alan select:hover,.alan input:hover,.alan textarea:hover{border-color:#FFFFFF52}
.alan select:focus,.alan input:focus,.alan textarea:focus{border-color:var(--mavi-acik);outline:none}
/* Klavyeyle gelen odak yalnız 1 px kenar rengiyle belli oluyordu. */
.alan select:focus-visible,.alan input:focus-visible,.alan textarea:focus-visible{
  outline:2px solid var(--mavi-acik);outline-offset:2px}
/* #6E7A90 kutu zemininde 3,87:1'di (eşik 4,5). */
.alan input::placeholder,.alan textarea::placeholder{color:#8792A8}
/* İki kapı: betik varsa `.hatali` (telefon YA DA e-posta kuralını da
   kapsıyor), betik yoksa tarayıcının kendi `:user-invalid`i. Hata
   satırı açılışta GÖRÜNMEZ: sayfa açılır açılmaz üç kırmızı uyarı
   karşılıyordu. */
.alan__hata{display:none;margin-top:7px;font-size:var(--p0);color:#FF8A80}
.alan.hatali :is(input,select,textarea),
.alan :is(input,select,textarea):user-invalid{border-color:#FF8A80}
.alan.hatali .alan__hata,
.alan :is(input,select,textarea):user-invalid ~ .alan__hata{display:block}
.alan__ipucu{font-size:var(--p0);color:var(--sonuk);line-height:1.7;margin:-4px 0 0}
/* Cümle içindeki bağlantı dolguyla 44 px'e çıkıyor: WCAG cümle içi
   bağlantıyı muaf tutuyor ama `dokunma.mjs` bunu bilmiyor ve bilmesi
   de gerekmiyor; gerçekten 44 px yapmak kuralı gevşetmekten iyi. */
.alan__ipucu a{display:inline-block;padding-block:11px;color:var(--mavi-acik)}
/* Bal küpü: ekranda değil ama `display:none` da değil, yoksa bot
   doldurmaz. */
.tuzak{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* ── PANO · sayfanın üstünde duran cihaz ───────────────────────────
   Hesap makinesi, teklif formu ve aile ekseni AYNI gövde: kalkık
   zemin, ince kenarlık, içinde daha koyu bir OKUMA şeridi ve altta
   bir eylem şeridi. Üçü de tek bir makinenin yüzleri. */
.pano{position:relative;background:var(--gece-2);border:1px solid var(--cizgi);
  border-radius:3px;overflow:hidden}
/* Alan ızgarası: hesapta `<form>`un kendisi, teklifte formun içindeki
   kuşak; ikisi de aynı iki sütun. */
.pano__giris{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,24px);padding:clamp(22px,3vw,32px)}
/* ÖLÇÜ PANOSU · hesap makinesi. Üç girdisi kalın ve büyük: onlar
   okunan değil ÇEVRİLEN şey, cihazın kadranları. Teklif formunun
   alanları normal ağırlıkta kalır. */
.pano--olcu .alan select,.pano--olcu .alan input{font-size:var(--p3);font-weight:700;padding:0 14px}
/* Okuma şeridi panelin İÇİNDE daha koyu bir yüzey: girdiyle sonucun
   ayrıldığı yer gözle görülüyor. */
.pano__okuma{background:var(--gece);border-bottom:1px solid var(--cizgi);
  padding:clamp(22px,3vw,32px)}
.pano__etiket{font-size:var(--p0);letter-spacing:.14em;text-transform:uppercase;color:var(--sonuk)}
.pano__sayi{display:flex;align-items:baseline;gap:12px;margin:8px 0 0}
.pano__sayi span{font-size:clamp(46px,6.4vw,92px);font-weight:800;
  letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;
  transform-origin:0 50%;
  transition:transform var(--y-vurus-sure) var(--y-vurus)}
.pano__sayi small{font-size:var(--p2);font-weight:700;color:var(--sonuk)}
/* Sayı değiştiğinde vuruş: yayla taşıp yerine oturuyor. Eskiden
   sabit süreli bir ölçekti ve "bir şey oldu" demiyordu. */
.sonuc.vur .pano__sayi span{transform:scale(1.045);
  transition:transform var(--y-vurus-sure) var(--y-vurus)}
.pano__islem{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  margin:14px 0 0;font-size:var(--p2);font-weight:700;color:var(--mavi-acik)}
.pano__islem i{font-style:normal;font-weight:400;color:var(--sonuk)}
.sonuc__op{white-space:nowrap}
/* Eylem şeridi: solda künye ya da açıklama, sağda düğme. */
.pano__model{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px 20px;
  padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,32px);
  border-top:1px solid var(--cizgi)}
.pano__ad{margin-top:6px;font-size:var(--p2);color:var(--sonuk)}
.pano__ad a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--p3);font-weight:800;letter-spacing:-.02em;
  color:var(--mavi-acik);text-underline-offset:3px;margin-right:8px}
.pano__duzelt{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--p0);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sonuk);text-underline-offset:4px;margin-left:6px}
.pano__duzelt:hover{color:var(--mavi-acik)}
/* "çıkar" bir düğme: tarayıcının zemin, kenarlık ve yazı tipi
   varsayılanları "değiştir" bağlantısından farklı durmasın. */
button.pano__duzelt{background:none;border:0;padding:0;cursor:pointer}
.pano__kvkk{flex:1 1 240px;font-size:var(--p0);color:var(--sonuk);line-height:1.7;max-width:44ch}
.pano__kvkk a{color:var(--mavi-acik);display:inline-block;padding-block:11px}
.pano__mujde{margin-top:10px;font-size:var(--p2);color:#D7DDE8;max-width:40ch}
/* Sunucunun döndürdüğü hata listesi panonun İÇİNDE, en üstte:
   ziyaretçi düzelteceği alanların yanında görüyor. */
.pano__uyari{background:#3A0F0C;border-bottom:1px solid #FF8A8045;
  padding:clamp(18px,2.4vw,26px);font-size:var(--p1);color:#FFD9D4}
.pano__uyari b{display:block;margin-bottom:6px;color:#fff}
.pano__uyari ul{margin:0;padding-left:18px;list-style:disc}
.pano__uyari li{margin-top:4px}
@media (max-width:760px){
  .pano__giris{grid-template-columns:minmax(0,1fr)}
  .pano__model{flex-direction:column;align-items:stretch}
  .pano__model .dg{width:100%}
  /* `flex:1 1 240px` sütun yönünde 240 px'lik bir YÜKSEKLİK tabanı
     oluyordu: 44 px'lik KVKK satırının altında 196 px'lik boş bir kuyu
     kalıyor, ziyaretçi formun bittiğini sanıyordu. Ölçüldü. */
  .pano__kvkk{flex:0 0 auto;max-width:none}
}

/* ── DİP BİLGİ ─────────────────────────────────────────────────────
   Markup `dipIcerik()`ten geliyor; biçim de tek yerde olsun ki ikisi
   ayrışamasın. Üç kat: KAPANIŞ (sayfanın son sözü ve telefon, başlık
   ölçeğinde), DİZİN (üç sütun, sessiz), KÜNYE. */
.alt{background:var(--gece);color:#fff;border-top:1px solid var(--cizgi);
  padding-block:clamp(48px,7vh,88px)}
/* Düğmeler (`.dg`) hariç: açık mavi zeminli düğmede yazı da açık maviye dönüp kayboluyordu (10 Ekim). */
.alt a:not(.dg):hover{color:var(--mavi-acik)}
.alt__bas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  column-gap:clamp(24px,4vw,64px);row-gap:clamp(28px,4vh,40px);align-items:start;
  padding-bottom:clamp(34px,5vh,56px);border-bottom:1px solid var(--cizgi)}
/* Logo bağlantısının kutusu 38 px'ti; görsel küçük ama parmak hedefi
   eşiğin altında kalmasın. */
.alt__marka>a{display:inline-flex;align-items:center;min-height:44px}
.alt__marka img{display:block;width:min(calc(clamp(140px,12vw,168px) + var(--genis) * .05),230px);height:auto}
.alt__slogan{margin-top:16px;font-size:var(--p2);color:var(--sonuk);
  max-width:34ch;line-height:1.5}
.alt__cagri{min-width:0}
.alt__cagri-ust{font-size:var(--p0);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#FFFFFF8A}
/* `min-height` ŞART: 28 px'lik satırın kutusu 29 px ediyor, eşik 44. */
.alt__tel{margin-top:12px}
.alt__tel a{display:inline-flex;align-items:center;min-height:44px;
  font-size:clamp(28px,3.6vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.alt__dgler{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.alt__dgler .dg{min-height:48px;padding:0 22px;font-size:var(--p1)}
.alt__ust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3.2vw,44px);padding-block:clamp(30px,4.5vh,46px)}
/* Dokuz aile tek sütunda dip bilgiyi iki katına çıkarıyordu. */
.alt__ust dl:first-child{grid-column:span 2;columns:2;column-gap:clamp(18px,2.6vw,40px)}
.alt__ust dl:first-child dt{column-span:all}
/* Geniş ekranda beş blok tek satırda: 4 sütunda "Kurumsal" alta düşüp
   sağda boş bir satır bırakıyordu (27 Eylül, tam genişlik turu). */
@media (min-width:1200px){.alt__ust{grid-template-columns:repeat(5,minmax(0,1fr))}}
.alt dl{margin:0}
.alt dt{font-size:var(--p0);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#FFFFFF8A;margin-bottom:6px}
.alt dd{margin:0;font-size:var(--p1);overflow-wrap:anywhere}
/* Satır 44 px'in ALTINA İNEMEZ: dokunma eşiği. 9 px dolgu denendi,
   satır 39 px'e düştü ve `dokunma.mjs` üç bağlantıyı yakaladı.
   Dip bilgi masaüstünde 1010 px sürüyordu (aile sayfasının %35'i);
   kısalan şey satır değil, en uzun sütunun SATIR SAYISI: "Ürün
   aileleri" iki alt sütuna bölündü. */
.alt dd a{display:inline-flex;align-items:center;min-height:44px;
  padding-block:6px;min-width:44px;line-height:1.35}
.alt dd:not(:has(a)){padding:9px 0;color:#FFFFFFB8;line-height:1.5}
/* KONUM ŞERİDİ · harita + adres, dip bilginin kendi bandı.
   Gerekçe `dipIcerik()` içinde: dar sütunda harita okunmuyordu. */
.alt__konum{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(22px,3vh,32px) 0;border-top:1px solid var(--cizgi)}
/* SEÇİCİ `.alt .alt__harita` OLMAK ZORUNDA: `.alt dd a` satır
   bağlantısı için `inline-flex` + `min-width:44px` veriyor ve
   özgüllüğü daha yüksek. Ölçüldü: kare 350 px yerine 44x24'e
   ezilmişti. Şerit artık `dd` içinde değil ama kural yine de
   özgüllüğünü korusun, taşınırsa bozulmasın. */
.alt .alt__harita{display:block;min-height:0;min-width:0;padding:0;
  position:relative;border-radius:12px;overflow:hidden}
/* FİLTRE HAFİF. Önce `brightness(.84)` vardı ve dip bilginin gecesine
   uysun diye konmuştu; ama karartma sokak adlarını da bastırıyordu. */
.alt__harita img{display:block;width:100%;height:auto;aspect-ratio:520/260;
  object-fit:cover;filter:saturate(.92)}
.alt .alt__harita:hover img,.alt .alt__harita:focus-visible img{filter:none}
/* Etiket ÜSTTE: karenin alt şeridinde OSM katkı yazısı var ve ODbL
   gereği okunur kalmak zorunda. Dokunma hedefi 44 px'i karşılıyor. */
.alt__harita span{position:absolute;left:0;right:0;top:0;
  display:flex;align-items:center;min-height:44px;padding:0 14px;
  font-size:var(--p1);font-weight:600;color:#fff;
  background:linear-gradient(#0B0F1AD9,transparent)}
/* HARİTA KUTUSU · Google gömmesi. Dip bilgi şeridi (`.alt__harita--canli`)
   ve iletişim sayfasındaki kart (`.harita-kart`) AYNI kutu; ikisi de
   `dil.css`te olmak zorunda, çünkü ana sayfa `site.css` yüklemiyor.
   Önce iki ayrı blok ve aynı beş satırlık açıklamanın iki kopyası
   vardı; `07-bilgi/kararlar.md` 23 Eylül kuralı ("elle eşitlenen
   yeniden ayrışır") tam bu sınıf.

   1. ORAN KUTUDAN GELİR. `iframe` yerleşik 300x150 taşıyor ve
      `height:100%` bir `auto` satırda çözülmüyor; kutuya `aspect-ratio`
      verilip çerçeve `position:absolute; inset:0` ile dolduruyor.
      Ölçüldü: CLS 0,0000.
   2. ZEMİN KOYU. Google gömmesi beyaz açılıyor; geç yüklenen bir
      çerçeve dip bilginin gecesinde bir an parlıyordu. */
.alt__harita--canli,.harita-kart{position:relative;overflow:hidden;
  background:var(--harita-zemin);border:1px solid var(--cizgi);
  border-radius:12px;aspect-ratio:var(--harita-oran,16/9)}
.alt__harita--canli iframe,.harita-kart iframe{position:absolute;inset:0;
  width:100%;height:100%;border:0;display:block}
/* İletişim sayfasındaki kart tam genişlikte, o yüzden daha yatık. */
.harita-kart{--harita-oran:3/1}
/* 2560'ta harita 1412x794'e büyüyor, yanında 470 px boşluk kalıyordu. */
@media (min-width:1600px){.alt__harita--canli{--harita-oran:21/9}}
.alt__konum-yazi p{margin:0 0 6px;font-size:var(--p1);color:#FFFFFFB8;line-height:1.5}
.alt__konum-yazi .etiket{color:#FFFFFF8A;margin-bottom:10px}
.alt__konum-yazi .sonuk{color:#FFFFFF8A}
/* Yol tarifi düğmesi yazının yanında: canlı haritada karenin üstüne
   etiket koyamıyoruz (çerçevenin içi bize ait değil).
   İKİ SINIFLI SEÇİCİ, `!important` DEĞİL: yenmesi gereken kural
   `.alt__konum-yazi p` ve dört satır yukarıdaki `.etiket` aynı işi
   zaten böyle çözüyor. */
.alt__konum-yazi .alt__konum-dg{margin-top:16px}
@media (max-width:860px){
  .alt__konum{grid-template-columns:1fr;gap:16px}
  .alt__harita--canli,.harita-kart{--harita-oran:4/3}
}
.alt__ilce{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;
  margin:0;padding:clamp(20px,3vh,28px) 0;font-size:var(--p1);
  border-top:1px solid var(--cizgi)}
.alt__ilce>span{font-size:var(--p0);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#FFFFFF8A;margin-right:12px}
/* 10 px dolgu 43 px ediyordu, eşik 44. Bir piksel de olsa eşik eşiktir. */
/* Kısa ilçe adları ("Serik" 34 px) eşiğin altına düşüyordu; eşik
   yalnız boy değil EN de. Yatay dolgu değil asgari genişlik: cümlenin
   ritmi bozulmasın. */
.alt__ilce a{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:8px 0}
/* AYRAÇ NOKTASI KALKTI. İki kez düzeltilmeye çalışıldı ve iki kez
   geri geldi, çünkü her iki denemede de nokta BAĞLANTININ kendisine
   bağlıydı: `::after`ı kutunun dışına itmek onu satırdan çıkarmıyor.
   Ölçüldü: "Muratpaşa" sağ kenarı x=320, noktası x=328 ve satır orada
   bitiyor; "Döşemealtı" sağ kenarı x=369, noktası x=377, yani 370
   px'lik içerik sütununun dışında. Esnek bir satırda ayracı hiçbir
   konumlandırma kurtarmaz; ayıran şey artık boşluğun kendisi. */
.alt__ilce{gap:2px 22px}
.alt__son{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  padding-top:22px;border-top:1px solid var(--cizgi);
  font-size:var(--p0);color:#FFFFFF8A}
.alt__son a{display:inline-block;padding-block:15px}
/* Geliştirici imzası: en alt, ortada, ince çizgiyle ayrılmış; sönük durur, üzerine gelince açılır. */
/* Alt dolgu yok: `.alt` zaten kendi alt dolgusunu veriyor; üstüne eklenince
   imzanın altında ~110 px boşluk kalıyordu (Yusuf, 10 Ekim). İmza bandı kendi
   kendine yetsin diye .alt'ın alt dolgusu da imzadan sonra kısaltılıyor. */
.alt__imza{margin:0;padding:18px 0 0;border-top:1px solid var(--cizgi-ters);text-align:center}
.alt:has(.alt__imza){padding-bottom:22px}
.alt__imza a{display:inline-flex;align-items:center;gap:12px;color:var(--sonuk-ters);text-decoration:none;
  font-size:var(--p0);letter-spacing:.04em;opacity:.78;transition:opacity var(--h-kisa)}
.alt__imza a:hover,.alt__imza a:focus-visible{opacity:1}
.alt__imza img{height:28px;width:auto;display:block}
@media (max-width:900px){
  .alt__bas{grid-template-columns:minmax(0,1fr)}
  .alt__ust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alt__ust dl:first-child{grid-column:1/-1;columns:2}
  .alt__ust dl:last-child{grid-column:1/-1}
}
@media (max-width:560px){
  /* Etiket ilk bağlantıyla aynı satırda başlıyor, alttaki iki satır
     x=20'den; blok tırtıklı duruyordu. Etiket kendi satırına iniyor. */
  .alt__ilce>span{flex:0 0 100%;margin-right:0;margin-bottom:2px}
  .alt__ust{grid-template-columns:minmax(0,1fr)}
  .alt__ust dl:first-child{grid-column:auto;columns:1}
  .alt__ust dl:last-child{grid-column:auto}
  .alt__dgler .dg{flex:1 1 auto}
}

/* ── İLETİŞİM RAYI · masaüstü, sağ kenar ──────────────────────────
   1 Ekim (Umut): "iletişim bilgileri daima ekranda, önceki sitesindeki
   gibi". Eski sitenin hapları yuvarlak ve degradeliydi; burada sitenin
   kendi dili: köşeler keskin (düğmelerle aynı 2 px), zemin pano yüzeyi,
   tek vurgu mavi. Üstte dikey "Ücretsiz keşif" sekmesi. Değer (numara,
   adres) üzerine gelince ya da odaklanınca sola doğru açılıyor; kapalıyken
   ray 52 px, içeriğin kenar boşluğunun içinde kalıyor. */
.ray{display:none}
@media (min-width:761px){
  .ray{display:flex;flex-direction:column;align-items:flex-end;gap:6px;
    position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:44}
  .ray a{text-decoration:none;color:#fff}
  .ray__kesif{writing-mode:vertical-rl;transform:rotate(180deg);
    width:52px;padding:18px 0;display:flex;align-items:center;justify-content:center;
    background:var(--mavi);font-size:var(--p0);font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;border-radius:0 2px 2px 0;
    box-shadow:0 10px 28px -12px #1E6BFFAA;transition:background var(--h-kisa,.18s)}
  .ray__kesif:hover,.ray__kesif:focus-visible{background:#3D80FF}
  .ray__dg{display:flex;flex-direction:row-reverse;align-items:center;height:52px;
    background:var(--gece-2);border:1px solid var(--cizgi);border-right:0;
    border-radius:2px 0 0 2px;box-shadow:0 10px 28px -14px #000C;
    transition:background var(--h-kisa,.18s),border-color var(--h-kisa,.18s)}
  .ray__ikon{width:51px;height:50px;display:grid;place-items:center;flex:none}
  .ray svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .ray svg.dolu{fill:currentColor;stroke:none}
  .ray__dg--wa .ray__ikon{color:#3FD07A}
  .ray__et{display:grid;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
    transition:max-width .32s var(--e-yumusak,ease),opacity .2s,padding .32s;padding-left:0}
  .ray__et small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sonuk)}
  .ray__et b{font-size:var(--p1);font-weight:700}
  .ray__dg:hover,.ray__dg:focus-visible{background:var(--gece-3);border-color:var(--mavi)}
  .ray__dg:hover .ray__et,.ray__dg:focus-visible .ray__et{max-width:260px;opacity:1;padding-left:18px}
  .ray__dg:hover .ray__ikon,.ray__dg:focus-visible .ray__ikon{color:var(--mavi-acik)}
  .menu-acik .ray{display:none}
}
@media (min-width:761px) and (max-height:520px){.ray__kesif{display:none}}
@media (prefers-reduced-motion:reduce){.ray__et{transition:none}}

/* ── EL ALTI ÇUBUĞU · telefon ──────────────────────────────────────
   Eskiden yüzen iki hap vardı; zeminsiz oldukları için altlarındaki
   başlıkları örtüyorlardı. Tam genişlikte, opak, üç hücre; `body`ye
   alt dolgu verildiği için altında kalan bir şey de olmuyor. */
.elalti{display:none}
@media (max-width:760px){
  html:has(.syf){scroll-padding-top:calc(var(--nav) + 64px)}
  body{padding-bottom:74px}
  .elalti{display:grid;grid-template-columns:repeat(3,1fr) 1.35fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    /* Opak: `--cizgi` yarı saydamdı, hücre aralığından ve iPhone ev
       çizgisi payından arkadaki sayfa görünüyordu. */
    background:#1A2338;border-top:1px solid var(--cizgi);
    padding-bottom:env(safe-area-inset-bottom)}
  .elalti a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:58px;background:var(--gece-2);color:#fff;text-decoration:none;
    font-size:12px;font-weight:700;letter-spacing:.02em;text-align:center;line-height:1.15}
  .elalti svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .elalti svg.dolu{fill:#3FD07A;stroke:none}
  .elalti a.elalti__dg{font-size:13.5px;padding-inline:6px}
  /* `.elalti a` (0,1,1) tek sınıfı yeniyordu; hücre hiç mavi olmadı. */
  .elalti a.elalti__dg{background:var(--mavi)}
}
/* Sayı alanının yukarı/aşağı okları: dokunmatikte işe yaramıyor, kutunun
   sağında 20 px'lik gürültü. Klavye zaten sayı klavyesi (`inputmode`). */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* YAZARKEN (dokunmatik, `ortak.js` `yaziyor`): alt çubuk ve üst menü
   çekiliyor. Klavye açıkken görünür alan ~280 px; menü 77 + çubuk 55
   onun yarısını yiyordu ve iPhone'da sabit öğeler klavyeyle birlikte
   yerinden oynuyordu. Menü `transform` ile çekiliyor, yeri boşalmıyor:
   sayfanın hiçbir satırı kaymıyor. Çapa payı da menüsüz hâle iniyor. */
@media (hover:none) and (pointer:coarse){
  .yaziyor .elalti{display:none}
  .yaziyor .nav{transform:translateY(-100%)}
  html.yaziyor,html.yaziyor:has(.syf){scroll-padding-top:12px}
}
/* YATAY TELEFON: 343 px'lik ekranda menü + alt çubuk + şerit %54'ü
   yiyordu. Alt çubuk kalkar (menüde aynı eylemler var), şerit yapışmaz. */
@media (max-height:500px) and (min-aspect-ratio:3/2){
  .elalti{display:none}
  body{padding-bottom:0}
  .syf{position:static}
  /* Alt çubuk yokken "Teklif al" menüde görünür (tabletteki gibi). */
  .nav__sag{display:flex}
  html:has(.syf){scroll-padding-top:calc(var(--nav) + 12px)}
}

/* Görsel bulunamazsa `gorsel()` bunu basar; boş bir leke kalmasın. */
.gorselsiz{background:var(--gece-2);aspect-ratio:3/2}
.gorselsiz span{display:block}
/* Fotoğrafı henüz gelmemiş ürün kartında 369x277'lik iz bırakmayan bir
   delik vardı: zemin bölümle aynı renkteydi (28 Eylül, masaüstü
   incelemesi). Artık çerçeveli, ortasında kısa bir not. */
.gorselsiz{display:grid;place-items:center;background:#FFFFFF08;
  outline:1px dashed #FFFFFF2E;outline-offset:-1px}
.gorselsiz span::after{content:"Fotoğraf hazırlanıyor";font-size:var(--p0);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sonuk)}

/* ── SAYFALAR ARASI GEÇİŞ ──────────────────────────────────────────
   Tarayıcının kendi View Transitions'ı: kütüphane yok, betik yok, üç
   satır. Ürün kartına basınca kartın fotoğrafı ürün sayfasının büyük
   karesine DÖNÜŞÜYOR; iki sayfa arasında beyaz bir çakma olmuyor.
   Bağ `view-transition-name: urun-<slug>` ile kuruluyor ve o ad hem
   kartta hem ürün sayfasında yazılı (`parca.php`, `urun.php`).

   Desteklemeyen tarayıcıda hiçbir şey olmuyor: sayfa eskisi gibi
   geçiyor, tek bir kural bile bozulmuyor. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:var(--y-giris-sure);
  animation-timing-function:var(--y-giris)}
/* Kök geçiş kısa ve düz: uzun bir çapraz geçiş sayfayı yavaş
   gösteriyor. Asıl anlatan şey karenin dönüşmesi. */
::view-transition-old(root),::view-transition-new(root){
  animation-duration:var(--h-orta);animation-timing-function:linear}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ══ HAREKET AZALTILMIŞSA ══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}


/* ── REFERANS KURUMLAR · logo şeridi ve ızgara ───────────────────
   Logolar çoğunlukla beyaz zemin için çiziliyor; koyu sayfada her biri
   açık bir plakada duruyor. Şerit elle de kaydırılıyor (dokunma,
   tekerlek, klavye); kendiliğinden akışı `ortak.js` yapıyor. */
.kurum{display:flex;align-items:center;justify-content:center;height:84px;
  padding:14px 22px;background:#F4F6FA;border-radius:2px}
.kurum img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.82;transition:filter .25s,opacity .25s}
.kurum:hover img{filter:none;opacity:1}
.kurum--yazi b{color:#1A2338;font-size:var(--p1);font-weight:800;letter-spacing:-.01em;
  text-align:center;line-height:1.2}
.kurum-bant{position:relative;z-index:3;background:var(--gece);
  padding-block:clamp(26px,4vh,40px);border-bottom:1px solid var(--cizgi)}
.kurumlar__bas{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.kurumlar__tum{font-size:var(--p0);font-weight:700;color:var(--mavi-acik);text-decoration:none}
.kurumlar__tum:hover{text-decoration:underline}
.kurumlar__pist{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.kurumlar__pist::-webkit-scrollbar{display:none}
.kurumlar__pist:focus-visible{outline-offset:4px}
.kurumlar__liste{display:flex;gap:14px;margin:0;padding:0;list-style:none;width:max-content}
.kurumlar__liste li{flex:none;width:clamp(150px,16vw,200px)}
.kurum-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;
  margin:0;padding:0;list-style:none}
.kurum-izgara .kurum{height:120px}
.kurum-alt{margin-top:clamp(28px,4vw,44px)}

/* ── FOTOĞRAF BÜYÜTECİ (ortak.js) ─────────────────────────────── */
.buyutec{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:#03070FF2;color:#fff}
.buyutec::backdrop{background:#03070FCC}
.buyutec[open]{display:grid;place-items:center}
.buyutec img{max-width:min(92vw,1400px);max-height:84dvh;width:auto;height:auto;object-fit:contain}
.buyutec__say{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  font-size:var(--p0);color:var(--sonuk);letter-spacing:.08em}
.buyutec button{position:absolute;width:52px;height:52px;border:1px solid var(--cizgi);
  background:var(--gece-2);color:#fff;font-size:20px;cursor:pointer;border-radius:2px}
.buyutec button:hover{border-color:var(--mavi-acik);color:var(--mavi-acik)}
.buyutec__k{top:16px;right:16px}
.buyutec__o{top:50%;transform:translateY(-50%)}
.buyutec__o--g{left:16px}.buyutec__o--i{right:16px}
.buyutec.tek .buyutec__o{display:none}

/* ── akış şeması çizgileri (parca.php `akisSema()`) ──────────────
   İç sayfadaki aile kartları ve ana sayfadaki "Nerede ne kullanılır"
   satırları ortak kullanıyor; site.css'ten taşındı. */
.cz{fill:none;stroke:var(--murekkep);stroke-width:3;opacity:.25}
.cz--ince{stroke-width:1.6}
.ak,.tz{fill:none;stroke:var(--mavi);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:12 12}
.ak--g{stroke:var(--mavi-acik)}

/* ── KATALOG BAĞLANTISI (`katalogBag()`) · ana sayfa açılışı ve iç sayfalar ──
   site.css'teydi; ana sayfa da kullanınca ortak dosyaya taşındı. Köşeler
   sitenin düğme diliyle aynı (2 px). */
.katalog-bag{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:8px 18px 8px 8px;
  border:1px solid var(--cizgi);border-radius:2px;color:inherit;text-decoration:none;
  transition:border-color var(--h-kisa),background var(--h-kisa)}
.katalog-bag:hover{border-color:var(--mavi-acik);background:#FFFFFF0A}
.katalog-bag__ikon{display:grid;place-items:center;width:40px;height:40px;border-radius:2px;
  background:var(--mavi);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em}
.katalog-bag b{display:block;font-size:var(--p1);font-weight:700;line-height:1.25}
.katalog-bag small{display:block;font-size:var(--p0);color:var(--sonuk);margin-top:2px}