/* ============================================================
   hizlimalzeme.com — YENİ TEMA TEMELİ
   Font: Manrope (self-host) · 8pt spacing sistemi · Marka renkleri
   main.css'ten SONRA yüklenir (üzerine biner).
   ============================================================ */

/* --- MANROPE FONT (self-host, woff2) --- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/manrope-v20-latin_latin-ext-regular.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/manrope-v20-latin_latin-ext-500.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/manrope-v20-latin_latin-ext-600.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/manrope-v20-latin_latin-ext-700.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/manrope-v20-latin_latin-ext-800.woff2') format('woff2');}

/* --- TASARIM DEĞİŞKENLERİ (token'lar) --- */
:root{
  /* Marka renkleri */
  --c-orange:#FD5722;      /* ana turuncu */
  --c-orange-d:#E14A17;    /* turuncu hover (koyu) */
  --c-slate:#253D4E;       /* lacivert (menü, metin) */
  --c-wa:#2F9E8B;          /* WhatsApp yeşili — Figma'daki tona göre ayarlanacak */
  --c-wa-d:#268073;        /* WhatsApp hover */
  --c-white:#FFFFFF;

  /* Nötrler */
  --c-text:#253D4E;        /* ana metin */
  --c-muted:#6B7280;       /* soluk metin */
  --c-bg:#F6F7F9;          /* açık gri zemin (üst şerit) */
  --c-border:#E5E7EB;      /* ince çizgi */

  /* 8pt SPACING SİSTEMİ — tüm padding/margin buradan gelir */
  --s-half:4px;  /* sadece optik hizalama/1px sınır durumları için */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:40px; --s6:48px; --s7:56px; --s8:64px;

  /* Köşe yarıçapları */
  --r-sm:8px;  --r-md:12px; --r-lg:16px; --r-pill:999px;

  /* Tipografi */
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* --- TEMEL TİPOGRAFİ --- */
body{
  font-family:var(--font);
  color:var(--c-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font);font-weight:700;color:var(--c-slate);}
strong,b{font-weight:700;}
a{color:var(--c-slate);}
a:hover{color:var(--c-orange);}

/* Yardımcı: markanın turuncu vurgu rengi */
.text-brand{color:var(--c-orange)!important;}
.bg-brand{background:var(--c-orange)!important;}