:root {
  --lacivert: #1B3A5C;
  --mavi: #2563EB;
  --gri-zemin: #EEF1F4;
  --soluk: #5A636C;
  --cizgi: #C9D2DA;
  --metin: #22282E;
  --kapak-acik: #9FB6CC;
  --kapak-orta: #7FA0BE;
  --kapak-cizgi: #2E4A6B;
  --genislik: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: var(--metin);
  background: #FFFFFF;
  line-height: 1.55;
}
:lang(zh-CN) body { font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mavi); }

.kap { max-width: var(--genislik); margin: 0 auto; padding: 0 20px; }

.serit {
  background: var(--lacivert);
  color: #FFFFFF;
  font-size: 13px;
  letter-spacing: .04em;
}
.serit .kap { display: flex; justify-content: space-between; align-items: center; min-height: 34px; gap: 12px; }
.serit .slogan { color: var(--kapak-acik); }

.dil-secici { display: flex; gap: 4px; }
.dil-secici button,
.dil-secici a {
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--kapak-cizgi);
  color: #FFFFFF;
  font: inherit;
  padding: 2px 9px;
  cursor: pointer;
  border-radius: 3px;
}
.dil-secici button[aria-current="true"] { background: var(--mavi); border-color: var(--mavi); }
.dil-secici button:hover, .dil-secici a:hover { border-color: var(--kapak-acik); }

.ust {
  background: #FFFFFF;
  border-bottom: 1px solid var(--cizgi);
  position: sticky;
  top: 0;
  z-index: 10;
}
.ust .kap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; flex-wrap: wrap; }

.marka { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--lacivert); }
.marka img { width: 40px; height: 40px; }
.marka span { font-weight: 700; font-size: 20px; letter-spacing: .06em; }

.menu { display: flex; gap: 22px; flex-wrap: wrap; }
.menu a { color: var(--metin); text-decoration: none; font-size: 15px; font-weight: 600; }
.menu a:hover { color: var(--mavi); }

.giris { background: var(--gri-zemin); border-bottom: 1px solid var(--cizgi); }
.giris .kap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; padding-top: 48px; padding-bottom: 48px; }
.giris h1 { color: var(--lacivert); font-size: 38px; line-height: 1.2; margin: 0 0 16px; }
.giris p { color: var(--soluk); font-size: 19px; margin: 0; }
.giris .gorsel { background: #FFFFFF; border: 1px solid var(--cizgi); }
.giris .gorsel img { margin: 0 auto; }
.giris .gorsel video { display: block; width: 100%; max-width: 524px; aspect-ratio: 16 / 9; margin: 0 auto; background: #000; }

.bolum { padding: 56px 0; }
.bolum.gri { background: var(--gri-zemin); }
.bolum h2 {
  color: var(--lacivert);
  font-size: 28px;
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--mavi);
  display: inline-block;
}
.bolum .alt { color: var(--soluk); margin: 8px 0 28px; }

.izgara-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kutu {
  background: #FFFFFF;
  border: 1px solid var(--cizgi);
  display: flex;
  flex-direction: column;
}
.kutu .resim {
  aspect-ratio: 4 / 3;
  background: #FFFFFF;
  border-bottom: 1px solid var(--cizgi);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.kutu .resim img { width: 100%; height: 100%; object-fit: contain; }
.kutu .yazi { padding: 14px 16px 18px; }
.kutu h3 { color: var(--lacivert); font-size: 17px; margin: 0 0 6px; }
.kutu p { color: var(--soluk); font-size: 14px; margin: 0; }
.kutu-baglanti { text-decoration: none; color: inherit; }
.kutu-baglanti:hover { border-color: var(--mavi); }
.etiket-yeni {
  display: inline-block;
  background: var(--mavi);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 8px;
  margin-bottom: 6px;
}

.resim-yazi {
  background: var(--lacivert);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
}

.giris-metni { max-width: 860px; margin: 0 0 28px; }
.yazilim-kutu { background: #FFFFFF; border: 1px solid var(--cizgi); border-top: 4px solid var(--mavi); padding: 18px 18px 20px; }
.yazilim-kutu h3 { color: var(--lacivert); font-size: 17px; margin: 0 0 8px; }
.yazilim-kutu p { font-size: 14px; margin: 0; color: var(--metin); }


.bilgi-kutu {
  background: #FFFFFF;
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--mavi);
  padding: 20px 22px;
  max-width: 900px;
}
.bilgi-kutu strong { color: var(--lacivert); font-size: 18px; }
.bilgi-kutu span { color: var(--soluk); }

.alt-bilgi { background: var(--lacivert); color: #FFFFFF; padding: 48px 0 24px; }
.alt-bilgi h2 { color: #FFFFFF; border-bottom-color: var(--kapak-orta); }
.iletisim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.iletisim h3 { color: var(--kapak-acik); font-size: 13px; letter-spacing: .08em; margin: 0 0 8px; text-transform: uppercase; }
.iletisim a { color: #FFFFFF; text-decoration: none; display: block; margin-bottom: 6px; }
.iletisim a:hover { text-decoration: underline; }
.iletisim span { display: block; margin-bottom: 6px; }
.telif { border-top: 1px solid var(--kapak-cizgi); margin-top: 32px; padding-top: 16px; font-size: 13px; color: var(--kapak-acik); }

.yol { font-size: 14px; color: var(--soluk); padding: 14px 0 0; }
.yol a { color: var(--mavi); text-decoration: none; }
.ust-etiket { color: var(--mavi); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }
.metin { max-width: 860px; }
.metin p { margin: 0 0 14px; }
.iki-kolon { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }
.iki-gorsel img { margin: 0 auto; }
.alt-bolum h3 { color: var(--lacivert); font-size: 18px; margin: 0 0 8px; }
.alt-bolum p { margin: 0 0 12px; }
figure { margin: 24px 0 0; }
figure img { border: 1px solid var(--cizgi); background: #FFFFFF; }
figcaption { color: var(--soluk); font-size: 13px; margin-top: 8px; }
.gorsel-dar img { max-width: 240px; }
.yan-kutular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.yan-kutular.iki { grid-template-columns: repeat(2, 1fr); }
.yan-kutu { background: #FFFFFF; border: 1px solid var(--cizgi); border-left: 4px solid var(--mavi); padding: 14px 16px; font-size: 14px; }
.yan-kutu strong { display: block; color: var(--lacivert); margin-bottom: 4px; }
.not-italik { font-style: italic; color: var(--soluk); font-size: 13px; border-top: 1px solid var(--cizgi); padding-top: 14px; margin-top: 8px; }

.teknik-tablo { width: 100%; max-width: 860px; border-collapse: collapse; margin-top: 20px; background: #FFFFFF; font-size: 14px; }
.teknik-tablo th, .teknik-tablo td { border: 1px solid var(--cizgi); padding: 8px 12px; text-align: left; vertical-align: top; }
.teknik-tablo th { width: 38%; color: var(--lacivert); font-weight: 700; background: var(--gri-zemin); }
.kod-listesi { font-family: Consolas, "Courier New", monospace; font-size: 13px; }

.serit-giris { color: #FFFFFF; text-decoration: none; margin-left: auto; }
.serit-giris:hover { text-decoration: underline; }
.oturum { max-width: 480px; margin-top: 20px; }
.sekme-cubugu { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--cizgi); }
.sekme-cubugu[hidden] { display: none; }
.sekme-cubugu button { background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 14px; font: inherit; font-weight: 700; color: var(--soluk); cursor: pointer; }
.sekme-cubugu button[aria-selected="true"] { color: var(--lacivert); border-bottom-color: var(--mavi); }
.oturum-panel { background: #FFFFFF; border: 1px solid var(--cizgi); border-top: 4px solid var(--mavi); padding: 20px; margin-bottom: 24px; }
.oturum-panel h3 { color: var(--lacivert); font-size: 18px; margin: 0 0 14px; }
.oturum-panel h4 { color: var(--lacivert); font-size: 16px; margin: 0 0 6px; }
.oturum-panel p { margin: 0 0 14px; color: var(--soluk); font-size: 14px; }
.sekmeli .oturum-panel { border-top: 0; }
.sekmeli .oturum-panel h3 { display: none; }
.oturum-alan { margin-bottom: 14px; }
.oturum-alan label { display: block; font-size: 14px; font-weight: 700; color: var(--metin); margin-bottom: 4px; }
.oturum-alan input { width: 100%; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 3px; font: inherit; color: var(--metin); background: #FFFFFF; }
.oturum-alan input:focus { outline: 2px solid var(--mavi); outline-offset: 0; border-color: var(--mavi); }
.oturum-dugme { display: block; width: 100%; background: var(--mavi); color: #FFFFFF; border: 0; border-radius: 3px; padding: 11px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.oturum-dugme:hover { background: var(--lacivert); }
.oturum-ikincil { display: block; width: 100%; margin-top: 8px; background: #FFFFFF; color: var(--lacivert); border: 1px solid var(--cizgi); border-radius: 3px; padding: 10px 18px; font: inherit; cursor: pointer; }
.oturum-baglanti { display: inline-block; margin-top: 12px; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--mavi); text-decoration: underline; cursor: pointer; }
.oturum-panel .oturum-mesaj { margin: 14px 0 0; padding: 10px 12px; background: var(--gri-zemin); border-left: 4px solid var(--mavi); color: var(--metin); }

.sss { max-width: 860px; margin-top: 20px; }
.sss details { background: #FFFFFF; border: 1px solid var(--cizgi); border-left: 4px solid var(--mavi); margin-bottom: 10px; }
.sss summary { cursor: pointer; padding: 14px 16px; font-weight: 700; color: var(--lacivert); }
.sss summary:hover { color: var(--mavi); }
.sss details[open] summary { border-bottom: 1px solid var(--cizgi); }
.sss details p { margin: 0; padding: 12px 16px 16px; }
.sss h3 { color: var(--lacivert); font-size: 18px; margin: 28px 0 12px; }
.sss h3:first-child { margin-top: 0; }

.bize-ulasin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.bize-ulasin a { display: block; margin-bottom: 6px; color: var(--mavi); text-decoration: none; font-weight: 700; }
.bize-ulasin a:hover { text-decoration: underline; }

a.bilgi-kutu { display: block; }
.egitim-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 20px; }
.egitim-kart { background: #FFFFFF; border: 1px solid var(--cizgi); border-top: 4px solid var(--mavi); padding: 16px; }
.egitim-kart h3 { color: var(--lacivert); font-size: 17px; margin: 0 0 12px; }
.egitim-no { display: inline-block; min-width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; background: var(--mavi); color: #FFFFFF; font-size: 13px; margin-right: 6px; }
.egitim-kart video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.egitim-bilgi { margin: 10px 0 0; font-size: 14px; color: var(--soluk); }
.egitim-bilgi a { font-weight: 700; }
.egitim-duzen { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 20px; }
.egitim-duzen .egitim-izgara { margin-top: 0; }
.video-listesi { position: sticky; top: 88px; background: #FFFFFF; border: 1px solid var(--cizgi); border-top: 4px solid var(--mavi); padding: 12px 10px; }
.video-listesi h3 { color: var(--lacivert); font-size: 15px; margin: 0 0 8px; padding: 0 6px; }
.video-listesi ol { list-style: none; margin: 0; padding: 0; }
.video-listesi a { display: flex; align-items: flex-start; gap: 8px; padding: 6px; border-left: 3px solid transparent; color: var(--metin); text-decoration: none; font-size: 14px; line-height: 1.35; }
.video-listesi a:hover { background: var(--gri-zemin); }
.video-listesi a.secili { background: var(--gri-zemin); border-left-color: var(--mavi); font-weight: 700; }
.video-listesi .egitim-no { flex: none; margin-right: 0; }
.vl-baslik { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.vl-sure { flex: none; color: var(--soluk); white-space: nowrap; }
.egitim-kart { scroll-margin-top: 88px; }
.katalog-kart { display: flex; gap: 16px; align-items: flex-start; }
.katalog-kart img { flex: none; width: 110px; border: 1px solid var(--cizgi); }

.iletisim-formu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; max-width: 900px; margin-top: 20px; }
.iletisim-formu label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--lacivert); }
.iletisim-formu input, .iletisim-formu select, .iletisim-formu textarea { font: inherit; font-weight: 400; color: var(--metin); background: #FFFFFF; border: 1px solid var(--cizgi); padding: 9px 10px; width: 100%; }
.iletisim-formu textarea { resize: vertical; }
.iletisim-formu .genis, .iletisim-formu .onay, .iletisim-formu .zorunlu, .iletisim-formu button { grid-column: 1 / -1; }
.iletisim-formu .onay { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; color: var(--metin); }
.iletisim-formu .onay input { flex: none; width: auto; margin-top: 4px; }
.iletisim-formu .zorunlu { margin: 0; font-size: 13px; color: var(--soluk); }
.iletisim-formu button { justify-self: start; background: var(--mavi); color: #FFFFFF; border: 0; padding: 10px 28px; font: inherit; font-weight: 700; cursor: pointer; }
.iletisim-formu button:hover { background: var(--lacivert); }
.tuzak { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-mesaj { display: none; max-width: 900px; margin: 16px 0 0; padding: 12px 16px; background: var(--gri-zemin); border-left: 4px solid var(--mavi); scroll-margin-top: 88px; }
.form-mesaj.hata { border-left-color: var(--lacivert); font-weight: 700; }
.form-mesaj:target { display: block; }
.altbilgi-link { margin: 20px 0 0; font-size: 13px; }
.altbilgi-link a { color: var(--kapak-acik); }
.metin-sayfa { max-width: 860px; }
.metin-sayfa h3 { color: var(--lacivert); font-size: 17px; margin: 24px 0 6px; }
.metin-sayfa p { margin: 0 0 8px; }

@media (max-width: 960px) {
  .izgara-4 { grid-template-columns: repeat(2, 1fr); }
  .egitim-duzen { grid-template-columns: 1fr; }
  .video-listesi { position: static; }
  .giris .kap { grid-template-columns: 1fr; }
  .giris h1 { font-size: 30px; }
  .iki-kolon { grid-template-columns: 1fr; }
  .yan-kutular, .yan-kutular.iki { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .kap { padding: 0 16px; }
  .iletisim-formu { grid-template-columns: 1fr; }
  .form-mesaj { scroll-margin-top: 16px; }
  .egitim-kart { scroll-margin-top: 16px; }
  .izgara-4 { grid-template-columns: 1fr; }
  .iletisim { grid-template-columns: 1fr; }
  .bize-ulasin { grid-template-columns: 1fr; }
  .egitim-izgara { grid-template-columns: 1fr; }
  .katalog-kart { flex-direction: column; }
  .katalog-kart img { width: 100%; max-width: 240px; }
  .serit .kap { flex-wrap: wrap; justify-content: flex-start; padding-top: 6px; padding-bottom: 6px; }
  .serit .kap > span { flex-basis: 100%; }
  .serit-giris { margin-left: 0; }
  .ust { position: static; }
  .ust .kap { flex-direction: column; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
  .menu { gap: 14px; }
  .bolum { padding: 40px 0; }
  .bolum h2 { font-size: 23px; }
  .giris h1 { font-size: 26px; }
  :lang(ru) .teknik-tablo { font-size: 12px; }
  :lang(ru) .teknik-tablo th, :lang(ru) .teknik-tablo td { padding: 4px 5px; }
}