/* ==========================================================
   ztablosu.net — ana stil dosyasi
   ========================================================== */

:root {
  --renk-ana: #1a4d8f;
  --renk-ana-koyu: #123563;
  --renk-vurgu: #d97706;
  --renk-metin: #1f2937;
  --renk-soluk: #5b6472;
  --renk-cizgi: #e2e6ec;
  --renk-zemin: #f6f8fb;
  --renk-kart: #ffffff;
  --renk-vurgu-zemin: #fff7ed;
  --golge: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --yaziliyazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --genislik: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: var(--yaziliyazi);
  font-size: 17px;
  line-height: 1.75;
  color: var(--renk-metin);
  background: var(--renk-zemin);
  -webkit-text-size-adjust: 100%;
}

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

a { color: var(--renk-ana); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- ÜST BAR ---------- */
.ust-bar {
  background: var(--renk-ana);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.ust-bar__ic {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.logo {
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.4px;
  white-space: nowrap;
}
.logo:hover { text-decoration: none; opacity: .9; }
.logo span { color: #ffd48a; }

.menu {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  margin-top: 0;
}
.menu a {
  color: #dbe7f7;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 15px;
  display: block;
}
.menu a:hover, .menu a[aria-current="page"] {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  text-decoration: none;
}

/* ---------- KAHRAMAN ---------- */
.kahraman {
  background: linear-gradient(160deg, var(--renk-ana) 0%, var(--renk-ana-koyu) 100%);
  color: #fff;
  padding: 34px 16px 30px;
  text-align: center;
}
.kahraman h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.2;
  letter-spacing: -.6px;
}
.kahraman p {
  margin: 0 auto;
  max-width: 760px;
  font-size: 17px;
  color: #d6e4f6;
}
.kahraman__butonlar {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.dugme {
  display: inline-block;
  background: var(--renk-vurgu);
  color: #fff;
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  cursor: pointer;
}
.dugme:hover { background: #b45309; text-decoration: none; color: #fff; }
.dugme--ikincil { background: rgba(255, 255, 255, .16); }
.dugme--ikincil:hover { background: rgba(255, 255, 255, .28); }

/* ---------- YERLESIM ---------- */
.kabuk {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 24px 16px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}
.kabuk--tek { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.icerik { min-width: 0; }
.kenar { position: sticky; top: 76px; }

.kart {
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 26px;
  box-shadow: var(--golge);
}

h2 {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.3;
  margin: 0 0 14px;
  letter-spacing: -.4px;
  color: var(--renk-ana-koyu);
}
h3 {
  font-size: 20px;
  margin: 26px 0 10px;
  color: var(--renk-ana-koyu);
}
h4 { font-size: 17px; margin: 20px 0 8px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }
strong { color: #111827; }

/* ---------- IÇINDEKILER ---------- */
.icindekiler ol {
  columns: 2;
  column-gap: 28px;
  padding-left: 20px;
  margin-bottom: 0;
}
.icindekiler li { break-inside: avoid; margin-bottom: 5px; }

/* ---------- Z TABLOSU ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--renk-cizgi);
  border-radius: 10px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline: 2px solid var(--renk-ana); }

table.ztable {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
table.ztable caption {
  caption-side: top;
  text-align: left;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--renk-soluk);
  border-bottom: 1px solid var(--renk-cizgi);
}
table.ztable th, table.ztable td {
  border: 1px solid #eceff3;
  padding: 5px 4px;
  text-align: center;
  white-space: nowrap;
}
table.ztable thead th {
  background: var(--renk-ana);
  color: #fff;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.ztable tbody th {
  background: #eef2f8;
  font-weight: 700;
  color: var(--renk-ana-koyu);
  position: sticky;
  left: 0;
  z-index: 1;
}
table.ztable thead th.corner { z-index: 3; }
table.ztable tbody tr:nth-child(even) td { background: #fafbfd; }
table.ztable tbody tr:hover td { background: #e8f0fb; }
table.ztable td.isaretli {
  background: var(--renk-vurgu) !important;
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px #7c2d12;
}

.tablo-not {
  font-size: 14.5px;
  color: var(--renk-soluk);
  margin-top: 12px;
}

/* ---------- BILGI KUTULARI ---------- */
.bilgi {
  background: var(--renk-vurgu-zemin);
  border-left: 4px solid var(--renk-vurgu);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 18px 0;
}
.bilgi p:last-child { margin-bottom: 0; }
.bilgi strong { color: #92400e; }

.formul {
  background: #f8fafc;
  border: 1px solid var(--renk-cizgi);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  font-size: 22px;
  margin: 16px 0;
  overflow-x: auto;
}
.formul small { display: block; font-size: 13px; color: var(--renk-soluk); margin-top: 8px; }

figure { margin: 18px 0; text-align: center; }
figcaption { font-size: 14px; color: var(--renk-soluk); margin-top: 8px; }

/* ---------- HESAPLAYICI ---------- */
.hesap {
  background: #fff;
  border: 2px solid var(--renk-ana);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 26px;
  box-shadow: var(--golge);
}
.hesap__satir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.alan label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--renk-soluk);
}
.alan input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
}
.alan input:focus {
  outline: 0;
  border-color: var(--renk-ana);
  box-shadow: 0 0 0 3px rgba(26, 77, 143, .15);
}
.sonuc {
  background: #f0f6ff;
  border: 1px solid #c7dcf7;
  border-radius: 10px;
  padding: 16px;
  margin-top: 14px;
}
.sonuc__z {
  font-size: 30px;
  font-weight: 800;
  color: var(--renk-ana);
  line-height: 1.2;
}
.sonuc__satir { font-size: 15px; margin-top: 6px; }
.sonuc__satir b { color: var(--renk-ana-koyu); }

/* ---------- GENEL TABLOLAR ---------- */
.veri {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 16px 0;
}
.veri th, .veri td {
  border: 1px solid var(--renk-cizgi);
  padding: 9px 12px;
  text-align: left;
}
.veri thead th { background: #eef2f8; color: var(--renk-ana-koyu); }
.veri tbody tr:nth-child(even) { background: #fafbfd; }

/* ---------- SSS ---------- */
.sss details {
  border: 1px solid var(--renk-cizgi);
  border-radius: 8px;
  padding: 0 16px;
  margin-bottom: 10px;
  background: #fff;
}
.sss summary {
  cursor: pointer;
  font-weight: 600;
  padding: 13px 0;
  list-style: none;
  color: var(--renk-ana-koyu);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::before { content: "+ "; color: var(--renk-vurgu); font-weight: 800; }
.sss details[open] summary::before { content: "− "; }
.sss details[open] { background: #fbfcfe; }
.sss details > p { padding-bottom: 6px; }

/* ---------- KENAR ÇUBUĞU ---------- */
.kenar-kart {
  background: #fff;
  border: 1px solid var(--renk-cizgi);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: var(--golge);
}
.kenar-kart h3 {
  margin: 0 0 10px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--renk-soluk);
}
.kenar-kart ul { list-style: none; padding: 0; margin: 0; }
.kenar-kart li { border-bottom: 1px solid #f1f3f7; padding: 7px 0; margin: 0; font-size: 15px; }
.kenar-kart li:last-child { border-bottom: 0; }

/* ---------- REKLAM ALANLARI ---------- */
.reklam {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 26px auto;
  min-height: 100px;
  text-align: center;
  overflow: hidden;
}
.reklam--bos {
  border: 2px dashed #c4cdd9;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, #fbfcfe, #fbfcfe 12px, #f4f6fa 12px, #f4f6fa 24px);
  padding: 16px;
}
.reklam__etiket {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #98a2b3;
  text-transform: uppercase;
  font-weight: 700;
}
.reklam__olcu { font-size: 12px; color: #b0b8c4; }
.reklam__link { font-size: 13px; color: var(--renk-ana); }
.reklam--dolu { min-height: 0; margin: 26px auto; }

.reklam--banner { min-height: 110px; max-width: 970px; }
.reklam--kare { min-height: 260px; max-width: 336px; }
.reklam--kule { min-height: 600px; max-width: 300px; }
.reklam--icerik { min-height: 130px; max-width: 728px; }

/* Yan dikey reklamlar (genis ekran) */
.reklam--dikey {
  display: none;
  position: fixed;
  top: 110px;
  width: 160px;
  min-height: 600px;
  z-index: 40;
  margin: 0;
}
.reklam--sol { left: max(8px, calc(50% - 760px)); }
.reklam--sag { right: max(8px, calc(50% - 760px)); }
@media (min-width: 1500px) {
  .reklam--dikey { display: flex; }
}

/* Mobil yapiskan alt reklam */
.reklam--mobil-yapiskan {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  min-height: 60px;
  background: #fff;
  border-top: 1px solid var(--renk-cizgi);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
  z-index: 70;
  border-radius: 0;
}
@media (min-width: 900px) { .reklam--mobil-yapiskan { display: none; } }
.reklam__kapat {
  position: absolute;
  top: 2px;
  right: 6px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #98a2b3;
  cursor: pointer;
}

.kenar .reklam { margin: 0 0 20px; }

/* ---------- ALT BILGI ---------- */
.alt {
  background: #101a2b;
  color: #9fb0c8;
  padding: 40px 16px 24px;
  font-size: 15px;
}
.alt__ic {
  max-width: var(--genislik);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px;
}
.alt h4 { color: #fff; margin: 0 0 10px; font-size: 15px; letter-spacing: .4px; }
.alt ul { list-style: none; padding: 0; margin: 0; }
.alt li { margin-bottom: 6px; }
.alt a { color: #9fb0c8; }
.alt a:hover { color: #fff; }
.alt__telif {
  max-width: var(--genislik);
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid #22314b;
  font-size: 13.5px;
  color: #7d8ea6;
}

/* ---------- KUCUK EKRAN ---------- */
@media (max-width: 980px) {
  .kabuk { grid-template-columns: 1fr; }
  .kenar { position: static; }
  .icindekiler ol { columns: 1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .kart { padding: 18px 16px; border-radius: 10px; }
  .kabuk { padding: 16px 12px 90px; gap: 22px; }
  .menu { width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; }
  .menu a { white-space: nowrap; }
  table.ztable { font-size: 12.5px; }
}

/* ---------- YAZDIRMA ---------- */
@media print {
  .reklam, .ust-bar, .kenar, .alt, .kahraman__butonlar, .hesap { display: none !important; }
  .kabuk { display: block; max-width: none; padding: 0; }
  .kart { border: 0; box-shadow: none; padding: 0; margin-bottom: 18px; }
  table.ztable { font-size: 10px; min-width: 0; }
  .table-wrap { overflow: visible; }
  body { background: #fff; font-size: 12px; }
}

.gizli {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}