/* $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;
} */

/* ==========================================================================
   PAGE GRID -- sidebars at the screen edges, text centred between them
   --------------------------------------------------------------------------
   Quarto's own "article" grid holds the navigation sidebar, the text and the
   table of contents in a narrow band in the middle of the window: on a 1536px
   laptop the text column was only 747px wide while 237px stayed empty at the
   two screen edges, and between 1300px and 1600px no rule of ours applied at
   all. The template below spends that space.

   The line names must stay exactly as Quarto writes them, because Quarto
   places the pieces by name:

       navigation sidebar   page-start ......... body-start
       text                 body-content-start . body-content-end
       table of contents    body-end ........... page-end

   The two flexible "slack" columns sit between the sidebars and the text, so
   they belong to neither span: they take up the leftover width and keep the
   text centred while the sidebars stay out at the edges.

   The grid stops growing at --am-page-max and is centred from there on, so
   on an ultra-wide monitor the pieces do not drift apart; the cap applies to
   the portal pages too, which have no sidebar of their own.
   ========================================================================== */
:root {
    /* Widest the whole layout ever gets: a 1920px monitor minus its gutters. */
    --am-page-max: 1880px;
    /* Distance from a sidebar to the screen edge. */
    --am-edge: 1.25rem;
    /* Sidebar and table-of-contents column: grows with the window, but stays
       readable on a small laptop and stops growing on a large screen.
       Careful: the root font-size is 1.1em, so 1rem resolves to 17.6px --
       10.5rem is about 185px and 16rem about 282px. */
    --am-side: clamp(10.5rem, 15vw, 16rem);
    /* Breathing room between a sidebar and the text area. */
    --am-gap: 1.5em;
    /* Empty space that the text keeps from both sidebars whatever the window
       is: the "slack" columns below never fall below it, so the reading column
       is never pushed up against the navigation or the table of contents.
       ~26px on a small laptop, ~70px from 1500px on. */
    --am-slack: clamp(1.5rem, 3vw, 4rem);
    /* Reading column (~845px). Wider than this makes long lines hard to scan;
       this is the measure the notes were written for. */
    --am-content: 48rem;
}

@media (min-width: 992px) {

    /* Every page, including the portal: stop expanding on ultra-wide screens. */
    #quarto-content.page-columns {
        max-width: var(--am-page-max);
        margin-inline: auto;
    }

    /* Book pages (they are the ones with a navigation sidebar). */
    body.floating #quarto-content.page-layout-article {
        display: grid;
        gap: 0;
        grid-template-columns:
            [screen-start] var(--am-edge)
            [screen-start-inset page-start page-start-inset] var(--am-side)
            [body-start-outset] var(--am-gap)
            [body-start] minmax(var(--am-slack), 1fr)
            [body-content-start] minmax(0, var(--am-content))
            [body-content-end] minmax(var(--am-slack), 1fr)
            [body-end] var(--am-gap)
            [body-end-outset] var(--am-side)
            [page-end-inset page-end screen-end-inset] var(--am-edge)
            [screen-end];
    }

    /* The grid decides the width now; the old fixed cap would fight it. */
    body.floating #quarto-document-content {
        max-width: 100%;
    }
}

/* Portal pages (course catalog, the Analiz hub) keep Quarto's own article
   grid: no sidebar, one centred column. The grid above is only for the books,
   so nothing here widens them. */

/* Tablet: the navigation sidebar is hidden (Quarto hides it below 992px), so
   the page is the text plus the table of contents; stretch both to the edges. */
@media (min-width: 768px) and (max-width: 991.98px) {

    body.floating #quarto-content.page-layout-article {
        display: grid;
        gap: 0;
        grid-template-columns:
            [screen-start] 1rem
            [screen-start-inset page-start page-start-inset body-start-outset body-start] minmax(0, 1fr)
            [body-content-start] minmax(0, var(--am-content))
            [body-content-end] minmax(0, 1fr)
            [body-end] 1.25em
            [body-end-outset] clamp(9rem, 22vw, 12rem)
            [page-end-inset page-end screen-end-inset] 1rem
            [screen-end];
    }

    body.floating #quarto-document-content {
        max-width: 100%;
    }
}

/* 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%;
}

/* Simplex tableaux (Lineer Programlama). The header row holds the c_j values,
   the first body row the column names (x_B, c_B, v_0, v_1, …, Oran) and the
   last row z_j - c_j. Heavy rules separate these bands and the basis block. */
table.simpleks th,
table.simpleks td {
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}
table.simpleks tbody tr:first-child td {
  font-weight: 600;
  border-bottom: 2px solid var(--academic-text);
}
table.simpleks tbody tr:last-child td {
  border-top: 2px solid var(--academic-text);
}
table.simpleks th:nth-child(3),
table.simpleks td:nth-child(3),
table.simpleks th:last-child,
table.simpleks td:last-child {
  border-left: 2px solid var(--academic-text);
}
table.simpleks.oransiz th:last-child,
table.simpleks.oransiz td:last-child {
  border-left: none;
}
/* Dual simplex tableaux end with an "Oran" row below z_j - c_j */
table.simpleks.oran-satirli tbody tr:nth-last-child(2) td {
  border-top: 2px solid var(--academic-text);
}
table.simpleks.oran-satirli tbody tr:last-child td {
  border-top: 1px dashed var(--academic-text);
}

/* ==========================================================================
   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;
}

.calculator button {
  display: block;
  margin: 0.9em auto 0;
  padding: 0.5em 1.6em;
  border-radius: 6px;
  border: 1px solid var(--color-base);
  background: var(--color-base);
  color: var(--academic-bg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.calculator button:hover {
  filter: brightness(1.12);
}

/* Coefficient grid of the simplex calculator: one small input per cell */
.calculator .calc-grid {
  overflow-x: auto;
  margin: 0.2em 0 0.4em;
}

.calculator .calc-grid table {
  border-collapse: collapse;
  margin: 0 auto;
}

.calculator .calc-grid th,
.calculator .calc-grid td {
  padding: 0.2em 0.25em;
  text-align: center;
  white-space: nowrap;
}

.calculator .calc-grid input[type="text"] {
  width: 4.2em;
  padding: 0.35em 0.3em;
  text-align: center;
}

.calculator .calc-grid select {
  width: auto;
  padding: 0.35em 0.3em;
}

/* Step-by-step tableaux produced by the calculator */
.calculator .calc-steps table {
  margin: 1.2em auto 0.4em;
}

.calculator .calc-steps caption {
  caption-side: top;
  text-align: center;
  font-size: 0.9em;
  opacity: 0.75;
}

.calculator .calc-result {
  margin: 1em 0 0 0;
  padding: 0.7em 0.9em;
  border: 1px dashed var(--color-base);
  border-radius: 6px;
}

/* ==========================================================================
   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;
}

/* --------------------------------------------------------------------------
   HARD RULE: no element may make the PAGE itself wider than the screen.

   Display formulas are already scroll containers (see above), but an inline
   formula cannot break: MathJax 3 has no automatic line breaking, so a long
   $...$ in the middle of a sentence is one unbreakable box. Clamping that box
   with max-width does not help -- the <mjx-math> inside it is a real element,
   so it still stretches the document and every line of the page runs off the
   screen. The only reliable fix is to let the block that holds the text scroll
   instead of the page: a paragraph, a list or a table that cannot fit its
   widest inline box gets a horizontal scrollbar. Blocks that fit are untouched,
   because `auto` paints a scrollbar only when there is something to scroll.

   Paragraphs that hold a display formula are excluded on purpose. Such a
   paragraph has the formula as its only child, and section 15 relies on the
   margins of the two collapsing into one; a scroll container is a new block
   formatting context, which would stop that collapsing and add a visible gap
   above and below every display formula. The formula scrolls by itself there.
   -------------------------------------------------------------------------- */
#quarto-document-content dd,
#quarto-document-content blockquote,
#quarto-document-content figcaption {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;      /* only the horizontal axis may scroll */
}

/* Kept in a rule of its own: a browser that does not know :has() throws away
   the whole selector list it appears in, which would take the three elements
   above down with it. */
#quarto-document-content p:not(:has(mjx-container[display="true"])) {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Browsers without :has() (Firefox below 121, Safari below 15.4) cannot tell a
   display formula's paragraph from a text one. There the page must not break,
   so every paragraph scrolls; the extra gap around display formulas that this
   causes is the smaller of the two evils. */
@supports not selector(:has(*)) {
  #quarto-document-content p {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* A list gets the scrollbar as a whole, never the single item: an "outside"
   bullet or number is painted beyond the item's own box, so a scroll container
   on the <li> swallows it and the list loses its markers (measured in Chrome).
   On the <ul>/<ol> the markers sit inside the list's own left padding, so they
   survive -- provided that padding is wide enough for the widest marker, which
   is why the lists inside a box get a little more of it below. */
#quarto-document-content ol,
#quarto-document-content ul {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Long formulas are easier to swipe when the scrollbar is visible: same thin,
   theme-neutral bar the display formulas use. */
#quarto-document-content p,
#quarto-document-content ol,
#quarto-document-content ul,
#quarto-document-content dd,
#quarto-document-content blockquote {
  scrollbar-width: thin;                                /* Firefox */
  scrollbar-color: rgba(128, 128, 128, 0.45) transparent;
}

#quarto-document-content p::-webkit-scrollbar,
#quarto-document-content ol::-webkit-scrollbar,
#quarto-document-content ul::-webkit-scrollbar,
#quarto-document-content dd::-webkit-scrollbar,
#quarto-document-content blockquote::-webkit-scrollbar {
  height: 5px;
}

#quarto-document-content p::-webkit-scrollbar-thumb,
#quarto-document-content ol::-webkit-scrollbar-thumb,
#quarto-document-content ul::-webkit-scrollbar-thumb,
#quarto-document-content dd::-webkit-scrollbar-thumb,
#quarto-document-content blockquote::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.4);
  border-radius: 3px;
}

/* Inline formulas stay inside their line; the rules above give them somewhere
   to scroll when they cannot. */
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 dar; yine de en geniş madde işareti
     ("iii.", "10.") bu boşluğa sığmalı, çünkü liste artık kendi içinde
     kayan bir kutudur ve işaret bu dolgunun dışına taşarsa kırpılır. */
  .theorem ol,
  .theorem ul,
  .callout-body ol,
  .callout-body ul,
  .collapsible-body ol,
  .collapsible-body ul {
    padding-left: 1.9em;
  }

  /* 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;
  }
}

/* ==========================================================================
   10b. MOBILE TABLE OF CONTENTS
   --------------------------------------------------------------------------
   Quarto removes the table-of-contents column below 768px, so on a phone the
   chapter had no visible outline and no way to jump between its sections.
   scripts/mobile-toc.html copies the list into a <details> panel under the
   chapter title; the panel only appears where the real column is gone, so the
   outline is never on screen twice.
   ========================================================================== */
.mobile-toc {
  display: none;
}

@media (max-width: 767.98px) {

  .mobile-toc {
    display: block;
    margin: 0 0 1.6em;
    border: 1px solid var(--bs-border-color, #e6e2da);
    border-radius: 8px;
    background: rgba(128, 128, 128, 0.05);
  }

  .mobile-toc > summary {
    cursor: pointer;
    padding: 0.6em 0.9em;
    font-weight: 600;
    font-size: 0.97rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Replace the default triangle with a marker on the right-hand side. */
  .mobile-toc > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-toc > summary::after {
    content: "▾";
    font-size: 0.9em;
    opacity: 0.7;
  }

  .mobile-toc[open] > summary::after {
    content: "▴";
  }

  /* The lists are inside #quarto-document-content, which section 10 gives a
     horizontal scroll container; an outline wraps instead of scrolling. */
  .mobile-toc ul {
    list-style: none;
    margin: 0;
    padding: 0 0.9em 0.2em 1em;
    overflow: visible;
    max-width: 100%;
  }

  .mobile-toc > ul {
    padding-bottom: 0.9em;
    max-height: 60vh;
    overflow-y: auto;
  }

  .mobile-toc ul ul {
    padding-left: 0.9em;
  }

  .mobile-toc li {
    margin: 0.15em 0;
  }

  .mobile-toc a {
    display: block;
    padding: 0.25em 0;
    line-height: 1.35;
    text-decoration: none;
    color: var(--academic-text, inherit);
  }

  .mobile-toc a:hover,
  .mobile-toc a:focus {
    text-decoration: underline;
  }
}

/* ==========================================================================
   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;
}

/* =====================================================================
   Interactive 3D scenes — Observable JS cells that draw with Plotly.
   They exist only in the HTML book: the chapters wrap them in
   `content-visible when-format="html:js"`, so PDF and EPUB keep the static
   SVG figures. Helpers: dersler/diferansiyel-geometri/ojs/scene3d.js.
   ===================================================================== */
.interactive-scene {
  margin: 1.8em 0;
  padding: 0.9em 1em 0.7em;
  border: 1px solid var(--curriculum-panel-border, rgba(128, 128, 128, 0.35));
  border-radius: 8px;
  overflow-x: auto;           /* the sliders must never widen the page */
}

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

.interactive-scene .scene3d {
  width: 100%;
  height: 420px;
}

@media (max-width: 575.98px) {
  .interactive-scene .scene3d {
    height: 330px;
  }
}

.interactive-scene .scene3d-readout {
  margin-top: 0.4em;
  font-size: 0.9em;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* Observable Inputs size themselves with these custom properties; the
   defaults (a 120px label plus a 240px slider and a number box) overflow a
   phone column. */
.interactive-scene form {
  --label-width: 4.5em;
  --input-width: min(240px, 52vw);
  max-width: 100%;
}

/* =====================================================================
   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;
}