/* =============================================================================
   ISO THERMAL — Tasarım Token'ları (Design System)
   Marka: Kırmızı #C8102E · Mürekkep #0E1116 · Beyaz
   Tema: "Dört Mevsim, Tek Koruma" — 4 mevsim aksent rengi
   ============================================================================= */

:root {
    /* --- Marka çekirdeği --- */
    --red:            #C8102E;   /* logo kırmızısı / enerji / CTA */
    --red-600:        #A50C24;
    --red-300:        #E8536B;
    --red-tint:       #FBE7EA;

    --ink:            #0E1116;   /* lacivert-siyah / kurumsal zemin */
    --ink-800:        #161A21;
    --ink-700:        #1E232C;
    --ink-600:        #2A303B;
    --ink-500:        #3A4250;

    --paper:          #FFFFFF;
    --paper-2:        #F6F7F9;   /* hafif gri zemin */
    --paper-3:        #ECEEF2;
    --line:           #E2E5EB;   /* ince çizgi / grid */
    --line-strong:    #CDD2DB;

    --slate-700:      #404754;   /* gövde metni (paper üstünde) */
    --slate-500:      #6A7280;   /* ikincil metin */
    --slate-400:      #9AA1AD;

    /* Mürekkep zemin üstü metin */
    --on-ink:         #F4F6F9;
    --on-ink-dim:     #AEB6C2;
    --on-ink-faint:   #6F7888;

    /* --- 4 Mevsim aksanları (Dört Mevsim, Tek Koruma) --- */
    --winter:         #3B82C4;   /* kış — mavi */
    --winter-soft:    #8FC2E8;
    --spring:         #36A85C;   /* ilkbahar — yeşil */
    --spring-soft:    #8FD6A6;
    --summer:         #E5A019;   /* yaz — kehribar */
    --summer-soft:    #F4CE7A;
    --autumn:         #C75B2A;   /* sonbahar — turuncu */
    --autumn-soft:    #E89B73;

    /* Termal skala (sıcak → soğuk) — termal kamera dili */
    --t-hot:          #E12D2D;
    --t-warm:         #F0691F;
    --t-mid:          #E5A019;
    --t-cool:         #2FA37A;
    --t-cold:         #2B6FB0;
    --t-frost:        #6FB7E8;

    /* Aktif mevsim (JS ile değişir) — bileşenler bunu kullanır */
    --season:         var(--winter);
    --season-soft:    var(--winter-soft);

    /* --- Tipografi --- */
    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "IBM Plex Mono", "Space Mono", ui-monospace, monospace;
    --font-ar:      "IBM Plex Sans Arabic", "Inter", sans-serif;

    /* Akışkan tip ölçeği (clamp: mobil → masaüstü) */
    --fs-display:  clamp(2.8rem, 1.6rem + 6vw, 7rem);
    --fs-h1:       clamp(2.2rem, 1.4rem + 3.6vw, 4.4rem);
    --fs-h2:       clamp(1.7rem, 1.2rem + 2.2vw, 3rem);
    --fs-h3:       clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
    --fs-h4:       clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    --fs-lead:     clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
    --fs-body:     1.02rem;
    --fs-sm:       0.9rem;
    --fs-xs:       0.78rem;
    --fs-mono:     0.74rem;   /* teknik etiketler */

    --lh-tight:    1.04;
    --lh-snug:     1.18;
    --lh-body:     1.65;

    --tracking-mono: 0.16em;  /* eyebrow/etiket harf aralığı */

    /* --- Boşluk ölçeği (8px tabanlı) --- */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2rem;
    --sp-7:  3rem;
    --sp-8:  4rem;
    --sp-9:  6rem;
    --sp-10: 8rem;
    --section-y: clamp(4rem, 2rem + 8vw, 9rem);

    /* --- Düzen --- */
    --container:    1320px;
    --container-narrow: 920px;
    --gutter:       clamp(1.25rem, 0.5rem + 3vw, 3rem);
    --header-h:     76px;

    /* --- Köşeler --- */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* --- Gölgeler (yumuşak, premium) --- */
    --sh-1: 0 1px 2px rgba(14,17,22,.06), 0 2px 8px rgba(14,17,22,.05);
    --sh-2: 0 4px 14px rgba(14,17,22,.08), 0 10px 30px rgba(14,17,22,.07);
    --sh-3: 0 18px 50px rgba(14,17,22,.14);
    --sh-red: 0 10px 30px rgba(200,16,46,.28);
    --sh-inset-line: inset 0 0 0 1px var(--line);

    /* --- Hareket (motion) — Hajster karakteri --- */
    --e-out:    cubic-bezier(0.16, 1, 0.3, 1);    /* expo-out: keskin giriş, yumuşak duruş */
    --e-inout:  cubic-bezier(0.65, 0.05, 0.36, 1);
    --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --d-fast:   .22s;
    --d-mid:    .45s;
    --d-slow:   .8s;

    --z-header: 100;
    --z-overlay: 200;
    --z-cookie: 300;

    /* İnce film grenli doku (hero overlay) — inline SVG noise */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* RTL / Arapça */
html[dir="rtl"] {
    --font-body: var(--font-ar);
    --font-display: var(--font-ar);
    --tracking-mono: 0;
}

@media (prefers-reduced-motion: reduce) {
    :root { --d-fast: .01ms; --d-mid: .01ms; --d-slow: .01ms; }
}