:root {
  --f-baslik: "Times New Roman", Times, serif;
  --f-metin:  Arial, Helvetica, sans-serif;

  --pt-menu:   15px;
  --pt-baslik: 32px;
  --pt-site:   25px;

  --pt-grup:   20px;

  --serif-denge: 1.095;

  --pt-baslik-serif: calc(var(--pt-baslik) * var(--serif-denge));

  --pt-metin:  13px;

  --zemin:    #ffffff;
  --c-baslik: #000000;
  --c-metin:  #333333;
  --c-soluk:  #999999;
  --c-cizgi:  #dddddd;

  --menu-en:   200px;

  --cubuk-en:  15px;
  --icerik-en: 860px;
  --sutun-ara:  40px;
  --bosluk:  22px;
  --ok-en:   15px;
  --nokta:   7px;
  --c-nokta: #cc0000;
  --ikon-boy: 24px;
  --kapak-zemin: #f6f6f6;
  --kapak-zemin-uzeri: #ececec;

  --simge-en:    144px;
  --grup-en:     115px;
  --simge-ara:     6px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll;
}

body {
  margin: 0;
  padding: var(--bosluk);
  background: var(--zemin);
  color: var(--c-metin);
  font-family: var(--f-metin);
  font-size: var(--pt-metin);
  line-height: 1.5;
}

img, video, button { border-radius: 0; box-shadow: none; }

a { color: var(--c-metin); text-decoration: none; }
a:hover { color: var(--c-baslik); text-decoration: underline; }

.kap {
  display: flex;
  align-items: flex-start;
  gap: var(--sutun-ara);
  max-width: calc(var(--menu-en) + var(--cubuk-en)
                  + var(--sutun-ara) + var(--icerik-en));
  margin: 0 auto;
}

.yan {
  flex: 0 0 calc(var(--menu-en) + var(--cubuk-en));
  width: calc(var(--menu-en) + var(--cubuk-en));
  position: sticky;
  top: var(--bosluk);
  height: calc(100vh - 2 * var(--bosluk));
  display: flex;
  flex-direction: column;
}

.menu-kaydir {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.icerik { flex: 1 1 auto; min-width: 0; max-width: var(--icerik-en); }

.site-ad {
  display: block;
  margin-bottom: 20px;
  font-family: var(--f-baslik);
  font-size: var(--pt-site);
  line-height: 1.2;
  color: var(--c-baslik);
}

.site-ad:hover { text-decoration: none; }

.menu { margin: 0 0 20px; }

.menu-bas {
  display: block;
  padding: 2px 0;
  font-family: var(--f-baslik);
  font-size: var(--pt-menu);
  color: var(--c-baslik);
  cursor: pointer;
}

.menu-bas.aktif { font-weight: bold; }

.menu-satir { display: flex; align-items: flex-start; user-select: none; -webkit-user-select: none; }
.menu-satir > a { flex: 1 1 auto; min-width: 0; }

.ok-kutu, .ok-yer {
  flex: 0 0 auto;
  width: var(--ok-en);
  align-self: stretch;
  position: relative;
}

.ok-kutu { cursor: pointer; }

.ok-kutu::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-right: 1px solid var(--c-soluk);
  border-bottom: 1px solid var(--c-soluk);
  transform: rotate(-45deg);
}

.menu-acik > .ok-kutu::before {
  transform: rotate(45deg);
  top: 8px;
}

.ok-kutu::after {
  content: "";
  position: absolute;
  left: -5px;
  right: 0;
  top: 2px;
  height: 20px;
}

.ok-kutu:hover::before { border-color: var(--c-baslik); }
.ok-kutu:focus-visible::before { border-color: var(--c-baslik); }
.ok-kutu:focus { outline: none; }

.yeni-nokta {
  display: inline-block;
  width: var(--nokta);
  height: var(--nokta);
  margin-left: 7px;
  vertical-align: 1px;
  background: var(--c-nokta);
  border-radius: 50%;
}

.menu-sayi {
  font-family: var(--f-metin);
  font-size: var(--pt-metin);
  font-weight: normal;
  color: var(--c-soluk);
  font-variant-numeric: tabular-nums;
}

.menu-alt { margin: 0 0 6px; padding-left: var(--ok-en); }
.menu-alt[hidden] { display: none; }

.menu-alt a {
  display: block;
  padding: 1px 0;
  color: var(--c-metin);
  line-height: 1.35;
}

.menu-alt > a:not(.menu-kategori),
.menu-alt2 > a { padding-left: var(--ok-en); }

.menu-alt a.aktif { color: var(--c-baslik); font-weight: bold; }

.menu-alt a.menu-kategori {
  font-family: var(--f-metin);
  font-size: var(--pt-metin);
  letter-spacing: 0.04em;
  padding: 4px 0 1px;
  cursor: pointer;
}

.menu-alt a.menu-kategori.aktif { font-weight: bold; }

.menu-alt2 { margin: 0 0 6px; padding-left: var(--ok-en); }
.menu-alt2[hidden] { display: none; }

.menu-dip { flex: 0 0 auto; padding-top: 10px; color: var(--c-soluk); }

.menu-dip a { color: var(--c-soluk); text-decoration: underline; }
.menu-dip a:hover { color: var(--c-baslik); }
.menu-dip a.aktif { color: var(--c-baslik); }

.menu-denetim {
  margin-top: 14px;
  padding-top: 6px;
  border-top: 1px dotted #bbbbbb;
  color: var(--c-soluk);
  line-height: 1.45;
}

.menu-denetim a { color: var(--c-soluk); text-decoration: underline; }
.menu-denetim a:hover { color: var(--c-baslik); }

.simge-ayar { margin-bottom: 6px; }
.simge-ayar a.aktif { color: var(--c-baslik); text-decoration: none; }

.yol-baslik .yol-ana {
  font-family: var(--f-baslik);
  font-size: var(--pt-baslik-serif);
}

.yol .yol-alt { font-family: var(--f-metin); }

.yol a { color: var(--c-baslik); }

.veri-yolu { margin: 26px 0 0; }

.yol-satir {
  font-size: var(--pt-metin);
  line-height: 1.4;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-cizgi);
}

.yol-satir .yol-ana {
  font-family: var(--f-metin);
  font-size: inherit;
}

.yol .yol-ayrac {
  display: inline-block;
  position: relative;
  width: 0.34em;
  height: 0.68em;
  margin: 0 0.30em;
}

.yol .yol-ayrac::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.30em;
  height: 0.30em;
  margin-top: -0.15em;
  border-right: 0.06em solid var(--c-soluk);
  border-bottom: 0.06em solid var(--c-soluk);
  transform: rotate(-45deg);
}

h1 {
  font-family: var(--f-baslik);
  font-weight: normal;
  font-size: var(--pt-baslik);
  line-height: 1.2;
  color: var(--c-baslik);
  margin: 0 0 14px;
}

h1:not(.yol-baslik) { font-size: var(--pt-baslik-serif); }

.ust-bilgi { color: var(--c-soluk); margin-bottom: 18px; }
.ust-bilgi a { text-decoration: none; }
.ust-bilgi .etiket { margin-right: 12px; }

.metin { max-width: 66ch; }
.metin p { margin: 0 0 12px; }

.metin ul.madde {
  margin: 0 0 12px;
  padding-left: 18px;
  list-style: disc outside;
}

.metin ul.madde li { margin: 0 0 2px; }

.metin.genis { max-width: none; }

.bolum {
  margin: 26px 0 8px;
  font-family: var(--f-metin);
  font-size: var(--pt-menu);
  color: var(--c-baslik);
}

.agac { padding-top: 4px; }
.agac ul { list-style: none; margin: 0; padding: 0; }
.agac ul ul { padding-left: 22px; }
.agac li { padding: 3px 0; }

.agac-kok-ad {
  font-family: var(--f-metin);
  font-size: var(--pt-metin);
  color: var(--c-baslik);
}

.agac li.dal > a { color: var(--c-baslik); }

.agac ul ul > li { position: relative; }

.agac ul ul > li::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  height: 100%;
  border-left: 1px solid var(--c-cizgi);
}

.agac ul ul > li:last-child::before { height: 13px; }

.agac ul ul > li::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 13px;
  width: 12px;
  height: 0;
  border-top: 1px solid var(--c-cizgi);
}

.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--simge-en), 100%), 1fr));
  gap: 22px 18px;
}

.izgara-yok { color: var(--c-soluk); }

.kart { display: block; }
.kart-ana { display: block; text-decoration: none; color: inherit; }
.kart-ana:hover { text-decoration: none; }
.kart-ana:hover .kart-ad { text-decoration: underline; }

.kapak {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--kapak-zemin);
}

.kapak img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
}

.kart-ana:hover .kapak img,
.simge:hover .kapak img { transform: scale(1.08); }

.kart-ana:hover .kart-tas,
.simge:hover .kart-tas { background: var(--kapak-zemin-uzeri); }

.kart-ad {
  display: block;
  margin-top: 5px;
  line-height: 1.35;
  color: var(--c-baslik);
  overflow-wrap: anywhere;
}

.kart-sayi {
  color: var(--c-soluk);
}
.kart .etiket {
  overflow-wrap: anywhere;
  text-decoration: none;
}
.kart a.etiket:hover {
  text-decoration: underline;
}

.kart > .kart-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-top: 3px;
}

.kart-alt .etiket { margin-top: 0; }

.izgara-bas {
  font-family: var(--f-baslik);
  font-weight: normal;
  font-size: var(--pt-baslik-serif);
  line-height: 1.2;
  margin: 52px 0 14px;
}

.izgara-bas:first-child { margin-top: 0; }

.izgara-bas a { color: var(--c-baslik); }

.izgara-sayi {
  margin-left: 8px;
  font-family: var(--f-metin);
  font-size: var(--pt-metin);
  color: var(--c-soluk);
}

.bolum-cizgi {
  border-top: 1px solid var(--c-baslik);
  margin-bottom: 14px;
}

.istat-ozet {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 28px;
}

.istat-kutu { flex: 1 1 150px; padding: 18px 0; }
.istat-kutu + .istat-kutu { padding-left: 20px; }

.istat-sayi {
  font-family: var(--f-metin);
  font-size: 34px;
  line-height: 1.1;
  color: var(--c-baslik);
}

.istat-etiket {
  font-family: var(--f-metin);
  font-size: var(--pt-metin);
  color: var(--c-soluk);
  margin-top: 6px;
}

.bolum-daha {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--f-metin);
  font-size: var(--pt-metin);
  color: var(--c-soluk);
}

.bolum-daha:hover { color: var(--c-metin); }

.grup {
  display: grid;
  grid-template-columns: 1fr;

  border-top: 1px solid var(--c-baslik);
}

.grup-sol, .grup-sag {
  display: flex;
  align-items: center;
}

.grup-sol { min-width: 0; padding-top: 10px; }

.grup-ad {
  font-family: var(--f-metin);
  font-size: var(--pt-grup);
  line-height: 1.2;
  overflow-wrap: break-word;
}

.grup-sayi {
  margin-left: 8px;
  font-size: var(--pt-metin);
  color: var(--c-soluk);
  white-space: nowrap;
}

.grup-sag {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--simge-ara);
  min-width: 0;
  overflow: hidden;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--c-cizgi);
}

.simge { display: block; width: var(--grup-en); flex: 0 0 auto; }

.grup-daha {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: var(--grup-en);
  height: var(--grup-en);
  padding: 0 4px;
  background: var(--kapak-zemin);
  color: var(--c-baslik);
  white-space: nowrap;
}

.grup-daha:hover { text-decoration: none; color: var(--c-metin); }

.kart .kart-tas, .simge .kart-tas {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 6%;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-top: 0;
  overflow: hidden;
  background: var(--kapak-zemin);
}

.kart .kart-tas, .simge .kart-tas { container-type: inline-size; }

.tas-boyut {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.3em;
  white-space: nowrap;
  font-family: var(--f-metin);
  font-size: 26cqw;
  color: var(--c-soluk);
}

.tas-deger { font-variant-numeric: tabular-nums; }
.tas-birim { letter-spacing: 0.02em; }

.indir-ikon {
  flex: 0 0 auto;
  width: 0.92em;
  height: 0.92em;
  vertical-align: -0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.liste thead th svg { margin-right: 5px; vertical-align: -0.14em; }

.taslak-not { color: var(--c-soluk); margin-bottom: 8px; }

.liste { width: 100%; border-collapse: collapse; }

.liste td {
  padding: 4px 18px 4px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--c-cizgi);
}

.liste td:last-child { padding-right: 0; }

.liste thead th {
  padding: 0 18px 4px 0;
  text-align: left;
  font-weight: normal;
  color: var(--c-baslik);
  border-bottom: 1px solid #333333;
  white-space: nowrap;
}

.liste thead th:last-child { padding-right: 0; }
.liste thead th.sag { text-align: right; }

.liste td.sag {
  text-align: right;
  white-space: nowrap;
  color: var(--c-soluk);
  font-variant-numeric: tabular-nums;
}

.liste td.ikincil { color: var(--c-soluk); }

.onizleme a {
  color: var(--c-baslik);
  text-decoration: underline;
  white-space: nowrap;
}

.liste td.ikon { width: 1%; }
.liste td.ikon .dizi-satir { justify-content: flex-start; }

.liste td.tur { white-space: nowrap; color: var(--c-soluk); }
.liste td.tur a { color: inherit; }
.liste th.tur { white-space: nowrap; color: var(--c-baslik); }

.dizi-satir {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--ikon-boy);
}

.dosya-ikon {
  display: block;
  width: var(--ikon-boy);
  height: var(--ikon-boy);
  border: 0;
}

.ikon-bag { display: block; }

/* Satirin sagindaki indirme oku. Hem diskteki dosyada hem tarayicida
   uretilen bicimde ayni: normalde soluk, imlec ustundeyken tam kontrast. */
.indir-bag {
  border: 0;
  color: var(--c-soluk);
  cursor: pointer;
}

.indir-bag:hover { color: var(--c-baslik); }

.fren-not { color: var(--c-metin); }

.liste td.soluk { color: var(--c-soluk); }

.arama-satir {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.arama {
  width: 170px;
  padding: 3px 6px;
  font-family: var(--f-metin);
  font-size: var(--pt-metin);
  color: var(--c-baslik);
  background: var(--zemin);
  border: 1px solid var(--c-metin);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.arama::placeholder { color: var(--c-soluk); }
.arama:focus { border-color: var(--c-baslik); }

.arama::-webkit-search-cancel-button,
.arama::-webkit-search-decoration { -webkit-appearance: none; }

.arama-sonuc {
  color: var(--c-soluk);
  font-variant-numeric: tabular-nums;
}

.arama-yardim { margin-left: auto; color: var(--c-soluk); }

.liste-sirali th {
  padding: 0 18px 4px 0;
  text-align: left;
  font-weight: normal;
  color: var(--c-baslik);
  border-bottom: 1px solid #333333;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.liste-sirali th:last-child { padding-right: 0; }
.liste-sirali th.sag { text-align: right; }

.liste-sirali th:hover { text-decoration: underline; }

.liste tr.ornek td.ad { color: var(--c-soluk); }
.liste tr.ornek .dosya-ikon { opacity: 0.45; }
.liste td.ad a { color: var(--c-baslik); }

td.tur { color: var(--c-soluk); white-space: nowrap; }
th.tur { color: var(--c-baslik); white-space: nowrap; }

.gorsel { margin: 0 0 20px; }

.gorsel img, .gorsel video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-cizgi);
}
.gorsel figcaption { margin-top: 4px; color: var(--c-soluk); }

.sekil-no { color: var(--c-metin); white-space: nowrap; }

.dipnot { margin-top: 30px; color: var(--c-soluk); }
.dipnot div { margin-bottom: 2px; }

.menu-dugme { display: none; }

@media (max-width: 700px) {
  body { padding: 14px; }

  .kap { flex-direction: column; gap: 18px; align-items: stretch; }

  .yan {
    position: static;
    width: 100%;
    flex: none;
    height: auto;
    display: block;
  }

  .menu-kaydir { overflow: visible; scrollbar-gutter: auto; }

  .menu-dugme {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    padding: 9px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--c-cizgi);
    border-bottom: 1px solid var(--c-cizgi);
    font-family: var(--f-metin);
    font-size: var(--pt-metin);
    color: var(--c-baslik);
    text-align: left;
    cursor: pointer;
  }

  .menu-dugme::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 10px 2px 3px;
    border-right: 1px solid var(--c-soluk);
    border-bottom: 1px solid var(--c-soluk);
    transform: rotate(-45deg);
  }

  .dar-acik .menu-dugme::before { transform: rotate(45deg); }

  .yan .menu,
  .yan .menu-dip { display: none; }

  .yan.dar-acik .menu,
  .yan.dar-acik .menu-dip { display: block; }

  .site-ad { margin-bottom: 12px; }

  .icerik h1,
  .izgara-bas { font-size: calc(var(--pt-baslik-serif) * 0.72); }
  .yol-baslik .yol-ana { font-size: calc(var(--pt-baslik-serif) * 0.72); }
  .yol-baslik .yol-alt { font-size: calc(var(--pt-baslik) * 0.72); }

  .site-ad { font-size: 20px; }

  .izgara { grid-template-columns: repeat(auto-fill, minmax(min(var(--simge-en), 100%), 1fr)); }

  .liste-kart,
  .liste-kart tbody,
  .liste-kart tr { display: block; width: auto; }

  .liste-kart thead { display: none; }

  .liste-kart { border-top: 1px solid #333333; }

  .liste-kart tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--c-cizgi);
  }

  .liste-kart td,
  .liste-kart td.sag {
    display: block;
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .liste-kart td:empty { display: none; }

  .liste-kart td[data-baslik]::before {
    content: attr(data-baslik) ": ";
    color: var(--c-soluk);
  }

  .liste-kart td.ad,
  .liste-kart td.ikincil { flex: 0 0 100%; }

  .liste-kart td.ad::before { content: none; }
  .liste-kart td.ad { padding-bottom: 3px; }

  .liste-kart tr::after {
    content: "";
    order: 1;
    flex: 0 0 100%;
    height: 0;
  }

  .liste-kart td.tarih,
  .liste-kart td.boyut { order: 2; }

  .istat-ozet { display: block; }
  .istat-kutu { padding: 10px 0; }
  .istat-kutu + .istat-kutu { padding-left: 0; }

  .arama-satir { flex-wrap: wrap; }
  .arama { flex: 1 1 100%; }
  .arama-yardim { display: none; }
}