/* =====================================================================
   styles.css — Paylaşılan stiller (mobil öncelikli, açık+koyu tema)
   Tasarım dili: "Sakin & vakur" — ılık nötrler, dingin derin teal-yeşil
   aksan, humanist serif başlık + humanist sans gövde. Zamansız, güven veren.
   ===================================================================== */

/* ---------------- Tasarım belirteçleri (tokens) ---------------- */
:root {
  /* Yüzeyler / metin (açık tema: ılık krem) */
  --arka:       #f3efe7;   /* ılık krem/kırık-beyaz zemin (steril beyaz değil) */
  --yuzey:      #fbf9f4;   /* kart yüzeyi (zeminden bir ton açık) */
  --yuzey-2:    #ece5d8;   /* ikincil ılık dolgu */
  --metin:      #2c2823;   /* ılık koyu antrasit metin */
  --metin-sol:  #655d51;   /* ılık soluk metin (AA) */
  --kenar:      #e2dacb;   /* ılık düşük kontrast kenar */
  --kenar-sert: #d4cab6;

  /* Aksan: dingin, derin teal-yeşil */
  --vurgu:      #2b5f56;
  --vurgu-koyu: #214a43;
  --vurgu-sol:  #dde8e3;   /* yumuşak aksan dolgusu */
  --vurgu-yazi: #ffffff;   /* birincil buton metni */

  /* Durumlar (dingin, alarmcı değil) */
  --uyari:      #8a5722;   /* ılık amber-kahve */
  --uyari-arka: #f3e7d3;
  --tehlike:    #9c3c2c;   /* dingin tuğla-kırmızı */
  --tehlike-arka:#f3ddd6;
  --tehlike-yazi:#ffffff;  /* tehlike dolgusu üzerindeki metin (toast) */

  /* Gölge (nötr-ılık tonlu, saf siyah değil) */
  --golge:     0 1px 2px rgba(58, 46, 28, .05), 0 3px 12px rgba(58, 46, 28, .055);
  --golge-kk:  0 1px 2px rgba(58, 46, 28, .05);

  /* Köşe yarıçapı ölçeği */
  --r-s:    10px;
  --r-m:    14px;
  --r-l:    18px;
  --r-pill: 999px;
  --yuvarlak: var(--r-m);   /* geriye dönük ad */

  /* Boşluk ölçeği */
  --b1: 4px;  --b2: 8px;  --b3: 12px;  --b4: 16px;  --b5: 24px;  --b6: 32px;  --b7: 48px;

  /* Tip ölçeği */
  --fs-xs:   .78rem;
  --fs-s:    .875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.3rem;
  --fs-2xl:  1.6rem;
  --fs-3xl:  2rem;

  /* Yazı tipleri (humanist serif başlık + humanist sans gövde) */
  --font-baslik: "Spectral", Georgia, "Times New Roman", serif;
  --font-govde:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --dokunma: 48px;   /* minimum dokunma hedefi */
}

/* =====================================================================
   Seçilebilir temalar — html[data-theme="..."]
   Varsayılan (:root yukarıda) = "Açık". Koyu temalar burada tanımlı.
   Tema seçimi erken bir satır-içi script ile <head>'de atanır (flash yok).
   Tüm renkler WCAG AA'ya göre rafine edilmiştir.
   ===================================================================== */

/* "Petrol" (koyu) — derin petrol mavisi-teal, ılık krem metin */
html[data-theme="petrol"] {
  --arka:       #0d2831;
  --yuzey:      #143b46;
  --yuzey-2:    #1b4a57;
  --metin:      #e9e4d6;
  --metin-sol:  #9db3b5;
  --kenar:      #1f4a56;
  --kenar-sert: #2c5d6b;

  --vurgu:      #3f9e8a;   /* teal-yeşil aksan (metin/ikon/link) */
  --vurgu-koyu: #82c9b8;   /* aksan dolgu üzerinde açık metin */
  --vurgu-sol:  #15403f;   /* yumuşak aksan dolgusu */
  --vurgu-yazi: #08201b;   /* birincil buton metni (açık aksan üzerine koyu) */

  --uyari:      #e2a860;
  --uyari-arka: #35311f;
  --tehlike:    #e89683;
  --tehlike-arka:#3a241e;
  --tehlike-yazi:#2a1512;

  --golge:     0 1px 2px rgba(0, 0, 0, .40), 0 3px 14px rgba(0, 0, 0, .34);
  --golge-kk:  0 1px 2px rgba(0, 0, 0, .40);
}

/* "Yeşil" (koyu) — derin orman yeşili, ılık krem metin */
html[data-theme="yesil"] {
  --arka:       #0e2a1a;
  --yuzey:      #163827;
  --yuzey-2:    #1d4531;
  --metin:      #e9e4d6;
  --metin-sol:  #9bb0a2;
  --kenar:      #214a34;
  --kenar-sert: #2d5a41;

  --vurgu:      #3fa05f;   /* orman yeşili aksan */
  --vurgu-koyu: #7fc999;
  --vurgu-sol:  #163f2b;
  --vurgu-yazi: #08210f;

  --uyari:      #e0a85f;
  --uyari-arka: #322e1b;
  --tehlike:    #e89481;
  --tehlike-arka:#37231d;
  --tehlike-yazi:#2a1512;

  --golge:     0 1px 2px rgba(0, 0, 0, .40), 0 3px 14px rgba(0, 0, 0, .34);
  --golge-kk:  0 1px 2px rgba(0, 0, 0, .40);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--arka);
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { padding-bottom: var(--b6); }

a { color: var(--vurgu); text-underline-offset: 2px; }

/* ---------------- Tipografi ---------------- */
h1, h2, h3 {
  font-family: var(--font-baslik);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--metin);
}
h2 {
  font-size: var(--fs-xl);
  margin: var(--b6) 0 var(--b3);
}
h3 { font-size: var(--fs-lg); }

.sol-metin { color: var(--metin-sol); }
.kucuk { font-size: var(--fs-s); }

/* İkon hizalama (satır içi svg) */
.ikon-svg { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ---------------- Üst başlık ---------------- */
#ust-baslik {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--b2);
  padding: var(--b2) var(--b3);
  background: color-mix(in srgb, var(--yuzey) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--kenar);
}
.ub-sol, .ub-sag { display: flex; align-items: center; min-width: var(--dokunma); }
.ub-sag { justify-content: flex-end; }
.ub-orta { flex: 1; text-align: center; min-width: 0; }
.ub-baslik {
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ub-alt { font-size: var(--fs-xs); color: var(--metin-sol); }

.ikon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dokunma);
  min-height: var(--dokunma);
  line-height: 1;
  border: none;
  background: transparent;
  color: var(--metin);
  border-radius: var(--r-s);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease;
}
.ikon-btn:hover { background: var(--yuzey-2); }
.ikon-btn:active { background: var(--yuzey-2); transform: translateY(1px); }
.ikon-btn.sol-ikon { color: var(--metin-sol); }

/* ---------------- Sayfa kabı ---------------- */
.sayfa { max-width: 680px; margin: 0 auto; padding: var(--b4); }

/* ---------------- Kartlar ---------------- */
.kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-m);
  box-shadow: var(--golge);
  padding: var(--b4);
  margin-bottom: var(--b3);
}

/* Öğrenci kartı (liste) */
.ogrenci-kart {
  display: flex;
  align-items: center;
  gap: var(--b4);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ogrenci-kart:hover { border-color: var(--kenar-sert); }
.ogrenci-kart:active { background: var(--yuzey-2); }

/* Öğrenci numara rozeti — rafine, ılık tonlu, ince aksan halkası */
.numara-rozet {
  flex: 0 0 auto;
  min-width: 58px;
  height: 58px;
  padding: 0 var(--b3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-baslik);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--vurgu-koyu);
  background: var(--vurgu-sol);
  border: 1px solid color-mix(in srgb, var(--vurgu) 24%, transparent);
  border-radius: var(--r-m);
}
.ogrenci-kart .bilgi { flex: 1; min-width: 0; }
.ogrenci-kart .ad { font-weight: 600; font-size: var(--fs-lg); }
.ogrenci-kart .meta { font-size: var(--fs-s); color: var(--metin-sol); }

/* Uyarı şeridi */
.uyari-serit {
  display: flex;
  align-items: center;
  gap: var(--b2);
  margin-top: var(--b2);
  padding: var(--b2) var(--b3);
  background: var(--uyari-arka);
  color: var(--uyari);
  border-radius: var(--r-s);
  font-size: var(--fs-s);
  font-weight: 600;
}

/* ---------------- Rozetler ---------------- */
.rozet {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--yuzey-2);
  color: var(--metin-sol);
}
.rozet.yesil { background: var(--vurgu-sol); color: var(--vurgu-koyu); }
.rozet.sari  { background: var(--uyari-arka); color: var(--uyari); }

/* Profil başlığı */
.profil-bas { text-align: center; padding: var(--b5) var(--b4); }
.profil-bas .buyuk-numara {
  font-family: var(--font-baslik);
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--vurgu-koyu);
  letter-spacing: .02em;
}
.profil-bas .ad-satir { font-size: var(--fs-lg); font-weight: 600; margin-top: 2px; }
.profil-bas .rozetler { display: flex; gap: var(--b2); justify-content: center; flex-wrap: wrap; margin-top: var(--b3); }

/* Özet ızgarası */
.ozet-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--b2); }
.ozet-kutu { background: var(--yuzey-2); border-radius: var(--r-s); padding: var(--b3); text-align: center; }
.ozet-kutu .deger { font-family: var(--font-baslik); font-size: var(--fs-2xl); font-weight: 600; color: var(--metin); }
.ozet-kutu .etiket { font-size: var(--fs-xs); color: var(--metin-sol); }

/* Kategori / özet satırları */
.kat-satir { display: flex; justify-content: space-between; gap: var(--b3); padding: var(--b3) 0; border-bottom: 1px solid var(--kenar); font-size: var(--fs-base); }
.kat-satir:last-child { border-bottom: none; }
.kat-satir .ad-ikon { display: flex; align-items: center; gap: var(--b2); min-width: 0; }
.kat-satir .ad-ikon .ikon-svg { color: var(--vurgu); }
.kat-satir .deger { color: var(--metin-sol); white-space: nowrap; }

/* Geçmiş (faaliyet) listesi */
.faal-satir { padding: var(--b3) 0; border-bottom: 1px solid var(--kenar); }
.faal-satir:last-child { border-bottom: none; }
.faal-ust { display: flex; justify-content: space-between; gap: var(--b2); align-items: baseline; }
.faal-kat { font-weight: 600; display: inline-flex; align-items: center; gap: var(--b2); }
.faal-kat .ikon-svg { color: var(--vurgu); }
.faal-tarih { font-size: var(--fs-xs); color: var(--metin-sol); white-space: nowrap; }
.faal-detay { font-size: var(--fs-s); color: var(--metin-sol); margin-top: var(--b1); }
.not-satir { display: flex; align-items: flex-start; gap: 6px; }
.not-satir .ikon-svg { color: var(--metin-sol); margin-top: 2px; }

/* ---------------- Butonlar ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b2);
  min-height: var(--dokunma);
  padding: 12px 18px;
  font-family: var(--font-govde);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.1;
  border-radius: var(--r-m);
  border: 1px solid var(--kenar-sert);
  background: var(--yuzey);
  color: var(--metin);
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:hover { border-color: var(--vurgu); }
.btn:active { transform: translateY(1px); }
.btn.birincil { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.btn.birincil:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); }
.btn.birincil:active { background: var(--vurgu-koyu); }
.btn.tehlike { color: var(--tehlike); border-color: color-mix(in srgb, var(--tehlike) 55%, var(--kenar)); background: transparent; }
.btn.tehlike:hover { border-color: var(--tehlike); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn .ikon-svg { flex: 0 0 auto; }

.btn-satir { display: flex; gap: var(--b3); flex-wrap: wrap; margin-top: var(--b3); }
.btn-satir .btn { flex: 1; width: auto; }

/* Eylem butonları (profil) */
.eylemler { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--b2); margin: var(--b4) 0; }
.eylemler .btn { flex-direction: column; gap: 6px; font-size: var(--fs-s); padding: var(--b3) var(--b2); }
.eylemler .btn .ikon-svg { width: 24px; height: 24px; }

/* ---------------- Kategori ızgarası ---------------- */
.kat-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--b2); }
.kat-btn {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--b2);
  text-align: center;
  padding: var(--b3) var(--b2);
  border-radius: var(--r-m);
  border: 1px solid var(--kenar);
  background: var(--yuzey);
  color: var(--metin);
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.kat-btn:hover { border-color: var(--vurgu); }
.kat-btn:active { background: var(--vurgu-sol); transform: translateY(1px); }
.kat-btn .kat-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-s);
  background: var(--vurgu-sol); color: var(--vurgu);
}
.kat-btn .kat-ikon .ikon-svg { width: 24px; height: 24px; }
/* Grup kutusunda alt kategori adları (ipucu) */
.kat-btn .kat-alt { font-size: var(--fs-xs); font-weight: 400; color: var(--metin-sol); line-height: 1.2; }

/* ---------------- Formlar ---------------- */
.alan { margin-bottom: var(--b4); }
.alan > label { display: block; font-weight: 600; margin-bottom: 6px; font-size: var(--fs-s); }
.alan .ipucu { font-size: var(--fs-xs); color: var(--metin-sol); margin-top: var(--b1); }

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
select, textarea {
  width: 100%;
  min-height: var(--dokunma);
  padding: 12px 14px;
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--metin);
  background: var(--yuzey);
  border: 1px solid var(--kenar-sert);
  border-radius: var(--r-m);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--metin-sol) 78%, transparent); }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 22%, transparent);
}

.satir-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b3); }

/* Eser seçimi + yeni ekle */
.katalog-grup { display: flex; gap: var(--b2); align-items: flex-end; }
.katalog-grup select { flex: 1; }
.katalog-grup .btn { width: auto; flex: 0 0 auto; min-width: 48px; padding: 12px 14px; }

/* Bilgi kutusu (okuma süreci vb.) */
.bilgi-kutu {
  padding: var(--b3) var(--b4);
  border-radius: var(--r-m);
  background: var(--vurgu-sol);
  color: var(--vurgu-koyu);
  font-size: var(--fs-s);
  margin-bottom: var(--b4);
}
.bilgi-kutu.sari { background: var(--uyari-arka); color: var(--uyari); }

/* Öğrenci Hakkında (notlar) */
.not-ekle { margin-bottom: var(--b3); }
.not-ekle .alan:last-of-type { margin-bottom: var(--b2); }
.not-liste { border-top: 1px solid var(--kenar); margin-top: var(--b2); }
.not-oge { padding: var(--b3) 0; border-bottom: 1px solid var(--kenar); }
.not-oge:last-child { border-bottom: none; }
.not-tarih { font-size: var(--fs-xs); color: var(--metin-sol); font-weight: 600; margin-bottom: 2px; }
.not-metin { white-space: pre-wrap; line-height: 1.45; }
.not-bos { margin: var(--b2) 0 0; font-size: var(--fs-s); }

/* Onay özeti */
.onay-ozet dl { margin: 0; }
.onay-ozet .satir { display: flex; justify-content: space-between; gap: var(--b3); padding: var(--b2) 0; border-bottom: 1px solid var(--kenar); }
.onay-ozet .satir:last-child { border-bottom: none; }
.onay-ozet dt { color: var(--metin-sol); }
.onay-ozet dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------------- Giriş sayfası ---------------- */
.giris-sayfa { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--b5); }
.giris-kutu { width: 100%; max-width: 380px; }
.giris-logo { text-align: center; margin-bottom: var(--b6); }
.giris-amblem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: var(--b3);
  color: var(--vurgu);
  background: var(--vurgu-sol);
  border: 1px solid color-mix(in srgb, var(--vurgu) 24%, transparent);
  border-radius: var(--r-l);
}
.giris-amblem .ikon-svg { width: 34px; height: 34px; }
.giris-logo .ad {
  font-family: var(--font-baslik);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: .01em;
}

.hata-kutu {
  background: var(--tehlike-arka);
  color: var(--tehlike);
  padding: var(--b3) var(--b4);
  border-radius: var(--r-m);
  font-size: var(--fs-s);
  margin-bottom: var(--b4);
}

/* ---------------- Boş durum ---------------- */
.bos-durum { text-align: center; padding: var(--b7) var(--b4); color: var(--metin-sol); }
.bos-durum .ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: var(--b2);
  color: var(--metin-sol);
  background: var(--yuzey-2);
  border-radius: var(--r-l);
}
.bos-durum .ikon .ikon-svg { width: 32px; height: 32px; }
.bos-durum p { margin: var(--b2) 0 0; }

/* ---------------- Yükleniyor ---------------- */
.yukleniyor { display: flex; align-items: center; justify-content: center; gap: var(--b3); padding: var(--b6); color: var(--metin-sol); }
.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid var(--kenar-sert);
  border-top-color: var(--vurgu);
  border-radius: 50%;
  animation: don 0.8s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
  * { transition-duration: .001ms !important; }
}

/* ---------------- Toast ---------------- */
.toast-kutu { position: fixed; left: 0; right: 0; bottom: var(--b5); display: flex; flex-direction: column; align-items: center; gap: var(--b2); z-index: 100; pointer-events: none; padding: 0 var(--b4); }
.toast {
  pointer-events: auto;
  max-width: 420px;
  width: 100%;
  padding: var(--b3) var(--b4);
  border-radius: var(--r-m);
  background: var(--metin);
  color: var(--arka);
  box-shadow: var(--golge);
  opacity: 0;
  transform: translateY(12px);
  transition: all .25s ease;
  font-size: var(--fs-s);
}
.toast.gorunur { opacity: 1; transform: translateY(0); }
.toast-basari { background: var(--vurgu); color: var(--vurgu-yazi); }
.toast-hata { background: var(--tehlike); color: var(--tehlike-yazi); }

/* ---------------- Modal ---------------- */
.modal-ort { position: fixed; inset: 0; background: rgba(28, 25, 21, .5); display: flex; align-items: center; justify-content: center; padding: var(--b5); z-index: 80; }
.modal { background: var(--yuzey); border: 1px solid var(--kenar); border-radius: var(--r-l); padding: var(--b5); width: 100%; max-width: 420px; box-shadow: var(--golge); }
.modal h3 { margin-top: 0; }

/* ---------------- Tema seçici ---------------- */
.tema-sec { position: relative; display: inline-flex; }
.tema-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 182px;
  padding: var(--b1);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-m);
  box-shadow: var(--golge);
}
.tema-oge {
  display: flex;
  align-items: center;
  gap: var(--b3);
  width: 100%;
  min-height: 44px;
  padding: var(--b2);
  border: none;
  background: transparent;
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: var(--fs-s);
  font-weight: 600;
  text-align: left;
  border-radius: var(--r-s);
  cursor: pointer;
  transition: background .15s ease;
}
.tema-oge:hover { background: var(--yuzey-2); }
.tema-oge:active { background: var(--yuzey-2); transform: translateY(1px); }
.tema-oge .ad { flex: 1; min-width: 0; }
.tema-oge .tik { display: inline-flex; color: var(--vurgu); visibility: hidden; }
.tema-oge[aria-checked="true"] .tik { visibility: visible; }
.tema-ornek {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: var(--r-s);
  border: 1px solid var(--kenar-sert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tema-ornek i { width: 10px; height: 10px; border-radius: 50%; display: block; }

/* Giriş ekranı tema düğmesi (sağ üst köşe) */
.giris-tema { position: fixed; top: var(--b3); right: var(--b3); z-index: 50; }
.giris-tema .ikon-btn { background: color-mix(in srgb, var(--yuzey) 70%, transparent); }

[hidden] { display: none !important; }