/* ============================================================
   `/coursecapacityisfull` - ODTÜ kayıt ekranının provası.

   ⚠️ RENKLER BURADA, `tokens.css`te DEĞİL - bilinçli tek istisna. Bu dosyadaki
   bordo/pembe ODTÜ'nün kayıt ekranının renkleridir; arşivin paletine karışsa
   tema değiştiğinde prova "düzelir" ve kopya olmaktan çıkardı. Yine de çıplak
   hex dağıtılmıyor: hepsi aşağıdaki `--dr-*` değişkenlerinde, tek yerde.

   ⚠️ Sayfa AÇIK TEMA. Arşivin kendisi koyu; prova ODTÜ'nün ekranının
   renkleriyle duruyor. `prefers-color-scheme` burada bilinçli olarak
   dinlenmiyor - koyu bir "kopya" gerçeğiyle karşılaştırılamaz.

   ⚠️ MEDYA SORGUSU YOK, bilinçli. Projenin geri kalanında tablolar telefonda
   karta dönüşüyor ve form alanları 16px'e çıkıyor; burada ikisi de YAPILMAZ.
   Kopyanın tek işi kayıt günü görülecek ekranı göstermek: yazı boyutu ya da
   sütun düzeni telefonda değişirse gösterdiği şey artık o ekran değil.
   Çerçeve her ekranda 800px; dar ekrana SIĞDIRMAYI `coursecapacityisfull.js`
   (`olceklendir`) tek parça `zoom` ile yapıyor.

   Özgün sayfa (`combined.css`) inline `style` ile hizalıyordu; CSP
   `style-src 'self'` inline stili bloklar, o yüzden her biri burada bir sınıf.
   ============================================================ */

:root {
  /* ODTÜ kayıt ekranının mürekkebi */
  --dr-bordo: #980000;
  --dr-bordo-acik: #ce8f7d;
  --dr-satir: #ebd7d7;
  --dr-metin: #333;
  --dr-cizgi: #e6eef0;
  --dr-gri: gray;
  --dr-beyaz: #fff;

  /* Provanın kendi ekleri */
  --dr-hata: #d00;
  --dr-zemin: #ccbbbb;
  --dr-anlatim-zemin: #f6f4f4;
  --dr-anlatim-cizgi: #e3dada;
  --dr-anlatim-metin: #2a2529;
  --dr-anlatim-silik: #5d545a;

  --dr-yazi: "Trebuchet MS", "Lucida Sans Unicode", Arial, sans-serif;
  --dr-anlatim-yazi: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* `hidden` özniteliği sınıfların `display`ını her zaman yener (CLAUDE.md). */
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--dr-metin);
  font: 13px var(--dr-yazi);
  /* Zemin ODTÜ'nün ekranındaki renk: çerçevenin beyazı ancak bu zeminin
     üstünde "bir pencere" gibi duruyor, beyaz-üstü-beyazda kaybolmuyor. */
  background: var(--dr-zemin);
  text-align: center;
}

/* --- Köşedeki çıkış --------------------------------------------------- */

.dr-donus {
  position: absolute;
  top: 10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px var(--dr-anlatim-yazi);
  color: var(--dr-anlatim-silik);
  text-decoration: none;
}

.dr-donus:hover { color: var(--dr-bordo); }

.dr-rozet {
  padding: 1px 6px;
  border: 1px solid var(--dr-bordo);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--dr-bordo);
}

.dr-noscript {
  margin: 0;
  padding: 10px;
  background: var(--dr-satir);
  font-weight: bold;
}

/* --- Çerçeve (özgün `combined.css`) ----------------------------------- */

/* ⚠️ Kopya 800px SABİT. Genişliği ekrana uydurmak sütunları sıkıştırıp
   "Course Code"u iki satıra bölüyordu - gerçek ekranda öyle görünmüyor ve
   prova tam da o görüntü için var. Dar ekranda çerçeve tek parça küçültülür
   (`coursecapacityisfull.js` → `olceklendir`); `overflow-x` yalnızca ölçeklemenin
   çalışmadığı tarayıcıda (eski Firefox'ta `zoom` yok) kırpma yerine kaydırma
   bırakan emniyet ağı. */
.dr-kaydirici {
  overflow-x: auto;
  /* ⚠️ Üst boşluk ÇERÇEVENİN DIŞINDA. `#container`ın kendi `margin-top`u
     `zoom` ile birlikte küçülüyordu (telefonda 40px → 19px) ve köşedeki
     "PROVA" bağlantısı çerçevenin altında kalıyordu. Şerit ölçeklenmiyor,
     boşluk her ekranda aynı. */
  padding: 40px 0 2px;
}

#container {
  width: 800px;
  margin: 0 auto;
  background: var(--dr-beyaz);
  text-align: left;
  line-height: 130%;
  box-sizing: border-box;
}

#header {
  padding-left: 10px;
  background-color: var(--dr-bordo);
  color: var(--dr-beyaz);
  height: 55px;
  font: bold 30px var(--dr-yazi);
  text-align: center;
}

#footer {
  padding: 10px 10px 1px;
  color: var(--dr-beyaz);
  text-align: center;
  font-size: 14px;
  background-color: var(--dr-bordo);
}

#single_content {
  width: 100%;
  background: var(--dr-beyaz);
  text-align: center;
}

/* Bordo köşe şeritleri: özgün sayfada köşe görselleriydi, görseller
   kaldırılınca düz renk kaldı - kopyada da öyle duruyor. */
.tl_hf, .bl_hf, .tl, .bl { margin-right: 11px; }
.tr_hf, .br_hf, .tr, .br { margin-top: -11px; margin-left: 11px; }

.tl_hf, .tr_hf, .bl_hf, .br_hf, .tl, .tr, .bl, .br {
  height: 11px;
  font-size: 2px;
  background-color: var(--dr-bordo);
}

.dr-logo {
  position: relative;
  float: left;
}

.dr-baslik {
  position: relative;
  left: -35px;
  top: 5px;
}

/* Başlığın yanındaki PROVA rozeti: bordo zeminde başlığın kendi beyazı.
   Yazı boyutu başlığa göre (`em`) - çerçeve tek parça ölçekleniyor. */
.dr-prova-rozeti {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 8px;
  border: 2px solid var(--dr-beyaz);
  border-radius: 999px;
  font-size: 0.42em;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: var(--dr-beyaz);
}

.dr-footer-yazi {
  position: relative;
  top: -4px;
}

.dr-footer-logo {
  position: relative;
  top: 5px;
}

td.seperator { border-right: 1px solid var(--dr-cizgi); }

td { font: 13px var(--dr-yazi); }

/* ⚠️ TABLO HÜCRELERİ SOLA HİZALI. Gerçek sayfa "quirks mode"da çalışıyor
   (DOCTYPE'ında adres yok) ve o kipte tablolar gövdenin `text-align: center`ını
   miras almıyor. Kopya standart kipte; bu kural olmadan her hücre ortalanıyor,
   değerler etiketlerinden kopuyor, "Add Course" ve "Change Section" düğmeleri
   kutularının altında değil ortasında duruyordu (gerçek ekran görüntüsüyle
   ölçüldü). Kural HÜCREYE değil TABLOYA yazılı: `<td align="right">` gibi
   öznitelikler hücrenin kendisine uygulanıyor ve miras aldığı değeri yeniyor. */
#container table { text-align: left; }

a:link, a:visited, a:active {
  font-weight: bold;
  color: var(--dr-bordo);
  text-decoration: none;
}

a:hover { color: var(--dr-bordo-acik); }

input, textarea, select { border: 1px solid var(--dr-gri); }

/* Düğme ve açılır kutu, tarayıcının kendi görünümünde kalıyor: özgün ekran
   2008'den kalma ve düğmeler orada da işletim sisteminin varsayılanı. */
input[type="submit"] { border: 1px solid var(--dr-gri); font: 13px var(--dr-yazi); }

/* ⚠️ Genişlik İÇERİK kutusu (`content-box`), 680px + tarayıcının kendi dolgusu
   ≈ 700px - gerçek ekranda ölçülen kutu. `border-box` ile 680'e sıkışıp
   içindeki alanlar sola kayıyordu. */
fieldset {
  border: 1px solid var(--dr-gri);
  width: 680px;
  margin: 0 auto;
}

legend {
  /* ⚠️ `text-align: left` ŞART. Kopyanın gövdesi ortalı (`#single_content`) ve
     legend o hizayı miras alıp kutunun ORTASINDA duruyordu; gerçek ekranda
     kutunun sol üst köşesinde. Kutuları "yamuk" gösteren şey buydu. */
  text-align: left;
  padding: 2px 5px;
  border: 1px solid var(--dr-bordo);
  font-size: 90%;
  font-weight: bold;
  color: var(--dr-beyaz);
  background-color: var(--dr-bordo);
}

div.formContainer {
  width: 100%;
  text-align: center;
  margin-bottom: 16px;
}

div.form {
  margin-left: 10px;
  margin-right: 10px;
}

div.fieldsetContainer { margin: 10px; }

td.label {
  font-weight: bold;
  text-align: right;
  padding-right: 15px;
  vertical-align: middle;
}

td.label label { font-weight: bold; }

div.logout {
  text-align: right;
  padding: 0 10px 6px 0;
}

#formmessage {
  margin: 16px 40px;
  min-height: 24px;
  text-align: center;
  font: bold 20px var(--dr-yazi);
  color: var(--dr-hata);
}

/* ⚠️ HER MESAJ KIRMIZI, gerçek ekrandaki gibi. Bir ara onay mesajları yeşildi;
   öğrenci kayıt günü yeşil görmeyecek - engelle uyarıyı rengin değil cümlenin
   ayırdığını öğrenmesi gerekiyor. */

/* --- Ders listesi ----------------------------------------------------- */

table.dTable {
  padding: 0;
  margin: 0;
  width: 100%;
}

table.dTable th.dTableTitle {
  font: bold 13px var(--dr-yazi);
  background-color: var(--dr-bordo);
  color: var(--dr-beyaz);
  text-align: center;
  padding: 0.2em;
}

table.dTable td.dTableAlt { background-color: var(--dr-satir); }

table.dTable input { border: none; }

.dr-kimlik { width: 80%; margin-top: 12px; }
.dr-hatirlatma { margin: 20px auto 10px; }
.dr-liste-kabi { width: 100%; }

.dr-yardim {
  text-align: right;
  padding: 4px 8px 0 0;
  font-size: 12px;
}

.dr-captcha-hucre { text-align: center; padding: 10px 0; }

/* ⚠️ `overflow` YOK. `overflow-x: auto` yazılıydı: `overflow-y` de `auto`ya
   çekiliyor (CSS kuralı) ve reCAPTCHA'nın test anahtarıyla gelen uyarı satırı
   kutuyu yükseltince widget'ın yanında kaydırma çubuğu beliriyordu. Çerçeve
   zaten tek parça ölçekleniyor, taşma ihtimali yok. */
#dr-captcha {
  display: inline-block;
  max-width: 100%;
}

.dr-onay-metni {
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px;
}

.dr-onay-dugmesi { margin: 0; text-align: center; }

.dr-buyuk-dugme {
  font-size: 16px;
  padding: 10px;
}

/* --- Danışman onayından sonraki ekran --------------------------------- */

.dr-giris-baslik {
  margin: 10px 0 16px;
  text-align: center;
  font: bold 20px var(--dr-yazi);
}

.dr-giris-mesaj {
  margin: 0 40px 20px;
  text-align: center;
  font: bold 20px var(--dr-yazi);
  color: var(--dr-hata);
}

.dr-giris-not {
  margin: 0 40px 40px;
  text-align: center;
  font-style: italic;
  color: var(--dr-anlatim-silik);
}

/* --- Danışmanın kararı (çerçevenin dışında) --------------------------- */

.dr-danisman {
  max-width: 800px;
  margin: 16px auto 0;
  padding: 14px 20px;
  border-left: 4px solid var(--dr-bordo);
  background: var(--dr-anlatim-zemin);
  color: var(--dr-anlatim-metin);
  font: 15px/1.5 var(--dr-anlatim-yazi);
  text-align: left;
  box-sizing: border-box;
}

.dr-danisman p { margin: 0; }

.dr-danisman .dr-danisman-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* --- Türkçe anlatım (çerçevenin dışında) ------------------------------ */

.dr-anlatim {
  max-width: 800px;
  margin: 28px auto 0;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--dr-anlatim-cizgi);
  background: var(--dr-anlatim-zemin);
  color: var(--dr-anlatim-metin);
  font-family: var(--dr-anlatim-yazi);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.dr-anlatim h1 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 600;
}

.dr-anlatim h2 {
  margin: 32px 0 8px;
  font-size: 18px;
  font-weight: 600;
}

.dr-anlatim p { margin: 0 0 12px; }

.dr-anlatim a { color: var(--dr-bordo); }

/* ⚠️ Metin içindeki bağlantıların ALTI ÇİZİLİ. Kopyanın kendi kuralı
   (`a:link { text-decoration: none }`, ODTÜ'nün ekranından) anlatıma da
   iniyordu ve bölüm programı ile yönetmelik bağlantıları kalın bordo bir
   sözcükten ayırt edilemiyordu. Özgüllük bilerek `a:link` (0,1,1) kuralının
   üstünde: sıradan bağımsız yenmeli. ⚠️ `.dr-buton` hariç - "İktisat Arşiv'e
   dön" de bir `<p>` içinde ve düğme gibi görünmesi gerekiyor. */
.dr-anlatim p a:not(.dr-buton):link,
.dr-anlatim p a:not(.dr-buton):visited,
.dr-anlatim dd a:link,
.dr-anlatim dd a:visited {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dr-giris { font-size: 16px; }

.dr-uyari,
.dr-not {
  color: var(--dr-anlatim-silik);
  font-size: 14px;
}

.dr-uyari {
  border-left: 3px solid var(--dr-bordo);
  padding-left: 12px;
}

.dr-adres { font-family: ui-monospace, Consolas, monospace; font-size: 0.92em; }

.dr-sozluk { margin: 0; }

.dr-sozluk dt {
  margin-top: 14px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dr-bordo);
}

.dr-sozluk dd {
  margin: 4px 0 0;
  font-size: 14.5px;
}

.dr-eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.dr-buton {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--dr-bordo);
  border-radius: 7px;
  background: var(--dr-bordo);
  color: var(--dr-beyaz);
  font: 600 14px var(--dr-anlatim-yazi);
  text-decoration: none;
  cursor: pointer;
}

.dr-buton--ikincil {
  background: transparent;
  color: var(--dr-bordo);
}

.dr-buton:hover { opacity: 0.9; }

/* --- Telefon ---------------------------------------------------------- */
/* ⚠️ Burada mobil kuralı YOK ve olmamalı. Bkz. dosyanın başındaki not: kopya
   her ekranda birebir aynı duruyor, ölçeği `viewport` etiketi veriyor.
   Bir zamanlar burada `input, select { font-size: 16px }` vardı (iOS'un küçük
   alana odaklanınca yakınlaştırması için, CLAUDE.md → Mobil); kutular
   telefonda masaüstündekinden farklı görünüyordu. Provada bu takas tersine
   çevrildi: sayfa zaten ölçekli, alanlar da ekranın kendisi gibi duruyor.
   `tests/test_coursecapacityisfull.py` kilitler. */