/* =============================================================================
   TETSA — arayüz
   =============================================================================
   PALET
     Nötrler saf gri DEĞİL: hepsinde hafif mavi-yeşil (çelik) yatkınlığı var.
     Saf #808080 "seçilmemiş" görünür; çelik yatkınlığı malzemeyi anlatır.
     Vurgu renkleri LOGODAN alındı ve DEĞİŞTİRİLMEDİ (#0060FF / #FF0000).
     Saf tonlar yalnız vurguda; geniş yüzeylerde derin karşılıkları kullanılır.

   TİPOGRAFİ
     Clash Display (başlık) + Satoshi (gövde) — Fontshare, ücretsiz ticari
     kullanım, kendi sunucumuzda (CSP font-src 'self').
     ⚠️ İkisi de DEĞİŞKEN DEĞİL: yalnız yüklenen ağırlıklar kullanılır
        (Clash 500/600/700 · Satoshi 400/500/700). Yüklenmemiş bir ağırlık
        istenirse tarayıcı SENTETİK bold üretir ve harfler bozulur.

   TEK TEMA — bilinçli. Endüstriyel katalog beyaz kağıtta okunur.
   Yine de her renk ve zemin AÇIKÇA boyanıyor, varsayılana güvenilmiyor.
   ============================================================================= */

/* ── YAZI TİPLERİ ─────────────────────────────────────────────────────────────
   Archivo DEĞİŞKEN: wght 100–900 VE wdth 62–125 tek dosyada.
   aynı dosyadan alıyoruz. Başlıklar %118 genişlikte (logodaki geniş TETSA
   harflerinin devamı), etiketler %78'de (teknik pafta etiketi gibi).

   IBM Plex Mono: teknik değerler, ölçüler, kodlar. Mühendislik dökümanının
   dili budur; "160 °C" ile "2,5 – 10 mm" alt alta gelince hizalanır.

   🔴 latin-ext ŞART: ğ(U+011F) ş(U+015F) İ(U+0130) orada.
   ============================================================================= */

/* Clash Display — başlıklar. Karakterli, geniş omuzlu, modern bir display
   ailesi; TETSA'nın geniş logotype'ıyla akraba durur ama sertliği yok.
   Satoshi — gövde ve arayüz. Geometrik iskelet + yüksek okunabilirlik.
   İkisi de Indian Type Foundry / Fontshare, ücretsiz ticari kullanım.
   Kendi sunucumuzda barındırılıyor (CSP font-src 'self'). */
@font-face { font-family: 'Clash Display'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../fonts/clash-500.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../fonts/clash-600.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('../fonts/clash-700.woff2') format('woff2'); }

@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../fonts/satoshi-400.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../fonts/satoshi-500.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('../fonts/satoshi-700.woff2') format('woff2'); }

/* ── JETONLAR ─────────────────────────────────────────────────────────────────
   Nötrler saf gri DEĞİL: hepsinde hafif mavi-yeşil (çelik) yatkınlığı var.
   Saf #808080 "seçilmemiş" görünür; çelik yatkınlığı malzemeyi anlatır.
   ============================================================================= */
:root {
  /* Çelik nötrleri — soğuk yatkınlıklı */
  --celik-950: #000000;
  --celik-900: #0A0A0A;
  --celik-800: #16202B;
  --celik-700: #223141;
  --celik-500: #4C5F73;
  --celik-400: #6E8298;
  --celik-300: #98A8BA;
  --celik-200: #C4CFDA;
  --celik-100: #DFE6ED;
  --celik-050: #F0F4F7;
  --kagit:     #FFFFFF;

  /* Isı ekseni — logodan. Saf tonlar VURGUDA kalır, yüzeyde derin karşılıkları
     kullanılır (saf #FF0000 geniş alanda ucuz görünür). */
  --soguk:       #0060FF;   /* logo mavisi — dokunulmadı */
  --soguk-derin: #0039A6;
  --soguk-sis:   #E8F0FF;
  --sicak:       #FF0000;   /* logo kırmızısı — dokunulmadı */
  --sicak-derin: #C41200;
  --sicak-sis:   #FFECEA;

  --olcu: 1180px;

  /* Çift katmanlı gölge: yakın kenar + uzak yayılım. Tek katman "yapışkan"
     görünür. Rengi siyah değil çelik lacivertinden — zeminle aynı aileden. */
  --golge:       0 1px 2px rgba(8,20,40,.06), 0 6px 20px rgba(8,20,40,.07);
  --golge-guclu: 0 2px 4px rgba(8,20,40,.08), 0 16px 40px rgba(8,20,40,.14);

  --f-baslik: 'Clash Display', 'Segoe UI', system-ui, sans-serif;
  --f-govde:  'Satoshi', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--celik-900);
  font-family: var(--f-govde);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--f-baslik); line-height: 1.12; font-weight: 600; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--soguk-derin); }

.kap { width: 100%; max-width: var(--olcu); margin: 0 auto; padding: 0 28px; }
.kap-dar  { max-width: 760px; }
.kap-orta { max-width: 900px; }

.atla { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--celik-950); color: #fff; padding: 12px 20px; }
.atla:focus { left: 0; }

:focus-visible { outline: 2px solid var(--soguk); outline-offset: 3px; }

/* ── ETİKET ───────────────────────────────────────────────────────────────── */
.etiket-mono {
  font-family: var(--f-govde); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}

/* ── ÜST ──────────────────────────────────────────────────────────────────── */
.ust { background: var(--kagit); border-bottom: 1px solid var(--celik-100); position: sticky; top: 0; z-index: 50; }
.ust-ic { display: flex; align-items: center; gap: 18px; min-height: 74px; }

.logo { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo img { width: auto; height: 38px; display: block; }

/* ⚠️ `flex-wrap: wrap` KALDIRILDI. Sarmalayınca menü sessizce ikinci satıra
   düşüyordu: "İletişim" alta kayıyor, üst bar iki kat yükseliyordu (ölçüldü,
   ekran görüntüsü). Sarmak bir çözüm değil, taşmayı gizlemek.
   Menü tek satırda kalacak kadar sıkıştırıldı; dar ekranda zaten
   1100px altında açılır paneller, 900px altında arama gizleniyor. */
/* 🔴 `flex-wrap: wrap` TEMEL KURALDA — medya sorgusuna bırakılmaz.
   Ölçüldü 2026-08-13: 820 px (iPad) genişlikte menü 858 px'e taşıyordu;
   düzeltme yalnız 720 px altına yazılmıştı ve tablet o kuralın DIŞINDA
   kalıyordu. Sarmalama her genişlikte doğru davranış: sığıyorsa tek satır
   kalır, sığmıyorsa alta iner — hiçbir boyutta ekran dışına çıkmaz.
   ⇒ Denetleyen: node tasma-olc.mjs (4 aygıt × 20 sayfa, taşma = 0) */
.menu { display: flex; align-items: center; gap: 17px; margin-left: auto; flex-wrap: wrap; row-gap: 10px;
  flex-wrap: nowrap; }
.menu > a, .menu-kalem > a { white-space: nowrap; }
.menu a {
  color: var(--celik-700); text-decoration: none;
  font-size: 13px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--celik-950); border-bottom-color: var(--celik-300); }
.menu a[aria-current="page"] { color: var(--celik-950); border-bottom-color: var(--sicak); }

/* ── DÜĞMELER — keskin köşe, endüstriyel ──────────────────────────────────── */
.dugme {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  font-family: var(--f-baslik); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 13px 22px; border-radius: 0;
  transition: background .14s, color .14s, border-color .14s;
}
.dugme-vurgu { background: var(--sicak-derin); color: #fff; }
.dugme-vurgu:hover { background: var(--sicak); }
.dugme-cizgi { border-color: var(--celik-200); color: var(--celik-900); background: transparent; }
.dugme-cizgi:hover { border-color: var(--celik-950); }
.dugme-cizgi-acik { border-color: rgba(255,255,255,.34); color: #fff; background: transparent; }
.dugme-cizgi-acik:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.dugme-buyuk { padding: 17px 30px; font-size: 15px; }

/* ── KAHRAMAN SLIDER ──────────────────────────────────────────────────────────
   Firmanın kendi üretim fotoğrafları tam kaplar; metin CAM PANELİN içinde durur.
   Panel süs değil: fotoğraf üstünde yazı okunmaz, panel metne sabit zemin verir.
   ============================================================================= */
.slayt { position: relative; background: var(--celik-950); overflow: hidden; }
.slayt-raylar { position: relative; }

.slayt-oge { position: relative; display: none; }
.slayt-oge.etkin { display: block; }
/* JS yokken ilk slayt zaten .etkin — site bozulmaz */

.slayt-ortam {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}

  55%  { -webkit-mask-position: -35% 0; mask-position: -35% 0; }
  100% { -webkit-mask-position: -35% 0; mask-position: -35% 0; }
}


/* Fotoğrafın üstüne kontrast perdesi: metin her fotoğrafta okunur kalsın */
.slayt-oge::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(100deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.92) 34%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.3) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 10px);
}

.slayt-ic {
  position: relative; z-index: 3;
  min-height: clamp(460px, 62vh, 620px);
  display: flex; align-items: center;
  padding-top: 64px; padding-bottom: 64px;
}
.slayt-panel { max-width: 620px; }

.slayt-adim { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.slayt-adim-no {
  font-family: var(--f-govde); font-size: 13px; font-weight: 600;
  color: var(--sicak); letter-spacing: .1em;
}
.slayt-cizgi { display: block; width: 54px; height: 1px; background: rgba(255,255,255,.32); }

.slayt-ust {
  font-family: var(--f-govde); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
  margin-bottom: 16px;
}
.slayt-baslik {
  font-size: clamp(36px, 5.6vw, 74px); font-weight: 600;
  letter-spacing: -.014em; line-height: .98; color: #fff;
  text-transform: uppercase; text-wrap: balance;
}
.slayt-alt {
  margin-top: 18px; max-width: 46ch; font-size: 17.5px; line-height: 1.6;
  color: rgba(255,255,255,.9);
}
.slayt-dugmeler { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Kontroller — JS yokken gizli */
.slayt-kontrol { display: none; }
.slayt.js-acik .slayt-kontrol {
  display: flex; align-items: center; gap: 14px;
  position: absolute; left: 0; right: 0; bottom: 30px; z-index: 4;
}
.slayt-ok, .slayt-durdur {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3);
  color: #fff; cursor: pointer; padding: 0;
  transition: background .15s, border-color .15s;
}
.slayt-ok:hover, .slayt-durdur:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.slayt-durdur { margin-left: auto; }
.slayt-durdur-ikon { width: 11px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.slayt.duraklatildi .slayt-durdur-ikon {
  width: 0; height: 0; border: 0;
  border-left: 11px solid currentColor; border-top: 7px solid transparent;
  border-bottom: 7px solid transparent; margin-left: 3px;
}

.slayt-noktalar { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.slayt-noktalar button {
  display: block; padding: 8px 0; background: none; border: 0; cursor: pointer;
}
.slayt-noktalar span { display: block; width: 30px; height: 2px; background: rgba(255,255,255,.34); transition: background .15s; }
.slayt-noktalar [aria-selected="true"] span { background: var(--sicak); }

.slayt-ilerleme { position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,255,255,.12); z-index: 3; }
.slayt-ilerleme span { display: block; height: 100%; background: var(--sicak);
  transform: scaleX(0); transform-origin: left; }


/* ── ÖLÇÜ ŞERİDİ (sayılar) ────────────────────────────────────────────────────
   Ölçü çizgisi estetiği: her değer bir kot, altında mono birim etiketi.
   ============================================================================= */
.sayilar { background: var(--celik-900); color: #fff; border-top: 1px solid rgba(255,255,255,.09); }
.sayilar-ic { display: grid; grid-template-columns: repeat(4, 1fr); }
.sayi { padding: 34px 26px 36px; border-right: 1px solid rgba(255,255,255,.1); position: relative; }
.sayi:last-child { border-right: 0; }
/* Ölçü işareti — üstte kısa dikey çizgi */
.sayi::before { content: ""; position: absolute; top: 0; left: 26px; width: 28px; height: 2px; background: var(--sicak); }
.sayi-buyuk {
  display: block; font-family: var(--f-baslik); font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sayi-birim { font-family: var(--f-govde); font-size: 15px; font-weight: 500; color: var(--sicak);
  margin-left: 6px; letter-spacing: .02em; text-transform: lowercase; }
.sayi-etiket {
  display: block; margin-top: 12px; font-size: 14px; line-height: 1.4;
  color: rgba(255,255,255,.62); letter-spacing: 0;
}

/* ── BÖLÜM ────────────────────────────────────────────────────────────────── */
.bolum { padding: 78px 0; }
.bolum-acik { background: var(--celik-050); }

/* Koyu bölüm — sayfaya ritim veren şey bu.
   Ölçülmüş referans (kelvion.com, sektör lideri): siyah ve beyaz bölümler
   sırayla geliyor; her bölüm aynı zeminde olduğunda sayfa tek bir uzun
   yüzeye dönüşüyor ve okuyanın nerede olduğu kayboluyor. */
.bolum-koyu { background: var(--celik-950); color: #fff; }
.bolum-koyu .bolum-baslik { color: #fff; }
.bolum-koyu .bolum-ozet { color: rgba(255,255,255,.66); }
.bolum-koyu .etiket-mono { color: #fff; }
.bolum-koyu .etiket-mono::before { border-color: var(--sicak); }
.bolum-koyu .referans { background: transparent; box-shadow: none;
  border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.82); }

.bolum-bas { max-width: 640px; margin-bottom: 40px; }

/* Bölüm etiketi KESİT İŞARETİ ile geliyor.
   Mühendislik paftasında kesit alınan yer kalın bir çizgi ve uçlarındaki
   dikey tiklerle gösterilir (A-A kesiti). Buradaki işaret o dilden alındı:
   dekoratif bir çizgi değil, "buradan kesit" demek. */
.bolum-bas .etiket-mono {
  color: var(--sicak-derin); display: flex; align-items: center; gap: 11px;
  margin-bottom: 15px;
}
.bolum-bas .etiket-mono::before {
  content: ""; width: 26px; height: 7px; flex: 0 0 auto;
  border-left: 2px solid var(--sicak); border-right: 2px solid var(--sicak);
  border-bottom: 1px solid var(--sicak);
}
.bolum-baslik {
  font-size: clamp(30px, 4.4vw, 54px); font-weight: 600;
  line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase;
  text-wrap: balance;
}
.bolum-ozet { margin-top: 15px; color: var(--celik-500); font-size: 17px; }

/* ── ÜRÜN KARTLARI ────────────────────────────────────────────────────────────
   Fotoğraf önce gelir. Elde 164 gerçek üretim fotoğrafı var (ölçüm 2026-08-12);
   bir ürünü anlatan en hızlı şey onun kendi resmidir, kart metni değil.
   ============================================================================= */
.kartlar { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(282px, 1fr)); }
.kart {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--kagit); border-radius: 3px; overflow: hidden;
  box-shadow: var(--golge);
  transition: box-shadow .2s, transform .2s;
}
.kart:hover { box-shadow: var(--golge-guclu); transform: translateY(-3px); }
.kart-gorsel { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--celik-100); }
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.kart:hover .kart-gorsel img { transform: scale(1.045); }

.kart-govde { display: flex; flex-direction: column; padding: 18px 20px 0; flex: 1; }

/* Grup etiketi — ürünün hangi aileye ait olduğunu kartta söyler.
   13 kalemin 10'u iki büyük gruba ait; grup adı olmadan liste düz bir yığın. */
.kart-grup {
  font-family: var(--f-govde); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--celik-400);
  margin-bottom: 7px;
}
.kart-baslik { font-size: 17.5px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.005em; color: var(--celik-950); }

/* 🔴 Metin SATIRA göre kırpılıyor, karaktere göre değil.
   Karakter sınırı ("…108. karakterde kes") cümleyi ortadan bölüyordu ve
   kartlar farklı yüksekliklerde kalıyordu — ızgara düzensiz görünür.
   3 satır clamp: hem cümle doğal yerinde biter hem kartlar hizalanır. */
.kart-ozet {
  font-size: 14.5px; color: var(--celik-500); line-height: 1.5; margin-top: 7px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Alt kenar eylemi: yuvarlak ok düğmesi kaldırıldı — tek başına duruyor ve
   kartın altında amaçsız bir boşluk bırakıyordu. Yerine kart genişliğinde
   ince bir ayraç + metin: tıklanacak yer belli, hizalama bozulmuyor. */
.kart-ok {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 0 16px; margin-top: 16px;
  border-top: 1px solid var(--celik-100);
  font-family: var(--f-govde); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--soguk-derin);
}
.kart-ok svg { transition: transform .2s; }
.kart:hover .kart-ok svg { transform: translateX(4px); }



/* ── ŞERİT ÇAĞRI — fotoğraf üstünde ───────────────────────────────────────── */
.serit { position: relative; background: var(--celik-950); color: #fff; overflow: hidden; }
/* Zemin <img> olarak geliyor (CSP inline stili reddediyor — bkz. şablon notu) */
.serit-zemin {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .32; z-index: 0;
}
.serit::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(92deg, rgba(6,12,20,.93) 18%, rgba(6,12,20,.55) 100%);
}
.serit-ic { position: relative; z-index: 1; padding: 68px 28px; display: flex; align-items: center;
  gap: 44px; justify-content: space-between; flex-wrap: wrap; }
.serit-etiket { color: #8FBEFF; display: block; margin-bottom: 13px; }
.serit-baslik { font-size: clamp(27px, 3.8vw, 46px); font-weight: 600; line-height: 1.02;
  letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.serit-ozet { margin-top: 14px; color: rgba(255,255,255,.76); max-width: 56ch; }

/* Geriye dönük: eski .cagri sınıfı hâlâ bazı sayfalarda olabilir */
.cagri { background: var(--celik-950); color: #fff; }
.cagri-ic { padding: 56px 28px; display: flex; align-items: center; gap: 40px;
  justify-content: space-between; flex-wrap: wrap; }
.cagri-baslik { font-size: clamp(24px, 3vw, 33px); font-weight: 700; letter-spacing: -.008em; }
.cagri-ozet { margin-top: 13px; color: rgba(255,255,255,.7); max-width: 58ch; }

/* ── SABİT HIZLI EYLEM ────────────────────────────────────────────────────── */
.hizli {
  position: fixed; bottom: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-radius: 999px; text-decoration: none;
  font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(6,12,20,.22);
  transition: transform .16s, box-shadow .16s;
}
.hizli:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(6,12,20,.3); }
.hizli-tel { left: 22px; background: var(--celik-950); color: #fff; }
.hizli-wa  { right: 22px; background: #25D366; color: #06331A; }
@media (max-width: 560px) {
  .hizli-yazi { display: none; }
  .hizli { padding: 14px; }
}


/* ── İZLEK ────────────────────────────────────────────────────────────────── */
.izlek { background: var(--celik-050); border-bottom: 1px solid var(--celik-100); }
.izlek .kap { padding-top: 13px; padding-bottom: 13px;
  font-family: var(--f-govde); font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--celik-400); }
.izlek a { color: var(--celik-500); text-decoration: none; }
.izlek a:hover { color: var(--soguk-derin); }
.izlek span[aria-hidden] { margin: 0 9px; color: var(--celik-300); }

/* ── ÜRÜN DETAY ───────────────────────────────────────────────────────────── */
.urun { padding: 44px 0 78px; }
.urun-baslik { font-size: clamp(28px, 4vw, 48px); font-weight: 600; line-height: 1.02;
  letter-spacing: -.012em; margin-bottom: 32px; text-transform: uppercase; text-wrap: balance; }
.urun-duzen { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  gap: 46px; align-items: start; }

/* Ürün görselleri */
.urun-gorseller { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); margin-bottom: 30px; }
.urun-gorsel { margin: 0; background: var(--celik-050); overflow: hidden;
  border: 1px solid var(--celik-100); }
.urun-gorsel img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.urun-gorsel:hover img { transform: scale(1.03); }

/* ── GÖRSEL BÜYÜTME ───────────────────────────────────────────────────────
   Açma düğmesi görselin KENDİSİ: ayrı bir "büyüt" ikonu koymak, ziyaretçinin
   zaten denediği hareketi (görsele tıklamak) yok sayardı.
   ⚠️ `.buyutulur` sınıfını JS ekliyor — JS kapalıyken imleç değişmez ve
      görsel tıklanabilir GÖRÜNMEZ. */
.gorsel-ac { display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; }
.gorsel-ac.buyutulur { cursor: zoom-in; }
.gorsel-ac img { display: block; width: 100%; }
.gorsel-ac:focus-visible { outline: 2px solid var(--sicak-derin); outline-offset: 3px; }

/* Büyüteç simgesi yalnız üstüne gelince beliriyor: her karenin köşesinde
   duran bir ikon, ürün fotoğrafını gölgeler. */
.urun-gorsel .gorsel-ac.buyutulur, .urun-kapak-buyuk .gorsel-ac.buyutulur { position: relative; }
.urun-gorsel .gorsel-ac.buyutulur::after,
.urun-kapak-buyuk .gorsel-ac.buyutulur::after {
  content: ''; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px;
  opacity: 0; transition: opacity .18s ease;
  background: rgba(12,14,16,.72) center / 15px 15px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
}
.urun-gorsel .gorsel-ac.buyutulur:hover::after,
.urun-gorsel .gorsel-ac.buyutulur:focus-visible::after,
.urun-kapak-buyuk .gorsel-ac.buyutulur:hover::after,
.urun-kapak-buyuk .gorsel-ac.buyutulur:focus-visible::after { opacity: 1; }

/* ── BÜYÜTME PENCERESİ ────────────────────────────────────────────────────
   ⚠️ `::backdrop` tarayıcının kendi arka planı — ayrı bir örtü `<div>`'i
      yazılsaydı z-index savaşı ve kaydırma sızıntısı başlardı.
   ⚠️ Görsel `max-height: 88vh`: uzun bir fotoğraf ekranı taşırıp kapatma
      düğmesini görünmez yapmasın. */
.buyutec { padding: 0; border: 0; background: none; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%; overflow: hidden; }
.buyutec::backdrop { background: rgba(8,10,12,.92); }
.buyutec-ic { position: relative; width: 100%; height: 100%;
  display: grid; place-items: center; padding: 40px 64px 56px; }
.buyutec-gorsel { max-width: 100%; max-height: 88vh; width: auto; height: auto;
  object-fit: contain; display: block; background: #0C0E10; }

.buyutec-kapat, .buyutec-ok { position: absolute; display: grid; place-items: center;
  cursor: pointer; border: 0; background: rgba(255,255,255,.10); color: #fff;
  transition: background .16s ease; }
.buyutec-kapat:hover, .buyutec-ok:hover { background: var(--sicak-derin); }
.buyutec-kapat:focus-visible, .buyutec-ok:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; }

.buyutec-kapat { top: 18px; right: 18px; width: 42px; height: 42px; }
.buyutec-kapat svg { width: 19px; height: 19px; }
.buyutec-ok { top: 50%; transform: translateY(-50%); width: 46px; height: 76px; }
.buyutec-ok svg { width: 22px; height: 22px; }
.buyutec-onceki { left: 12px; }
.buyutec-sonraki { right: 12px; }
.buyutec-ok[hidden] { display: none; }

.buyutec-sayac { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0;
  text-align: center; color: rgba(255,255,255,.72); font-size: 12.5px;
  font-weight: 700; letter-spacing: .14em; }

/* Dar ekran: oklar alta iner, görsele yer kalsın. */
@media (max-width: 640px) {
  .buyutec-ic { padding: 52px 12px 76px; }
  .buyutec-ok { top: auto; bottom: 14px; transform: none; width: 54px; height: 42px; }
  .buyutec-onceki { left: 22%; }
  .buyutec-sonraki { right: 22%; }
  .buyutec-sayac { bottom: 62px; }
}
.urun-ozet { font-size: 18.5px; line-height: 1.6; color: var(--celik-800); }
.urun-govde { margin-top: 20px; color: var(--celik-500); }
.urun-govde p { margin-bottom: 14px; }

/* Teknik döküm — sayfanın en önemli parçası. Mühendis buraya bakar,
   o yüzden bir pafta cetveli gibi dizildi: mono, hizalı, ince çizgili. */
.urun-sag { position: sticky; top: 94px; display: grid; gap: 22px; }
.teknik, .uygulama { border: 1px solid var(--celik-200); background: var(--kagit); }
.teknik-baslik {
  font-family: var(--f-govde); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--celik-500);
  padding: 14px 18px; border-bottom: 1px solid var(--celik-200);
  background: var(--celik-050); margin: 0;
}
.teyit-serit { margin: 0; padding: 13px 18px; background: #FFF8E6;
  border-bottom: 1px solid #EAD08A; font-size: 13px; line-height: 1.5; color: #6A4B00; }

.teknik-liste { margin: 0; }
.teknik-satir { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline;
  padding: 12px 18px; border-bottom: 1px solid var(--celik-100); }
.teknik-satir:last-child { border-bottom: 0; }
.teknik-satir-cok { grid-template-columns: 1fr; }
.teknik-ad { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--celik-500); }
.teknik-deger { margin: 0; text-align: right;
  font-family: var(--f-govde); font-size: 13.5px; font-weight: 600; color: var(--celik-950);
  font-variant-numeric: tabular-nums; }
.teknik-satir-cok .teknik-deger { text-align: left; margin-top: 9px; display: grid; gap: 5px; }
.teknik-kosullu { display: flex; justify-content: space-between; gap: 14px;
  background: var(--celik-050); padding: 7px 10px; border-left: 2px solid var(--soguk); }
.teknik-kosul { font-family: var(--f-baslik); font-size: 12.5px; font-weight: 500; color: var(--celik-500); }
.teknik-sayi { white-space: nowrap; }
.teknik-duz { display: block; }

.etiketler { list-style: none; margin: 0; padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.etiket { font-family: var(--f-govde); font-size: 11.5px; padding: 5px 10px;
  background: var(--celik-050); border: 1px solid var(--celik-100); color: var(--celik-700); }

.urun-cta { background: var(--celik-950); color: #fff; padding: 24px; }
.urun-cta-ozet { font-size: 14.5px; color: rgba(255,255,255,.75); margin-bottom: 16px; }

/* ── FORM ─────────────────────────────────────────────────────────────────── */
.form { display: grid; gap: 19px; margin-top: 6px; }
.form-satir { display: grid; gap: 19px; grid-template-columns: 1fr 1fr; }
.form-alan { display: grid; gap: 7px; }
.form-alan label { font-family: var(--f-govde); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--celik-500); }
.zorunlu { color: var(--sicak-derin); }

.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea {
  font-family: var(--f-baslik); font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--celik-200); border-radius: 0;
  background: var(--kagit); color: var(--celik-950); width: 100%;
}
.form input:focus, .form textarea:focus { border-color: var(--soguk); outline: 2px solid rgba(0,96,255,.16); outline-offset: 0; }
.form textarea { resize: vertical; line-height: 1.6; }
.form-not { font-size: 13px; color: var(--celik-400); margin-top: -6px; }

.form-kutu { border: 1px solid var(--celik-200); padding: 18px 20px 20px; margin: 0; }
.form-kutu legend { font-family: var(--f-govde); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: 0 8px; color: var(--celik-500); }
.onay-izgara { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(228px,1fr)); }
.onay { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; cursor: pointer; }
.onay input { margin-top: 3px; accent-color: var(--soguk); }

.uyari { padding: 15px 18px; margin-bottom: 26px; font-size: 15px; border: 1px solid; }
.uyari ul { margin: 8px 0 0; padding-left: 20px; }
.uyari-basarili { background: #E9F6EC; border-color: #94CFA6; color: #10431F; }
.uyari-hata { background: var(--sicak-sis); border-color: #F0A9A4; color: #7A1512; }

/* ── METİN ────────────────────────────────────────────────────────────────── */
.metin { font-size: 17.5px; line-height: 1.72; color: var(--celik-700); }
.metin p { margin-bottom: 18px; }

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.hata-sayfa { text-align: center; }
.hata-kod { display: block; color: var(--sicak-derin); margin-bottom: 14px; }
.hata-sayfa .bolum-baslik::after { left: 50%; transform: translateX(-50%); }
.hata-sayfa .bolum-ozet { margin-left: auto; margin-right: auto; }
.hata-dugmeler { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── BOT TUZAĞI (honeypot) ────────────────────────────────────────────────────
   🔴 Bu kural GÖRSEL BİR TERCİH DEĞİL, spam korumasının kendisidir.
   Alan ekranda görünürse gerçek ziyaretçi doldurur, talebi spam işaretlenir ve
   TETSA'ya e-posta gitmez — sessiz kayıp.
   `display:none` KULLANILMAZ: bazı botlar gizli alanları atlar; ekran dışına
   taşımak daha etkilidir. Ekran okuyucular için aria-hidden + tabindex=-1 var.
   ⛔ Bu bloğu silme ya da inline style'a geri taşıma (CSP reddeder).
   ============================================================================= */
.bal-kupu {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── DAR EKRAN ────────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  /* 🔴 ÜST BAR BURADA SARMALANIR — kural 720 px'de yazılıydı ve TABLET
     (820 px) o kuralın dışında kalıyordu: menü 858 px'e taşıyor, son iki
     kalem ekran dışında kalıyordu. Ölçüm 20 tablet sayfasının 20'sinde
     aynı 247 px taşmayı gösterdi.
     ⚠️ `.menu`'ye tek başına `flex-wrap` yetmez: menü, üst barın İÇİNDE bir
        öğe; kendi içi sarmalansa da bar tek satırda kaldığı sürece toplam
        genişlik aşılır. Menü kendi satırına inmeli. */
  .ust-ic { flex-wrap: wrap; gap: 13px; min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  .menu { order: 3; width: 100%; margin-left: 0; gap: 15px; }
  .ust-arama { display: grid; order: 2; }

  .surec-ic { grid-template-columns: 1fr; gap: 30px; padding-top: 46px; padding-bottom: 46px; }
  .urun-duzen { grid-template-columns: 1fr; gap: 32px; }
  .urun-sag { position: static; }
  .alt-ic { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .sayilar-ic { grid-template-columns: repeat(2, 1fr); }
  .sayi:nth-child(2) { border-right: 0; }
  .sayi:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.09); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .ust-ic { flex-wrap: wrap; gap: 13px; min-height: 0; padding-top: 14px; padding-bottom: 14px; }

  /* 🔴 `flex-wrap: wrap` ŞART — yokken menü SESSİZCE TAŞIYORDU.
     Ölçüldü 2026-08-13 (390 px, iPhone 14): 6 menü kalemi tek satıra
     sığmıyor, "HİZMETLERİMİZ" ekranın sağından kesiliyor ve REFERANSLAR ile
     İLETİŞİM hiç görünmüyordu. `.ust-ic` sarmalanıyordu ama `.menu`'nun
     KENDİ İÇİ sarmalanmıyordu — dıştaki wrap, içteki taşmayı gizlemez.
     ⚠️ Taşma yatay kaydırma çubuğu ÜRETMEDİĞİ için ekranda fark edilmiyordu;
        yalnız tam sayfa görüntüsünde görüldü. */
  .menu { order: 3; width: 100%; margin-left: 0; gap: 15px; flex-wrap: wrap; row-gap: 11px; }

  /* Arama simgesi mobilde GERİ GELİYOR. 900 px kuralı onu gizliyordu (üst bar
     sıkışıyordu); artık menü kendi satırında olduğu için logo satırında yer
     var: 181 + 70 + 34 ≈ 285 px < 390 px. Aramaya giden tek kapı buydu —
     gizlendiğinde mobil ziyaretçi sitede arama YAPAMIYORDU. */
  .ust-arama { display: grid; order: 2; }
  .form-satir { grid-template-columns: 1fr; }
  .bolum { padding: 56px 0; }
  .alt-ic { grid-template-columns: 1fr; gap: 30px; }
  .cagri-ic { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* Termal bant HİÇ gösterilmez: hareketi olmadan efekt anlamsız kalır ve
     sabit bir renk bandı görüntüyü bozardı. Efekti kırpmak yerine kaldırıyoruz. */
    .urun-gorsel:hover img { filter: none; transform: none; }
}

/* ── YAZDIRMA ─────────────────────────────────────────────────────────────── */
/* Satın almacı ürün sayfasını yazdırıp dosyaya koyar — teknik döküm okunur kalsın. */
@media print {
  .ust, .alt, .cagri, .hero-dugmeler, .atla, .urun-cta { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .hero { background: none; color: #000; }
  .hero::before, .hero::after { display: none; }
  .teknik, .uygulama { border-color: #000; }
}

/* ── ÜRÜN BÖLÜMÜ — video zeminli kategori ızgarası ────────────────────────────
   13 kart alt alta sayfayı uzatıyordu; artık 4 kategori kartı var ve her birinin
   altında o gruptaki kalem adları yazılı. Zemin gerçek üretim videosu.
   ⚠️ Video MOBİL sürüm: zemin videosu içerik değil, atmosfer — büyük dosya
      indirmeye değmez. `preload="none"` + JS ile src (bkz. site.js).
   ============================================================================= */
.urun-bolum { position: relative; background: var(--celik-950); color: #fff; overflow: hidden; }
.urun-bolum-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
.urun-bolum-perde { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.82) 45%, rgba(0,0,0,.92) 100%); }
.urun-bolum-ic { position: relative; z-index: 2; padding-top: 78px; padding-bottom: 78px; }
.urun-bolum .bolum-baslik { color: #fff; }
.urun-bolum .bolum-ozet { color: rgba(255,255,255,.7); }
.urun-bolum .etiket-mono { color: #fff; }
.urun-bolum-alt { margin-top: 34px; }

.kategoriler { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.kategori {
  display: flex; flex-direction: column; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14);
  overflow: hidden; transition: background .18s, border-color .18s, transform .18s;
}
.kategori:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4);
  transform: translateY(-3px); }
.kategori-gorsel { display: block; aspect-ratio: 4/3; overflow: hidden; background: #111; }
.kategori-gorsel img { width: 100%; height: 100%; object-fit: cover; opacity: .88;
  transition: transform .55s cubic-bezier(.2,.7,.3,1), opacity .3s; }
.kategori:hover .kategori-gorsel img { transform: scale(1.05); opacity: 1; }
.kategori-govde { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.kategori-sayi { font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sicak); }
.kategori-ad { font-family: var(--f-baslik); font-size: 20px; font-weight: 600;
  line-height: 1.1; text-transform: uppercase; letter-spacing: -.005em; }
.kategori-kalemler { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.58); margin-top: 2px; }
/* ── SÜREÇ — üç eşit video kutusu ────────────────────────────────────────────
   Üç deneme oldu: (1) üç sütunlu düz bant — sıra hissi kayboluyordu,
   (2) büyük görselli zikzak — çok yer kaplıyordu, (3) tam genişlik şeritler —
   ekranı baştan başa kaplıyordu. Şimdi: KAP İÇİNDE üç eşit kutu yan yana,
   zemin fotoğraf değil VİDEO.
   Kutular `aspect-ratio` ile aynı boyutta — içerik uzunluğu farklı olsa da
   ızgara bozulmaz.
   ============================================================================= */
.surec { padding: 74px 0 78px; }
.surec-bas { margin-bottom: 40px; }

.surec-izgara { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }

.surec-kutu {
  position: relative; overflow: hidden; background: var(--celik-950);
  aspect-ratio: 4/5; display: flex;
}
.surec-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
.surec-perde { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 52%, rgba(0,0,0,.94) 100%); }

.surec-kutu-ic {
  position: relative; z-index: 2; color: #fff; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px 24px 26px;
}
.surec-no {
  font-family: var(--f-baslik); font-size: 26px; font-weight: 600; line-height: 1;
  color: var(--sicak); letter-spacing: -.02em; margin-bottom: 10px;
}
.surec-ad { font-size: 22px; font-weight: 600; line-height: 1.08;
  text-transform: uppercase; letter-spacing: -.006em; color: #fff; }
.surec-ozet { margin-top: 10px; font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,.72); }

.surec-liste { list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px; }
.surec-liste a { display: inline-block; text-decoration: none; font-size: 11.5px;
  color: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.28);
  padding: 4px 9px; transition: border-color .15s, background .15s; }
.surec-liste a:hover { border-color: #fff; background: rgba(255,255,255,.14); }

@media (max-width: 900px) {
  .surec-izgara { grid-template-columns: 1fr; }
  /* ⚠️ Burada `aspect-ratio: 16/9` yazıyordu ve ÖLÇÜLDÜ (2026-08-20): 390 px'lik
     telefonda kutuyu 188 px'e sabitliyordu, içerik ~232 px'di. `.surec-kutu-ic`
     `justify-content: flex-end` olduğu için fazlalık YUKARI taşıyor, `overflow:
     hidden` de onu kesiyordu ⇒ "01/02/03" numaraları hiç görünmüyor, başlıkların
     (TERMAL HESAP · MEKANİK TASARIM · İMALAT) üstünden 14 px kesiliyordu.
     Sayfa HTTP 200, yatay taşma 0, `php -l` temiz — üç denetim de yeşildi.
     ⇒ Sabit oran yerine `min-height`: kart içerik kadar uzar, hiçbir yazı kesilmez.
     Video zemin `inset: 0` + `object-fit: cover` olduğu için kartla birlikte uzuyor.
     📌 Buraya tekrar sabit `aspect-ratio` yazma: metin taşıyan bir kutuyu orana
        kilitlemek, içeriğin uzunluğunu sabit sanmaktır.
     ⇒ Denetleyen: node _denetim/kirpma-olc.mjs */
  .surec-kutu { aspect-ratio: auto; min-height: 260px; }
}
/* ── HİZMETLER — süreç kutularıyla aynı desen ────────────────────────────────
   Video zeminli, eşit boyutlu kutular. Ürün fotoğrafı KULLANILMIYOR: eldeki
   hizmet fotoğraflarının üstüne TETSA logosu filigran olarak basılmış ve
   çözünürlükleri düşük (ölçüm 2026-08-12). Filigranlı görsel yayınlamak yerine
   üretimin kendi videosu zemin oluyor.
   ============================================================================= */
.hizmet-izgara { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }

.hizmet-kutu {
  position: relative; overflow: hidden; background: var(--celik-900);
  aspect-ratio: 16/10; display: flex; text-decoration: none; color: #fff;
  transition: transform .2s;
}
.hizmet-kutu:hover { transform: translateY(-3px); }
.hizmet-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
.hizmet-perde { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 50%, rgba(0,0,0,.93) 100%);
  transition: background .25s; }
.hizmet-kutu:hover .hizmet-perde {
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.68) 50%, rgba(0,0,0,.9) 100%); }

.hizmet-kutu-ic { position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 26px; }
.hizmet-etiket { color: var(--sicak); margin-bottom: 12px; }
.hizmet-baslik { font-family: var(--f-baslik); font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600; line-height: 1.08; text-transform: uppercase; letter-spacing: -.006em; }
.hizmet-ozet { margin-top: 10px; font-size: 14.5px; line-height: 1.5;
  color: rgba(255,255,255,.74); max-width: 46ch; }
.hizmet-ok { margin-top: 16px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; }

@media (max-width: 820px) {
  .hizmet-izgara { grid-template-columns: 1fr; }
  /* Süreç kutularıyla aynı kusur, aynı sebep (ölçüm 2026-08-20): dar ekranda
     `aspect-ratio: 16/10` kutuyu 209 px'e kilitliyor, "HİZMET" etiketi üstten
     3 px kesiliyordu. Süreçtekinden az ama aynı sınıf hata — birini düzeltip
     ötekini bırakmak, hatayı düzeltmek değil taşımaktır.
     ⇒ Denetleyen: node _denetim/kirpma-olc.mjs */
  .hizmet-kutu { aspect-ratio: auto; min-height: 240px; }
}
/* ── REFERANSLAR — kayan logo şeridi ─────────────────────────────────────────
   Liste iki kez basılıp ray %50 kaydırılıyor: birinci kopya soldan çıkarken
   ikincisi aynı noktaya geliyor, dikiş görünmüyor. Süre logo sayısına göre
   uzun tutuldu (29 logo × ~2 sn) — hızlı kayan şerit okunmaz, reklam gibi durur.
   ============================================================================= */
.referans-alt { margin-top: 34px; }

.logo-serit { overflow: hidden; margin-top: 8px; padding: 6px 0;
  border-top: 1px solid var(--celik-100); border-bottom: 1px solid var(--celik-100); }
.logo-ray { display: flex; width: max-content; animation: logo-kay 58s linear infinite; }
.logo-serit:hover .logo-ray { animation-play-state: paused; }

.logo-grup { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.logo-oge { flex: 0 0 auto; display: grid; place-items: center;
  width: 168px; height: 96px; padding: 0 14px; }
.logo-oge img { max-width: 100%; height: auto;
  filter: grayscale(1); opacity: .62; transition: filter .25s, opacity .25s; }
.logo-oge:hover img { filter: none; opacity: 1; }
.logo-ad { font-size: 13px; font-weight: 600; color: var(--celik-400); text-align: center; }

@keyframes logo-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── REFERANS SAYFASI — tam ızgara ────────────────────────────────────────── */
/* Hücreler 100×60 logoya göre kuruldu; büyütmek bulanıklaştırır (M-15). */
.logo-izgara { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.logo-kutu { display: grid; place-items: center; height: 104px; padding: 14px;
  background: var(--kagit); border: 1px solid var(--celik-100); }
.logo-kutu img { max-width: 100%; height: auto; filter: grayscale(1); opacity: .7;
  transition: filter .25s, opacity .25s; }
.logo-kutu:hover img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* Kayma yok: şerit sabit kalır ve taşan kısım gizlenir. */
  .logo-ray { animation: none; }
  .logo-grup:last-child { display: none; }
}
/* ── ALT (footer) ─────────────────────────────────────────────────────────────
   Önceki hâlinde iletişim sütununda BOŞ BEYAZ KUTU vardı: `dugme-cizgi` koyu
   zeminde beyaz çerçeve + beyaz metin oluyordu, yazı okunmuyordu. Ayrıca ürün
   sütununda 13 kalemin 6'sı tek tek sayılıyordu ve sütunlar dengesizdi.
   ============================================================================= */
.alt { background: var(--celik-950); color: rgba(255,255,255,.68);
  border-top: 1px solid rgba(255,255,255,.1); }
.alt-ic { display: grid; gap: 44px; padding-top: 62px; padding-bottom: 50px;
  grid-template-columns: 1.5fr 1fr 1fr 1.15fr; align-items: start; }

/* Footer logosu — gerçek logonun koyu zemin sürümü.
   ⚠️ Üst bardakiyle AYNI genişlikte (181px): iki logo farklı boyda olsaydı
      sayfanın başı ve sonu iki ayrı marka gibi durur.
   📌 `.alt-marka-im` kuralı KALDIRILDI — elle çizilmiş SVG'ye aitti.
      ⚠️ Buraya tekrar SVG yazma: firmanın logosuna BENZEYEN bir şekil,
         logosu değildir (2026-08-14'te müşteri fark etti). */
.alt-marka { display: inline-block; line-height: 0; }
.alt-marka img { width: 181px; height: auto; display: block; }
.alt-ozet { margin-top: 15px; font-size: 14.5px; line-height: 1.62; max-width: 40ch; }
.alt-ozet-dar { max-width: 32ch; margin-top: 0; }

.alt-baslik { font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.46); margin-bottom: 16px; }
.alt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.alt-liste a { color: rgba(255,255,255,.78); text-decoration: none; font-size: 14.5px; }
.alt-liste a:hover { color: #fff; }
.alt-adres { font-size: 14px; line-height: 1.55; }

.alt-dugme { margin-top: 20px; }

.alt-son { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; padding-bottom: 28px;
  font-size: 13px; color: rgba(255,255,255,.4); }
.alt-son-sag { color: rgba(255,255,255,.28); }

@media (max-width: 1040px) { .alt-ic { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .alt-ic { grid-template-columns: 1fr; gap: 32px; } }
/* ── İÇ SAYFA (kurumsal) ─────────────────────────────────────────────────────
   Sayfa tepesi koyu bir bant: iç sayfada üstteki beyaz menüyle içerik arasında
   ayrım gerekiyor, yoksa başlık menüye yapışık duruyor.
   Metin kolonu 68ch — okunabilir satır uzunluğu; yan kolonda ölçülmüş gerçekler.
   ============================================================================= */
.sayfa-tepe { background: var(--celik-950); color: #fff; padding: 54px 0 58px; }
.sayfa-tepe .etiket-mono { color: #fff; display: flex; align-items: center; gap: 11px; }
.sayfa-tepe .etiket-mono::before { content: ""; width: 26px; height: 7px; flex: 0 0 auto;
  border-left: 2px solid var(--sicak); border-right: 2px solid var(--sicak);
  border-bottom: 1px solid var(--sicak); }
.sayfa-baslik { margin-top: 16px; font-size: clamp(32px, 5vw, 58px); font-weight: 600;
  line-height: 1.02; text-transform: uppercase; letter-spacing: -.012em; }

.sayfa-govde { padding-top: 60px; }
.sayfa-izgara:not(:has(.sayfa-yan)) { display: block; }
.sayfa-izgara { display: grid; grid-template-columns: 380px minmax(0,1fr); gap: 52px; align-items: start; }
.sayfa-izgara .metin { order: 2; }
.sayfa-izgara .sayfa-yan { order: 1; }
.sayfa-izgara .metin { max-width: 68ch; }
.sayfa-izgara .metin h2 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 600;
  text-transform: uppercase; letter-spacing: -.006em; color: var(--celik-950);
  margin: 34px 0 14px; }
.sayfa-izgara .metin h2:first-child { margin-top: 0; }

.sayfa-yan { display: grid; gap: 24px; position: sticky; top: 94px; }
.olcu-liste { margin: 0; border-top: 2px solid var(--celik-950); }
.olcu-satir { display: flex; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--celik-100); }
.olcu-satir dt { font-size: 13.5px; color: var(--celik-500); margin: 0; }
.olcu-satir dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--celik-950);
  text-align: right; font-variant-numeric: tabular-nums; }
.olcu-not { font-weight: 400; color: var(--celik-400); }

.sayfa-cta { background: var(--celik-050); border: 1px solid var(--celik-100); padding: 22px; }
.sayfa-cta p { font-size: 15px; color: var(--celik-700); margin-bottom: 14px; }

@media (max-width: 940px) {
  .sayfa-izgara:not(:has(.sayfa-yan)) { display: block; }
.sayfa-izgara { grid-template-columns: 1fr; gap: 34px; }
  .sayfa-yan { position: static; }
}
/* ── SERTİFİKALAR ────────────────────────────────────────────────────────────
   ⚠️ Belge adı/kapsamı görselin üstünde yazılı ve tarama görüntüsünden
   okunamıyor ⇒ altına "ISO 9001" gibi etiket YAZILMADI (KC-P1). Müşteriden
   belge adı ve geçerlilik tarihi istenecek.
   ============================================================================= */
.sertifika-izgara { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sertifika { position: relative; display: block; background: var(--kagit);
  border: 1px solid var(--celik-200); padding: 14px; text-decoration: none;
  transition: border-color .18s, box-shadow .18s; }
.sertifika:hover { border-color: var(--soguk); box-shadow: var(--golge); }
.sertifika img { width: 100%; height: auto; display: block; }
.sertifika-ok { display: block; margin-top: 12px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--soguk-derin); }

/* ── İLETİŞİM ────────────────────────────────────────────────────────────────
   Düzen (Mustafa 2026-08-12, referans görsel): ortalanmış tepe → üç bilgi
   kartı yan yana → altta solda harita, sağda form.
   Referanstan DÜZEN alındı, görünüş TETSA kimliğinde: yuvarlak köşe ve pastel
   yerine keskin köşe + siyah/kırmızı. Kimlik logodan geliyor, şablondan değil.
   ============================================================================= */
.ilt-tepe { background: #fff; }
.ilt-tepe-ic { padding: 72px 28px 64px; text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: 18px; }
.ilt-rozet { display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sicak-derin);
  border: 1px solid currentColor; padding: 7px 16px; }
.ilt-tepe-baslik { font-family: var(--f-baslik); font-weight: 600; text-transform: uppercase;
  font-size: clamp(28px, 4vw, 52px); line-height: 1.04; letter-spacing: -.015em;
  text-wrap: balance; max-width: 20ch; }
.ilt-tepe-ozet { font-size: 16.5px; line-height: 1.65; color: var(--celik-500);
  max-width: 66ch; }

/* Gövde açık gri, içindeki kart / harita / form beyaz: beyaz kutular zeminden
   ayrılıyor. Önce form KOYU bloktu (Mustafa beğenmedi) — koyu blok sayfanın
   geri kalanıyla konuşmuyordu, tek başına bir ada gibi duruyordu. */
/* Zemin nötr-soğuk gri. Önce --soguk-sis kullanıldı; o değişken mavi tonlu
   ve sayfayı maviye boyuyordu (ölçüldü, ekran görüntüsü). Marka rengi
   kırmızı; zeminin maviye kaçması kimlikle çelişiyor. */
.ilt-govde { background: #F3F4F5; }

/* ÜÇ KART — eşit genişlik. Kart tıklanabilir değil, İÇİNDEKİ değer tıklanabilir:
   kartın tamamını linke çevirmek adres kartında hedefsiz bir tıklama alanı
   yaratırdı. */
.ilt-kartlar { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px; margin-bottom: 56px; }
.ilt-kart { display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--celik-100); padding: 26px 24px;
  transition: border-color .18s ease, transform .18s ease; }
.ilt-kart:hover { border-color: var(--celik-950); transform: translateY(-2px); }
.ilt-ikon { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--celik-950); color: #fff; }
.ilt-ikon svg { width: 21px; height: 21px; }
.ilt-kart:hover .ilt-ikon { background: var(--sicak-derin); }
.ilt-kart-ic { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ilt-kart-baslik { font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--celik-500); margin-bottom: 4px; }
.ilt-kart-deger { font-size: 16px; font-weight: 600; line-height: 1.45;
  color: var(--celik-950); text-decoration: none; font-variant-numeric: tabular-nums;
  word-break: break-word; }
.ilt-kart-deger:hover { color: var(--sicak-derin); text-decoration: underline;
  text-underline-offset: 3px; }
.ilt-kart-adres { font-size: 14.5px; line-height: 1.55; color: var(--celik-500); }

/* ALT — harita | form. Form biraz daha geniş: doldurulan alan o. */
.ilt-alt { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: 28px; align-items: stretch; }
.ilt-harita { display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--celik-100); padding: 10px 10px 4px; }
/* iframe yüksekliğini FORM belirliyor (flex:1), sabit oran değil: yan yana
   duran iki alanın alt kenarı hizalı bitsin. */
.ilt-harita iframe { display: block; width: 100%; flex: 1 1 auto; min-height: 340px;
  border: 0; background: var(--celik-100); }
.ilt-yol { align-self: flex-start; margin: 14px 4px 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--celik-950);
  text-decoration: none; border-bottom: 1px solid var(--celik-300, #C9CDD2);
  padding-bottom: 3px; }
.ilt-yol:hover { color: var(--sicak-derin); border-color: currentColor; }

/* FORM — beyaz kart. Alanlar KUTU değil: çok açık zemin + odakta kalınlaşan
   alt çizgi. Kutu kenarlığı her alanı eşit ağırlıkta gösteriyor; alt çizgi
   yalnız yazılan yeri işaretliyor, göz forma değil alana gidiyor.
   ⚠️ Odakta kenarlık KALINLIĞI değil RENGİ değişiyor: kalınlık değişirse
      alan 1px zıplar ve yazarken sayfa titrer. */
.ilt-form { background: #fff; border: 1px solid var(--celik-100);
  padding: 34px 32px 36px; display: flex; flex-direction: column; gap: 20px; }
.ilt-form-satir { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.ilt-alan { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ilt-alan > span { font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--celik-500); }
.ilt-alan em { color: var(--sicak-derin); font-style: normal; }
.ilt-alan input, .ilt-alan textarea { width: 100%; font: inherit; font-size: 15px;
  color: var(--celik-950); background: var(--celik-050, #F6F7F8);
  border: 0; border-bottom: 2px solid var(--celik-200, #DDE1E4);
  padding: 12px 14px; border-radius: 0; transition: border-color .16s ease, background .16s ease; }
.ilt-alan textarea { resize: vertical; min-height: 128px; line-height: 1.55; }
.ilt-alan input::placeholder, .ilt-alan textarea::placeholder { color: var(--celik-400, #9AA1A8); }
.ilt-alan input:focus, .ilt-alan textarea:focus { outline: 0; background: #fff;
  border-bottom-color: var(--sicak-derin); }
.ilt-form-not { font-size: 13px; line-height: 1.6; color: var(--celik-500); }
.ilt-form-not strong { color: var(--celik-950); font-weight: 600; }
.ilt-gonder { align-self: flex-start; margin-top: 2px; }
@media (max-width: 1000px) {
  .ilt-kartlar { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
  .ilt-alt { grid-template-columns: 1fr; }
  .ilt-harita iframe { min-height: 300px; aspect-ratio: 16 / 10; flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .ilt-form-satir { grid-template-columns: 1fr; }
  .ilt-form { padding: 26px 22px 28px; }
}/* ⚰️ .iletisim-izgara / .harita-bolum buraya tekrar yazma: 2026-08-12'de
      .ilt-* düzenine geçildi, eskisi sessizce ölü kural olur. */
/* Kurumsal sayfa görselleri — düzenleme Mustafa'ya bırakıldı, şimdilik
   metnin altında iki sütun. */
.kurumsal-gorseller { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr);
  margin-top: 36px; }
.kurumsal-gorseller figure { margin: 0; overflow: hidden; border: 1px solid var(--celik-100); }
.kurumsal-gorseller img { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; }
@media (max-width: 640px) { .kurumsal-gorseller { grid-template-columns: 1fr; } }
/* ── SAYFA GÖRSELİ + MİSYON/VİZYON ───────────────────────────────────────────
   Yayındaki düzen korundu: solda tesis fotoğrafı, sağda metin. Misyon/vizyon
   ise iki metin kutusu ve ORTADA görsel — üç sütun.
   ============================================================================= */
.sayfa-gorsel { margin: 0 0 24px; overflow: hidden; border: 1px solid var(--celik-100); }
.sayfa-gorsel img { width: 100%; height: auto; display: block; }

.mv-bolum { background: var(--celik-050); padding: 72px 0; }
.mv-izgara { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 0; align-items: stretch; }
.mv-kutu { background: var(--soguk-sis); padding: 40px 34px; display: flex;
  flex-direction: column; justify-content: center; }
.mv-baslik { font-size: clamp(24px, 3vw, 34px); font-weight: 600; line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.008em; color: var(--celik-950); margin-bottom: 16px; }
.mv-metin { font-size: 15.5px; line-height: 1.65; color: var(--celik-700); }
.mv-gorsel { margin: 0; overflow: hidden; }
.mv-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .mv-izgara { grid-template-columns: 1fr; }
  .mv-gorsel { order: -1; aspect-ratio: 16/9; }
}

/* ── ÜRÜN KATALOĞU ───────────────────────────────────────────────────────────
   Kategori bölümlü düzen (Mustafa 2026-08-12): solda yapışkan menü, sağda
   grup bölümleri. Filtre yok — JS'siz çalışıyor, tüm ürünler tek adreste.
   ============================================================================= */
/* Zemin BEYAZ: kartlar kalkınca gri zeminin ayırdığı bir şey kalmadı;
   gri zemin üstünde çerçevesiz görseller yüzer gibi duruyordu. */
.kat-govde { background: #fff; padding: 56px 0 88px; }
.kat-izgara { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 48px;
  align-items: start; }

/* 🔴 DAR EKRANDA TEK SÜTUN — kırılma noktası YOKTU.
   Ölçüldü 2026-08-13: 390 px'te sol kategori menüsü 232 px'lik sabit sütununu
   koruyor, yanındaki liste sığmıyor ve sayfa 428 px'e taşıyordu. 320 px'te
   taşma 108 px. Ürün listesi sitenin en çok gezilen sayfası; mobilde kırıktı.
   ⚠️ Menü YUKARI alınıyor (sticky kapatılıyor): dar ekranda yapışkan bir blok
      görünen alanın yarısını yer. */
@media (max-width: 900px) {
  .kat-izgara { grid-template-columns: 1fr; gap: 30px; }
  .kat-yan { position: static; top: auto; }
}

/* Yapışkan menü: 13 ürün arasında kaybolmadan kategori değişsin. */
.kat-yan { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 20px; }
.kat-menu-baslik { font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--celik-500); margin-bottom: 14px; }
.kat-menu ul { list-style: none; display: flex; flex-direction: column; }
.kat-menu li + li { border-top: 1px solid var(--celik-200, #DDE1E4); }
.kat-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0; color: var(--celik-950); text-decoration: none; font-size: 14.5px;
  font-weight: 600; line-height: 1.35; transition: color .16s ease, padding .16s ease; }
.kat-menu a:hover { color: var(--sicak-derin); padding-left: 5px; }
/* Aktif kategori: renk TEK başına yeterli değil (renk körlüğü) — sol kenar
   çizgisi ikinci işaret olarak duruyor. */
.kat-menu-aktif { color: var(--sicak-derin); box-shadow: inset 3px 0 0 0 var(--sicak-derin);
  padding-left: 10px; }
.kat-menu-aktif .kat-menu-adet { background: var(--sicak-derin); color: #fff;
  border-color: var(--sicak-derin); }
.kat-menu-adet { flex: 0 0 auto; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--celik-500);
  background: #F3F4F5; padding: 2px 8px; }
.kat-yan-cagri { background: #F3F4F5; padding: 22px; }
.kat-yan-cagri p { font-size: 14px; line-height: 1.6; color: var(--celik-500);
  margin-bottom: 14px; }

/* Bölüm başlığı: çapa hedefi olduğu için üstünde boşluk bırakılıyor —
   sabit başlık bandı başlığın üstünü kesmesin. */
.kat-bolum { scroll-margin-top: 96px; }
.kat-bolum + .kat-bolum { margin-top: 64px; }
.kat-bolum-bas { display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 14px; border-bottom: 2px solid var(--celik-950); margin-bottom: 26px; }
.kat-bolum-baslik { font-family: var(--f-baslik); font-weight: 600; text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -.008em; }
.kat-bolum-adet { font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--celik-500); white-space: nowrap; }
.kat-bolum-ozet { font-size: 15.5px; line-height: 1.65; color: var(--celik-500);
  max-width: 72ch; margin: -12px 0 24px; }

/* ── ÜRÜN LİSTESİ ────────────────────────────────────────────────────────────
   🔴 KUTU YOK — KART YOK. Bu, sektörün gerçek sitelerine BAKARAK alınmış bir
   karar (Güntner, Thermofin — 2026-08-12 incelendi):
     · İkisi de ürünü kart/kutu içine koymuyor. Kenarlık, gölge, çerçeve yok.
     · Ürün görseli BÜYÜK ve kırpılmamış; ürün fotoğrafı sayfanın kendisi.
     · Ürün adı büyük (kart başlığı değil, bölüm başlığı ölçeğinde).
     · Açıklama UZUN — Thermofin'de 10 satır. Kesilmiyor.
   Önceki hâli e-ticaret kartıydı: kutu + kırpılmış görsel + 17px başlık +
   120 karakterde "…" ile kesilen metin. Endüstriyel alıcı ürünü tanımak
   istiyor; yarım cümle onu ürün detayına gitmeye değil, sekmeyi kapatmaya
   götürür.
   ============================================================================= */
/* ⚠️ `min(360px, 100%)` — düz `minmax(360px, 1fr)` YAZILMAZ.
   Ölçüldü 2026-08-13: 390 px ekranda kart 428 px'e taşıyordu (kap boşluğu
   düşünce 360 px sığmıyor ama grid yine de 360'ta ısrar ediyor). `min()`
   sarmalayıcısı "en fazla 360, ama kaptan geniş olamaz" der.
   ⇒ Medya sorgusu gerekmez: kural her genişlikte kendi kendini ayarlar. */
.urun-izgara { list-style: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 56px 44px; }

.urun-kart { display: flex; flex-direction: column; }

/* Görsel: kutu içinde değil, kendi başına. Zemin yalnız yüklenene kadar
   görünen nötr alan. */
.urun-kapak { display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: #E9EBED; }
.urun-kapak img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.urun-kart:hover .urun-kapak img { transform: scale(1.03); }
.urun-kapak-yok { display: block; width: 100%; height: 100%; background: #E9EBED; }

.urun-govde { display: flex; flex-direction: column; gap: 12px; padding: 20px 0 0;
  flex: 1 1 auto; }

/* Ad: kart başlığı değil, bölüm başlığı ölçeğinde. */
.urun-ad { font-family: var(--f-baslik); font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 600; line-height: 1.18; letter-spacing: -.012em; }
.urun-ad a { color: var(--celik-950); text-decoration: none; }
.urun-ad a:hover { color: var(--sicak-derin); }

/* Açıklama KESİLMİYOR (şablonda da kırpma kaldırıldı). */
.urun-ozet { font-size: 15px; line-height: 1.68; color: var(--celik-600, #55606A);
  max-width: 46ch; }

/* Teknik satırlar — çizgili tablo, rozet değil. Föy görünümü. */
.urun-rozetler { display: flex; flex-direction: column; margin-top: 6px;
  border-top: 1px solid var(--celik-200, #DDE1E4); }
.urun-rozet { display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 14px;
  align-items: baseline; font-size: 13px; line-height: 1.5; padding: 8px 0;
  border-bottom: 1px solid var(--celik-100); }
.urun-rozet dt { color: var(--celik-500); font-weight: 500; }
.urun-rozet dd { color: var(--celik-950); font-weight: 600;
  font-variant-numeric: tabular-nums; }
/* Teyit bekleyen değer — YALNIZ lokalde görünür (prod'da süzgeçten geçmez). */
.urun-rozet-teyitsiz dd { border-bottom: 1px dashed var(--sicak-derin);
  padding-bottom: 1px; }

.urun-eylem { display: flex; align-items: center; gap: 20px; margin-top: auto;
  padding-top: 16px; }
.urun-incele { font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--celik-950); text-decoration: none;
  border-bottom: 1px solid var(--celik-950); padding-bottom: 3px; }
.urun-incele:hover { color: var(--sicak-derin); border-color: currentColor; }
.urun-teklif { font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--celik-500); text-decoration: none;
  white-space: nowrap; }
.urun-teklif:hover { color: var(--sicak-derin); }
@media (max-width: 900px) {
  .kat-izgara { grid-template-columns: 1fr; gap: 28px; }
  /* Dar ekranda yapışkanlık kaldırılıyor: menü ekranın yarısını yerdi. */
  .kat-yan { position: static; }
  .kat-menu ul { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .kat-menu li + li { border-top: 0; }
  .kat-menu a { background: #fff; border: 1px solid var(--celik-200, #DDE1E4);
    padding: 9px 13px; font-size: 13px; }
  .kat-yan-cagri { display: none; }
}

/* ── ÜRÜN DETAY — METİN BLOĞU ────────────────────────────────────────────────
   ⚠️ `.urun-metin`, `.urun-govde` DEĞİL: `.urun-govde` liste sayfasında kart
   gövdesi (flex kolon + padding). Aynı adı iki farklı iş için kullanmak,
   liste düzenini detay paragraflarına da uyguluyordu.
   Metin genişliği 68ch'te tutuluyor: uzun satır okunmaz (bazı ürünlerde
   gövde 1.059 karakter — ölçüldü).
   ============================================================================= */
.urun-giris { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; font-weight: 500;
  color: var(--celik-950); max-width: 62ch; margin-bottom: 22px; }
.urun-metin { max-width: 68ch; }
.urun-metin p { font-size: 15.5px; line-height: 1.75; color: var(--celik-600, #55606A); }
.urun-metin p + p { margin-top: 14px; }
.urun-metin h3 { font-family: var(--f-baslik); font-size: 18px; font-weight: 600;
  color: var(--celik-950); margin: 26px 0 10px; }
.urun-metin ul { list-style: none; margin-top: 6px; }
.urun-metin li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.7;
  color: var(--celik-600, #55606A); }
.urun-metin li + li { margin-top: 9px; }
/* Madde imi ::before ile — liste stilinden bağımsız, hizası sabit. */
.urun-metin li::before { content: ""; position: absolute; left: 0; top: .68em;
  width: 8px; height: 1px; background: var(--sicak-derin); }
.urun-avantaj { margin-top: 30px; padding-top: 26px;
  border-top: 1px solid var(--celik-200, #DDE1E4); }
.urun-alt-baslik { font-family: var(--f-baslik); font-size: 19px; font-weight: 600;
  text-transform: uppercase; letter-spacing: -.005em; color: var(--celik-950);
  margin-bottom: 12px; }

/* Kapak görseli — metnin üstünde, tam genişlik. Galerideki küçük karelerden
   ayrı: ürünü ilk tanıtan görsel bu. */
.urun-kapak-buyuk { display: block; margin-bottom: 26px; background: #E9EBED;
  aspect-ratio: 3 / 2; overflow: hidden; }
.urun-kapak-buyuk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.urun-galeri { margin-top: 34px; padding-top: 28px;
  border-top: 1px solid var(--celik-200, #DDE1E4); }
.urun-galeri-adet { display: inline-block; margin-left: 8px; font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--celik-500);
  background: #F3F4F5; padding: 3px 8px; vertical-align: middle; }

/* ── HİZMETLER ───────────────────────────────────────────────────────────────
   Dönüşümlü tam genişlik bloklar: solda görsel / sağda metin, sonraki blokta
   ters. Yalnız iki hizmet var; ızgaraya dizmek sayfayı yarım bırakılmış
   gösteriyordu.
   ⚠️ Önceki hâlinde bu sayfanın CSS'i HİÇ YAZILMAMIŞTI — çıplak mavi bağlantı
   listesi olarak yayınlanıyordu. "Şablon var" ile "sayfa çalışıyor" aynı şey
   değil; ölçmeden fark edilmiyor.
   ============================================================================= */
.hzm-govde { padding: 56px 0 88px; }
.hzm-blok { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: 52px; align-items: center; }
.hzm-blok + .hzm-blok { margin-top: 72px; padding-top: 72px;
  border-top: 1px solid var(--celik-200, #DDE1E4); }

/* Taraf değiştirme grid sütunu ile — `direction: rtl` metnin okuma yönünü de
   bozardı. */
.hzm-ters .hzm-gorsel { grid-column: 2; grid-row: 1; }
.hzm-ters .hzm-metin  { grid-column: 1; grid-row: 1; }

.hzm-gorsel { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #E9EBED; }
.hzm-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.hzm-blok:hover .hzm-gorsel img { transform: scale(1.03); }
.hzm-gorsel-yok { display: block; width: 100%; height: 100%; background: #E9EBED; }

.hzm-metin { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* Numara BURADA anlamlı: iki hizmet bir sıra değil ama sayfada kaçıncı blokta
   olduğunu gösteriyor ve bloklar dönüşümlü olduğu için göz onu tutamıyor. */
.hzm-sira { font-family: var(--f-baslik); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; color: var(--sicak-derin); font-variant-numeric: tabular-nums; }
.hzm-ad { font-family: var(--f-baslik); font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 600; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.hzm-ad a { color: var(--celik-950); text-decoration: none; }
.hzm-ad a:hover { color: var(--sicak-derin); }
.hzm-ozet { font-size: 16px; line-height: 1.7; color: var(--celik-600, #55606A);
  max-width: 52ch; }
.hzm-eylem { display: flex; align-items: center; gap: 20px; margin-top: 6px; }

@media (max-width: 860px) {
  .hzm-blok { grid-template-columns: 1fr; gap: 22px; }
  /* Dar ekranda görsel HER ZAMAN üstte: ters bloklarda metin önce gelirse
     iki hizmet farklı sırayla okunur, sayfa tutarsız görünürdü. */
  .hzm-ters .hzm-gorsel { grid-column: 1; grid-row: 1; }
  .hzm-ters .hzm-metin  { grid-column: 1; grid-row: 2; }
  .hzm-blok + .hzm-blok { margin-top: 48px; padding-top: 48px; }
}

/* ── YASAL SAYFALAR ──────────────────────────────────────────────────────────
   Uzun okuma metni: satır 70ch'te tutuluyor, başlık hiyerarşisi net.
   ⚠️ `.yasal-uyari` ve `.yasal-eksik` KASITLI olarak göze batıyor: bunlar
   taslak metnin "burası tamamlanmadı" işaretleri. Yayına çıkmadan önce
   sayfada bu iki sınıftan HİÇBİRİ kalmamalı.
   ⇒ Denetleyen: canlıda `grep -c "yasal-eksik"` → 0 olmalı.
   ============================================================================= */
.yasal-govde { max-width: 74ch; }
.yasal-govde h2 { font-family: var(--f-baslik); font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600; color: var(--celik-950); margin: 34px 0 12px; letter-spacing: -.006em; }
.yasal-govde h2:first-of-type { margin-top: 0; }
.yasal-govde h3 { font-size: 16px; font-weight: 600; color: var(--celik-950);
  margin: 22px 0 8px; }
.yasal-govde p { font-size: 15.5px; line-height: 1.75; color: var(--celik-600, #55606A); }
.yasal-govde p + p { margin-top: 12px; }
.yasal-govde ul { list-style: none; margin: 10px 0; }
.yasal-govde li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.7;
  color: var(--celik-600, #55606A); }
.yasal-govde li + li { margin-top: 7px; }
.yasal-govde li::before { content: ""; position: absolute; left: 0; top: .72em;
  width: 7px; height: 1px; background: var(--celik-400, #9AA1A8); }
.yasal-govde strong { color: var(--celik-950); font-weight: 600; }
.yasal-govde a { color: var(--soguk-derin); text-decoration: underline;
  text-underline-offset: 3px; }

/* Taslak uyarısı — sayfanın en üstünde, atlanamaz. */
.yasal-govde .yasal-uyari { background: #FFF6E5; border-left: 3px solid #E8A317;
  padding: 14px 18px; font-size: 14.5px; line-height: 1.6; color: #6B4E00;
  margin-bottom: 28px; }
/* Tamamlanmamış bölüm — metnin içinde, görmezden gelinemez. */
.yasal-govde .yasal-eksik { background: #FDF2F2; border-left: 3px solid var(--sicak-derin);
  padding: 12px 16px; font-size: 14.5px; color: #7A1F17; }

/* KVKK onay kutusu — iki formda da aynı. Kutu ile metin baseline'da hizalı;
   metin uzun olduğu için grid, flex değil (flex'te ikinci satır kutunun
   altına kayıyordu). */
.onay-kvkk { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 11px;
  align-items: start; font-size: 13.5px; line-height: 1.6; color: var(--celik-600, #55606A); }
.onay-kvkk input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--sicak-derin); }
.onay-kvkk a { color: var(--celik-950); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; }
.onay-kvkk a:hover { color: var(--sicak-derin); }
/* Koyu zeminli formda (varsa) okunur kalsın */
.ilt-form .onay-kvkk { color: var(--celik-600, #55606A); }

/* Footer yasal bağlantı satırı */
.alt-yasal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.alt-yasal a { font-size: 12.5px; color: rgba(255,255,255,.62); text-decoration: none; }
.alt-yasal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── DEĞERLER (ana sayfa) ────────────────────────────────────────────────────
   Dört blok yan yana. Kart/kutu yok — ürün listesindeki kararla tutarlı:
   üstte ince çizgi, altında başlık ve metin. Çizgi bölmeyi işaretliyor,
   kutuya gerek bırakmıyor.
   ============================================================================= */
.deger-izgara { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 34px; }
.deger-kalem { border-top: 2px solid var(--celik-950); padding-top: 18px; }
.deger-kalem h3 { font-family: var(--f-baslik); font-size: 17px; font-weight: 600;
  text-transform: uppercase; letter-spacing: -.004em; color: var(--celik-950);
  margin-bottom: 10px; line-height: 1.2; }
.deger-kalem p { font-size: 14.5px; line-height: 1.65; color: var(--celik-600, #55606A); }

@media (max-width: 900px) { .deger-izgara { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; } }
@media (max-width: 520px) { .deger-izgara { grid-template-columns: 1fr; gap: 22px; } }

/* Hakkımızda sayfasındaki "Amaçlarımız ve Değerlerimiz" listesi — metin
   akışının içinde, madde imi çizgi. */
.metin h2 { font-family: var(--f-baslik); font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 600; color: var(--celik-950); margin: 30px 0 12px; }
.metin ul { list-style: none; margin: 10px 0; }
.metin li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.7;
  color: var(--celik-600, #55606A); }
.metin li + li { margin-top: 8px; }
.metin li::before { content: ""; position: absolute; left: 0; top: .74em;
  width: 8px; height: 1px; background: var(--sicak-derin); }

/* ── AÇILIR MENÜ (B-01) ──────────────────────────────────────────────────────
   JS YOK: :hover + :focus-within. `focus-within` şart — yalnız hover
   yazılsaydı menü klavyeye kapalı kalırdı.
   ============================================================================= */
.menu-kalem { position: relative; display: inline-flex; align-items: center; }
.menu-ok { display: inline-block; width: 0; height: 0; margin-left: 5px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: .55; transition: transform .18s ease; }
.menu-kalem:hover .menu-ok, .menu-kalem:focus-within .menu-ok { transform: rotate(180deg); }

.menu-alt { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 620px; background: #fff; border: 1px solid var(--celik-100);
  box-shadow: 0 18px 40px rgba(16,20,24,.13); padding: 24px 26px;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 32px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
  z-index: 60; }
.menu-alt-dar { min-width: 260px; grid-template-columns: 1fr; }
.menu-kalem:hover .menu-alt, .menu-kalem:focus-within .menu-alt {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* Başlık ile panel arasındaki boşlukta imleç kaybolmasın: köprü. */
.menu-alt::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }

.menu-alt-baslik { display: block; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--celik-950);
  text-decoration: none; padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--celik-100); }
.menu-alt-baslik:hover { color: var(--sicak-derin); }
.menu-alt ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.menu-alt li a { display: block; font-size: 13.5px; line-height: 1.45; padding: 5px 0;
  color: var(--celik-600, #55606A); text-decoration: none; }
.menu-alt li a:hover { color: var(--sicak-derin); padding-left: 4px; }

/* ── ÜST ARAMA (B-02) ────────────────────────────────────────────────────── */
.gizli-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
/* Üst barda SİMGE — metin kutusu üst barı taşırıyordu (ölçüldü: menü iki
   satıra kırıldı). Arama sayfaya gidiyor, kutu orada. */
.ust-arama { display: grid; place-items: center; width: 34px; height: 34px;
  flex: 0 0 auto; color: var(--celik-950); text-decoration: none;
  border: 1px solid var(--celik-200, #DDE1E4); transition: background .16s ease, color .16s ease; }
.ust-arama:hover { background: var(--celik-950); color: #fff; border-color: var(--celik-950); }
.ust-arama svg { width: 16px; height: 16px; }

/* 🔴 ÜST BARDAKİ CTA İKİ SATIRA KIRILMAZ.
   Ölçüldü 2026-08-14 (1920 · 1440 · 1200 · 1100 px): "TEKLİF İSTE" her
   genişlikte İKİ SATIR oluyordu — üstelik içerik kaba SIĞDIĞI hâlde
   (1124 / 1180 px). Sebep sığmama değil: düğme bir flex öğesi ve metni
   sarmalanabilir durumdaydı, flex algoritması onu daraltıyordu.
   ⚠️ `flex: 0 0 auto` da şart: yalnız `nowrap` verilseydi düğme bu kez
      taşardı. İkisi birlikte "daralma, ama taşma da" der.
   ⚠️ Daralması gereken öğe MENÜ: `min-width: 0` onun büzülmesine izin verir,
      zaten kendi içinde sarmalanıyor. */
.ust-cta { flex: 0 0 auto; white-space: nowrap; }
.menu { min-width: 0; }

/* ── DİL SEÇİMİ — anahtar (switch) ────────────────────────────────────────
   Mustafa isteği: "switch gibi bir şey olsun."
   İki kalem yan yana, etkin olan DOLU zemin; kol hangi tarafta duruyorsa
   ziyaretçi o dilde. Metin bağlantı yığını değil, tek bir denetim gibi okunur.

   Üst bar zaten dolu (logo + 6 menü + arama + CTA); anahtar bu yüzden iki
   harflik — arama KUTUSUNUN barı iki satıra kırdığı ölçüm hâlâ geçerli.

   ⚠️ Etkin dil bağlantı DEĞİL, `<span>`: bulunduğun sayfaya götüren bir
      bağlantı ziyaretçiyi yanıltır. Dolu zemin hangi dilde olduğunu söyler.
   ⚠️ Renk TEK BAŞINA taşıyıcı değil: `aria-current` etkin kalemi ekran
      okuyucuya da bildirir. Renk körü bir ziyaretçi için de zemin/metin
      karşıtlığı ayrımı taşır.
   ⚠️ `flex: 0 0 auto`: üst bar sıkıştığında anahtar ezilmez. */
.ust-dil { display: flex; align-items: stretch; flex: 0 0 auto; overflow: hidden;
  border: 1px solid var(--celik-200, #DDE1E4); background: var(--celik-050, #F6F7F8); }
.ust-dil-kalem { display: grid; place-items: center; min-width: 34px; padding: 0 9px;
  height: 34px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-decoration: none; transition: background .16s ease, color .16s ease; }
.ust-dil-etkin { background: var(--celik-950); color: #fff; }
.ust-dil a.ust-dil-kalem { color: var(--celik-500); }
.ust-dil a.ust-dil-kalem:hover,
.ust-dil a.ust-dil-kalem:focus-visible { background: #fff; color: var(--sicak-derin); }

/* ── ARAMA SAYFASI ───────────────────────────────────────────────────────── */
.arama-form { margin-bottom: 40px; max-width: 620px; }
.arama-etiket { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--celik-500); margin-bottom: 10px; }
.arama-satir { display: flex; gap: 10px; }
.arama-satir input { flex: 1 1 auto; font: inherit; font-size: 16px; color: var(--celik-950);
  background: var(--celik-050, #F6F7F8); border: 0;
  border-bottom: 2px solid var(--celik-200, #DDE1E4); padding: 12px 14px; }
.arama-satir input:focus { outline: 0; background: #fff; border-bottom-color: var(--sicak-derin); }
.arama-bos { max-width: 60ch; }
.arama-bos p { font-size: 16px; line-height: 1.7; color: var(--celik-950); }
.arama-bos-ipucu { color: var(--celik-500) !important; font-size: 15px !important; margin-top: 10px; }
.arama-bos-eylem { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.arama-tip { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sicak-derin); }

@media (max-width: 1100px) { .menu-alt { display: none; } }
@media (max-width: 900px)  { .ust-arama { display: none; } }