/* ============================================================
   ESPO ELEKTRONİK — Ziyaretçi arayüzü
   Kurumsal yön: derin turkuaz + antrasit, bol beyaz alan,
   okunaklı tipografi. Sertlik değil, düzen.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Sinyal kirmizisi — ana vurgu ----
     Yangin ekipmaninin kendi rengi. Dugmeler, yapisal cizgiler,
     alarm durumu. Tek vurgu rengi; baska aksan yok. */
  --tk-900:#3d0a12; --tk-800:#5c0f1b; --tk-700:#8a1524;
  --tk-600:#a81326; --tk-500:#c8102e; --tk-400:#dd3a4e;
  --tk-300:#e97885; --tk-200:#f2b3bb; --tk-100:#f9dde1; --tk-50:#fdf2f4;

  /* ---- Celik grisi — yapi ----
     Onceki olcek notr griydi, ekranda kagit gibi duruyordu.
     Hafif soguk kaydirildi: muhafaza sacinin rengi. */
  --an-950:#080b0d; --an-900:#0e1215; --an-800:#181e23;
  --an-700:#2a333a; --an-600:#4a555b; --an-500:#6b757b;
  --an-400:#8c969b; --an-300:#b4bcc0; --an-200:#d3d9dc;
  --an-150:#dfe4e6; --an-100:#edeff0; --an-50:#f5f7f8;
  --beyaz:#ffffff;

  /* ---- Panel LED renkleri ----
     Kirmizi alarm, amber ariza, yesil besleme.
     Stok ve durum gostergelerinde ayni dil kullanilir. */
  --kr-700:#7e0f1d; --kr-600:#b00d21; --kr-100:#f9dde1; --kr-50:#fdf2f4;
  --sr-700:#8a5b0a; --sr-600:#b07213; --sr-100:#fbeccd;
  --ys-600:#2f7d4f; --ys-50:#e9f3ed;

  /* ---- Logo turkuazi ----
     Yalnizca marka isaretinde kullanilir, arayuzde yeri yoktur. */
  --marka-tk:#1ab5c4;

  --bslk:'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
  --yazi:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Ekipman gorunusu icin koseler neredeyse dik */
  --r-s:2px; --r-m:2px; --r-l:3px; --r-x:4px;

  /* Golgeler cok hafif: yuzeyler duz, hiyerarsi cizgiyle kurulur */
  --g1:0 1px 0 rgba(14,18,21,.04);
  --g2:0 1px 2px rgba(14,18,21,.07);
  --g3:0 6px 20px rgba(14,18,21,.12);
  --g-tk:none;

  /* Gradyan yok — dolu blok */
  --ge-tk:var(--tk-500);
  --ge-koyu:#0e1215;

  --hiz:150ms cubic-bezier(.3,.7,.35,1);
}

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

body {
  margin: 0; background: var(--an-50); color: var(--an-900);
  font-family: var(--yazi); font-size: 15.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
svg { display: block; max-width: 100%; }
.arama svg, .il-arama svg, .il-sonuc svg { max-height: 24px; }
a { color: var(--tk-700); text-decoration: none; transition: color var(--hiz); }
a:hover { color: var(--tk-500); }
:focus-visible { outline: 2px solid var(--tk-500); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--tk-100); color: var(--tk-900); }

h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: clamp(28px, 3.8vw, 44px); letter-spacing: -.03em; }
h2 { font-size: clamp(22px, 2.4vw, 29px); }
h3 { font-size: 17px; letter-spacing: -.01em; }
h4 { font-size: 15px; }
p { margin: 0; }

.kapsa { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
@media (max-width:640px){ .kapsa { padding: 0 18px; } }

/* Bölüm etiketi */
.bolum-etiket {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tk-600);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.bolum-etiket::before { content:""; width: 22px; height: 2px; background: var(--tk-500); }
.koyu .bolum-etiket, .serit .bolum-etiket, .giris .bolum-etiket { color: var(--tk-300); }
.koyu .bolum-etiket::before, .serit .bolum-etiket::before, .giris .bolum-etiket::before { background: var(--tk-400); }

/* ============================================================
   ÜST BANT + BAŞLIK
   ============================================================ */
.ust-bant {
  background: var(--an-950); color: var(--an-400); font-size: 12.5px; padding: 9px 0;
}
.ust-bant .kapsa { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }
.ust-bant a { color: var(--an-300); }
.ust-bant a:hover { color: var(--tk-300); }
.ust-bant .sol { display: flex; align-items: center; gap: 9px; }
.ust-bant .nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--tk-400); flex: none; }
.ust-bant .iletisim-kisa { display: flex; gap: 20px; flex-wrap: wrap; }
.ust-bant .iletisim-kisa span { display: inline-flex; align-items: center; gap: 7px; }
.ust-bant svg { width: 13px; height: 13px; opacity: .8; }

.site-ust {
  background: var(--beyaz); border-bottom: 1px solid var(--an-150);
  position: sticky; top: 0; z-index: 60; transition: box-shadow var(--hiz);
}
.site-ust.kaydi { box-shadow: var(--g2); }
.site-ust .kapsa { display: flex; align-items: center; gap: 28px; height: 76px; }

.logo {
  display: inline-flex; align-items: baseline; flex: none;
  background: var(--an-900); border-radius: var(--r-m);
  padding: 11px 20px 13px; box-shadow: var(--g2);
  font-size: 36px; font-weight: 700; letter-spacing: -.045em; line-height: 1;
  transition: background var(--hiz);
}
.logo:hover { background: var(--an-800); }
.logo .es { color: #ffffff; }
.logo .po { color: var(--tk-500); }

/* Koyu zeminde (footer) kutuya gerek yok */
.logo.koyu {
  background: none; padding: 0; box-shadow: none;
}
.logo.koyu:hover { background: none; opacity: .85; }

@media (max-width:640px){
  .logo { font-size: 28px; padding: 9px 15px 11px; }
}

.arama { flex: 1 1 260px; min-width: 200px; max-width: 420px; position: relative; }
.arama input {
  width: 100%; padding: 11px 15px 11px 42px !important; font: inherit; font-size: 14.5px;
  border: 1px solid var(--an-200); border-radius: var(--r-m);
  background: var(--an-50); color: var(--an-900); transition: all var(--hiz);
}
.arama input::placeholder { color: var(--an-400); }
.arama input:focus {
  outline: none; background: #fff; border-color: var(--tk-500);
  box-shadow: 0 0 0 3px rgba(200,16,46,.14);
}
.arama .simge {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px !important; height: 17px !important; flex: none;
  color: var(--an-400); pointer-events: none;
}

.ust-menu { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.ust-menu a {
  color: var(--an-700); font-size: 14.5px; font-weight: 500;
  padding: 9px 14px; border-radius: var(--r-s); transition: all var(--hiz); white-space: nowrap;
}
.ust-menu a:hover { background: var(--an-100); color: var(--an-900); }
.ust-menu a.etkin { color: var(--tk-700); background: var(--tk-50); font-weight: 600; }
.ust-menu .vurgu { background: var(--ge-tk); color: #fff; font-weight: 600; box-shadow: var(--g-tk); }
.ust-menu .vurgu:hover { background: var(--tk-700); color: #fff; }
.ust-menu .cerceve { border: 1px solid var(--an-200); }
.ust-menu .cerceve:hover { border-color: var(--tk-400); background: var(--tk-50); color: var(--tk-700); }

.menu-dugme {
  display: none; background: none; border: 1px solid var(--an-200);
  border-radius: var(--r-s); padding: 9px 11px; cursor: pointer; margin-left: auto;
}
.menu-dugme span { display: block; width: 18px; height: 2px; background: var(--an-800); border-radius: 2px; }
.menu-dugme span + span { margin-top: 4px; }

@media (max-width:960px){
  .site-ust .kapsa { height: auto; flex-wrap: wrap; padding-top: 14px; gap: 16px; }
  .arama { order: 3; flex-basis: 100%; max-width: none; }
  .menu-dugme { display: block; }
  .ust-menu { order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-bottom: 14px; display: none; }
  .ust-menu.acik { display: flex; }
}

/* ============================================================
   YOL İZİ / YERLEŞİM
   ============================================================ */
.yol { font-size: 13px; color: var(--an-500); padding: 20px 0 0; }
.yol a { color: var(--an-500); }
.yol a:hover { color: var(--tk-600); }
.yol span { margin: 0 8px; color: var(--an-300); }

.icerik { padding: 28px 0 84px; }
.icerik.bos-ust { padding: 0; }
.iki-sutun { display: grid; grid-template-columns: 264px 1fr; gap: 32px; align-items: start; }
@media (max-width:920px){ .iki-sutun { grid-template-columns: 1fr; } }

.kart { background: var(--beyaz); border: 1px solid var(--an-150); border-radius: var(--r-l); box-shadow: var(--g1); }
.kart-ic { padding: 24px 26px; }
.alt-yazi { color: var(--an-600); font-size: 14.5px; }

.bolum { padding: 80px 0 0; }
.bolum-baslik { margin-bottom: 30px; max-width: 700px; }
.bolum-baslik h2 { margin-bottom: 10px; }
.bolum-baslik p { color: var(--an-600); font-size: 15px; }

/* ============================================================
   GİRİŞ (HERO)
   ============================================================ */
.giris {
  background: var(--ge-koyu); color: #fff; padding: 78px 0 0;
  position: relative; overflow: hidden;
}
.giris::before {
  content:""; position: absolute; top: -30%; right: -10%; width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(50,201,215,.08), transparent 68%);
}
.giris .kapsa { position: relative; z-index: 2; }
.giris-govde { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
@media (max-width:980px){ .giris-govde { grid-template-columns: 1fr; gap: 36px; } }

.giris h1 { color: #fff; }
.giris h1 .vurgu-tk { color: var(--tk-300); }
.giris .alt-metin { color: var(--an-300); font-size: 16.5px; margin: 20px 0 30px; max-width: 560px; }
.giris-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero yan panel — teknik gösterge */
.hero-panel {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-x); padding: 26px; backdrop-filter: blur(10px);
}
.hero-panel .baslik {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tk-300); margin-bottom: 18px;
}
.hero-panel .satir {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.10);
}
.hero-panel .satir:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-panel .satir .ad { color: var(--an-300); font-size: 14px; }
.hero-panel .satir .deger {
  font-family: var(--mono); font-size: 19px; font-weight: 600; color: #fff;
}
.hero-panel .satir .deger small { font-size: 11px; color: var(--tk-300); font-weight: 400; margin-left: 4px; }

.giris .serit-alt {
  margin-top: 56px; border-top: 1px solid rgba(255,255,255,.10);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
}
.giris .serit-alt div { padding: 22px 24px 24px 0; }
.giris .serit-alt .rakam { font-size: 30px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.03em; }
.giris .serit-alt .etiket {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--tk-300); margin-top: 8px;
}

/* ============================================================
   ÜRÜN HATLARI
   ============================================================ */
.hatlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(304px,1fr)); gap: 22px; }
.hat {
  background: var(--beyaz); border: 1px solid var(--an-150); border-radius: var(--r-l);
  padding: 28px 26px 26px; display: flex; flex-direction: column; position: relative;
  transition: transform var(--hiz), box-shadow var(--hiz), border-color var(--hiz);
}
.hat:hover { transform: translateY(-3px); box-shadow: var(--g3); border-color: var(--tk-200); }
.hat .ikon {
  width: 44px; height: 44px; border-radius: var(--r-m); background: var(--tk-50);
  color: var(--tk-700); display: grid; place-items: center; margin-bottom: 18px;
  border: 1px solid var(--tk-100);
}
.hat .ikon svg { width: 21px; height: 21px; }
.hat h3 { margin-bottom: 10px; }
.hat p { color: var(--an-600); font-size: 14.5px; margin-bottom: 18px; }
.hat .ozellik-liste { list-style: none; margin: 0 0 20px; padding: 0; font-size: 13.5px; }
.hat .ozellik-liste li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--an-100); color: var(--an-600);
}
.hat .ozellik-liste li span:last-child { font-family: var(--mono); font-size: 12.5px; color: var(--an-900); font-weight: 500; }
.hat .hat-bag { margin-top: auto; font-weight: 600; font-size: 14px; color: var(--tk-700); }
.hat.yeni { border-color: var(--tk-300); }
.hat .yeni-rozet {
  position: absolute; top: 26px; right: 24px; background: var(--kr-600); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px;
}

/* ============================================================
   KOYU ŞERİT
   ============================================================ */
.serit {
  background: var(--ge-koyu); color: #fff; padding: 74px 0 68px;
  margin-top: 80px; position: relative; overflow: hidden;
}
.serit::before {
  content:""; position: absolute; bottom: -40%; left: -6%; width: 620px; height: 620px;
  background: none;
}
.serit .kapsa { position: relative; }
.serit-baslik { max-width: 700px; margin-bottom: 42px; }
.serit-baslik h2 { color: #fff; margin-bottom: 12px; }
.serit-baslik p { color: var(--an-300); font-size: 15.5px; }

.adimlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px,1fr)); gap: 26px; }
.adim { padding-top: 22px; border-top: 2px solid var(--tk-500); }
.adim .no {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--tk-300);
  letter-spacing: .14em; display: block; margin-bottom: 12px;
}
.adim h4 { color: #fff; margin-bottom: 8px; }
.adim p { color: var(--an-400); font-size: 13.5px; }
.serit-dugme { margin-top: 44px; }

/* ============================================================
   SEKTÖRLER
   ============================================================ */
.sektorler { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px,1fr)); gap: 14px; }
.sektor {
  background: var(--beyaz); border: 1px solid var(--an-150); border-radius: var(--r-m);
  padding: 20px; color: var(--an-900); display: flex; flex-direction: column; gap: 12px;
  transition: all var(--hiz);
}
.sektor:hover {
  border-color: var(--tk-300); box-shadow: var(--g2); transform: translateY(-2px); color: var(--an-900);
}
.sektor .ikon { width: 32px; height: 32px; color: var(--tk-600); }
.sektor .ikon svg { width: 26px; height: 26px; }
.sektor .ad { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.sektor .git { font-family: var(--mono); font-size: 11px; color: var(--an-400); text-transform: uppercase; letter-spacing: .1em; margin-top: auto; }
.sektor:hover .git { color: var(--tk-600); }

/* ============================================================
   STANDARTLAR
   ============================================================ */
.standartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px,1fr)); gap: 16px; }
.standart {
  background: var(--beyaz); border: 1px solid var(--an-150); border-radius: var(--r-m);
  padding: 22px 24px; border-left: 3px solid var(--tk-500);
}
.standart .kod { font-family: var(--mono); font-size: 14.5px; font-weight: 600; color: var(--tk-700); }
.standart .ad { font-size: 13.5px; color: var(--an-600); margin-top: 8px; line-height: 1.6; }

/* ============================================================
   BAYİ KADEMELERİ
   ============================================================ */
.kademeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 20px; }
.kademe {
  background: var(--beyaz); border: 1px solid var(--an-150); border-radius: var(--r-l);
  padding: 28px 26px; display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: all var(--hiz);
}
.kademe:hover { box-shadow: var(--g3); transform: translateY(-3px); border-color: var(--tk-200); }
.kademe::before { content:""; position: absolute; top:0; left:0; right:0; height: 3px; background: var(--ge-tk); }
.kademe .seviye {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--an-400); margin-bottom: 10px;
}
.kademe h3 { margin-bottom: 10px; }
.kademe p { color: var(--an-600); font-size: 14px; margin-bottom: 18px; }
.kademe ul { list-style: none; margin: 0 0 22px; padding: 0; font-size: 13.5px; color: var(--an-700); }
.kademe li { padding: 7px 0 7px 24px; position: relative; }
.kademe li::before {
  content:""; position: absolute; left: 4px; top: 15px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--tk-400);
}
.kademe .dugmeler { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   İLETİŞİM
   ============================================================ */
.iletisim-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px; }
.iletisim-kart {
  background: var(--beyaz); border: 1px solid var(--an-150); border-radius: var(--r-l);
  padding: 24px; text-align: center; transition: all var(--hiz);
}
.iletisim-kart:hover { box-shadow: var(--g2); border-color: var(--tk-200); }
.iletisim-kart .ikon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--tk-50);
  color: var(--tk-700); display: grid; place-items: center; margin: 0 auto 14px;
  border: 1px solid var(--tk-100);
}
.iletisim-kart .ikon svg { width: 20px; height: 20px; }
.iletisim-kart .etiket {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--an-500); margin-bottom: 7px;
}
.iletisim-kart .deger { font-size: 15px; font-weight: 600; color: var(--an-900); word-break: break-word; }
.iletisim-kart a.deger:hover { color: var(--tk-600); }

.harita { border: 1px solid var(--an-150); border-radius: var(--r-l); overflow: hidden; background: var(--an-100); }
.harita iframe { width: 100%; height: 380px; border: 0; display: block; }

/* ============================================================
   DÜĞME
   ============================================================ */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border: 1px solid transparent; border-radius: var(--r-m);
  background: var(--ge-tk); color: #fff; font-family: var(--yazi);
  font-weight: 600; font-size: 14.5px; cursor: pointer; line-height: 1.4;
  box-shadow: var(--g-tk); transition: all var(--hiz);
}
.dugme:hover { color: #fff; transform: translateY(-1px); box-shadow: none; }
.dugme:active { transform: none; }
.dugme svg { width: 16px; height: 16px; }
.dugme.sade { background: var(--beyaz); color: var(--an-800); border-color: var(--an-200); box-shadow: var(--g1); }
.dugme.sade:hover { background: var(--an-50); color: var(--an-900); border-color: var(--an-300); }
.dugme.cam { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); box-shadow: none; }
.dugme.cam:hover { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.dugme.tehlike { background: var(--kr-600); box-shadow: 0 6px 18px rgba(126,15,29,.20); }
.dugme.tehlike:hover { background: var(--kr-700); }
.dugme.genis { display: flex; width: 100%; }
.dugme.kucuk { padding: 8px 15px; font-size: 13px; }
.dugme-grup { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   ÇAĞRI BANDI
   ============================================================ */
.cagri { background: var(--ge-tk); color: #fff; margin-top: 84px; padding: 52px 0; }
.cagri .kapsa { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cagri h2 { color: #fff; margin-bottom: 8px; }
.cagri p { color: rgba(255,255,255,.88); font-size: 15px; }

/* ============================================================
   DİP
   ============================================================ */
.site-alt { background: var(--an-950); color: var(--an-400); padding: 58px 0 30px; font-size: 14px; }
.site-alt .sutunlar {
  display: grid;
  /* auto-fit, sabit 1.4fr sutunla birlikte tekrar sayisini hesaplayamiyor
     ve tek sutuna dusuyordu. Sutun sayisi acikca verildi. */
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 40px;
}
@media (max-width:900px){
  .site-alt .sutunlar { grid-template-columns: 1fr 1fr; gap: 30px 26px; }
  .site-alt .marka-blok { grid-column: 1 / -1; }
}
@media (max-width:520px){
  .site-alt .sutunlar { grid-template-columns: 1fr; gap: 26px; }
}
.site-alt .marka-blok .logo-alt { margin-bottom: 16px; }
.site-alt .marka-blok .logo { font-size: 32px; }
.site-alt .marka-blok p { color: var(--an-400); font-size: 13.5px; max-width: 300px; }
.site-alt h4 { color: #fff; font-size: 13px; margin: 0 0 16px; font-weight: 600; }
.site-alt ul { list-style: none; margin: 0; padding: 0; }
.site-alt li { margin-bottom: 10px; }
.site-alt a { color: var(--an-400); font-size: 13.5px; }
.site-alt a:hover { color: var(--tk-300); }
.site-alt .telif {
  border-top: 1px solid var(--an-800); margin-top: 42px; padding-top: 24px;
  color: var(--an-500); font-size: 12.5px; display: flex; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}

/* ============================================================
   YAN FİLTRE
   ============================================================ */
.yan {
  position: sticky; top: 96px; background: var(--beyaz);
  border: 1px solid var(--an-150); border-radius: var(--r-l); padding: 4px 20px; box-shadow: var(--g1);
}
.yan .blok { border-bottom: 1px solid var(--an-100); padding: 18px 0; }
.yan .blok:last-child { border-bottom: 0; }
.yan h3 {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--an-500); margin: 0 0 12px; font-weight: 600;
}
.yan ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.yan li { margin-bottom: 2px; }
.yan li a {
  color: var(--an-800); display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: var(--r-s); transition: all var(--hiz);
}
.yan li a:hover { background: var(--an-50); }
.yan li a .adet {
  color: var(--an-500); font-family: var(--mono); font-size: 11px;
  background: var(--an-100); padding: 1px 8px; border-radius: 20px;
}
.yan li a.etkin { background: var(--tk-50); color: var(--tk-800); font-weight: 600; }
.yan li a.etkin .adet { background: var(--tk-100); color: var(--tk-800); }

/* ============================================================
   ÜRÜN LİSTESİ
   ============================================================ */
.urun-satir {
  display: grid; grid-template-columns: 110px 1fr 200px; gap: 22px;
  background: var(--beyaz); border: 1px solid var(--an-150); border-radius: var(--r-l);
  padding: 18px 20px; margin-bottom: 12px; align-items: center; transition: all var(--hiz);
}
.urun-satir:hover { border-color: var(--tk-200); box-shadow: var(--g2); transform: translateY(-1px); }
.urun-satir .gorsel {
  width: 110px; height: 110px; border: 1px solid var(--an-150); border-radius: var(--r-m);
  background: var(--beyaz); display: grid; place-items: center; overflow: hidden; padding: 8px;
}
.urun-satir .gorsel img { max-width: 100%; max-height: 100%; object-fit: contain; }
.urun-satir .gorsel .yok { font-size: 10.5px; color: var(--an-400); text-align: center; line-height: 1.5; }
.urun-satir .ad {
  font-size: 17px; font-weight: 600; letter-spacing: -.015em;
  color: var(--an-900); display: block; margin-bottom: 5px; line-height: 1.3;
}
.urun-satir .ad:hover { color: var(--tk-700); }
.urun-satir .kod { font-family: var(--mono); font-size: 12px; color: var(--an-500); margin-bottom: 8px; }
.urun-satir .ozet { font-size: 13.5px; color: var(--an-600); }
.urun-satir .etiketler { margin-top: 10px; display: flex; gap: 7px; flex-wrap: wrap; }
.urun-satir .sag-kutu { text-align: right; }
.urun-satir .fiyat { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--an-900); }
.urun-satir .fiyat small {
  display: block; font-family: var(--yazi); font-size: 11px; color: var(--an-500);
  font-weight: 400; margin-top: 4px;
}
@media (max-width:720px){
  .urun-satir { grid-template-columns: 86px 1fr; gap: 15px; }
  .urun-satir .gorsel { width: 86px; height: 86px; }
  .urun-satir .sag-kutu { grid-column: 1/-1; text-align: left; border-top: 1px solid var(--an-100); padding-top: 13px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
}

/* ============================================================
   ETİKET / DURUM
   ============================================================ */
.etiket {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; background: var(--an-100); color: var(--an-700); white-space: nowrap;
}
.etiket.adr { background: var(--tk-50); color: var(--tk-800); }
.etiket.knv { background: #eef1fa; color: #3b4a8c; }

.led { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--an-700); }
.led::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--an-300); flex: none; }
.led.acik::before { background: var(--ys-600); box-shadow: 0 0 0 3px rgba(18,133,90,.16); }
.led.bekle::before { background: var(--sr-600); box-shadow: 0 0 0 3px rgba(184,134,11,.16); }
.led.kapali::before { background: var(--kr-600); box-shadow: 0 0 0 3px rgba(200,53,43,.14); }
.led.acik { color: var(--ys-600); } .led.kapali { color: var(--kr-600); } .led.bekle { color: var(--sr-700); }

/* ============================================================
   ÜRÜN DETAY
   ============================================================ */
.detay-ust { display: grid; grid-template-columns: 356px 1fr 308px; gap: 32px; align-items: start; }
@media (max-width:1100px){ .detay-ust { grid-template-columns: 320px 1fr; } .detay-ust .yan-kutu { grid-column: 1/-1; } }
@media (max-width:780px){ .detay-ust { grid-template-columns: 1fr; } }

.galeri .buyuk {
  border: 1px solid var(--an-150); border-radius: var(--r-l); background: var(--beyaz);
  height: 342px; display: grid; place-items: center; overflow: hidden; padding: 22px; box-shadow: var(--g1);
}
.galeri .buyuk img {
  /* Fotograf cerceveyi doldurur; cihaz genelde ortada oldugu icin
     kenarlardan kirpmak bosluk birakmaktan iyi. Cok dar veya cok
     genis gorsellerde ise contain'e donulur. */
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.galeri .buyuk img.sigdir { object-fit: contain; }
.galeri .buyuk .yok { color: var(--an-400); font-size: 13px; }
.galeri .kucukler { display: flex; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
.galeri .kucukler button {
  width: 66px; height: 66px; border: 1px solid var(--an-150); border-radius: var(--r-m);
  background: var(--beyaz); cursor: pointer; padding: 5px; transition: all var(--hiz);
}
.galeri .kucukler button:hover { border-color: var(--tk-300); }
.galeri .kucukler button.etkin { border-color: var(--tk-500); box-shadow: 0 0 0 2px rgba(200,16,46,.18); }
.galeri .kucukler img { width: 100%; height: 100%; object-fit: contain; }
.galeri .not { font-size: 11.5px; color: var(--an-500); margin-top: 10px; }

.kunye { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.kunye th { text-align: left; font-weight: 500; color: var(--an-500); padding: 11px 0; width: 200px; vertical-align: top; font-size: 13.5px; }
.kunye td { padding: 11px 0; vertical-align: top; font-weight: 500; }
.kunye tr { border-bottom: 1px solid var(--an-100); }
.kunye tr:last-child { border-bottom: 0; }

.yan-kutu { border: 1px solid var(--an-150); border-radius: var(--r-l); background: var(--beyaz); padding: 24px; box-shadow: var(--g2); }
.yan-kutu .stok-satir { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--an-100); margin-bottom: 18px; }
.yan-kutu .stok-satir .rakam { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.yan-kutu .fiyat-buyuk { font-family: var(--mono); font-size: 31px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.yan-kutu .fiyat-not { font-size: 12.5px; color: var(--an-500); margin-top: 7px; }
.yan-kutu .ayrac { height: 1px; background: var(--an-100); margin: 20px 0; }

/* ============================================================
   SEKMELER
   ============================================================ */
.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--an-200); margin: 44px 0 0; overflow-x: auto; scrollbar-width: none; }
.sekmeler::-webkit-scrollbar { display: none; }
.sekmeler button {
  border: 0; background: none; font-family: var(--yazi); font-weight: 600; font-size: 14.5px;
  padding: 13px 18px; cursor: pointer; color: var(--an-600); border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap; transition: all var(--hiz);
}
.sekmeler button:hover { color: var(--an-900); }
.sekmeler button.etkin { color: var(--tk-700); border-bottom-color: var(--tk-500); }
.sekmeler button .sayi { font-family: var(--mono); font-size: 11px; margin-left: 7px; background: var(--an-100); color: var(--an-600); padding: 1px 7px; border-radius: 20px; }
.sekmeler button.etkin .sayi { background: var(--tk-100); color: var(--tk-800); }
.sekme-govde { display: none; padding: 28px 0; }
.sekme-govde.etkin { display: block; }

/* ============================================================
   TEKNİK TABLO / BELGE / VİDEO
   ============================================================ */
/* ---- Teknik özellik tablosu ----
   Etiket ve değer birbirine yakın dursun: değer sola hizalı ve
   etiket sütunu dar. Önceki halde değer sağa yaslıydı, arada
   göz kaybeden büyük bir boşluk oluşuyordu. */
.teknik { width: 100%; border-collapse: collapse; font-size: 14.5px; }

.teknik .grup td {
  background: var(--an-50); color: var(--an-600);
  font-family: var(--mono); font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .12em; padding: 14px 20px 10px;
  border-bottom: 1px solid var(--an-200);
}
.teknik .grup:not(:first-child) td { padding-top: 26px; }

.teknik th {
  text-align: left; font-weight: 400; color: var(--an-600);
  padding: 11px 20px; width: 38%;
  border-bottom: 1px solid var(--an-100);
}
.teknik td {
  padding: 11px 20px; border-bottom: 1px solid var(--an-100);
  font-size: 14px; font-weight: 500; color: var(--an-950);
  text-align: left;
}
.teknik tr:not(.grup):hover th,
.teknik tr:not(.grup):hover td { background: var(--tk-50); }
.teknik tr:last-child th, .teknik tr:last-child td { border-bottom: 0; }

@media (max-width:560px){
  .teknik th, .teknik td { padding: 10px 14px; font-size: 13.5px; }
  .teknik th { width: 46%; }
}

.belgeler { list-style: none; margin: 0; padding: 0; }
.belgeler li {
  display: flex; align-items: center; gap: 18px; padding: 15px 18px;
  border: 1px solid var(--an-150); border-radius: var(--r-m); margin-bottom: 10px;
  background: var(--beyaz); transition: all var(--hiz);
}
.belgeler li:hover { border-color: var(--tk-200); box-shadow: var(--g1); }
.belgeler .simge {
  width: 44px; height: 44px; border-radius: var(--r-m); background: var(--tk-50);
  color: var(--tk-700); display: grid; place-items: center; font-family: var(--mono);
  font-size: 10px; font-weight: 600; flex: none; border: 1px solid var(--tk-100);
}
.belgeler .ad { font-weight: 600; font-size: 14.5px; }
.belgeler .alt { font-size: 12.5px; color: var(--an-500); margin-top: 3px; }
.belgeler .sag { margin-left: auto; }

.video-kutu { margin-bottom: 26px; }
.video-cerceve { position: relative; padding-top: 56.25%; overflow: hidden; background: #000; border-radius: var(--r-l); box-shadow: var(--g2); }
.video-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-baslik { font-size: 16px; font-weight: 600; margin-bottom: 10px; }

/* ============================================================
   BOŞ DURUM / SAYFALAMA
   ============================================================ */
.bos { text-align: center; padding: 56px 24px; color: var(--an-600); background: var(--beyaz); border: 1px dashed var(--an-200); border-radius: var(--r-l); }
.bos p { margin-bottom: 18px; }

.sayfalama { display: flex; gap: 7px; margin-top: 28px; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
  padding: 9px 15px; border: 1px solid var(--an-150); border-radius: var(--r-s);
  background: var(--beyaz); font-size: 14px; color: var(--an-800); font-weight: 500; transition: all var(--hiz);
}
.sayfalama a:hover { border-color: var(--tk-300); color: var(--tk-700); }
.sayfalama .etkin { background: var(--ge-tk); color: #fff; border-color: transparent; }

/* ============================================================
   SANAL KEŞİF
   ============================================================ */
.kesif-ust { background: var(--ge-koyu); color: #fff; padding: 52px 0 46px; position: relative; overflow: hidden; }
.kesif-ust::before { content:""; position: absolute; top:-40%; right:-6%; width: 560px; height: 560px; background: none; }
.kesif-ust .kapsa { position: relative; }
.kesif-ust h1 { color: #fff; }
.kesif-ust p { color: var(--an-300); max-width: 660px; margin-top: 16px; font-size: 15.5px; }

.sonuc-ust { display: grid; grid-template-columns: 1fr 336px; gap: 30px; align-items: start; }
@media (max-width:1000px){ .sonuc-ust { grid-template-columns: 1fr; } }

.girdi-serit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr));
  background: var(--beyaz); border: 1px solid var(--an-150); border-radius: var(--r-l);
  margin-bottom: 22px; overflow: hidden;
}
.girdi-serit div { padding: 15px 18px; border-right: 1px solid var(--an-100); }
.girdi-serit div:last-child { border-right: 0; }
.girdi-serit .etiket { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: var(--an-500); }
.girdi-serit .deger { font-family: var(--mono); font-size: 16px; font-weight: 600; margin-top: 6px; color: var(--an-900); }

table.kesif { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.kesif th {
  text-align: left; font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .13em; color: var(--an-500); font-weight: 600; padding: 13px 18px;
  background: var(--an-50); border-bottom: 1px solid var(--an-150);
}
table.kesif td { padding: 15px 18px; border-bottom: 1px solid var(--an-100); vertical-align: top; }
table.kesif tbody tr:last-child td { border-bottom: 0; }
table.kesif tbody tr:hover td { background: var(--an-50); }
table.kesif .orta { text-align: center; } table.kesif .sag { text-align: right; }
table.kesif .sira { font-family: var(--mono); font-size: 11.5px; color: var(--an-400); width: 46px; }
table.kesif .rol { font-weight: 600; font-size: 15px; }
table.kesif .urun { font-family: var(--mono); font-size: 11.5px; color: var(--an-500); margin-top: 4px; }
table.kesif .miktar { font-family: var(--mono); font-size: 17px; font-weight: 600; white-space: nowrap; }
table.kesif .birim { font-size: 11px; color: var(--an-500); margin-top: 2px; }
table.kesif .para { font-family: var(--mono); font-size: 13.5px; }

.dokum {
  background: var(--beyaz); border: 1px solid var(--an-150); border-left: 3px solid var(--tk-500);
  border-radius: var(--r-m); padding: 20px 22px; margin-bottom: 12px; max-width: 830px;
}
.dokum-baslik { font-weight: 600; font-size: 16px; }
.dokum-hesap {
  font-family: var(--mono); font-size: 12.5px; color: var(--tk-800); background: var(--tk-50);
  border-radius: var(--r-s); padding: 9px 13px; margin: 11px 0; display: inline-block; line-height: 1.6;
}
.dokum-not { font-size: 13.5px; color: var(--an-600); }
.dokum-dayanak {
  font-family: var(--mono); font-size: 10px; color: var(--an-500); margin-top: 12px;
  text-transform: uppercase; letter-spacing: .12em; padding-top: 11px; border-top: 1px solid var(--an-100);
}

.uyari-kutu { background: var(--sr-100); border-left: 3px solid var(--sr-600); border-radius: var(--r-m); padding: 20px 22px; font-size: 13.5px; max-width: 830px; margin-top: 26px; color: #4a3806; }
.dikkat-kutu { background: var(--kr-50); border-left: 3px solid var(--kr-600); border-radius: var(--r-m); padding: 18px 22px; font-size: 13.5px; margin-top: 16px; color: var(--kr-700); }
.sinir-liste { list-style: none; margin: 0; padding: 0; max-width: 830px; }
.sinir-liste li {
  background: var(--beyaz); border: 1px solid var(--an-150); border-left: 3px solid var(--sr-600);
  border-radius: var(--r-m); padding: 15px 18px 15px 44px; margin-bottom: 10px;
  font-size: 13.5px; color: var(--an-700); position: relative;
}
.sinir-liste li::before { content:"!"; position: absolute; left: 20px; top: 15px; font-family: var(--mono); font-weight: 600; color: var(--sr-600); }

.fiyat-tablo { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.fiyat-tablo td { padding: 8px 0; color: var(--an-600); border-bottom: 1px solid var(--an-100); }
.fiyat-tablo td:last-child { text-align: right; font-family: var(--mono); color: var(--an-900); font-weight: 500; }
.fiyat-tablo tr.indirim td, .fiyat-tablo tr.indirim td:last-child { color: var(--ys-600); font-weight: 600; }
.genel-toplam { font-family: var(--mono); font-size: 29px; font-weight: 600; padding-top: 16px; line-height: 1.1; letter-spacing: -.02em; }
.puan-cubuk { height: 7px; background: var(--an-100); border-radius: 20px; overflow: hidden; margin-top: 12px; }
.puan-cubuk span { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--tk-500), var(--tk-300)); transition: width 450ms ease; }

/* ============================================================
   FORM
   ============================================================ */
.form-satir-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-satir-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width:780px){ .form-satir-2, .form-satir-3 { grid-template-columns: 1fr; } }

.form-bolum { border-top: 1px solid var(--an-150); padding-top: 26px; margin-top: 32px; }
.form-bolum:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.form-bolum h3 { font-size: 15px; margin: 0 0 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-bolum h3 .no { font-family: var(--mono); font-size: 12px; color: var(--tk-600); font-weight: 600; }

.alan { margin-bottom: 20px; }
.alan label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--an-800); }
.alan .ipucu { font-size: 12px; color: var(--an-500); margin-top: 7px; line-height: 1.55; }
.istege-bagli {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tk-700); background: var(--tk-50); padding: 4px 10px; border-radius: 20px;
}

/* .arama ve .il-arama disinda kalan girdi alanlari.
   Onceki surumde bu kural, eleman secicisi oldugu icin .arama input
   sinifini eziyordu ve buyutec metnin uzerine biniyordu. */
input[type=text]:not(.arama input):not(.il-arama input),
input[type=email],input[type=number],input[type=date],
input[type=search]:not(.arama input):not(.il-arama input),
input[type=password],input[type=tel],select,textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--an-200); border-radius: var(--r-m);
  font-family: var(--yazi); font-size: 14.5px; background: var(--beyaz); color: var(--an-900);
  transition: all var(--hiz);
}
input[type=number] { font-family: var(--mono); }
input:hover,select:hover,textarea:hover { border-color: var(--an-300); }
input:focus,select:focus,textarea:focus { outline: none; border-color: var(--tk-500); box-shadow: 0 0 0 3px rgba(200,16,46,.14); }
textarea { min-height: 130px; resize: vertical; }
select {
  appearance: none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a7085' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
input[type=file] {
  width: 100%; padding: 13px; border: 1px dashed var(--an-300); border-radius: var(--r-m);
  background: var(--an-50); font-family: var(--yazi); font-size: 13.5px; transition: all var(--hiz);
}
input[type=file]:hover { border-color: var(--tk-400); background: var(--tk-50); }

.secim-ikili { display: flex; gap: 8px; margin-top: 9px; }
.secim-ikili label {
  flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; padding: 9px 10px;
  border: 1px solid var(--an-200); border-radius: var(--r-s); cursor: pointer;
  background: var(--beyaz); color: var(--an-600); margin: 0; transition: all var(--hiz);
}
.secim-ikili label:hover { border-color: var(--tk-300); color: var(--tk-700); }
.secim-ikili label.secili { border-color: var(--tk-500); background: var(--tk-50); color: var(--tk-800); box-shadow: 0 0 0 2px rgba(200,16,46,.14); }
.secim-ikili input { display: none; }

.alan-ozet {
  font-family: var(--mono); font-size: 12.5px; color: var(--tk-800); background: var(--tk-50);
  margin-top: 11px; padding: 10px 13px; border-radius: var(--r-s); display: block; line-height: 1.5;
}
.alan-ozet:empty { display: none; }

.bildirim-kutu { padding: 15px 18px; border-radius: var(--r-m); margin-bottom: 22px; border-left: 3px solid; font-size: 14px; }
.bildirim-kutu.basari { background: var(--ys-50); border-color: var(--ys-600); color: #0c6b48; }
.bildirim-kutu.hata { background: var(--kr-50); border-color: var(--kr-600); color: var(--kr-700); }

/* ============================================================
   KEŞİF ÇIKTISI
   ============================================================ */
.cikti { max-width: 880px; margin: 0 auto; padding: 34px 24px 70px; background: #fff; }
.cikti-ust { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--an-900); padding-bottom: 18px; margin-bottom: 26px; gap: 22px; }
.cikti-ust .marka { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.cikti-ust .alt { font-size: 12px; color: var(--an-600); margin-top: 6px; }
.cikti-ust .sag { text-align: right; font-size: 12.5px; }
.cikti-ust .sag .no { font-family: var(--mono); font-weight: 600; font-size: 15px; }
.cikti h1 { font-size: 24px; margin: 0 0 20px; }
.cikti h2 { font-size: 16px; margin: 30px 0 12px; }
.cikti-bilgi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; font-size: 13px; }
.cikti-bilgi div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--an-300); padding: 7px 0; }
.cikti-bilgi div span:first-child { color: var(--an-600); }
.cikti-bilgi div span:last-child { font-family: var(--mono); font-weight: 600; text-align: right; }
@media (max-width:640px){ .cikti-bilgi { grid-template-columns: 1fr; } }
table.cikti-tablo { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.cikti-tablo th { text-align: left; background: var(--an-900); color: #fff; padding: 10px 11px; border: 1px solid var(--an-900); font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
table.cikti-tablo td { padding: 9px 11px; border: 1px solid var(--an-200); }
table.cikti-tablo .sag { text-align: right; font-family: var(--mono); }
table.cikti-tablo .orta { text-align: center; font-family: var(--mono); }
table.cikti-tablo tfoot td { font-weight: 600; background: var(--an-50); }
table.cikti-tablo tfoot tr.buyuk td { font-size: 15px; background: var(--an-900); color: #fff; border-color: var(--an-900); }
.cikti-not { font-size: 11.5px; color: #4a3806; background: var(--sr-100); border-left: 3px solid var(--sr-600); padding: 15px 17px; margin-top: 26px; line-height: 1.65; }
.cikti-imza { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; margin-top: 48px; font-size: 12px; }
.cikti-imza div { border-top: 1px solid var(--an-400); padding-top: 11px; color: var(--an-600); }
.cikti-dip { margin-top: 36px; font-family: var(--mono); font-size: 10px; color: var(--an-500); text-align: center; letter-spacing: .08em; }
.yazdir-cubuk { background: var(--an-900); color: #fff; padding: 15px 24px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.yazdir-cubuk .aciklama { font-size: 13px; color: var(--an-400); }

@media print {
  .yazdir-cubuk,.site-ust,.site-alt,.ust-bant { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .cikti { max-width: none; padding: 0; }
  table.cikti-tablo tr { break-inside: avoid; }
  a { color: #000; }
  @page { margin: 16mm 14mm; }
}

@media (prefers-reduced-motion: reduce){ *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
.atla { position: absolute; left: -9999px; top: 0; background: var(--tk-700); color: #fff; padding: 11px 20px; z-index: 100; font-weight: 600; }
.atla:focus { left: 0; color: #fff; }

/* ============================================================
   İL DURUMU
   ============================================================ */
.il-arama { position: relative; max-width: 420px; margin-bottom: 20px; }
.il-arama input {
  width: 100%; padding: 12px 16px 12px 44px; font: inherit; font-size: 15px;
  border: 1px solid var(--an-200); border-radius: var(--r-m); background: var(--beyaz);
}
.il-arama input:focus { outline: none; border-color: var(--tk-500); box-shadow: 0 0 0 3px rgba(200,16,46,.14); }
.il-arama svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 18px !important; height: 18px !important; flex: none;
  color: var(--an-400); pointer-events: none;
}

.il-sonuc { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 10px; }
.il-sonuc:empty { display: none; }
.il-kart {
  background: var(--beyaz); border: 1px solid var(--an-150); border-left: 3px solid var(--an-200);
  border-radius: var(--r-m); padding: 15px 18px; display: flex; flex-direction: column; gap: 5px;
}
.il-kart .ad { font-size: 16px; font-weight: 600; }
.il-kart .durum { font-size: 12.5px; color: var(--an-600); }
.il-kart.bos { border-left-color: var(--tk-500); }
.il-kart.bos .durum { color: var(--tk-700); font-weight: 600; }
.il-kart.basvuru_var { border-left-color: var(--sr-600); }
.il-kart.dolu, .il-kart.kapali { border-left-color: var(--an-300); background: var(--an-50); }
.il-bulunamadi { color: var(--an-500); font-size: 14px; padding: 14px 0; }

.bolgeler { display: grid; gap: 8px; }
.bolge { background: var(--beyaz); border: 1px solid var(--an-150); border-radius: var(--r-m); }
.bolge summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 20px; cursor: pointer; list-style: none; user-select: none;
}
.bolge summary::-webkit-details-marker { display: none; }
.bolge summary:hover { background: var(--an-50); }
.bolge .bolge-ad { font-weight: 600; font-size: 15.5px; }
.bolge .bolge-bilgi { display: flex; align-items: center; gap: 14px; }
.bolge .acik-sayi { font-size: 12.5px; font-weight: 600; color: var(--tk-700); background: var(--tk-50); padding: 4px 11px; border-radius: 20px; }
.bolge .kapali-sayi { font-size: 12.5px; color: var(--an-500); }
.bolge .ok { color: var(--an-400); font-size: 18px; transition: transform var(--hiz); }
.bolge[open] .ok { transform: rotate(90deg); }
.bolge-icerik { padding: 4px 20px 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.il-etiket {
  font-size: 13.5px; padding: 6px 13px; border-radius: 20px;
  background: var(--tk-50); color: var(--tk-800); font-weight: 500;
  border: 1px solid var(--tk-100);
}
.il-etiket.basvuru_var { background: var(--sr-100); color: #6b4c05; border-color: #f0e0b0; }
.il-etiket.dolu, .il-etiket.kapali { background: var(--an-100); color: var(--an-500); border-color: var(--an-150); }

.secim-tek { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; cursor: pointer; color: var(--an-800); }
.secim-tek input { width: 17px; height: 17px; accent-color: var(--tk-600); margin-top: 2px; flex: none; }

.sozlesme-kutu {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--tk-50); border: 1px solid var(--tk-100); border-radius: var(--r-m);
  padding: 16px 18px; margin-bottom: 22px; flex-wrap: wrap;
}

/* ============================================================
   SÖZLEŞME SAYFASI
   ============================================================ */
.sozlesme-sayfa { max-width: 860px; margin: 0 auto; background: #fff; padding: 46px 52px 70px; }
@media (max-width:700px){ .sozlesme-sayfa { padding: 30px 22px 50px; } }
.sozlesme-ust {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  border-bottom: 2px solid var(--an-900); padding-bottom: 20px; margin-bottom: 30px; flex-wrap: wrap;
}
.sozlesme-ust .marka { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.sozlesme-ust .alt { font-size: 12.5px; color: var(--an-600); margin-top: 5px; }
.sozlesme-ust .sag { text-align: right; }
.sozlesme-ust .surum { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.sozlesme-sayfa h1 { font-size: 25px; margin-bottom: 22px; }
.sozlesme-uyari {
  background: var(--sr-100); border-left: 3px solid var(--sr-600); padding: 15px 18px;
  font-size: 13px; color: #4a3806; margin-bottom: 32px; line-height: 1.65;
}
.sozlesme-govde { font-size: 14px; line-height: 1.75; color: var(--an-800); }
.sozlesme-govde h2 {
  font-size: 15px; font-weight: 700; margin: 32px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--an-200); letter-spacing: 0;
}
.sozlesme-govde h2:first-child { margin-top: 0; }
.sozlesme-govde p { margin-bottom: 11px; }
.sozlesme-govde strong { color: var(--an-900); }
.sozlesme-imza { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 56px; }
.sozlesme-imza .rol { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--an-600); }
.sozlesme-imza .cizgi { border-bottom: 1px solid var(--an-400); height: 68px; }
.sozlesme-imza .alt { font-size: 11.5px; color: var(--an-500); margin-top: 8px; }
.sozlesme-dip { margin-top: 40px; font-size: 11px; color: var(--an-500); text-align: center; }

@media print {
  body { background: #fff !important; }
  .yazdir-cubuk { display: none !important; }
  .sozlesme-sayfa { max-width: none; padding: 0; }
  .sozlesme-govde h2 { break-after: avoid; }
  .sozlesme-govde p { orphans: 3; widows: 3; }
  .sozlesme-imza { break-inside: avoid; }
  @page { margin: 18mm 16mm; }
}


/* ============================================================
   ADET KIRILIMLI FİYAT TABLOSU
   ============================================================ */
.kirilim-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.kirilim-tablo th {
  text-align: left; font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .13em; color: var(--an-500); font-weight: 600;
  padding: 12px 18px; background: var(--an-50); border-bottom: 1px solid var(--an-150);
}
.kirilim-tablo th.sag { text-align: right; }
.kirilim-tablo td { padding: 13px 18px; border-bottom: 1px solid var(--an-100); }
.kirilim-tablo tr:last-child td { border-bottom: 0; }
.kirilim-tablo tbody tr:hover td { background: var(--an-50); }
.kirilim-tablo .adet { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.kirilim-tablo .para { font-family: var(--mono); font-size: 13.5px; }
.kirilim-tablo .sag { text-align: right; }
.kirilim-tablo .avantaj {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ys-600);
  background: var(--ys-50); padding: 3px 9px; border-radius: 20px;
}


/* ============================================================
   GELİŞTİRME AŞAMASI (Ar-Ge) ROZETİ
   ============================================================ */
.gelistirme-rozet {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--tk-50); color: var(--tk-800);
  border: 1px solid var(--tk-200); border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 12px; white-space: nowrap;
}
.gelistirme-rozet::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tk-500); flex: none;
}
.hat .gelistirme-rozet { position: absolute; top: 26px; right: 24px; }

.gelistirme-kutu {
  background: var(--tk-50); border: 1px solid var(--tk-100);
  border-left: 3px solid var(--tk-500); border-radius: var(--r-m);
  padding: 18px 20px; font-size: 14px; color: var(--tk-900);
}
.gelistirme-kutu strong { display: block; margin-bottom: 6px; font-size: 15px; }

/* Ar-Ge urunlerinde fiyat yerine bu cikar */
.fiyat-yok {
  font-size: 15px; font-weight: 600; color: var(--tk-700); line-height: 1.4;
}
.fiyat-yok small {
  display: block; font-family: var(--yazi); font-size: 12px;
  color: var(--an-500); font-weight: 400; margin-top: 5px;
}

/* ============================================================
   BAYİ PANELİ
   ============================================================ */
.panel-ust {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap; padding-top: 8px;
}

/* Üç kapılı durum şeridi */
.kapi-serit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 10px; margin-top: 26px;
}
.kapi {
  background: var(--beyaz); border: 1px solid var(--an-150);
  border-radius: var(--r-m); padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  border-top: 3px solid var(--an-200);
}
.kapi .no {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  background: var(--an-100); color: var(--an-500);
}
.kapi .ad { font-size: 14px; font-weight: 500; color: var(--an-600); }
.kapi.gecti { border-top-color: var(--ys-600); }
.kapi.gecti .no { background: var(--ys-50); color: var(--ys-600); }
.kapi.gecti .ad { color: var(--an-800); }
.kapi.simdiki { border-top-color: var(--tk-500); box-shadow: var(--g2); }
.kapi.simdiki .no { background: var(--ge-tk); color: #fff; }
.kapi.simdiki .ad { color: var(--an-900); font-weight: 600; }

/* Size özel koşullar ızgarası */
.kosul-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: 12px;
}
.kosul {
  background: var(--beyaz); border: 1px solid var(--an-150);
  border-left: 3px solid var(--tk-500); border-radius: var(--r-m);
  padding: 16px 18px;
}
.kosul .etiket {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--an-500); margin-bottom: 8px;
}
.kosul .deger { font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.kosul .deger small {
  display: block; font-size: 11.5px; font-weight: 400;
  color: var(--an-500); margin-top: 4px;
}

/* Kademe seçim kutuları */
.kademe-secim { display: grid; gap: 10px; }
.kademe-kutu { display: block; cursor: pointer; margin: 0; }
.kademe-kutu input { position: absolute; opacity: 0; width: 0; height: 0; }
.kademe-kutu .ic {
  display: block; background: var(--beyaz);
  border: 1px solid var(--an-200); border-radius: var(--r-m);
  padding: 16px 20px; transition: all var(--hiz);
}
.kademe-kutu:hover .ic { border-color: var(--tk-300); }
.kademe-kutu input:checked + .ic {
  border-color: var(--tk-500); background: var(--tk-50);
  box-shadow: 0 0 0 2px rgba(200,16,46,.16);
}
.kademe-kutu .ad { display: block; font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.kademe-kutu .not { display: block; font-size: 13.5px; color: var(--an-600); line-height: 1.6; }

/* Hesap geçmişi */
.gecmis-satir {
  display: flex; gap: 18px; padding: 12px 0;
  border-bottom: 1px solid var(--an-100); font-size: 14px;
}
.gecmis-satir:last-child { border-bottom: 0; }
.gecmis-satir .tarih {
  font-family: var(--mono); font-size: 12px; color: var(--an-500);
  flex: none; width: 130px;
}
.gecmis-satir .olay { color: var(--an-800); }
@media (max-width:560px){
  .gecmis-satir { flex-direction: column; gap: 4px; }
  .gecmis-satir .tarih { width: auto; }
}

/* ============================================================
   YETKİLİ SERVİS LİSTESİ
   ============================================================ */
.servis-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 14px;
}
.servis-kart {
  background: var(--beyaz); border: 1px solid var(--an-150);
  border-radius: var(--r-l); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: all var(--hiz);
}
.servis-kart:hover { box-shadow: var(--g2); border-color: var(--tk-200); }
.servis-kart .ust { display: flex; flex-direction: column; gap: 9px; }
.servis-kart h3 { font-size: 16.5px; }
.servis-kart .yer { font-size: 14px; font-weight: 500; color: var(--tk-700); }
.servis-kart .adres { font-size: 13px; color: var(--an-600); line-height: 1.6; }
.servis-kart .kapsam { display: flex; gap: 6px; flex-wrap: wrap; }
.servis-kart .iletisim {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--an-100);
  font-size: 14px; font-weight: 500;
}

/* ============================================================
   DİL SEÇİCİ
   ============================================================ */
.dil-secici { display: inline-flex; align-items: center; gap: 2px; }
.dil-secici a {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; padding: 3px 8px; border-radius: var(--r-s);
  color: var(--an-400); transition: all var(--hiz);
}
.dil-secici a:hover { color: var(--tk-300); background: rgba(255,255,255,.06); }
.dil-secici a.etkin { color: #fff; background: rgba(255,255,255,.12); }

/* ============================================================
   SEPET VE SİPARİŞ
   ============================================================ */
.toplam-satir {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 11px 0; font-size: 14px;
  border-bottom: 1px solid var(--an-100);
}
.toplam-satir:last-child { border-bottom: 0; }
.toplam-satir > span:last-child {
  font-family: var(--mono); font-weight: 500; white-space: nowrap;
}
.toplam-satir.buyuk {
  border-top: 2px solid var(--an-800); border-bottom: 0;
  margin-top: 6px; padding-top: 14px; font-size: 16px; font-weight: 600;
}
.toplam-satir.buyuk > span:last-child { font-weight: 700; font-size: 18px; }

/* Üst menüdeki sepet göstergesi */
.sepet-bag { display: inline-flex; align-items: center; gap: 7px; }
.sepet-bag .sayi {
  min-width: 19px; height: 19px; padding: 0 6px;
  display: inline-grid; place-items: center;
  background: var(--kr-600); color: #fff;
  border-radius: 10px; font-family: var(--mono);
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* Üst menüde giriş yapan kullanıcı */
.ust-menu a.kimlik {
  display: inline-flex; flex-direction: column; gap: 1px;
  line-height: 1.25; padding-top: 7px; padding-bottom: 7px;
}
.ust-menu a.kimlik .ad {
  font-size: 13px; font-weight: 600; max-width: 170px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ust-menu a.kimlik .rol {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tk-600);
}
.ust-menu a.cikis-bag {
  font-size: 12.5px; color: var(--an-500);
}
.ust-menu a.cikis-bag:hover { color: var(--kr-600); }

/* ============================================================
   ANA SAYFA — derli toplu düzen
   Sekiz bölüm beşe indi; her bölüm tek iş yapıyor.
   ============================================================ */

/* Giriş: alt sayaç şeridi kaldırıldı, yükseklik azaldı */
.giris { padding: 74px 0 78px; background: var(--ge-koyu); }
.giris h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; }
.giris .alt-metin { max-width: 520px; }

/* Dil seçici ana menüde */
.ust-menu .dil-secici {
  display: inline-flex; align-items: center; gap: 1px;
  border: 1px solid var(--an-200); border-radius: var(--r-s);
  padding: 2px; margin-right: 4px;
}
.ust-menu .dil-secici a {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; padding: 4px 9px; border-radius: 4px;
  color: var(--an-500); transition: all var(--hiz);
}
.ust-menu .dil-secici a:hover { color: var(--tk-700); background: var(--tk-50); }
.ust-menu .dil-secici a.etkin { color: #fff; background: var(--an-800); }

/* ---- Sanal Keşif bloğu: sayfanın imzası ---- */
.kesif-blok {
  background: var(--an-950); color: #fff;
  padding: 60px 0; position: relative; overflow: hidden;
  /* Girisin hemen altinda geldigi icin ince bir ayrim cizgisi */
  border-top: 1px solid rgba(255,255,255,.07);
}
.kesif-blok::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 300px at 92% 0%, rgba(50,201,215,.07), transparent 72%);
  pointer-events: none;
}
.kesif-ic {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: 48px; align-items: center;
}
.kesif-sol h2 {
  font-size: clamp(24px, 2.6vw, 33px); color: #fff;
  letter-spacing: -.02em; line-height: 1.15; margin: 12px 0 14px;
}
.kesif-sol p { color: var(--an-300); font-size: 15px; line-height: 1.7; margin-bottom: 22px; }
.bolum-etiket.ters { color: var(--tk-300); }

.yapi-baslik {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--an-400); margin-bottom: 14px;
}
.yapi-rozetler { display: flex; flex-wrap: wrap; gap: 8px; }
.yapi-rozet {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px; padding: 9px 16px 9px 13px;
  color: var(--an-200); font-size: 13.5px; font-weight: 500;
  transition: all var(--hiz);
}
.yapi-rozet svg { width: 16px; height: 16px; color: var(--tk-300); flex: none; }
.yapi-rozet:hover {
  background: rgba(50,201,215,.16); border-color: var(--tk-400); color: #fff;
}

/* ---- Ürün hatları: daha kısa kartlar ---- */
.hat p { font-size: 14px; line-height: 1.65; }
.hat .ozellik-liste { margin-top: 14px; }
.katalog-bag { display: flex; justify-content: center; margin-top: 26px; }

/* ---- Bayilik: üç sade kutu ---- */
.bayilik-blok { background: var(--an-50); }
.kademeler-kisa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 14px; margin-bottom: 24px;
}
.kademe-k {
  background: var(--beyaz); border: 1px solid var(--an-150);
  border-radius: var(--r-l); padding: 24px 26px;
}
.kademe-k.one-cikan { border-color: var(--tk-300); box-shadow: var(--g2); }
.kademe-k h3 { font-size: 17px; margin-bottom: 8px; }
.kademe-k p { font-size: 14px; color: var(--an-600); line-height: 1.6; margin-bottom: 12px; }
.kademe-k .not {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .04em; color: var(--tk-700);
  background: var(--tk-50); border-radius: 100px; padding: 4px 11px;
}
.bayilik-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Çağrı + standart rozetleri ---- */
.cagri-ic {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
}
.standart-rozetler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.standart-rozetler span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--an-300); background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 100px; padding: 4px 12px;
}

@media (max-width:900px){
  .kesif-ic { grid-template-columns: 1fr; gap: 32px; }
  .giris { padding: 52px 0 56px; }
  .kesif-blok { padding: 46px 0; }
}

/* ============================================================
   ÜRÜN HATTI KARTLARI — rozet düzeltmesi
   İkon kaldırıldığı için rozet başlığın üstüne biniyordu.
   Artık normal akışta, başlığın üstünde duruyor.
   ============================================================ */
.hat .yeni-rozet,
.hat .gelistirme-rozet {
  position: static; top: auto; right: auto;
  align-self: flex-start; margin-bottom: 14px;
}
.hat h3 { padding-right: 0; }
.cagri-ic > div:first-child { flex: 1 1 460px; min-width: 0; }
.cagri-ic > .dugme { flex: none; }

/* Dil seçici menü dışında: mobilde de her zaman görünür */
.site-ust .dil-secici.dis {
  display: inline-flex; align-items: center; gap: 1px; order: 3;
  border: 1px solid var(--an-200); border-radius: var(--r-s); padding: 2px;
}
.site-ust .dil-secici.dis a {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; padding: 4px 9px; border-radius: 4px;
  color: var(--an-500); transition: all var(--hiz);
}
.site-ust .dil-secici.dis a:hover { color: var(--tk-700); background: var(--tk-50); }
.site-ust .dil-secici.dis a.etkin { color: #fff; background: var(--an-800); }
@media (max-width:900px){
  .site-ust .dil-secici.dis { order: 2; margin-left: auto; margin-right: 10px; }
}
@media (max-width:900px){
  .site-ust .menu-dugme { order: 3; margin-left: 0; }
  .site-ust .dil-secici.dis { order: 2; margin-left: auto; margin-right: 12px; }
}

/* ============================================================
   DOSYA SEÇME DÜĞMESİ
   Tarayıcının kendi "Dosya Seç / Dosya seçilmedi" metni sayfa
   dilini değil tarayıcı dilini kullanıyor. Gizleyip kendi
   etiketimizi koyuyoruz.
   ============================================================ */
input[type=file] { position: relative; color: transparent; }
input[type=file]::-webkit-file-upload-button { visibility: hidden; width: 0; padding: 0; }
input[type=file]::file-selector-button { visibility: hidden; width: 0; padding: 0; }
input[type=file]::before {
  content: attr(data-etiket);
  display: inline-block; cursor: pointer;
  background: var(--an-800); color: #fff;
  border-radius: var(--r-s); padding: 7px 15px;
  font-family: var(--yazi); font-size: 13.5px; font-weight: 500;
}
input[type=file]:hover::before { background: var(--tk-700); }
input[type=file].secildi::after {
  content: attr(data-dosya);
  margin-left: 12px; color: var(--an-700); font-size: 13.5px;
}

/* ============================================================
   ÜRÜN KATALOĞU — ızgara
   Önceki liste, uzun özet metinleriyle haber akışı gibi
   görünüyordu. Katalog düzenine geçildi: görsel, kod, ad, fiyat.
   ============================================================ */
.urun-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background: var(--an-200);
  border: 1px solid var(--an-200);
}
.urun-kart {
  background: var(--beyaz);
  display: flex; flex-direction: column;
  transition: box-shadow var(--hiz);
}
.urun-kart:hover { box-shadow: var(--g3); position: relative; z-index: 1; }

.urun-kart .gorsel {
  display: block; position: relative;
  aspect-ratio: 4 / 3; background: var(--an-50);
  display: grid; place-items: center; overflow: hidden;
}
.urun-kart .gorsel img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.urun-kart .gorsel .yok {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--an-400);
}
.urun-kart .kart-rozet {
  position: absolute; top: 10px; left: 10px;
  background: var(--an-900); color: #fff;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px;
}

.urun-kart .kart-govde {
  padding: 16px 18px 18px; display: flex; flex-direction: column;
  gap: 7px; flex: 1;
}
.urun-kart .kod {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--an-500);
}
.urun-kart .ad {
  font-size: 14.5px; font-weight: 600; line-height: 1.35;
  color: var(--an-900); letter-spacing: -.01em;
}
.urun-kart .ad:hover { color: var(--tk-700); }

.urun-kart .kart-alt { margin-top: auto; padding-top: 12px; }
.urun-kart .fiyat {
  font-family: var(--mono); font-size: 17px; font-weight: 700;
  color: var(--an-900); letter-spacing: -.02em;
}
.urun-kart .fiyat.bos {
  font-size: 12px; font-weight: 500; color: var(--tk-700);
  font-family: var(--yazi);
}
.urun-kart .stok {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--an-500); margin-top: 5px;
}
.urun-kart .stok .led { width: 6px; height: 6px; border-radius: 50%; padding: 0; }
.urun-kart .stok .led.acik   { background: var(--ys-600); }
.urun-kart .stok .led.bekle  { background: var(--sr-600); }
.urun-kart .stok .led.kapali { background: var(--an-300); }

.urun-kart .kart-sepet { display: flex; gap: 6px; margin-top: 12px; }
.urun-kart .kart-sepet input[type=number] { width: 58px; text-align: center; padding: 7px 4px; }
.urun-kart .kart-sepet .dugme { flex: 1; }
.urun-kart .kart-bag {
  margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--tk-700);
}

@media (max-width:520px){
  .urun-izgara { grid-template-columns: repeat(2, 1fr); }
  .urun-kart .kart-govde { padding: 12px 13px 14px; }
  .urun-kart .ad { font-size: 13px; }
  .urun-kart .fiyat { font-size: 15px; }
}

/* ============================================================
   SAYFA İSKELETİ — tutarlılık
   Her sayfa kendi zeminini seçiyordu; bazısı gri, bazısı beyaz.
   Tek kural: gövde beyaz, ayrım gereken bölümler açık gri.
   ============================================================ */
body { background: var(--beyaz); }

/* İçerik alanı her sayfada aynı üst boşluğu alır */
.icerik { padding: 40px 0 96px; }
.icerik.bos-ust { padding: 0 0 0; }

/* Bölüm zeminleri: beyaz varsayılan, "gri" sınıfıyla ayrılır */
.bolum { padding: 76px 0 0; background: transparent; }
.bolum.gri, .bayilik-blok { background: var(--an-50); padding: 76px 0; }
.bolum.gri + .bolum, .bayilik-blok + .bolum { padding-top: 76px; }

/* Yol izi her sayfada aynı hizada */
.yol { padding: 18px 0 0; }

/* ---- Turkuazın tek işi: eylem ve vurgu ----
   Gövde metinlerinde kullanılmaz. Önceki halde İletişim ve
   Yetkili servisler sayfalarında paragrafların tamamı turkuazdı. */
.alt-yazi, .alt-metin, .bos p, .kart-ic p { color: var(--an-600); }
.bolum-baslik p { color: var(--an-600); }

/* Kart üstündeki turkuaz şerit kaldırıldı: üç kartta birden
   olunca vurgu olmaktan çıkıp gürültü oluyordu. */
.kademe::before { display: none; }
.kademe:hover { transform: none; border-color: var(--an-300); }
.kademe.one-cikan::before {
  display: block; content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--tk-500);
}

/* Menüde aktif sayfa: kutu yerine alt çizgi */
.ust-menu a.etkin {
  background: transparent; color: var(--an-950);
  box-shadow: inset 0 -2px 0 var(--tk-500);
  border-radius: 0;
}
.ust-menu a.etkin:hover { background: transparent; }

/* Dar içerikli sayfalar ortada kaybolmasın */
.bos {
  background: var(--beyaz); border: 1px solid var(--an-200);
  border-radius: var(--r-m); padding: 56px 32px; text-align: center;
}

/* ============================================================
   SANAL KEŞİF — çıktı şeridi ve tek sütun form
   Hesaptan sonra sayfa sonuca kayıyor ama yazdırma düğmesi
   yan kutuda kalıyordu; kimse bulamıyordu.
   ============================================================ */
.cikti-serit {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  background: var(--an-950); color: #fff;
  border-radius: var(--r-m); padding: 20px 26px; margin-bottom: 22px;
}
.cikti-serit.alt { margin: 26px 0 0; }
.cikti-serit strong { display: block; font-size: 16px; margin-bottom: 3px; }
.cikti-serit span { font-size: 13.5px; color: var(--an-300); }
.cikti-serit .dugme.sade {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.28);
}
.cikti-serit .dugme.sade:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* Form tek sütun: alanlar alt alta, okunur genişlikte */
.form-bolum .alan { max-width: 520px; }
.form-bolum .alan .secim-ikili { margin-top: 8px; }

/* Yüksek hacim satırları */
.hacim-liste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.hacim-satir {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 10px; align-items: end;
  background: var(--an-50); border: 1px solid var(--an-150);
  border-radius: var(--r-m); padding: 14px 16px;
}
.hacim-satir .alan { margin: 0; max-width: none; }
.hacim-satir .alan label { font-size: 12px; }
.hacim-sil {
  width: 34px; height: 38px; border: 1px solid var(--an-200);
  background: var(--beyaz); border-radius: var(--r-s);
  color: var(--an-500); font-size: 18px; cursor: pointer; line-height: 1;
}
.hacim-sil:hover { border-color: var(--kr-600); color: var(--kr-600); }
#yuksek-hacimler > .ipucu {
  font-size: 12.5px; color: var(--an-500); line-height: 1.6; max-width: 520px;
}
@media (max-width:640px){
  .hacim-satir { grid-template-columns: 1fr 1fr; }
  .hacim-satir .alan:first-child { grid-column: 1 / -1; }
}

/* Saha koşulları onay kutuları */
.alan > .secim-tek {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--an-50); border: 1px solid var(--an-150);
  border-radius: var(--r-m); padding: 13px 15px; margin-bottom: 8px;
  cursor: pointer; font-weight: 400; max-width: 520px;
  transition: all var(--hiz);
}
.alan > .secim-tek:hover { border-color: var(--tk-300); }
.alan > .secim-tek:has(input:checked) {
  border-color: var(--tk-500); background: var(--tk-50);
}
.alan > .secim-tek strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.alan > .secim-tek small { display: block; font-size: 12.5px; color: var(--an-500); line-height: 1.55; }

/* Sürüm damgası — hangi kod sürümünün yayında olduğunu gösterir */
.telif .surum {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--an-500); margin-right: 16px;
}

/* Keşif özetinde yüksek hacimler */
.hacim-ozet {
  background: var(--an-50); border: 1px solid var(--an-150);
  border-radius: var(--r-m); padding: 14px 18px; margin: 16px 0 0;
}
.hacim-ozet .baslik {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--an-500); margin-bottom: 9px;
}
.hacim-ozet .satir {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--an-100);
}
.hacim-ozet .satir:last-child { border-bottom: 0; }
.hacim-ozet .satir > span:first-child { font-weight: 500; }
.hacim-ozet .satir > span:last-child { color: var(--an-600); font-family: var(--mono); font-size: 12px; }

/* ============================================================
   ADIMLI FORM
   Uzun formlar adımlara bölünür; kullanıcı nerede olduğunu ve
   ne kadar kaldığını görür.
   ============================================================ */
.adim-gostergesi {
  display: flex; flex-wrap: wrap; gap: 4px 26px;
  list-style: none; margin: 0 0 32px; padding: 0 0 22px;
  border-bottom: 1px solid var(--an-150);
}
.adim-gostergesi li {
  display: flex; align-items: center; gap: 10px;
  color: var(--an-400); font-size: 13.5px; font-weight: 500;
  cursor: default; transition: color var(--hiz);
}
.adim-gostergesi li .no {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--an-100); color: var(--an-500);
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  transition: all var(--hiz); flex: none;
}
.adim-gostergesi li.etkin { color: var(--an-900); }
.adim-gostergesi li.etkin .no { background: var(--tk-500); color: #fff; }
.adim-gostergesi li.tamam { color: var(--an-600); cursor: pointer; }
.adim-gostergesi li.tamam .no { background: var(--tk-100); color: var(--tk-700); }
.adim-gostergesi li.tamam:hover { color: var(--tk-700); }

/* Adım içindeki başlık numarası artık göstergede, tekrar etmesin */
form[data-adimli] .form-bolum > h3 .no { display: none; }
form[data-adimli] .form-bolum { border-top: 0; padding-top: 0; margin-top: 0; }

.adim-gezinme {
  display: flex; gap: 10px; align-items: center;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--an-150);
}
.adim-gezinme .dugme.sade { margin-right: auto; }
.adim-gezinme .dugme svg { width: 16px; height: 16px; }

@media (max-width:640px){
  .adim-gostergesi { gap: 10px 14px; }
  .adim-gostergesi li .ad { display: none; }
  .adim-gostergesi li.etkin .ad { display: inline; }
  .adim-gezinme { flex-wrap: wrap; }
  .adim-gezinme .dugme { flex: 1 1 auto; justify-content: center; }
}

/* Sonuç ekranındaki tamamlanmış adım şeridi
   Tamamlanan adımlarda numara yerine onay işareti görünür. */
.adim-gostergesi.sonuc-adimlari { margin-bottom: 20px; padding-bottom: 18px; }
.adim-gostergesi.sonuc-adimlari li { cursor: default; }
.adim-gostergesi.sonuc-adimlari li.tamam .no {
  background: var(--tk-100); color: var(--tk-700);
  font-size: 0;                      /* numarayı gizle */
}
.adim-gostergesi.sonuc-adimlari li.tamam .no::before {
  content: "✓"; font-size: 13px; font-weight: 700;
}
.adim-gostergesi.sonuc-adimlari li.etkin .no { background: var(--tk-500); color: #fff; }

/* ============================================================
   MOBİLDE SÜZGEÇ PANELİ
   .yan masaüstünde yapışkan durur (position: sticky). Tek sütuna
   düşen mobil görünümde yapışkanlık kalınca panel, kaydırırken
   ürünlerin üzerine biniyordu. Mobilde akışa dönüyor.
   ============================================================ */
@media (max-width:920px){
  .iki-sutun > .yan {
    position: static; top: auto;
    margin-bottom: 20px;
  }

  /* Uzun süzgeç listesi ekranı doldurmasın: katlanır hale gelir */
  .iki-sutun > .yan .blok { padding: 14px 0; }
  .iki-sutun > .yan h3 { margin-bottom: 9px; }
  .iki-sutun > .yan ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .iki-sutun > .yan li { margin: 0; }
  .iki-sutun > .yan li a {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--an-200); border-radius: 100px;
    padding: 7px 14px; font-size: 13.5px;
  }
  .iki-sutun > .yan li a.etkin {
    background: var(--an-900); border-color: var(--an-900); color: #fff;
  }
  .iki-sutun > .yan li a .sayi { font-size: 11px; opacity: .7; }
}

/* Gönderim sırasında düğme kilitli */
.dugme.gonderiliyor, button.gonderiliyor {
  opacity: .65; cursor: wait; pointer-events: none;
}

/* ============================================================
   CİHAZ ÇİZİMLERİ
   Ürün fotoğrafı yüklenene kadar her cihaz tipi kendi çizimiyle
   görünür. Boş gri kutu siteyi yarım gösteriyordu.
   ============================================================ */
.cihaz-cizim {
  width: 74%; max-width: 190px; height: auto;
  color: var(--an-400);
  transition: color var(--hiz), transform var(--hiz);
}
.urun-kart:hover .cihaz-cizim { color: var(--tk-500); transform: scale(1.03); }
.urun-kart .gorsel { background: var(--beyaz); }
.urun-kart:hover .gorsel { background: var(--an-50); }
.cihaz-cizim.buyuk { width: 62%; max-width: 300px; color: var(--an-300); }

/* ============================================================
   GÖRSEL BÜYÜTME PENCERESİ
   ============================================================ */
.gorsel-pencere {
  position: fixed; inset: 0; z-index: 200;
  display: none; place-items: center;
  background: rgba(6,6,6,.96);
  padding: 40px 24px;
  backdrop-filter: blur(3px);
}
.gorsel-pencere.acik { display: grid; }
.gorsel-pencere img {
  max-width: min(1100px, 94vw); max-height: 88vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-m);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.gorsel-pencere .kapat {
  position: absolute; top: 18px; right: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  transition: all var(--hiz);
}
.gorsel-pencere .kapat:hover { background: rgba(255,255,255,.2); }

/* Büyütülebilir görselde imleç ipucu */
.galeri .buyuk { position: relative; }
.galeri .buyuk::after {
  content: ""; position: absolute; right: 12px; bottom: 12px;
  width: 30px; height: 30px; border-radius: var(--r-s);
  background: rgba(10,10,10,.55) center/16px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity var(--hiz); pointer-events: none;
}
.galeri .buyuk:hover::after { opacity: 1; }

/* ============================================================
   ZENGİN METİN
   Yönetimden girilen ürün açıklaması, kategori metni gibi
   HTML içerikler. Başlık, liste ve paragraf ritmi burada kurulur.
   ============================================================ */
.zengin { font-size: 15px; line-height: 1.75; color: var(--an-700); }
.zengin > *:first-child { margin-top: 0; }
.zengin > *:last-child { margin-bottom: 0; }

.zengin p { margin: 0 0 16px; }

.zengin h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  color: var(--an-950); margin: 34px 0 12px;
}
.zengin h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  color: var(--an-950); margin: 30px 0 10px;
  padding-top: 22px; border-top: 1px solid var(--an-150);
}
.zengin h3:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.zengin h4 { font-size: 15px; font-weight: 600; color: var(--an-900); margin: 22px 0 8px; }

.zengin ul, .zengin ol { margin: 0 0 18px; padding-left: 20px; }
.zengin li { margin-bottom: 7px; }
.zengin ul li::marker { color: var(--tk-500); }

.zengin strong, .zengin b { color: var(--an-950); font-weight: 600; }
.zengin a { color: var(--tk-700); text-decoration: underline; text-underline-offset: 2px; }
.zengin a:hover { color: var(--tk-600); }

.zengin blockquote {
  margin: 20px 0; padding: 14px 20px;
  border-left: 3px solid var(--tk-500); background: var(--an-50);
  color: var(--an-600); font-size: 14.5px;
}
.zengin hr { border: 0; border-top: 1px solid var(--an-150); margin: 28px 0; }

.zengin table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.zengin th, .zengin td { padding: 10px 12px; border-bottom: 1px solid var(--an-150); text-align: left; }
.zengin th { font-weight: 600; color: var(--an-900); background: var(--an-50); }

/* ============================================================
   ÖNE ÇIKAN ÖZELLİK
   Ürünü rakibinden ayıran işlev, teknik tablonun içinde
   kaybolmasın diye ayrı bir blokta anlatılır.
   ============================================================ */
.one-cikan-ozellik {
  background: var(--tk-50); color: var(--an-800);
  border: 1px solid var(--tk-200); border-left: 3px solid var(--tk-500);
  border-radius: var(--r-m); padding: 26px 30px; margin-bottom: 26px;
}
.one-cikan-ozellik .etiket {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tk-700);
  margin-bottom: 10px;
}
.one-cikan-ozellik h3 {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  color: var(--an-950); margin: 0 0 12px; line-height: 1.3; max-width: 620px;
}
.one-cikan-ozellik p {
  font-size: 14.5px; line-height: 1.75; color: var(--an-700);
  margin: 0 0 12px; max-width: 740px;
}
.one-cikan-ozellik p strong { color: var(--an-950); font-weight: 600; }
.one-cikan-ozellik .kazanim {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--tk-200);
  color: var(--tk-800); font-weight: 600; font-size: 15px;
}
@media (max-width:560px){
  .one-cikan-ozellik { padding: 24px 20px; }
  .one-cikan-ozellik h3 { font-size: 18px; }
}


/* ============================================================
   BASLIK TIPOGRAFISI
   Panel etiketlerinin sikisik grotesk dili. Govde metni normal
   genislikte kalir; yalnizca basliklar daralir.
   ============================================================ */
h1, h2, h3, h4,
.giris-govde h1, .bolum-baslik h2, .yapi-baslik,
.urun-ad, .kart-baslik, .bolum-etiket {
  font-family: var(--bslk);
  font-weight: 700;
  letter-spacing: -.015em;
}
.bolum-etiket { font-weight: 600; letter-spacing: .02em; }

/* Sayilar, kodlar ve akim degerleri hizalansin */
.deger, .fiyat, .urun-kod, .stok-adet, .ozellik-deger {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Dolu blok: bolum basliklarinin altinda kalin cizgi */
.bolum-baslik { border-bottom: 3px solid var(--an-900); padding-bottom: 12px; }

/* ============================================================
   ISIK DENGESI — ikinci gecis
   Ilk gecis sayfayi bastan sona koyu birakti. Koyu yuzey tek bir
   yerde kalir (giris), geri kalan bolumler acik zeminde durur.
   Kirmizi bir yuzey rengi degil, noktalama isaretidir.
   ============================================================ */

/* Serit artik acik: giris ile arka arkaya iki koyu blok olmuyor */
.serit { background: var(--beyaz); color: var(--an-900); border-top: 1px solid var(--an-150); border-bottom: 1px solid var(--an-150); }
.serit-baslik h2 { color: var(--an-900); }
.serit-baslik p { color: var(--an-600); }
.adim { border-top-width: 3px; }
.adim .no { color: var(--tk-600); }
.adim h4 { color: var(--an-900); }
.adim p { color: var(--an-600); }

/* Cagri bandi: tam kirmizi yuzey yerine koyu blok, ustunde kirmizi cizgi */
.cagri { background: var(--an-900); border-top: 4px solid var(--tk-500); }
.cagri p { color: var(--an-300); }

/* Baslikta tek kelimeyi renklendirmek en bilinen sablon isareti.
   Vurgu renkle degil, satir kirilimiyla kurulur. */
.giris h1 .vurgu-tk { color: inherit; }

/* Sektor ve kart gecisleri: yukari zipla yok, sadece cizgi koyulasir */
.sektor:hover { border-color: var(--an-400); box-shadow: none; transform: none; }
.dugme:hover { transform: none; }