/* ==========================================================================
Gepek & Partners — Hukuk Bürosu
Tasarım sistemi / site.css
Yalın, bağımlılıksız CSS. Hiçbir dış istek yoktur.
========================================================================== */
/* Yazı tipleri HTML içinde ile yüklenir (bkz. her sayfanın bölümü) */
/* --------------------------------------------------------------------------
1. Tasarım değişkenleri
-------------------------------------------------------------------------- */
:root {
/* Renk */
--ink: #0F1724;
--ink-2: #17202E;
--ink-3: #223044;
--paper: #FAF8F5;
--paper-2: #F2EEE8;
--paper-3: #E7E1D8;
--text: #1A2230;
--text-2: #4C5768;
--muted: #6B7688;
--brass: #A4813F;
--brass-2: #C0A062;
--brass-3: #E8DCC3;
--line: rgba(15, 23, 36, 0.10);
--line-2: rgba(15, 23, 36, 0.18);
--line-dark: rgba(243, 239, 231, 0.14);
--white: #FFFFFF;
/* Koyu zeminde metin — dört rol, dört ton. Elle yazılmış ara tonlar
kullanılmaz; tutarlılık bu dört değişkenle sağlanır. */
--on-dark-strong: #F7F4EE; /* başlıklar, vurgu, butonlar — 16.6:1 */
--on-dark: #D3DAE4; /* gövde metni — 12.3:1 */
--on-dark-2: #AEB8C6; /* ikincil metin, lead — 8.8:1 */
--on-dark-3: #8E99A8; /* künye, tarih, telif — 5.9:1 */
/* Tipografi */
--serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Ölçek */
--step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.875rem);
--step-0: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
--step-1: clamp(1.13rem, 1.08rem + 0.24vw, 1.25rem);
--step-2: clamp(1.32rem, 1.22rem + 0.48vw, 1.6rem);
--step-3: clamp(1.6rem, 1.40rem + 0.95vw, 2.15rem);
--step-4: clamp(1.95rem, 1.60rem + 1.70vw, 2.95rem);
--step-5: clamp(2.3rem, 1.70rem + 2.90vw, 4rem);
/* Boşluk */
--gap: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
--section: clamp(3.75rem, 2.4rem + 5.6vw, 7rem);
--wrap: 1180px;
--wrap-narrow: 760px;
--radius: 3px;
--radius-lg: 6px;
--shadow: 0 1px 2px rgba(15, 23, 36, .04), 0 12px 32px -18px rgba(15, 23, 36, .22);
--shadow-lg: 0 2px 4px rgba(15, 23, 36, .05), 0 28px 60px -30px rgba(15, 23, 36, .35);
--ease: cubic-bezier(.22, .61, .36, 1);
}
/* --------------------------------------------------------------------------
2. Sıfırlama ve temel
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 92px;
}
body {
margin: 0;
background: var(--paper);
color: var(--text);
font-family: var(--sans);
font-size: var(--step-0);
line-height: 1.65;
font-feature-settings: "kern" 1, "liga" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
font-family: var(--serif);
font-weight: 500;
line-height: 1.18;
letter-spacing: -0.012em;
color: var(--ink);
margin: 0 0 .6em;
text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
li::marker { color: var(--brass); }
strong { font-weight: 600; color: var(--ink); }
/* Koyu zeminlerde strong, gövde renginden daha açık olmalı */
.section--dark strong,
.page-hero strong,
.cta-band strong,
.bant strong,
.hero strong,
.site-footer strong,
.mobile-nav strong,
.cookie strong { color: var(--on-dark-strong); }
hr {
border: 0;
border-top: 1px solid var(--line);
margin: var(--gap) 0;
}
::selection { background: var(--brass-3); color: var(--ink); }
:focus-visible {
outline: 2px solid var(--brass);
outline-offset: 3px;
border-radius: 2px;
}
/* --------------------------------------------------------------------------
3. Düzen yardımcıları
-------------------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: clamp(1.15rem, .6rem + 2.4vw, 2.5rem);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .62); }
.section--dark {
background: var(--ink);
color: var(--on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark-strong); }
.section--dark .eyebrow { color: var(--brass-2); }
.section--dark .lead { color: var(--on-dark-2); }
.section--paper2 { background: var(--paper-2); }
.stack > * + * { margin-top: var(--gap); }
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--ink);
color: #fff;
padding: .75rem 1.25rem;
z-index: 999;
}
.skip-link:focus { left: 0; }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* --------------------------------------------------------------------------
4. Tipografik bileşenler
-------------------------------------------------------------------------- */
.eyebrow {
display: flex;
align-items: center;
gap: .7rem;
font-family: var(--sans);
font-size: .72rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--brass);
margin: 0 0 1.1rem;
}
.eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
flex: none;
opacity: .8;
}
.eyebrow--center { justify-content: center; }
.lead {
font-size: var(--step-1);
line-height: 1.6;
color: var(--text-2);
}
.section-head { max-width: 660px; margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.rule-brass {
width: 54px;
height: 2px;
background: var(--brass);
border: 0;
margin: 0 0 1.5rem;
}
/* --------------------------------------------------------------------------
5. Düğmeler
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
font-family: var(--sans);
font-size: .9rem;
font-weight: 600;
letter-spacing: .02em;
padding: .9rem 1.6rem;
/* gövdeden miras alıyor,