/* ============================================================
   ERDISERDAR.COM — style.css
   All colors, fonts, layout, components.
   Dark mode overrides live in dark-mode.css.
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500&display=swap');

/* ============================================================
   CSS VARIABLES — change colors/fonts here, they update everywhere
   ============================================================ */
:root {
  /* Colors */
  --color-bg:            #f5f3ef;   /* main page background (warm off-white) */
  --color-bg-secondary:  #edeae4;   /* slightly darker surface: about strip, dropdown bg */
  --color-surface:       #ffffff;   /* card and panel backgrounds */
  --color-border:        #d8d3ca;   /* standard visible borders */
  --color-border-light:  #e8e4de;   /* subtle dividers between list items */

  --color-text:          #1a1816;   /* primary reading text */
  --color-text-muted:    #6b6560;   /* secondary text: meta, nav links, excerpts */
  --color-text-light:    #9c968f;   /* faintest text: dates, footer copy */

  --color-accent:        #c21324;   /* red — links, active states, category dot, TOC active */
  --color-accent-hover:  #9e0f1d;   /* darker red for hover states */
  --color-accent-light:  #f5e6e8;   /* very light red tint for subtle backgrounds */

  /* Typography */
  --font-serif:   'EB Garamond', Georgia, serif;   /* headings, post body text */
  --font-sans:    'DM Sans', system-ui, sans-serif; /* UI: nav, meta, buttons */

  /* Sizing */
  --max-width:    1100px;    /* outer container width */
  --reading-width: 680px;   /* max width for post body text */
  --nav-height:   64px;     /* nav bar height at rest; shrinks to 50px on scroll */

  /* Transitions */
  --transition:   0.2s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition), color var(--transition);
}

img {
  max-width: 100%;
  display: block;
}

/* Base link style — no underline by default; hover handled per-component */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-accent-hover);
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* Fixed (not sticky) so height changes on scroll never cause layout reflow/shake */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  height: var(--nav-height);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  transition: background-color var(--transition), height 0.25s ease, box-shadow 0.25s ease;
}

/* Pushes page content below the fixed nav bar — every HTML page needs this div */
.nav-spacer {
  height: var(--nav-height);
  flex-shrink: 0;
}

/* Shrinks nav height on scroll; JS adds .scrolled when scrollY > 40px */
.nav.scrolled {
  height: 50px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.07);
}

/* Centered inner row: brand | links | right controls */
.nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Site name + subtitle ("Austro-Libertarianism") in top-left */
.nav__brand {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.nav__brand:hover {
  color: var(--color-accent);
}

/* Tagline below the brand name — needs lang="en" in HTML to avoid Turkish İ transform */
.nav__brand span {
  display: block;
  font-size: 0.65rem;
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 1px;
}

/* Horizontal list of desktop nav links: Anasayfa | Blog ▾ | Hakkımda */
.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav__links a {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

/* Active page link and hover: accent color + underline */
.nav__links a:hover,
.nav__links a.active {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* Right side of nav: dark mode toggle + hamburger */
.nav__right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ---- Dark mode toggle ---- */

/* Pill-shaped container for the sun/moon toggle button */
.dark-toggle {
  position: relative;
  width: 76px;
  height: 34px;
  border-radius: 17px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition), border-color var(--transition);
}

/* Sliding circle that moves left (light) or right (dark); JS in dark-mode.css shifts it */
.dark-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #f59e0b;   /* amber — sun color in light mode */
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.3s ease, background-color 0.3s ease;
  z-index: 1;
}

/* Sun and moon SVG icons sit above the thumb (z-index 2); pointer-events off so clicks pass through */
.dark-toggle__sun,
.dark-toggle__moon {
  position: absolute;
  top: 6px;
  width: 22px;
  height: 22px;
  z-index: 2;
  pointer-events: none;
  transition: color var(--transition);
}

.dark-toggle__sun {
  left: 5px;
  color: #fff;
}

.dark-toggle__moon {
  right: 5px;
  color: var(--color-text-light);  /* dim in light mode; dark-mode.css brightens it */
}

/* ---- Mobile hamburger ---- */

/* Hidden on desktop; shown at ≤600px via media query */
.nav__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 4px;
}

.nav__hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background-color: var(--color-text);
  transition: all var(--transition);
}

/* Right-anchored mobile dropdown — sits below the hamburger, right side only */
.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: auto;
  right: 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-bottom-left-radius: 8px;
  box-shadow: -4px 4px 16px rgba(0,0,0,0.07);
  padding: 20px 24px;
  z-index: 99;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  min-width: 180px;
}

.nav__mobile.open {
  display: flex;
}

.nav__mobile a {
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  text-align: right;
}

/* ---- Desktop Blog dropdown ---- */

/* Relative positioning needed so the dropdown panel is positioned relative to this item */
.nav__item--dropdown {
  position: relative;
}

/* Invisible hover bridge between the nav link and dropdown panel.
   Without this, the cursor leaves the link before reaching the panel and the menu disappears. */
.nav__item--dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 14px;
}

/* ▾ arrow next to "Blog" — rotates 180° when dropdown is open */
.nav__arrow {
  font-size: 0.9rem;
  margin-left: 2px;
  display: inline-block;
  transition: transform var(--transition);
  vertical-align: middle;
}

.nav__item--dropdown:hover .nav__arrow {
  transform: rotate(180deg);
}

/* Dropdown panel — centered below "Blog", shown on hover */
.nav__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 14px);   /* 14px gap bridged by the ::after above */
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 0;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.09);
  z-index: 150;
}

.nav__item--dropdown:hover .nav__dropdown {
  display: block;
}

.nav__dropdown a {
  display: block;
  padding: 7px 18px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition), background-color var(--transition);
}

.nav__dropdown a:hover {
  color: var(--color-accent);
  background-color: var(--color-bg-secondary);
}

/* "Bütün yazılar" at top of dropdown gets a separator line below it */
.nav__dropdown li:first-child a {
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 4px;
  padding-bottom: 10px;
}

/* ---- Mobile nav accordion (Blog sub-menu) ---- */

.nav__mobile-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* "Blog ▾" button inside mobile menu — tapping expands the category sub-list */
.nav__mobile-blog-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  text-align: right;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.nav__mobile-blog-btn .nav__arrow {
  transition: transform var(--transition);
}

/* Arrow rotates when the sub-menu is open */
.nav__mobile-blog-btn.open .nav__arrow {
  transform: rotate(180deg);
}

/* Sub-menu list of category links — hidden until Blog is tapped */
.nav__mobile-sub {
  display: none;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
  padding-right: 14px;
  border-right: 1px solid var(--color-border);
  align-items: flex-end;
}

.nav__mobile-sub.open {
  display: flex;
}

.nav__mobile-sub a {
  font-size: 0.82rem;
  text-align: right;
}

/* ============================================================
   PAGE WRAPPER
   ============================================================ */

/* Centres content and limits it to --max-width with consistent side padding */
.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */

/* "Blog / Post title" trail at the top of every post page */
.breadcrumb {
  border-bottom: 1px dashed var(--color-border);
  padding: 12px 0;
  font-size: 0.8rem;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb a {
  color: var(--color-accent);
}

.breadcrumb span {
  color: var(--color-border);
}

/* ============================================================
   HOME PAGE
   ============================================================ */

/* Legacy hero section — not used on the current landing page (index.html) */
.hero {
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--color-border);
  max-width: var(--reading-width);
}

.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--color-text);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.hero__sub {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 540px;
}

.hero__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

.hero__cta {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition);
}

.hero__cta:hover {
  color: var(--color-accent-hover);
}

/* ============================================================
   PAGINATION
   ============================================================ */

/* Prev / page number / next controls; top instance (#pagination-top) uses tighter padding */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 24px 0 48px;
}

#pagination-top {
  padding: 8px 0 16px;
}

.page-btn {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 400;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: all var(--transition);
}

/* Hover only on enabled, non-current buttons */
.page-btn:hover:not(.disabled):not(.active) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Currently viewed page: solid accent fill */
.page-btn.active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  cursor: default;
}

/* First / last page buttons when already at the boundary */
.page-btn.disabled {
  opacity: 0.3;
  cursor: default;
}

/* Small all-caps label used above blog sections and the "Bütün Yazılar" heading */
.section-heading {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 56px 0 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
   POST CARDS — shared across home + blog pages
   ============================================================ */

/* 3-column grid on blog.html; becomes 2-col at 900px, 1-col at 600px */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}

/* Individual card: white surface, subtle border, lift on hover */
.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 24px;
  transition: box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  border-color: var(--color-border);
}

/* Category label with a small coloured dot before it */
.post-card__category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

/* The coloured dot — colour comes from --cat-color set on the parent [data-category] element */
.post-card__category::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--cat-color, var(--color-accent));
  flex-shrink: 0;
}

/* Per-category dot colours — set as a CSS variable on the element with data-category="..." */
[data-category="iktisat"]  { --cat-color: #c21324; }
[data-category="hukuk"]    { --cat-color: #1a4480; }
[data-category="felsefe"]  { --cat-color: #5a3e6b; }
[data-category="politika"] { --cat-color: #2e6b3e; }

/* Post title in Garamond — underlines on hover so multi-line titles each get underlined */
/* Title is clamped to exactly 2 lines so all images in a row align horizontally.
   min-height pads 1-line titles; -webkit-line-clamp truncates 3-line titles. */
.post-card__title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 10px;
  transition: color var(--transition);
  min-height: 3.12rem;        /* 2 lines × (1.2rem × 1.3) — keeps short titles from pulling image up */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 16:9 image slot between title and excerpt; hidden gracefully if image is missing */
.post-card__image {
  margin: 2px 0 14px;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-secondary);
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

/* Subtle zoom on the image when hovering the card */
.post-card:hover .post-card__image img {
  transform: scale(1.04);
}

/* "contain" variant — for diagrams/tables: show the whole image, no crop, no zoom */
.post-card__image--contain img {
  object-fit: contain;
}
.post-card:hover .post-card__image--contain img {
  transform: none;
}

/* Title turns accent + underlined when card is hovered */
.post-card:hover .post-card__title {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

.post-card__excerpt {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 16px;
}

/* Date — pushed to the bottom of the card by flex + margin-top: auto */
.post-card__meta {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: auto;
}

/* Invisible block-level <a> that wraps the entire card, making the whole area clickable */
.post-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* ============================================================
   BLOG PAGE — filters
   ============================================================ */

/* Row of category filter buttons: Hepsi | İktisat | Hukuk | Felsefe | Politika */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 12px;
  justify-content: center;
}

/* Each filter button — styled as a bordered pill, not a solid button */
.filter-btn {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 16px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 2px;
  transition: all var(--transition);
}

.filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* Currently selected filter — solid accent fill, white text */
.filter-btn.active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* JS sets display:none on cards that don't match the active filter */
.post-card.hidden {
  display: none;
}

/* ============================================================
   POST PAGE (post.html)
   ============================================================ */

/* Header area above the article: title + date/category meta */
.post-header {
  padding: 64px 0 40px;
  max-width: var(--reading-width);
  margin: 0 auto;
  border-bottom: 2px solid var(--color-text);
}

/* Category link(s) in the meta line: "28.02.2025 | politika" */
.post-header__cat-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.post-header__cat-link:hover {
  color: var(--color-accent-hover);
}

/* Large centred post title */
.post-header__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
  text-align: center;
}

/* Date + category line below the title */
.post-header__meta {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Featured image — sits below the head/body divider, matches reading width */
.post-featured {
  max-width: var(--reading-width);
  margin: 36px auto 0;
}

.post-featured img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* "contain" variant — diagrams/tables show in full without cropping */
.post-featured--contain img {
  object-fit: contain;
}

/* ---- Reading body ---- */

/* Constrained reading column; all markdown content renders here */
.post-body {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 48px 0 80px;
}

/* In-body images (from markdown) — centered, responsive, rounded */
.post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: 8px;
}

/* Headings in Garamond with scroll-margin so they don't hide under the fixed nav when linked */
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4 {
  font-family: var(--font-serif);
  color: var(--color-text);
  margin: 2em 0 0.6em;
  line-height: 1.2;
  scroll-margin-top: calc(var(--nav-height) + 16px);   /* prevents heading hiding under nav on anchor jump */
}

.post-body h2 { font-size: 1.55rem; font-weight: 600; }
.post-body h3 { font-size: 1.25rem; font-weight: 600; }

/* Body text in Garamond at a comfortable reading size */
.post-body p {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--color-text);
  margin-bottom: 1.4em;
}

.post-body p strong {
  font-weight: 700;
}

.post-body em {
  font-style: italic;
}

/* Blockquotes: left red bar, italic, muted colour */
.post-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 4px 0 4px 24px;
  margin: 2em 0;
  font-style: italic;
  color: var(--color-text-muted);
}

.post-body blockquote p {
  font-size: 1.1rem;
  margin-bottom: 0;
}

.post-body ul,
.post-body ol {
  padding-left: 1.5em;
  margin-bottom: 1.4em;
}

.post-body li {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.75;
  margin-bottom: 0.4em;
}

/* Inline links inside post content — always underlined */
.post-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-body hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 3em 0;
}

/* ---- Prev / next post navigation ---- */

/* Bar below the article with ← Older and Newer → links */
.post-nav {
  max-width: var(--reading-width);
  margin: 0 auto;
  border-top: 1px dashed var(--color-border);
  padding: 24px 0 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.post-nav a {
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.post-nav a:hover {
  color: var(--color-accent);
}

/* Arrows prepended/appended via CSS so they don't need to be in the HTML */
.post-nav__prev::before { content: '← '; }
.post-nav__next::after  { content: ' →'; }

/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */

/* Hidden by default; shown as a sticky sidebar at ≥1001px (see media query below) */
.toc {
  display: none;
}

/* "İçindekiler" label above the TOC list */
.toc__title {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 10px;
}

/* Vertical left-border rail that the active indicator slides along */
.toc__list {
  list-style: none;
  border-left: 1px solid var(--color-border);
}

/* Each heading link — negative margin-left lets its active border overlap the list border */
.toc__link {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  padding: 5px 0 5px 14px;
  line-height: 1.4;
  transition: color var(--transition);
  border-left: 2px solid transparent;   /* becomes accent-colored when active */
  margin-left: -1px;   /* overlaps the list's border-left so active border replaces it cleanly */
}

.toc__link:hover {
  color: var(--color-text);
}

/* Active heading (driven by IntersectionObserver in main.js) — accent colour + left bar */
.toc__link.active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

/* h3 headings are indented and slightly smaller than h2 */
.toc__item--h3 .toc__link {
  padding-left: 26px;
  font-size: 0.72rem;
}

/* ---- Mobile TOC FAB (Floating Action Button) ---- */

/* Red circular button — hidden by default, shown on post pages at ≤1000px (JS adds .has-toc to body) */
.toc-fab {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  transition: background-color var(--transition), transform var(--transition);
}

.toc-fab:hover {
  background-color: var(--color-accent-hover);
  transform: scale(1.05);
}

/* ---- Mobile TOC overlay ---- */

/* Semi-transparent full-screen backdrop behind the drawer — clicking it closes the TOC */
.toc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 201;
}

.toc-overlay.open {
  display: block;
}

/* ---- Mobile TOC drawer ---- */

/* Floating panel that slides up from the bottom-right above the FAB.
   Width is capped at 300px; translateY hides it off-screen when closed. */
.toc-drawer {
  position: fixed;
  bottom: 84px;   /* sits above the FAB (48px tall at bottom: 24px = top at 72px) */
  right: 12px;
  left: auto;
  width: min(300px, calc(100vw - 24px));   /* responsive: 300px max, 12px gap on each side */
  z-index: 202;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  max-height: 60vh;
  overflow-y: auto;
  transform: translateY(calc(100% + 96px));   /* 100% of own height + 96px offset = fully off-screen */
  transition: transform 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.toc-drawer.open {
  transform: translateY(0);
}

/* Sticky header inside the drawer — stays visible while the list scrolls */
.toc-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background-color: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ✕ close button inside the drawer header */
.toc-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1rem;
  padding: 4px;
  line-height: 1;
}

.toc-drawer__nav {
  padding: 8px 20px 20px;
}

/* Drawer resets the desktop left-border rail — links use bottom borders instead */
.toc-drawer__nav .toc__list {
  border-left: none;
}

.toc-drawer__nav .toc__link {
  padding: 10px 0;
  border-left: none;
  margin-left: 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.88rem;
}

.toc-drawer__nav .toc__link.active {
  border-left: none;
}

/* h3 items indented inside the drawer */
.toc-drawer__nav .toc__item--h3 .toc__link {
  padding-left: 14px;
  font-size: 0.82rem;
}

/* ============================================================
   SCROLL TO TOP BUTTON
   ============================================================ */

/* Fixed ↑ button on post pages; invisible (opacity 0) until user scrolls 300px */
.scroll-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 190;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  opacity: 0;
  pointer-events: none;   /* invisible = also not clickable */
  transition: opacity 0.2s ease, color var(--transition), border-color var(--transition);
}

/* JS adds .visible when scrollY > 300; JS also repositions right: value dynamically on desktop */
.scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-top:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* Hakkımda page content wrapper — same reading width as posts */
.about-wrap {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 64px 0 80px;
}

.about-wrap h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 40px;
  line-height: 1.1;
}

.about-wrap p {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--color-text-muted);
  margin-bottom: 1.4em;
}

.about-wrap p strong {
  color: var(--color-text);
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  border-top: 1px solid var(--color-border);
  padding: 32px 0;
  margin-top: 40px;
}

/* Copyright left, links (Blog | Hakkımda | X icon) right */
.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__text {
  font-size: 0.78rem;
  font-family: var(--font-sans);
  color: var(--color-text-light);
}

.footer__links {
  display: flex;
  gap: 20px;
  list-style: none;
}

.footer__links a {
  font-size: 0.78rem;
  font-family: var(--font-sans);
  color: var(--color-text-light);
}

.footer__links a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* Vertically centres the X (Twitter) SVG icon with the surrounding text links */
.footer__links a svg {
  vertical-align: middle;
  display: inline-block;
}

/* ============================================================
   UTILITY
   ============================================================ */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Accessible hide: visually hidden but still readable by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ============================================================
   LANDING PAGE (index.html)
   ============================================================ */

/* ---- 1 — Hero Split ---- */

/* 3-column grid: [serif heading] [thin vertical rule] [description + pills + CTA] */
.landing-hero {
  padding: 80px 0 72px;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 56px;
  align-items: center;
}

/* Short red horizontal rule above the serif heading */
.landing-hero__rule {
  width: 36px;
  height: 3px;
  background-color: var(--color-accent);
  margin-bottom: 28px;
}

/* Pull-quote replacing the old h1 — italic serif body, small-caps attribution */
.landing-hero__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.landing-hero__quote p {
  margin-bottom: 18px;
}

.landing-hero__quote cite {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* The thin vertical line dividing the hero into left and right halves */
.landing-hero__divider {
  width: 1px;
  align-self: stretch;
  background-color: var(--color-border);
}

.landing-hero__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.landing-hero__desc {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

/* Row of category pill links (İktisat, Hukuk, Felsefe, Politika) */
.landing-hero__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

/* Individual pill — bordered rectangle linking to a filtered blog page */
.landing-hero__cat-pill {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  color: var(--color-text-muted);
  transition: color var(--transition), border-color var(--transition);
}

.landing-hero__cat-pill:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* "Tüm Yazılar →" link below the category pills */
.landing-hero__cta {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition);
}

.landing-hero__cta:hover {
  color: var(--color-accent-hover);
}

/* ---- 2 — Featured Post ---- */

/* 2-column grid: [post body text] [4:3 image] */
.landing-featured {
  padding: 56px 0;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0 64px;
  align-items: start;
}

/* "SON YAZI — politika" eyebrow label above the featured title */
.landing-featured__eyebrow {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.landing-featured__label {
  color: var(--color-text-light);
  font-weight: 500;
}

.landing-featured__sep {
  color: var(--color-border);
  margin: 0 8px;
}

.landing-featured__cat {
  color: var(--color-accent);
  font-weight: 500;
}

/* Large serif heading that links to the most recent post */
.landing-featured__heading {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 18px;
  transition: color var(--transition);
}

.landing-featured__heading:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* Excerpt truncated to 3 lines with CSS line-clamp */
.landing-featured__excerpt {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* truncates to 3 lines with "..." */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer row: date on left, "Devamını oku →" on right */
.landing-featured__footer {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
}

.landing-featured__date {
  color: var(--color-text-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* "Devamını oku →" link — always underlined as a clear CTA */
.landing-featured__readmore {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.landing-featured__readmore:hover {
  color: var(--color-accent-hover);
}

/* 4:3 image area — shows the post's image or the anarcho-cap flag as fallback */
.landing-featured__visual {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image fills the entire visual area absolutely — inset: 0 means all four edges = 0 */
.landing-featured__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* ✦ placeholder shown when no image is available (hidden behind the img at z-index 1) */
.landing-featured__placeholder-icon {
  font-size: 2.2rem;
  color: var(--color-border);
  user-select: none;
  letter-spacing: 0;
}

/* ---- 3 — Post List ("Yazılar") ---- */

.landing-list__heading {
  margin-top: 16px;
}

/* 2-column editorial grid; odd items have a right border acting as column divider */
/* minmax(0, 1fr) instead of 1fr: prevents nowrap title text from setting the column's
   minimum width to the full text length, which would overflow the viewport on mobile */
.landing-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 40px 15px 0;
  border-bottom: 1px solid var(--color-border-light);
}

/* Right border on odd items creates the visual column divider */
.landing-list__item:nth-child(odd) {
  border-right: 1px solid var(--color-border);
}

/* Even items (right column) get left padding to clear the divider */
.landing-list__item:nth-child(even) {
  padding-left: 40px;
  padding-right: 0;
}

.landing-list__left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

/* Category label — small all-caps accent link (e.g. "İKTİSAT") */
.landing-list__cat {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  flex-shrink: 0;
  text-decoration: none;
}

.landing-list__cat:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* Post title — truncated to one line with ellipsis if too long */
/* min-width: 0 is required: flex items with white-space:nowrap default to min-width:auto
   (= full text width), which overflows the container on mobile without this override */
.landing-list__title {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  transition: color var(--transition);
}

.landing-list__title:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* Date aligned to the far right of each row */
.landing-list__date {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--color-text-light);
  flex-shrink: 0;
  white-space: nowrap;
}

/* "Tümünü gör →" link at the bottom-right of the list */
.landing-list__more {
  text-align: right;
  margin-top: 20px;
  margin-bottom: 64px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
}

.landing-list__more a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.landing-list__more a:hover {
  color: var(--color-accent);
}

/* ---- 4 — About Strip ---- */

/* Full-bleed secondary background section separating the list from the footer */
.landing-about-wrap {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* 2-column grid: [name + tagline + symbol | left] [description + Hakkımda link | right] */
.landing-about {
  padding-top: 56px;
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  align-items: center;
}

/* Left column content centred horizontally */
.landing-about__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* "Erdi Serdar" in large serif */
.landing-about__name {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 8px;
}

/* "AUSTRO-LIBERTARIANISM" tagline in accent colour */
.landing-about__tagline {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Anarcho-capitalist symbol image below the tagline */
.landing-about__symbol {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-top: 1.25rem;
  opacity: 0.9;
  border-radius: 18px;
}

/* Description paragraph on the right side of the about strip */
.landing-about__desc {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

/* "Hakkımda →" link — always underlined as a CTA */
.landing-about__link {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.landing-about__link:hover {
  color: var(--color-accent-hover);
}

/* ---- Landing responsive (≤800px) ---- */
@media (max-width: 800px) {
  /* Hero becomes a single column — divider hidden, sections stack vertically */
  .landing-hero {
    grid-template-columns: 1fr;
    gap: 32px 0;
    padding: 56px 0 48px;
  }

  .landing-hero__divider {
    display: none;
  }

  /* Featured post: image moves above text on mobile (order: -1) */
  .landing-featured {
    grid-template-columns: 1fr;
    gap: 32px 0;
    padding: 40px 0;
  }

  .landing-featured__visual {
    order: -1;
    aspect-ratio: 16 / 9;
  }

  /* Post list becomes single column */
  .landing-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Remove the two-column specific padding/borders from list items */
  .landing-list__item {
    padding: 14px 0 !important;
    border-right: none !important;
  }

  /* About strip becomes single column */
  .landing-about {
    grid-template-columns: 1fr;
    gap: 24px 0;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* ============================================================
   RESPONSIVE — breakpoints
   ============================================================ */

/* ≥1001px: post layout activates as a 2-column grid (TOC sidebar + reading column) */
@media (min-width: 1001px) {
  .post-layout {
    display: grid;
    grid-template-columns: 220px var(--reading-width);
    gap: 0 48px;
    justify-content: start;   /* left-aligns the grid instead of centering it */
    align-items: start;
  }

  /* TOC becomes a sticky sidebar; max() keeps it vertically centred without hiding under nav */
  .toc {
    display: block;
    position: sticky;
    top: max(calc(var(--nav-height) + 24px), calc(50vh - 100px));
    padding-top: 0;
  }
}

/* ≤1000px: TOC sidebar hidden → FAB button appears; scroll-top lifts above FAB */
@media (max-width: 1000px) {
  /* JS adds .has-toc to <body> when a post has ≥2 headings */
  body.has-toc .toc-fab {
    display: flex;
  }

  .scroll-top {
    bottom: 24px;
    right: 24px;
  }

  /* Scroll-to-top button lifts above the TOC FAB so they don't overlap */
  body.has-toc .scroll-top {
    bottom: 80px;
  }
}

/* ≤900px: blog grid goes from 3 to 2 columns */
@media (max-width: 900px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ≤600px: mobile — hamburger replaces nav links, single-column grid */
@media (max-width: 600px) {
  :root {
    --nav-height: 56px;   /* slightly shorter nav on small screens */
  }

  .scroll-top {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  /* Hide the horizontal desktop nav; show the hamburger button */
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }

  .posts-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hero { padding: 48px 0 40px; }

  .post-header { padding: 40px 0 28px; }

  /* Prev/next nav stacks vertically on narrow screens */
  .post-nav { flex-direction: column; gap: 12px; text-align: center; }

  .footer__inner { flex-direction: column; align-items: flex-start; }
}