/* stil.css — laboratuvar/olcum cihazi havasi. Koyu LCD ekranlar, sade paneller. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  background: #e3e7ea;
  color: #1f2a30;
  /* sticky footer: icerik kisa olsa bile alt bar en alta yapissin */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ust ve alt barlar */
.ust-bar {
  background: #243640;
  color: #eef3f5;
  padding: 14px 22px;
  border-bottom: 3px solid #0f9d8c;
}
.ust-bar h1 { margin: 0; font-size: 20px; font-weight: 600; }
.ust-bar p  { margin: 4px 0 0; font-size: 13px; color: #aebfc7; }

.alt-bar {
  background: #243640;
  color: #8aa0a9;
  text-align: center;
  font-size: 12px;
  padding: 12px 8px;
  margin-top: auto;   /* uste kalan bos alani it -> footer en alta */
}

/* uc dikey blok */
.bloklar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .bloklar { grid-template-columns: 1fr; }
}

.blok {
  background: #ffffff;
  border: 1px solid #c2ccd2;
  border-radius: 4px;
}
.blok h2 {
  margin: 0;
  font-size: 15px;
  padding: 10px 14px;
  background: #eef2f4;
  border-bottom: 1px solid #c2ccd2;
}
.blok h3 {
  font-size: 13px;
  margin: 14px 14px 6px;
  color: #4a5b63;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* devre semasi kutusu */
.sema-kutu {
  padding: 10px;
  background: #fbfcfc;
  border-bottom: 1px solid #e1e7ea;
}
.sema { width: 100%; height: auto; display: block; }

/* SVG cizim stilleri */
.sema line { stroke: #2a3b43; stroke-width: 1.6; }
.sema .kalin { stroke-width: 3.4; }
.sema .ince  { stroke: #2a3b43; stroke-width: 1.4; fill: none; }
.sema .eleman { fill: #ffffff; stroke: #2a3b43; stroke-width: 1.6; }
.sema .ok { fill: #2a3b43; stroke: none; }
.sema .dugum { fill: #2a3b43; stroke: none; }
.sema .etk { font: 11px "Segoe UI", sans-serif; fill: #1f2a30; }
.sema .kck { font: 10px "Segoe UI", sans-serif; fill: #5a6b73; }
.sema .ray { font: bold 11px "Segoe UI", sans-serif; fill: #b3402e; text-anchor: end; }
.sema .akim { font: italic 11px "Segoe UI", sans-serif; fill: #0f7a6b; }
.sema .not { font: 10px "Segoe UI", sans-serif; fill: #809098; text-anchor: start; }

/* kaydiricilar */
.kontroller { padding: 0 14px 14px; }
.kontrol {
  display: grid;
  grid-template-columns: 1fr 1.1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed #e1e7ea;
}
.kontrol label { font-size: 12px; color: #34454d; }
.kontrol input[type=range] { width: 100%; accent-color: #0f9d8c; }
.kontrol .deger {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  background: #243640;
  color: #6fe0c4;
  padding: 2px 6px;
  border-radius: 3px;
  min-width: 64px;
  text-align: right;
}

/* elle deger girilebilen sayi kutusu + birim */
.deger-kutu { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.deger-input {
  width: 62px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  background: #243640;
  color: #6fe0c4;
  border: 1px solid #3a4f5a;
  border-radius: 3px;
  padding: 3px 6px;
  text-align: right;
}
.deger-input:focus { outline: none; border-color: #0f9d8c; background: #1c2c34; }
/* sayi kutusundaki yukari/asagi oklarini gizle (daha temiz gorunum) */
.deger-input::-webkit-inner-spin-button,
.deger-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.deger-input { -moz-appearance: textfield; }
.birim { font-size: 11px; color: #4a5b63; min-width: 22px; text-align: left; }

/* sonuc tablolari — LCD ekran havasi */
.sonuc {
  width: calc(100% - 28px);
  margin: 12px 14px 16px;
  border-collapse: collapse;
}
.sonuc td {
  padding: 7px 10px;
  border-bottom: 1px solid #eef2f4;
}
.sonuc td:first-child {
  color: #4a5b63;
  font-size: 13px;
  width: 45%;
}
.sonuc td:last-child {
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  background: #11201d;
  color: #6fe0c4;
  text-align: right;
  border-radius: 3px;
}
.sonuc tr.ayrac td { border-top: 2px solid #c2ccd2; padding-top: 10px; }

/* calisma bolgesi rozeti */
.rozet-satir {
  padding: 12px 14px 0;
  font-size: 13px;
  color: #4a5b63;
}
.rozet {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  letter-spacing: .03em;
}
.rozet.aktif { background: #1f9d6b; }
.rozet.doyma { background: #d18a14; }
.rozet.kesim { background: #b3402e; }

/* ===================== NAVBAR (tum sayfalarda ortak) ===================== */
.navbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: #243640; padding: 0 22px; border-bottom: 3px solid #0f9d8c;
}
.marka {
  display: flex; align-items: center; gap: 10px;
  color: #eef3f5; text-decoration: none; font-weight: 600; font-size: 16px; padding: 12px 0;
}
.marka-logo { width: 30px; height: 30px; }
.marka-logo circle, .marka-logo line { stroke: #0f9d8c; stroke-width: 2; fill: none; }
.menu { display: flex; gap: 2px; flex-wrap: wrap; }
.menu a {
  color: #aebfc7; text-decoration: none; font-size: 14px;
  padding: 16px 14px; border-bottom: 3px solid transparent; margin-bottom: -3px;
}
.menu a:hover { color: #eef3f5; }
.menu a.aktif { color: #fff; border-bottom-color: #0f9d8c; }

/* ===================== ORTAK YERLESIM ===================== */
.bolum { max-width: 1100px; margin: 0 auto; padding: 30px 22px; }
.bolum h2 { font-size: 20px; color: #243640; margin: 0 0 18px; }
.bolum-koyu { background: #fff; border: 1px solid #c2ccd2; border-radius: 6px; }

.sayfa-baslik { max-width: 1100px; margin: 0 auto; padding: 24px 22px 4px; }
.sayfa-baslik h1 { margin: 0 0 8px; font-size: 24px; color: #243640; }
.sayfa-baslik p { margin: 0; color: #4a5b63; line-height: 1.65; max-width: 850px; }

code {
  font-family: Consolas, "Courier New", monospace;
  background: #eef2f4; padding: 1px 5px; border-radius: 3px; font-size: 0.92em;
}
.ic-link { color: #0c8576; font-weight: 600; }

/* ===================== ANA SAYFA (hero) ===================== */
.hero {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center;
  max-width: 1100px; margin: 0 auto; padding: 38px 22px;
}
.etiket-rozet {
  display: inline-block; background: #0f9d8c; color: #fff;
  font-size: 12px; padding: 3px 10px; border-radius: 3px; letter-spacing: .03em;
}
.hero-yazi h1 { font-size: 30px; margin: 12px 0 14px; color: #243640; line-height: 1.2; }
.hero-yazi p { color: #4a5b63; line-height: 1.7; font-size: 15px; }
.hero-butonlar { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 11px 20px; border-radius: 4px;
  text-decoration: none; font-size: 14px; font-weight: 600;
}
.btn-ana { background: #0f9d8c; color: #fff; }
.btn-ana:hover { background: #0c8576; }
.btn-ikincil { background: #fff; color: #243640; border: 1px solid #c2ccd2; }
.btn-ikincil:hover { border-color: #0f9d8c; }
.hero-gorsel { display: flex; justify-content: center; }
.hero-sema { width: 100%; max-width: 260px; }
.hero-sema line, .hero-sema rect { stroke: #2a3b43; stroke-width: 1.8; fill: none; }
.hero-sema .hg-ok, .hero-sema .hg-dot { fill: #2a3b43; stroke: none; }
.hero-sema .hg-ray { font: bold 11px "Segoe UI", sans-serif; fill: #b3402e; stroke: none; }

/* tanitim kartlari */
.kart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kart {
  display: block; background: #fff; border: 1px solid #c2ccd2; border-radius: 6px;
  padding: 18px; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
a.kart:hover { border-color: #0f9d8c; transform: translateY(-2px); }
.kart h3 { margin: 0 0 8px; color: #243640; font-size: 16px; }
.kart p { margin: 0 0 12px; color: #4a5b63; font-size: 13.5px; line-height: 1.6; }
.kart-link { color: #0c8576; font-weight: 600; font-size: 13px; }
.kart-pasif { background: #f4f7f8; }
.kart-link-pasif { color: #7a8b93; font-family: Consolas, monospace; }

/* nasil kullanilir adimlari */
.adimlar { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.adimlar li { display: flex; align-items: center; gap: 12px; color: #34454d; font-size: 15px; }
.adim-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: #0f9d8c; color: #fff;
  border-radius: 50%; font-weight: 700; flex-shrink: 0;
}

/* ===================== DEVRE ELEMANLARI SAYFASI ===================== */
.eleman-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.eleman-kart { background: #fff; border: 1px solid #c2ccd2; border-radius: 6px; padding: 18px; }
.eleman-sembol {
  width: 100%; height: 72px; display: block; margin-bottom: 6px;
  background: #fbfcfc; border: 1px solid #e1e7ea; border-radius: 4px;
}
.eleman-sembol line, .eleman-sembol rect, .eleman-sembol circle { stroke: #2a3b43; stroke-width: 2; fill: none; }
.eleman-sembol .sembol-ok { fill: #2a3b43; stroke: none; }
.eleman-sembol .sembol-cizgi { stroke: #2a3b43; stroke-width: 2; fill: none; }
.eleman-sembol .sembol-yazi { font: 11px "Segoe UI", sans-serif; fill: #5a6b73; stroke: none; }
.eleman-sembol .sembol-beta { font: bold 34px "Segoe UI", sans-serif; fill: #0f9d8c; stroke: none; text-anchor: middle; }
.eleman-kart h3 { margin: 6px 0 8px; color: #243640; font-size: 16px; }
.eleman-kart p { margin: 0; color: #4a5b63; font-size: 13.5px; line-height: 1.6; }

/* roller tablosu */
.rol-tablo { width: 100%; border-collapse: collapse; }
.rol-tablo th, .rol-tablo td { border: 1px solid #d4dade; padding: 8px 12px; text-align: left; font-size: 14px; }
.rol-tablo th { background: #eef2f4; color: #243640; }
.rol-tablo td:first-child { font-weight: 600; color: #243640; width: 120px; }

/* temel kavramlar */
.kavram-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.kavram-kart { background: #243640; border-radius: 6px; padding: 16px; }
.kavram-kart h4 { margin: 0 0 8px; color: #6fe0c4; font-size: 15px; }
.kavram-kart p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #aebfc7; }
.kapanis { color: #4a5b63; font-size: 15px; margin: 4px 0 0; }

/* proje hakkinda + yapilan analizler (ana sayfa) */
.proje-hakkinda p { color: #4a5b63; line-height: 1.7; font-size: 15px; max-width: 860px; }
.analiz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.analiz-kart { background: #f4f7f8; border: 1px solid #e1e7ea; border-radius: 6px; padding: 16px 18px; }
.analiz-kart h3 { margin: 0 0 10px; color: #243640; font-size: 16px; }
.analiz-kart ul { margin: 0; padding-left: 18px; color: #4a5b63; font-size: 14px; line-height: 1.7; }

/* dar ekran */
@media (max-width: 900px) {
  .hero, .kart-grid, .eleman-grid, .kavram-grid, .analiz-grid { grid-template-columns: 1fr; }
}