/*============================================================================================
  Mutfaktan Yarına & Coca-Cola Akademi
  Kurumsal Temel CSS (base.css)
  Yazı tipi: yalnızca TCCC Unity (Headline & Text). Renk: marka siyahı/kırmızısı ve tonları.
  Font kuralı (Unity tip-size rehberi): 16 pt (≈21,3 px) ve üstü → --font-headline, altı → --font-body.
  Light (300) en az 9 pt (12 px).
============================================================================================*/

/*-------- 1. TCCC Unity Headline (16 pt ve üstü başlıklar) --------*/
@font-face {
  font-family: 'TCCC-UnityHeadline';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/TCCC-UnityHeadline-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'TCCC-UnityHeadline';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/TCCC-UnityHeadline-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'TCCC-UnityHeadline';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/TCCC-UnityHeadline-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'TCCC-UnityHeadline';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/TCCC-UnityHeadline-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'TCCC-UnityHeadline';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./fonts/TCCC-UnityHeadline-Black.woff2') format('woff2');
}

/*-------- 2. TCCC Unity Text (16 pt altı: gövde, form, etiket, düğme, tablo) --------*/
@font-face {
  font-family: 'TCCC-UnityText';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/TCCC-UnityText-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'TCCC-UnityText';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/TCCC-UnityText-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'TCCC-UnityText';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/TCCC-UnityText-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'TCCC-UnityText';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/TCCC-UnityText-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'TCCC-UnityText';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./fonts/TCCC-UnityText-Black.woff2') format('woff2');
}

/*-------- Kurumsal Tasarım Değişkenleri (:root) — sitedeki tek token kaynağı --------*/
:root {
  /* Marka kırmızısı (R:244 G:0 B:9) ve beyazla karışım tonları (%80/60/40/20) */
  --primary: #f40009;
  --primary-hover: #d80007;
  --primary-dark: #a30006;
  --primary-80: #f6333a;
  --primary-60: #f8666b;
  --primary-40: #fb999d;
  --primary-20: #fdccce;
  --primary-tint: #fee2e2;       /* açık kırmızı zemin */
  --primary-light: #fff5f5;      /* çok açık kırmızı zemin */
  --primary-glow: rgba(244, 0, 9, 0.22);

  /* Marka siyahı ve tonları (%100, %80, %60, %40, %20) + açık zeminler */
  --dark: #000000;
  --gray-900: #000000;           /* %100 */
  --gray-800: #333333;           /* %80 */
  --gray-700: #333333;
  --gray-600: #666666;           /* %60 */
  --gray-500: #666666;
  --gray-400: #999999;           /* %40 */
  --gray-300: #cccccc;           /* %20 */
  --gray-200: #e5e5e5;
  --gray-150: #eeeeee;
  --gray-100: #f5f5f5;
  --gray-50: #fbfbfb;
  --white: #ffffff;

  /* Zemin ve çerçeve */
  --bg-page: #f5f5f5;
  --bg-card: #ffffff;
  --bg-muted: #fbfbfb;
  --border-color: #dddddd;
  --border-light: #ededed;
  --border-focus: #f40009;

  /* Durum renkleri: tek semantik set */
  --success: #15803d;
  --success-light: #f0fdf4;
  --success-border: #bbf7d0;
  --success-dark: #166534;
  --warning: #b45309;
  --warning-light: #fffbeb;
  --warning-border: #fde68a;
  --warning-text: #92400e;
  --danger: #c90007;
  --danger-light: #fff2f2;
  --danger-border: #fdccce;

  /* Geri düğmesi */
  --btn-backward-bg: #e5e5e5;
  --btn-backward-color: #666666;
  --btn-backward-hover: #000000;

  /* Tipografi: yalnızca TCCC Unity */
  --font-headline: 'TCCC-UnityHeadline', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'TCCC-UnityText', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Köşe yuvarlaklıkları */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-pill: 50px;

  /* Gölgeler */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 25px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --shadow-btn: 0 4px 14px rgba(244, 0, 9, 0.28);
  --shadow-btn-hover: 0 6px 18px rgba(201, 0, 7, 0.35);

  /* Form denetimleri (forms.css tek kaynak): yükseklik 48px, kenarlık 1.5px, yazı 16px (iOS odakta yakınlaştırmaz), odak halkası 3px */
  --control-h: 3rem;
  --control-radius: var(--radius-sm);
  --control-border: 1.5px solid var(--border-color);
  --control-bg: var(--white);
  --control-font: 1rem;
  --focus-ring: 0 0 0 3px var(--primary-glow);
  --danger-glow: rgba(201, 0, 7, 0.18);

  /* Geçişler */
  --transition: all 0.25s ease-in-out;
  --btn-transition: background 0.35s ease, color 0.35s ease, transform 0.2s ease, box-shadow 0.25s ease;

  /* Yapışkan (sticky) üst bar ofsetleri — index.js okuyabilir */
  --header-h: 76px;              /* ana menü yüksekliği */
  --subnav-h: 54px;              /* mobil alt menü (≤1024px) ek yüksekliği */
  --sticky-offset: var(--header-h);

  /* Marka logosu genişlikleri: 30 mm ≈ 114 px altına inmez */
  --logo-w-sm: 114px;
  --logo-w-md: 160px;

  /* Sayfa ritmi ve kapsayıcı: boşluk ve genişlik için tek kaynak (site-chrome.css'teki kapsayıcı kuralı ve .content-section ritmi kullanır) */
  --container: 1200px;           /* üst menü, hero, yerleşim, alt bilgi ortak genişliği */
  --container-narrow: 920px;     /* kapsayıcı içinde ortalanan tek sütunlu sayfalar (hibe, SSS) */
  --gutter: 2rem;                /* kapsayıcı sol/sağ iç boşluğu */
  --section-gap: 4.5rem;         /* bölümler arası, hero → ilk bölüm, son bölüm → alt bilgi */
  --block-gap: 2rem;             /* bölüm içinde ardışık bloklar arası */
  --head-gap: 1.25rem;           /* başlık → ilk giriş bloğu, ardışık paragraflar */
  --badge-gap: 0.5rem;           /* rozet → başlık */
}

@media (max-width: 1024px) {
  :root {
    --sticky-offset: calc(var(--header-h) + var(--subnav-h));
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 1rem;
    --section-gap: 3rem;
  }
}

/* Dokunmatik: çift dokunma yakınlaştırma gecikmesi olmasın (mobil ve dokunmatik cihazlar) */
@media (max-width: 768px), (pointer: coarse) {
  a, button, summary, label, select, textarea, input, [role="button"] {
    touch-action: manipulation;
  }
}

/*-------- Temel Sıfırlama (CSS Reset) --------*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Gizleme: bileşen sınıfları display ayarlasa bile hidden özniteliği kazanır */
[hidden],
.hidden {
  display: none !important;
}

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

body {
  font-family: var(--font-body);
  background-color: var(--bg-page);
  color: var(--gray-800);
  font-size: 0.9375rem;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.no-scroll {
  overflow: hidden;
}

/* Başlıklar: h1-h2 varsayılan boyutu ≥ 16 pt → Headline; h3-h6 → Text (sınıf kuralı boyutu değiştirirse yazı tipi de o kuralda seçilir) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.25;
}

h1, h2 {
  font-family: var(--font-headline);
}

/* Linkler */
a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

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

/*============================================================================================
  Ortak Yardımcı Sınıflar
============================================================================================*/

/* Yalnızca ekran okuyucu ve klavye için görünür */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "İçeriğe geç": partials/skip-link, <body>'nin ilk çocuğu. Yalnızca klavye odağında görünür, <main id="main">'e atlar */
body > a[href="#main"] {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 1.1rem;
  background: var(--dark);
  color: var(--white);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: none;
}

body > a[href="#main"]:focus {
  transform: none;
}

/* Resmî logo: koruma alanı ve 30 mm (≈114 px) minimum genişlik; oran sabit, kırpma yok */
.brand-logo {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  min-width: var(--logo-w-sm);
  transition: opacity 0.2s ease;
}

a:hover > .brand-logo {
  opacity: 0.8;
}

/* Resmî logo kabı: renkli/koyu zeminde (kırmızı panel, siyah alt bilgi) logo okunur kalsın diye beyaz, yuvarlatılmış; iç boşluk ≈ "M" harfi.
   Kap içindeki logo varsayılan 114 px; alt bilgi 160 px yapar (site-chrome.css) */
.brand-logo-card {
  display: inline-block;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease;
}

a.brand-logo-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.brand-logo-card > img {
  width: var(--logo-w-sm);
}

/* Küçük üst etiket (eyebrow) */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Düğme yükleniyor durumu (dönen halka) */
.loading {
  position: relative;
  pointer-events: none;
  cursor: progress;
  color: transparent !important;
}

.loading > * {
  visibility: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: my-spin 0.7s linear infinite;
}

@keyframes my-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .loading::after {
    animation-duration: 1.6s;
  }
}