/* ==========================================================================
   MEGATICARET.COM — DESIGN TOKENS
   Sürüm: 2.0 (2026-11-10) — Son revizyon (nihai kararlar uygulandı)
   Kaynak: C:\dev\megaticaret\design-references
           (00 logo, 01–05 sayfalar, "Megaticaret Footer Tasarımı ve
            Uygulama Rehberi.png" = onaylı footer)

   İŞARETLEME KURALI
   [Ö]  = Referans görselden piksel örneklemesiyle ÖLÇÜLDÜ (render/JPEG
          sapması ±1-3 ton olabilir; değer normalize edildi).
   [T]  = TAHMİNİ. Göz kararı/oranlama. Uygulamada referansla doğrulanmalı.
   [K]  = KARAR. Referansta karşılığı yok veya kullanıcı kararıyla belirlendi.

   Tüm değişkenler `--mt-` önekiyle başlar.

   NİHAİ KARARLAR (v2.0)
   - Marka/ana yeşil: #359A07  → --mt-color-primary
   - Beyaz metin taşıyan TÜM yeşil yüzeyler (buton, aktif menü, rozet,
     sepet sayacı, aktif sayfa no): #2C8205 → --mt-color-primary-strong
   - Footer zemini BEYAZ. Koyu antrasit yalnız en alttaki telif/hukuk şeridi.
   - Fontlar: başlık Plus Jakarta Sans, gövde Inter.
     (Footer referans görselindeki "Montserrat" ve "#22C55E" önerileri
      GEÇERSİZDİR — kullanıcının nihai kararı önceliklidir.)
   - Animasyon süreleri 150–320ms.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. RENKLER — PRIMITIVE (ham palet)
     ------------------------------------------------------------------------ */

  /* Marka yeşili */
  --mt-green-25:  #F5FAF4;  /* [Ö] footer avantaj bandı zemini */
  --mt-green-50:  #F2FAEE;  /* [Ö] yan bilgi kartı, başarı pill zemini */
  --mt-green-100: #E6F6DE;  /* [Ö] ikon dairesi zemini, avatar zemini */
  --mt-green-200: #CDEDBE;  /* [T] seçili satır */
  --mt-green-300: #9FD785;  /* [T] disabled yeşil buton */
  --mt-green-400: #76C365;  /* [Ö] MEGATECH logo küre yeşili (arayüzde kullanılmaz) */
  --mt-green-500: #3FA60A;  /* [Ö] referanstaki rozet/ikon tonu — yalnız ikon/dekor */
  --mt-green-600: #359A07;  /* [Ö] ANA MARKA YEŞİLİ (nihai karar) */
  --mt-green-700: #2C8205;  /* [K] BEYAZ METİNLİ YEŞİL YÜZEYLER (nihai karar) — beyazla ~4.9:1 */
  --mt-green-800: #236A04;  /* [K] buton hover, küçük yeşil link hover */
  --mt-green-850: #1C5603;  /* [K] buton active/pressed */
  --mt-green-900: #152C12;  /* [Ö] koyu yeşil özel alan (kampanya bandı vb.) */
  --mt-lime-400:  #75CC07;  /* [Ö] koyu zemin üstü vurgu ("Hoş Geldiniz!") */

  /* Antrasit / nötr koyu */
  --mt-ink-950: #0E1319;    /* [Ö] çok koyu özel alanlar — FOOTER ZEMİNİ DEĞİLDİR */
  --mt-ink-900: #141A21;    /* [Ö] "Tüm Kategoriler" butonu */
  --mt-ink-850: #1F252E;    /* [Ö] giriş sayfası koyu panel */
  --mt-ink-800: #22272D;    /* [Ö] topbar (#242B32) + footer alt şerit (#22262B) — ortak değer */
  --mt-ink-700: #2E363F;    /* [T] koyu yüzey hover */

  /* Gri skala */
  --mt-gray-900: #0B0C0E;   /* [Ö] başlık */
  --mt-gray-800: #1D2228;   /* [T] gövde koyu metin */
  --mt-gray-700: #374151;   /* [Ö: footer] footer link/gövde metni */
  --mt-gray-600: #5C636B;   /* [T] açıklama metni */
  --mt-gray-500: #6B7280;   /* [Ö: footer] soluk metin, sayaç "(842)" — beyazda ~4.8:1 */
  --mt-gray-400: #A3A9B1;   /* [T] üstü çizili eski fiyat, devre dışı */
  --mt-gray-300: #D0D5DB;   /* [T] input hover kenarlık */
  --mt-gray-200: #DEE2E6;   /* [Ö] input kenarlığı */
  --mt-gray-150: #E5E7EB;   /* [Ö: footer] kart/ayraç kenarlığı */
  --mt-gray-100: #F3F4F5;   /* [Ö] kategori kartı zemini */
  --mt-gray-50:  #F7F9F8;   /* [Ö] gri zeminli bantlar */
  --mt-gray-25:  #F9FAFB;   /* [Ö] açık şerit zemini */
  --mt-white:    #FFFFFF;

  /* Durum renkleri */
  --mt-red-600:   #E3141A;  /* [Ö] indirim rozeti (beyazla ~4.8:1) */
  --mt-red-50:    #FDECEC;  /* [K] hata zemini */
  --mt-blue-600:  #0F5DDB;  /* [Ö] "Kargoda" */
  --mt-blue-50:   #E2F0FE;  /* [Ö] */
  --mt-amber-400: #F5A623;  /* [T] yıldız puanı (ikon, metin değil) */
  --mt-amber-50:  #FFF6E5;  /* [K] uyarı zemini */

  /* ------------------------------------------------------------------------
     2. RENKLER — SEMANTIC (bileşenler yalnız bunları kullanır)
     ------------------------------------------------------------------------ */

  /* Marka yeşili: ikon, kenarlık, başlık çubuğu, aktif alt çizgi, checkbox
     dolgusu, range slider, büyük fiyat (≥24px bold), "Kampanyalar" (≥14px bold) */
  --mt-color-primary:          var(--mt-green-600);

  /* Beyaz metin taşıyan yeşil yüzeyler + 14px ve altı yeşil metinler */
  --mt-color-primary-strong:        var(--mt-green-700);
  --mt-color-primary-strong-hover:  var(--mt-green-800);
  --mt-color-primary-strong-active: var(--mt-green-850);

  --mt-color-primary-soft:     var(--mt-green-50);
  --mt-color-primary-tint:     var(--mt-green-100);
  --mt-color-on-primary:       var(--mt-white);
  --mt-color-accent-on-dark:   var(--mt-lime-400);

  /* Buton kısayolları */
  --mt-btn-primary-bg:        var(--mt-color-primary-strong);
  --mt-btn-primary-bg-hover:  var(--mt-color-primary-strong-hover);
  --mt-btn-primary-bg-active: var(--mt-color-primary-strong-active);
  --mt-btn-primary-text:      var(--mt-white);
  --mt-btn-outline-border:    var(--mt-color-primary);
  --mt-btn-outline-text:      var(--mt-color-primary-strong);

  --mt-color-dark:             var(--mt-ink-900);
  --mt-color-dark-surface:     var(--mt-ink-850);
  --mt-color-topbar:           var(--mt-ink-800);

  /* Footer (v2.0 — beyaz) */
  --mt-footer-bg:              var(--mt-white);
  --mt-footer-benefits-bg:     var(--mt-green-25);
  --mt-footer-text:            var(--mt-gray-700);
  --mt-footer-heading:         var(--mt-gray-900);
  --mt-footer-link-hover:      var(--mt-color-primary-strong);
  --mt-footer-divider:         var(--mt-gray-150);
  --mt-footer-bar-bg:          var(--mt-ink-800);   /* alt telif/hukuk şeridi */
  --mt-footer-bar-text:        rgba(255, 255, 255, 0.88);

  /* Metin */
  --mt-text-heading:   var(--mt-gray-900);
  --mt-text-body:      var(--mt-gray-800);
  --mt-text-secondary: var(--mt-gray-600);
  --mt-text-muted:     var(--mt-gray-500);
  --mt-text-disabled:  var(--mt-gray-400);
  --mt-text-on-dark:   #FFFFFF;
  --mt-text-on-dark-muted: rgba(255, 255, 255, 0.72);
  --mt-text-price:     var(--mt-gray-900);       /* liste kartı fiyatı */
  --mt-text-price-pdp: var(--mt-color-primary);  /* PDP fiyatı (34px bold = büyük metin) */
  --mt-text-link:      var(--mt-color-primary-strong);

  /* Arka plan */
  --mt-bg-page:      var(--mt-white);
  --mt-bg-surface:   var(--mt-white);
  --mt-bg-subtle:    var(--mt-gray-50);
  --mt-bg-muted:     var(--mt-gray-100);
  --mt-bg-strip:     var(--mt-gray-25);
  --mt-bg-soft-green:var(--mt-green-25);

  /* Kenarlık */
  --mt-border-subtle:  var(--mt-gray-150);
  --mt-border-default: var(--mt-gray-200);
  --mt-border-strong:  var(--mt-gray-300);
  --mt-border-focus:   var(--mt-color-primary);
  --mt-border-on-dark: rgba(255, 255, 255, 0.12);

  /* Durum */
  --mt-success:     var(--mt-color-primary-strong);
  --mt-success-bg:  var(--mt-green-50);
  --mt-danger:      var(--mt-red-600);
  --mt-danger-bg:   var(--mt-red-50);
  --mt-info:        var(--mt-blue-600);
  --mt-info-bg:     var(--mt-blue-50);
  --mt-warning:     #B26A00;
  --mt-warning-bg:  var(--mt-amber-50);
  --mt-neutral-status:    var(--mt-gray-700);
  --mt-neutral-status-bg: #F0F0EE;            /* [Ö] */
  --mt-rating:      var(--mt-amber-400);

  --mt-focus-ring: 0 0 0 3px rgba(53, 154, 7, 0.35); /* [K] */

  /* ------------------------------------------------------------------------
     3. TİPOGRAFİ (nihai karar)
     ------------------------------------------------------------------------ */
  --mt-font-heading: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mt-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mt-font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --mt-fw-regular:  400;
  --mt-fw-medium:   500;
  --mt-fw-semibold: 600;
  --mt-fw-bold:     700;
  --mt-fw-extrabold:800;

  --mt-fs-2xs: 0.6875rem; /* 11px — rozet, alt navigasyon etiketi */
  --mt-fs-xs:  0.75rem;   /* 12px — yardımcı metin, sayaç */
  --mt-fs-sm:  0.8125rem; /* 13px — topbar, breadcrumb, footer küçük metin */
  --mt-fs-base:0.875rem;  /* 14px — gövde, ürün kartı başlığı */
  --mt-fs-md:  0.9375rem; /* 15px — form, ana navigasyon, footer linkleri */
  --mt-fs-lg:  1rem;      /* 16px — footer link (D), liste fiyatı (M) */
  --mt-fs-xl:  1.125rem;  /* 18px — kart başlığı, footer kolon başlığı (M) */
  --mt-fs-2xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);   /* 20→24 — bölüm başlığı, footer kolon başlığı (D) */
  --mt-fs-3xl: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);      /* 24→32 */
  --mt-fs-4xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);   /* 28→44 */
  --mt-fs-5xl: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);       /* 32→56 — hero */

  --mt-lh-tight:   1.15;
  --mt-lh-snug:    1.3;
  --mt-lh-normal:  1.5;
  --mt-lh-relaxed: 1.65;

  --mt-ls-tight:  -0.02em;
  --mt-ls-normal: 0;
  --mt-ls-wide:   0.04em;

  /* ------------------------------------------------------------------------
     4. BOŞLUK SİSTEMİ — 4px tabanlı [K]
     ------------------------------------------------------------------------ */
  --mt-space-0:  0;
  --mt-space-1:  0.25rem; /*  4 */
  --mt-space-2:  0.5rem;  /*  8 */
  --mt-space-3:  0.75rem; /* 12 */
  --mt-space-4:  1rem;    /* 16 */
  --mt-space-5:  1.25rem; /* 20 */
  --mt-space-6:  1.5rem;  /* 24 */
  --mt-space-7:  1.75rem; /* 28 */
  --mt-space-8:  2rem;    /* 32 */
  --mt-space-10: 2.5rem;  /* 40 */
  --mt-space-12: 3rem;    /* 48 */
  --mt-space-16: 4rem;    /* 64 */
  --mt-space-20: 5rem;    /* 80 */

  --mt-section-gap: clamp(2rem, 1.5rem + 1.5vw, 3rem);    /* 32→48 */
  --mt-section-title-gap: var(--mt-space-4);

  /* ------------------------------------------------------------------------
     5. LAYOUT
     ------------------------------------------------------------------------ */
  --mt-container-max:    1440px;  /* [T] dış sınır; footer referansı da 1320–1440 diyor */
  --mt-container-narrow: 1200px;  /* [K] metin/hukuk sayfaları */
  --mt-container-auth:   1480px;  /* [T] giriş/kayıt kartı */
  --mt-gutter: clamp(1rem, 0.5rem + 2vw, 2rem); /* 16 → 32 */

  --mt-grid-columns: 12;
  --mt-grid-gap:     clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem);   /* 12→20 */
  --mt-card-gap:     clamp(0.625rem, 0.5rem + 0.4vw, 0.875rem); /* 10→14 */

  --mt-sidebar-w:         260px; /* [T] */
  --mt-account-sidebar-w: 300px; /* [T] */

  /* Header */
  --mt-topbar-h:  36px;   /* [T] */
  --mt-header-h:  80px;   /* [T] */
  --mt-nav-h:     48px;   /* [T] */
  --mt-header-h-compact: 64px;  /* [K] */
  --mt-header-h-mobile:  56px;  /* [K] */
  --mt-search-row-h-mobile: 52px; /* [K] */

  /* Mobil sabit alt navigasyon (nihai karar #11) */
  --mt-bottom-nav-h: 64px; /* [K] + env(safe-area-inset-bottom) */
  --mt-sticky-bar-h: 64px; /* [K] PDP/sepet satın alma çubuğu */

  /* ------------------------------------------------------------------------
     6. BORDER RADIUS [T]
     ------------------------------------------------------------------------ */
  --mt-radius-xs:   4px;   /* checkbox */
  --mt-radius-sm:   6px;   /* rozet, kart sepet butonu */
  --mt-radius-md:   8px;   /* buton, input, select */
  --mt-radius-lg:   12px;  /* ürün/kategori/stat kartı, footer sosyal butonu */
  --mt-radius-xl:   16px;  /* banner, sidebar, footer avantaj bandı */
  --mt-radius-2xl:  24px;  /* hero, giriş/kayıt kartı */
  --mt-radius-pill: 999px; /* arama, e-bülten input+buton, durum pill */
  --mt-radius-round: 50%;

  /* ------------------------------------------------------------------------
     7. GÖLGELER [T]
     ------------------------------------------------------------------------ */
  --mt-shadow-xs: 0 1px 2px rgba(16, 22, 29, 0.05);
  --mt-shadow-sm: 0 1px 3px rgba(16, 22, 29, 0.06), 0 1px 2px rgba(16, 22, 29, 0.04);
  --mt-shadow-md: 0 6px 16px -4px rgba(16, 22, 29, 0.10), 0 2px 4px rgba(16, 22, 29, 0.04);
  --mt-shadow-lg: 0 16px 40px -12px rgba(16, 22, 29, 0.18);
  --mt-shadow-xl: 0 24px 64px -16px rgba(16, 22, 29, 0.24);
  --mt-shadow-header: 0 2px 12px rgba(16, 22, 29, 0.08);
  --mt-shadow-bottom-nav: 0 -2px 12px rgba(16, 22, 29, 0.08);
  --mt-shadow-green: 0 6px 16px -6px rgba(44, 130, 5, 0.45);

  /* ------------------------------------------------------------------------
     8. BUTON & FORM ÖLÇÜLERİ [T]
     ------------------------------------------------------------------------ */
  --mt-btn-h-xs: 28px;  /* dokunma alanı ::before ile 44px'e genişletilir */
  --mt-btn-h-sm: 36px;
  --mt-btn-h-md: 44px;
  --mt-btn-h-lg: 52px;
  --mt-btn-h-xl: 56px;
  --mt-btn-px-sm: 14px;
  --mt-btn-px-md: 20px;
  --mt-btn-px-lg: 28px;
  --mt-btn-icon-gap: 8px;
  --mt-input-h: 48px;
  --mt-input-h-sm: 40px;
  --mt-search-h: 44px;
  --mt-touch-min: 44px;

  /* ------------------------------------------------------------------------
     9. İKON [K] — Lucide, outline
     ------------------------------------------------------------------------ */
  --mt-icon-xs: 14px;
  --mt-icon-sm: 16px;
  --mt-icon-md: 20px;
  --mt-icon-lg: 24px;
  --mt-icon-xl: 32px;
  --mt-icon-2xl: 40px;  /* footer avantaj ikonları [T] */
  --mt-icon-stroke: 1.75;

  /* ------------------------------------------------------------------------
     10. Z-INDEX [K]
     ------------------------------------------------------------------------ */
  --mt-z-base: 1;
  --mt-z-dropdown: 100;
  --mt-z-sticky: 200;
  --mt-z-bottom-nav: 250;
  --mt-z-megamenu: 300;
  --mt-z-overlay: 900;
  --mt-z-drawer: 1000;
  --mt-z-modal: 1100;
  --mt-z-toast: 1200;

  /* ------------------------------------------------------------------------
     11. HAREKET — nihai karar: 150–320ms (bkz. ANIMATION-SPECS.md)
     ------------------------------------------------------------------------ */
  --mt-dur-fast: 150ms;  /* renk, ikon, link, buton basma */
  --mt-dur-base: 220ms;  /* kart hover, dropdown, akordeon, header küçülme */
  --mt-dur-slow: 320ms;  /* çekmece, modal, mega menü, hero, görünme efekti */
  --mt-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --mt-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --mt-ease-in:       cubic-bezier(0.4, 0, 1, 1);

  /* ------------------------------------------------------------------------
     12. GÖRSEL ORANLARI [T]
     ------------------------------------------------------------------------ */
  --mt-ratio-product: 1 / 1;
  --mt-ratio-pdp:     1 / 1;
  --mt-ratio-category:1 / 1;
  --mt-ratio-hero:    16 / 5;
  --mt-ratio-hero-mobile: 4 / 5;
  --mt-ratio-blog:    16 / 7;
}

/* --------------------------------------------------------------------------
   BREAKPOINT'LER — CSS değişkeni media query içinde KULLANILAMAZ.
   Mobile-first; değerler RESPONSIVE-RULES.md ve Elementor ayarlarıyla aynı.

   mobile    0–479     (360 / 390 / 430)    Elementor Mobile ≤479
   mobile-l  480–767                         Elementor Mobile Extra ≤767
   tablet    768–1023                        Elementor Tablet ≤1023
   laptop    1024–1365                       Elementor Laptop ≤1365
   desktop   1366–1919 (1366 / 1440)         Elementor Desktop
   wide      ≥1920                           Elementor Widescreen ≥1920

   Mobil sabit alt navigasyon: yalnız ≤767px.
   -------------------------------------------------------------------------- */

/* Azaltılmış hareket — tüm süreler sıfırlanır */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mt-dur-fast: 0ms;
    --mt-dur-base: 0ms;
    --mt-dur-slow: 0ms;
  }
}

/* ==========================================================================
   PROJE KARARLARI (FAZ 1) — v2.0 token dosyasına eklenen/üstüne yazılanlar.
   Tek doğru kaynak: bu dosya (megatech/assets/css/tokens.css). Tasarım
   klasörü (C:\dev\megaticaret-design) salt okunur referanstır.
   ========================================================================== */
:root {
  /* FAZ 1 brief'i: "Topbar: #232A31". v2.0 tokens topbar için ink-800
     (#22272D) kullanıyordu; footer alt çubuğu #22272D olarak kalır. */
  --mt-color-topbar: #232A31;

  /* Kontrast düzeltmesi: v2.0 --mt-warning #B26A00, #FFF6E5 zeminde 3.95:1
     (WCAG AA 4.5:1 altında). #9E5E00 → 4.83:1 (zeminde) / 5.18:1 (beyazda). */
  --mt-warning: #9E5E00;

  /* İçerik genişliği: 1440 dış sınır, 1376 içerik (DESIGN-SYSTEM §7). */
  --mt-content-max: 1376px;

  /* Sabit alt navigasyon için güvenli alan dahil toplam yükseklik. */
  --mt-bottom-nav-total: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom, 0px));

  /* Mega menü arka plan örtüsü (C§7). */
  --mt-overlay-mega: rgba(14, 19, 25, 0.32);
  --mt-overlay-drawer: rgba(14, 19, 25, 0.55);
}