/* ================================
   Alpekin Design Tokens
   Colors + Typography + Scale
   ================================ */

/* Fonts (do not change) */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* === Colors (UNCHANGED — do not edit) === */
  --ivory-bone: #e3d3a7;
  --alpine-green: #5e6c3b;
  --burnt-clay: #8d4f35;
  --oxidized-bronze: #926e33;
  --tree-gold: #c6a14f;
  --dark-soil: #2c2116;
  --cleansing-blue-gray: #a2b1b8;
  --moon-ash: #d8d2ca;
  --sacred-copper: #b76e2d;
  --ritual-fire-glow: #c7513a;
  --deep-moss: #3e4d34;
  --bone-black: #1c1c1c;

  /* === Typography Families (fixed) === */
  --font-heading: "EB Garamond", serif;  /* elegant, premium headings */
  --font-body: "Lora", serif;            /* sturdy, readable body */

  /* === Font Weights === */
  --weight-regular: 400;
  --weight-medium: 500;   /* default body */
  --weight-semibold: 600; /* default h1/h2 */
  --weight-bold: 700;     /* hero/article title */

  /* === Core Type Scale (comfort-first) === */
  --fs-article-title: 56px;   /* impactful hero/slogan */
  --lh-article-title: 1.15;
  --ls-article-title: -0.01em;

  --fs-h1: 40px;
  --lh-h1: 1.2;

  --fs-h2: 32px;
  --lh-h2: 1.25;

  --fs-h3: 24px;
  --lh-h3: 1.35;

  /* helpful additions for consistency */
  --fs-h4: 20px;
  --lh-h4: 1.4;

  --fs-body: 20px;   /* comfortable body text */
  --lh-body: 1.7;
  --ls-body: 0.003em; /* subtle tracking for Lora paragraphs */

  --fs-small: 16px;  /* never below 16px */
  --lh-small: 1.6;

  /* === Spacing Scale (classic 4/8-based) === */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* === Radius & Shadow === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 4px 12px rgba(0,0,0,.06);
  --shadow-md: 0 6px 18px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.10);
  --shadow-xl: 0 14px 36px rgba(0,0,0,.14);

  /* === Layout & Container === */
  --container-max: 1200px;
  --content-measure: 65ch; /* ideal reading width */

  /* === Transitions === */
  --ease-standard: 200ms ease;
  --ease-slow: 320ms ease;

  /* =====================================
     Reusable Component-Level Tokens
     (generic; used across many sections)
     ===================================== */

  /* Section titles (H2) */
  --fs-section-title-min: 1.6rem;
  --fs-section-title-max: 2.1rem;
  --ls-heading-tight: -0.005em;

  /* Card titles & body (for any card-like UI) */
  --fs-card-title-min: 1.15rem;
  --fs-card-title-max: 1.35rem;
  --fs-card-body-min: 1.05rem;
  --fs-card-body-max: 1.15rem;

  /* Hero helpers (optional usage) */
  --fs-hero-title-min: calc(var(--fs-h1) + 2px);
  --fs-hero-title-max: calc(var(--fs-article-title) + 8px);
  --fs-hero-tagline-min: var(--fs-small);
  --fs-hero-tagline-max: calc(var(--fs-body) - 2px);

  /* Buttons */
  --btn-font-weight: var(--weight-semibold);
  --btn-radius: var(--radius-md);
  --btn-padding-y: 12px;
  --btn-padding-x: 20px;
  --btn-gap: 10px;

  /* Inputs */
  --input-radius: var(--radius-md);
  --input-padding-y: 12px;
  --input-padding-x: 14px;
  --input-border-width: 1px;

  /* Tables */
  --table-row-padding-y: 12px;
  --table-row-padding-x: 16px;
  --table-radius: var(--radius-md);



  /* Logo */
  --header-height: 64px;
  --header-padding-y: 0.6rem;
  --header-padding-x: 1rem;
  --logo-size-desktop: 60px;   /* gerekirse 64 / 72 yapabilirsin */
  --logo-size-tablet: 52px;
  --logo-size-mobile: 48px;    /* küçük ekranda da rahat görünen boy */

}

/* ===================
   Base / Resets
   =================== */

html { font-size: 100%; }

body {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);  /* stronger default */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--bone-black);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  margin: 0;
  padding: 0;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--tree-gold); outline-offset: 2px; }

/* ===================
   Headings & Text
   =================== */

.article-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--fs-article-title);
  line-height: var(--lh-article-title);
  letter-spacing: var(--ls-article-title);
  color: var(--deep-moss);
  margin: 0 0 var(--space-5);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--deep-moss);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--ls-heading-tight);
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-semibold);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--weight-medium);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--weight-medium);
}

p { margin: 0 0 var(--space-4); }

.small, .caption {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-style: italic;
  color: var(--moon-ash);
}

/* Reading width helper */
.prose { max-width: var(--content-measure); }

/* ===================
   Links
   =================== */

a {
  color: var(--tree-gold);
  text-decoration: none;
  transition: color var(--ease-standard);
}
a:hover { text-decoration: underline; }

/* ===================
   Containers & Layout
   =================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* ===================
   Cards (generic)
   =================== */

.card {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--moon-ash) 70%, #fff);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: transform var(--ease-standard), box-shadow var(--ease-standard);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--dark-soil);
  font-size: clamp(var(--fs-card-title-min), 0.7vw + 0.95rem, var(--fs-card-title-max));
  letter-spacing: var(--ls-heading-tight);
  margin-bottom: var(--space-2);
}

.card__body {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--bone-black);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-size: clamp(var(--fs-card-body-min), 0.4vw + 0.9rem, var(--fs-card-body-max));
  margin: 0;
}

/* ===================
   Buttons (generic)
   =================== */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: transform var(--ease-standard), box-shadow var(--ease-standard);
}

/* Example variants referencing brand colors (colors unchanged) */
.button--primary {
  background: var(--tree-gold);
  color: var(--dark-soil);
  box-shadow: var(--shadow-sm);
}
.button--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Outline option */
.button--outline {
  background: transparent;
  color: var(--tree-gold);
  border: 1px solid var(--tree-gold);
}

/* ===================
   Inputs (generic)
   =================== */

.input {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  border-radius: var(--input-radius);
  border: var(--input-border-width) solid color-mix(in srgb, var(--moon-ash) 70%, #fff);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  background: #fff;
  color: var(--bone-black);
}
.input:focus {
  outline: none;
  border-color: var(--tree-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tree-gold) 35%, transparent);
}

/* ===================
   Tables (generic)
   =================== */

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--table-radius);
}
.table th, .table td {
  padding: var(--table-row-padding-y) var(--table-row-padding-x);
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--moon-ash) 70%, #fff);
}
.table th {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--dark-soil);
}
.table tr:last-child td {
  border-bottom: none;
}

/* ===================
   Utilities
   =================== */

.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ===================
   Motion Preferences
   =================== */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}












/* ================================
   Responsive & Semantic Extensions (final)
   ================================ */

:root {
  /* === Semantic roles (dark baseline) === */
  --surface:            var(--dark-soil);
  --surface-elevated:   color-mix(in srgb, var(--dark-soil) 85%, black);
  --text:               var(--ivory-bone);
  --text-muted:         color-mix(in srgb, var(--ivory-bone) 75%, transparent);
  --border:             color-mix(in srgb, var(--moon-ash) 60%, transparent);

  /* === Gradients & accents (brand aliases) === */
  --grad-gold-copper:   linear-gradient(90deg, var(--tree-gold), var(--sacred-copper));
  --accent-gold-ring:   0 0 0 3px color-mix(in srgb, var(--tree-gold) 35%, transparent);
  --accent-gold-glow:   0 0 14px rgba(198,161,79,.28);

  /* === Container paddings (viewport’a göre) === */
  --container-pad-inline-desktop: var(--space-4);
  --container-pad-inline-tablet:  var(--space-3);
  --container-pad-inline-mobile:  var(--space-2);

  /* === Cluster gap (nav, right-actions gibi kümeler) === */
  --cluster-gap-desktop: var(--space-5);
  --cluster-gap-tablet:  var(--space-4);
  --cluster-gap-mobile:  var(--space-2);

  /* === Header satır boşlukları & divider === */
  --header-row-gap-desktop: var(--space-5);
  --header-row-gap-mobile:  var(--space-3);
  --divider-thickness: 1px;
  --divider-height-desktop: 20px;
  --divider-height-mobile: 0px;

  /* === Fluid type sınırları (nav/utility & primary nav) === */
  --fs-utility-min: 0.875rem;   /* ~14px mobil */
  --fs-utility-max: 1rem;       /* ~16px desktop */
  --fs-primary-min: 1.05rem;    /* Core/Academy mobil taban */
  --fs-primary-max: 1.5rem;     /* Core/Academy desktop tavan */

  /* === CTA & touch hedefleri === */
  --btn-padding-y-mobile: 8px;
  --btn-padding-x-mobile: 14px;
  --touch-min: 40px;

  /* === Safe areas (çentik, alt bar) === */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* === Z-index scale === */
  --z-base: 0;
  --z-header: 10;
  --z-overlay: 1000;
  --z-modal: 1100;

  /* =====================================
     NEW: Semantic Elevation / Opacity / Timing / Radius / Overlays
     ===================================== */

  /* Elevation aliases (shadow’lara semantic isim) */
  --elevation-sm: var(--shadow-sm);
  --elevation-md: var(--shadow-md);
  --elevation-lg: var(--shadow-lg);
  --elevation-xl: var(--shadow-xl);

  /* Opacity seviyeleri (disabled/overlay durumları için) */
  --opacity-disabled: 0.4;
  --opacity-muted:    0.7;   /* örn. ikincil metin veya kapalı durumlar */
  --opacity-overlay:  0.75;  /* arka plan karartma */

  /* Timing tokens (hareket süreleri) */
  --duration-fast:     120ms;
  --duration-standard: 200ms;  /* --ease-standard ile uyumlu */
  --duration-slow:     320ms;  /* --ease-slow ile uyumlu */

  /* Radius alias (interaktif öğeler için tek noktadan değişim) */
  --radius-interactive: var(--radius-md);

  /* Overlay / scrim renkleri (modals, drawers) */
  --overlay-scrim: rgba(0, 0, 0, var(--opacity-overlay));

  /* =====================================
     (Docs) Breakpoint Referansları
     Not: MQ içinde var() kullanmayın; yalnızca dokümantatif amaçlı.
     ===================================== */
  --bp-xs: 360px;   /* küçük telefonlar */
  --bp-sm: 400px;   /* küçük-orta telefonlar */
  --bp-md: 480px;   /* orta telefonlar */
  --bp-lg: 640px;   /* büyük telefon / küçük tablet */
  --bp-xl: 1024px;  /* tablet / küçük dizüstü */
  --bp-2xl: 1280px; /* geniş masaüstü */
}






/* Header/Footer her sayfada arka plan ::before’ların üstünde kalsın */
.site-header,
.site-footer {
  position: relative;
  z-index: 2;
}