/* =====================================================================
   SIFF ELEKTROMEKANİK — TASARIM SİSTEMİ
   Yön: endüstriyel hassasiyet. Mühendislik çiziminin dili: keskin köşe,
   ince ölçü çizgisi, köşe işareti, monospace teknik etiket. Siyah sahne,
   lime cerrahi vurgu. Gölge yok; derinlik katman ve kenardan gelir.
   Bütün sayfalar bu tek katmandan beslenir.
   ===================================================================== */

/* --- 1. FONTLAR ------------------------------------------------------ */

@font-face {
  font-family: 'Benzin';
  src: url('/font/Benzin-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Benzin';
  src: url('/font/Benzin-Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Benzin';
  src: url('/font/Benzin-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Plex';
  src: url('/font/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Plex';
  src: url('/font/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('/font/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('/font/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}

/* --- 2. BELİRTEÇLER (tek kaynak) ------------------------------------- */

:root {
  /* renk rolleri */
  --sahne: #000;
  --kat-1: #080808;
  --kat-2: #0f0f0f;
  --kat-3: #161616;
  --lime: #cdd84a;
  --lime-iz: rgba(205, 216, 74, 0.08);
  --lime-sonuk: rgba(205, 216, 74, 0.42);
  /* Okunacak her metin siyah üstünde en az 7:1. Daha koyu gri yok. */
  --metin: #f0f0f0;      /* gövde ve başlık — 17:1 */
  --metin-2: #b8b8b8;    /* ikincil metin — 9,7:1 */
  --metin-3: #9e9e9e;    /* etiket ve künye — 7,1:1 (taban) */
  /* Ters yüzey (lime panel) için aynı üç kademe; taban yine 7:1. */
  --ters-metin: rgba(0, 0, 0, 0.88);   /* 11,3:1 */
  --ters-metin-2: rgba(0, 0, 0, 0.8);  /* 9,3:1 */
  --ters-metin-3: rgba(0, 0, 0, 0.72); /* 7,3:1 (taban) */

  /* ANTRASİT YÜZEY: kart ve panellerin zemini. Sahne saf siyah kalır, kart
     onun üstünde NET bir blok olarak durur, lime aksan ikisini keser.
     Ton seçimi ölçümle bağlıdır: marka lime'ı metin olarak #3d3d3d üstünde
     6,99:1'e düşer, yani #404040 tabanı kıracaktı. Tavan #3a3a3a'dır. */
  --yuzey: #333333;      /* kart zemini */
  --yuzey-2: #3a3a3a;    /* hover: bir kademe açılır, hâlâ taban üstünde */
  /* Antrasit üstünde siyah zeminin tonları çalışmaz (--metin-2 5,2:1,
     --metin-3 3,9:1). Yüzeyin kendi üçlüsü, tabana göre ölçülmüştür. */
  --yuzey-metin: #f0f0f0;   /* 10,0:1 */
  --yuzey-metin-2: #d6d6d6; /* 7,8:1 */
  --yuzey-metin-3: #cccccc; /* 7,1:1 (taban) */
  --cizgi: rgba(255, 255, 255, 0.12);
  --cizgi-2: rgba(255, 255, 255, 0.26);
  --uyari: #ff9573;      /* hata metni — 9,3:1 */

  /* tipografi */
  --display: 'Benzin', 'Helvetica Neue', Arial, sans-serif;
  --govde: 'Plex', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'PlexMono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-mikro: clamp(12px, 0.16vw + 11px, 14px);
  --t-etiket: clamp(13px, 0.2vw + 12px, 15px);
  --t-kucuk: clamp(15px, 0.28vw + 13.5px, 17px);
  --t-govde: clamp(16px, 0.5vw + 14px, 19px);
  --t-govde-l: clamp(18px, 0.6vw + 15px, 22px);
  --t-h4: clamp(18px, 1.6vw, 22px);
  --t-h3: clamp(22px, 2.2vw, 30px);
  --t-h2: clamp(32px, 4.6vw, 62px);
  --t-h1: clamp(38px, 6vw, 82px);
  --t-dev: clamp(48px, 8vw, 104px);

  /* boşluk ölçeği */
  --b1: 4px;
  --b2: 8px;
  --b3: 16px;
  --b4: 24px;
  --b5: 40px;
  --b6: 64px;
  --b7: 96px;
  --b8: 144px;
  --bolum: clamp(52px, 6vw, 96px);

  /* yerleşim */
  --en: min(1480px, 92vw);
  --pay: clamp(20px, 4vw, 52px);

  /* hareket */
  --egri: cubic-bezier(0.16, 1, 0.3, 1);
  --hiz: 0.55s;
  --hiz-kisa: 0.28s;
}

/* --- 2B. ANTRASİT YÜZEY ---------------------------------------------- */
/* Kart ve panel ailesinin ORTAK zemini. Tek yerde durur ki yeni bir kart
   yazıldığında süreklilik kendiliğinden gelsin.
   Yüzey, siyah zeminin ton üçlüsünü KENDİ üçlüsüyle değiştirir: değişkenler
   miras alındığı için kartın içindeki `var(--metin-2)` yazan her kural
   antrasite göre doğru tonu alır, kural kural elle değiştirmek gerekmez. */
.tek-liste a,
.kart,
.destek-kutu,
.yan-kutu,
.fayda,
.ilke-kart,
.sayi-serit div,
.harita-kutu,
.form-kutu,
.parametre-secim,
.kars-sutun,
.video-kart,
.yer-tutucu {
  background: var(--yuzey);
  --metin: var(--yuzey-metin);
  --metin-2: var(--yuzey-metin-2);
  --metin-3: var(--yuzey-metin-3);
  color: var(--metin);
}

/* --- 3. TEMEL -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--sahne); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sahne);
  color: var(--metin);
  font-family: var(--govde);
  font-size: var(--t-govde);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  padding-bottom: 0.04em;
  letter-spacing: -0.022em;
  color: #fff;
  margin: 0;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-h4); font-weight: 600; }

::selection { background: var(--lime); color: var(--sahne); }
:focus-visible { outline: 1px solid var(--lime); outline-offset: 3px; }

.kap { width: 100%; max-width: var(--en); margin: 0 auto; padding: 0 var(--pay); }

/* --- 4. ORTAK DİL: teknik etiket -------------------------------------- */

.etiket {
  display: inline-flex;
  align-items: center;
  gap: var(--b2);
  font-family: var(--mono);
  font-size: var(--t-etiket);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}
.etiket::before {
  content: '';
  width: 20px; height: 1px;
  background: currentColor;
  flex: none;
}
.etiket .no { color: var(--metin-3); }

/* --- 5. BÖLÜM BAŞLIĞI ------------------------------------------------ */

.bolum { padding: var(--bolum) 0; position: relative; }
.bolum.kat { background: var(--kat-1); }

.bolum-basi {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--b3) var(--b6);
  padding-bottom: var(--b3);
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: var(--b5);
}
.bolum-basi .etiket { margin-bottom: var(--b3); }
.bolum-baslik { font-size: var(--t-h2); font-weight: 700; max-width: 15ch; }
.bolum-basi .yan { text-align: right; }
.bolum-basi .yan p { margin: 0; font-size: var(--t-kucuk); color: var(--metin-2); max-width: 34ch; }

/* --- 6. DÜĞMELER ----------------------------------------------------- */

.dugme {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--b2);
  font-family: var(--mono);
  font-size: var(--t-etiket);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 28px;
  border: 1px solid var(--cizgi-2);
  color: var(--metin);
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--hiz-kisa) var(--egri), border-color var(--hiz-kisa) var(--egri);
}
.dugme::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lime);
  transform: translateY(100%);
  transition: transform var(--hiz) var(--egri);
  z-index: -1;
}
@media (hover: hover) {
  .dugme:hover { color: var(--sahne); border-color: var(--lime); }
  .dugme:hover::before { transform: none; }
}
.dugme:active { color: var(--sahne); border-color: var(--lime); }
.dugme:active::before { transform: none; }
.dugme.dolu { background: var(--lime); border-color: var(--lime); color: var(--sahne); }
.dugme.dolu::before { background: var(--metin); }

.ok {
  display: inline-flex;
  align-items: center;
  gap: var(--b2);
  font-family: var(--mono);
  font-size: var(--t-etiket);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}
.ok::after {
  content: '';
  width: 18px; height: 1px;
  background: currentColor;
  transition: width var(--hiz) var(--egri);
}
.ok:hover::after { width: 34px; }

/* --- 7. ÜST ŞERİT + BAŞLIK ÇUBUĞU ------------------------------------ */

.ust-serit {
  background: var(--sahne);
  border-bottom: 1px solid var(--cizgi);
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.08em;
}
.ust-serit .kap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b4);
  height: 34px;
}
/* Telefon ve e-posta tek satırda kalır: dar ekranda numara "+90 224 411 05" /
   "44" diye ikiye bölünüyordu (Burak, 14 Ağu 2026). */
.ust-serit a { color: var(--metin-2); transition: color var(--hiz-kisa); white-space: nowrap; }
.ust-serit a:hover { color: var(--lime); }
.ust-sol { display: flex; gap: var(--b4); align-items: center; flex-wrap: wrap; }
.dil { display: flex; gap: var(--b3); align-items: center; }
.dil a.etkin { color: var(--lime); }

.cubuk {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--sahne);
  border-bottom: 1px solid var(--cizgi);
  transition: border-color var(--hiz-kisa), box-shadow var(--hiz-kisa);
}
.cubuk.kaydi { border-bottom-color: var(--cizgi-2); box-shadow: 0 1px 0 0 var(--cizgi); }
.cubuk .kap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b5);
  height: 76px;
  transition: height var(--hiz-kisa) var(--egri);
}
.cubuk.kaydi .kap { height: 64px; }
.logo { flex: none; }
.logo img { height: 30px; width: auto; max-width: none; transition: opacity var(--hiz-kisa); }
.logo:hover img { opacity: 0.75; }

.menu { display: flex; align-items: center; gap: clamp(2px, 1vw, 14px); }
.menu-oge { position: relative; }
.menu-oge > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-family: var(--govde);
  font-size: var(--t-kucuk);
  color: var(--metin);
  white-space: nowrap;
  transition: color var(--hiz-kisa);
}
.menu-oge > a::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hiz) var(--egri);
}
.menu-oge:hover > a, .menu-oge.secili > a { color: var(--lime); }
.menu-oge:hover > a::after, .menu-oge.secili > a::after { transform: none; }
.ok-isaret {
  width: 4px; height: 4px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.5;
  transition: transform var(--hiz-kisa), opacity var(--hiz-kisa);
}
.menu-oge.cocuklu:hover > a .ok-isaret { transform: translateY(0) rotate(45deg); opacity: 1; }

.acilir {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;
  background: rgba(8, 8, 8, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid var(--cizgi);
  padding: var(--b2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--hiz-kisa) var(--egri), transform var(--hiz-kisa) var(--egri), visibility var(--hiz-kisa);
}
.menu-oge:hover .acilir, .menu-oge:focus-within .acilir { opacity: 1; visibility: visible; transform: none; }
.acilir a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b3);
  padding: 11px var(--b3);
  font-size: var(--t-kucuk);
  color: var(--metin-2);
  transition: color var(--hiz-kisa), background var(--hiz-kisa), padding-left var(--hiz-kisa);
}
.acilir a:hover { color: var(--metin); background: var(--lime-iz); padding-left: 22px; }
.acilir a .no { font-family: var(--mono); font-size: var(--t-mikro); color: var(--metin-3); }
.acilir a:hover .no { color: var(--lime); }

.menu-dugme { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-dugme span { display: block; width: 22px; height: 1px; background: var(--metin); }

.mobil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--sahne);
  padding: var(--b7) var(--pay) var(--b5);
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.5s var(--egri);
}
.mobil.acik { transform: none; }
.mobil > ul > li > a {
  display: flex;
  align-items: baseline;
  gap: var(--b3);
  padding: var(--b3) 0;
  font-family: var(--display);
  font-size: 22px;
  color: var(--metin);
  border-bottom: 1px solid var(--cizgi);
}
.mobil > ul > li > a .no { font-family: var(--mono); font-size: var(--t-mikro); color: var(--lime); }
.mobil-alt { padding: var(--b2) 0 var(--b3) var(--b4); }
.mobil-alt a { display: block; padding: var(--b2) 0; font-size: var(--t-kucuk); color: var(--metin-2); }
.mobil-kapat {
  position: absolute; top: var(--b4); right: var(--pay);
  background: none; border: 0; color: var(--metin);
  font-family: var(--mono); font-size: var(--t-etiket); letter-spacing: 0.14em;
  cursor: pointer; text-transform: uppercase;
}

/* --- 8. GİRİŞ ANİMASYONU --------------------------------------------- */

[data-goster] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--egri), transform 0.9s var(--egri);
}
[data-goster].gorundu { opacity: 1; transform: none; }
[data-gecikme="1"] { transition-delay: 0.08s; }
[data-gecikme="2"] { transition-delay: 0.16s; }
[data-gecikme="3"] { transition-delay: 0.24s; }

/* --- 9. HERO --------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--sahne);
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;
  z-index: 0;
  opacity: 0.9;
}
.hero-perde {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 52%, rgba(0,0,0,0.25) 100%),
    linear-gradient(0deg, var(--sahne) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0) 58%);
}
.hero-izgara {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(120% 90% at 30% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 30% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}

.hero .kap { position: relative; z-index: 2; width: 100%; padding-top: var(--b6); padding-bottom: var(--b7); }
.hero-ic { max-width: 680px; margin-right: auto; text-align: left; }
.hero-ic .etiket { margin-bottom: var(--b4); }

.slayt { display: none; }
.slayt.etkin { display: block; }
.slayt h1, .slayt h2 { font-size: var(--t-h1); font-weight: 700; line-height: 1.06; color: #fff; }
.slayt.etkin h1, .slayt.etkin h2 { animation: yukari 0.9s var(--egri) both; }
.slayt .vurgu { display: block; color: #fff; }
.slayt p {
  font-size: var(--t-govde-l);
  color: var(--metin);
  margin: var(--b4) 0 0;
  max-width: 46ch;
}
.slayt.etkin p { animation: yukari 0.9s 0.1s var(--egri) both; }
.slayt .ok { margin-top: var(--b4); }
.slayt.etkin .ok { animation: yukari 0.9s 0.18s var(--egri) both; }
.imza {
  font-family: var(--mono);
  font-size: var(--t-etiket);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
  margin-top: var(--b4) !important;
}

@keyframes yukari {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

.noktalar { display: flex; gap: var(--b2); margin-top: var(--b5); }
.noktalar button {
  width: 44px; height: 2px;
  border: 0; padding: 0;
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  transition: background var(--hiz) var(--egri);
}
.noktalar button.etkin { background: var(--lime); }

.sayaclar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border-top: 1px solid var(--cizgi-2);
  background: linear-gradient(0deg, rgba(0,0,0,0.92), rgba(0,0,0,0.35));
  backdrop-filter: blur(6px);
}
.sayaclar .kap {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr;
  align-items: center;
  gap: clamp(var(--b5), 6vw, var(--b8));
  padding-top: var(--b4);
  padding-bottom: var(--b4);
}
.sayaclar .kap > div { display: flex; flex-direction: column; gap: 6px; }
.sayaclar span {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  color: #fff;
  line-height: 0.94;
  letter-spacing: -0.03em;
}
/* Sayacın altındaki etiket, videonun üstünde duran şeritte okunacak: mikro punto,
   ince kesim ve 0,18em aralık onu silikleştiriyordu (Burak, 14 Ağu 2026).
   Bir kademe büyük punto, orta kesim, dar aralık ve en açık ton. */
.sayaclar small {
  font-family: var(--mono);
  font-size: var(--t-etiket);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metin);
}
.sayaclar .eylem { justify-self: end; }

/* --- 10. TEKNOLOJİ SEÇİCİ -------------------------------------------- */

.tek-duzen {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) 1.28fr;
  gap: var(--b5);
  /* stretch: sağdaki görsel, soldaki yedi satırlık listeyle aynı boyda durur;
     start ile görsel 16/10'da kalıp altında büyük boşluk bırakıyordu (11 Ağu 2026). */
  align-items: stretch;
}
/* Çift renkli sistem: nötr gri gövde + lime aksan, ikon beyaz.
   Her kart kendi zeminini ve alt lime çizgisini taşır; etkin kartta çizgi kalınlaşır. */
.tek-liste { display: flex; flex-direction: column; gap: var(--b2); }
.tek-liste a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--b3);
  padding: var(--b3);
  border: 1px solid var(--cizgi);
  border-bottom: 2px solid var(--lime-sonuk);
  color: var(--metin);
  font-family: var(--display);
  font-size: var(--t-kucuk);
  font-weight: 600;
  line-height: 1.25;
  transition: background var(--hiz) var(--egri), border-color var(--hiz) var(--egri), transform var(--hiz) var(--egri);
}
.tek-liste li.etkin a {
  background: var(--yuzey-2);
  border-bottom-color: var(--lime);
  transform: translateX(6px);
}
/* Seçili görünüm imleçte hover'dan, dokunmatikte yalnız .etkin'den gelir; yoksa
   dokunulan satır da işaretli kalıp iki satır birden seçili görünüyordu. */
@media (hover: hover) {
  .tek-liste li:hover a {
    background: var(--yuzey-2);
    border-bottom-color: var(--lime);
    transform: translateX(6px);
  }
}
.tek-no { font-family: var(--mono); font-size: var(--t-mikro); font-weight: 500; color: var(--lime); flex: none; }
.tek-liste li.etkin .tek-no { color: var(--lime); }
.tek-simge {
  flex: none;
  width: 68px; height: 68px;
  object-fit: contain;
  /* invert(1) siyah çizgiyi beyaza çevirir ama lime aksanı mora döndürür;
     hue-rotate(180deg) onu geri alır, akromatik beyaz/siyahı etkilemez. */
  filter: invert(1) hue-rotate(180deg);
  opacity: 0.9;
  transition: opacity var(--hiz) var(--egri);
}
.tek-liste li.etkin .tek-simge { opacity: 1; }
@media (hover: hover) {
  .tek-liste li:hover .tek-simge { opacity: 1; }
}

.tek-gorsel {
  position: relative;
  min-height: 420px;
  background: var(--kat-2);
  border: 1px solid var(--cizgi);
  overflow: hidden;
}
.tek-gorsel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.7s var(--egri), transform 1.6s var(--egri);
}
.tek-gorsel img.etkin { opacity: 1; transform: none; }
.tek-gorsel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.5), transparent 55%);
  pointer-events: none;
}
.tek-gorsel .damga {
  position: absolute;
  left: var(--b4); bottom: var(--b4);
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metin);
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--cizgi-2);
  padding: 6px 12px;
  backdrop-filter: blur(6px);
}

/* --- 11. KARTLAR ----------------------------------------------------- */

.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--b3);
}
.kart {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cizgi);
  /* Antrasit bloğu kesen lime çizgi: duruşta sönük, hover'da tam. */
  border-bottom: 2px solid var(--lime-sonuk);
  overflow: hidden;
  transition: background var(--hiz) var(--egri), border-color var(--hiz) var(--egri), transform var(--hiz) var(--egri);
}
/* Yüzey hover'ları YALNIZ gerçek imleçte çalışır. Dokunmatikte :hover bir kez
   tetiklenip parmak kalkınca üstünde kalıyor; kart basılı gibi takılı duruyordu
   (Burak'ın gerçek cihaz turu, 14 Ağu 2026). Dokunmanın karşılığı :active. */
@media (hover: hover) {
  .kart:hover {
    background: var(--yuzey-2);
    border-color: var(--cizgi-2);
    border-bottom-color: var(--lime);
    transform: translateY(-3px);
  }
  .kart:hover .kart-gorsel img { transform: scale(1.06); }
}
/* Dokunmatikte tıklamanın görünür karşılığı: parmak bastığı sürece kart yanıt verir. */
.kart:active { background: var(--yuzey-2); border-bottom-color: var(--lime); }
.kart:active .ok::after { width: 34px; }
.kart-gorsel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kat-2); }
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--egri); }
.kart-gorsel.beyaz { background: #fff; }
.kart-gorsel.beyaz img { object-fit: contain; padding: var(--b4); }
.kart-govde { padding: var(--b4); display: flex; flex-direction: column; gap: var(--b2); flex: 1; }
.ust-satir { display: flex; align-items: baseline; justify-content: space-between; gap: var(--b3); }
.kart-no { font-family: var(--mono); font-size: var(--t-mikro); color: var(--metin-3); letter-spacing: 0.1em; }
@media (hover: hover) {
  .kart:hover .kart-no { color: var(--lime); }
}
.kart:active .kart-no { color: var(--lime); }
.kart-govde h3 { font-size: var(--t-h4); font-weight: 600; line-height: 1.22; }
.kart-govde p { font-size: var(--t-kucuk); color: var(--metin-2); margin: 0; line-height: 1.5; }
.kart-govde .ok { margin-top: auto; padding-top: var(--b3); }
.kart-tarih {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0;
}
/* Katalog çağrı karosu: 7 kartlı ızgaranın sekizinci hücresini doldurur. */
.kart-cta .cta-sayi {
  font-family: var(--display);
  font-size: clamp(64px, 6vw, 96px);
  font-weight: 700;
  line-height: 1;
  color: var(--lime);
  margin: var(--b3) 0 0;
}

.destek-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: var(--b3);
}
.destek-kutu {
  display: flex;
  flex-direction: column;
  gap: var(--b3);
  padding: var(--b5) var(--b4);
  border: 1px solid var(--cizgi);
  border-bottom: 2px solid var(--lime-sonuk);
  transition: background var(--hiz) var(--egri), border-color var(--hiz) var(--egri), transform var(--hiz) var(--egri);
}
/* Kutu hem bağ (anasayfa, iletişim) hem de düz liste ögesi (akademi, çözüm masası)
   olarak kullanılıyor. Hover görünümü YALNIZ bağ olana verilir: eylemsiz div'in
   imleçte canlanması tıklanabilir sanılıyordu (Burak, 14 Ağu 2026). */
@media (hover: hover) {
  a.destek-kutu:hover {
    background: var(--yuzey-2);
    border-color: var(--cizgi-2);
    border-bottom-color: var(--lime);
    transform: translateY(-3px);
  }
  a.destek-kutu:hover img { opacity: 1; }
}
a.destek-kutu:active { background: var(--yuzey-2); border-bottom-color: var(--lime); }
a.destek-kutu:active .ok::after { width: 34px; }
.destek-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--b3); }
.destek-kutu img { width: 72px; height: 72px; object-fit: contain; filter: invert(1) hue-rotate(180deg); opacity: 0.9; transition: opacity var(--hiz) var(--egri); }
.destek-kutu h3 { font-size: var(--t-h4); font-weight: 600; line-height: 1.3; margin-top: var(--b2); }
.destek-kutu p { margin: 0; font-size: var(--t-kucuk); color: var(--metin-2); line-height: 1.5; }
.destek-kutu .ok { margin-top: auto; padding-top: var(--b3); }

/* --- 12. ANLATI + ÇAĞRI ---------------------------------------------- */

.anlati { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b6); align-items: center; }
.anlati p { font-size: var(--t-govde-l); margin: 0 0 var(--b4); }
.gorsel-kutu { border: 1px solid var(--cizgi); overflow: hidden; }
.gorsel-kutu img { transition: transform 1.6s var(--egri); }
@media (hover: hover) {
  .gorsel-kutu:hover img { transform: scale(1.04); }
}

.cagri { background: var(--lime); color: var(--sahne); padding: clamp(64px, 7vw, 96px) 0; }
.cagri .kap { display: flex; align-items: center; justify-content: space-between; gap: var(--b5); flex-wrap: wrap; }
.cagri .etiket { color: var(--ters-metin-3); }
.cagri h2 { color: var(--sahne); max-width: 19ch; margin-top: var(--b3); }
.cagri p { margin: var(--b3) 0 0; color: var(--ters-metin-2); max-width: 50ch; }
.cagri .dugme { border-color: rgba(0,0,0,0.7); color: var(--sahne); }
.cagri .dugme::before { background: var(--sahne); }
/* Lime panelde dolgu siyah: basılıyken metin lime'a döner, yoksa siyah üstünde siyah kalır. */
@media (hover: hover) {
  .cagri .dugme:hover { color: var(--lime); border-color: var(--sahne); }
}
.cagri .dugme:active { color: var(--lime); border-color: var(--sahne); }

/* --- 13. ALT BİLGİ --------------------------------------------------- */

.alt { background: var(--kat-1); border-top: 1px solid var(--cizgi); padding-top: var(--b6); }
.alt-izgara { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--b5); padding-bottom: var(--b6); }
.alt h4 {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: var(--b4);
}
.alt li { margin-bottom: 10px; }
.alt a { font-size: var(--t-kucuk); color: var(--metin); transition: color var(--hiz-kisa); }
.alt a:hover { color: var(--lime); }
.alt-logo img { height: 32px; margin-bottom: var(--b4); }
.alt-slogan { font-size: var(--t-kucuk); color: var(--metin-2); max-width: 30ch; line-height: 1.7; }
.alt-sosyal { display: flex; flex-wrap: wrap; gap: var(--b2); margin-top: var(--b4); }
.alt-sosyal a {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.08em;
  padding: 7px 12px;
  border: 1px solid var(--cizgi);
  transition: border-color var(--hiz-kisa), color var(--hiz-kisa);
}
.alt-sosyal a:hover { border-color: var(--lime); color: var(--lime); }
.alt-kunye {
  border-top: 1px solid var(--cizgi);
  padding: var(--b4) 0;
  display: flex;
  justify-content: space-between;
  gap: var(--b3);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.06em;
  color: var(--metin-3);
}

/* --- 14. İÇ SAYFA BAŞLIĞI -------------------------------------------- */

.sayfa-basi {
  position: relative;
  padding: clamp(64px, 7vw, 96px) 0 var(--b6);
  background: var(--kat-1);
  border-bottom: 1px solid var(--cizgi);
  overflow: hidden;
}
.sayfa-basi::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(80% 100% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(80% 100% at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}
.sayfa-basi .kap { position: relative; z-index: 1; }
.kirinti {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metin-2);
  margin-bottom: var(--b4);
}
/* Bulunulan sayfa parlak kalır, geriye giden iz bir kademe soluk — ama tabanın üstünde. */
.kirinti a, .kirinti span { color: var(--metin-3); }
.kirinti a:hover { color: var(--lime); }
.kirinti span { margin: 0 var(--b2); }
.sayfa-basi h1 { max-width: 18ch; }
.sayfa-basi .ozet { margin-top: var(--b4); max-width: 58ch; font-size: var(--t-govde-l); color: var(--metin); }

/* --- 15. YER TUTUCU -------------------------------------------------- */

.yer-tutucu {
  position: relative;
  border: 1px solid var(--cizgi);
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 12px, rgba(205,216,74,0.022) 12px, rgba(205,216,74,0.022) 24px),
    var(--yuzey);
  padding: clamp(40px, 5vw, 64px);
  text-align: center;
}
.yer-tutucu .etiket { justify-content: center; margin-bottom: var(--b4); }
.yer-tutucu h3 { margin-bottom: var(--b3); }
.yer-tutucu p { max-width: 60ch; margin: 0 auto; }
.yer-tutucu[data-bos=""] { display: none; }

/* --- 16. ÜRÜN SAYFASI ------------------------------------------------ */

.urun-ust { padding: var(--b6) 0; background: var(--kat-1); border-bottom: 1px solid var(--cizgi); }
.urun-duzen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b6); align-items: center; margin-top: var(--b4); }
.urun-gorsel {
  background: #fff;
  border: 1px solid var(--cizgi);
  padding: var(--b5);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
}
.urun-gorsel img { max-height: 100%; width: auto; object-fit: contain; }
.urun-bilgi h1 { font-size: clamp(36px, 5vw, 76px); font-weight: 700; }
.urun-altbaslik {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-kucuk);
  color: var(--lime);
  margin: var(--b3) 0 var(--b5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.urun-kunye {
  display: grid; grid-template-columns: auto 1fr;
  gap: 10px var(--b5);
  margin: 0 0 var(--b5);
  padding: var(--b4) 0;
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
  font-size: var(--t-kucuk);
}
.urun-kunye dt { font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--metin-3); }
.urun-kunye dd { margin: 0; color: var(--metin); }
.urun-kunye dd a:hover { color: var(--lime); }
.urun-eylem { display: flex; gap: var(--b2); flex-wrap: wrap; }
.urun-metin { max-width: 70ch; font-size: var(--t-govde-l); line-height: 1.7; }
.urun-metin p { margin: 0 0 var(--b4); }

/* ürün sayfası: anlatı + yan sütun */
.urun-anlati { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--b6); align-items: start; }
.urun-yan { display: flex; flex-direction: column; gap: var(--b3); }
.yan-kutu {
  padding: var(--b4);
  border: 1px solid var(--cizgi);
  border-left: 2px solid var(--lime-sonuk);
  transition: background var(--hiz) var(--egri), border-left-color var(--hiz) var(--egri);
}
@media (hover: hover) {
  .yan-kutu:hover { background: var(--yuzey-2); border-left-color: var(--lime); }
}
.yan-kutu h3 { font-size: var(--t-h4); font-weight: 600; margin-bottom: var(--b2); }
.yan-kutu p { margin: 0 0 var(--b3); font-size: var(--t-kucuk); color: var(--metin-2); line-height: 1.6; }
.bolum[data-bos=""] { display: none; }

/* --- 17. LAZER BÖLÜMÜ ------------------------------------------------ */

.lazer-acilis {
  position: relative;
  padding: clamp(64px, 8vw, 144px) 0 var(--b7);
  background: var(--kat-1);
  border-bottom: 1px solid var(--cizgi);
  overflow: hidden;
}
.lazer-acilis::before {
  content: '';
  position: absolute;
  right: -10%; top: 10%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(205,216,74,0.13), transparent 66%);
  pointer-events: none;
}
.lazer-acilis .kap { position: relative; z-index: 2; }
.lazer-duzen { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--b6); align-items: center; }
.lazer-acilis h1 { font-size: clamp(40px, 6vw, 88px); }
.lazer-acilis .ozet { max-width: 52ch; margin: var(--b4) 0 var(--b5); font-size: var(--t-govde-l); }
.lazer-gorsel { margin: 0; }
.lazer-gorsel img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--cizgi);
  padding: var(--b4);
}
.lazer-gorsel figcaption {
  display: flex;
  gap: var(--b2);
  margin-top: var(--b3);
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin-3);
}

.makine {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: var(--b6);
  align-items: center;
  padding: var(--b6) 0;
  border-top: 1px solid var(--cizgi);
}
.makine:first-of-type { border-top: 0; padding-top: 0; }
.makine.ters .makine-gorsel { order: 2; }
.makine-gorsel {
  background: #fff;
  border: 1px solid var(--cizgi);
  padding: var(--b4);
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
}
.makine-gorsel img { max-height: 100%; width: auto; object-fit: contain; }
.makine-kod {
  font-family: var(--display);
  font-size: clamp(32px, 4.2vw, 62px);
  font-weight: 700;
  color: var(--metin);
  margin: 0 0 var(--b2);
  line-height: 1;
}
.makine-metin h3 {
  font-family: var(--mono);
  font-size: var(--t-kucuk);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lime);
  margin-bottom: var(--b2);
  line-height: 1.6;
}
.en-ad {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metin-3);
  margin: 0 0 var(--b4);
}
.guc-serit { display: flex; gap: var(--b2); flex-wrap: wrap; margin-bottom: var(--b4); }
.guc-serit span {
  font-family: var(--mono);
  font-size: var(--t-etiket);
  letter-spacing: 0.08em;
  border: 1px solid var(--cizgi);
  padding: 7px 13px;
  color: var(--metin-2);
}
.guc-serit span:first-child { border-color: var(--lime); color: var(--lime); }

.ozellik-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b5); margin-top: var(--b5); }
.ozellik-sutun h4 {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  padding-bottom: var(--b2);
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: var(--b3);
}
.ozellik-sutun li {
  position: relative;
  padding-left: var(--b4);
  margin-bottom: 12px;
  font-size: var(--t-kucuk);
  line-height: 1.62;
}
.ozellik-sutun li::before {
  content: '';
  position: absolute; left: 0; top: 10px;
  width: 9px; height: 1px;
  background: var(--lime);
}
.ozellik-sutun.en h4 { color: var(--metin-3); }
.ozellik-sutun.en li { color: var(--metin-2); }
.ozellik-sutun.en li::before { background: var(--metin-3); }

/* --- uygulama videoları ---------------------------------------------- */

.video-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--b3);
}
.video-kart {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--cizgi);
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  color: inherit;
  transition: border-color var(--hiz) var(--egri), transform var(--hiz) var(--egri);
}
@media (hover: hover) {
  .video-kart:hover { border-color: var(--cizgi-2); transform: translateY(-3px); }
}
.video-kart > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: opacity var(--hiz) var(--egri), transform 1.3s var(--egri);
}
@media (hover: hover) {
  .video-kart:hover > img { transform: scale(1.04); }
}
.video-oynat {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border: 1px solid var(--lime);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  transition: background var(--hiz) var(--egri), transform var(--hiz) var(--egri);
}
.video-oynat::before {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 12px solid var(--lime);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transition: border-left-color var(--hiz) var(--egri);
}
@media (hover: hover) {
  .video-kart:hover .video-oynat { background: var(--lime); transform: translate(-50%, -50%) scale(1.06); }
  .video-kart:hover .video-oynat::before { border-left-color: var(--sahne); }
}
/* Dokunmada oynat düğmesi basıldığını göstersin. */
.video-kart:active .video-oynat { background: var(--lime); }
.video-kart:active .video-oynat::before { border-left-color: var(--sahne); }
.video-alt {
  display: flex;
  align-items: center;
  gap: var(--b2);
  padding: 12px var(--b3);
  border-top: 1px solid var(--cizgi);
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin-3);
}
.video-alt .no { color: var(--lime); }
.video-alt .sure { margin-left: auto; }
.video-kart video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; }
.video-kart > img[hidden] { display: none; } /* genel img{display:block} kuralı hidden'ı ezmesin */
.video-tek { width: 100%; }

.fayda-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: var(--b3);
}
.fayda {
  padding: var(--b5) var(--b4);
  border: 1px solid var(--cizgi);
  transition: background var(--hiz) var(--egri), border-color var(--hiz) var(--egri);
}
@media (hover: hover) {
  .fayda:hover { background: var(--yuzey-2); border-color: var(--cizgi-2); }
}
.fayda .no { font-family: var(--mono); font-size: var(--t-mikro); color: var(--lime); letter-spacing: 0.12em; }
.fayda h3 { font-size: var(--t-h4); margin: var(--b3) 0 var(--b2); }
.fayda p { margin: 0; font-size: var(--t-kucuk); color: var(--metin-2); line-height: 1.6; }

/* --- 18. KURUMSAL YAZI ----------------------------------------------- */

.yazi-duzen { display: grid; grid-template-columns: 220px 1fr; gap: var(--b6); align-items: start; }
.yan-menu { position: sticky; top: 104px; display: flex; flex-direction: column; border-left: 1px solid var(--cizgi); }
.yan-menu a {
  position: relative;
  padding: 11px var(--b3);
  font-size: var(--t-kucuk);
  color: var(--metin-2);
  transition: color var(--hiz-kisa), background var(--hiz-kisa), padding-left var(--hiz-kisa);
}
.yan-menu a::before {
  content: '';
  position: absolute; left: -1px; top: 0; bottom: 0;
  width: 1px; background: var(--lime);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--hiz) var(--egri);
}
.yan-menu a:hover { color: var(--metin); background: var(--lime-iz); padding-left: var(--b4); }
.yan-menu a:hover::before { transform: none; }

.yazi { max-width: 76ch; font-size: var(--t-govde); }
.yazi p { margin: 0 0 var(--b4); }
.yazi .giris { font-size: var(--t-govde-l); color: var(--metin); line-height: 1.62; }
.yazi h2 { font-size: var(--t-h3); margin: var(--b5) 0 var(--b3); }
.yazi h2:first-child { margin-top: 0; }

.ilke-kart { position: relative; padding: var(--b5); border: 1px solid var(--cizgi); margin-bottom: var(--b3); }
.ilke-kart h2 { margin-top: 0; }
.ilke-kart p { margin: 0; font-size: var(--t-govde-l); }

.taahhut { counter-reset: madde; }
.taahhut > li {
  counter-increment: madde;
  position: relative;
  padding: 0 0 var(--b4) var(--b6);
  margin-bottom: var(--b4);
  border-bottom: 1px solid var(--cizgi);
}
.taahhut > li:last-child { border-bottom: 0; }
.taahhut > li::before {
  content: counter(madde, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: var(--mono);
  font-size: var(--t-etiket);
  color: var(--lime);
  letter-spacing: 0.08em;
}
.taahhut ul { margin: var(--b3) 0 0; }
.taahhut ul li { position: relative; padding-left: var(--b3); margin-bottom: var(--b2); color: var(--metin-2); font-size: var(--t-kucuk); }
.taahhut ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 7px; height: 1px; background: var(--lime); }

.referans-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--b2);
}
.referans-kutu {
  background: #fff;
  aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center;
  padding: var(--b3);
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--hiz) var(--egri), opacity var(--hiz) var(--egri);
}
@media (hover: hover) {
  .referans-kutu:hover { filter: none; opacity: 1; }
}
.referans-kutu img { max-width: 100%; max-height: 100%; object-fit: contain; }

.sayi-serit { display: grid; grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); gap: var(--b2); margin: var(--b5) 0; }
.sayi-serit div { padding: var(--b4); border: 1px solid var(--cizgi); }
.sayi-serit span {
  display: block;
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  color: var(--lime);
  line-height: 1;
  margin-bottom: var(--b2);
}
.sayi-serit small { font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--metin-3); }

/* --- 19. İLETİŞİM + FORM --------------------------------------------- */

.iletisim-duzen { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--b6); align-items: start; }
.bilgi-blok { padding-bottom: var(--b4); margin-bottom: var(--b4); border-bottom: 1px solid var(--cizgi); }
.bilgi-blok:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.bilgi-blok h3 {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: var(--b3);
}
.bilgi-blok p { margin: 0 0 var(--b3); font-size: var(--t-govde); line-height: 1.8; }
.bilgi-blok a:hover { color: var(--lime); }
.kucuk { font-size: var(--t-kucuk); color: var(--metin-2); }
.gps { font-family: var(--mono); letter-spacing: 0.1em; color: var(--metin) !important; font-size: var(--t-kucuk) !important; }

.harita-kutu {
  display: flex; align-items: center; gap: var(--b3);
  padding: var(--b4);
  border: 1px solid var(--cizgi);
  transition: border-color var(--hiz) var(--egri), background var(--hiz) var(--egri);
}
@media (hover: hover) {
  .harita-kutu:hover { border-color: var(--lime); background: var(--yuzey-2); }
}
.harita-kutu:active { border-color: var(--lime); background: var(--yuzey-2); }
.harita-isaret { width: 9px; height: 9px; background: var(--lime); box-shadow: 0 0 0 5px rgba(205,216,74,0.14); flex: none; }
.harita-yazi { font-size: var(--t-kucuk); color: var(--metin); line-height: 1.55; }
.harita-yazi small { font-family: var(--mono); font-size: var(--t-mikro); color: var(--metin-3); letter-spacing: 0.08em; }

.form-kutu { border: 1px solid var(--cizgi); padding: var(--b5); }
.form-kutu h2 { font-size: var(--t-h3); }
.form-ustyazi { margin: var(--b3) 0 var(--b5); color: var(--metin-3); font-size: var(--t-kucuk); }
.form-ustyazi a { color: var(--lime); }

.alan { display: block; margin-bottom: var(--b4); }
.alan > span {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metin-3);
  margin-bottom: var(--b2);
}
.alan i { color: var(--lime); font-style: normal; }
.alan input, .alan textarea, .alan select {
  width: 100%;
  background: var(--sahne);
  border: 1px solid var(--cizgi);
  color: var(--metin);
  font-family: inherit;
  font-size: var(--t-kucuk);
  padding: 13px 15px;
  transition: border-color var(--hiz-kisa);
}
/* Yer tutucu metni de okunur olmalı: tarayıcı varsayılanı siyah zeminde tabanın
   altına düşüyor, token katmanının taban tonu yazılır (opacity ile soluklaştırma yok). */
.alan input::placeholder, .alan textarea::placeholder { color: var(--metin-3); opacity: 1; }
.alan input:focus, .alan textarea:focus, .alan select:focus { border-color: var(--lime); }
/* Halka yalnız fareyle odaklanınca kalkar; klavyeyle gezen :focus-visible halkasını görür. */
.alan input:focus:not(:focus-visible),
.alan textarea:focus:not(:focus-visible),
.alan select:focus:not(:focus-visible) { outline: none; }
.alan textarea { resize: vertical; min-height: 120px; }
.alan-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--b3); }
.gizli-alan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-sonuc { margin: var(--b3) 0 0; font-size: var(--t-kucuk); min-height: 1.4em; line-height: 1.6; }
.form-sonuc.iyi { color: var(--lime); }
.form-sonuc.kotu { color: var(--uyari); }

/* --- 20. PARAMETRE ARACI --------------------------------------------- */

.parametre { display: grid; gap: var(--b5); }
.parametre-secim {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--b3);
  align-items: end;
  padding: var(--b5);
  border: 1px solid var(--cizgi);
}
.parametre-secim .alan { margin-bottom: 0; }
.parametre-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b5); }
.parametre-panel h3 {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  padding-bottom: var(--b2);
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: var(--b3);
}
.olcum { display: flex; justify-content: space-between; align-items: baseline; gap: var(--b3); padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.olcum dt { font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--metin-3); }
.olcum dd { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--lime); }
.olcum dd .birim { font-family: var(--mono); font-size: var(--t-etiket); color: var(--metin-3); margin-left: 5px; }
.makine-rozet {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-etiket);
  letter-spacing: 0.08em;
  padding: 9px 14px;
  margin: 0 var(--b2) var(--b2) 0;
  border: 1px solid var(--cizgi);
  color: var(--metin-3);
}
.makine-rozet.bagli {
  color: var(--lime);
  border-color: var(--lime-iz);
  transition: background var(--hiz-kisa), border-color var(--hiz-kisa);
}
@media (hover: hover) {
  .makine-rozet.bagli:hover { background: var(--lime); color: var(--sahne); border-color: var(--lime); }
}
.makine-rozet.bagli:active { background: var(--lime); color: var(--sahne); border-color: var(--lime); }
.parametre-kunye {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.08em;
  color: var(--metin-3);
  margin-top: var(--b3);
}

.veri-yok {
  padding: var(--b5);
  border: 1px dashed var(--cizgi-2);
  text-align: center;
  font-size: var(--t-kucuk);
  color: var(--metin-3);
}

/* --- servo raporu: karşılaştırma ve grafikler ------------------------- */

.karsilastirma { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b3); }
.kars-sutun { padding: var(--b5) var(--b4); border: 1px solid var(--cizgi); }
.kars-sutun.one-cikan { border-color: var(--lime-iz); background: linear-gradient(180deg, rgba(205,216,74,0.08), var(--yuzey)); }
.kars-sutun h3 {
  font-family: var(--mono);
  font-size: var(--t-mikro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--metin-2);
  padding-bottom: var(--b2);
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: var(--b2);
}
.kars-sutun.one-cikan h3 { color: var(--lime); }
.kars-sutun .olcum dd { color: var(--metin); }
.kars-sutun.one-cikan .olcum dd { color: var(--lime); }

.grafik-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b3); margin: var(--b5) 0; }
.grafik-ikili figure { margin: 0; }
.grafik-ikili img { width: 100%; border: 1px solid var(--cizgi); background: #fff; }
.grafik-ikili figcaption {
  margin-top: var(--b2);
  font-family: var(--mono);
  font-size: var(--t-mikro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metin-3);
}

/* --- uygulama kurulum sayfası ---------------------------------------- */

.kurulum-duzen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b6); align-items: start; }
.adim-liste { counter-reset: adim; margin-top: var(--b4); }
.adim-liste li {
  display: flex;
  gap: var(--b3);
  align-items: baseline;
  padding: var(--b3) 0;
  border-bottom: 1px solid var(--cizgi);
  font-size: var(--t-govde);
}
.adim-liste li:last-child { border-bottom: 0; }
.adim-liste .no { font-family: var(--mono); font-size: var(--t-mikro); color: var(--lime); letter-spacing: 0.1em; flex: none; }
.adim-liste strong { color: var(--metin); }
.dugme[disabled] { opacity: 0.45; cursor: not-allowed; }
.dugme[disabled]:hover { color: var(--metin); border-color: var(--cizgi-2); }
.dugme[disabled]:hover::before { transform: translateY(100%); }

/* --- 21. YARDIMCI ---------------------------------------------------- */

.orta { text-align: center; }
.lime { color: var(--lime); }
.ust-bosluk { margin-top: var(--b5); }
.rozet {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  background: var(--lime);
  color: var(--sahne);
  padding: 3px 6px;
  margin-left: var(--b2);
  vertical-align: 2px;
}

/* --- 22. DUYARLI ----------------------------------------------------- */

@media (max-width: 1100px) {
  .menu { display: none; }
  .menu-dugme { display: flex; }
  .alt-izgara { grid-template-columns: 1fr 1fr; }
  .yazi-duzen { grid-template-columns: 1fr; }
  .yan-menu { position: static; flex-direction: row; flex-wrap: wrap; border-left: 0; gap: var(--b1); }
  .yan-menu a { border: 1px solid var(--cizgi); padding: 9px 14px; }
  .yan-menu a:hover { padding-left: 14px; }
  .yan-menu a::before { display: none; }
}

@media (max-width: 900px) {
  .tek-duzen, .anlati, .urun-duzen, .iletisim-duzen, .makine, .parametre-panel, .lazer-duzen, .kurulum-duzen, .urun-anlati { grid-template-columns: 1fr; }
  .tek-gorsel { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
  .hero-ic { max-width: none; }
  .hero-perde { background: linear-gradient(0deg, var(--sahne) 2%, rgba(0,0,0,0.45) 100%); }
  .makine.ters .makine-gorsel { order: 0; }
  .makine-gorsel { aspect-ratio: 4 / 3; }
  .bolum-basi { grid-template-columns: 1fr; }
  .bolum-basi .yan { text-align: left; }
  .bolum-basi .yan p { max-width: none; }
  .ozellik-ikili, .karsilastirma, .grafik-ikili { grid-template-columns: 1fr; gap: var(--b4); }
  .parametre-secim { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ust-serit .kap { height: auto; padding-top: var(--b2); padding-bottom: var(--b2); }
  .ust-sol { gap: var(--b3); }
  .cubuk .kap, .cubuk.kaydi .kap { height: 62px; }
  .logo img { height: 25px; }
  .alt-izgara { grid-template-columns: 1fr; }
  .alt-kunye { flex-direction: column; }
  .alan-ikili { grid-template-columns: 1fr; }
  /* dar ekranda sayaç şeridi hero'nun üstüne binmesin: akışa alınır.
     position RELATIVE olmalı, static değil: static öge z-index almaz, şerit
     hero-perdenin (z-index 1) ALTINDA kalıyordu ve dipte neredeyse opak siyah
     perde sayıları da etiketleri de söndürüyordu (Burak'ın "sayaçlar silik"
     bulgusunun asıl sebebi, 14 Ağu 2026). */
  .hero { min-height: 0; display: block; }
  .hero .kap { padding-top: var(--b6); padding-bottom: var(--b6); }
  .sayaclar { position: relative; background: var(--kat-1); }
  .sayaclar .kap { grid-template-columns: 1fr 1fr; gap: var(--b4); }
  .sayaclar .eylem { grid-column: 1 / -1; justify-self: start; }
  .izgara { grid-template-columns: 1fr; }
  .hero-video { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  [data-goster] { opacity: 1; transform: none; }
}