/* ==========================================================================
   Python Akademi — Stil Dosyası
   ==========================================================================
   Renkler Python'un resmi renklerinden seçildi: mavi ve sarı.
   Tüm sayfalar bu tek dosyayı kullanır. Değiştirmek istediğin renkleri
   aşağıdaki ":root" bölümünden ayarlayabilirsin.
   ========================================================================== */

:root {
  /* Renkler */
  --mavi: #3776ab;          /* Python mavisi - ana renk */
  --mavi-koyu: #2b5d88;
  --sari: #ffd43b;          /* Python sarısı - vurgu rengi */
  --yesil: #16a34a;
  --kirmizi: #dc2626;
  --turuncu: #f59e0b;

  --metin: #1f2937;
  --soluk: #6b7280;
  --cizgi: #e5e7eb;
  --zemin: #f7f9fc;
  --beyaz: #ffffff;
  --kod-zemin: #1e293b;

  /* Ölçüler */
  --yaricap: 10px;
  --golge: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --golge-buyuk: 0 10px 30px rgba(15, 23, 42, .10);
  --genislik: 1080px;
}

/* --------------------------------------------------------------------------
   Temel sıfırlama ve yazı tipi
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--metin);
  background: var(--zemin);
  line-height: 1.65;
}

h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .5rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }

a { color: var(--mavi); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

/* --------------------------------------------------------------------------
   Yerleşim
   -------------------------------------------------------------------------- */
.sarmal {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 0 1.25rem;
}

main { padding: 2rem 0 4rem; }

.bolum-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   Üst menü
   -------------------------------------------------------------------------- */
.ust-menu {
  background: var(--beyaz);
  border-bottom: 1px solid var(--cizgi);
  position: sticky;
  top: 0;
  z-index: 50;
}

.ust-menu .sarmal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
}

.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--metin);
}
.logo:hover { text-decoration: none; }

.logo-isaret {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--mavi);
  color: var(--sari);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 800;
}

.menu-baglantilar {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}

.menu-baglantilar a {
  padding: .45rem .75rem;
  border-radius: 8px;
  color: var(--soluk);
  font-size: .94rem;
  font-weight: 500;
}
.menu-baglantilar a:hover {
  background: var(--zemin);
  color: var(--metin);
  text-decoration: none;
}
.menu-baglantilar a.aktif {
  background: #eaf2fa;
  color: var(--mavi-koyu);
}

.kullanici-kutu {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
}

.rozet-kullanici {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  padding: .3rem .7rem;
  border-radius: 999px;
  color: var(--soluk);
}
.rozet-kullanici strong { color: var(--metin); }

/* --------------------------------------------------------------------------
   Düğmeler
   -------------------------------------------------------------------------- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--cizgi);
  background: var(--beyaz);
  color: var(--metin);
  font-size: .94rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.dugme:hover { background: var(--zemin); text-decoration: none; }
.dugme:active { transform: translateY(1px); }
.dugme:disabled { opacity: .55; cursor: not-allowed; }

.dugme-birincil {
  background: var(--mavi);
  border-color: var(--mavi);
  color: #fff;
}
.dugme-birincil:hover { background: var(--mavi-koyu); border-color: var(--mavi-koyu); }

.dugme-yesil { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.dugme-yesil:hover { background: #12813c; border-color: #12813c; }

.dugme-kirmizi { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.dugme-kirmizi:hover { background: #b91c1c; border-color: #b91c1c; }

.dugme-kucuk { padding: .35rem .7rem; font-size: .85rem; }

/* --------------------------------------------------------------------------
   Kartlar
   -------------------------------------------------------------------------- */
.kart {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  padding: 1.25rem;
  box-shadow: var(--golge);
}

.kart-tiklanabilir {
  display: block;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.kart-tiklanabilir:hover {
  text-decoration: none;
  border-color: var(--mavi);
  box-shadow: var(--golge-buyuk);
  transform: translateY(-2px);
}

/* Giriş yapmamış ziyaretçide konu başlıkları görünür ama TIKLANAMAZ.
   Hareketlenme efekti bilerek korunuyor; yalnızca imleç "el" işaretine
   dönüşmüyor, böylece tıklanabilirmiş izlenimi verilmiyor. */
.kart-pasif { cursor: default; }

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

.kart-baslik-satir {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35rem;
}

.kart p:last-child { margin-bottom: 0; }
.soluk { color: var(--soluk); }
.kucuk { font-size: .88rem; }
.orta { text-align: center; }

/* --------------------------------------------------------------------------
   Kahraman bölümü (ana sayfa)
   -------------------------------------------------------------------------- */
.kahraman {
  background: linear-gradient(135deg, var(--mavi) 0%, var(--mavi-koyu) 100%);
  color: #fff;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  margin-bottom: 2.5rem;
}
.kahraman h1 { color: #fff; font-size: 2.3rem; margin-bottom: .75rem; }
.kahraman p { color: #dbeafe; font-size: 1.08rem; max-width: 640px; }
.kahraman .dugme { margin-top: .5rem; margin-right: .5rem; }
.kahraman .dugme-sari {
  background: var(--sari);
  border-color: var(--sari);
  color: #3b3000;
}
.kahraman .dugme-sari:hover { background: #f0c419; border-color: #f0c419; }

/* --------------------------------------------------------------------------
   Form alanları
   -------------------------------------------------------------------------- */
.form-satir { margin-bottom: 1rem; }

label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .35rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  font-size: .96rem;
  font-family: inherit;
  color: var(--metin);
  background: var(--beyaz);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #bfdbfe;
  border-color: var(--mavi);
}

textarea { resize: vertical; min-height: 90px; }

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

.yardim { font-size: .82rem; color: var(--soluk); margin-top: .3rem; }

.form-dar { max-width: 460px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   İlerleme çubuğu
   -------------------------------------------------------------------------- */
.cubuk {
  height: 9px;
  background: #e8edf3;
  border-radius: 999px;
  overflow: hidden;
  margin: .5rem 0;
}
.cubuk-ic {
  height: 100%;
  background: var(--mavi);
  border-radius: 999px;
  transition: width .3s;
}
.cubuk-ic.tamam { background: var(--yesil); }

/* --------------------------------------------------------------------------
   Etiketler
   -------------------------------------------------------------------------- */
.etiket {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.etiket-gri    { background: #f1f5f9; color: var(--soluk); }
.etiket-mavi   { background: #e0edf9; color: var(--mavi-koyu); }
.etiket-yesil  { background: #dcfce7; color: #15803d; }
.etiket-sari   { background: #fef3c7; color: #92400e; }
.etiket-kirmizi{ background: #fee2e2; color: #b91c1c; }

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

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--beyaz);
  font-size: .93rem;
}
th, td {
  text-align: left;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--cizgi);
}
th {
  background: var(--zemin);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--soluk);
}
tbody tr:hover { background: #fafcff; }

/* --------------------------------------------------------------------------
   Uyarı kutuları
   -------------------------------------------------------------------------- */
.uyari {
  padding: .8rem 1rem;
  border-radius: 8px;
  border-left: 4px solid;
  margin-bottom: 1rem;
  font-size: .93rem;
}
.uyari-bilgi   { background: #eff6ff; border-color: var(--mavi); }
.uyari-basarili{ background: #f0fdf4; border-color: var(--yesil); }
.uyari-hata    { background: #fef2f2; border-color: var(--kirmizi); }
.uyari-uyari   { background: #fffbeb; border-color: var(--turuncu); }

/* --------------------------------------------------------------------------
   Ders (konu) sayfası
   -------------------------------------------------------------------------- */
.ders-yerlesim {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 1.75rem;
  align-items: start;
}

.konu-listesi {
  position: sticky;
  top: 80px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  padding: .6rem;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.konu-listesi h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--soluk);
  padding: .5rem .6rem;
  margin: 0;
}

.konu-listesi a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem;
  border-radius: 7px;
  color: var(--metin);
  font-size: .9rem;
  line-height: 1.35;
}
.konu-listesi a:hover { background: var(--zemin); text-decoration: none; }
.konu-listesi a.aktif { background: #eaf2fa; color: var(--mavi-koyu); font-weight: 600; }

.konu-no {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--soluk);
}
.konu-listesi a.tamamlandi .konu-no {
  background: var(--yesil);
  border-color: var(--yesil);
  color: #fff;
}

.ders-icerik {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  padding: 1.75rem 2rem;
  box-shadow: var(--golge);
}

/* Kart görünümü OLMADAN, yalnızca ders metni biçimlendirmesi.
   Ana sayfadaki "Hakkımda" gibi zaten bir kartın içinde duran
   metinler için kullanılır (çift çerçeve olmasın diye). */
.ders-icerik.kutusuz {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.ders-icerik.kutusuz h2:first-child { margin-top: 0; }

/* "Sık sorulan sorular" bölümü: ders metni biçimini kullanır ama
   cevap paragrafları soluk renkte olur (soru başlıkları koyu kalır). */
.sss-metni h3 { margin-top: 1.25rem; }
.sss-metni h3:first-child { margin-top: 0; }
.sss-metni p,
.sss-metni li { color: var(--soluk); }

/* Eğitmen panelindeki "Önizle" kutuları: alanın altında, kesikli
   çizgiyle ayrılmış küçük bir önizleme alanı. */
.onizleme-kutusu {
  margin-top: .6rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--cizgi);
}

.ders-icerik h2 {
  margin-top: 1.75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--cizgi);
}
.ders-icerik h2:first-child { margin-top: 0; }
.ders-icerik h3 { margin-top: 1.25rem; }
.ders-icerik ul { padding-left: 1.3rem; }
.ders-icerik li { margin-bottom: .3rem; }
.ders-icerik code {
  background: #f1f5f9;
  padding: .12rem .38rem;
  border-radius: 5px;
  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: .88em;
  color: #b91c1c;
}
.ders-icerik pre {
  background: var(--kod-zemin);
  color: #e2e8f0;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.55;
}
.ders-icerik pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: 1em;
}

/* Metin içindeki resimler — Markdown yazımı:  ![açıklama](resim.jpg) */
.ders-icerik img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 8px;
  border: 1px solid var(--cizgi);
  background: var(--beyaz);
}

/* İki kolonlu metin bloğu — Markdown yazımı:
     ::: sol
     soldaki metin
     ::: sag
     ![foto](resim.jpg)
     :::
   Sol kolon %70 metin, sağ kolon %30 görsel. Bloktan sonraki içerik
   yeniden tam genişlikte akar. */
.md-kolonlar {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1rem;
}
.md-kolon-sol > *:first-child { margin-top: 0; }
.md-kolon-sag img { margin-top: 0; }
.md-kolon-sag > *:last-child { margin-bottom: 0; }

/* Dar ekranda kolonlar alt alta iner. */
@media (max-width: 720px) {
  .md-kolonlar { grid-template-columns: 1fr; gap: 1rem; }
}
.ders-icerik blockquote {
  margin: 0 0 1rem;
  padding: .5rem 1rem;
  border-left: 4px solid var(--sari);
  background: #fffbeb;
  border-radius: 0 6px 6px 0;
}

.gorev-kutu {
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: #fffbeb;
  border: 1px dashed var(--turuncu);
  border-radius: var(--yaricap);
}
.gorev-kutu h3 { margin-top: 0; color: #92400e; }

/* --------------------------------------------------------------------------
   Kod editörü
   -------------------------------------------------------------------------- */
.editor {
  margin-top: 1.75rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  overflow: hidden;
  background: var(--beyaz);
}

.editor-ust {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .7rem .9rem;
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}
.editor-ust input {
  flex: 1 1 160px;
  min-width: 120px;
  background: var(--beyaz);
}
.editor-dugmeler { display: flex; gap: .45rem; flex-wrap: wrap; }

.editor-govde {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.editor-govde.tek { grid-template-columns: 1fr; }

.editor-kod {
  border: 0;
  border-radius: 0;
  min-height: 340px;
  padding: 1rem;
  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: .9rem;
  line-height: 1.55;
  background: var(--kod-zemin);
  color: #e2e8f0;
  resize: vertical;
  tab-size: 4;
}
.editor-kod:focus { outline: none; box-shadow: inset 0 0 0 2px var(--mavi); }

.editor-cikti {
  margin: 0;
  padding: 1rem;
  min-height: 340px;
  max-height: 480px;
  overflow: auto;
  background: #0f172a;
  color: #cbd5e1;
  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: .88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 1px solid #334155;
}
.editor-cikti .cikti-hata { color: #fca5a5; }
.editor-cikti .cikti-bilgi { color: #7dd3fc; }

/* Çıktı alanına taşınan grafikler (matplotlib vb.)
   Bu öğeler normalde sayfanın en altına eklenir; editör JS'i onları
   buraya taşır ki kodun çıktısının hemen altında görünsünler. */
.cikti-grafik {
  display: block;
  margin: .75rem 0;
  padding: .6rem;
  background: #fff;
  border-radius: 6px;
  line-height: 0;            /* resmin altındaki boşluk çizgisini kaldırır */
}
.cikti-grafik canvas,
.cikti-grafik img {
  display: block;
  max-width: 100%;
  height: auto;
}

.editor-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .6rem .9rem;
  border-top: 1px solid var(--cizgi);
  background: var(--zemin);
  font-size: .85rem;
  color: var(--soluk);
}

.nokta {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--soluk);
  margin-right: .4rem;
}
.nokta.calisiyor { background: var(--turuncu); animation: yanip 1s infinite; }
.nokta.hazir { background: var(--yesil); }
.nokta.hata { background: var(--kirmizi); }

@keyframes yanip { 50% { opacity: .3; } }

/* --------------------------------------------------------------------------
   Yardımcı sınıflar
   -------------------------------------------------------------------------- */
.satir { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.aralik { justify-content: space-between; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1rem; }
.gizli { display: none !important; }

.yukleniyor {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--soluk);
}

/* --------------------------------------------------------------------------
   Alt bilgi
   -------------------------------------------------------------------------- */
.alt-bilgi {
  border-top: 1px solid var(--cizgi);
  background: var(--beyaz);
  padding: 1.5rem 0;
  color: var(--soluk);
  font-size: .88rem;
}

/* --------------------------------------------------------------------------
   Küçük ekranlar (telefon / tablet)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .ders-yerlesim { grid-template-columns: 1fr; }
  .konu-listesi {
    position: static;
    max-height: none;
  }
  .editor-govde { grid-template-columns: 1fr; }
  .editor-cikti { border-left: 0; border-top: 1px solid #334155; }
  .kahraman { padding: 2rem 1.25rem; }
  .kahraman h1 { font-size: 1.7rem; }
  .ders-icerik { padding: 1.25rem; }
  .ust-menu .sarmal { min-height: auto; padding-top: .6rem; padding-bottom: .6rem; }
  .menu-baglantilar { gap: 0; }
  .menu-baglantilar a { padding: .4rem .55rem; font-size: .88rem; }
}

/* ==========================================================================
   TAKVİM
   Haftalık ızgara. Sayfa salt okunurdur; düzenleme eğitmen panelinden
   yapılır. Geniş tablo yatay kaydırılır, saat sütunu ve gün başlıkları
   sabit kalır.
   ========================================================================== */

.tk-sarmal {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  box-shadow: var(--golge);
  max-height: 72vh;
  overflow: auto;
}

.tk-tablo {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .82rem;
  min-width: 760px;
}

.tk-tablo th,
.tk-tablo td {
  padding: .3rem .5rem;
  border-bottom: 1px solid var(--cizgi);
  border-right: 1px solid var(--cizgi);
  text-align: left;
  white-space: nowrap;
}

/* Saat sütunu (sol) sabit */
.tk-saat {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 64px;
  background: var(--zemin);
  color: var(--soluk);
  font-weight: 600;
}

/* Gün başlıkları (üst) sabit */
.tk-tablo thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--zemin);
  color: var(--metin);
}
.tk-tablo thead th.tk-saat { z-index: 4; }

.tk-gun { min-width: 112px; }
.tk-gun .tk-tarih {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  color: var(--soluk);
}
.tk-gun.tk-bugun { background: #e8f1fa; }

/* Hücre durumları */
.tk-hucre { min-width: 112px; height: 26px; }
.tk-belirsiz { background: #fbfcfd; }
.tk-musait   { background: #dcfce7; }
.tk-mesgul   { background: #fee2e2; }
.tk-rezerve  { background: #dbeafe; }

.tk-tablo td.tk-rezerve { font-weight: 600; color: #1e40af; }
.tk-tablo td.tk-mesgul  { font-weight: 600; color: #991b1b; }

/* Renk açıklaması şeridindeki örnekler */
.tk-ornek {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--cizgi);
  font-size: .78rem;
  font-weight: 600;
}
.tk-ornek.tk-musait   { color: #15803d; }
.tk-ornek.tk-mesgul   { color: #991b1b; }
.tk-ornek.tk-rezerve  { color: #1e40af; }
.tk-ornek.tk-belirsiz { color: var(--soluk); }