/* $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; /* Light grey background colour */
}

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

@media (min-width: 1600px) {

    #quarto-document-content {
        max-width: 1200px;
        /* Maximum width of the content area */
    }

    body.floating .page-columns {
        display: grid;
        gap: 0;
        grid-template-columns:
            [screen-start] 1em [screen-start-inset] 1fr
            /* Outer left gutter (1fr is enough for equal centring) */
            [page-start] minmax(25px, 50px) [page-start-inset] 180px
            /* LEFT SIDEBAR WIDTH (used to be max 150px; widened) */
            [body-start-outset] minmax(25px, 50px) [body-start] 10em [body-content-start] minmax(600px, 960px)
            /* MAIN TEXT READING AREA (raised from 800 to 960px; much more breathing room) */
            [body-content-end] 10em [body-end] minmax(25px, 50px) [body-end-outset] 180px
            /* RIGHT SIDEBAR WIDTH (widened) */
            [page-end-inset] minmax(25px, 50px) [page-end] 1fr
            /* Outer right gutter */
            [screen-end-inset] 1em [screen-end];
    }
}

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

    #quarto-document-content {
        max-width: 1200px;
        /* Maximum width of the content area */
    }

    body.floating .page-columns {
        display: grid;
        gap: 0;
        grid-template-columns:
            [screen-start] 1em [screen-start-inset] 1fr
            /* Outer left gutter (1fr is enough for equal centring) */
            [page-start] minmax(25px, 50px) [page-start-inset] 180px
            /* LEFT SIDEBAR WIDTH (used to be max 150px; widened) */
            [body-start-outset] minmax(25px, 50px) [body-start] 2em [body-content-start] minmax(600px, 960px)
            /* MAIN TEXT READING AREA (raised from 800 to 960px; much more breathing room) */
            [body-content-end] 2em [body-end] minmax(25px, 50px) [body-end-outset] 180px
            /* RIGHT SIDEBAR WIDTH (widened) */
            [page-end-inset] minmax(25px, 50px) [page-end] 1fr
            /* Outer right gutter */
            [screen-end-inset] 1em [screen-end];
    }

}

/* Line height and item spacing of the left sidebar menu */
#quarto-sidebar .sidebar-item {
    line-height: 1.2;
    /* Opens up the spacing when a long menu label wraps onto a second line */
    margin-bottom: 5px;
    /* Sets how far apart the different menu entries sit from each other */
}

/* ==========================================================================
   1. THEME VARIABLES (LIGHT & DARK)
   ========================================================================== */
:root {
  --academic-bg: #FAF6EE;
  --academic-text: #2C2A27;

  --color-theory:   #2B4C7E;  /* Theorem, Lemma, Corollary, Proposition, Conjecture */
  --color-base:     #0D6E6A;  /* Definition, Algorithm */
  --color-practice: #9C3F1E;  /* Example, Exercise — [TWEAK] old: #B24A24, deeper / more brick-red */
  --color-remark:   #5C5346;  /* Remark — [TWEAK] old: #736B60, darkened for contrast headroom */

  /* Curriculum box (course contents panel) */
  --curriculum-panel:       #EAF1EF;
  --curriculum-panel-border: #CBDCD7;
}

/* When the dark theme is active (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] old: #FFAB91, saturation reduced to harmonise with the other pastels */
  --color-remark:   #A89F91;

  --curriculum-panel:       #1A1E1E;
  --curriculum-panel-border: #2F3534;
}

/* ==========================================================================
   2. SHARED STYLE OF THE ACADEMIC COMPONENTS
   --------------------------------------------------------------------------
   IMPORTANT: Quarto's crossref theorem environments (#thm-, #lem-, #cor-, #prop-,
   #conj-, #def-, #exm-, #exr-, #sol- etc.) ALL receive the shared "theorem" class,
   and the type-specific class (definition, example...) is added as a SECOND class:
       <div class="theorem definition">
   The title span does not change by type either; it most likely always uses the
   ".theorem-title" class. So the distinction is NO LONGER made via a "-title"
   suffix but via the COMPOUND class on the div (e.g. .theorem.definition).
   Because a two-class selector is more specific than the single-class .theorem,
   it wins regardless of source order.

   NOTE: If .remark renders for you as a separate callout (not part of the
   crossref theorem family), the "standalone .remark" block below stays in
   effect. If it also gets the .theorem class, the .theorem.remark block kicks
   in automatically — both are defined, for safety.
   ========================================================================== */

.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);
}

/* Shared title format: icon + text alignment
   --------------------------------------------------------------------------
   CAUTION: The title is deliberately left INLINE here.
   Previously "display: inline-flex" was used; that turned the title into an
   atomic inline box and derived the box's baseline from the first flex item,
   i.e. the ::before icon. Because the icon's font size varies by type
   (≡ at 1.25em in definitions, ▲ at 0.95em in theorems), the text right
   after the title shifted sometimes up and sometimes down.

   Left inline, the title, the icon and the body text share the same baseline;
   the alignment is always correct regardless of type. */
.theorem-title,
.remark-title {
  font-size: 1em !important; /* guaranteed identical size across all groups */
  font-weight: bold;
  letter-spacing: 0.02em;
}

.theorem-title::before,
.remark-title::before {
  font-weight: 400;
  font-size: 0.95em;
  margin-right: 0.45em;
}

/* ==========================================================================
   3. COLOUR + BORDER STYLE + ICON PER GROUP
   (Default .theorem = Theory group; the other groups are overridden via the compound class)
   ========================================================================== */

/* A. Theory group (default) — solid, thick line | symbol: ▲ */
.theorem {
  border-left-color: var(--color-theory) !important;
  border-left-style: solid;
}
.theorem-title {
  color: var(--color-theory) !important;
}
.theorem-title::before {
  content: "▲";
}

/* B. Basic definitions — solid, thick line | symbol: ≡ */
.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: "≡";
  /* The ≡ glyph looked optically smaller than the ▲ and ▷ marks;
     it was enlarged a notch so it appears at the same weight as the others. */
  font-size: 1.25em;
  font-weight: 600;
}

/* C. Practice and examples — dashed line | symbol: ▷ */
.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. Remarks (if remark is part of the .theorem family) — thin dotted line | symbol: ✎ */
.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. Remarks (if remark is NOT part of the .theorem family, i.e. a standalone callout) */
.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: "✎";
}

/* Breathing room between list items */
ul li:not(:last-child) {
  margin-bottom: 0.5em;
}

/* The bottom margin is removed ONLY for lists inside boxes.
   Removing it in general text made the paragraph following a list stick
   to the list, and the group headings on curriculum pages looked crooked. */
.theorem ul:last-child,
.theorem ol:last-child,
.callout-body ul:last-child,
.callout-body ol:last-child,
.collapsible-body ul:last-child,
.collapsible-body ol:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   3b. COLLAPSIBLE SOLUTION / PROOF BLOCKS
   --------------------------------------------------------------------------
   scripts/collapsible.lua converts these blocks into <details> elements.
   They were deliberately designed "box-less": since they sit inside a
   theorem/example box, a second frame created a double indent on mobile.
   Here there is only a thin divider and a clickable title.
   ========================================================================== */
.collapsible {
  margin: 1em 0 0 0;
  border-top: 1px solid var(--bs-border-color, #ddd8ce);
  padding-top: 0.6em;
}

.collapsible-title {
  cursor: pointer;
  list-style: none;          /* hide the default ▶ triangle */
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  font-size: 0.95em;
  color: var(--color-practice);
  user-select: none;
  padding: 0.15em 0;
}

/* Remove Safari/Chrome's own marker */
.collapsible-title::-webkit-details-marker {
  display: none;
}

/* Our own expand/collapse marker. The symbol itself and the rotation angle
   are set per block type in section 13. */
.collapsible-title::before {
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 0.9em;
}

.collapsible-title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.collapsible-body {
  padding-top: 0.5em;
}

.collapsible-body > *:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   3c. CONTENT LINKS
   --------------------------------------------------------------------------
   Bootstrap's bright blue + underlined links were distracting in the
   lecture text. In-text links use a plain highlight that matches the
   theme colour instead.
   ========================================================================== */
#quarto-document-content a:not(.btn):not(.catalog-back):not(.quarto-navigation-tool),
.callout-body a:not(.btn) {
  color: var(--color-base);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 110, 106, 0.35);
  transition: border-color 0.15s ease, color 0.15s ease;
}

#quarto-document-content a:not(.btn):not(.catalog-back):hover,
#quarto-document-content a:not(.btn):not(.catalog-back):focus-visible {
  color: var(--color-practice);
  border-bottom-color: currentColor;
  text-decoration: none;
}

/* Heading anchor links, footnotes and crossrefs stay without the underline */
#quarto-document-content a.quarto-xref,
#quarto-document-content a.footnote-ref,
#quarto-document-content h1 a,
#quarto-document-content h2 a,
#quarto-document-content h3 a,
#quarto-document-content h4 a,
#quarto-document-content .toc-actions a,
#quarto-document-content .anchorjs-link {
  border-bottom: none;
}

/* ==========================================================================
   3d. CALLOUT BOXES (note / tip / important / warning / caution)
   --------------------------------------------------------------------------
   Quarto's default callout look (filled coloured header strip, Bootstrap
   icon, square white box) did not match the site's theorem/definition
   boxes. Callouts are redrawn here as siblings of that family: the same
   cream background, a left stripe in the type-specific colour, glyph +
   coloured title, soft corner and the same shadow. The default icon and
   strip are overridden completely.

   Type mapping (the left-stripe style follows the same logic as the theorem family):
     note      → ✎  grey      (3px dotted)  — identical to the crossref "Not" (remark) box
     tip       → ✦  turquoise (4px solid)
     important → !  brick-red (4px solid)
     warning   → △  amber     (4px dashed)
     caution   → ◇  amber     (4px dashed)
   ========================================================================== */
:root {
  /* Amber tone added to the palette for warning/caution callouts */
  --callout-uyari: #8A5A18;
}

body.quarto-dark,
html[data-theme="dark"] {
  --callout-uyari: #D9A85B;
}

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

/* Cancel the default filled header strip; the title sits on the box background */
div.callout.callout-style-default > .callout-header {
  background: transparent !important;
  opacity: 1;
  padding: 1em 1.2em 0 1.2em;
  margin-bottom: 0;
  font-size: 1em;
}

/* Remove Bootstrap's svg icon entirely (both default and simple) */
.callout .callout-icon-container {
  display: none !important;
}

/* Title: same typography as theorem titles, painted in the type colour */
div.callout.callout-style-default .callout-title-container {
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--color-remark);
}

/* Glyph: same family and size as the theorem icons */
div.callout.callout-style-default .callout-title-container::before {
  font-weight: 400;
  font-size: 0.95em;
  margin-right: 0.45em;
}

div.callout.callout-style-default > .callout-body-container {
  padding: 0.35em 1.2em 1em 1.2em;
}

/* In a callout without a title the body gets the full inner padding */
div.callout.callout-style-default:not(.callout-titled) > .callout-body-container {
  padding: 1em 1.2em;
}

/* --- Note: same visual language as the crossref "Not" (remark) box --- */
div.callout-note.callout-style-default {
  border-left: 3px dotted var(--color-remark);
}
div.callout-note.callout-style-default .callout-title-container {
  color: var(--color-remark);
}
div.callout-note.callout-style-default .callout-title-container::before {
  content: "✎";
}

/* --- Tip --- */
div.callout-tip.callout-style-default {
  border-left-color: var(--color-base);
}
div.callout-tip.callout-style-default .callout-title-container {
  color: var(--color-base);
}
div.callout-tip.callout-style-default .callout-title-container::before {
  content: "✦";
}

/* --- Important --- */
div.callout-important.callout-style-default {
  border-left-color: var(--color-practice);
}
div.callout-important.callout-style-default .callout-title-container {
  color: var(--color-practice);
}
div.callout-important.callout-style-default .callout-title-container::before {
  content: "!";
  font-weight: 700;
}

/* --- Warning --- */
div.callout-warning.callout-style-default {
  border-left-color: var(--callout-uyari);
  border-left-style: dashed;
}
div.callout-warning.callout-style-default .callout-title-container {
  color: var(--callout-uyari);
}
div.callout-warning.callout-style-default .callout-title-container::before {
  content: "△";
}

/* --- Caution --- */
div.callout-caution.callout-style-default {
  border-left-color: var(--callout-uyari);
  border-left-style: dashed;
}
div.callout-caution.callout-style-default .callout-title-container {
  color: var(--callout-uyari);
}
div.callout-caution.callout-style-default .callout-title-container::before {
  content: "◇";
}

/* --- Simple look (appearance="simple"): the short informational notes
       on curriculum pages. Same family, quieter voice. --- */
div.callout.callout-style-simple {
  background-color: var(--academic-bg) !important;
  color: var(--academic-text);
  border: none;
  border-left: 3px dotted var(--color-remark);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0.9em 1.2em;
  margin: 1.5em 0;
}

div.callout.callout-style-simple > .callout-body > *:last-child,
div.callout.callout-style-default .callout-body > *:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   4. END-OF-PROOF MARK (QED)
   --------------------------------------------------------------------------
   The ■ / ⊠ marks that were right-aligned with <span style="float:right"> in
   VitePress are written here as [$\blacksquare$]{.qed}; since block alignment
   is used instead of float, they do not overflow inside callout/theorem boxes.
   ========================================================================== */
.qed {
  display: block;
  text-align: right;
  margin-top: -0.5em;
}

/* ==========================================================================
   5. TABLES
   --------------------------------------------------------------------------
   In the old notes tables were centred with <div style="display:flex">.
   That job is now left to CSS; on narrow screens the table scrolls within itself.
   ========================================================================== */
.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%;
}

/* Prevent wide tables from scrolling the page horizontally */
.table-responsive-wrap {
  overflow-x: auto;
  max-width: 100%;
}

/* ==========================================================================
   6. INTERACTIVE CALCULATORS
   --------------------------------------------------------------------------
   Framework-free counterpart of the Vue components (Caesar, Affine, Legendre)
   from the old VitePress version. Through the Bootstrap variables the box
   picks up the correct colours in both the light and the dark theme.
   ========================================================================== */
.calculator {
  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;
}

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

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

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

.calculator input[type="text"],
.calculator input[type="number"],
.calculator 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;
}

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

.calculator .calc-row {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.calculator .calc-row > label {
  flex: 1 1 8em;
}

.calculator 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;
}

.calculator .calc-note {
  margin: 0.6em 0 0 0;
  font-size: 0.85em;
  opacity: 0.75;
}

.calculator .calc-error {
  color: var(--color-practice);
  font-weight: 600;
}

/* ==========================================================================
   7. COURSE CATALOG LISTS
   --------------------------------------------------------------------------
   The course links on the portal side (dersler/index.qmd).
   ========================================================================== */
.course-list ul {
  list-style-type: lower-greek;
  padding-left: 2.2em;
  margin-bottom: 0;
}

/* Colour of the Greek-letter marker (the li's own colour is applied to the marker) */
.course-list li {
  color: var(--color-base);
  margin-bottom: 0.45em !important;
  font-size: 1.15rem;
}

.course-list a {
  color: var(--academic-text);
  text-decoration: none;
  transition: color 0.15s ease;
}

.course-list a:hover,
.course-list a:focus-visible {
  color: var(--color-base);
  text-decoration: none;
}

/* ==========================================================================
   8. LANDING PAGE
   --------------------------------------------------------------------------
   A single centred column. Title, tagline, two buttons and a short intro
   text; nothing else. Because all of it is written as raw HTML, Quarto
   does not wrap the headings in <section>s and the alignment is not broken.
   ========================================================================== */
.landing {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.25rem 5rem 1.25rem;
  text-align: center;
}

/* Quarto moves the first <h1> on the page into the title block (keeping its class).
   That is why we centre both the title and the block that wraps it. */
#title-block-header:has(.landing-title) {
  max-width: 42rem;
  margin: 0 auto;
  padding: 4.5rem 1.25rem 0 1.25rem;
  border-bottom: none;
  text-align: center;
}

.landing-title {
  font-size: clamp(2.2rem, 6vw, 3.2rem) !important;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.6rem 0;
  border-bottom: none;
  padding-bottom: 0;
  text-align: center;
}

.landing-tagline {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  font-weight: 400;
  opacity: 0.85;
  margin: 0 auto 2.2rem auto;
  max-width: 34rem;
  text-wrap: balance;
}

.landing-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
}

.landing-buttons .btn {
  font-weight: 600;
  padding: 0.6rem 1.6rem;
}

.landing-divider {
  width: 4rem;
  margin: 3rem auto;
  border: 0;
  border-top: 2px solid var(--color-base);
  opacity: 0.5;
}

.landing-text {
  font-size: 1.05rem;
  line-height: 1.75;
  opacity: 0.9;
}

.landing-text p {
  margin-bottom: 1.1em;
}

.landing-text p:last-child {
  margin-bottom: 0;
}

/* On the landing page Quarto's title block and page-bottom spacing are unnecessary */
body.quarto-light .landing,
body.quarto-dark .landing {
  min-height: 0;
}

/* ==========================================================================
   8b. BACK-TO-CATALOG LINK IN THE COURSE BOOKS
   --------------------------------------------------------------------------
   Sits at the top of every book's left sidebar (book.sidebar.header in
   _kitap-ortak.yml). Takes you to the /dersler/ page no matter how deep
   into the book you are.
   ========================================================================== */
.catalog-back {
  display: inline-block;
  margin-bottom: 0;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--academic-text);
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.catalog-back:hover,
.catalog-back:focus-visible {
  opacity: 1;
  color: var(--color-base);
  text-decoration: none;
}

/* Quarto wraps this link in a <p> inside the sidebar header. When the
   paragraph's 1rem bottom margin stacked on top of the book title's
   mt-2 + pt-lg-2 spacing, a gap of ~3rem appeared in between. We zero the
   paragraph and provide the spacing from a single place — the title's top margin.
   Because the Bootstrap utility classes use !important, it is needed here too. */
.quarto-sidebar-header .sidebar-header-item p {
  margin-bottom: 0;
}

#quarto-sidebar .sidebar-header {
  margin-top: 0.6rem !important;
  padding-top: 0 !important;
}

/* ==========================================================================
   9. TOP MENU (NAVBAR)
   --------------------------------------------------------------------------
   Instead of Cosmo's default dark/shadowed bar, a plain header strip on the
   same background as the page, separated only by a thin bottom line.
   ========================================================================== */
/* When a theme pair is used, Quarto gives the bar data-bs-theme="dark".
   By overriding the Bootstrap 5.3 navbar variables with our own colours we
   pull the brand, the links and the menu icon to the right colour from one place. */
.navbar,
.navbar[data-bs-theme="dark"] {
  --bs-navbar-color: var(--academic-text);
  --bs-navbar-hover-color: var(--color-base);
  --bs-navbar-active-color: var(--color-base);
  --bs-navbar-brand-color: var(--academic-text);
  --bs-navbar-brand-hover-color: var(--academic-text);
  --bs-navbar-toggler-border-color: var(--bs-border-color, #d9d5cd);
  --bs-emphasis-color: var(--academic-text);

  background-color: var(--academic-bg) !important;
  border-bottom: 1px solid var(--bs-border-color, #e2e0dc);
  box-shadow: none;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.navbar .navbar-brand,
.navbar .navbar-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--academic-text) !important;
}

.navbar .navbar-nav .nav-link {
  color: var(--academic-text) !important;
  opacity: 0.7;
  font-weight: 500;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus-visible,
.navbar .navbar-nav .nav-link.active {
  opacity: 1;
  color: var(--color-base) !important;
}

/* Theme toggle button and search icon */
.navbar .quarto-navigation-tool,
.navbar .quarto-navigation-tool .bi,
.navbar #quarto-search .aa-DetachedSearchButtonIcon {
  color: var(--academic-text) !important;
  opacity: 0.7;
}

.navbar .quarto-navigation-tool:hover {
  opacity: 1;
  color: var(--color-base) !important;
}

/* The mobile menu icon comes out white in the dark theme; we invert it in the light theme */
body:not(.quarto-dark) .navbar .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(0.4);
}

.navbar .navbar-toggler {
  border-color: var(--bs-border-color, #d9d5cd);
}
/* ==========================================================================
   10. MOBİL DÜZEN
   --------------------------------------------------------------------------
   Ana sorun: uzun görüntü formülleri, geniş tablolar ve kod blokları
   sayfayı viewport'tan geniş hale getiriyordu. Sayfa genişleyince tüm
   metin ekranın dışına taşıyor, satırlar kırpılmış gibi görünüyordu.
   Çözüm: taşabilecek her öğeyi kendi içinde kaydırılabilir yapmak.
   ========================================================================== */

/* Not: body'ye overflow-x:hidden VERİLMEZ. Verildiğinde ekrandan geniş
   formüller kaydırılamadan kırpılıyor ve içerik okunamaz hale geliyor.
   Bunun yerine taşabilecek her öğe kendi içinde kaydırılabilir yapılır. */
html,
body {
  max-width: 100%;
}

/* Görüntü (display) formülleri kendi içinde kaysın.

   Yatay kaydırma açıldığı anda kutu bir "kaydırma kabı" olur ve tarayıcı,
   kutunun dışına taşan her şeyi keser. MathJax'in bildirdiği kutu ise
   formülün mürekkebine tam oturur: üs, şapka, kök çizgisi, integral işareti
   gibi öğeler kutunun bir-iki piksel dışına çıkabildiği için formüllerin
   ÜST tarafı kırpılmış görünüyordu. Aşağıdaki iç boşluk, kesme sınırını
   mürekkepten uzaklaştırır. (overflow-x kaydırma iken overflow-y'nin
   `visible` kalması CSS'te mümkün değildir; bu yüzden çözüm dolgudur.) */
mjx-container[display="true"],
.MathJax_Display,
.math.display {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-top: 0.3em;
  padding-bottom: 0.4em;    /* kaydırma çubuğu formülü kesmesin */
}

/* Kapsayıcısına sığmayan formülün kaydırma çubuğu HER ZAMAN görünür olsun.
   Windows'ta Chrome/Edge'in üzerine gelmeden görünmeyen (overlay) çubukları
   yüzünden, sağı kaydırma kabında gizlenen bir formül "yarıda kesilmiş"
   sanılıyordu. WebKit sözde-öğeleri tanımlanınca tarayıcı klasik, kalıcı
   çubuğa döner; taşma yoksa hiçbir şey çizilmez. Renk her iki temada da
   çalışan nötr bir gri. */
mjx-container[display="true"] {
  scrollbar-width: thin;                                /* Firefox */
  scrollbar-color: rgba(128, 128, 128, 0.55) transparent;
}

mjx-container[display="true"]::-webkit-scrollbar {
  height: 6px;
}

mjx-container[display="true"]::-webkit-scrollbar-track {
  background: transparent;
}

mjx-container[display="true"]::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.5);
  border-radius: 3px;
}

/* MathJax, görüntü formüllerine min-width veriyor; bu değer kapsayıcıyı
   ekrandan geniş yapıp TÜM sayfayı yatayda esnetiyordu. Asıl mobil taşma
   sebebi buydu. */
mjx-container[display="true"] {
  min-width: 0 !important;
}

mjx-container[display="true"] > svg,
mjx-container[display="true"] > mjx-math {
  min-width: 0 !important;
}

/* Satır içi formüller satır sonunda kırılabilsin */
mjx-container:not([display="true"]) {
  max-width: 100%;
}

/* Tablolar ve kod blokları da kendi içinde kaysın */
#quarto-document-content table {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

#quarto-document-content pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Uzun kelimeler ve adresler satırı taşırmasın */
#quarto-document-content,
.sidebar-item-text,
.collapsible-title {
  overflow-wrap: break-word;
}

/* Uzun bölüm başlıkları taşmasın */
#quarto-document-content h1,
#quarto-document-content h2,
#quarto-document-content h3,
#title-block-header h1 {
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 991.98px) {
  /* Geniş ekran için tanımlanan sabit genişlikler mobilde geçersiz */
  #quarto-document-content {
    max-width: 100%;
  }

  /* Sol menüdeki uzun ders/bölüm adları kutudan taşıyordu */
  #quarto-sidebar .sidebar-item-text,
  #quarto-sidebar .chapter-title {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 575.98px) {
  /* Numaralandırılmış ve madde işaretli listelerin girintisi mobilde
     içeriği ekranın ortasına itiyordu; asgari girintiye çekildi. */
  #quarto-document-content ol,
  #quarto-document-content ul {
    padding-left: 1.35em;
  }

  /* Kutu içindeki listeler daha da dar olmalı */
  .theorem ol,
  .theorem ul,
  .callout-body ol,
  .callout-body ul,
  .collapsible-body ol,
  .collapsible-body ul {
    padding-left: 1.1em;
  }

  /* Teorem/örnek kutularının iç boşluğu mobilde küçültülür */
  .theorem,
  .remark {
    padding: 0.85em 0.9em;
    margin: 1.2em 0;
  }

  /* Callout kutuları da aynı oranda daralır */
  div.callout.callout-style-default > .callout-header {
    padding: 0.85em 0.9em 0 0.9em;
  }

  div.callout.callout-style-default > .callout-body-container {
    padding: 0.3em 0.9em 0.85em 0.9em;
  }

  div.callout.callout-style-simple {
    padding: 0.8em 0.9em;
  }

  /* Bölüm başlıklarını biraz küçült, uzun başlıklar 4 satıra yayılmasın */
  #quarto-document-content h1,
  #title-block-header h1 {
    font-size: 1.6rem;
    line-height: 1.25;
  }

  #quarto-document-content h2 {
    font-size: 1.3rem;
  }

  /* Gövde tipografisi mobilde bir tık küçük daha rahat okunuyor */
  body {
    font-size: 0.97rem;
  }
}

/* ==========================================================================
   11. ÇOK BÖLÜMLÜ DERSLER (Cebir 1 / 2 / 3 gibi)
   --------------------------------------------------------------------------
   Bir ders birden fazla alt derse ayrıldığında her alt ders _quarto.yml
   içinde bir "part" olur. Sol menüde bu grup başlıkları, normal bölüm
   satırlarından açıkça ayrılsın diye belirginleştirildi.
   ========================================================================== */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .menu-text {
  font-weight: 650;
  letter-spacing: 0.01em;
}

#quarto-sidebar .sidebar-item-section > .sidebar-item-container {
  margin-top: 0.7em;
  padding-top: 0.7em;
  border-top: 1px solid var(--bs-border-color, #e6e2da);
}

/* İlk grup başlığının üstünde gereksiz çizgi olmasın */
#quarto-sidebar .sidebar-item-section:first-of-type > .sidebar-item-container {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Grup içindeki bölümler biraz içeride ve daha sakin dursun */
#quarto-sidebar .sidebar-item-section .sidebar-item .sidebar-item-text {
  font-weight: 400;
}

/* ==========================================================================
   12. MÜFREDAT KUTUSU (DERS İÇERİĞİ)
   --------------------------------------------------------------------------
   Kaynak dosyalarda müfredat iki farklı biçimde yazılmış:

     A)  * **Grup adı**            B)  **Grup adı**
           * konu                      * konu
           * konu                      * konu

   scripts/collapsible.lua bu iki biçimi tek yapıya indirger ve ardışık
   grupların tamamını tek bir <div class="curriculum"> içine alır. Bölüm
   başlığı (## Sayılar Teorisi 1 ...) kutunun DIŞINDA kalır; kutunun
   içinde ikinci bir çerçeve yoktur.
   ========================================================================== */
.curriculum {
  background-color: var(--curriculum-panel);
  border: 1px solid var(--curriculum-panel-border);
  border-radius: 12px;
  padding: 1.4rem 1.7rem;
  margin: 1.5rem 0 2.4rem 0;
}

/* --- Grup etiketi --- */
.curriculum > p {
  margin: 1.7em 0 0.5em 0;
}

.curriculum > p:first-child {
  margin-top: 0;
}

.curriculum > p > strong {
  display: block;
  color: var(--color-base);
  font-weight: 650;
  font-size: 1.02em;
  letter-spacing: 0.01em;
}

/* --- Konu listesi --- */
.curriculum > ul {
  margin: 0;
  padding-left: 1.4em;
  list-style-type: disc;
}

.curriculum > ul > li {
  margin-bottom: 0.4em;
}

.curriculum > ul > li:last-child {
  margin-bottom: 0;
}

.curriculum > ul > li::marker {
  color: var(--color-base);
  font-size: 0.85em;
}

/* --- Hazır notlara giden bağlantılar: etiketten farklı renk, çizgisiz --- */
#quarto-document-content .curriculum a:not(.btn):not(.catalog-back):not(.quarto-navigation-tool) {
  color: var(--color-theory);
  border-bottom: none;
  text-decoration: none;
  font-weight: 500;
}

#quarto-document-content .curriculum a:not(.btn):not(.catalog-back):not(.quarto-navigation-tool):hover,
#quarto-document-content .curriculum a:not(.btn):not(.catalog-back):not(.quarto-navigation-tool):focus-visible {
  color: var(--color-practice);
  border-bottom: none;
  text-decoration: none;
}

/* --- Başlıktan hemen sonra gelen liste nefes alsın (ders metinleri) --- */
#quarto-document-content h1 + ul,
#quarto-document-content h2 + ul,
#quarto-document-content h3 + ul,
#quarto-document-content h4 + ul {
  margin-top: 1em;
}

@media (max-width: 575.98px) {
  .curriculum {
    padding: 1.1rem 1rem;
    border-radius: 10px;
  }

  .curriculum > ul {
    padding-left: 1.25em;
  }
}

/* ==========================================================================
   13. KATLANIR BLOK İŞARETLERİ VE DERS KATALOĞU
   ========================================================================== */

/* --- İspat/Çözüm işaretleri: bulundukları kutunun sembolüyle aynı ---
   İspat blokları teorem kutusunun, çözümler örnek kutusunun içinde yer alır.
   Kapalıyken kutu başlığındaki sembolün aynısı görünür; tıklanınca sembol
   aşağıyı gösterecek biçimde döner.

     İspat  : ▲  (teoremle aynı)  → açıkken ▼  (180°)
     Çözüm  : ▷  (örnekle aynı)   → açıkken ▽  (90°)

   Blok türü scripts/collapsible.lua tarafından .collapsible--proof / .collapsible--solution
   sınıfı olarak yazılır. */
.collapsible-title::before {
  content: "▲";
  transform: none;
}

.collapsible[open] > .collapsible-title::before {
  transform: rotate(180deg);
}

.collapsible--solution > .collapsible-title::before {
  content: "▷";
}

.collapsible--solution[open] > .collapsible-title::before {
  transform: rotate(90deg);
}

/* Başlık rengi bulunduğu kutunun başlık rengiyle aynı olsun. */
.theorem .collapsible-title {
  color: var(--color-theory);
}

.theorem.example .collapsible-title,
.theorem.exercise .collapsible-title,
.theorem.solution .collapsible-title {
  color: var(--color-practice);
}

.theorem.definition .collapsible-title,
.theorem.algorithm .collapsible-title {
  color: var(--color-base);
}

/* --- 4) Ders kataloğunda ders adları biraz daha büyük --- */
.course-list li {
  font-size: 1.3rem;
  margin-bottom: 0.55em !important;
}

/* --- Ders kataloğu bağlantıları: içerik bağlantı stilinden muaf ---
   Bölüm 3c'deki kural #quarto-document-content ile başladığı için
   .course-list'nden daha özgüldü ve katalog adlarını turkuaz + altı
   çizili yapıyordu. Burada aynı özgüllükle geri alınıyor. */
#quarto-document-content .course-list a:not(.btn):not(.catalog-back):not(.quarto-navigation-tool) {
  color: var(--academic-text);
  border-bottom: none;
  text-decoration: none;
}

#quarto-document-content .course-list a:not(.btn):not(.catalog-back):not(.quarto-navigation-tool):hover,
#quarto-document-content .course-list a:not(.btn):not(.catalog-back):not(.quarto-navigation-tool):focus-visible {
  color: var(--color-base);
  border-bottom: none;
  text-decoration: none;
}

/* ==========================================================================
   15. DENKLEM BOŞLUKLARI
   --------------------------------------------------------------------------
   Satır aralığının kendisi _kitap-ortak.yml içindeki `linestretch` ile
   veriliyor. Burada yalnızca görüntü (display) formüllerinin çevresindeki
   dikey boşluk ayarlanıyor: MathJax'in varsayılan 1em'lik payı, bir teorem/
   tanım/örnek başlığının hemen ardından gelen formülü başlığa yapıştırıyordu.

   Formül kendi <p>'sinin tek çocuğu olduğu için üst/alt paylar paragrafla
   birleşir (margin collapsing); tek noktadan ayar yapmak yeterli.
   ========================================================================== */
/* Not: kutunun kendisine 0.3em/0.4em dolgu verildiği için (bölüm 10),
   paylar o kadar küçültülür; sayfadaki dikey ritim değişmez. */
mjx-container[display="true"],
.math.display {
  margin-top: 1.2em !important;
  margin-bottom: 1.1em !important;
}

/* Kutunun ilk satırı formülse yukarıda fazladan boşluk oluşmasın */
.theorem > p:first-child > mjx-container[display="true"],
.callout-body > p:first-child > mjx-container[display="true"],
.collapsible-body > p:first-child > mjx-container[display="true"] {
  margin-top: 0 !important;
}

/* Tablo hücrelerinde ve liste maddelerinde formül payı daha küçük olmalı */
#quarto-document-content td mjx-container[display="true"],
#quarto-document-content li > p:only-child > mjx-container[display="true"] {
  margin-top: 0.35em !important;
  margin-bottom: 0.25em !important;
}

/* Bölüm başlığından hemen sonra gelen formül de nefes alsın */
#quarto-document-content h2 + p,
#quarto-document-content h3 + p,
#quarto-document-content h4 + p {
  margin-top: 0.9em;
}

/* ==========================================================================
   16. SAYFA BAŞLIĞI
   --------------------------------------------------------------------------
   Boşluk, başlığın KENDİ altına verilir; açıklama satırı ile gövde metni
   arasına değil.

   Quarto'nun kendi kuralları burada oldukça özgül olduğu için aynı sınıfları
   yazmak zorundayız:
     #title-block-header.quarto-title-block.default .quarto-title .title { margin-bottom: 0 }
     body.nav-sidebar #title-block-header { margin-block-end: 0 }
   ========================================================================== */
#title-block-header.quarto-title-block.default .quarto-title h1.title {
  margin-bottom: 1.15rem;
}

#quarto-document-content > #title-block-header {
  margin-bottom: 1.6rem;
}

/* ==========================================================================
   17. DERS İÇİ ÇİZİMLER
   --------------------------------------------------------------------------
   Ham SVG olarak yazılan grafikler: serpilme diyagramları, zaman serileri,
   dağılım çubukları, oyun teorisi alt zarfı… Renkler tema değişkenlerinden
   geldiği için koyu temada da doğru görünürler.

   Çizimler derleme sırasında ÜRETİLMEZ; hazır SVG olarak gömülüdür. Bu
   sayede kitapların derlenmesi Python/Jupyter gerektirmez.
   ========================================================================== */
figure.ders-grafik,
figure.oyun-grafik {
  margin: 1.7em auto;
  max-width: 30rem;
}

/* Çok panelli çizimler (ör. korelasyon örnekleri) daha geniş yer ister */
figure.ders-grafik-genis {
  max-width: 39rem;
}

/* Nearly square drawings fill the whole screen at the standard width: the SVG
   scales to 100% of the figure, so its height is width x aspect ratio. Giving
   them a narrower column keeps the rendered height close to the others'. */
figure.ders-grafik-dar {
  max-width: 24rem;
}

figure.ders-grafik svg,
figure.oyun-grafik svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

figure.ders-grafik figcaption,
figure.oyun-grafik figcaption {
  margin-top: 0.8em;
  font-size: 0.88em;
  line-height: 1.55;
  opacity: 0.82;
  text-align: center;
  text-wrap: pretty;
}

/* A figure inside a theorem / solution / callout box stays centred in it.
   The box narrows the text column, so "margin-left: 0" used to leave the
   drawing pinned to the left edge with a wide gap on its right. */
.theorem figure.ders-grafik,
.collapsible-body figure.ders-grafik,
.callout-body figure.ders-grafik {
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================
   Download panel — the PDF/EPUB links on a course's curriculum page.
   Emitted by scripts/downloads.lua; the class names are the contract
   shared with that filter.
   ===================================================================== */
.downloads {
  background-color: var(--curriculum-panel);
  border: 1px solid var(--curriculum-panel-border);
  border-radius: 12px;
  padding: 1.1rem 1.5rem 1rem;
  /* The panel closes the curriculum page, so it needs room above it. */
  margin: 2.75rem 0 1rem 0;
}

.downloads-title {
  margin: 0 0 0.6rem 0;
  font-weight: 650;
  font-size: 1.02em;
  letter-spacing: 0.01em;
  color: var(--color-base);
}

.downloads-title::before {
  content: "⬇ ";
}

.downloads-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.downloads-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--curriculum-panel-border);
}

.downloads-list li:first-child {
  border-top: none;
  padding-top: 0;
}

.downloads-name {
  flex: 1 1 14rem;
  font-weight: 600;
}

.downloads-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.downloads-file {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.15em 0.8em;
  border: 1px solid var(--curriculum-panel-border);
  border-radius: 999px;
  background-color: var(--academic-bg);
  font-size: 0.92em;
  font-weight: 600;
  text-decoration: none;
}

.downloads-file:hover {
  border-color: var(--color-base);
  text-decoration: none;
}

.downloads-file small {
  font-weight: 400;
  font-size: 0.85em;
  opacity: 0.7;
}

.downloads-note {
  margin: 0.9rem 0 0 0;
  font-size: 0.86em;
  opacity: 0.75;
}