/* Portal bilesenleri: arama paleti, duyuru/kampanya/egitim kartlari, destek
   akisi ve sinav ekrani. Temel duzen panel.css icindedir. */

.palet-ortuk {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
  background: rgba(2, 6, 23, 0.55);
}

.palet {
  width: min(680px, 94vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--yuzey);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.35);
  overflow: hidden;
}

.palet-giris {
  display: flex;
  align-items: center;
  gap: var(--b3);
  padding: var(--b4);
  border-bottom: 1px solid var(--cizgi);
}

.palet-giris svg {
  width: 18px;
  height: 18px;
  color: var(--soluk);
  flex: 0 0 auto;
}

.palet-giris input {
  flex: 1;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--metin);
}

.palet-sonuc {
  flex: 1;
  overflow-y: auto;
  padding: var(--b2);
}

.palet-bos {
  padding: var(--b5);
  text-align: center;
  color: var(--soluk);
  font-size: 13px;
}

.palet-satiri {
  display: grid;
  grid-template-columns: 110px 1fr;
  grid-template-areas: "tur baslik" "tur alt";
  gap: 0 var(--b3);
  width: 100%;
  padding: var(--b2) var(--b3);
  border: 0;
  border-radius: var(--r-kucuk);
  background: transparent;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}

.palet-satiri:hover,
.palet-satiri.secili {
  background: var(--mavi-acik);
}

.palet-tur {
  grid-area: tur;
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mavi);
}

.palet-baslik {
  grid-area: baslik;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--metin);
}

.palet-satiri .palet-alt {
  grid-area: alt;
  font-size: 12px;
  color: var(--soluk);
}

.palet > .palet-alt {
  display: flex;
  gap: var(--b4);
  padding: var(--b2) var(--b4);
  border-top: 1px solid var(--cizgi);
  background: var(--yuzey-alt);
  font-size: 11.5px;
  color: var(--soluk);
}

.palet > .palet-alt kbd {
  padding: 1px 5px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
}

.duyuru-izgarasi,
.kampanya-izgarasi,
.egitim-izgarasi,
.sertifika-izgarasi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--b3);
}

.duyuru-karti,
.kampanya-karti,
.egitim-karti {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk);
  background: var(--yuzey);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.duyuru-karti:hover,
.kampanya-karti:hover,
.egitim-karti:hover {
  border-color: var(--mavi-parlak);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
}

.duyuru-karti.onemli {
  border-inline-start: 3px solid var(--uyari);
}

.duyuru-karti.okunmamis {
  background: var(--mavi-acik);
}

.duyuru-gorsel,
.kampanya-gorsel,
.egitim-gorsel {
  height: 128px;
  background: var(--yuzey-alt);
}

.duyuru-gorsel img,
.kampanya-gorsel img,
.egitim-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bos-gorsel {
  background: linear-gradient(135deg, var(--murekkep-orta), var(--mavi));
}

.duyuru-govde,
.kampanya-govde,
.egitim-govde {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--b3);
}

.duyuru-govde h3,
.kampanya-govde h3,
.egitim-govde h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.duyuru-govde p,
.kampanya-govde p,
.egitim-govde p {
  margin: 0;
  font-size: 12.5px;
  color: var(--soluk);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.duyuru-ust,
.kampanya-ust,
.egitim-ust {
  display: flex;
  align-items: center;
  gap: var(--b2);
}

.duyuru-alt,
.kampanya-alt,
.egitim-alt {
  font-size: 11.5px;
  color: var(--soluk);
}

.kampanya-alt.uyarili {
  color: var(--uyari);
  font-weight: 600;
}

.kampanya-deger {
  margin-inline-start: auto;
  font-weight: 700;
  color: var(--mavi);
  font-size: 13px;
}

.nokta {
  width: 8px;
  height: 8px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--mavi-parlak);
}

.duyuru-detay-gorsel {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--r-kucuk);
  margin-bottom: var(--b3);
}

.duyuru-ozet {
  font-weight: 600;
  color: var(--metin);
}

.duyuru-metin p {
  margin: 0 0 var(--b3);
  line-height: 1.6;
}

.duyuru-detay-ust {
  display: flex;
  align-items: center;
  gap: var(--b2);
  margin-bottom: var(--b3);
}

.ana-ikili {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--b3);
}

.is-listesi {
  margin: 0;
  padding: 0;
  list-style: none;
}

.is-listesi li + li {
  border-top: 1px solid var(--cizgi);
}

.is-listesi button {
  display: flex;
  align-items: center;
  gap: var(--b3);
  width: 100%;
  padding: var(--b3) 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--metin);
  cursor: pointer;
}

.is-listesi button b {
  margin-inline-start: auto;
  font-size: 15px;
}

.is-listesi li.uyarili button b {
  color: var(--uyari);
}

.ilerleme-cubugu {
  height: 8px;
  border-radius: 999px;
  background: var(--cizgi);
  overflow: hidden;
}

.ilerleme-cubugu .yatay {
  display: block;
  height: 100%;
  background: var(--mavi-parlak);
}

.ilerleme-metni {
  margin: var(--b2) 0;
  font-size: 12.5px;
  color: var(--soluk);
}

.hizli-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--b3);
}

.hizli-kutu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--b3);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk);
  background: var(--yuzey);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}

.hizli-kutu:hover {
  border-color: var(--mavi-parlak);
  background: var(--yuzey-alt);
}

.hizli-kutu strong {
  font-size: 13.5px;
}

.hizli-kutu span {
  font-size: 12px;
  color: var(--soluk);
}

.destek-detay {
  display: flex;
  flex-direction: column;
  gap: var(--b3);
}

.destek-ust {
  display: flex;
  align-items: center;
  gap: var(--b2);
  flex-wrap: wrap;
}

.mesaj-akisi {
  display: flex;
  flex-direction: column;
  gap: var(--b3);
  max-height: 46vh;
  overflow-y: auto;
  padding: var(--b3);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk);
  background: var(--yuzey-alt);
}

.mesaj {
  max-width: 82%;
  padding: var(--b3);
  border-radius: var(--r-kucuk);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
}

.mesaj.bayi {
  align-self: flex-end;
  background: var(--mavi-acik);
  border-color: #bae6fd;
}

.mesaj-ust {
  display: flex;
  align-items: baseline;
  gap: var(--b2);
  margin-bottom: 4px;
  font-size: 12px;
}

.mesaj-govde p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.55;
}

.mesaj-gorsel {
  max-width: 100%;
  max-height: 220px;
  border-radius: var(--r-kucuk);
  margin-top: var(--b2);
}

.rozet.oncelik-kritik {
  background: var(--tehlike-zemin);
  color: var(--tehlike);
}

.rozet.oncelik-yuksek {
  background: var(--uyari-zemin);
  color: var(--uyari);
}

.rozet.acik {
  background: var(--mavi-acik);
  color: var(--mavi-koyu);
}

.rozet.merkezyanitladi,
.rozet.cozuldu {
  background: var(--basari-zemin);
  color: var(--basari);
}

.rozet.kapandi {
  background: var(--cizgi);
  color: var(--soluk);
}

.ders-listesi {
  margin: var(--b3) 0;
  padding: 0;
  list-style: none;
}

.ders-listesi li + li {
  border-top: 1px solid var(--cizgi);
}

.ders-listesi button {
  display: flex;
  align-items: center;
  gap: var(--b3);
  width: 100%;
  padding: var(--b3) 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--metin);
  text-align: start;
  cursor: pointer;
}

.ders-sira {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cizgi);
  font-size: 12px;
  font-weight: 700;
}

.ders-listesi li.tamam .ders-sira {
  background: var(--basari-zemin);
  color: var(--basari);
}

.ders-baslik {
  flex: 1;
}

.ders-sure {
  font-size: 12px;
  color: var(--soluk);
}

.sinav-listesi {
  margin: 0;
  padding: 0 0 0 var(--b4);
}

.sinav-listesi li {
  margin-bottom: var(--b4);
}

.soru-metni {
  display: flex;
  gap: var(--b2);
  font-weight: 600;
  margin: 0 0 var(--b2);
}

.soru-sira {
  color: var(--mavi);
}

.secenekler {
  display: flex;
  flex-direction: column;
  gap: var(--b2);
}

.secenek {
  display: flex;
  align-items: center;
  gap: var(--b2);
  padding: var(--b2) var(--b3);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk);
  cursor: pointer;
}

.secenek:hover {
  border-color: var(--mavi-parlak);
  background: var(--yuzey-alt);
}

.sinav-sonucu {
  display: flex;
  flex-direction: column;
  gap: var(--b3);
}

.puan-kutusu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--b5);
  border-radius: var(--r-kucuk);
  background: var(--yuzey-alt);
}

.puan-kutusu b {
  font-size: 44px;
  line-height: 1;
}

.sinav-sonucu.basarili .puan-kutusu {
  background: var(--basari-zemin);
  color: var(--basari);
}

.sinav-sonucu.basarisiz .puan-kutusu {
  background: var(--tehlike-zemin);
  color: var(--tehlike);
}

.sonuc-listesi {
  margin: 0;
  padding: 0 0 0 var(--b4);
  max-height: 34vh;
  overflow-y: auto;
}

.sonuc-listesi li {
  margin-bottom: var(--b2);
  padding-inline-start: var(--b2);
  border-inline-start: 3px solid var(--cizgi);
}

.sonuc-listesi li.dogru {
  border-inline-start-color: var(--basari);
}

.sonuc-listesi li.yanlis {
  border-inline-start-color: var(--tehlike);
}

.sertifika-serit {
  padding: var(--b3);
  border-radius: var(--r-kucuk);
  background: var(--basari-zemin);
  color: var(--basari);
}

.sertifika-karti {
  display: flex;
  flex-direction: column;
  gap: var(--b2);
  padding: var(--b4);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk);
  background: linear-gradient(135deg, var(--yuzey), var(--mavi-acik));
}

.sertifika-rozet {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mavi);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sertifika-karti h3 {
  margin: 0;
  font-size: 15px;
}

.sertifika-alt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--soluk);
}

.suzgec {
  height: 32px;
  padding: 0 var(--b2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk);
  background: var(--yuzey);
  font-family: inherit;
  font-size: 13px;
  color: var(--metin);
}

@media (max-width: 720px) {
  .palet-satiri {
    grid-template-columns: 1fr;
    grid-template-areas: "tur" "baslik" "alt";
  }

  .mesaj {
    max-width: 100%;
  }
}