/* Diyarlar taban öğeleri: sıfırlama, gövde yazısı (Diyar Sans, rakamlar tablo hizalı),
   başlıklar (Diyar Serif), bağlantı, odak halkası, düğme tabanı, girdi, kod, klavye tuşu, seçim
   rengi, ince sıcak kaydırma çubuğu ve her sayfada kullanılan küçük parçalar (etiket, bağlantı
   rozeti, ajan rozeti, tablo, renk karesi, boş yazı, simge). Belirteçler css/tema.css'te;
   bileşenler (düğme türleri, seçici, sekme, kart, çip, ipucu, istatistik, ölçer) css/bilesen/. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--zemin-alt);
  color: var(--yazi-1);
  font: var(--boy-3)/1.4 var(--aile-sans);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--vurgu) 40%, transparent); color: var(--yazi-1); }

h1, h2, h3 { font-family: var(--aile-serif); font-weight: 600; line-height: var(--satir-sik);
  color: var(--yazi-1); }
a { color: var(--vurgu-acik); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* odak halkası: yalnız klavyeyle gelince, her etkileşimli öğede aynı */
:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* düğme tabanı = ikincil düğme (türler css/bilesen/dugme.css) */
button, .dugme {
  font: inherit;
  font-weight: 500;
  color: var(--yazi-1);
  background: var(--zemin-1);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-1);
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--gecis-hizli), border-color var(--gecis-hizli),
    color var(--gecis-hizli);
}
button:hover, .dugme:hover { background: var(--zemin-2); border-color: var(--cizgi-guclu);
  text-decoration: none; }
button:active, .dugme:active { background: var(--zemin-3); }
button:disabled, .dugme[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }

input, select, textarea {
  font: inherit;
  color: var(--yazi-1);
  background: var(--zemin-alt);
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--yaricap-1);
  padding: 7px 10px;
  min-width: 0;
}
input::placeholder, textarea::placeholder { color: var(--yazi-3); }
input[type=range] { accent-color: var(--vurgu); }

code { font-family: var(--aile-mono); font-size: 12px; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 4px; border-radius: var(--yaricap-1);
  border: 1px solid var(--cizgi-guclu); border-bottom-width: 2px; background: var(--zemin-1);
  color: var(--yazi-2); font: 600 var(--boy-1)/1.5 var(--aile-sans); text-align: center; }

.etiket { font-size: 10px; letter-spacing: .1em; color: var(--yazi-3); font-weight: 600; }
.ek { letter-spacing: 0; font-weight: 400; color: var(--yazi-3); font-size: 11px; }
.bos { color: var(--yazi-3); font-style: italic; }

/* bağlantı rozeti (#baglanti): durum noktası + yazı */
.rozet {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px 2px 20px;
  border-radius: var(--yaricap-hap);
  border: 1px solid var(--cizgi);
  background: var(--kaplama);
  color: var(--yazi-2);
  position: relative;
  white-space: nowrap;
}
.rozet::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--yazi-3);
}
.rozet.bagli { color: var(--yazi-1); border-color: var(--iyi-kenar); }
.rozet.bagli::before { background: var(--iyi); animation: nabiz 2.4s ease-in-out infinite; }
.rozet.bekliyor::before { background: var(--uyari); }
.rozet.koptu { color: var(--kotu-yazi); border-color: var(--kotu-kenar); }
.rozet.koptu::before { background: var(--kotu); }
@keyframes nabiz { 50% { opacity: .4; } }

/* ajan rozeti (diyar adının yanında) */
.ajan-rozet {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: var(--yaricap-1);
  font: 700 9.5px/1.5 var(--aile-sans);
  letter-spacing: .06em;
  vertical-align: 1px;
  background: var(--vurgu);
  color: var(--yazi-ters);
}

/* tablo */
.tablo { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.tablo th {
  text-align: left;
  font-weight: 600;
  color: var(--yazi-3);
  font-size: 11px;
  letter-spacing: .03em;
  padding: 0 5px 5px;
  border-bottom: 1px solid var(--cizgi);
}
.tablo td {
  padding: 3px 5px;
  height: 26px;
  border-bottom: 1px solid var(--cizgi-ince);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; }
.tablo .sira-s { width: 26px; color: var(--yazi-3); }
.renk {
  flex: none;
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  background: var(--c, var(--yazi-3));
}

/* simge (simge/simge.js): satır içi SVG, yazının renginde, yazı çizgisine oturur */
.simge { display: inline-block; flex: none; fill: currentColor; vertical-align: -0.15em;
  overflow: visible; }

/* ince, sıcak kaydırma çubuğu */
* { scrollbar-width: thin; scrollbar-color: var(--cizgi-guclu) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--cizgi-guclu); border-radius: 4px;
  border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--yazi-3); }
::-webkit-scrollbar-track { background: transparent; }