/* ==========================================================================
   Ali ÖZEL Portfolio - Centralized Typography Design System
   Source of Truth for all fonts across the website.

   Architecture:
   - Başlık / Display      : Bricolage Grotesque (Bold)
   - Buton / Rozet (Badge) : Space Mono
   - Gövde Metni           : Space Grotesk
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-badge: 'Space Mono', monospace;
  --font-body: 'Space Grotesk', sans-serif;
}

/* Compact navigation for the original homepage and long-form article on phones. */
.mobile-tab-nav { display: none; }
@media (max-width: 767px) {
  body:has(.mobile-tab-nav) { padding-bottom: 66px; }
  .mobile-tab-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; justify-content: space-around; gap: 4px;
    padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: #18181b; border-top: 1px solid #3f3f46;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .35);
  }
  .mobile-tab-nav a {
    color: #e4e4e7; font: 700 12px 'Space Grotesk', sans-serif;
    padding: 8px 10px; border-radius: 7px; text-decoration: none;
  }
  .mobile-tab-nav a[aria-current="page"] { color: #fff; background: #f97316; }
  html.light .mobile-tab-nav { background: #fff; border-color: #d6ccc4; }
  html.light .mobile-tab-nav a { color: #27272a; }
  html.light .mobile-tab-nav a[aria-current="page"] { color: #fff; }
}

/* Base Body Typography: Space Grotesk */
html,
body {
  font-family: var(--font-body);
}

/* 1. Başlık / Display: Bricolage Grotesque (Bold) */
h1, h2, h3, h4, h5, h6,
.font-display,
.font-display-hero,
.font-display-hero-mobile,
.font-headline-xl,
.font-headline-xl-mobile,
.font-headline-lg,
.font-headline-md,
.font-headline-sm,
[class*="headline-"],
[class*="display-"] {
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* 2. Buton / Rozet (Badge): Space Mono */
button,
.btn,
.badge,
.tag,
.filter-btn,
.filter-pill,
.carousel-counter,
.font-button-text,
.font-label-mono-sm,
.font-label-mono-md,
.font-label-sm,
.font-label-md,
.font-label-lg,
.font-badge,
.font-mono,
[class*="button-text"],
[class*="label-mono-"],
code,
pre,
kbd {
  font-family: var(--font-badge) !important;
}

/* 3. Gövde Metni: Space Grotesk */
p,
li,
blockquote,
.font-body-lg,
.font-body-md,
.font-body-sm,
.font-body,
[class*="body-"] {
  font-family: var(--font-body) !important;
}

/* Ensure Material Symbols are untouched by generic font overrides */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}