/* GölgePanel genel yerleşim
 *
 * ⚠ Bu dosya **geniş ekranı** anlatıyor. Dar ekrandaki karşılığı ayrı bir
 * katmanda: `static/css/mobil.css` (1024 px altında sol menü çekmeceye girer,
 * 640 px altında alt bar çıkar ve listeler karta döner). Buradaki `.kenar`,
 * `.ustbar`, `.ana`, `.tablo`, `.ozet-serit`, `.form-eylem` gibi kabuk
 * parçalarını değiştiren, oradaki karşılığına da bakmalı — yoksa telefonda
 * sessizce bozulur. mobil.css `base.html`'de **en son** yükleniyor.
 */
* { box-sizing: border-box; }

/* --- Genel ölçek ve çerçeve (2026-08-02) ---------------------------------
   Han: "panel köşelere çok yapışmış, yoğunluk azalsın, %10 büyüsün."
   İki ayrı iş yapıldı:

   1. **Ölçek:** bütün arayüz `--olcek` (1.1) kadar büyür. Yüzlerce px değerini
      tek tek değiştirmek yerine `zoom` kullanıldı — yazı, dolgu, ikon ve
      kenarlık birlikte ölçeklenir, orantılar bozulmaz, ayarı tek satır.
      `100vh` zoom'dan etkilendiği için yükseklik `--olcek`e bölünüyor.
   2. **Çerçeve:** sol menü ve içerik iki ayrı yuvarlak kart. Aralarında ve
      ekran kenarlarında `--cerceve` kadar boşluk var; panel köşelere yapışmıyor.

   Sayfanın kendisi kaymıyor: yalnız `.ana` kayar, üst bar ve sol menü hep
   yerinde durur (sticky hilesine gerek kalmadı). */
html { background: var(--sayfa-zemin); }

body {
  zoom: var(--olcek);
  height: calc(100vh / var(--olcek));
  margin: 0;
  padding: var(--cerceve);
  overflow: hidden;
  font-family: var(--font);
  background: var(--sayfa-zemin);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }

.yerlesim { display: flex; gap: var(--cerceve); height: 100%; }

/* Çizgi ikonlar — tek renkli, `currentColor` ile temaya uyar.
   Kütüphane `templates/_ikonlar.html` içinde gömülü (dışarıdan dosya inmez). */
.ikon { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.ikon-deposu { display: none; }

/* --- Sol menü ---
   Menü ekranın en çok bakılan yeri. Hiyerarşi üç kademede kuruluyor:
   sembol + punto + girinti. Ana başlıklar 14.5 px yarı kalın ve neredeyse
   beyaz; alt maddeler girintili, bir tık soluk ve daha küçük sembollü.
   Seçili madde çerçeve boyu şerit değil, yuvarlak bir hap (pill).
   BÜYÜK HARF kullanılmıyor: Türkçede büyük harf okumayı yavaşlatıyor. */
.kenar {
  width: var(--kenar-genislik);
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-buyuk);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.kenar-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 16px 14px;
  font-size: 19px;
  font-weight: 700;
  color: var(--sidebar-baslik);
  letter-spacing: 0.2px;
}

.kenar-marka {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-metin);
}

.kenar-marka .ikon { width: 19px; height: 19px; }
.kenar-marka-ad span { color: var(--accent); }

.kenar-menu { padding: 2px 8px 8px; }

/* Katlanabilir menü grubu (details/summary) */
.kenar-katlanir { border: 0; }

/* Gruplar arası ince ayraç — nerede bittiği görünsün */
.kenar-katlanir + .kenar-katlanir,
.kenar-katlanir + .kenar-tek,
.kenar-tek + .kenar-katlanir {
  border-top: 1px solid var(--sidebar-ayrac);
  margin-top: 5px;
  padding-top: 5px;
}

.kenar-grup,
.kenar-tek {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--sidebar-baslik);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.kenar-ad { flex: 1; min-width: 0; }

/* Tarayıcının varsayılan üçgen işaretini gizle — kendi okumuzu kullanıyoruz */
.kenar-grup::-webkit-details-marker { display: none; }
.kenar-grup::marker { content: ""; }

.kenar-grup:hover,
.kenar-tek:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-active); }

.kenar-katlanir[open] > .kenar-grup { color: var(--sidebar-fg-active); }

.kenar-grup:focus-visible,
.kenar-tek:focus-visible,
.kenar-oge:focus-visible,
.kenar-arac:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 9px;
}

/* Semboller dinlenme hâlinde soluk; hover, açık grup ve seçili maddede canlanır */
.kenar-ikon { color: var(--sidebar-ikon); }
.kenar-ikon-alt { width: 17px; height: 17px; }

.kenar-grup:hover .kenar-ikon,
.kenar-tek:hover .kenar-ikon,
.kenar-oge:hover .kenar-ikon,
.kenar-katlanir[open] > .kenar-grup .kenar-ikon { color: var(--sidebar-fg-active); }

.kenar-ok {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  margin-right: 3px;
  color: var(--sidebar-ikon);
}

.kenar-katlanir[open] > .kenar-grup .kenar-ok { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .kenar-ok { transition: none; }
}

.kenar-alt-liste { padding: 2px 0 4px; }

.kenar-oge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin-left: 14px;          /* girinti: alt madde olduğu görünsün */
  border-radius: 8px;
  color: var(--sidebar-fg);
  font-size: 14px;
}

.kenar-oge:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-active); }

.kenar-oge.aktif,
.kenar-tek.aktif {
  background: var(--sidebar-aktif);
  color: var(--sidebar-fg-active);
  font-weight: 600;
}

.kenar-oge.aktif .kenar-ikon,
.kenar-tek.aktif .kenar-ikon { color: var(--accent); }

/* Henüz yazılmamış modüller — menüde soluk görünür */
.kenar-menu a.yakinda { opacity: 0.55; }

.yakinda-etiket {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}

.kenar .yakinda-etiket { color: inherit; opacity: 0.7; font-weight: 400; }

/* Menünün altı: kullanıcıya ait araçlar — ayarlar ve çıkış */
.kenar-alt {
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid var(--sidebar-ayrac);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kenar-alt form { margin: 0; }

.kenar-arac {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--sidebar-fg);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.kenar-arac:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-active); }
.kenar-arac:hover .kenar-ikon { color: var(--sidebar-fg-active); }

.kenar-arac.aktif { background: var(--sidebar-aktif); color: var(--sidebar-fg-active); font-weight: 600; }
.kenar-arac.aktif .kenar-ikon { color: var(--accent); }

.kenar-cikis:hover,
.kenar-cikis:hover .kenar-ikon { color: var(--danger); }

/* Dış uygulamaya giden bağlantı (bugün yalnız Kurum Rehberi). Panelin kendi
   ekranlarından ayırt edilsin diye sağında küçük bir "dışarı" oku var —
   tıklayan yeni sekmeye gideceğini görmeli. */
.kenar-dis .kenar-ad { flex: 1; }

.kenar-dis-im {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  margin-right: 3px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  color: var(--sidebar-ikon);
  transform: translateY(1px) rotate(45deg);
}

.kenar-dis:hover .kenar-dis-im { color: var(--sidebar-fg-active); }

/* Yalnız ekran okuyucunun gördüğü metin. `display:none` olmaz — okuyucu da
   atlar; bu yüzden bir piksellik kırpılmış kutuda duruyor. */
.gizli-metin {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- İçerik sütunu ve üst çubuk ---
   İçerik de yuvarlak bir kart; köşeleri kesilsin diye taşan gizleniyor.
   Üst bar sabit, altındaki `.ana` kayıyor. */
.icerik {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-buyuk);
  overflow: hidden;
}

.ustbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;   /* açılır paneller içeriğin üstünde kalsın */
  z-index: 20;
}

.ustbar h1 { font-size: 18px; margin: 0; white-space: nowrap; }

.ustbar .kullanici { color: var(--text-muted); font-size: 14.5px; display: flex; gap: 14px; align-items: center; }

/* Genel arama — üst barda yer kaplamasın diye 🔍 simgesinin altında (Alt+A).
   Kutu açılır panelin içinde; sayfa başlığı ve hızlı erişim düğmeleri üst
   barda böylece nefes alıyor. Öğrenci araması da aynı biçimi kullanıyor. */
.ust-arama, .ust-ara-kutu {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 4px 8px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.ust-arama label, .ust-ara-kutu label {
  grid-column: 1 / -1;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.ust-arama input, .ust-ara-kutu input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  min-width: 0;
}

.ust-arama input:focus,
.ust-ara-kutu input:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface); }

/* Hızlı erişim düğmeleri ve açılır panelleri */
.ust-eylem { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.ust-menu { position: relative; }

.ust-dugme {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ust-dugme::-webkit-details-marker { display: none; }
.ust-dugme::marker { content: ""; }
.ust-dugme:hover { background: var(--bg); }
.ust-dugme:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ust-menu[open] .ust-dugme { background: var(--bg); border-color: var(--border); }

/* Üst bar düğmelerinin sembolü menüdekinden bir tık küçük — düğme
   yüksekliğini büyütmesin. */
.ust-dugme .ikon { width: 18px; height: 18px; }

.ust-dugme-vurgu { background: var(--accent-soft); color: var(--accent); }
.ust-dugme-vurgu:hover { background: var(--accent-soft); filter: brightness(0.97); }
.ust-dugme-ad { font-size: 14px; font-weight: 600; }

.ust-rozet {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
}

.ust-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 250px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-yuksek);
  z-index: 30;
}

.ust-panel-genis { width: 320px; }

.ust-panel-baslik {
  margin: 4px 8px 8px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.ust-oge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14.5px;
}

a.ust-oge:hover { background: var(--bg); }
.ust-oge.yakinda { opacity: 0.55; }
.ust-oge-iki-satir { align-items: flex-start; }
.ust-oge-ikon { width: 17px; height: 17px; color: var(--text-muted); }
.ust-oge-metin { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; flex: 1; }
.ust-oge-metin small { color: var(--text-muted); font-size: 12.5px; }
.ust-zaman { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.ust-bos { color: var(--text-muted); font-size: 13.5px; padding: 8px; margin: 0; }

.ust-panel-not {
  margin: 8px 8px 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
}

/* Dar ekran: düğme yazıları düşer, ikonlar kalır */
@media (max-width: 1000px) {
  .ust-dugme-ad { display: none; }
  .ustbar .kullanici { display: none; }
}

/* İçerik alanı: sayfanın kayan tek parçası (üst bar ve menü sabit).
   Alt dolguyu biraz fazla: son kart ekranın dibine yapışmasın. */
.ana { flex: 1; overflow-y: auto; padding: 26px 28px 34px; }

/* --- Kartlar --- */
.kart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.kart-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.kart-giris { margin-bottom: 20px; }
.kart-dar { max-width: 640px; }

.kart h3 { margin: 0 0 6px; font-size: 16px; }
.kart .aciklama { color: var(--text-muted); font-size: 14.5px; margin: 0; }
.kart .rozet {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* --- Butonlar ve formlar --- */
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-metin);
  border: 0;
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 15.5px;
  font-family: inherit;
  cursor: pointer;
}

.btn:hover { filter: brightness(1.08); }

.alan { margin-bottom: 14px; }
.alan label { display: block; font-size: 14.5px; margin-bottom: 4px; color: var(--text-muted); }

.alan input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15.5px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

.alan input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

/* Kutucuk ve radyo düğmeleri metin kutusu değildir — genişlik/dolgu almazlar */
.alan input[type="checkbox"],
.alan input[type="radio"] {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}

.hata {
  background: var(--ton-kirmizi-zemin);
  border: 1px solid var(--danger);
  color: var(--ton-kirmizi-metin);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14.5px;
  margin-bottom: 14px;
}

/* =======================================================================
   Paylaşılan bileşenler — birden fazla modülün kullandığı parçalar.
   Kayıt modülünde doğmuştu; Öğrenciler ekranları da aynı dili konuşsun
   diye buraya alındı. Modüle özel varyantlar kendi CSS dosyasında kalır.
   ======================================================================= */

/* --- Alt gezinme (sekmeler) --- */
.sekmeler {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.sekme-listesi { display: flex; gap: 4px; flex-wrap: wrap; }

.sekme {
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--text-muted);
  border: 1px solid transparent;
}

.sekme:hover { background: var(--surface); color: var(--text); }

.sekme.aktif {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--border);
  font-weight: 600;
}

.sekme-uyari.aktif { color: var(--danger); }

/* --- Buton varyantları --- */
.btn-kucuk { padding: 8px 14px; font-size: 14.5px; }
.btn-blok { display: block; width: 100%; margin-bottom: 8px; text-align: center; }
.btn-ikincil { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-tehlike { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover { filter: none; }

/* --- Branş kimliği ------------------------------------------------------
   Her branşın sabit bir rengi ve emojisi var. Renk yalnızca ince bir şerit
   veya soluk zemin olarak kullanılır — kurumsal moru bastırmaz. */
.brans-1 { --bc: var(--brans-1); }
.brans-2 { --bc: var(--brans-2); }
.brans-3 { --bc: var(--brans-3); }
.brans-4 { --bc: var(--brans-4); }
.brans-5 { --bc: var(--brans-5); }
.brans-6 { --bc: var(--brans-6); }
.brans-7 { --bc: var(--brans-7); }
.brans-8 { --bc: var(--brans-8); }

.brans-ikon { font-size: 14px; line-height: 1; }

.brans-cip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  padding: 2px 9px 2px 7px;
  border-radius: 20px;
  color: var(--bc, var(--text));
  background: color-mix(in srgb, var(--bc, var(--accent)) 10%, transparent);
  white-space: nowrap;
}

.brans-ad { color: var(--bc, inherit); font-weight: 600; }

/* --- Rozetler --- */
.rozet {
  display: inline-block;
  font-size: 12.5px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

.rozet-kaynak { background: var(--bg); color: var(--text-muted); }

/* Kaynak rozetleri — hangi kanaldan geldiği bir bakışta görünsün */
.kaynak-instagram { background: var(--ton-pembe-zemin);      color: var(--ton-pembe-metin); }
.kaynak-google    { background: var(--ton-mavi-zemin);       color: var(--ton-mavi-metin); }
.kaynak-tavsiye   { background: var(--ton-yesil-zemin);      color: var(--ton-yesil-metin); }
.kaynak-veli      { background: var(--ton-camgobegi-zemin);  color: var(--ton-camgobegi-metin); }
.kaynak-etkinlik  { background: var(--ton-amber-zemin);      color: var(--ton-amber-metin); }
.kaynak-tabela    { background: var(--ton-gri-zemin);        color: var(--ton-gri-metin); }

/* --- Özet şerit --- */
.ozet-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.ozet-kutu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 18px 12px 14px;
  min-width: 158px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.ozet-ikon {
  font-size: 19px;
  line-height: 1;
  opacity: 0.85;
}

.ozet-notr  { border-left-color: var(--accent); }
.ozet-iyi   { border-left-color: var(--success); }
.ozet-sonuk { border-left-color: var(--border); }
.ozet-vurgu { border-left-color: var(--warning); }
.ozet-riskli { border-left-color: var(--danger); }

.ozet-sayi { display: block; font-size: 23px; font-weight: 700; line-height: 1.15; }
.ozet-basari { color: var(--success); }
.ozet-kayip { color: var(--text-muted); }
.ozet-borc { color: var(--danger); }
.ozet-etiket { display: block; font-size: 13.5px; color: var(--text-muted); }

/* --- Tablo --- */
.tablo-sarmal { padding: 0; overflow-x: auto; }

.tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }

.tablo th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tablo td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover { background: var(--satir-hover); }

.tablo-ad { font-weight: 600; color: var(--text); }
a.tablo-ad:hover { color: var(--accent); }
.tablo-alt { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.tablo-bos { text-align: center; color: var(--text-muted); padding: 28px 14px; }
.tablo-sag { text-align: right; white-space: nowrap; }
.tablo th.tablo-sag { text-align: right; }

/* --- Uyarı şeritleri --- */
.uyari-serit {
  background: var(--ton-kirmizi-zemin);
  border: 1px solid var(--danger);
  color: var(--ton-kirmizi-metin);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}

.taslak-uyari {
  background: var(--ton-amber-zemin);
  border: 1px dashed var(--warning);
  color: var(--ton-amber-metin);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}

.bolum-aciklama { color: var(--text-muted); font-size: 14.5px; margin: 0 0 16px; }
.geri-baglanti { margin: 0 0 14px; font-size: 14.5px; }

/* --- Detay sayfası iskeleti (aday, öğrenci) --- */
.detay-yerlesim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.detay-yan { display: flex; flex-direction: column; gap: 16px; }

.detay-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.detay-ad { margin: 0 0 2px; font-size: 20px; }
.detay-alt { margin: 0; color: var(--text-muted); font-size: 14.5px; }

.bolum-baslik {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* Zaman çizelgesi — görüşme geçmişi, gelişim notları */
.zaman-cizgisi { list-style: none; margin: 0; padding: 0; }

.zaman-cizgisi li {
  border-left: 2px solid var(--border);
  padding: 0 0 16px 14px;
  position: relative;
}

.zaman-cizgisi li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.zaman-cizgisi li:last-child { padding-bottom: 0; }
.zaman-ust { display: flex; gap: 10px; font-size: 13.5px; margin-bottom: 2px; }
.zaman-ust span { color: var(--text-muted); }
.zaman-cizgisi p { margin: 0; font-size: 14.5px; }
.zaman-bos { border-left: 0; padding-left: 0; color: var(--text-muted); font-size: 14.5px; }
.zaman-bos::before { display: none; }

/* Etiket–değer listesi */
.bilgi-listesi { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.bilgi-listesi dt { color: var(--text-muted); font-size: 13.5px; }
.bilgi-listesi dd { margin: 0; font-size: 14.5px; }

.kart-eylem .btn:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
  .detay-yerlesim { grid-template-columns: 1fr; }
}

/* Arama panelinde alt not kendi ayracını çizmesin — kutunun ayracı var */
.ust-arama + .ust-panel-not { border-top: 0; padding-top: 0; margin-top: 2px; }

.ust-oge-ayarlar {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-muted);
}

/* --- Hızlı işlem düzenleme ekranı --- */
.ayar-sayfa { max-width: 940px; margin: 0 auto; }
.ayar-grup { margin-bottom: 14px; }
.ayar-grup .arama-baslik { margin-top: 0; }
.ayar-izgara { display: flex; flex-wrap: wrap; gap: 8px; }
.ayar-eylem { cursor: pointer; }
.ayar-eylem.yakinda { opacity: 0.5; cursor: not-allowed; }
.ayar-eylem:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* --- Kart kütüphanesi (anasayfayı düzenle) ---
   Hızlı işlem ekranı tek satırlık çipler kullanıyor; kütüphane onlardan daha
   geniş bir öğeye ihtiyaç duyuyor: kartın ne gösterdiği seçmeden önce
   okunabilmeli. Bu yüzden ayrı bir ızgara — çip değil, iki satırlık kutu. */
.kutuphane-sayfa { max-width: 1040px; margin: 0 auto; }
.kutuphane-grup { margin-bottom: 14px; }
.kutuphane-grup .arama-baslik { margin-top: 0; }

.kutuphane-uyari {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  padding: 11px 14px;
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.kutuphane-uyari strong { color: var(--text); }

.kutuphane-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}

.kut-oge {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.kut-oge:hover { border-color: var(--accent); }
.kut-oge input { margin: 3px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.kut-oge:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.kut-govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kut-ust { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kut-ikon { width: 17px; height: 17px; color: var(--text-muted); }
.kut-ad { font-size: 14.5px; font-weight: 600; }
.kut-aciklama { color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }

/* Boyut etiketi sessiz: bilgi ama uyarı değil. */
.kut-boyut {
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* Uyarı rozeti: "bu kart ekranda ne bırakıyor". Yetki rozeti değil —
   kullanıcı zaten görme iznine sahip, soru ekranda durup durmayacağı. */
.kut-rozet {
  align-self: flex-start;
  font-size: 11.5px;
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 2px;
}
.kut-rozet-para    { background: var(--ton-kirmizi-zemin); color: var(--ton-kirmizi-metin); }
.kut-rozet-kisisel { background: var(--ton-amber-zemin); color: var(--ton-amber-metin); }

/* --- Arama sonuçları --- */
.arama-sayfa { max-width: 940px; margin: 0 auto; }
.arama-durum { color: var(--text-muted); font-size: 14.5px; margin: 0 0 18px; }
.arama-durum strong { color: var(--text); }

.arama-baslik {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin: 22px 0 10px;
}

.arama-modul { display: block; color: var(--text); }
.arama-modul:hover { border-color: var(--accent); }
.arama-modul h3 { display: flex; align-items: center; gap: 8px; }
.arama-modul.yakinda { opacity: 0.6; }

.arama-tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.arama-tablo th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding: 0 10px 8px 0;
}
.arama-tablo td { padding: 9px 10px 9px 0; border-top: 1px solid var(--border); }

kbd {
  font-family: inherit;
  font-size: 12.5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 5px;
  background: var(--surface);
}

/* --- Giriş sayfası --- */
/* Giriş ekranı: panelin dışında, çerçevesiz tek kart. */
.giris-sayfa {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--giris-zemin);
  border-radius: var(--radius-buyuk);
}

.giris-kutu {
  width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 34px 30px;
  box-shadow: var(--shadow-yuksek);
}
.giris-kutu .marka { text-align: center; font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.giris-kutu .marka span { color: var(--accent); }
.giris-kutu .alt-yazi { text-align: center; color: var(--text-muted); font-size: 14px; margin-bottom: 22px; }
.giris-kutu .btn { width: 100%; }

/* =======================================================================
   Ayarlar ekranı — tema seçimi
   Her tema bir gönderme düğmesi: tek tıkla uygulanır. Önizleme kutucukları
   temanın üç ana rengini (kenar çubuğu / zemin / vurgu) gösterir; renkler
   burada sabittir çünkü kutu **o temayı** anlatır, açık olan temayı değil.
   ======================================================================= */
.tema-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.tema-kart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}

.tema-kart:hover { border-color: var(--accent); }

.tema-kart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tema-kart.secili {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.tema-ad { display: flex; align-items: center; gap: 8px; font-weight: 600; }

.tema-isaret {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--accent-metin);
}

.tema-aciklama { color: var(--text-muted); font-size: 13px; line-height: 1.4; }

/* Küçük panel maketi: solda kenar çubuğu, sağda içerik ve iki satır */
.tema-onizleme {
  display: flex;
  height: 62px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.onizleme-kenar { width: 30%; }
.onizleme-govde { flex: 1; padding: 9px 8px; display: flex; flex-direction: column; gap: 6px; }
.onizleme-cizgi { height: 7px; border-radius: 4px; }
.onizleme-cizgi-kisa { width: 55%; opacity: 0.45; }

/* Üç temanın kendi renkleri — tokens.css'teki değerlerin aynısı.
   Buradaki değerler açık olan temaya göre değişmez: kutu "o temayı" gösterir. */
.onizleme-acik .onizleme-kenar   { background: #ffffff; box-shadow: inset -1px 0 0 #dedcec; }
.onizleme-acik .onizleme-govde   { background: #f5f4fb; }
.onizleme-acik .onizleme-cizgi   { background: #5b52f0; }

.onizleme-ortasi .onizleme-kenar { background: #1c1b2e; }
.onizleme-ortasi .onizleme-govde { background: #f0eff9; }
.onizleme-ortasi .onizleme-cizgi { background: #6c63ff; }

.onizleme-koyu .onizleme-kenar   { background: #16151f; }
.onizleme-koyu .onizleme-govde   { background: #191826; }
.onizleme-koyu .onizleme-cizgi   { background: #8f88ff; }

/* --- Form bileşenleri (modüller arası ortak) -----------------------------
   Aynı tanımlar `kurum.css` içinde de duruyor; oradaki kopya bu bloğa
   devredilmeli — iki yerde durdukça biri değişip diğeri kalıyor. Öğrenci
   modülünün form ekranları bu bloğu kullanıyor. */

.form-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 18px;
}

.alan { margin-bottom: 14px; }
.alan-genis { grid-column: 1 / -1; }

.alan > label {
  display: block;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.alan input,
.alan select,
.alan textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15.5px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

.alan input[type="checkbox"] { width: auto; }

.alan input:focus,
.alan select:focus,
.alan textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

.alan-ipucu {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.zorunlu { color: var(--danger); }

.hata {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--ton-kirmizi-metin);
}

.form-eylem {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
}

.form-eylem-not {
  flex: 1 1 260px;
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.mesajlar { margin-bottom: 14px; }

.mesaj {
  margin: 0 0 8px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14.5px;
}

.mesaj-success { border-color: var(--success); background: var(--ton-yesil-zemin); color: var(--ton-yesil-metin); }
.mesaj-info    { border-color: var(--border);  background: var(--ton-mavi-zemin);  color: var(--ton-mavi-metin); }
.mesaj-warning { border-color: var(--warning); background: var(--ton-amber-zemin); color: var(--ton-amber-metin); }
.mesaj-error   { border-color: var(--danger);  background: var(--ton-kirmizi-zemin); color: var(--ton-kirmizi-metin); }

/* --- Onay penceresi ----------------------------------------------------
   Geri dönüşü zor işlemlerde araya giren durak (`templates/_onay.html` +
   `static/js/onay.js`). Tarayıcının `confirm()`'ü yerine `<dialog>`: odak
   tuzağı ve Esc tarayıcıdan geliyor, görünüm panelin kendi dilinde kalıyor.

   JS yalnız açıp kapatıyor ve metni dolduruyor; kutunun kendisi HTML'de
   statik duruyor — JS'ten kurmak inline stil gerektirirdi (CSP, §1.4). */
.onay-pencere {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-buyuk);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-yuksek);
}

.onay-pencere::backdrop { background: rgb(0 0 0 / 45%); }

.onay-govde { padding: 22px 24px 20px; margin: 0; }

.onay-baslik { margin: 0 0 8px; font-size: 18px; line-height: 1.25; }

.onay-metin { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); }

.onay-not {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.onay-dugmeler {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* --- Sonuç şeridi ------------------------------------------------------------
 * Liste ekranlarında "kaç kayıt görüyorum" sorusunun cevabı. Üç ekranda birden
 * eksikti: filtre uygulanıyor, liste kısalıyor, ama sayı hiçbir yerde
 * yazmıyordu — Han "piyanoyu seçtim, kaç piyano öğrencim olduğunu göremiyorum"
 * diye yakaladı. Özet kutuları da artık filtreden **sonraki** listeyi sayıyor.
 */
.sonuc-serit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 14px 0 8px;
  font-size: 0.85rem;
}

.sonuc-sayi { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.sonuc-etiket { color: var(--text-muted); }

/* Hangi filtrelerin uygulandığı — sayının yanında, çip olarak. */
.sonuc-filtre {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
}

.sonuc-toplam { margin-left: auto; color: var(--text-muted); font-size: 0.78rem; }

/* --- Sezon seçici ve arşiv uyarısı (2026-08-06) ---------------------------
 *
 * Han'ın ölçütü: "gerçekten göze çarpmalı ki yanlış sezonda olduğunu oraya
 * bakarak fark edebilsin. O yüzden puntosu, fontu ve tasarımı, oradaki
 * konumu önemli."
 *
 * Üç katman: üst bardaki düğme (adı her zaman görünür), arşivde düğmenin
 * durum rengine dönmesi, ve içeriğin üstünde tam genişlikte şerit. Renkler
 * tokens.css ton çiftlerinden — sabit renk koyu temada patlar.
 */

.sezon-dugme { gap: 8px; }

.sezon-ad {
  font-weight: 650;
  font-size: 14.5px;
  letter-spacing: 0.01em;
}

/* Arşiv modunda düğme sessiz bir sekme olmaktan çıkıp uyarıya dönüşür. */
.sezon-dugme-arsiv {
  background: var(--ton-amber-zemin);
  color: var(--ton-amber-metin);
  border-color: var(--warning);
}

.sezon-rozet {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--ton-amber-metin);
  color: var(--ton-amber-zemin);
}

.sezon-satir-form { margin: 0; }

.sezon-oge {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.sezon-oge-secili { background: var(--ton-mavi-zemin); color: var(--ton-mavi-metin); }

/* Şerit: içeriğin en üstü, tam genişlik. Düğme tek başına yetmiyordu —
   kullanıcı ekrana bakarken uyarıyı görmeli, düğmeyi aramak zorunda kalmamalı. */
.arsiv-serit {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 2px solid var(--warning);
  border-radius: var(--radius);
  background: var(--ton-amber-zemin);
  color: var(--ton-amber-metin);
}

.arsiv-ikon { width: 26px; height: 26px; flex: none; }

.arsiv-metin { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 240px; }

.arsiv-baslik {
  font-size: 18px;
  font-weight: 750;
  line-height: 1.25;
}

.arsiv-alt { font-size: 14px; opacity: 0.9; }

.arsiv-donus { margin: 0; }

.arsiv-dugme {
  background: var(--ton-amber-metin);
  color: var(--ton-amber-zemin);
  white-space: nowrap;
}

.sezon-onay { margin-inline: auto; }
.sezon-onay-hedef { margin: 4px 0 2px; font-size: 26px; font-weight: 750; }
.sezon-onay-tarih { margin: 0 0 14px; color: var(--text-muted); font-size: 14px; }

/* --- Üst bardaki hata bildir kutusu (2026-08-10) -----------------------------
 * Han'ın ölçütü: "çok yer kaplamasın, kafa karışıklığı yaratmasın." Düğme
 * ötekilerle aynı kaplamda (`ust-dugme`); ayrı olan yalnız açılan panelin
 * içinde **çalışan bir form** olması. Panel biraz daha geniş, çünkü içinde
 * seçim kutuları ve iki satırlık bir metin alanı var.
 *
 * Biçim burada, `hata.css`te değil: kutu her sayfada duruyor ve base.html
 * yalnız app.css yüklüyor.
 */
.ust-panel-hata { width: 380px; }

.hata-kutu-not { margin: 0 0 10px; }

.hata-kutu-form { display: block; margin-bottom: 6px; }

.hata-kutu-form .alan { margin-bottom: 10px; }

.hata-kutu-form label {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.hata-kutu-form select,
.hata-kutu-form input[type="text"],
.hata-kutu-form textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.hata-kutu-form textarea { resize: vertical; min-height: 68px; }

.hata-kutu-form select:focus,
.hata-kutu-form input:focus,
.hata-kutu-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Kutuda alan ipuçları hiç basılmıyor (şablon yalnız girdiyi çiziyor): kutu
 * "hızlı yol", ayrıntılı anlatım "Ayrıntılı bildir" sayfasında. */
.hata-kutu-ikili { display: flex; gap: 10px; }
.hata-kutu-ikili .alan { flex: 1; min-width: 0; }

.hata-kutu-eylem { display: flex; gap: 8px; margin-bottom: 8px; }