/* Zenfelt — Antony-style design system (redesign 2026-07) Shared tokens + base for the new home + all guide detail pages. The per-page markup keeps the design's inline layout styles, but every COLOR is a semantic token defined here → one place drives light + dark. Accent = blue #2A6FDB (Doğan kararı). Dark palette = proposal, onaya tabi. */ :root { /* surfaces (flip in dark) */ --bg: #F2EFE4; /* page cream */ --surface: #F0EDE0; /* grid-paper / cream cards */ --nav-bg: #FBFAF3; --nav-line: #E4E0D2; /* dark bands/cards — a design element; in dark theme they become the deepest surface */ --band: #14150E; --code-bg: #0D0E09; /* text (flip) */ --ink: #191A12; --ink-2: #3C3B32; --muted: #6B6A5D; /* lines on light (flip) */ --line: #D8D3C2; /* dashed hairline */ --line-2: #CFC9B6; /* card dashed border */ --grid-line: rgba(20,21,14,0.045); --ink-hair: rgba(25,26,18,0.15); /* accent */ --accent: #2A6FDB; --accent-hair: color-mix(in srgb, var(--accent) 30%, transparent); --accent-hair-2: color-mix(in srgb, var(--accent) 45%, transparent); --ok: #1F8A3B; /* "Yeni işlere açık" green (flips lighter on dark) */ } html.theme-dark { --bg: #15160E; --surface: #1E1F15; /* was cream card → raised dark surface */ --nav-bg: #181910; --nav-line: rgba(242,239,228,0.10); --band: #0E0F08; /* was dark card → deepest, keeps two-tone contrast */ --code-bg: #090A05; --ink: #F2EFE4; --ink-2: #D9D7C8; --muted: #A5A396; --line: rgba(242,239,228,0.16); --line-2: rgba(242,239,228,0.16); --grid-line: rgba(242,239,228,0.05); --ink-hair: rgba(242,239,228,0.14); --accent: #4E8DF0; /* lighter blue for legibility on dark */ --ok: #4FD06A; /* lighter green on dark */ } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Hanken Grotesk', sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--ink); text-decoration: none; } a:hover { color: var(--accent); } /* theme toggle button in nav */ .zf-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--nav-line); background: transparent; color: var(--ink); cursor: pointer; padding: 0; flex-shrink: 0; } .zf-theme-btn:hover { border-color: var(--accent); color: var(--accent); } .zf-theme-btn svg { width: 18px; height: 18px; } /* Anton (display) is ultra-condensed with tall ascenders. At the design's tight line-heights, wrapped headings overlap vertically. Enforce enough leading site-wide (overrides the inline line-height on every Anton heading). Doğan kararı (B): + geniş harf aralığı — Anton kimliğini korur, cramped Türkçe başlıkları nefes aldırır (em-relative → her boyutta orantılı). */ [style*="'Anton'"] { line-height: 1.22 !important; letter-spacing: 0.07em !important; } /* click-to-copy command chip (used in the guide pages) */ .zf-cmd { font-family: 'Space Mono', monospace; font-size: 0.86em; line-height: 1.3; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line-2); background: transparent; color: var(--accent); cursor: pointer; vertical-align: baseline; } .zf-cmd:hover { border-color: var(--accent); } .zf-cmd.copied { background: var(--accent); color: #FFF6EC; border-color: var(--accent); } /* inline highlight + inline code used in guide copy */ .hl { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 24%, transparent) 0); font-weight: 600; } :not(pre) > code { font-family: 'Space Mono', monospace; font-size: 0.86em; background: var(--surface); border: 1px solid var(--line-2); padding: 1px 6px; border-radius: 6px; } /* scroll-in rise animation (stat cards). Hidden state only applies when JS is on (.zf-js on ), so no-JS users still see the cards. */ .zf-js .zf-rise { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .zf-js .zf-rise.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .zf-js .zf-rise { opacity: 1; transform: none; transition: none; } } /* ============================================================ MOBILE — the Antony design is desktop-first with inline styles; retrofit responsiveness by overriding the inline grid/size/padding patterns. Applies below 760px (tablets portrait keep 2-col). ============ */ @media (max-width: 760px) { /* collapse every multi-column grid to a single column */ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns:1.2fr 1fr"], [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:auto 1fr auto"], [style*="grid-template-columns:1fr 240px"], [style*="grid-template-columns:1fr auto"], [style*="grid-template-columns:1fr auto auto"] { grid-template-columns: 1fr !important; gap: 18px !important; } /* ruler section header: left-align icon+title once stacked; right-tags → left */ [style*="gap:18px;justify-content:flex-end"] { justify-content: flex-start !important; } [style*="color:var(--accent);text-align:right"] { text-align: left !important; } /* headings wrap instead of overflowing, and scale down */ h1, h2, h3 { white-space: normal !important; } [style*="font-size:118px"] { font-size: 52px !important; } [style*="font-size:90px"] { font-size: 44px !important; } [style*="font-size:66px"] { font-size: 38px !important; } [style*="font-size:64px"] { font-size: 40px !important; } [style*="font-size:58px"] { font-size: 32px !important; } [style*="font-size:52px"] { font-size: 38px !important; } [style*="font-size:46px"] { font-size: 30px !important; } [style*="font-size:39px"] { font-size: 27px !important; } [style*="font-size:37px"] { font-size: 26px !important; } [style*="font-size:34px"] { font-size: 25px !important; } [style*="font-size:32px"] { font-size: 24px !important; } [style*="font-size:28px"] { font-size: 22px !important; } /* section wrappers + cards: less horizontal padding */ [style*="max-width:1240px"] { padding-left: 20px !important; padding-right: 20px !important; } [style*="padding:96px 60px"] { padding: 44px 22px !important; } [style*="padding:72px 60px"] { padding: 40px 24px !important; } [style*="padding:72px"] { padding: 34px 24px !important; } [style*="padding:56px 64px"] { padding: 32px 22px !important; } [style*="padding:44px 48px"] { padding: 28px 24px !important; } [style*="padding:36px 44px"] { padding: 26px 22px !important; } [style*="padding:88px 0"] { padding: 44px 0 !important; } [style*="padding:100px 0 110px"] { padding: 44px 0 54px !important; } /* code blocks: smaller so long lines wrap less awkwardly */ [style*="white-space:pre-wrap"] { font-size: 12px !important; } /* nav: keep brand left + buttons right, hide the center anchor links */ [data-screen-label="Nav"] { grid-template-columns: 1fr auto !important; padding-left: 18px !important; padding-right: 18px !important; } [data-screen-label="Nav"] > div:nth-child(2) { display: none !important; } }