/* Ankara Medipol beyan arayuzu - ana site ve portalla ayni sade dil:
   beyaz zemin, lacivert vurgu, cerceve yerine ince ayrac. */
:root {
  --bg: #ffffff;
  --yuzey: #ffffff;
  --yuzey-2: #f7f9fb;
  --kenar: #dfdfdf;
  --kenar-guclu: #c6cacd;
  --metin: #141623;
  --metin-2: #42474c;
  --metin-3: #6a6e72;
  --birincil: #081e5f;
  --vurgu: #1f74c2;
  --vurgu-yumusak: #eaeefa;
  --basari: #1f6f52;
  --uyari: #8a5a05;
  --hata: #a32626;
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --b1: .25rem; --b2: .5rem; --b3: .75rem; --b4: 1rem; --b5: 1.5rem; --b6: 2.25rem;
  --yuvarlak: 5px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0d15; --yuzey: #11151f; --yuzey-2: #191e29;
    --kenar: #262c39; --kenar-guclu: #3a4252;
    --metin: #eef1f6; --metin-2: #b6bdcb; --metin-3: #8d94a5;
    --birincil: #4dabe9; --vurgu: #7cc3f0; --vurgu-yumusak: #12293f;
    --basari: #57b894; --uyari: #d9a441; --hata: #e08585;
  }
}

* { box-sizing: border-box; }

/* [hidden] gizlemesi, sinif secicilerinin display kurallarina YENILIYOR
   (tarayici varsayilani daha dusuk oncelikli). Arayuz gizli/gorunur
   durumunu bu nitelikle yonettigi icin kurali guclendiriyoruz; yoksa
   giris yapilmamisken "Cikis" dugmesi gorunuyordu. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--metin);
  font: 400 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

.kap { max-width: 60rem; margin: 0 auto; padding: 0 var(--b5); }

/* ---------------- ust bant ---------------- */
.ust {
  border-bottom: 1px solid var(--kenar);
  background: var(--yuzey);
  margin-bottom: var(--b6);
}
.ust__ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--b4); padding-top: var(--b4); padding-bottom: var(--b4);
}
.ust__kurum {
  display: block; font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--metin-3);
}
.ust__ad { margin: .1rem 0 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
.ust__sag { display: flex; align-items: center; gap: var(--b3); font-size: .875rem; }

/* ---------------- ortak ---------------- */
.kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  padding: var(--b5);
  margin-bottom: var(--b5);
}
h2 { margin: 0 0 var(--b3); font-size: 1.0625rem; font-weight: 650; }

.btn {
  font: inherit; font-size: .875rem; cursor: pointer;
  border-radius: var(--yuvarlak); padding: .4rem .85rem;
  border: 1px solid var(--kenar);
  background: var(--yuzey); color: var(--metin-2);
  transition: border-color .15s, color .15s, background .15s;
}
.btn:hover { border-color: var(--kenar-guclu); color: var(--metin); }
.btn:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.btn--ana {
  background: var(--birincil); border-color: var(--birincil);
  color: #fff; font-weight: 600; padding: .5rem 1.2rem;
}
@media (prefers-color-scheme: dark) { .btn--ana { color: #0a0d15; } }
.btn--ana:hover { color: #fff; opacity: .92; }
@media (prefers-color-scheme: dark) { .btn--ana:hover { color: #0a0d15; } }

.uyari {
  color: var(--hata); font-size: .875rem;
  border-left: 2px solid var(--hata); padding-left: var(--b3); margin: var(--b3) 0;
}

/* ---------------- giris ---------------- */
.giris { max-width: 26rem; margin-inline: auto; }
.giris__not {
  font-size: .8125rem; color: var(--metin-3);
  border-left: 2px solid var(--kenar-guclu); padding-left: var(--b3);
  margin: 0 0 var(--b4);
}
.giris label {
  display: block; margin-bottom: var(--b1);
  font-size: .8125rem; font-weight: 600; color: var(--metin-2);
}
.giris input {
  width: 100%; font: inherit; padding: .5rem .65rem;
  border: 1px solid var(--kenar); border-radius: var(--yuvarlak);
  background: var(--yuzey); color: var(--metin); margin-bottom: var(--b4);
}
.giris input:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }

/* ---------------- aciklama ---------------- */
.aciklama p { margin: 0 0 var(--b3); max-width: 68ch; }
.aciklama p:last-child { margin-bottom: 0; }
.aciklama__ikincil { font-size: .875rem; color: var(--metin-2); }

/* ---------------- ozet ---------------- */
.ozet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--b4); margin-bottom: var(--b5);
}
.ozet__oge { border-left: 2px solid var(--kenar-guclu); padding-left: var(--b3); }
.ozet__sayi {
  display: block; font-size: 1.375rem; font-weight: 650;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ozet__ad { font-size: .8125rem; color: var(--metin-3); }
.ozet__oge--evet { border-left-color: var(--basari); }
.ozet__oge--hayir { border-left-color: var(--kenar-guclu); }
.ozet__oge--bos { border-left-color: var(--uyari); }

/* ---------------- araclar ---------------- */
.araclar {
  display: flex; flex-wrap: wrap; gap: var(--b3);
  align-items: center; justify-content: space-between; margin-bottom: var(--b4);
}
.suzgec { display: flex; flex-wrap: wrap; gap: var(--b2); }
.chip {
  font: inherit; font-size: .8125rem; cursor: pointer;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--kenar); background: var(--yuzey); color: var(--metin-2);
}
.chip:hover { border-color: var(--kenar-guclu); color: var(--metin); }
.chip:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.chip--etkin {
  border-color: var(--birincil); background: var(--vurgu-yumusak);
  color: var(--birincil); font-weight: 600;
}
#ara {
  font: inherit; font-size: .875rem; padding: .35rem .6rem; min-width: 14rem;
  border: 1px solid var(--kenar); border-radius: var(--yuvarlak);
  background: var(--yuzey); color: var(--metin);
}

.durum { font-size: .8125rem; color: var(--metin-3); margin: 0 0 var(--b3); }

/* Kaydedilemedi uyarisi. :not(:empty) - metin yokken kutu cizilmesin,
   bos bir cerceve kullaniciya "bir sey oldu" dedirtir.
   Renkler --uyari/--hata degiskenlerinden gelir; ikisinin de karanlik tema
   karsiligi yukarida tanimli, bu yuzden ayrica dark kurali gerekmiyor.
   RENK TEK BASINA ANLAM TASIMAZ: metnin kendisi ne yapilacagini soyluyor
   ("birkaç saniye sonra tekrar deneyin"). */
.durum--uyari:not(:empty), .durum--hata:not(:empty) {
  padding: var(--b3); border-radius: var(--yuvarlak);
  border: 1px solid currentColor; font-weight: 500;
}
.durum--uyari:not(:empty) { color: var(--uyari); }
.durum--hata:not(:empty)  { color: var(--hata); }

/* ---------------- liste ---------------- */
.liste { list-style: none; margin: 0; padding: 0; }
.yayin {
  border-top: 1px solid var(--kenar);
  padding: var(--b4) 0;
  display: grid; gap: var(--b3);
  grid-template-columns: 1fr auto; align-items: start;
}
.yayin:last-child { border-bottom: 1px solid var(--kenar); }
.yayin__baslik { margin: 0 0 var(--b1); font-size: .9375rem; font-weight: 600; }
.yayin__alt { margin: 0; font-size: .8125rem; color: var(--metin-3); }
.yayin__alt span + span::before { content: " · "; }
.yayin__yil { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--metin-2); }

.etiket {
  display: inline-block; font-size: .6875rem; letter-spacing: .04em;
  text-transform: uppercase; padding: .1rem .4rem; border-radius: 3px;
  border: 1px solid var(--kenar); color: var(--metin-3); margin-right: .3rem;
}
.etiket--kanit { border-color: var(--basari); color: var(--basari); }
.etiket--olasi { border-color: var(--uyari); color: var(--uyari); }
.etiket--beyan { border-color: var(--birincil); color: var(--birincil); font-weight: 600; }

.secim { display: flex; gap: var(--b2); }
.secim button {
  font: inherit; font-size: .8125rem; cursor: pointer; white-space: nowrap;
  padding: .3rem .7rem; border-radius: var(--yuvarlak);
  border: 1px solid var(--kenar); background: var(--yuzey); color: var(--metin-2);
}
.secim button:hover { border-color: var(--kenar-guclu); color: var(--metin); }
.secim button:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.secim button[aria-pressed="true"][data-deger="1"] {
  border-color: var(--basari); background: var(--basari); color: #fff; font-weight: 600;
}
.secim button[aria-pressed="true"][data-deger="0"] {
  border-color: var(--kenar-guclu); background: var(--kenar-guclu);
  color: var(--metin); font-weight: 600;
}

@media (max-width: 640px) {
  .yayin { grid-template-columns: 1fr; }
  .kap { padding: 0 var(--b4); }
}