/* =====================================================================
   FERRINI — TASARIM KURALLARI (tek kaynak)
   Bu dosyayı düzenleyin; tüm site buradan beslenir. Sayfalarda sabit
   renk/font/boşluk YAZILMAZ — hep var(--...) kullanılır.
   Bölümler: 1 Renk · 2 Yazı · 3 Boşluk & ölçü · 4 Köşe & gölge ·
             5 Buton · 6 Kart · 7 Header/Footer · 8 Responsive kırılımlar
   ===================================================================== */

:root {
  /* ---------- 0. MARKA (logodan; değiştirmeyin) ---------- */
  --brand-navy:  #1f2735;   /* logo yazısı (Ferrini_Logo-01.svg) */
  --brand-slate: #9198a8;   /* logo üçgeni + slogan */
  --brand-white: #ffffff;

  /* ---------- 1. RENKLER ---------- */
  --color-ink:        #303133;   /* ana metin + koyu buton (sitede saf siyah yok) */
  --color-ink-soft:   #777777;   /* ikincil metin, alt açıklamalar */
  --color-ink-faint:  #d9d9d9;   /* "henüz okunmamış" kelime, pasif çizgi */
  --color-line:       #eaeaea;   /* ince ayraç çizgileri */
  --color-paper:      #ffffff;   /* sayfa zemini */
  --color-card:       #f4f2ee;   /* krem kart zemini (ürün, haber, footer, cam kart) */
  --color-card-line:  #e6e3dd;   /* kart içi ince çizgi / çerçeve */
  --color-accent:     #5b6b85;   /* Ferrini logo çelik mavisi: etiketler, vurgu, hover */
  --color-accent-ink: #4a586f;   /* accent'in koyu hali */
  --color-hover-dark: #454749;   /* koyu butonların hover tonu */
  --color-on-dark:    #ffffff;   /* koyu zemin üstü metin */

  /* ---------- 2. YAZI (3 rol: Başlık / Metin / Etiket) ---------- */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label:   var(--font-body);

  --weight-display: 300;
  --weight-body:    400;
  --weight-label:   500;

  /* Başlık ölçeği (akışkan: min, tercih, max) */
  --text-hero:     clamp(38px, 5.2vw, 76px);   /* hero h1 */
  --text-h2:       clamp(34px, 4.6vw, 64px);   /* bölüm dev başlığı (Birlikte Daha Güçlü) */
  --text-h3:       clamp(28px, 3vw, 40px);     /* bölüm başlığı */
  --text-h4:       clamp(19px, 1.5vw, 22px);   /* kart başlığı */
  --text-manifesto:clamp(28px, 3.6vw, 52px);
  --tracking-display: -0.02em;
  --leading-display:  1.15;

  /* Metin */
  --text-body:     15px;
  --text-body-lg:  clamp(15px, 1.15vw, 18px);  /* hero altı, bölüm açıklaması */
  --text-small:    13px;
  --leading-body:  1.6;

  /* Etiket (büyük harf) */
  --text-label:      12px;
  --tracking-label:  0.14em;
  --transform-label: uppercase;

  /* ---------- 3. BOŞLUK & ÖLÇÜ ---------- */
  --wrap:        1320px;                       /* içerik kapsayıcı genişliği */
  --pad:         clamp(20px, 4vw, 64px);       /* kenar boşluğu */
  --gap-section: clamp(120px, 14vw, 220px);    /* bölümler arası nefes payı */
  --gap-grid:    28px;                         /* kart ızgarası aralığı */
  --gap-grid-sm: 20px;

  /* ---------- 4. KÖŞE & GÖLGE ---------- */
  --radius-card:  22px;
  --radius-media: 14px;
  --radius-pill:  999px;
  --radius-panel: 28px;   /* footer, büyük bloklar */
  --shadow-card-hover: 0 30px 60px -30px rgba(20, 24, 30, .28);
  --shadow-glass:      0 30px 80px -30px rgba(0, 0, 0, .45);
  --shadow-nav:        0 0 24px rgba(34,42,53,.06), 0 1px 1px rgba(0,0,0,.05), 0 0 0 1px rgba(34,42,53,.04), 0 0 4px rgba(34,42,53,.08), 0 16px 68px rgba(47,48,55,.05);

  /* ---------- 5. BUTON ---------- */
  --btn-pill-pad:      6px 6px 6px 22px;   /* hap: sol yazı, sağ ok dairesi */
  --btn-pill-icon:     34px;               /* ok dairesi çapı */
  --btn-primary-bg:    var(--color-ink);
  --btn-primary-fg:    var(--color-on-dark);
  --btn-light-bg:      #ffffff;
  --btn-light-fg:      var(--color-ink);
  --btn-link-underline: 1px;               /* alt çizgili metin buton */
  --btn-radius:        6px;                /* navbar dikdörtgen butonlar */

  /* ---------- 6. KART ---------- */
  --card-bg:       var(--color-card);
  --card-pad:      12px 12px 22px;         /* haber kartı iç boşluğu */
  --card-media-ratio:   3 / 4;             /* ürün kartı görsel oranı */
  --card-news-ratio:    16 / 10;
  --glass-bg:      rgba(244, 242, 238, .92);
  --glass-blur:    18px;

  /* ---------- 7. HEADER / FOOTER ---------- */
  --nav-height:        60px;
  --nav-max:           1280px;
  --nav-shrink-width:  48%;                /* kaydırınca daralan genişlik (masaüstü) */
  --nav-shrink-min:    920px;
  --nav-shrink-at:     100px;              /* bu kadar kaydırınca daralır */
  --nav-bg:            rgba(255, 255, 255, .8);
  --nav-blur:          10px;
  --footer-bg:         var(--color-card);
  --footer-radius:     var(--radius-panel);
  --footer-inset:      12px;               /* footer kartının kenardan mesafesi */

  /* ---------- 8. RESPONSIVE KIRILIMLAR ---------- */
  /* Not: CSS değişkenleri @media içinde kullanılamaz; bu değerler
     base.css'teki sorgularla AYNI tutulur ve design-system.html'de gösterilir. */
  --bp-min:     360px;    /* desteklenen en dar genişlik */
  --bp-mobile:  560px;    /* tek sütun */
  --bp-tablet:  900px;    /* iki sütun, mobil menü */
  --bp-desktop: 1024px;   /* masaüstü navbar */
  --bp-wide:    1440px;   /* kapsayıcı tam genişlikte, kenarlar boş */

  /* ---------- 9. HAREKET ---------- */
  --ease:         cubic-bezier(.22, .61, .36, 1);
  --ease-spring:  cubic-bezier(.2, .8, .2, 1);
  --dur-fast:     .3s;
  --dur-base:     .55s;
  --dur-slow:     .9s;
  --reveal-offset: 24px;   /* görünürlük animasyonu başlangıç kayması */
}

/* Mobil ölçek düzeltmeleri (tablet altı) */
@media (max-width: 900px) {
  :root {
    --gap-grid: var(--gap-grid-sm);
    --radius-panel: 24px;
    --footer-inset: 0px;
  }
}