/* ============================================================================
   ERADA METAL — site
   Konsept omurgasi: "ham celikten sevkiyata". Sayfa bir uretim yolculugu;
   scroll o yolculugu sarar. Her bolum yolculugun bir durusu.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }              /* smooth scroll JS'te - CSS ile cakismasin */

/* Capayla gelen bolum serit KADAR asagi dursun. Olculdu: mobilde #kabiliyet /
   #hakkimizda capalari bolum etiketini 60px'e indiriyordu, serit 64px -
   "01 / Kabiliyet" tam gorunmez oluyordu. Masaustunde bolum dolgusu yettigi
   icin sorun yoktu, yani sadece dar ekranda ortaya cikiyor. */
.bolum { scroll-margin-top: var(--nav-h); }
body {
  margin: 0; background: var(--bg); color: var(--on);
  font-family: var(--f-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* CIFT DOKUNUSLA yakinlastirmayi kapatir, parmak arasi yakinlastirmayi
     BIRAKIR. Uzun ve scroll'a bagli bir sayfada cift dokunus kazara cok kolay
     tetikleniyor; tetiklendiginde sayfa kaymis/tasmis gibi gorunuyor - sabit
     serit de gorsel pencereyle birlikte kaydigi icin logo kirpik cikiyor.
     Zoom'u tamamen kapatmak (user-scalable=no) erisilebilirlik kaybi olurdu
     ve Safari zaten dinlemiyor; dogru arac bu. */
  touch-action: manipulation;
}
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.kucuk-baslik {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--acc);
}
.en { font-size: .82em; color: var(--on-3); font-style: italic; }

/* ============================================================ NAV */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  padding: 0 var(--pad); padding-top: var(--sat);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease-out), border-color .5s var(--ease-out);
}
/* Zemin OPAK. Onceden rgba(...,.86) + blur(14px) idi; sayfa zemini zaten duz
   koyu oldugu icin blur bulanikayacak bir sey bulamiyor, geriye sadece %14
   gecirgenlik kaliyordu. Iri beyaz bolum basliklari seridin altindan gecerken
   arkadan hayalet gibi okunuyor ve logoya giriyordu - mobilde de masaustunde
   de olculdu. Cam etkisi burada gorsel bir sey kazandirmiyordu, ezilmeyi
   kazandiriyordu. */
.nav.dolu { background: var(--bg); border-bottom-color: var(--line); }
.nav__logo { width: 132px; opacity: 0; transform: translateY(-6px);
             transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.nav.dolu .nav__logo { opacity: 1; transform: none; }
/* align-items ZORUNLU. Varsayilan "stretch" ile her baglanti serit yuksekligine
   uzuyordu; dolgusu olanlarda (katalog rozeti, dil anahtari) yazi o dolgu kadar
   asagi kayiyor, dolgusuz capalarla ayni hizada durmuyordu. Olculdu: "TR"
   otekilerden 6px asagidaydi. */
.nav__linkler { display: flex; align-items: center; gap: 26px; }
.nav__linkler a {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-3); transition: color .25s;
}
.nav__linkler a:hover, .nav__linkler a.aktif { color: var(--on); }

/* Digerleri sayfa ici capa; bu baska bir sayfaya gidiyor - ayri dursun.
   Calismalarimiz sayfasina gider (eskiden katalog onizlemesi), mobilde de gorunmeli. */
.nav__calismalar {
  padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--on-2) !important;
}
.nav__calismalar:hover { border-color: var(--acc); color: var(--on) !important; }
/* "Calismalarimiz" "Katalog"tan uzun: 320px'te kaydirinca beliren logoyla
   arasinda bosluk kalmiyordu (olculdu: logo sagi 120px, link solu 120px). */
@media (max-width: 360px) {
  .nav__linkler .nav__calismalar { padding: 6px 9px; letter-spacing: .06em; }
}

/* Sayfa DEGISTIREN baglantilarin kutusu. Capalardan ince bir cizgiyle ayrilir:
   soldakiler sayfa icinde gezdiriyor, buradakiler baska bir sayfaya goturuyor.
   Ayrim olmadan dil anahtari son capanin yaninda oksuz duruyordu. */
.nav__eylem {
  display: flex; align-items: center; gap: 14px;
  padding-left: 26px; border-left: 1px solid var(--line);
}

/* Dil anahtari. Iki dil varken tek dugmeydi ("EN" -> Ingilizceye gecer).
   Uc dilde tek dugme nereye gittigini soyleyemez, o yuzden ucu de yan yana.
   Uc ayri rozet serit basini kalabaliklastiriyordu; tek cerceve icinde uc
   bolme - olcu aletinin taksimati gibi - hem daha sessiz hem daha okunur.
   Bolmeler esit genislikte: dil degisince seridin duzeni oynamasin. */
.dil {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: 999px;
}
.nav__linkler .dil__a {
  min-width: 34px; padding: 5px 9px; text-align: center;
  color: var(--on-3); transition: color .25s, background-color .25s;
}
.dil__a + .dil__a { border-left: 1px solid var(--line); }
.nav__linkler .dil__a:hover { color: var(--on); background: rgba(255,255,255,.04); }
/* Acik dil zeminle isaretli, sadece metin rengiyle degil: 11px mono harflerde
   var(--on-3) -> var(--on) farki tek basina secili/secilmemis ayrimini
   tasimiyordu (kucuk ekranda olculdu). */
.nav__linkler .dil__a--acik {
  color: var(--bg); background: var(--acc); cursor: default;
}
.nav__linkler .dil__a--acik:hover { color: var(--bg); background: var(--acc); }

/* --- mobil menu (js/menu.js) ---
   Dugme masaustunde yok. Menu tam ekran perde: buyuk dokunma hedefleri,
   bolum adlari baslik puntosunda - sayfadaki bolum basliklariyla ayni dil. */
.nav__menu { display: none; }
.mmenu[hidden] { display: none; }
.mmenu {
  position: fixed; inset: 0; z-index: 55; padding: calc(var(--nav-h) + 28px) var(--pad) 40px;
  display: flex; flex-direction: column; background: var(--bg);
  animation: menuGir .3s var(--ease-out);
}
.mmenu a {
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 1;
  letter-spacing: -.01em; text-transform: uppercase; color: var(--on);
}
.mmenu a:active { color: var(--acc); }
.mmenu .mmenu__sayfa { margin-top: auto; border: 0; font-family: var(--f-mono); font-weight: 400;
  font-size: 12px; letter-spacing: .16em; color: var(--acc); }
@keyframes menuGir { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
html.menu-acik { overflow: hidden; }
html.menu-acik .nav { background: var(--bg); border-bottom-color: var(--line); }
html.menu-acik .nav__logo { opacity: 1; transform: none; }

/* 768: engine.js IS_SM ve asagidaki mobil blogu ile ayni kirilim. */
@media (max-width: 768px) {
  /* Capalar gizlenir; eylem kutusu kalir - katalog ve dil anahtarina
     telefondan da ulasilmali. Musterinin yabanci alicisi siteyi telefondan
     acacak. Ayirici cizgi de gider: solunda ayrilacak bir sey kalmiyor. */
  .nav__linkler > a { display: none; }
  .nav__eylem { padding-left: 0; border-left: 0; gap: 10px; }
  .nav__linkler { gap: 0; }
  /* Uc bolmeli anahtar, eski tek dugmeden ~55px genis; serit basinda logoyla
     yarisiyor. Bolmeler daraltiliyor - "TR/EN/DE" iki harf, esit genislik
     zaten iceriginden geliyor, min-width'e gerek yok. */
  .nav__linkler .dil__a { min-width: 0; padding: 5px 7px; }
  /* Rozet ASLA iki satira dusmemeli: Almanca "UNSERE ARBEITEN" sarinca serit
     yuksekligini asiyor ve logonun uzerine biniyordu. */
  .nav__calismalar { white-space: nowrap; }
  /* Logo flex icinde eziliyordu - 320px'te 26px'e kadar inip okunmaz hale
     geliyordu (olculdu). Tabani var, geri kalanini oteki ikisi verecek. */
  .nav__logo { width: 104px; flex: 0 0 auto; }

  /* Calismalarimiz menuye tasindi - seritte logo, dil, menu dugmesi kalir. */
  .nav__linkler .nav__calismalar { display: none; }
  .nav__menu {
    display: grid; place-content: center; gap: 6px; width: 44px; height: 44px;
    margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .nav__menu span { display: block; width: 22px; height: 1.5px; background: var(--on);
    transition: transform .3s var(--ease-out); }
  .nav__menu[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav__menu[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }
  .nav__linkler { margin-left: auto; margin-right: 8px; }
}

/* 400: en dar telefon + en uzun dil. Uc eleman da ayni anda kisalmazsa
   Almanca "UNSERE ARBEITEN" 320px'te seridi tasiriyor (olculdu: 324 > 320).
   Once punto, sonra dolgu, en son logo - marka en sona birakiliyor. */
@media (max-width: 400px) {
  .nav__logo { width: 88px; }
  .nav__eylem { gap: 8px; }
  .nav__linkler .nav__calismalar {
    font-size: 10px; padding: 5px 8px; letter-spacing: .04em;
  }
  .nav__linkler .dil__a { font-size: 10px; padding: 5px 6px; letter-spacing: .04em; }
}

/* 340: iPhone SE genisligi. Almancada uc eleman sag dolguyu 8px yiyor ve
   logoyla rozet arasinda bosluk kalmiyordu (olculdu). Son bir tur kisalma. */
@media (max-width: 340px) {
  .nav__logo { width: 72px; }
  .nav__linkler .nav__calismalar { padding: 5px 6px; letter-spacing: .02em; }
  .nav__linkler .dil__a { padding: 5px 5px; }
}

/* Almanca bilesik isimler telefona sigmiyor: "Bearbeitungskompetenzen" 320px
   ekranda 304px istiyor, 265px yer var - sayfa yana kayiyordu (olculdu).
   Kelimeyi ortasindan kirmak (overflow-wrap) Almanca'da okunmaz hale
   getirir; hyphens:auto tarayicinin Almanca sozlugunu kullanir ve hecesinden
   boler: "Bearbeitungs-kompetenzen". lang="de" sarti var, yoksa sozluk
   secilemez. Turkce ve Ingilizce sayfalar etkilenmiyor. */
html[lang="de"] { hyphens: auto; }
/* Mono etiketler ve logo tirelenmez: harf arasi genis, tire orada kir gibi
   durur - ustelik hicbiri sigmamacak kadar uzun degil. */
html[lang="de"] .kucuk-baslik,
html[lang="de"] .nav__linkler,
html[lang="de"] .kabs__no,
html[lang="de"] .kabp__no,
html[lang="de"] .kabp__etiket,
html[lang="de"] .kabp__olcu { hyphens: manual; }

/* ============================================================ LOADER */
.loader {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .7s var(--ease-out), visibility .7s;
}
.loader.gizli { opacity: 0; visibility: hidden; }
.loader__kadran { position: relative; width: 120px; height: 120px; }
.loader__kadran svg { transform: rotate(-90deg); }
.loader__yay { transition: stroke-dashoffset .25s linear; }
.loader__pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; color: var(--on-2);
}
.loader__alt {
  position: absolute; left: 0; right: 0; bottom: -46px; text-align: center;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--on-3);
}

/* ============================================================ FILM
   Uzun bolum = scroll butcesi. Icindeki sahne sticky, ekranda kalir;
   scroll ilerledikce canvas'taki kare degisir.                              */
#film { position: relative; height: 360vh; }   /* 4 durak · 5 sn film */
.sahne {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  /* WebGL/canvas temizlenmeden once ayni gradyani CSS ile boya:
     asla bos/beyaz kare gorunmez (bkz. motion-kit 01-is-akisi, adim 6) */
  background:
    radial-gradient(ellipse 90% 60% at 50% 42%, #16212e 0%, #0a121b 55%, #05090f 100%);
}
#reel { position: absolute; inset: 0; width: 100%; height: 100%; }
.sahne::after {                              /* vinyet + alt karartma: yazi okunsun */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,9,15,.72) 0%, rgba(5,9,15,0) 26%,
                    rgba(5,9,15,0) 52%, rgba(5,9,15,.88) 100%),
    radial-gradient(ellipse 78% 68% at 50% 50%, rgba(5,9,15,0) 40%, rgba(5,9,15,.62) 100%);
}
.sahne.hazir #reel { opacity: 1; }
#reel { opacity: 0; transition: opacity .9s var(--ease-out); }

/* --- film ustu anlatim --- */
.film-ust {
  position: absolute; z-index: 3; left: var(--pad); right: var(--pad);
  bottom: clamp(40px, 9vh, 92px);
}
.annot { position: absolute; left: 0; right: 0; bottom: 0;
         opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
.annot__no {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--acc);
  display: block; margin-bottom: 10px;
}
.annot h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(34px, 6.2vw, 82px); line-height: .95; letter-spacing: -.02em;
  text-transform: uppercase; margin: 0;
}
.annot p { margin: 12px 0 0; max-width: 46ch; color: var(--on-2); font-size: 15px; }

/* --- hero basligi (film basinda) --- */
.hero {
  position: absolute; z-index: 4; inset: auto var(--pad) 0 var(--pad);
  top: 50%; transform: translateY(-50%); text-align: center;
  will-change: opacity, transform;
  --hero-taban: -50%;              /* motion.js cikis animasyonunda bunu okur */
}
/* Parlak islenmis metal uzerinde beyaz yazi kayboluyor.
   Logonun ARKASINA yumusak bir perde: kenari gorunmez, metni kurtarir. */
.hero::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1100px, 128vw); height: min(560px, 62vh);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
              rgba(3,7,12,.86) 0%, rgba(3,7,12,.62) 42%,
              rgba(3,7,12,.24) 68%, rgba(3,7,12,0) 100%);
}
.hero__logo { width: min(560px, 76vw); margin: 0 auto; }
.hero__alt {
  margin-top: 22px; font-family: var(--f-mono); font-size: clamp(10px, 1.5vw, 13px);
  letter-spacing: .32em; text-transform: uppercase; color: var(--on-2);
}

/* --- ilerleme cubugu --- */
.ilerleme {
  position: absolute; z-index: 5; left: var(--pad); right: var(--pad); bottom: 22px;
  height: 1px; background: var(--line);
}
.ilerleme__dolu { height: 100%; width: 0; background: var(--acc); transform-origin: left; }

/* ============================================================ BOLUMLER */
.bolum { position: relative; padding: clamp(90px, 14vh, 170px) var(--pad); }
.bolum__ust { display: flex; align-items: baseline; gap: 18px; margin-bottom: 46px; }
.bolum h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(30px, 5vw, 62px); line-height: .98; letter-spacing: -.018em;
  text-transform: uppercase; margin: 0;
}

/* ============================================================ SAYFALAR
   2026-10-19 musteri notu: "kayinca tam sayfa acilsin", "tamamini okumak
   istediginde okuyamiyor". Kaydirma tarayicinin kendi scroll-snap'i: film
   duraklari + her bolum bir yakalama noktasi, snap-stop:always ile bir
   hareket tek sayfa ilerler. Her bolum en az bir ekran boyu ve icerigi
   ekrana sigacak sekilde dikey ortalanir. Sadece hareket acikken
   (.js-motion); reduced-motion'da sayfa duz akar.                         */
html.js-motion { scroll-snap-type: y mandatory; }
#film { --film-menzil: 260vh; }               /* #film yuksekligi - 100vh */
.durak {
  position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none;
  top: calc(var(--v) * var(--film-menzil));
  scroll-snap-align: start; scroll-snap-stop: always;
}
.js-motion .bolum {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + clamp(20px, 5svh, 64px));
  padding-bottom: clamp(20px, 5svh, 64px);
  scroll-snap-align: start; scroll-snap-stop: always;
  scroll-margin-top: 0;                       /* serit payi artik dolguda */
}
/* Perde kaymasi icerige (motion.js 6). Bolum ve .alt-sayfa yakalama noktasi,
   kendileri kaymaz; degiskenler miras yoluyla iceriklerine iner. */
.js-motion .bolum > :not(.alt-sayfa), .js-motion .alt-sayfa > * {
  translate: 0 var(--perde-y, 0px); scale: var(--perde-s, 1);
}
/* Ust sayfa opak olmali, yoksa alttaki gecerken arkadan gorunur (motion.js 6). */
.perde { z-index: 1; background: var(--bg); box-shadow: 0 -28px 60px rgba(0, 0, 0, .45); }

/* Kisa ekranda basliklar ve bosluklar ekran yuksekligiyle kuculur. */
.js-motion .bolum h2 { font-size: clamp(28px, min(5vw, 8svh), 62px); }
.js-motion .bolum__ust { margin-bottom: clamp(12px, 3.5svh, 46px); }
.js-motion .kabone { margin-top: clamp(14px, 3svh, 60px); padding: clamp(20px, min(3.4vw, 4svh), 52px); }
.js-motion .kabone h3 { font-size: clamp(30px, min(4.6vw, 7svh), 68px); }
.js-motion .kabone__giris { margin-top: clamp(8px, 2svh, 18px); }
.js-motion .kabone__madde { margin-top: clamp(10px, 2.6svh, 26px); }
.js-motion .kabone__madde li { padding: clamp(6px, 1.4svh, 14px) 0; }
.js-motion .kabone__link { margin-top: clamp(10px, 2.6svh, 26px); }
.js-motion .kabone__mozaik { height: clamp(240px, 58svh, 620px); grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); }
.js-motion .kabone__mozaik img { height: 100%; aspect-ratio: auto; min-height: 0; }
.js-motion .kabs__h { margin-top: 0; }
.js-motion .kabp__gorsel { max-height: min(460px, 52svh); }
.js-motion .neden__h { margin-top: clamp(24px, 6svh, 82px); }

/* Kisa masaustu ekrani (laptop, 1366x768 gibi): kalip setleri sayfasi
   ancak etiketler (basligin tekrari) dusunce sigiyor. */
@media (min-width: 769px) and (max-height: 920px) {
  .js-motion .kabone .kabp__etiket { display: none; }
  .js-motion .bolum h2 { font-size: clamp(26px, 6svh, 62px); }
  .js-motion .kabone__madde span { font-size: 13.5px; line-height: 1.4; }
  .js-motion .kabone__giris { font-size: 16px; }
  /* Metin sutunu genisler, madde aciklamalari tek satira iner. */
  .js-motion .kabone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 800px ve alti (1280x720): kucuk bolum etiketi de duser - hemen altindaki
   buyuk baslik ayni kelime. */
@media (min-width: 769px) and (max-height: 800px) {
  .js-motion .bolum__ust { display: none; }
  .js-motion .bolum { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 16px; }
  .js-motion .kabone--olcu .kabp__olcu div { padding: 8px 12px 8px 0; }
}

/* Son sayfa: iletisim + dip birlikte tam bir ekran. */
.js-motion .iletisim { padding-bottom: 0; }
.iletisim .dip { margin: auto calc(-1 * var(--pad)) 0; }
.js-motion .iletisim .dip { margin-top: auto; }
.js-motion .iletisim__satir { margin-bottom: clamp(24px, 6svh, 80px); }

/* --- reveal: scroll'la acilan her sey --- */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].gorundu { opacity: 1; transform: none; }
/* JS kapaliysa (reduced-motion / hata) hicbir sey gizli kalmasin */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* --- kabiliyetler: sekmeli panel ---
   2026-10-15 ikinci tur. Ilk denemede her kabiliyet buyuk gorselli bir
   satirdi; "resimler cok buyuk, yazi az kalmis" dendi. Simdi solda liste,
   sagda tek panel - bolum tek ekrana sigiyor.
   Grid: butonlar 1. sutunda kendi satirlarinda, butun paneller 2. sutunda
   AYNI hucrede (1/-1); gizli olanlar display:none. Mobilde grid tek sutuna
   duser ve DOM sirasi (buton, panel, buton...) akordeon olur. */
.kabs { margin-top: clamp(36px, 5vh, 60px);
        display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
        grid-template-rows: repeat(5, auto) 1fr;
        column-gap: clamp(28px, 4vw, 64px); border-top: 1px solid var(--line-2); }
.kabs__sekme { grid-column: 1; display: flex; align-items: baseline; gap: 16px;
  padding: 20px 4px 20px 18px; border: 0; border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent; background: none; color: var(--on-3);
  font: inherit; text-align: left; cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s; }
.kabs__sekme:hover { color: var(--on); }
.kabs__sekme[aria-selected="true"] { color: var(--on); border-left-color: var(--acc);
  background: linear-gradient(90deg, rgba(192,138,70,.08), transparent 70%); }
.kabs__sekme:focus-visible { outline: 1px solid var(--acc); outline-offset: -1px; }
.kabs__no { font-family: var(--f-mono); font-size: 11px; color: var(--acc); }
.kabs__ad { font-family: var(--f-display); font-weight: 600; font-size: 17px;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; }
.kabs__sekme:nth-of-type(1) { grid-row: 1; }
.kabs__sekme:nth-of-type(2) { grid-row: 2; }
.kabs__sekme:nth-of-type(3) { grid-row: 3; }
.kabs__sekme:nth-of-type(4) { grid-row: 4; }
.kabs__sekme:nth-of-type(5) { grid-row: 5; }

.kabp { grid-column: 2; grid-row: 1 / -1; padding-top: 28px;
        display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(24px, 3vw, 48px); align-items: start;
        min-height: 520px; }          /* sekme degisince alttaki iletisim zipliyor */
.kabp[hidden] { display: none; }
.kabp:not([hidden]) { animation: kabGir .45s var(--ease-out); }
@keyframes kabGir { from { opacity: 0; transform: translateY(10px); } }
.kabp__gorsel { aspect-ratio: 4/5; max-height: 460px; overflow: hidden; border-radius: 2px; background: var(--bg); }
.kabp__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kabp__no { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; color: var(--acc); }
.kabp h3 { margin: 12px 0 0; font-family: var(--f-display); font-weight: 700;
           font-size: clamp(26px, 2.6vw, 38px); line-height: 1.04; letter-spacing: -.01em;
           text-transform: uppercase; }
.kabp p { margin: 18px 0 0; max-width: 50ch; font-size: 16.5px; line-height: 1.65; color: var(--on-2); }

/* Etiketler: katalogdaki yan etiketlerin site karsiligi. */
.kabp__etiket { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kabp__etiket li { padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 2px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-2); }

/* Derin delmenin rakamlari: eskiden bolum genisliginde dev sayaclar ve alti
   kutuydu ("bu bolumu begenmedim"). Simdi panelin icinde kucuk bir tablo. */
.kabp__olcu { margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line); }
.kabp__olcu div { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); }
/* Bes olcu var: tek kalan son satir yarim cizgiyle kalmasin, tam genislik. */
.kabp__olcu div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kabp__olcu dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--on-3); }
.kabp__olcu dd { margin: 6px 0 0; font-family: var(--f-display); font-weight: 700;
  font-size: 22px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kabp__olcu small { margin-left: 4px; font-family: var(--f-body); font-weight: 500;
  font-size: 12px; color: var(--on-3); }

/* --- kalip setleri: one cikan blok ---
   Ucuncu tur: "kalip setleri digerleriyle ayni gibi, ona daha cok vurgu".
   Sekmelerin USTUNDE, tam genislik, uc gorsellik mozaik + uc madde. Bakir
   ust cizgi ve acik zemin onu sekme panellerinden ayiriyor. */
.kabone { margin-top: clamp(36px, 5vh, 60px); padding: clamp(28px, 3.4vw, 52px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid var(--line); border-top: 2px solid var(--acc); border-radius: 2px; }
.kabone__etiket { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--acc); }
.kabone h3 { margin: 14px 0 0; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(38px, 4.6vw, 68px); line-height: .96; letter-spacing: -.018em; text-transform: uppercase; }
.kabone__giris { margin: 18px 0 0; max-width: 44ch; font-size: 18px; line-height: 1.55; color: var(--on); }
.kabone__madde { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: m; border-top: 1px solid var(--line); }
.kabone__madde li { counter-increment: m; display: grid; grid-template-columns: 34px 1fr;
  column-gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.kabone__madde li::before { content: counter(m, decimal-leading-zero); grid-row: 1 / 3;
  font-family: var(--f-mono); font-size: 11px; color: var(--acc); padding-top: 4px; }
.kabone__madde strong { font-family: var(--f-display); font-weight: 600; font-size: 16px;
  letter-spacing: .02em; text-transform: uppercase; }
.kabone__madde span { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--on-2); }
.kabone__link { display: inline-flex; gap: 8px; margin-top: 26px; padding-bottom: 3px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on); border-bottom: 1px solid var(--acc); }
.kabone__link:hover { color: var(--acc); }
.kabone__mozaik { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kabone__mozaik img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; }
.kabone__mozaik .kabone__ana { grid-column: 1 / -1; aspect-ratio: 16/10; }

.kabs__h { margin: clamp(56px, 8vh, 96px) 0 0; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.005em; text-transform: uppercase; color: var(--on-2); }
.kabs__h + .kabs { margin-top: 22px; }

/* --- kalite kontrol (2026-10-19) ---
   Solda ilke + metin + dort olcu, sagda uc olcum fotografi yan yana.
   Fotograflarin hepsi dik; yukseklik ekrana bagli ki sayfa tek ekrana sigsin. */
.kalite { margin-top: clamp(18px, 4svh, 52px); display: grid;
          grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
          gap: clamp(28px, 4vw, 72px); align-items: center; }
.kalite__lead { margin: 0; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(24px, min(2.8vw, 4.6svh), 40px); line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.01em; }
.kalite__p { margin: clamp(10px, 2.4svh, 22px) 0 0; max-width: 48ch;
  font-size: 16px; line-height: 1.6; color: var(--on-2); }
.kalite__olcu { margin: clamp(14px, 3.4svh, 34px) 0 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.kalite__olcu div { padding: clamp(8px, 1.8svh, 16px) 12px clamp(8px, 1.8svh, 16px) 0;
  border-bottom: 1px solid var(--line); }
.kalite__olcu dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--on-3); }
.kalite__olcu dd { margin: 6px 0 0; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(22px, min(2.4vw, 4svh), 34px); color: var(--on); }
.kalite__olcu small { margin-left: 4px; font-family: var(--f-body); font-weight: 500;
  font-size: .5em; color: var(--on-3); }
.kalite__gorsel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px); }
.kalite__gorsel figure { margin: 0; min-width: 0; }
.kalite__gorsel img { width: 100%; height: clamp(180px, 52svh, 560px); object-fit: cover;
  border-radius: 2px; background: var(--bg-2); }
.kalite__gorsel figcaption { margin-top: 10px; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-3); }

/* --- hakkimizda + neden ---
   Paragraflar gazete sutunu gibi yan yana: tek sutunda 3 paragraf ekranin
   yarisini yiyordu. "Neden" maddeleri surec seridini yeniden kullanir. */
.hakkimizda { margin-top: clamp(30px, 4vh, 52px);
              display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
              gap: clamp(22px, 3vw, 46px); }
.hakkimizda p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--on-3); max-width: 48ch; }
.hakkimizda p:first-child { color: var(--on-2); }
.neden__h { margin: clamp(46px, 7vh, 82px) 0 22px;
            font-family: var(--f-display); font-weight: 700;
            font-size: clamp(21px, 2.4vw, 29px); letter-spacing: -.01em; text-transform: uppercase; }

/* 2026-09-22 musteri maddeleri. Once kisa bakir cizgiyle isaretliydiler ve
   altlarinda dort aciklamali kart vardi; musteri kartlari kaldirtti ve
   "1-2-3-4-5 olarak" numaralanmasini istedi. Numara CSS sayacindan:
   decimal-leading-zero 01..05 veriyor, sitenin geri kalanindaki iki haneli
   sira numaralariyla (spec, adim, film) ayni bicim. */
.neden__liste {
  list-style: none; margin: 0; padding: 0; counter-reset: neden;
  display: grid; gap: 30px 26px; grid-template-columns: 1fr;
}
/* Sutun sayisi auto-fit'e birakilmiyor: bes madde dort sutuna dustugunde
   sonuncusu alt satirda tek basina kaliyor, bolum yarim kalmis gorunuyordu.
   Genis ekranda tam bes sutun - Kabiliyet bolumundeki bes spec ile ayni
   ritim, tesadufen degil: ikisi de "bes baslik tek sira". */
@media (min-width: 700px)  { .neden__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .neden__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.neden__liste li { font-size: 17px; line-height: 1.38; color: var(--on-2); }
/* Numara metnin YANINDA degil USTUNDE. Yanda 11px mono, 17px metnin
   golgesinde kaliyor ve madde numarasi degil dipnot isareti gibi okunuyordu
   (olculdu, bakildi). Ustte kendi satirinda durunca Surec kartlarindaki
   .adim__no ile ayni dil oluyor: bakir kucuk numara, altinda metin. */
.neden__liste li::before {
  counter-increment: neden;
  content: counter(neden, decimal-leading-zero);
  display: block; margin-bottom: 11px;
  font-family: var(--f-mono); font-size: 11px; color: var(--acc);
  font-variant-numeric: tabular-nums;
}

/* --- iletisim --- */
.iletisim { border-top: 1px solid var(--line-2); }
/* Secici `.bolum h2` ile ayni ozgullukte OLMALI, yoksa o kural bunu eziyordu:
   punto clamp(30px,5vw,62px)'e, alt bosluk 0'a dusuyordu. Kapanis basligi
   bolum basliklarindan buyuk olsun diye yazilmisti - simdi oyle. */
.bolum h2.iletisim__dev {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(40px, 9vw, 128px); line-height: .92; letter-spacing: -.025em;
  text-transform: uppercase; margin: 0 0 clamp(40px, 6vw, 72px);
}
/* Degerler artik cok satirli (adres, iki telefon) - baseline hizasi bozuyordu. */
.iletisim__satir { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.iletisim__k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
               text-transform: uppercase; color: var(--on-3); display: block; margin-bottom: 8px; }
.iletisim__v { font-size: 17px; line-height: 1.5; }
.iletisim__v a { color: inherit; text-decoration: none;
                 border-bottom: 1px solid var(--line-2); transition: border-color .2s; }
.iletisim__v a:hover { border-bottom-color: var(--acc); }

.dip { padding: 26px var(--pad) 34px; border-top: 1px solid var(--line);
       display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
       font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
       text-transform: uppercase; color: var(--on-3); }

/* ============================================================ IMLEC
   Sadece hassas isaretleyicide (fare). Dokunmatikte hic kurulmaz.           */
.imlec { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
         mix-blend-mode: difference; opacity: 0; transition: opacity .3s; }
.imlec.acik { opacity: 1; }
.imlec__halka { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
                border: 1px solid rgba(255,255,255,.7); border-radius: 50%; }
.imlec__nokta { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px;
                background: #fff; border-radius: 50%; }
@media (pointer: coarse) { .imlec { display: none; } }

/* ============================================================================
   MOBIL
   Kirilim 768px - engine.js'teki IS_SM ile AYNI olmali. Farkli olursa film
   bant moduna gecerken CSS gecmez (ya da tersi) ve kadraj bozulur.
   ========================================================================== */
@media (max-width: 768px) {

  /* --- film: TAM EKRAN, masaustundeki gibi -------------------------------
     Bir sure nav altinda bir banda ciziliyordu: kareler 16:9'du ve dikey
     telefonda cover-fit urunu kadrajin disina atiyordu (414x896'da yanlardan
     226 px kirpma). Bant bunu hafifletti ama ekranin %52'sini bos birakti -
     "KAYDIR" bile katlanin altinda kaliyordu.

     Cozum kadraji kesmek degil, NATIF 9:16 film uretmek oldu. frames/sm/
     artik ayri bir dikey cekim; kare orani ekran oraniyla ortustugu icin
     kirpma pratikte sifir ve film tekrar tam ekran olabiliyor. Dolayisiyla
     buradaki bant kurallari KALDIRILDI - #reel ve .sahne::after masaustu
     degerlerini kullaniyor.                                                */
  #film { height: 280vh; }        /* 360vh telefonda ~4 parmak hareketiydi */

  .annot h2 { font-size: clamp(30px, 8.4vw, 44px); }
  .annot p  { font-size: 14px; margin-top: 10px; }

  .hero::before { width: 128vw; height: 40vh; }
  .hero__logo { width: 76vw; }

  /* --- sayfalar: film kisa, Hakkimizda iki alt sayfa ---------------------- */
  #film { --film-menzil: 180vh; }
  .js-motion #hakkimizda { display: block; padding-top: 0; padding-bottom: 0;
                           scroll-snap-align: none; }
  .js-motion .alt-sayfa {
    min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--nav-h) + 16px) 0 16px;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .js-motion .neden__h { margin-top: 0; }
  /* Kalip setleri tek ekrana: kucuk iki gorsel ve madde aciklamalari
     mobilde dusuyor (etiketler basligin tekrari). */
  .js-motion .kabone__mozaik { height: auto; grid-template-rows: none; }
  .js-motion .kabone__mozaik img:not(.kabone__ana) { display: none; }
  .js-motion .kabone__mozaik .kabone__ana { aspect-ratio: 16/9; height: auto; max-height: 26svh; }
  .js-motion .kabone__madde span, .js-motion .kabone .kabp__etiket { display: none; }
  .js-motion .kabone__giris { font-size: 15px; }
  .js-motion .kabp__gorsel { aspect-ratio: 16/9; max-height: 24svh; }
  .js-motion .kabp .kabp__etiket { display: none; }

  @media (max-height: 780px) {
    .js-motion .kabone__mozaik .kabone__ana { max-height: 19svh; }
    html.js-motion .kabp__gorsel { height: 19svh; }
    html.js-motion .iletisim__satir { gap: 14px 24px; }
    html.js-motion .kabone--olcu .kabone__ana { max-height: 14svh; }
    html.js-motion .kabone--olcu .kabone__giris { font-size: 13.5px; }
    .js-motion .bolum h2.iletisim__dev { font-size: 34px; }
    .js-motion .kabone h3 { font-size: 28px; }
    .js-motion #kabiliyet .bolum__ust, .js-motion .kabone__etiket,
    .js-motion #kalite .bolum__ust { display: none; }
    .kalite__p { font-size: 14px; line-height: 1.5; }
    .kalite__gorsel figcaption { display: none; }
    .js-motion .kabs__sekme, .js-motion .kabs__sekme:nth-of-type(n) { padding-top: 12px; padding-bottom: 12px; }
    .js-motion .kabp { padding-bottom: 16px; gap: 12px; }
  }

  /* --- bolumler: dikey nefes payi yariya --------------------------------- */
  .bolum { padding: clamp(56px, 9vh, 88px) var(--pad); }
  .bolum__ust { margin-bottom: 28px; gap: 10px; flex-wrap: wrap; }

  /* --- kabiliyetler: akordeon. Panel kendi butonunun altinda acilir. ---- */
  .kabs { grid-template-columns: 1fr; grid-template-rows: none; }
  .kabs__sekme, .kabs__sekme:nth-of-type(n) { grid-row: auto; padding: 18px 4px 18px 14px; }
  .kabp { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; gap: 18px;
          padding: 4px 0 30px; border-bottom: 1px solid var(--line); min-height: 0; }
  .kabp__gorsel { aspect-ratio: 4/3; max-height: none; }
  .kabp__no, .kabp h3 { display: none; }      /* baslik zaten butonda */
  .kabp p { margin-top: 0; font-size: 15px; }

  .kabone { grid-template-columns: 1fr; padding: 22px 18px; }
  .kabone__mozaik { order: -1; gap: 6px; }
  .kabone__giris { font-size: 16px; }

  /* --- derin delme karti: metin uzun + olcu tablosu. Tek ekrana sigsin diye
     olculer siki, gorsel alcak, "02" isareti duser. ------------------------ */
  .js-motion .kabone--olcu .kabone__etiket { display: none; }
  .js-motion .kabone--olcu h3 { margin-top: 0; }
  .js-motion .kabone--olcu .kabone__giris { font-size: 14px; line-height: 1.5; margin-top: 8px; }
  .js-motion .kabone--olcu .kabone__ana { max-height: 20svh; }
  .kabone--olcu .kabp__olcu { margin-top: 12px; }
  .kabone--olcu .kabp__olcu div { padding: 8px 8px 8px 0; }
  .kabone--olcu .kabp__olcu dt { font-size: 9px; letter-spacing: .08em; }
  .kabone--olcu .kabp__olcu dd { font-size: 20px; margin-top: 3px; }

  /* --- kalite: tek sutun, fotograflar ustte kucuk serit ---------------- */
  .kalite { grid-template-columns: 1fr; gap: 18px; }
  .kalite__gorsel { order: -1; gap: 6px; }
  .kalite__gorsel img { height: 17svh; }
  .kalite__olcu dd { font-size: 22px; margin-top: 2px; }
  .kalite__olcu div { padding: 8px 10px 8px 0; }
  .kalite__lead { font-size: 22px; }
  .js-motion #kalite .bolum__ust { margin-bottom: 10px; }
  .kalite__gorsel figcaption { font-size: 8.5px; letter-spacing: .08em; margin-top: 6px; }
  .kalite__p { font-size: 15px; }

  /* --- hakkimizda: ilk paragraf giris, digerleri ikincil (Chrome'da bakildi:
     uc esit gri blok duz metin duvari gibiydi) -------------------------- */
  .hakkimizda { gap: 14px; }
  .hakkimizda p:first-child { font-size: 19px; line-height: 1.45; color: var(--on); }
  .hakkimizda p { font-size: 15px; }

  /* --- neden: numara metnin solunda, satirlar ince cizgiyle. Ustte ayri
     satirdaki numara bes maddeyi ekranda dagitiyordu. ------------------- */
  .neden__liste { gap: 0; border-top: 1px solid var(--line); }
  .neden__liste li { display: grid; grid-template-columns: 34px 1fr; align-items: baseline;
    padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--on); font-size: 17px; }
  .neden__liste li::before { margin: 0; }

  /* --- kabiliyet paneli: gorsel sutunu doldursun. aspect-ratio + max-height
     birlikte genisligi daraltiyordu, sagda bosluk kaliyordu. ------------ */
  .js-motion .kabp__gorsel { aspect-ratio: auto; width: 100%; height: 24svh; max-height: none; }

  /* --- iletisim: telefon ve e-posta tek dokunusla - belirgin dugme -------- */
  .iletisim__satir > div:nth-child(-n+2) { flex: 1 1 100%; }
  .iletisim__satir > div:nth-child(-n+2) .iletisim__v a {
    display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
    padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 2px;
    font-size: 17px;
  }
  .iletisim__satir > div:nth-child(-n+2) .iletisim__v a::after { content: "→"; color: var(--acc); }

  /* --- iletisim: 64px'lik yatay bosluk tek sutunda anlamsizdi ----------- */
  .iletisim__satir { gap: 26px 32px; }
  .iletisim__v { font-size: 16px; }

  .dip { font-size: 9px; letter-spacing: .1em; }
}