/* ========================================================================== FIORA REAXION — TASARIM DEGISKENLERI (DESIGN TOKENS) ========================================================================== Bu dosya temanin TEK renk kaynagidir. Baska hicbir CSS dosyasinda duz hex kodu yazilmaz; her yerde var(--fr-*) kullanilir. Boylece marka rengi degistirilmek istendiginde (ornek: bronz yerine gumus) yalnizca asagidaki "MARKA PALETI" blogu degistirilir, 40 dosya tek tek elden gecirilmez. Palet kaynagi: lp.drserkanaygin.com referans tasarimindan cikarilan renk ailesi (25 Agustos 2026). ========================================================================== */ :root { /* ---------------------------------------------------------------- */ /* 1. HAM PALET — lacivert ailesi */ /* ---------------------------------------------------------------- */ --fr-navy-950: #08122C; /* en koyu — footer, hero dip */ --fr-navy-900: #0D1839; /* ANA KOYU — en cok kullanilan */ --fr-navy-850: #0A1640; /* gradyan orta durak */ --fr-navy-800: #0E1E4A; --fr-navy-700: #112663; /* acik lacivert — gradyan ucu */ --fr-navy-600: #1E2E61; --fr-navy-500: #4A5785; /* koyu zeminde ikincil metin */ --fr-navy-400: #5A6795; --fr-navy-300: #4264BD; /* baglanti / vurgu mavi */ --fr-navy-ink: #1B2444; /* acik zeminde koyu metin */ /* ---------------------------------------------------------------- */ /* 2. HAM PALET — bronz / krem ailesi */ /* ---------------------------------------------------------------- */ --fr-bronze-600: #9A806B; /* bronz koyu */ --fr-bronze-500: #9B816C; /* BRONZ VURGU — buton, ikon, cizgi */ --fr-sand-400: #D8C3B1; /* EN COK KULLANILAN acik ton */ --fr-sand-300: #E5D5C5; --fr-blush-400: #D1BEB7; /* referansta --color-secondary */ --fr-blush-300: #EADED9; --fr-blush-200: #EDD7D2; --fr-blush-100: #F3E0DB; /* en acik krem — bolum zemini */ /* ---------------------------------------------------------------- */ /* 3. HAM PALET — notr ve durum renkleri */ /* ---------------------------------------------------------------- */ --fr-white: #FFFFFF; --fr-gray-100: #F4F5F7; --fr-gray-200: #E5E7EB; --fr-gray-300: #D4D4D8; --fr-gray-400: #9CA3AF; --fr-gray-600: #606670; --fr-gray-900: #20242E; --fr-success: #65C96F; /* onay yesili */ --fr-amber: #7E4D0A; /* yildiz / rozet kahvesi */ --fr-whatsapp: #25D366; --fr-whatsapp-d: #128C7E; /* ================================================================ */ /* 4. MARKA PALETI — anlamsal katman */ /* Renk degisimi SADECE burayi elden gecirmekle olur. */ /* ================================================================ */ /* --- zeminler --- KARANLIK TEMA: tum site koyu lacivert (#08122C) zemin uzerinde, referans tasarimla ayni. Acik yuzeyler yerini koyu yuzeylere birakir. */ --fr-bg: var(--fr-navy-950); /* SAYFA ZEMINI #08122C */ --fr-bg-soft: var(--fr-navy-900); /* hafif yukseltilmis bolum */ --fr-bg-sand: var(--fr-sand-400); /* kumlu vurgu bant */ --fr-bg-dark: var(--fr-navy-900); /* koyu bant */ --fr-bg-darker: var(--fr-navy-950); /* footer */ --fr-bg-card: var(--fr-navy-800); /* koyu kart yuzeyi */ --fr-bg-card-dark: var(--fr-navy-800); /* --- metin (koyu zemin icin acik) --- */ --fr-text: var(--fr-white); /* govde */ --fr-text-soft: var(--fr-sand-300); /* ikincil metin */ --fr-text-on-dark: var(--fr-white); --fr-text-on-dark-soft: var(--fr-sand-400); /* --- vurgu --- */ --fr-accent: var(--fr-sand-400); /* koyu zeminde okunur bronz */ --fr-accent-deep: var(--fr-bronze-500); --fr-accent-soft: var(--fr-sand-400); --fr-accent-faint: rgba(216, 195, 177, .14); /* --- kenarlik (koyu zeminde acik ince cizgiler) --- */ --fr-line: rgba(216, 195, 177, .16); --fr-line-soft: rgba(216, 195, 177, .12); --fr-line-dark: rgba(216, 195, 177, .18); /* --- buton --- Birincil buton TUM SAYFADA sampanya gradyanlidir (basliktaki CTA ile ayni). Gradyanin ortasi cok acik oldugu icin yazi SIYAH. */ --fr-btn-bg: var(--fr-grad-gold); --fr-btn-text: #000000; --fr-btn-alt-bg: var(--fr-navy-900); --fr-btn-alt-text: var(--fr-white); /* --- gradyanlar --- */ --fr-grad-dark: linear-gradient(135deg, var(--fr-navy-900) 0%, var(--fr-navy-850) 50%, var(--fr-navy-700) 100%); --fr-grad-sand: linear-gradient(135deg, var(--fr-blush-100) 0%, var(--fr-sand-400) 100%); --fr-grad-bronze: linear-gradient(135deg, var(--fr-bronze-500) 0%, var(--fr-bronze-600) 100%); --fr-grad-veil: linear-gradient(180deg, rgba(13,24,57,.9) 0%, rgba(13,24,57,.55) 45%, rgba(13,24,57,0) 100%); /* SAMPANYA GRADYANI — referans butondan birebir olculdu. Koyu bronz -> soluk sampanya (ortada parlak) -> bronz. Uzerine SIYAH yazi biner; beyaz okunmaz. */ --fr-grad-gold: linear-gradient(97deg, #9A806B -3.55%, #F3E0DB 49.26%, #9B816C 100%); /* Ust bar yerine kullanilan duz koyu lacivert (referans header) */ --fr-header-bg: var(--fr-navy-950); /* Otorite bolumundeki kumlu cagri karti — koyu zemin uzerinde sicak, aydinlik bir tabaka. Uzerine KOYU yazi ve KOYU buton biner. */ --fr-grad-card: linear-gradient(135deg, #E7D8C9 0%, #C6AF98 100%); /* ================================================================ */ /* 5. TIPOGRAFI */ /* ================================================================ */ /* Referans "General Sans" kullaniyor (Fontshare, ticari kullanima acik). Sunucuya kurulunca --fr-font-sans'in basina eklenir. Simdilik en yakin Google Fonts esdegeri: Plus Jakarta Sans. */ --fr-font-sans: "General Sans", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Akiskan olcek — 360px ile 1440px arasinda kendini ayarlar */ --fr-fs-xs: .8125rem; /* 13px */ --fr-fs-sm: .875rem; /* 14px */ --fr-fs-base: 1rem; /* 16px */ --fr-fs-md: 1.0625rem; /* 17px */ --fr-fs-lg: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); --fr-fs-xl: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); --fr-fs-2xl: clamp(1.75rem, 1.45rem + 1.2vw, 2.375rem); --fr-fs-3xl: clamp(2.125rem, 1.6rem + 2.1vw, 3.25rem); --fr-fs-4xl: clamp(2.5rem, 1.75rem + 3vw, 4.25rem); --fr-lh-tight: 1.12; --fr-lh-snug: 1.28; --fr-lh-normal: 1.6; --fr-lh-loose: 1.75; --fr-fw-light: 300; --fr-fw-regular: 400; --fr-fw-medium: 500; --fr-fw-semibold: 600; --fr-fw-bold: 700; --fr-ls-tight: -.02em; --fr-ls-wide: .08em; --fr-ls-caps: .14em; /* KUCUK BASLIK harf araligi */ /* ================================================================ */ /* 6. ARALIK / OLCU */ /* ================================================================ */ --fr-sp-1: .25rem; --fr-sp-2: .5rem; --fr-sp-3: .75rem; --fr-sp-4: 1rem; --fr-sp-5: 1.5rem; --fr-sp-6: 2rem; --fr-sp-7: 2.5rem; --fr-sp-8: 3rem; --fr-sp-9: 4rem; --fr-sp-10: 5rem; --fr-sp-11: 6.5rem; /* Bolum ic bosluklari — mobilde daralir */ --fr-section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); --fr-section-y-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem); --fr-container: 1200px; --fr-container-wide: 1400px; --fr-container-text: 760px; /* okunabilir metin genisligi */ --fr-gutter: clamp(1.125rem, .75rem + 2vw, 2.5rem); /* ================================================================ */ /* 7. KOSE / GOLGE / GECIS */ /* ================================================================ */ --fr-r-sm: 8px; --fr-r-md: 12px; --fr-r-lg: 18px; --fr-r-xl: 24px; --fr-r-2xl: 32px; --fr-r-pill: 999px; --fr-shadow-sm: 0 1px 2px rgba(8, 18, 44, .06), 0 1px 3px rgba(8, 18, 44, .04); --fr-shadow-md: 0 4px 6px -1px rgba(8, 18, 44, .07), 0 2px 4px -2px rgba(8, 18, 44, .05); --fr-shadow-lg: 0 12px 24px -8px rgba(8, 18, 44, .12), 0 4px 8px -4px rgba(8, 18, 44, .06); --fr-shadow-xl: 0 24px 48px -12px rgba(8, 18, 44, .18), 0 8px 16px -8px rgba(8, 18, 44, .08); --fr-shadow-bronze: 0 10px 30px -10px rgba(155, 129, 108, .45); --fr-t-fast: 140ms cubic-bezier(.4, 0, .2, 1); --fr-t-base: 240ms cubic-bezier(.4, 0, .2, 1); --fr-t-slow: 420ms cubic-bezier(.16, 1, .3, 1); --fr-z-header: 100; --fr-z-float: 90; --fr-z-modal: 200; } /* NOT: Burada eskiden "prefers-reduced-motion" ile tum gecis sureleri 1ms'ye dusuruluyordu. Android'de pil tasarrufu/animasyon olcegi kapali oldugunda bu tercih "reduce" olarak bildiriliyor ve menu acilis-kapanis animasyonu tamamen kayboluyordu. Gecisler kisa ve dekoratif oldugundan her cihazda ayni sekilde calisir. */