/* Tema değerleri ydsacademy.com (Eduma child) temasından alınmıştır.
   Tek yerden değiştirilebilir; bileşenler doğrudan hex kullanmaz. */
:root {
  --marka: #ffb606;
  --marka-koyu: #e6a303;
  --metin-baslik: #333333;
  --metin-govde: #666666;
  --metin-soluk: #999999;
  --kenarlik: #eeeeee;
  --kenarlik-guclu: #dddddd;
  /* Sütun ayırıcısı. Dikey çizgi yatay olandan daha baskın algılanır; bu
     yüzden satır çizgisinden bir tık soluk ama zebra zeminde de seçilebilir. */
  --kenarlik-sutun: #ebebe8;
  --yuzey: #ffffff;
  --yuzey-ikincil: #f7f7f7;
  --yuzey-zebra: #f6f6f4;
  --yuzey-vurgu: #fff8e6;

  /* Yakın duran yüzeyleri (kart, satır, panel) birbirinden ayırmak için
     kenarlık yerine hafif gölge: kalabalık tabloda daha az çizgi gürültüsü. */
  --golge-kucuk: 0 1px 2px rgba(24, 24, 27, 0.05);
  --golge-orta: 0 2px 6px rgba(24, 24, 27, 0.07);
  --yarical: 4px;
  /* Grup başlığı satırının yüksekliği; sütun başlıkları buna göre yapışır. */
  --grup-satir: 26px;
  --genislik: 1170px;
  /* Uzun satır okumayı yorar; metin bu ölçüde sarılır, tablolar sarılmaz. */
  --metin-olcusu: 900px;

  /* Montserrat bir display yüzü: başlıkta karakterli, 13 px yoğun tabloda
     okunaksız (geniş harfler, düşük x-yüksekliği). Marka kimliği başlıklarda
     korunur; gövde ve tablo, ekranda okumak için tasarlanmış sistem yüzüne
     geçer. Ek font indirmesi de olmaz. */
  --font-baslik: Montserrat, system-ui, sans-serif;
  --font-govde: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* dataviz validator ile doğrulanmış durum paleti (CVD ΔE 15.5-24).
     Amber kontrastı 1.71 olduğundan yalnız dolgulu rozette koyu metinle kullanılır. */
  --durum-guvenli: #2e7d32;
  --durum-hedef: #ffb606;
  --durum-riskli: #d84315;
  --durum-uzak: #78909c;

  /* Veri mürekkebi: yön programların %76'sında aynı olduğu için sparkline
     renkle kodlanmaz, nötr kalır. */
  --veri-cizgi: #607d8b;
  --veri-vurgu: #ffb606;
  --veri-soluk: #cfd8dc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-govde);
  font-size: 14px;
  line-height: 1.55;
  color: var(--metin-govde);
  background: var(--yuzey);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .sekmeler button, .tablo th, .robot-kart-sayi {
  font-family: var(--font-baslik);
}

/* Veriye tüm genişlik, metne okunabilir ölçü. Varsayılan görünüm 1403 px
   ister; 1170 px kapta yatay kaydırma zorunluydu. Metin ortalanmaz, sola
   hizalı kalır — ortalanınca tam genişlikteki tablonun sol kenarıyla hizası
   bozuluyor. */
#app { max-width: none; margin: 0; padding: 0 16px 40px; }

.baslik h1,
.ozet,
.panel-not,
.robot-not,
.bos-durum {
  max-width: var(--metin-olcusu);
}

.baslik { padding: 20px 0 12px; }
.baslik h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--metin-baslik);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ozet { margin: 4px 0 0; font-size: 13px; color: var(--metin-soluk); }

.sekmeler {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-bottom: 2px solid var(--kenarlik);
  position: sticky;
  top: 0;
  background: var(--yuzey);
  z-index: 4;
}
.sekmeler button {
  appearance: none;
  border: 0;
  background: transparent;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--metin-govde);
  padding: 10px 15px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  border-radius: var(--yarical) var(--yarical) 0 0;
  margin-bottom: -2px;
  transition: background-color 0.12s ease, color 0.12s ease;
}
/* Aktif sekme yalnız alt çizgiyle işaretlenince gözden kaçıyordu; dolgu,
   koyu metin ve kalın çizgi birlikte kullanılır. */
.sekmeler button[aria-selected="true"] {
  color: var(--metin-baslik);
  background: var(--yuzey-vurgu);
  border-bottom-color: var(--marka);
  font-weight: 700;
}
.sekmeler button:hover:not([aria-selected="true"]) {
  color: var(--metin-baslik);
  background: var(--yuzey-ikincil);
}
.sekmeler::-webkit-scrollbar { display: none; }
.sekmeler button:hover { color: var(--metin-baslik); }

:focus-visible {
  outline: 2px solid var(--marka-koyu);
  outline-offset: 2px;
}

/* `display` tanımlayan her sınıf kuralı, tarayıcının `[hidden] { display: none }`
   kuralıyla aynı özgüllükte; sonradan geldiği için onu eziyor ve gizli eleman
   görünmeye/tıklamayı engellemeye devam ediyor. Tek yerden bağlanır. */
[hidden] { display: none !important; }

.panel { padding-top: 12px; }

.hata {
  margin: 24px 0;
  padding: 16px;
  border: 1px solid var(--kenarlik-guclu);
  border-left: 3px solid var(--durum-riskli);
  border-radius: var(--yarical);
  background: var(--yuzey-ikincil);
  color: var(--metin-baslik);
}
.hata button {
  margin-top: 8px;
  font: inherit;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--kenarlik-guclu);
  border-radius: var(--yarical);
  background: var(--yuzey);
  cursor: pointer;
}

.bos-durum { padding: 32px 8px; color: var(--metin-soluk); }

/* ---- filtreler ---- */

.filtreler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px;
  background: var(--yuzey-ikincil);
  border-radius: var(--yarical);
  margin-bottom: 10px;
}
.arama {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--kenarlik-guclu);
  border-radius: var(--yarical);
  min-width: 240px;
  flex: 1 1 240px;
}
.filtre-sec {
  font: inherit;
  font-size: 13px;
  padding: 7px 8px;
  border: 1px solid var(--kenarlik-guclu);
  border-radius: var(--yarical);
  background: var(--yuzey);
  max-width: 190px;
}

/* ---- aranabilir çoklu seçim ---- */
/* 163 üniversite bir <select> içinde kullanılabilir değil: aranamıyor ve tek
   seçime zorluyor. */

.secim { position: relative; }
.secim-dugme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  padding: 7px 8px;
  border: 1px solid var(--kenarlik-guclu);
  border-radius: var(--yarical);
  background: var(--yuzey);
  color: var(--metin);
  cursor: pointer;
  max-width: 200px;
}
.secim-dugme:hover { border-color: var(--marka-koyu); }
.secim-metin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secim-ok { margin-left: auto; color: var(--metin-soluk); font-size: 10px; }

.secim.filtre-aktif .secim-dugme {
  border-color: var(--marka-koyu);
  border-width: 2px;
  padding: 6px 7px;
  background: var(--yuzey-vurgu);
  color: var(--metin-baslik);
  font-weight: 600;
}

.secim-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  width: 280px;
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px;
  background: var(--yuzey);
  border: 1px solid var(--kenarlik-guclu);
  border-radius: var(--yarical);
  box-shadow: var(--golge-orta);
}
.secim-ara {
  font: inherit;
  font-size: 13px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--kenarlik-guclu);
  border-radius: var(--yarical);
}
.secim-liste {
  max-height: 260px;
  overflow-y: auto;
  margin: 6px 0;
}
.secim-secenek {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 6px;
  font-size: 13px;
  line-height: 1.35;
  border-radius: var(--yarical);
  cursor: pointer;
}
.secim-secenek:hover { background: var(--yuzey-ikincil); }
.secim-secenek.secili { background: var(--yuzey-vurgu); font-weight: 600; color: var(--metin-baslik); }
.secim-secenek input { flex: none; }
.secim-bos { margin: 6px; font-size: 12px; color: var(--metin-soluk); }
.secim-temizle {
  font: inherit;
  font-size: 12px;
  width: 100%;
  padding: 5px;
  border: 1px solid var(--kenarlik-guclu);
  border-radius: var(--yarical);
  background: var(--yuzey);
  cursor: pointer;
}
.secim-temizle:disabled { opacity: 0.45; cursor: default; }

/* ---- yapışkan aktif filtre şeridi ---- */
/* Filtre kutusu sayfanın tepesinde kalıyor; kullanıcı tabloya inince hangi
   süzgeçlerin açık olduğunu göremiyordu. */

.filtre-ozet {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: var(--yuzey-vurgu);
  border: 1px solid var(--marka);
  border-radius: var(--yarical);
  box-shadow: var(--golge-orta);
}
.filtre-ozet-baslik {
  font-weight: 700;
  font-size: 13px;
  color: var(--metin-baslik);
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.filtre-rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  padding: 3px 8px;
  max-width: 260px;
  border: 1px solid var(--marka-koyu);
  border-radius: 999px;
  background: var(--yuzey);
  color: var(--metin-baslik);
  cursor: pointer;
}
.filtre-rozet > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtre-rozet:hover { background: var(--marka); }
.filtre-rozet-carpi { font-size: 14px; line-height: 1; color: var(--metin-soluk); }
.filtre-rozet:hover .filtre-rozet-carpi { color: var(--metin-baslik); }
.filtre-ozet-temizle {
  font: inherit;
  font-size: 12px;
  margin-left: auto;
  padding: 3px 8px;
  border: 0;
  background: transparent;
  color: var(--metin-baslik);
  text-decoration: underline;
  cursor: pointer;
}

/* ---- başa dön ---- */

.yukari {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  width: 44px;
  height: 44px;
  border: 1px solid var(--marka-koyu);
  border-radius: 50%;
  background: var(--marka);
  color: var(--metin-baslik);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--golge-orta);
}
@media screen and (max-width: 767px) {
  .yukari:not([hidden]) { display: block; }
}
.filtre-onay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.filtre-sayac {
  margin-left: auto;
  font-weight: 600;
  font-size: 13px;
  color: var(--metin-baslik);
  font-variant-numeric: tabular-nums;
}

/* ---- sütun grupları ---- */

.sutun-gruplari { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.grup-dugme {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border: 1px solid var(--kenarlik-guclu);
  border-radius: 999px;
  background: var(--yuzey);
  color: var(--metin-govde);
  cursor: pointer;
}
.grup-dugme:hover { border-color: var(--marka-koyu); }
.grup-dugme[aria-pressed="true"] {
  background: var(--marka);
  border-color: var(--marka);
  color: var(--metin-baslik);
}

/* ---- tablo ---- */

.tablo-sarmal {
  max-height: 640px;
  overflow: auto;
  border: 1px solid var(--kenarlik);
  border-radius: var(--yarical);
  box-shadow: var(--golge-kucuk);
}

/* Sabit düzen: genişlikler <colgroup>'tan gelir ve bağlayıcıdır. Otomatik
   düzende sütunlar içeriğe göre genişliyor, sanal kaydırma pencereyi
   değiştirdikçe oynuyor ve donuk sütunların hesaplanmış sol offsetleri
   tutmuyordu. Sondaki genişliksiz sütun artan yeri yutar. */
.tablo {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13.5px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  width: max-content;
  min-width: 100%;
}
/* .tablo th/td dolgusundan daha spesifik olmak zorunda: yer yoksa sıfır
   genişliğe inebilmeli. Sondaki artık alan sütun sayılmaz, ayırıcı almaz. */
.tablo .dolgu-hucre { padding: 0; border-right: 0; }

.tablo th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--marka);
  color: var(--metin-baslik);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-align: left;
  padding: 10px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-bottom: 1px solid var(--marka-koyu);
  /* Amber zeminde ayırıcı beyaz olmalı; koyu çizgi bandı böler. */
  border-right: 1px solid rgba(255, 255, 255, 0.55);
}
.tablo th.sag, .tablo td.sag { text-align: right; }
.tablo td.sag { color: var(--metin-baslik); }

/* Açıklaması olan başlık noktalı alt çizgiyle işaretlenir; yoksa tooltip'in
   varlığı görünmez kalıyor. Üzerine gelince belirginleşir. */
.tablo th.aciklamali .baslik-metin { border-bottom: 1px dotted rgba(74, 54, 0, 0.5); }
.tablo th.aciklamali:hover .baslik-metin { border-bottom-color: var(--metin-baslik); }

/* Sıralama oku hücrenin sağ dolgusuna arka plan olarak çizilir; metne eklenen
   bir işaret sabit genişliği aşıp başlığın kendisini kırpardı. */
.tablo th.sirali {
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 7px 7px;
}
.tablo th.sirali-artan {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 1 7.5 7h-7z' fill='%234a3600'/%3E%3C/svg%3E");
}
.tablo th.sirali-azalan {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 7 .5 1h7z' fill='%234a3600'/%3E%3C/svg%3E");
}

/* Satır yüksekliği SABİT olmak zorunda: sanal kaydırma dolgu yüksekliklerini
   bu değerden hesaplıyor. Uzun üniversite/bölüm adları iki satıra kırpılır,
   tamamı çekmecede ve başlık ipucunda görünür. */
.tablo td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--kenarlik);
  border-right: 1px solid var(--kenarlik-sutun);
  vertical-align: middle;
  height: 56px;
  max-height: 56px;
  background: var(--yuzey);
  overflow: hidden;
}

.tablo td.donuk .kirp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  color: var(--metin-baslik);
}

.tablo th.donuk, .tablo td.donuk { position: sticky; z-index: 1; }
.tablo th.donuk { z-index: 3; }
/* left offseti table.js inline yazar; sütun kümesi değiştikçe yeniden hesaplanır.
   Ayırıcı çizgiyi artık border-right veriyor; yalnız donuk bloğun son sütunu
   kayan içeriğe karşı daha güçlü bir gölge taşır. */
/* Donuk bloğun son sütunu: kayan içeriğin kenarda yarım kesilmesi bir hata gibi
   görünüyor; gölge sınırı belirginleştirip kaydırmayı okunur kılar. */
.tablo td.donuk-son { box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.22); }
.tablo th.donuk-son { box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.28); }

/* ---- kapsayıcı grup başlığı ---- */
/* Sütun grubu düğmeleri sütunları tablonun sonuna ekliyor; hangi düğmenin
   neyi getirdiği başlıkta yazmazsa kullanıcı ilişkiyi kuramıyor. */

.grup-satiri th {
  height: var(--grup-satir);
  padding: 0 12px;
  background: var(--marka-koyu);
  border-bottom: 0;
  /* Grup sınırını aşağıdaki grup-baslangic çizgisi işaretliyor; sütun
     ayırıcısı burada ikinci bir çizgi olurdu. */
  border-right: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a3600;
  cursor: default;
}
/* Etiket sticky; sınırı hücrenin kendisi olduğu için grup ekrandan çıkınca
   birlikte kayar. left değerini table.js donuk blok genişliğinden yazar. */
.grup-satiri .grup-etiket { position: sticky; display: inline-block; }
/* Grup sınırı yalnız yeni grup başlarken çizilir: çekirdek donuk sınırında
   ikiye bölünüyor, iki parça arasında çizgi olsa iki grup gibi görünürdü. */
.grup-satiri th.grup-baslangic { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.6); }
.grup-satiri th.donuk.donuk-son { box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.28); }

/* İkinci başlık satırı grup satırının altına yapışır. Bitişik kardeş seçici
   şart: tek satırlı tablolarda (Listem, Netler) bu kaydırma uygulanmamalı. */
.grup-satiri + .sutun-satiri th { top: var(--grup-satir); }

@keyframes grup-parlat {
  from { background: #fff3cd; }
  to { background: var(--marka-koyu); }
}
.grup-satiri th.grup-yeni { animation: grup-parlat 1.4s ease-out; }

.tablo tbody tr { cursor: pointer; }
/* Netler tablosunda satır tıklanabilir değil; imleç öyle söylememeli. */
.tablo-durgun tbody tr, .tablo-durgun th { cursor: default; }
/* Zebra sırası JS'ten geliyor: sanal kaydırma dolgu satırları eklediği için
   nth-child güvenilmez. */
.tablo tbody tr.cift td { background: var(--yuzey-zebra); }
.tablo tbody tr:hover td,
.tablo tbody tr:focus-visible td { background: var(--yuzey-vurgu); }

.soluk { color: var(--metin-soluk); }
.yil-not { font-size: 10px; color: var(--metin-soluk); margin-left: 4px; }
.doluluk-metin { margin-left: 6px; font-size: 12px; }
.tahmin-aralik { font-weight: 600; color: var(--metin-baslik); }

.rozet {
  display: inline-block;
  margin: 2px 4px 0 0;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--yuzey-ikincil);
  color: var(--metin-govde);
  border: 1px solid var(--kenarlik-guclu);
  white-space: nowrap;
}
.rozet-uyari { background: #fff3e0; border-color: #ffcc80; color: #8a4b08; }

/* ---- grafikler ---- */

.sparkline { display: block; }

.doluluk {
  display: inline-block;
  width: 44px;
  height: 6px;
  border-radius: 3px;
  background: var(--kenarlik);
  overflow: hidden;
  vertical-align: middle;
}
.doluluk-dolu { display: block; height: 100%; }
.doluluk-tam .doluluk-dolu { background: var(--durum-uzak); }
.doluluk-eksik .doluluk-dolu { background: var(--durum-hedef); }

.bant { display: block; }

/* ---- çekmece ---- */

/* Perde odağı çekmeceye topluyor ve kapanmanın üçüncü yolunu veriyor. */
.cekmece-perde {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: rgba(24, 24, 27, 0.28);
}
/* Çekmece açıkken arkadaki sayfa kaymaz ve başa dön düğmesi görünmez. */
.cekmece-acik { overflow: hidden; }
.cekmece-acik .yukari { display: none !important; }

.cekmece {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(560px, 100%);
  background: var(--yuzey-ikincil);
  box-shadow: -14px 0 40px rgba(24, 24, 27, 0.18);
  overflow-y: auto;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

/* Başlık yapışkan: uzun içerikte hangi programa baktığınız kaybolmasın. */
.cekmece-baslik {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 14px;
  background: var(--yuzey);
  border-bottom: 1px solid var(--kenarlik);
  box-shadow: var(--golge-kucuk);
}
.cekmece-baslik-metin { min-width: 0; }
.cekmece h2 {
  margin: 0 0 3px;
  font-size: 17px;
  color: var(--metin-baslik);
  line-height: 1.35;
}
.cekmece-uni { margin: 0; font-size: 12.5px; color: var(--metin-govde); }
.cekmece-rozetler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.cekmece-kapat {
  flex: none;
  margin-left: auto;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: #d32f2f;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cekmece-kapat:hover { background: #fdecea; border-color: #f4b7b1; }
.cekmece-kapat:focus-visible { outline: 2px solid #d32f2f; outline-offset: 1px; }

.cekmece-ic { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

/* Bölümler kart: kalabalık listede nerede bitip nerede başladıkları belli olsun. */
.cekmece-bolum {
  background: var(--yuzey);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: var(--golge-kucuk);
}
.cekmece h3 {
  margin: 0 0 10px;
  padding-left: 9px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--metin-baslik);
  border-left: 3px solid var(--marka);
  line-height: 1.2;
}
.cekmece-not { margin: 10px 0 0; font-size: 11.5px; color: var(--metin-soluk); line-height: 1.5; }
.tahmin-satir { margin: 0; font-size: 15px; font-weight: 600; color: var(--metin-baslik); }

/* En çok bakılan üç sayı, listeye inmeden görünsün. */
/* minmax(0,…) şart: `1fr` içeriğin min genişliğinin altına inemediği için
   uzun etiketli kutu diğerlerini eziyordu. */
.olcutler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.olcut {
  background: var(--yuzey);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--golge-kucuk);
  border-top: 3px solid var(--marka);
}
.olcut-etiket { display: block; font-size: 10.5px; color: var(--metin-soluk); text-transform: uppercase; letter-spacing: 0.04em; }
.olcut-deger {
  display: block;
  margin-top: 3px;
  font-family: var(--font-baslik);
  font-size: 19px;
  color: var(--metin-baslik);
  font-variant-numeric: tabular-nums;
}
.olcut-not { display: block; margin-top: 2px; font-size: 10.5px; color: var(--metin-soluk); }

.cekmece-trend { margin: 12px 0 0; }

.detay-liste { margin: 0; }
.detay-satir {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--kenarlik);
}
.detay-satir:last-child { border-bottom: 0; padding-bottom: 0; }
.detay-satir dt { color: var(--metin-soluk); font-size: 12px; }
.detay-satir dd {
  margin: 0;
  text-align: right;
  color: var(--metin-baslik);
  font-variant-numeric: tabular-nums;
}

/* Netler tablosu 7 sütun; dar çekmecede kart içinde kayar, çekmece taşmaz. */
.detay-sarmal { overflow-x: auto; }

.detay-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.detay-tablo th, .detay-tablo td {
  padding: 6px;
  border-bottom: 1px solid var(--kenarlik);
  text-align: right;
}
.detay-tablo tbody tr:last-child th, .detay-tablo tbody tr:last-child td { border-bottom: 0; }
.detay-tablo thead th {
  color: var(--metin-soluk);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.detay-tablo tbody th { text-align: left; font-weight: 600; color: var(--metin-baslik); }
.detay-tablo tbody tr:nth-child(even) td,
.detay-tablo tbody tr:nth-child(even) th { background: var(--yuzey-zebra); }

.kosul-govde { font-size: 12px; line-height: 1.6; }
.kosul-liste { margin: 0; padding-left: 18px; }
.kosul-liste li { margin-bottom: 8px; }
.kosul-liste li:last-child { margin-bottom: 0; }

/* ---- mobil kart görünümü ---- */

/* `screen and` şart: media type yazılmazsa kural `all` olur ve yazdırmayı da
   kapsar. Chrome sayfa kutusunu dar hesapladığında kâğıda kart düzeni basıyordu. */
@media screen and (max-width: 767px) {
  /* İframe içinde üç kaydırma katmanı oluyordu: sayfa, iframe, tablo kutusu.
     Mobilde sanal kaydırma zaten kapalı (MOBIL_LIMIT), iç kutuya gerek yok. */
  .tablo-sarmal { border: 0; max-height: none; overflow: visible; }
  /* Kesin tablo genişliği satır içi yazılıyor; kart düzeninde etkisiz kılınmalı. */
  .tablo { display: block; width: auto !important; }
  .tablo colgroup { display: none; }
  .tablo thead { display: none; }
  .tablo tbody, .tablo tr { display: block; width: auto; }
  .tablo tbody tr {
    border: 1px solid var(--kenarlik);
    border-radius: var(--yarical);
    padding: 12px 14px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: baseline;
    box-shadow: var(--golge-kucuk);
    background: var(--yuzey);
  }
  /* Kart görünümünde zebra satır değil kart zemini olur. */
  .tablo tbody tr.cift { background: var(--yuzey-zebra); }
  .tablo tbody tr.cift td { background: transparent; }
  /* Kart düzeninde sütun kavramı yok; artan yeri yutan dolgu hücresi boş bir
     satır olarak görünürdü. */
  .tablo .dolgu-hucre { display: none !important; }
  /* Listem tablosu genişliklerini hâlâ inline yazıyor; !important şart. */
  .tablo td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
    height: auto !important;
    max-height: none !important;
    border: 0;
    padding: 1px 0;
    position: static !important;
    text-align: left !important;
    box-shadow: none !important;
    grid-column: 2;
    font-size: 12px;
  }
  .tablo td.donuk .kirp {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
    font-size: inherit;
  }
  .tablo td::before {
    content: attr(data-baslik);
    display: inline-block;
    min-width: 88px;
    color: var(--metin-soluk);
    font-size: 11px;
  }
  /* İlk iki hücre kartın başlığı: etiketsiz ve tam genişlikte. */
  .tablo td:nth-child(-n + 2) { grid-column: 1 / -1; }
  .tablo td:nth-child(-n + 2)::before { content: ""; display: none; }
  .tablo td:first-child { font-size: 11px; color: var(--metin-soluk); text-transform: uppercase; letter-spacing: 0.02em; }
  .tablo td:nth-child(2) {
    font-size: 14px;
    font-weight: 600;
    color: var(--metin-baslik);
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--kenarlik);
  }
  .filtre-sec, .arama { max-width: none; width: 100%; }
  .secim { flex: 1 1 100%; }
  .secim-dugme { max-width: none; width: 100%; }
  .secim-panel { width: 100%; max-width: none; }
  .filtre-sayac { margin-left: 0; }
  .filtre-ozet-temizle { margin-left: 0; }
  .kismi-liste {
    padding: 12px;
    text-align: center;
    color: var(--metin-soluk);
    font-size: 12px;
    border: 1px dashed var(--kenarlik-guclu);
    border-radius: var(--yarical);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Tercih Robotu ---- */

.panel-not { margin: 8px 0 12px; font-size: 12px; color: var(--metin-soluk); }

.robot-giris {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 16px; margin: 12px 0 4px;
  background: var(--yuzey-ikincil);
  border-radius: var(--yarical);
  border-left: 3px solid var(--marka);
}
.robot-giris label { font-weight: 600; color: var(--metin-baslik); font-size: 13px; }
.robot-giris input {
  font: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
  padding: 8px 10px; width: 150px;
  border: 1px solid var(--kenarlik-guclu); border-radius: var(--yarical);
}
.robot-giris input[aria-invalid="true"] { border-color: var(--durum-riskli); }
.robot-not { flex: 1 1 100%; margin: 0; font-size: 12px; color: var(--metin-soluk); }

.robot-kartlar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.robot-kart {
  flex: 1 1 130px; text-align: left; cursor: pointer;
  padding: 10px 12px; font: inherit;
  border: 1px solid var(--kenarlik); border-left-width: 3px;
  border-radius: var(--yarical); background: var(--yuzey);
  box-shadow: var(--golge-kucuk);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.robot-kart:not(:disabled):hover { box-shadow: var(--golge-orta); }
.robot-kart:disabled { opacity: 0.45; cursor: default; }
.robot-kart[aria-pressed="true"] {
  background: var(--yuzey-vurgu);
  border-color: var(--marka-koyu);
  box-shadow: var(--golge-orta);
}
.robot-kart-sayi {
  display: block; font-size: 22px; font-weight: 700;
  color: var(--metin-baslik); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.robot-kart-etiket { display: block; font-size: 12px; font-weight: 600; }
.robot-kart-guvenli { border-left-color: var(--durum-guvenli); }
.robot-kart-hedef { border-left-color: var(--durum-hedef); }
.robot-kart-riskli { border-left-color: var(--durum-riskli); }
.robot-kart-uzak { border-left-color: var(--durum-uzak); }
.robot-kart-veriyok { border-left-color: var(--kenarlik-guclu); }

/* Rozet dolgu + ikon + metin taşır; renk asla tek sinyal değildir. */
.risk {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.risk-guvenli { background: var(--durum-guvenli); color: #fff; }
.risk-hedef { background: var(--durum-hedef); color: var(--metin-baslik); }
.risk-riskli { background: var(--durum-riskli); color: #fff; }
.risk-uzak { background: var(--durum-uzak); color: #fff; }
.risk-veriyok { background: var(--yuzey-ikincil); color: var(--metin-soluk); border: 1px solid var(--kenarlik-guclu); }

/* ---- özet tabloları ---- */

.ozet-tablo td { height: 40px; max-height: 40px; }
.ozet-tablo tbody tr:first-child td { font-weight: 600; color: var(--metin-baslik); }

/* ---- Kaç Net Gerekir? ---- */

.netler-kontrol { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.netler-kontrol label { font-weight: 600; font-size: 13px; color: var(--metin-baslik); }
.netler-girisleri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.net-giris { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--metin-soluk); }
.net-giris input {
  font: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
  width: 110px; padding: 6px 8px;
  border: 1px solid var(--kenarlik-guclu); border-radius: var(--yarical);
}
.fark-arti { color: var(--durum-guvenli); font-weight: 700; font-size: 11px; }
.fark-eksi { color: var(--durum-riskli); font-weight: 700; font-size: 11px; }

/* ---- Listem ---- */

.listem-arac { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.listem-arac .filtre-sayac { margin-left: 0; margin-right: auto; }

.yildiz {
  border: 0; background: transparent; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 2px 4px;
  color: var(--metin-soluk);
}
.yildiz-dolu { color: var(--marka-koyu); }

/* ---- Listem: tercih sırası ve manuel sıralama ---- */

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

.listem-ipucu {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--metin-soluk);
}

.listem-tablo td.listem-sira {
  cursor: grab;
  font-weight: 700;
  font-size: 14px;
  color: var(--metin-baslik);
  white-space: nowrap;
  user-select: none;
}
.listem-tablo td.listem-sira:active { cursor: grabbing; }
.listem-tutamak {
  color: var(--metin-soluk);
  margin-right: 4px;
  font-size: 12px;
}

.listem-tablo td.listem-yop {
  font-variant-numeric: tabular-nums;
  color: var(--metin-baslik);
}

.listem-tasi { white-space: nowrap; }
.listem-tasi button {
  border: 1px solid var(--kenarlik-guclu);
  background: var(--yuzey);
  border-radius: var(--yarical);
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  padding: 4px 3px;
  color: var(--metin-baslik);
}
.listem-tasi button:hover:not(:disabled) {
  border-color: var(--marka-koyu);
  background: var(--yuzey-vurgu);
}
.listem-tasi button:disabled { opacity: 0.3; cursor: default; }

.listem-tablo tr.surukleniyor td { opacity: 0.4; }
.listem-tablo tr.surukle-hedef td {
  background: var(--yuzey-vurgu) !important;
  box-shadow: inset 0 -2px 0 var(--marka-koyu);
}

/* Yalnız yazdırmada görünen künye. */
.yazdir-baslik { display: none; }

@media screen and (max-width: 767px) {
  /* Kart görünümünde ilk satır: tercih no, taşıma düğmeleri, yıldız. */
  .listem-tablo tbody tr { grid-template-columns: auto auto auto 1fr; }
  .listem-tablo td { grid-column: 1 / -1; }
  .listem-tablo td:nth-child(1),
  .listem-tablo td:nth-child(2),
  .listem-tablo td:nth-child(3) { grid-column: auto; width: auto !important; }
  .listem-tablo td:nth-child(1)::before,
  .listem-tablo td:nth-child(2)::before,
  .listem-tablo td:nth-child(3)::before { content: none; }
  .listem-tablo td:nth-child(1) {
    font-size: 16px; font-weight: 700;
    color: var(--marka-koyu); text-transform: none; letter-spacing: 0;
  }
  .listem-tablo td:nth-child(2) {
    font-size: inherit; font-weight: 400;
    margin-bottom: 0; padding-bottom: 0; border-bottom: 0;
  }
  .listem-tablo td:nth-child(5) {
    font-size: 14px; font-weight: 600; color: var(--metin-baslik);
    margin-top: 6px; padding-bottom: 6px; margin-bottom: 4px;
    border-bottom: 1px solid var(--kenarlik);
  }
  .listem-tablo td:nth-child(5)::before { content: none; }
  /* Dar kutuda 5 ondalıklı taban puanı 19 px'te sığmıyor. */
  .olcut { padding: 9px 10px; }
  .olcut-deger { font-size: 15px; }
  .listem-tasi button { padding: 6px 8px; font-size: 11px; }
  /* Dokunmatikte HTML5 sürükleme yok; sıralama ▲▼ ile yapılır. */
  .listem-tutamak { display: none; }
  .listem-tablo td.listem-sira { cursor: default; }
}

/* ---- yazdırma: A4 yatay, mizanpaj hazır ---- */

@page {
  size: A4 landscape;
  margin: 12mm 10mm 14mm;
}

@media print {
  html, body { background: #fff; }
  #app { max-width: none; padding: 0; margin: 0; }

  .baslik, .sekmeler, .filtreler, .filtre-ozet, .sutun-gruplari, .yukari,
  .listem-arac, .listem-ipucu,
  .robot-giris, .robot-kartlar, .cekmece, .cekmece-perde, .panel-not, .bos-durum,
  .listem-tutamak { display: none !important; }

  .yazdir-baslik {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6pt;
    padding-bottom: 4pt;
    border-bottom: 1pt solid #000;
    font-size: 10pt;
    color: #000;
  }
  .yazdir-baslik strong { font-family: var(--font-baslik); font-size: 13pt; }
  .yazdir-baslik span { font-size: 8.5pt; }

  /* Gizli sekmeler basılmasın: [hidden] kuralı ezilmemeli. */
  .panel[hidden] { display: none !important; }
  .tablo-sarmal {
    max-height: none; overflow: visible;
    border: 0; box-shadow: none;
  }

  /* Kâğıt her zaman tablodur: kart düzenini kuran hiçbir kural buraya sızmasın. */
  .tablo { display: table !important; }
  .tablo thead { display: table-header-group !important; }
  .tablo tbody { display: table-row-group !important; }
  .tablo tbody tr {
    display: table-row !important;
    border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important;
  }
  .tablo th, .tablo td { display: table-cell !important; }
  .tablo td::before { content: none !important; display: none !important; }

  /* Kâğıtta işlevsiz sütunlar. Yukarıdaki `.tablo td` sıfırlamasından daha
     spesifik olmak zorundalar, yoksa hücreler geri gelir. */
  .listem-tablo th.listem-tasi, .listem-tablo td.listem-tasi,
  .listem-tablo th.listem-yildiz, .listem-tablo td.listem-yildiz { display: none !important; }
  /* Kâğıtta genişlik içerikten gelir; colgroup ve dolgu sütunu devre dışı. */
  .tablo col { width: auto !important; }
  .tablo .dolgu-hucre { display: none !important; }

  /* Ekran genişlikleri inline yazılıyor; kâğıtta içerik kadar yer kaplasınlar. */
  .tablo {
    width: 100% !important;
    table-layout: auto;
    font-size: 8pt;
    border-collapse: collapse;
  }
  .tablo th, .tablo td {
    width: auto !important; min-width: 0 !important; max-width: none !important;
    height: auto !important; max-height: none !important;
    position: static !important; box-shadow: none !important;
    padding: 3pt 4pt;
    color: #000;
  }
  .tablo th {
    background: #ececec !important;
    border-bottom: 1pt solid #000;
    font-size: 7.5pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tablo td { border-bottom: 0.5pt solid #cccccc; border-right: 0.5pt solid #e2e2e2; }
  .tablo th { border-right: 0.5pt solid #ffffff; }
  /* Sayılar satır sonunda bölünmesin. */
  .tablo th.sag, .tablo td.sag, .listem-yop { white-space: nowrap; }
  .tablo tbody tr.cift td {
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Başlık her sayfada tekrarlansın, satırlar sayfaya bölünmesin. */
  .tablo thead { display: table-header-group; }
  .tablo tbody tr { break-inside: avoid; page-break-inside: avoid; }

  .listem-tablo td.listem-sira { font-size: 9pt; }
  .kirp {
    -webkit-line-clamp: unset; line-clamp: unset;
    display: block; max-height: none; overflow: visible;
  }
}

/* ---- aktif filtre vurgusu ---- */
/* Sekmeler arasında gezerken hangi süzgecin açık olduğu tahmin gerektirmemeli. */

.filtre-sec.filtre-aktif,
.arama.filtre-aktif {
  border-color: var(--marka-koyu);
  border-width: 2px;
  padding: 6px 7px;
  background: #fff8e6;
  color: var(--metin-baslik);
  font-weight: 600;
}
.arama.filtre-aktif { padding: 6px 9px; }

.filtre-onay.filtre-aktif {
  color: var(--metin-baslik);
  font-weight: 600;
  background: #fff8e6;
  border-radius: var(--yarical);
  padding: 3px 7px;
  margin: -3px -7px;
}

.grup-dugme-aktif {
  border-color: var(--marka-koyu);
  background: #fff8e6;
  color: var(--metin-baslik);
}

/* ---- odaklı mod alt şeridi ---- */
.odak-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px 0 4px;
  border-top: 1px solid var(--kenarlik);
  margin-top: 12px;
}
.odak-baglanti {
  font-size: 13px;
  color: var(--metin-baslik);
  text-decoration: none;
  border-bottom: 1px solid var(--marka);
  padding-bottom: 1px;
}
.odak-baglanti:hover { border-bottom-color: var(--marka-koyu); }