/* $grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1200px,
  xl: 1400px,
  xxl: 1600px
); */



body:not(.quarto-dark), body:not(.quarto-dark) #quarto-sidebar {
    background-color: #faf9f6; /* Açık gri arka plan rengi */
}

/* #quarto-sidebar:not(.quarto-dark) {
    background-color: #faf9f6;
} */

@media (min-width: 1600px) {

    #quarto-document-content {
        max-width: 1200px;
        /* İçerik alanının maksimum genişliği */
    }

    body.floating .page-columns {
        display: grid;
        gap: 0;
        grid-template-columns:
            [screen-start] 1em [screen-start-inset] 1fr
            /* Dış sol boşluk (Eşit ortalama için 1fr yeterli) */
            [page-start] minmax(25px, 50px) [page-start-inset] 180px
            /* SOL MENÜ GENİŞLİĞİ (Eskiden maksimum 150px'di, genişlettik) */
            [body-start-outset] minmax(25px, 50px) [body-start] 10em [body-content-start] minmax(600px, 960px)
            /* ANA METİN OKUMA ALANI (800'den 960px'e çıkardık, inanılmaz ferahlar) */
            [body-content-end] 10em [body-end] minmax(25px, 50px) [body-end-outset] 180px
            /* SAĞ MENÜ GENİŞLİĞİ (Genişlettik) */
            [page-end-inset] minmax(25px, 50px) [page-end] 1fr
            /* Dış sağ boşluk */
            [screen-end-inset] 1em [screen-end];
    }
}

@media (min-width: 1150px) and (max-width: 1300px) {

    #quarto-document-content {
        max-width: 1200px;
        /* İçerik alanının maksimum genişliği */
    }

    body.floating .page-columns {
        display: grid;
        gap: 0;
        grid-template-columns:
            [screen-start] 1em [screen-start-inset] 1fr
            /* Dış sol boşluk (Eşit ortalama için 1fr yeterli) */
            [page-start] minmax(25px, 50px) [page-start-inset] 180px
            /* SOL MENÜ GENİŞLİĞİ (Eskiden maksimum 150px'di, genişlettik) */
            [body-start-outset] minmax(25px, 50px) [body-start] 2em [body-content-start] minmax(600px, 960px)
            /* ANA METİN OKUMA ALANI (800'den 960px'e çıkardık, inanılmaz ferahlar) */
            [body-content-end] 2em [body-end] minmax(25px, 50px) [body-end-outset] 180px
            /* SAĞ MENÜ GENİŞLİĞİ (Genişlettik) */
            [page-end-inset] minmax(25px, 50px) [page-end] 1fr
            /* Dış sağ boşluk */
            [screen-end-inset] 1em [screen-end];
    }

}

/* Soldaki menünün satır yüksekliği ve elemanlar arası boşluk ayarı */
#quarto-sidebar .sidebar-item {
    line-height: 1.2;
    /* Uzun bir menü ismi alt satıra taşarsa aralarındaki boşluğu açar */
    margin-bottom: 5px;
    /* Farklı menü başlıklarının birbirinden ne kadar uzak duracağını belirler */
}

/* ==========================================================================
   1. TEMA DEĞİŞKENLERİ (LIGHT & DARK)
   ========================================================================== */
:root {
  --academic-bg: #FAF6EE;
  --academic-text: #2C2A27;

  --color-theory:   #2B4C7E;  /* Teorem, Lemma, Sonuç, Önerme, Sanı */
  --color-base:     #0D6E6A;  /* Tanım, Algoritma */
  --color-practice: #9C3F1E;  /* Örnek, Egzersiz — [TWEAK] eski: #B24A24, daha derin/kiremit */
  --color-remark:   #5C5346;  /* Not — [TWEAK] eski: #736B60, kontrast payı için koyulaştırıldı */
}

/* Koyu Tema Aktif Olduğunda (Quarto dark mode) */
body.quarto-dark,
html[data-theme="dark"] {
  --academic-bg: #1E1D1B;
  --academic-text: #E6E1DA;

  --color-theory:   #8AB4F8;
  --color-base:     #4DB6AC;
  --color-practice: #E8A088;  /* [TWEAK] eski: #FFAB91, doygunluk kısıldı, diğer pastellerle uyum */
  --color-remark:   #A89F91;
}

/* ==========================================================================
   2. AKADEMİK BİLEŞENLERİN ORTAK STİLİ
   --------------------------------------------------------------------------
   ÖNEMLİ: Quarto'nun crossref theorem ortamları (#thm-, #lem-, #cor-, #prop-,
   #conj-, #def-, #exm-, #exr-, #sol- vb.) HEPSİ ortak "theorem" class'ını
   alır, tip-özel class (definition, example...) İKİNCİ class olarak eklenir:
       <div class="theorem definition">
   Başlık span'i de tipe göre değişmez, muhtemelen hep ".theorem-title"
   class'ını kullanır. Bu yüzden ayrım ARTIK "-title" son ekiyle değil,
   div üzerindeki BİLEŞİK class ile yapılıyor (örn. .theorem.definition).
   İki class'lı seçici tek class'lı .theorem'dan daha özgül olduğu için
   sıralamadan bağımsız olarak kazanır.

   NOT: Eğer .remark sizde ayrı bir callout (crossref theorem ailesinden
   değil) olarak render ediliyorsa aşağıdaki "bağımsız .remark" bloğu
   devrede kalır. Eğer o da .theorem class'ı alıyorsa .theorem.remark
   bloğu otomatik devreye girer — ikisi de tanımlı, güvenlik için.
   ========================================================================== */

.theorem,
.remark {
  background-color: var(--academic-bg) !important;
  color: var(--academic-text) !important;
  border-left-width: 4px;
  border-left-style: solid;
  padding: 1em 1.2em;
  margin: 1.5em 0;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Başlık ortak biçimi: ikon + metin hizası */
.theorem-title,
.remark-title {
  font-size: 1em !important; /* tüm gruplarda garanti aynı boyut */
  font-weight: bold;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.theorem-title::before,
.remark-title::before {
  font-weight: 400;
  font-size: 0.95em;
  line-height: 1;
}

/* ==========================================================================
   3. GRUPLARA GÖRE RENK + BORDER STİLİ + İKON
   (Varsayılan .theorem = Teori Grubu; diğer gruplar bileşik class ile override edilir)
   ========================================================================== */

/* A. Teori Grubu (varsayılan) — düz, kalın çizgi | sembol: ▲ */
.theorem {
  border-left-color: var(--color-theory) !important;
  border-left-style: solid;
}
.theorem-title {
  color: var(--color-theory) !important;
}
.theorem-title::before {
  content: "▲";
}

/* B. Temel Tanımlar — düz, kalın çizgi | sembol: ≡ */
.theorem.definition,
.theorem.algorithm {
  border-left-color: var(--color-base) !important;
  border-left-style: solid;
}
.theorem.definition .theorem-title,
.theorem.algorithm .theorem-title {
  color: var(--color-base) !important;
}
.theorem.definition .theorem-title::before,
.theorem.algorithm .theorem-title::before {
  content: "≡";
}

/* C. Pratik ve Örnekler — noktalı çizgi | sembol: ▷ */
.theorem.example,
.theorem.exercise,
.theorem.solution {
  border-left-color: var(--color-practice) !important;
  border-left-style: dashed;
}
.theorem.example .theorem-title,
.theorem.exercise .theorem-title,
.theorem.solution .theorem-title {
  color: var(--color-practice) !important;
}
.theorem.example .theorem-title::before,
.theorem.exercise .theorem-title::before,
.theorem.solution .theorem-title::before {
  content: "▷";
}

/* D. Ek Notlar (remark .theorem ailesindeyse) — ince noktalı çizgi | sembol: ✎ */
.theorem.remark {
  border-left-color: var(--color-remark) !important;
  border-left-width: 3px;
  border-left-style: dotted;
}
.theorem.remark .theorem-title {
  color: var(--color-remark) !important;
}
.theorem.remark .theorem-title::before {
  content: "✎";
}

/* D-2. Ek Notlar (remark .theorem ailesinde DEĞİLSE, bağımsız callout ise) */
.remark:not(.theorem) {
  border-left-color: var(--color-remark) !important;
  border-left-width: 3px;
  border-left-style: dotted;
}
.remark:not(.theorem) .remark-title,
.remark-title {
  color: var(--color-remark) !important;
}
.remark-title::before {
  content: "✎";
}

/* not last child */
ul li:not(:last-child){
  margin-bottom: 0.5em;
}

ul{
  margin-bottom: 0;
}

/* ==========================================================================
   4. İSPAT SONU İŞARETİ (QED)
   --------------------------------------------------------------------------
   VitePress'te <span style="float:right"> ile sağa yaslanan ■ / ⊠ işaretleri
   burada [$\blacksquare$]{.qed} olarak yazılır; float yerine blok hizalama
   kullanıldığı için callout/teorem kutularının içinde taşma yapmaz.
   ========================================================================== */
.qed {
  display: block;
  text-align: right;
  margin-top: -0.5em;
}

/* ==========================================================================
   5. TABLOLAR
   --------------------------------------------------------------------------
   Eski notlarda tablolar <div style="display:flex"> ile ortalanıyordu.
   Artık bu iş CSS'e bırakıldı; dar ekranlarda tablo kendi içinde kayar.
   ========================================================================== */
.cell-output-display > table,
.quarto-figure table,
#quarto-document-content > table,
.theorem table,
.callout-body table {
  margin-left: auto;
  margin-right: auto;
}

#quarto-document-content table {
  display: table;
  max-width: 100%;
}

/* Geniş tabloların sayfayı yatay kaydırmasını engelle */
.table-responsive-wrap {
  overflow-x: auto;
  max-width: 100%;
}

/* ==========================================================================
   6. İNTERAKTİF HESAPLAYICILAR
   --------------------------------------------------------------------------
   Eski VitePress sürümündeki Vue bileşenlerinin (Sezar, Affine, Legendre)
   çerçevesiz karşılığı. Kutu, Bootstrap değişkenleri üzerinden hem açık
   hem koyu temada doğru renkleri alır.
   ========================================================================== */
.hesaplayici {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-left: 4px solid var(--color-base);
  border-radius: 0 8px 8px 0;
  background-color: var(--academic-bg);
  color: var(--academic-text);
  padding: 1.2em 1.4em;
  margin: 1.5em 0;
}

.hesaplayici h4 {
  margin: 0 0 1em 0;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--color-base);
  text-align: center;
}

.hesaplayici label {
  display: block;
  margin-bottom: 0.9em;
  font-size: 0.95em;
}

.hesaplayici label > span {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35em;
}

.hesaplayici input[type="text"],
.hesaplayici input[type="number"],
.hesaplayici select {
  width: 100%;
  padding: 0.5em 0.7em;
  border-radius: 6px;
  border: 1px solid var(--bs-border-color, #ced4da);
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  font-family: inherit;
  font-size: 1em;
}

.hesaplayici input[type="range"] {
  width: 100%;
  accent-color: var(--color-base);
}

.hesaplayici .hesap-satir {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.hesaplayici .hesap-satir > label {
  flex: 1 1 8em;
}

.hesaplayici output {
  display: block;
  margin-top: 0.4em;
  padding: 0.7em 0.9em;
  border-radius: 6px;
  background: var(--bs-body-bg, #fff);
  border: 1px dashed var(--color-base);
  font-family: var(--bs-font-monospace, ui-monospace, "Cascadia Code", Consolas, monospace);
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0.08em;
  word-break: break-word;
  min-height: 1.4em;
}

.hesaplayici .hesap-not {
  margin: 0.6em 0 0 0;
  font-size: 0.85em;
  opacity: 0.75;
}

.hesaplayici .hesap-hata {
  color: var(--color-practice);
  font-weight: 600;
}

/* ==========================================================================
   7. DERS KATALOĞU LİSTELERİ
   --------------------------------------------------------------------------
   Portal tarafındaki (dersler/index.qmd) ders bağlantıları.
   ========================================================================== */
.ders-listesi ul {
  list-style-type: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6em 1.2em;
}

.ders-listesi li {
  margin-bottom: 0 !important;
}

.ders-listesi a {
  display: block;
  padding: 0.65em 0.9em;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-left: 3px solid var(--color-base);
  border-radius: 0 6px 6px 0;
  text-decoration: none;
  font-weight: 500;
  color: inherit;
  transition: border-left-color 0.15s ease, transform 0.15s ease;
}

.ders-listesi a:hover,
.ders-listesi a:focus-visible {
  border-left-color: var(--color-practice);
  transform: translateX(3px);
}

/* ==========================================================================
   8. ANA SAYFA
   ========================================================================== */
.giris-alani {
  text-align: center;
  padding: 3.5rem 1rem 2.5rem 1rem;
}

.giris-alani h1 {
  border-bottom: none;
  margin-bottom: 0.4em;
}

.giris-alani h3 {
  font-weight: 400;
  max-width: 40em;
  margin: 0 auto 1.8em auto;
  opacity: 0.9;
}

.giris-alani .btn {
  margin: 0 0.4em 0.6em 0.4em;
  font-weight: 600;
}

.merhaba-alani {
  max-width: 46em;
  margin: 0 auto;
  padding: 0 1rem 2.5rem 1rem;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.7;
}

.merhaba-alani h2 {
  border-bottom: none;
}

.ozellik-alani {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  max-width: 60em;
  margin: 0 auto;
  padding: 2rem 1rem 3rem 1rem;
}

.ozellik-alani h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--color-base);
  border-bottom: none;
}

.ozellik-alani > h3 {
  padding-top: 1.2em;
  border-top: 2px solid var(--color-base);
}

.ozellik-alani p {
  margin-bottom: 0;
  opacity: 0.9;
}