/* ===================================================================== SARMAL SISTEM - MARKA TOKENLARI TEK KANONİK KAYNAK. Marka rengi, yazı tipi, boşluk ve hareket değerleri BU DOSYADAN okunur. Başka hiçbir yere renk yazılmaz. Kaynak : canlı sarmalsistem.com.tr (index.css + sektor.css) Ölçüm : 2026-09-05 03:17, dosyalar indirilip okundu Karar : Emrullah KARA, 2026-09-05 - "kurumsal site kanonik olsun" Tarif : knowledge/TASARIM_SISTEMI.md Kullanan : agents/tasarim/scripts/marka-sablon.html ve tüm marka görselleri KURAL: Bu dosyadaki bir değer değişirse TASARIM_SISTEMI.md de değişir. Değer ezberden yazılmaz; kurumsal siteden ölçülür. ===================================================================== */ :root{ /* ---- MÜREKKEP: koyu zemin ve koyu metin ---------------------- */ --ink: #071625; /* En koyu zemin. Hero, alt bilgi, koyu bölüm */ --ink-2: #0b2238; /* Yükseltilmiş panel, kart içi */ --ink-3: #5c7688; /* Açık zeminde ikincil metin */ /* ---- KÂĞIT: açık zemin --------------------------------------- */ --paper: #dce7e5; /* Açık bölüm zemini. Nane çalan açık gri-yeşil */ --paper-soft: #d2dfdd; /* Açık zeminde ikinci kat */ --paper-deep: #c7d7d5; /* Açık zeminde en koyu kat */ /* ---- VURGU ---------------------------------------------------- */ --cyan: #11d4d4; /* ANA VURGU. Dört yerde durur: başlıkta TEK kelime/satır, nokta imi, minik etiket, birincil buton zemini. Başlıktaki vurgu ikiye çıkmaz. Açık zeminde metin olmaz. */ --blue: #078dbd; /* İkincil vurgu, bağlantı */ --teal: #4c9ca9; /* Üçüncü kademe, sessiz vurgu */ /* ---- ÇİZGİ (hairline) ----------------------------------------- */ --line: #a6dce229; /* Koyu zeminde ayırıcı (~%16 saydam) */ --hair: #bdcecf; /* Açık zeminde ayırıcı */ --hair-soft: #cbd9d8; /* Açık zeminde en sessiz ayırıcı */ /* ---- METİN ---------------------------------------------------- */ --on-ink: #dbe7ec; /* Koyu zeminde başlık */ --on-ink-soft: #7f9aab; /* Koyu zeminde gövde */ --on-ink-mute: #8fa9b6; /* Koyu zeminde en sessiz metin */ --on-paper: #071625; /* Açık zeminde başlık */ --on-paper-soft:#5c7688; /* Açık zeminde gövde */ /* Saf beyaz #fff YALNIZCA hero başlığında ve cyan buton üstünde. Gövde metninde beyaz kullanılmaz. */ /* ---- YAZI TİPİ ------------------------------------------------ */ /* İkisi de latin-ext taşır, Türkçe karakterler tam (resmî kaynaktan doğrulandı 2026-09-05). Kurumsal site ikisini de kendi barındırıyor. */ --font-display: 'Space Grotesk', system-ui, sans-serif; /* Başlık */ --font-body: 'Manrope', system-ui, sans-serif; /* Gövde */ /* ---- PUNTO ÖLÇEĞİ --------------------------------------------- */ --fs-hero: clamp(48px, 6vw, 82px); --fs-h1: clamp(38px, 6vw, 68px); --fs-h2: clamp(34px, 4.2vw, 58px); --fs-h3: clamp(24px, 3.2vw, 40px); --fs-h4: clamp(21px, 2.3vw, 27px); --fs-lede: clamp(16px, 1.6vw, 19px); --fs-body: clamp(15px, 1.5vw, 18px); /* ---- HARF ARALIĞI --------------------------------------------- */ /* Kural: punto büyüdükçe daralır, küçüldükçe açılır. Arası yoktur. */ --ls-hero: -.055em; --ls-h1: -.05em; --ls-h2: -.045em; --ls-h3: -.035em; --ls-h4: -.025em; --ls-etiket: .16em; /* minik BÜYÜK HARF etiket, alt sınır */ --ls-etiket-genis: .34em; /* aynısının en geniş hâli */ /* ---- AĞIRLIK --------------------------------------------------- */ /* İri başlık 300-560 arası. 700+ yalnızca minik etiket ve butonda. İRİ VE KALIN BİRLİKTE KULLANILMAZ. */ --fw-ince: 300; --fw-normal: 400; --fw-orta: 500; --fw-baslik: 560; --fw-etiket: 800; /* ---- BOŞLUK VE KAP --------------------------------------------- */ --kenar: clamp(20px, 5vw, 64px); /* sayfa kenar boşluğu */ --kap: 1140px; /* en geniş kap */ --kap-dar: 1060px; --metin-kap: 860px; /* metin sütunu üst sınırı */ --bolum-buyuk: clamp(48px, 9vw, 104px); --bolum-orta: clamp(44px, 7vw, 84px); --bolum-kucuk: clamp(40px, 6vw, 72px); --bolum-sik: clamp(34px, 5vw, 56px); /* ---- KÖŞE ------------------------------------------------------ */ /* Köşeler neredeyse keskin. Yuvarlak kart dili bu markanın dili değil. */ --kose: 2px; --kose-buyuk: 4px; /* ---- GÖLGE ----------------------------------------------------- */ /* Sitede yalnızca beş gölge var: dördü ışıma, biri kaldırma. Gölgeyle kutu ayrılmaz; ayrım çizgiyle yapılır. */ --isima-halo: 0 0 0 6px #11d4d414; --isima-sessiz: 0 0 0 5px #15aebb12; --isima-nokta: 0 0 9px var(--cyan); --isima-genis: 0 0 35px #11d4d429; --kaldirma: 0 25px 50px #0716252e; /* ---- HAREKET --------------------------------------------------- */ /* Etkileşim ~200 ms, dekoratif hareket çok yavaş. Arası yoktur. */ --sure-renk: .18s; --sure-kart: .25s; --sure-giris: .7s; --sure-panel: .5s; --egri-panel: cubic-bezier(.22,1,.36,1); --sure-nabiz: 2.6s; --sure-halka: 20s; /* ---- ZEMİN DOKUSU ---------------------------------------------- */ --izgara: 52px; /* ızgara adımı */ --izgara-renk: rgba(76,156,169,.07); /* yalnızca koyu zeminde */ } /* ===================================================================== HAZIR ZEMİN SINIFLARI Bir çıktı ya koyu ya açıktır. Arada ton kullanılmaz. Bir seri içinde koyu ve açık dönüşümlü gider. ===================================================================== */ .zemin-koyu{ background: linear-gradient(var(--izgara-renk) 1px, transparent 1px), linear-gradient(90deg, var(--izgara-renk) 1px, transparent 1px), var(--ink); background-size: var(--izgara) var(--izgara), var(--izgara) var(--izgara), auto; color: var(--on-ink-soft); } .zemin-koyu h1,.zemin-koyu h2,.zemin-koyu h3{ color: var(--on-ink) } .zemin-acik{ background: var(--paper); color: var(--on-paper-soft); } .zemin-acik h1,.zemin-acik h2,.zemin-acik h3{ color: var(--on-paper) } /* Minik BÜYÜK HARF etiket. Önünde cyan nokta durur. DİKKAT: marka adı ve alan adı bu sınıfa SOKULMAZ - "i" harfi "İ" olur. */ .etiket{ font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-etiket); letter-spacing: var(--ls-etiket); text-transform: uppercase; color: var(--cyan); } .nokta{ width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: var(--isima-halo); } /* Birincil eylem: dolu cyan zemin, koyu metin. İkincil eylem: yalnızca metin ve ok. İKİ DOLU BUTON YAN YANA DURMAZ. */ .buton-birincil{ background: var(--cyan); color: var(--ink); border: 0; border-radius: var(--kose); font-family: var(--font-body); font-weight: 700; letter-spacing: .03em; padding: 15px 22px; transition: background var(--sure-renk); } .buton-ikincil{ background: transparent; color: inherit; border: 1px solid var(--line); border-radius: var(--kose); font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .03em; padding: 13px 17px; transition: color var(--sure-renk), border-color var(--sure-renk); } /* Ayrım çizgiyle yapılır, kutuyla değil. */ .satir{ border-bottom: 1px solid var(--line) } .zemin-acik .satir{ border-bottom-color: var(--hair) } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important } }