/* ═══════════════════════════════════════════════════════════════════════════
ŞENOCAK NAKLİYAT — senocaknakliyat.com.tr
Tek stil dosyası. Harici bağımlılık yok (Inter, Google Fonts hariç).
Renk preseti: Şenocak Lacivert-Bordo (#1B2A4A + #7A1F2B)
Tema: AÇIK varsayılan ("Gündüz Yolu"). Koyu "Gece Yolu" yalnız kullanıcı
toggle'ıyla (localStorage: senocak-theme) — prefers-color-scheme okunmaz.
01 Token · 02 Taban · 03 Tipografi · 04 Yerleşim · 05 Bileşenler
06 Üst bar · 07 Hero · 08 Güven şeridi · 09 Koridor · 10 Hizmetler
11 Kasa & fiyat mantığı · 12 Süreç · 13 Güvence & sosyal kanıt
14 SSS · 15 İletişim & footer · 16 Mobil bar · 17 Sihirbaz
18 Rota/İçerik sayfaları · 19 Responsive · 20 Motion/Print
═══════════════════════════════════════════════════════════════════════════ */
/* ═══ 01 · TOKEN KATMANI ═══════════════════════════════════════════════════ */
:root {
/* — Tenant preseti (Şenocak) — */
--tenant-primary: #1B2A4A;
--tenant-primary-hover: #142038;
--tenant-primary-press: #0E1728;
--tenant-primary-fg: #FFFFFF;
--tenant-accent: #7A1F2B; /* bordo — YALNIZ vurgu; büyük yüzeyde dolgu DEĞİL */
/* — Nötr iskelet · AÇIK VARSAYILAN — */
color-scheme: light;
--bg: #F6F5F2;
--surface-1: #FFFFFF;
--surface-2: #FAF9F6;
--surface-3: #F1EFEA;
--text-1: #23262B;
--text-2: #565B63;
--text-3: #6B7079; /* AA (4,5:1) için dildeki #8E9299'dan koyulaştırıldı */
--border: rgba(35,38,43,0.08);
--border-strong: rgba(35,38,43,0.15);
--hairline: rgba(35,38,43,0.05);
/* — Semantik: dolgu tonu ( - ) ve METİN tonu ( -ink ) ayrı token — */
--success: #16A34A; --success-ink: #0E7A35;
--warning: #D97706; --warning-ink: #9A5E0B;
--danger: #DC2626; --danger-ink: #C41F1F;
--info: #2563EB; --info-ink: #1D4FD0;
--planned: #64748B;
--whatsapp: #25D366;
--whatsapp-ink: #0B7A3D;
/* — Boşluk: 4px taban. Skala dışı değer YASAK. — */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;
/* — Radius dili — */
--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;
/* — Elevation: marka-lacivert tonlu, 5 kademe, geniş & düşük alfa — */
--sh-hair: 0 0 0 1px rgba(27,42,74,0.045);
--sh-raised: 0 1px 1px rgba(27,42,74,0.04),
0 3px 8px -2px rgba(27,42,74,0.05),
0 10px 24px -8px rgba(27,42,74,0.07);
--sh-lift: 0 1px 2px rgba(27,42,74,0.05),
0 8px 18px -6px rgba(27,42,74,0.09),
0 22px 44px -18px rgba(27,42,74,0.14);
--sh-overlay: 0 1px 2px rgba(27,42,74,0.05),
0 10px 24px -8px rgba(27,42,74,0.10),
0 30px 60px -24px rgba(27,42,74,0.18);
--sh-modal: 0 2px 6px rgba(27,42,74,0.06),
0 18px 40px -12px rgba(27,42,74,0.16),
0 48px 96px -32px rgba(27,42,74,0.26);
--sheen: inset 0 1px 0 rgba(255,255,255,0.9);
/* — Atmosfer katmanları — */
--atmo-primary: color-mix(in oklab, var(--tenant-primary) 7%, transparent);
--atmo-accent: color-mix(in oklab, var(--tenant-accent) 5%, transparent);
--atmo-warm: rgba(255,251,242,0.85);
--atmo-sun: rgba(255,243,223,0.92);
--glass-edge: color-mix(in oklab, #FFFFFF 45%, var(--border));
--grain-a: 0.030;
/* — Focus halkası: yüzey boşluğu + koyu lacivert halka — */
--ring: 0 0 0 2px var(--surface-1),
0 0 0 4px color-mix(in oklab, var(--tenant-primary) 72%, transparent);
--ring-danger: 0 0 0 2px var(--surface-1),
0 0 0 4px color-mix(in oklab, var(--danger-ink) 72%, transparent);
/* — Motion — */
--e: cubic-bezier(0.4, 0, 0.2, 1);
--d-micro: 80ms; --d-press: 120ms; --d-drop: 180ms; --d-modal: 280ms;
--page: 1200px;
--header-h: 68px;
}
html[data-theme="dark"] {
color-scheme: dark;
--tenant-primary: #5B7BB8;
--tenant-primary-hover: #7594CB;
--tenant-primary-press: #4A68A2;
--tenant-primary-fg: #0A0C10;
--tenant-accent: #C4626F;
--bg: #0A0C10;
--surface-1: #12151A;
--surface-2: #1A1E24;
--surface-3: #232830;
--text-1: #F5F7FA;
--text-2: #C8CDD5;
--text-3: #8B929E;
--border: rgba(255,255,255,0.07);
--border-strong: rgba(255,255,255,0.14);
--hairline: rgba(255,255,255,0.05);
--success: #4ADE80; --success-ink: #4ADE80;
--warning: #FBBF24; --warning-ink: #FBBF24;
--danger: #F87171; --danger-ink: #F87171;
--info: #60A5FA; --info-ink: #60A5FA;
--planned: #94A3B8;
--sh-hair: 0 0 0 1px rgba(255,255,255,0.04);
--sh-raised: 0 0 0 1px rgba(255,255,255,0.04);
--sh-lift: 0 0 0 1px rgba(255,255,255,0.09), 0 16px 36px rgba(0,0,0,0.46);
--sh-overlay: 0 0 0 1px rgba(255,255,255,0.06), 0 12px 32px rgba(0,0,0,0.5);
--sh-modal: 0 0 0 1px rgba(255,255,255,0.08), 0 24px 64px rgba(0,0,0,0.62);
--sheen: inset 0 1px 0 rgba(255,255,255,0.04);
--atmo-primary: color-mix(in oklab, var(--tenant-primary) 14%, transparent);
--atmo-accent: color-mix(in oklab, var(--tenant-accent) 9%, transparent);
--atmo-warm: rgba(245,166,35,0.05);
--atmo-sun: rgba(245,166,35,0.07);
--glass-edge: var(--border-strong);
--grain-a: 0.05;
--ring: 0 0 0 2px var(--bg),
0 0 0 4px color-mix(in oklab, var(--tenant-primary) 85%, transparent);
--ring-danger: 0 0 0 2px var(--bg),
0 0 0 4px color-mix(in oklab, var(--danger) 80%, transparent);
}
/* ═══ 02 · TABAN ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
margin: 0;
background: transparent;
color: var(--text-1);
font-family: Inter, "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 15px; line-height: 1.55; font-weight: 450;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* Atmosfer: sayfanın arkasında sabit duran çok geniş, düşük alfa halolar */
body::before {
content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
background:
radial-gradient(1240px 640px at 84% -12%, var(--atmo-primary), transparent 62%),
radial-gradient(980px 560px at -10% 4%, var(--atmo-warm), transparent 60%),
radial-gradient(820px 560px at 8% 88%, var(--atmo-accent), transparent 62%),
radial-gradient(1000px 500px at 96% 78%, var(--atmo-primary), transparent 64%);
}
/* Kağıt dokusu — "düz beyaz ekran" hissini kırar */
body::after {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
opacity: var(--grain-a); mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
html[data-theme="dark"] body::after { mix-blend-mode: overlay; }
::selection { background: color-mix(in oklab, var(--tenant-primary) 20%, transparent); color: var(--text-1); }
img { display: block; max-width: 100%; }
svg { max-width: 100%; vertical-align: -0.15em; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: none; box-shadow: var(--ring); border-radius: var(--r-sm);
}
.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;
}
.skip-link {
position: absolute; left: var(--s4); top: -100px; z-index: 200;
background: var(--tenant-primary); color: var(--tenant-primary-fg);
padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-weight: 550;
text-decoration: none; transition: top var(--d-drop) var(--e);
}
.skip-link:focus { top: var(--s4); }
/* ═══ 03 · TİPOGRAFİ — 5 rol, 2 UI ağırlığı ════════════════════════════════ */
.t-caption {
font-size: 12px; line-height: 16px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3);
}
.t-body { font-size: 15px; line-height: 1.55; font-weight: 450; }
.t-subtitle { font-size: 16px; line-height: 1.5; font-weight: 550; }
.t-title { font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.t-display { font-size: 32px; line-height: 1.15; font-weight: 650; letter-spacing: -0.02em; }
.t-display--hero { font-size: clamp(30px, 4.6vw, 46px); }
.t-display--section { font-size: clamp(24px, 3vw, 32px); }
.t-display--page { font-size: clamp(28px, 3.8vw, 38px); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--text-2); }
.muted-2 { color: var(--text-3); }
.measure { max-width: 62ch; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.accent-word { color: var(--tenant-accent); }
/* ═══ 04 · YERLEŞİM ════════════════════════════════════════════════════════ */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--s6); }
.wrap--narrow { max-width: 860px; }
.section { position: relative; padding-block: var(--s16); }
.section--tight { padding-block: var(--s12); }
.section--paper::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(180deg,
transparent 0%,
color-mix(in oklab, var(--surface-1) 72%, transparent) 12%,
color-mix(in oklab, var(--surface-1) 72%, transparent) 88%,
transparent 100%);
}
.section--glow::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(1000px 420px at 50% 30%, color-mix(in oklab, var(--tenant-primary) 4%, transparent), transparent 70%);
}
.section-head { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s8); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s2); color: var(--tenant-accent); }
.section-head .eyebrow { display: flex; }
.stack-2 { display: flex; flex-direction: column; gap: var(--s2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--s3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--s4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--s6); }
.stack-8 { display: flex; flex-direction: column; gap: var(--s8); }
.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
/* ═══ 05 · BİLEŞENLER ══════════════════════════════════════════════════════ */
.btn {
--btn-h: 48px;
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
min-height: var(--btn-h); padding-inline: var(--s6);
border-radius: var(--r-md); border: 1px solid transparent;
font-size: 15px; font-weight: 550; letter-spacing: -0.005em;
text-decoration: none; cursor: pointer; white-space: nowrap;
background: var(--surface-2); color: var(--text-1);
transition: background var(--d-press) var(--e), border-color var(--d-press) var(--e),
transform var(--d-press) var(--e), box-shadow var(--d-press) var(--e),
color var(--d-press) var(--e), opacity var(--d-press) var(--e);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); transition-duration: var(--d-micro); }
.btn--primary {
background-image: linear-gradient(180deg,
color-mix(in oklab, var(--tenant-primary) 88%, #FFF) 0%,
var(--tenant-primary) 58%,
color-mix(in oklab, var(--tenant-primary) 92%, #000) 100%);
background-color: var(--tenant-primary);
color: var(--tenant-primary-fg);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.16),
0 1px 2px rgba(27,42,74,0.16),
0 8px 18px -6px color-mix(in oklab, var(--tenant-primary) 45%, transparent);
}
.btn--primary:hover {
background-color: var(--tenant-primary-hover);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.20),
0 2px 4px rgba(27,42,74,0.14),
0 14px 26px -8px color-mix(in oklab, var(--tenant-primary) 55%, transparent);
}
.btn--primary:active {
background-color: var(--tenant-primary-press);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
}
.btn--ghost {
background: color-mix(in oklab, var(--surface-1) 70%, transparent);
color: var(--text-1); border-color: var(--border-strong);
box-shadow: var(--sheen);
}
.btn--ghost:hover {
background: var(--surface-1);
border-color: color-mix(in oklab, var(--tenant-primary) 40%, var(--border-strong));
box-shadow: var(--sheen), var(--sh-raised);
}
.btn--quiet { background: transparent; color: var(--text-2); padding-inline: var(--s3); min-height: 40px; }
.btn--quiet:hover { background: var(--surface-2); color: var(--text-1); }
.btn--wa { background: var(--whatsapp); color: #073b21; border-color: color-mix(in oklab, var(--whatsapp) 70%, #000); font-weight: 600; }
.btn--wa:hover { background: color-mix(in oklab, var(--whatsapp) 88%, #FFF); }
.btn--sm { --btn-h: 40px; padding-inline: var(--s4); font-size: 14px; }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn-label { opacity: 0.35; }
.btn.is-loading::after {
content: ""; position: absolute; inset-inline-start: calc(50% - 8px); inset-block-start: calc(50% - 8px);
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid currentColor; border-top-color: transparent;
animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Çip — durum = renk + İKON + ETİKET (asla yalnız renk) */
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px var(--s3); border-radius: var(--r-sm);
font-size: 13px; font-weight: 550; line-height: 1.3;
background: var(--surface-2); color: var(--text-2);
border: 1px solid var(--border); box-shadow: var(--sheen);
}
.chip svg { flex: none; }
.chip--success, .chip--info, .chip--warning, .chip--danger {
background: color-mix(in oklab, var(--st) 11%, var(--surface-1));
color: var(--st-ink);
border-color: color-mix(in oklab, var(--st) 26%, transparent);
box-shadow: var(--sheen);
}
.chip--success svg, .chip--info svg, .chip--warning svg, .chip--danger svg { color: var(--st-ink); }
.chip--success { --st: var(--success); --st-ink: var(--success-ink); }
.chip--info { --st: var(--info); --st-ink: var(--info-ink); }
.chip--warning { --st: var(--warning); --st-ink: var(--warning-ink); }
.chip--danger { --st: var(--danger); --st-ink: var(--danger-ink); }
.chip--tenant {
background: color-mix(in oklab, var(--tenant-primary) 9%, var(--surface-1));
color: color-mix(in oklab, var(--tenant-primary) 82%, var(--text-1));
border-color: color-mix(in oklab, var(--tenant-primary) 22%, transparent);
box-shadow: var(--sheen);
}
html[data-theme="dark"] .chip--tenant { color: var(--text-1); }
.chip--accent {
background: color-mix(in oklab, var(--tenant-accent) 10%, var(--surface-1));
color: var(--tenant-accent);
border-color: color-mix(in oklab, var(--tenant-accent) 26%, transparent);
box-shadow: var(--sheen);
}
.chip--lg { font-size: 14px; padding: 7px var(--s3); }
.card {
position: relative; background: var(--surface-1);
border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s6);
box-shadow: var(--sheen), var(--sh-raised);
transition: border-color var(--d-press) var(--e), box-shadow var(--d-press) var(--e), transform var(--d-press) var(--e);
}
.card--dense { padding: var(--s4); }
.card--raised:hover {
box-shadow: var(--sheen), var(--sh-lift);
border-color: color-mix(in oklab, var(--tenant-primary) 18%, var(--border));
}
/* Form alanları */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label {
font-size: 12px; line-height: 16px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3);
}
.control {
height: 44px; padding: 0 var(--s3);
background: var(--surface-2); color: var(--text-1);
border: 1px solid var(--border-strong); border-radius: var(--r-sm);
box-shadow: inset 0 1px 2px rgba(27,42,74,0.045);
transition: border-color var(--d-press) var(--e), background var(--d-press) var(--e), box-shadow var(--d-press) var(--e);
width: 100%;
}
select.control {
appearance: none; -webkit-appearance: none; padding-inline-end: var(--s8);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer;
}
.control:hover { border-color: color-mix(in oklab, var(--tenant-primary) 34%, var(--border-strong)); background: var(--surface-1); }
.control:focus-visible { border-color: var(--tenant-primary); background: var(--surface-1); box-shadow: var(--ring); }
.control[aria-invalid="true"] { border-color: var(--danger-ink); background: color-mix(in oklab, var(--danger) 7%, var(--surface-1)); }
.control[aria-invalid="true"]:focus-visible { box-shadow: var(--ring-danger); }
.field-error { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--danger-ink); }
.field.has-error .field-error { display: flex; }
.field-hint { font-size: 13px; color: var(--text-3); }
.switch { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
position: relative; flex: none; width: 46px; height: 28px; border-radius: var(--r-full);
background: var(--surface-3); border: 1px solid var(--border-strong);
transition: background var(--d-press) var(--e), border-color var(--d-press) var(--e);
}
.switch-track::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
border-radius: 50%; background: var(--surface-1); box-shadow: 0 1px 3px rgba(22,24,29,0.28);
transition: transform var(--d-drop) var(--e);
}
.switch input:checked + .switch-track { background: var(--tenant-primary); border-color: var(--tenant-primary); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--ring); }
.note {
display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md);
border: 1px solid var(--border); background: var(--surface-2);
font-size: 13px; color: var(--text-2); line-height: 1.5; box-shadow: var(--sheen);
}
.note .ico { flex: none; margin-top: 2px; }
.note--warn { background: color-mix(in oklab, var(--warning) 9%, var(--surface-1)); border-color: color-mix(in oklab, var(--warning) 28%, transparent); }
.note--warn .ico { color: var(--warning-ink); }
.note--info { background: color-mix(in oklab, var(--info) 8%, var(--surface-1)); border-color: color-mix(in oklab, var(--info) 24%, transparent); }
.note--info .ico { color: var(--info-ink); }
.note--accent { background: color-mix(in oklab, var(--tenant-accent) 7%, var(--surface-1)); border-color: color-mix(in oklab, var(--tenant-accent) 24%, transparent); }
.note--accent .ico { color: var(--tenant-accent); }
.reveal { opacity: 0; transform: translateY(8px); }
.reveal.is-in {
opacity: 1; transform: none;
transition: opacity 280ms var(--e), transform 280ms var(--e);
transition-delay: var(--rd, 0ms);
}
/* ═══ 06 · ÜST BAR ═════════════════════════════════════════════════════════ */
.site-header {
position: sticky; top: 0; z-index: 60; height: var(--header-h);
background: color-mix(in oklab, var(--bg) 72%, transparent);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid transparent;
transition: border-color var(--d-drop) var(--e), background var(--d-drop) var(--e), box-shadow var(--d-drop) var(--e);
}
.site-header.is-stuck {
border-bottom-color: var(--hairline);
background: color-mix(in oklab, var(--surface-1) 88%, transparent);
box-shadow: 0 1px 0 var(--hairline), 0 10px 28px -18px rgba(27,42,74,0.35);
}
.header-inner { display: flex; align-items: center; gap: var(--s4); height: var(--header-h); }
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; flex: none; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 16px; font-weight: 650; letter-spacing: 0.06em; color: var(--tenant-primary); }
html[data-theme="dark"] .brand-name { color: var(--text-1); }
.brand-sub { font-size: 11px; font-weight: 550; letter-spacing: 0.14em; color: var(--tenant-accent); text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: var(--s1); margin-inline-start: var(--s6); }
.site-nav a {
padding: var(--s2) var(--s3); border-radius: var(--r-sm);
font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none;
transition: color var(--d-press) var(--e), background var(--d-press) var(--e);
}
.site-nav a:hover { color: var(--text-1); background: var(--surface-2); }
.site-nav a[aria-current="page"] {
color: var(--text-1); font-weight: 600;
background: color-mix(in oklab, var(--tenant-primary) 8%, var(--surface-1));
}
.header-actions { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; }
.icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; flex: none;
border-radius: var(--r-sm); border: 1px solid var(--border);
background: var(--surface-1); color: var(--text-2); cursor: pointer;
transition: background var(--d-press) var(--e), color var(--d-press) var(--e), border-color var(--d-press) var(--e), transform var(--d-press) var(--e);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-1); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(0.94); }
.header-phone {
display: inline-flex; align-items: center; gap: var(--s2);
padding: var(--s2) var(--s3); border-radius: var(--r-sm);
font-weight: 600; font-size: 15px; text-decoration: none; color: var(--text-1);
transition: background var(--d-press) var(--e);
}
.header-phone:hover { background: var(--surface-2); }
.header-phone .lbl {
font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--text-3); display: block; line-height: 1.1;
}
/* ═══ 07 · HERO ════════════════════════════════════════════════════════════ */
.hero { position: relative; padding-block: var(--s12) var(--s16); overflow: hidden; }
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(1180px 520px at 78% -12%, color-mix(in oklab, var(--tenant-primary) 13%, transparent), transparent 66%),
radial-gradient(760px 420px at 2% -6%, var(--atmo-sun), transparent 64%),
radial-gradient(760px 380px at 6% 104%, color-mix(in oklab, var(--tenant-accent) 9%, transparent), transparent 62%);
}
.hero::after {
content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 160px;
pointer-events: none; z-index: 0;
background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--surface-1) 55%, transparent));
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 55fr 45fr; gap: var(--s12); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }
.hero-eyebrow { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.hero h1 { max-width: 17ch; }
.hero h1 .hl { position: relative; padding-inline: 4px; }
.hero h1 .hl::after {
content: ""; position: absolute; z-index: -1;
inset-inline: 0; bottom: 0.10em; height: 0.34em; border-radius: 0.12em;
background: linear-gradient(95deg,
color-mix(in oklab, var(--tenant-accent) 26%, transparent) 0%,
color-mix(in oklab, var(--tenant-accent) 18%, transparent) 55%,
color-mix(in oklab, var(--tenant-accent) 4%, transparent) 100%);
}
.hero-slogan { font-size: clamp(16px, 1.7vw, 18px); line-height: 1.5; color: var(--text-2); max-width: 48ch; }
.hero-slogan strong { color: var(--text-1); font-weight: 600; }
.hero-form {
position: relative;
background: linear-gradient(180deg, var(--surface-1), color-mix(in oklab, var(--surface-2) 60%, var(--surface-1)));
border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4);
box-shadow: var(--sheen), var(--sh-overlay);
}
.hero-form::before {
content: ""; position: absolute; inset-inline: var(--s6); top: -1px; height: 2px; border-radius: var(--r-full);
background: linear-gradient(90deg, transparent, var(--tenant-primary) 30%, var(--tenant-accent) 78%, transparent);
opacity: 0.55; pointer-events: none;
}
.hero-form-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.hero-form-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: end; }
.hero-form-swap {
width: 40px; height: 44px; flex: none; border-radius: var(--r-sm);
border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-3);
display: grid; place-items: center; cursor: pointer;
transition: color var(--d-press) var(--e), border-color var(--d-press) var(--e), transform var(--d-press) var(--e);
}
.hero-form-swap:hover { color: var(--tenant-primary); border-color: var(--tenant-primary); }
.hero-form-swap:active { transform: scale(0.92); }
.hero-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }
.hero-form-note { margin-top: var(--s3); display: flex; align-items: center; gap: var(--s3); font-size: 13px; color: var(--text-3); flex-wrap: wrap; }
.hero-form-note span { display: inline-flex; align-items: center; gap: 5px; }
.hero-form-note svg { color: var(--success-ink); flex: none; }
.hero-media { position: relative; min-width: 0; }
.hero-media-frame {
position: relative; border-radius: var(--r-lg); overflow: hidden;
border: 1px solid var(--border);
box-shadow: var(--sh-overlay), 0 0 0 8px color-mix(in oklab, var(--surface-1) 55%, transparent);
aspect-ratio: 3 / 2; background: var(--surface-2);
}
.hero-media-frame > img { width: 100%; height: 100%; object-fit: cover; }
.hero-media-frame::after {
content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
background: linear-gradient(180deg, transparent 52%, color-mix(in oklab, #101828 44%, transparent) 100%);
}
.hero-media-frame.is-fallback {
background:
radial-gradient(120% 90% at 20% 10%, color-mix(in oklab, var(--tenant-primary) 22%, var(--surface-2)), transparent 70%),
linear-gradient(160deg, color-mix(in oklab, var(--tenant-primary) 14%, var(--surface-2)), color-mix(in oklab, var(--tenant-accent) 10%, var(--surface-2)));
}
/* Dürüstlük ibaresi — görsel temsilîdir, firmanın kendi aracı değildir */
.media-caption {
display: flex; align-items: center; gap: 6px;
margin-top: var(--s2); font-size: 12px; color: var(--text-3);
}
.media-caption svg { flex: none; }
.hero-badge {
position: absolute; z-index: 2; left: var(--s4); right: var(--s4); bottom: var(--s4);
display: flex; align-items: center; gap: var(--s3);
padding: var(--s3); border-radius: var(--r-md);
background: color-mix(in oklab, var(--surface-1) 93%, transparent);
backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
border: 1px solid var(--glass-edge); box-shadow: var(--sheen), var(--sh-lift);
}
.hero-badge-ico {
width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
display: grid; place-items: center;
background: linear-gradient(180deg,
color-mix(in oklab, var(--tenant-primary) 16%, var(--surface-1)),
color-mix(in oklab, var(--tenant-primary) 9%, var(--surface-1)));
border: 1px solid color-mix(in oklab, var(--tenant-primary) 18%, transparent);
box-shadow: var(--sheen); color: var(--tenant-primary);
}
.hero-badge-txt { min-width: 0; line-height: 1.3; }
.hero-badge-txt b { display: block; font-size: 14px; font-weight: 600; }
.hero-badge-txt span { font-size: 13px; color: var(--text-3); }
/* ═══ 08 · GÜVEN ŞERİDİ ════════════════════════════════════════════════════ */
.trust {
position: relative;
background: linear-gradient(180deg,
color-mix(in oklab, var(--surface-1) 96%, var(--tenant-primary)) 0%,
var(--surface-1) 22%, var(--surface-1) 78%,
color-mix(in oklab, var(--surface-1) 97%, var(--tenant-primary)) 100%);
box-shadow: 0 -1px 0 var(--hairline), 0 1px 0 var(--hairline), 0 20px 46px -34px rgba(27,42,74,0.45);
}
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-cell { position: relative; padding: var(--s8) var(--s6); display: flex; flex-direction: column; gap: var(--s2); }
.trust-cell::before {
content: ""; position: absolute; inset-block: 22%; inset-inline-start: 0; width: 1px;
background: linear-gradient(180deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent);
}
.trust-cell:first-child::before { display: none; }
.trust-ico {
width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center;
background: linear-gradient(180deg,
color-mix(in oklab, var(--tenant-primary) 13%, var(--surface-1)),
color-mix(in oklab, var(--tenant-primary) 8%, var(--surface-1)));
border: 1px solid color-mix(in oklab, var(--tenant-primary) 14%, transparent);
box-shadow: var(--sheen); color: var(--tenant-primary); margin-bottom: var(--s1);
}
.trust-val {
font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; font-weight: 650; letter-spacing: -0.02em;
display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
}
.trust-val .suffix { font-size: 0.6em; font-weight: 600; color: var(--tenant-accent); }
.trust-lbl { color: var(--text-2); font-size: 14px; }
/* ═══ 09 · KORİDOR — sitenin kalbi ═════════════════════════════════════════ */
.corridor {
position: relative; overflow: hidden;
background:
radial-gradient(760px 300px at 96% -24%, color-mix(in oklab, var(--tenant-primary) 7%, transparent), transparent 68%),
radial-gradient(560px 260px at -6% 118%, color-mix(in oklab, var(--tenant-accent) 6%, transparent), transparent 66%),
var(--surface-1);
border: 1px solid var(--border); border-radius: var(--r-lg);
padding: var(--s8) var(--s6) var(--s6);
box-shadow: var(--sheen), var(--sh-raised);
}
.corridor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s8); }
/* Durak zinciri — yatay, km'li, tıklanabilir */
.chain { position: relative; margin-block: var(--s6) var(--s8); }
.chain-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--s3); }
.chain-track {
position: relative; display: grid; grid-auto-flow: column; align-items: start;
gap: 0; min-width: 720px; padding-top: var(--s6);
}
.chain-track::before {
content: ""; position: absolute; inset-inline: 6%; top: calc(var(--s6) + 7px); height: 3px; border-radius: var(--r-full);
background: linear-gradient(90deg,
color-mix(in oklab, var(--tenant-primary) 55%, transparent),
color-mix(in oklab, var(--tenant-primary) 28%, transparent) 55%,
color-mix(in oklab, var(--tenant-accent) 45%, transparent));
}
.stop {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 0 var(--s1); background: none; border: 0; cursor: pointer; text-align: center;
color: var(--text-2); text-decoration: none;
}
.stop-dot {
width: 17px; height: 17px; flex: none; border-radius: 50%;
background: var(--surface-1);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--tenant-primary) 30%, transparent), var(--sheen);
transition: box-shadow var(--d-press) var(--e), transform var(--d-press) var(--e), background var(--d-press) var(--e);
}
.stop-name { font-size: 13px; font-weight: 550; color: var(--text-1); line-height: 1.25; }
.stop-km { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.stop:hover .stop-dot { transform: scale(1.12); box-shadow: 0 0 0 4px color-mix(in oklab, var(--tenant-primary) 45%, transparent), var(--sheen); }
.stop:hover .stop-name { color: var(--tenant-primary); }
html[data-theme="dark"] .stop:hover .stop-name { color: var(--tenant-primary-hover); }
.stop[data-end="1"] .stop-dot { background: var(--tenant-primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--tenant-primary) 22%, transparent); }
.stop[data-end="2"] .stop-dot { background: var(--tenant-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--tenant-accent) 22%, transparent); }
.stop[data-end] .stop-name { font-weight: 650; }
.stop[aria-current="page"] .stop-dot { background: var(--tenant-primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--tenant-primary) 26%, transparent); }
.dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.dir {
position: relative; padding: var(--s6); border-radius: var(--r-md);
background: var(--surface-1); border: 1px solid var(--border);
box-shadow: var(--sheen), var(--sh-hair);
display: flex; flex-direction: column; gap: var(--s3);
}
.dir::before {
content: ""; position: absolute; inset-block: var(--s4); inset-inline-start: 0; width: 3px;
border-radius: var(--r-full); background: var(--tenant-primary);
}
.dir--back::before { background: var(--tenant-accent); }
.dir-title { display: flex; align-items: center; gap: var(--s2); font-size: 16px; font-weight: 600; }
.dir-title svg { color: var(--tenant-primary); flex: none; }
.dir--back .dir-title svg { color: var(--tenant-accent); }
.factlist { display: grid; gap: var(--s3); margin: 0; padding: 0; }
.factlist div { display: grid; grid-template-columns: 148px 1fr; gap: var(--s3); align-items: baseline; }
.factlist dt { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.factlist dd { margin: 0; font-size: 15px; color: var(--text-1); }
.factlist dd small { display: block; font-size: 13px; color: var(--text-3); margin-top: 2px; }
/* ═══ 10 · HİZMETLER (bento) ═══════════════════════════════════════════════ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s4); }
.svc {
grid-column: span 2; display: flex; flex-direction: column; gap: var(--s3);
background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md);
padding: var(--s6); text-align: start; cursor: pointer; position: relative; overflow: hidden;
text-decoration: none; color: inherit;
box-shadow: var(--sheen), var(--sh-raised);
transition: border-color var(--d-press) var(--e), box-shadow var(--d-press) var(--e), transform var(--d-press) var(--e);
}
.svc::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: radial-gradient(420px 200px at 84% -18%, color-mix(in oklab, var(--tenant-primary) 12%, transparent), transparent 70%);
opacity: 0; transition: opacity var(--d-drop) var(--e);
}
.svc > * { position: relative; z-index: 1; }
.svc:hover {
border-color: color-mix(in oklab, var(--tenant-primary) 30%, var(--border));
box-shadow: var(--sheen), var(--sh-lift); transform: translateY(-3px);
}
.svc:hover::before { opacity: 1; }
.svc:active { transform: scale(0.99); }
/* 6 kart · satırda 3 — öksüz kart bırakmaz. */
.svc--wide { grid-column: span 2; }
.svc-ico {
width: 44px; height: 44px; flex: none; border-radius: var(--r-md); display: grid; place-items: center;
background: linear-gradient(180deg,
color-mix(in oklab, var(--tenant-primary) 13%, var(--surface-1)),
color-mix(in oklab, var(--tenant-primary) 8%, var(--surface-1)));
border: 1px solid color-mix(in oklab, var(--tenant-primary) 14%, transparent);
color: var(--tenant-primary); box-shadow: var(--sheen);
transition: background var(--d-press) var(--e), box-shadow var(--d-press) var(--e), border-color var(--d-press) var(--e);
}
.svc:hover .svc-ico {
background: linear-gradient(180deg,
color-mix(in oklab, var(--tenant-primary) 20%, var(--surface-1)),
color-mix(in oklab, var(--tenant-primary) 13%, var(--surface-1)));
border-color: color-mix(in oklab, var(--tenant-primary) 26%, transparent);
box-shadow: var(--sheen), 0 6px 14px -6px color-mix(in oklab, var(--tenant-primary) 45%, transparent);
}
.svc-title { font-size: 16px; font-weight: 600; }
.svc-desc { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.svc-meta { margin-top: auto; display: flex; align-items: center; gap: var(--s2); padding-top: var(--s2); }
.svc-cta { font-size: 13px; font-weight: 550; color: var(--tenant-primary); display: inline-flex; align-items: center; gap: 4px; }
html[data-theme="dark"] .svc-cta { color: var(--tenant-primary-hover); }
.svc:hover .svc-cta .arw { transform: translateX(3px); }
.svc-cta .arw { transition: transform var(--d-press) var(--e); }
/* ═══ 11 · 85 m³ KASA + FİYAT MANTIĞI ══════════════════════════════════════ */
.kasa-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s8); align-items: start; }
/* Genel iki kolonlu içerik bloğu (hizmet kartları vb.) — 1080px altında tek kolon */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.kasa-figure {
position: relative; padding: var(--s6); border-radius: var(--r-lg);
background:
radial-gradient(600px 260px at 88% -20%, color-mix(in oklab, var(--tenant-primary) 7%, transparent), transparent 70%),
var(--surface-1);
border: 1px solid var(--border); box-shadow: var(--sheen), var(--sh-raised);
}
.kasa-svg { width: 100%; height: auto; display: block; }
.kasa-zone { cursor: pointer; transition: opacity var(--d-press) var(--e); }
.kasa-zone rect { transition: fill var(--d-press) var(--e), stroke var(--d-press) var(--e); }
.kasa-zone:hover rect, .kasa-zone:focus-visible rect { fill: color-mix(in oklab, var(--tenant-primary) 26%, var(--surface-1)); }
.kasa-zone:focus-visible { outline: none; }
.kasa-zone:focus-visible rect { stroke: var(--tenant-primary); stroke-width: 2.5; }
/* Seçili bölge: dolgu + kalın kenar + bordo vurgu şeridi (renk tek başına değil) */
.kasa-zone[aria-pressed="true"] rect {
fill: color-mix(in oklab, var(--tenant-primary) 30%, var(--surface-1));
stroke: var(--tenant-primary); stroke-width: 2.5;
}
.kasa-zone[aria-pressed="true"] .zone-mark { opacity: 1; }
.kasa-zone .zone-mark { opacity: 0; transition: opacity var(--d-press) var(--e); }
.kasa-legend { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.kasa-readout {
display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4);
padding: var(--s3) var(--s4); border-radius: var(--r-md); min-height: 60px;
background: linear-gradient(180deg, var(--surface-1), color-mix(in oklab, var(--surface-2) 70%, var(--surface-1)));
border: 1px solid var(--border); box-shadow: var(--sheen);
}
.kasa-readout b { font-size: 15px; font-weight: 600; display: block; }
.kasa-readout span { font-size: 13px; color: var(--text-3); }
.logic-list { counter-reset: lg; display: grid; gap: var(--s3); }
.logic {
position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--s4); align-items: start;
padding: var(--s4); border-radius: var(--r-md);
background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--sheen), var(--sh-hair);
transition: border-color var(--d-press) var(--e), box-shadow var(--d-press) var(--e);
}
.logic:hover { border-color: color-mix(in oklab, var(--tenant-primary) 24%, var(--border)); box-shadow: var(--sheen), var(--sh-raised); }
.logic-n {
counter-increment: lg; width: 40px; height: 40px; border-radius: var(--r-sm);
display: grid; place-items: center; font-size: 15px; font-weight: 650;
font-variant-numeric: tabular-nums;
background: color-mix(in oklab, var(--tenant-primary) 10%, var(--surface-1));
border: 1px solid color-mix(in oklab, var(--tenant-primary) 20%, transparent);
color: color-mix(in oklab, var(--tenant-primary) 88%, var(--text-1));
}
html[data-theme="dark"] .logic-n { color: var(--text-1); }
.logic-n::before { content: counter(lg, decimal-leading-zero); }
.logic b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.logic p { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.incl-col {
padding: var(--s6); border-radius: var(--r-md); border: 1px solid var(--border);
background: var(--surface-1); box-shadow: var(--sheen), var(--sh-hair);
}
.incl-col--in { background: linear-gradient(180deg, color-mix(in oklab, var(--success) 8%, var(--surface-1)), var(--surface-1) 46%); border-color: color-mix(in oklab, var(--success) 24%, transparent); }
.incl-col--out { background: linear-gradient(180deg, color-mix(in oklab, var(--warning) 8%, var(--surface-1)), var(--surface-1) 46%); border-color: color-mix(in oklab, var(--warning) 24%, transparent); }
.incl-col h3 { display: flex; align-items: center; gap: var(--s2); font-size: 16px; margin-bottom: var(--s4); }
.incl-col--in h3 svg { color: var(--success-ink); }
.incl-col--out h3 svg { color: var(--warning-ink); }
.incl-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.incl-col li { display: flex; align-items: flex-start; gap: var(--s2); font-size: 14px; color: var(--text-2); line-height: 1.5; }
.incl-col li svg { flex: none; margin-top: 3px; }
.incl-col--in li svg { color: var(--success-ink); }
.incl-col--out li svg { color: var(--warning-ink); }
/* ═══ 12 · SÜREÇ — 6 adım ══════════════════════════════════════════════════ */
.steps { counter-reset: st; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.step {
position: relative; padding: var(--s6); border-radius: var(--r-md);
background: var(--surface-1); border: 1px solid var(--border);
box-shadow: var(--sheen), var(--sh-hair);
display: flex; flex-direction: column; gap: var(--s2);
transition: border-color var(--d-press) var(--e), box-shadow var(--d-press) var(--e), transform var(--d-press) var(--e);
}
.step:hover { border-color: color-mix(in oklab, var(--tenant-primary) 26%, var(--border)); box-shadow: var(--sheen), var(--sh-raised); transform: translateY(-2px); }
.step-n {
counter-increment: st; font-size: 34px; line-height: 1; font-weight: 650; letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
color: color-mix(in oklab, var(--tenant-primary) 26%, var(--surface-3));
margin-bottom: var(--s1);
}
.step-n::before { content: counter(st, decimal-leading-zero); }
.step b { font-size: 16px; font-weight: 600; }
.step p { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.step--sign { border-color: color-mix(in oklab, var(--tenant-accent) 30%, var(--border)); background: linear-gradient(180deg, color-mix(in oklab, var(--tenant-accent) 5%, var(--surface-1)), var(--surface-1) 44%); }
.step--sign .step-n { color: color-mix(in oklab, var(--tenant-accent) 42%, var(--surface-3)); }
/* ═══ 13 · GÜVENCE + SOSYAL KANIT (boş durum) ══════════════════════════════ */
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.promise {
padding: var(--s6); border-radius: var(--r-md); background: var(--surface-1);
border: 1px solid var(--border); box-shadow: var(--sheen), var(--sh-raised);
display: flex; flex-direction: column; gap: var(--s3);
transition: border-color var(--d-press) var(--e), box-shadow var(--d-press) var(--e), transform var(--d-press) var(--e);
}
.promise:hover { border-color: color-mix(in oklab, var(--tenant-accent) 30%, var(--border)); box-shadow: var(--sheen), var(--sh-lift); transform: translateY(-2px); }
.promise-ico {
width: 42px; height: 42px; flex: none; border-radius: var(--r-md); display: grid; place-items: center;
background: linear-gradient(180deg,
color-mix(in oklab, var(--tenant-accent) 12%, var(--surface-1)),
color-mix(in oklab, var(--tenant-accent) 7%, var(--surface-1)));
border: 1px solid color-mix(in oklab, var(--tenant-accent) 20%, transparent);
color: var(--tenant-accent); box-shadow: var(--sheen);
}
.promise b { font-size: 16px; font-weight: 600; }
.promise p { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.cmp-wrap {
overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border);
background: var(--surface-1); box-shadow: var(--sheen), var(--sh-raised);
}
.cmp th, .cmp td { padding: var(--s3) var(--s4); text-align: start; border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp thead th { font-size: 13px; font-weight: 600; color: var(--text-1); background: var(--surface-2); white-space: nowrap; }
.cmp thead th:nth-child(2) { color: var(--tenant-primary); }
html[data-theme="dark"] .cmp thead th:nth-child(2) { color: var(--tenant-primary-hover); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody th { font-weight: 550; color: var(--text-2); font-size: 14px; }
.cmp td { color: var(--text-2); }
.cmp td.yes { color: var(--text-1); }
.cmp td .mk { display: inline-flex; align-items: center; gap: 6px; }
.cmp td.yes .mk svg { color: var(--success-ink); flex: none; }
.cmp td.no .mk svg { color: var(--danger-ink); flex: none; }
.empty-reviews {
position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: center;
padding: var(--s8) var(--s6); border-radius: var(--r-lg);
background:
radial-gradient(620px 240px at 88% -20%, color-mix(in oklab, var(--tenant-primary) 7%, transparent), transparent 70%),
var(--surface-1);
border: 1px dashed var(--border-strong); box-shadow: var(--sheen), var(--sh-hair);
}
.empty-reviews h3 { font-size: 18px; font-weight: 600; margin-bottom: var(--s2); }
.empty-reviews p { font-size: 14px; color: var(--text-2); line-height: 1.55; max-width: 58ch; }
.empty-slots { display: flex; gap: var(--s3); }
.empty-slot {
width: 132px; height: 96px; border-radius: var(--r-md);
border: 1px dashed var(--border-strong); background: var(--surface-2);
display: flex; flex-direction: column; gap: 6px; padding: var(--s3);
}
.empty-slot i { display: block; height: 7px; border-radius: var(--r-full); background: var(--surface-3); }
.empty-slot i:nth-child(1) { width: 82%; }
.empty-slot i:nth-child(2) { width: 64%; }
.empty-slot i:nth-child(3) { width: 74%; }
.empty-slot i:nth-child(4) { width: 40%; margin-top: auto; }
/* ═══ 14 · SSS ═════════════════════════════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; gap: var(--s2); max-width: 880px; }
.faq-item {
background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
box-shadow: var(--sheen), var(--sh-hair);
transition: border-color var(--d-press) var(--e), box-shadow var(--d-press) var(--e);
}
.faq-item:hover { border-color: var(--border-strong); box-shadow: var(--sheen), var(--sh-raised); }
.faq-q {
width: 100%; display: flex; align-items: center; gap: var(--s3);
padding: var(--s4) var(--s6); background: none; border: 0; cursor: pointer;
text-align: start; font-size: 16px; font-weight: 550; color: var(--text-1); min-height: 60px;
}
.faq-q .caret { margin-inline-start: auto; flex: none; color: var(--text-3); transition: transform var(--d-drop) var(--e); }
.faq-item.is-open .caret { transform: rotate(180deg); color: var(--tenant-primary); }
.faq-item.is-open {
border-color: color-mix(in oklab, var(--tenant-primary) 26%, var(--border));
box-shadow: var(--sheen), var(--sh-raised);
background: linear-gradient(180deg, color-mix(in oklab, var(--tenant-primary) 3%, var(--surface-1)), var(--surface-1) 42%);
}
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-modal) var(--e); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner > div { padding: 0 var(--s6) var(--s6); color: var(--text-2); max-width: 68ch; }
.faq-a-inner p + p { margin-top: var(--s3); }
/* ═══ 15 · İLETİŞİM + FOOTER ═══════════════════════════════════════════════ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s6); align-items: stretch; }
.contact-list { display: flex; flex-direction: column; gap: var(--s3); }
.contact-row {
display: flex; align-items: center; gap: var(--s4);
padding: var(--s4); border-radius: var(--r-md); border: 1px solid var(--border);
background: var(--surface-1); text-decoration: none; color: inherit;
box-shadow: var(--sheen), var(--sh-hair);
transition: border-color var(--d-press) var(--e), transform var(--d-press) var(--e), box-shadow var(--d-press) var(--e);
}
.contact-row:hover {
border-color: color-mix(in oklab, var(--tenant-primary) 28%, var(--border));
transform: translateY(-2px); box-shadow: var(--sheen), var(--sh-lift);
}
.contact-ico {
width: 44px; height: 44px; flex: none; border-radius: var(--r-md); display: grid; place-items: center;
background: linear-gradient(180deg,
color-mix(in oklab, var(--tenant-primary) 13%, var(--surface-1)),
color-mix(in oklab, var(--tenant-primary) 8%, var(--surface-1)));
border: 1px solid color-mix(in oklab, var(--tenant-primary) 14%, transparent);
box-shadow: var(--sheen); color: var(--tenant-primary);
}
.contact-ico--wa {
background: linear-gradient(180deg,
color-mix(in oklab, var(--whatsapp) 20%, var(--surface-1)),
color-mix(in oklab, var(--whatsapp) 12%, var(--surface-1)));
border-color: color-mix(in oklab, var(--whatsapp) 30%, transparent); color: var(--whatsapp-ink);
}
html[data-theme="dark"] .contact-ico--wa { color: var(--whatsapp); }
.contact-txt b { display: block; font-size: 15px; font-weight: 600; }
.contact-txt span { font-size: 13px; color: var(--text-3); }
.map-ph {
position: relative; border-radius: var(--r-lg); border: 1px solid var(--border);
overflow: hidden; min-height: 340px; display: grid; place-items: center;
box-shadow: var(--sheen), var(--sh-raised);
background-image:
radial-gradient(600px 340px at 78% 14%, color-mix(in oklab, var(--tenant-primary) 8%, transparent), transparent 68%),
radial-gradient(420px 260px at 8% 92%, color-mix(in oklab, var(--tenant-accent) 6%, transparent), transparent 66%),
linear-gradient(color-mix(in oklab, var(--border-strong) 55%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in oklab, var(--border-strong) 55%, transparent) 1px, transparent 1px),
linear-gradient(180deg, var(--surface-1), var(--surface-2));
background-size: auto, auto, 44px 44px, 44px 44px, auto;
}
.map-ph-inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s6); }
.map-route { position: absolute; inset: 0; z-index: 0; opacity: 0.9; }
.map-path { animation: dashRun 2.4s linear infinite; }
@keyframes dashRun { to { stroke-dashoffset: -34; } }
.cta-band {
position: relative; overflow: hidden; border-radius: var(--r-lg);
padding: var(--s12) var(--s8);
background:
radial-gradient(700px 320px at 88% -30%, color-mix(in oklab, var(--tenant-primary) 12%, transparent), transparent 70%),
radial-gradient(520px 260px at 4% 120%, color-mix(in oklab, var(--tenant-accent) 9%, transparent), transparent 68%),
linear-gradient(180deg, var(--surface-1), color-mix(in oklab, var(--surface-2) 70%, var(--surface-1)));
border: 1px solid var(--border); box-shadow: var(--sheen), var(--sh-lift);
display: flex; flex-direction: column; align-items: center; gap: var(--s6); text-align: center;
}
.cta-band h2 { max-width: 20ch; }
.cta-band p { max-width: 56ch; color: var(--text-2); }
.cta-actions { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }
.site-footer {
position: relative; border-top: 1px solid var(--hairline);
background:
radial-gradient(1000px 380px at 82% -30%, color-mix(in oklab, var(--tenant-primary) 6%, transparent), transparent 68%),
linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 70%, var(--surface-1)), var(--surface-1) 34%);
padding-block: var(--s12) var(--s8); margin-top: var(--s8); box-shadow: var(--sheen);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s8); }
.footer-col h4 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.footer-col a { font-size: 14px; color: var(--text-2); text-decoration: none; transition: color var(--d-press) var(--e); }
.footer-col a:hover { color: var(--text-1); }
.footer-bottom {
margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
font-size: 13px; color: var(--text-3);
}
/* ═══ 16 · WHATSAPP FAB + MOBİL BAR ════════════════════════════════════════ */
.fab {
position: fixed; z-index: 70; inset-inline-end: var(--s6); inset-block-end: var(--s6);
display: inline-flex; align-items: center; gap: var(--s3);
height: 56px; padding-inline: var(--s4); border-radius: var(--r-full);
background: var(--whatsapp); color: #073b21; text-decoration: none; font-weight: 600; font-size: 15px;
box-shadow: 0 6px 20px color-mix(in oklab, var(--whatsapp) 42%, transparent), 0 2px 6px rgba(22,24,29,0.18);
transition: transform var(--d-press) var(--e), box-shadow var(--d-press) var(--e);
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in oklab, var(--whatsapp) 52%, transparent); }
.fab:active { transform: scale(0.97); }
.fab-ico { position: relative; display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.fab-ico::before {
content: ""; position: absolute; inset: -6px; border-radius: 50%;
border: 2px solid #073b21; opacity: 0; animation: fabPulse 2.8s var(--e) infinite;
}
@keyframes fabPulse {
0% { transform: scale(0.7); opacity: 0.45; }
60%, 100% { transform: scale(1.35); opacity: 0; }
}
.fab-lab { display: none; }
.mbar {
position: fixed; z-index: 65; inset-inline: 0; bottom: 0;
display: none; grid-template-columns: 1fr 1fr 1.3fr; gap: var(--s2);
padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
background: color-mix(in oklab, var(--surface-1) 92%, transparent);
backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
border-top: 1px solid var(--hairline);
box-shadow: 0 -1px 0 var(--hairline), 0 -12px 30px -20px rgba(27,42,74,0.5);
}
.mbar .btn { --btn-h: 48px; padding-inline: var(--s3); font-size: 14px; }
/* ═══ 17 · TEKLİF SİHİRBAZI (modal) ════════════════════════════════════════ */
.wz-scrim {
position: fixed; inset: 0; z-index: 100;
background: color-mix(in oklab, #131A2B 46%, transparent);
backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px);
display: grid; place-items: center; padding: var(--s6);
opacity: 0; pointer-events: none; visibility: hidden;
transition: opacity var(--d-modal) var(--e), visibility 0s linear var(--d-modal);
}
.wz-scrim.is-open {
opacity: 1; pointer-events: auto; visibility: visible;
transition: opacity var(--d-modal) var(--e), visibility 0s;
}
body.wz-locked { overflow: hidden; }
.wz {
position: relative; width: min(1020px, 100%); max-height: min(92vh, 900px);
display: flex; flex-direction: column;
background:
radial-gradient(900px 380px at 88% -8%, color-mix(in oklab, var(--tenant-primary) 5%, transparent), transparent 66%),
var(--bg);
border: 1px solid var(--border); border-radius: var(--r-lg);
box-shadow: var(--sheen), var(--sh-modal); overflow: hidden;
transform: translateY(12px) scale(0.985); transition: transform var(--d-modal) var(--e);
}
.wz-scrim.is-open .wz { transform: none; }
.wz-head {
display: flex; align-items: center; gap: var(--s4);
padding: var(--s4) var(--s6); border-bottom: 1px solid var(--hairline);
background: linear-gradient(180deg, var(--surface-1), color-mix(in oklab, var(--surface-2) 55%, var(--surface-1)));
box-shadow: var(--sheen); flex: none;
}
.wz-body::-webkit-scrollbar { width: 10px; }
.wz-body::-webkit-scrollbar-track { background: transparent; }
.wz-body::-webkit-scrollbar-thumb {
background: color-mix(in oklab, var(--tenant-primary) 18%, transparent);
border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box;
}
.wz-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wz-title b { font-size: 16px; font-weight: 600; }
.wz-title span { font-size: 12px; color: var(--text-3); }
.wz-steps { display: flex; align-items: center; gap: var(--s1); margin-inline: auto; }
.wz-step {
display: flex; align-items: center; gap: var(--s2);
padding: 5px var(--s2); border-radius: var(--r-sm);
font-size: 12px; font-weight: 550; color: var(--text-3);
background: none; border: 0; cursor: default;
}
.wz-step .n {
width: 22px; height: 22px; flex: none; border-radius: 50%;
display: grid; place-items: center; font-size: 11px; font-weight: 650;
background: var(--surface-3); color: var(--text-3);
transition: background var(--d-press) var(--e), color var(--d-press) var(--e);
}
.wz-step[data-state="current"] {
color: var(--text-1);
background: color-mix(in oklab, var(--tenant-primary) 7%, var(--surface-1));
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tenant-primary) 16%, transparent);
}
.wz-step[data-state="current"] .n {
background: var(--tenant-primary); color: var(--tenant-primary-fg);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--tenant-primary) 14%, transparent);
}
.wz-step[data-state="done"] { color: var(--text-2); cursor: pointer; }
.wz-step[data-state="done"] .n {
background: color-mix(in oklab, var(--success) 14%, var(--surface-1));
color: var(--success-ink);
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success) 30%, transparent);
}
.wz-step[data-state="done"]:hover { background: var(--surface-2); }
.wz-step:disabled { cursor: default; }
.wz-step .lbl { display: none; }
.wz-progress { height: 3px; background: var(--surface-3); flex: none; }
.wz-progress-fill {
height: 100%; width: 20%;
background: linear-gradient(90deg, var(--tenant-primary), color-mix(in oklab, var(--tenant-accent) 55%, var(--tenant-primary)));
box-shadow: 0 0 10px -2px color-mix(in oklab, var(--tenant-primary) 60%, transparent);
transition: width var(--d-modal) var(--e);
}
.wz-body { position: relative; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.wz-pane { display: none; padding: var(--s8) var(--s6); }
.wz-pane.is-active { display: block; animation: paneIn 180ms var(--e); }
@keyframes paneIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.wz-pane.is-active.is-back { animation-name: paneInBack; }
@keyframes paneInBack { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.wz-pane-head { margin-bottom: var(--s6); display: flex; flex-direction: column; gap: var(--s2); }
.wz-foot {
display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
padding: var(--s4) var(--s6); border-top: 1px solid var(--hairline);
background: linear-gradient(0deg, var(--surface-1), color-mix(in oklab, var(--surface-2) 55%, var(--surface-1)));
box-shadow: 0 -10px 26px -22px rgba(27,42,74,0.45); flex: none;
}
.wz-wa-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 550; color: var(--whatsapp-ink); text-decoration: none;
padding: var(--s2) var(--s3); border-radius: var(--r-sm);
transition: background var(--d-press) var(--e);
}
html[data-theme="dark"] .wz-wa-link { color: var(--whatsapp); }
.wz-wa-link:hover { background: color-mix(in oklab, var(--whatsapp) 14%, transparent); }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.pick-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pick-grid--6 { grid-template-columns: repeat(6, 1fr); }
.pick {
position: relative; display: flex; flex-direction: column; gap: var(--s2);
padding: var(--s4); border-radius: var(--r-md); text-align: start; cursor: pointer;
background: var(--surface-1); border: 1px solid var(--border-strong); color: inherit;
box-shadow: var(--sheen), var(--sh-hair);
transition: border-color var(--d-press) var(--e), background var(--d-press) var(--e), transform var(--d-press) var(--e), box-shadow var(--d-press) var(--e);
}
.pick:hover { border-color: color-mix(in oklab, var(--tenant-primary) 42%, var(--border-strong)); transform: translateY(-1px); box-shadow: var(--sheen), var(--sh-raised); }
.pick:active { transform: scale(0.99); }
.pick[aria-checked="true"] {
border-color: var(--tenant-primary);
background: linear-gradient(180deg,
color-mix(in oklab, var(--tenant-primary) 9%, var(--surface-1)),
color-mix(in oklab, var(--tenant-primary) 4%, var(--surface-1)));
box-shadow: inset 0 0 0 1px var(--tenant-primary),
0 8px 18px -10px color-mix(in oklab, var(--tenant-primary) 60%, transparent);
}
.pick[aria-checked="true"]::after {
content: ""; position: absolute; top: var(--s2); inset-inline-end: var(--s2);
width: 18px; height: 18px; border-radius: 50%;
background: var(--tenant-primary)
url("data:image/svg+xml;utf8,")
center / 11px no-repeat;
}
html[data-theme="dark"] .pick[aria-checked="true"]::after {
background-image: url("data:image/svg+xml;utf8,");
}
.pick-ico {
width: 38px; height: 38px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center;
background: linear-gradient(180deg,
color-mix(in oklab, var(--tenant-primary) 13%, var(--surface-1)),
color-mix(in oklab, var(--tenant-primary) 8%, var(--surface-1)));
border: 1px solid color-mix(in oklab, var(--tenant-primary) 14%, transparent);
box-shadow: var(--sheen); color: var(--tenant-primary);
}
.pick-t { font-size: 15px; font-weight: 600; }
.pick-d { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.pick--compact { align-items: center; text-align: center; gap: var(--s1); padding: var(--s3) var(--s2); }
.pick--compact .pick-d { font-size: 12px; }
.cat-tabs { display: flex; gap: var(--s1); flex-wrap: wrap; padding: var(--s1); background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--border); }
.cat-tab {
padding: var(--s2) var(--s3); border-radius: var(--r-sm); border: 0; cursor: pointer;
background: transparent; color: var(--text-2); font-size: 14px; font-weight: 550;
transition: background var(--d-press) var(--e), color var(--d-press) var(--e);
}
.cat-tab:hover { color: var(--text-1); }
.cat-tab[aria-selected="true"] {
background: var(--surface-1); color: var(--text-1);
box-shadow: var(--sheen), 0 1px 2px rgba(27,42,74,0.08), 0 4px 10px -4px rgba(27,42,74,0.12);
}
.cat-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.cat-row {
display: flex; align-items: center; gap: var(--s3);
padding: var(--s2) var(--s3); border-radius: var(--r-sm);
background: var(--surface-1); border: 1px solid var(--border);
transition: border-color var(--d-press) var(--e), background var(--d-press) var(--e);
}
.cat-row.has-qty { border-color: color-mix(in oklab, var(--tenant-primary) 34%, var(--border)); background: color-mix(in oklab, var(--tenant-primary) 5%, var(--surface-1)); }
.cat-name { min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.cat-name b { display: block; font-size: 14px; font-weight: 550; }
.cat-name span { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; gap: 2px; flex: none; }
.stepper button {
width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer;
border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-2);
display: grid; place-items: center;
transition: background var(--d-press) var(--e), color var(--d-press) var(--e), border-color var(--d-press) var(--e), transform var(--d-press) var(--e);
}
.stepper button:hover:not(:disabled) { background: var(--surface-2); color: var(--text-1); border-color: var(--tenant-primary); }
.stepper button:active:not(:disabled) { transform: scale(0.9); }
.stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.stepper .qty { min-width: 30px; text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vol-panel {
position: sticky; top: 0; z-index: 2;
display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center;
padding: var(--s4); border-radius: var(--r-md);
background: linear-gradient(180deg, var(--surface-1), color-mix(in oklab, var(--surface-2) 70%, var(--surface-1)));
border: 1px solid var(--border); box-shadow: var(--sheen), var(--sh-lift);
}
.vol-num { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vol-chip {
display: inline-flex; align-items: center; gap: var(--s2);
padding: var(--s2) var(--s4); border-radius: var(--r-full);
background: color-mix(in oklab, var(--tenant-primary) 8%, var(--surface-1));
border: 1px solid color-mix(in oklab, var(--tenant-primary) 22%, transparent);
color: color-mix(in oklab, var(--tenant-primary) 86%, var(--text-1));
box-shadow: var(--sheen); font-size: 14px; font-weight: 550; white-space: nowrap;
}
html[data-theme="dark"] .vol-chip { color: var(--text-1); }
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: stretch; }
.dual--single { grid-template-columns: minmax(0, 580px); justify-content: center; }
.quote {
position: relative; display: flex; flex-direction: column; gap: var(--s4);
padding: var(--s6); border-radius: var(--r-md);
background: var(--surface-1); border: 1px solid var(--border);
box-shadow: var(--sheen), var(--sh-raised);
transition: border-color var(--d-press) var(--e), box-shadow var(--d-press) var(--e);
}
.quote:hover { box-shadow: var(--sheen), var(--sh-lift); }
.quote--reco {
border-color: var(--tenant-primary);
background:
radial-gradient(520px 220px at 84% -20%, color-mix(in oklab, var(--tenant-primary) 8%, transparent), transparent 70%),
var(--surface-1);
box-shadow: inset 0 0 0 1px var(--tenant-primary), var(--sheen),
0 10px 24px -12px color-mix(in oklab, var(--tenant-primary) 48%, transparent),
0 28px 56px -28px color-mix(in oklab, var(--tenant-primary) 40%, transparent);
}
.quote-tag {
position: absolute; top: calc(-1 * var(--s3)); inset-inline-start: var(--s6);
padding: 3px var(--s3); border-radius: var(--r-full);
background: var(--tenant-primary); color: var(--tenant-primary-fg);
box-shadow: 0 0 0 3px var(--surface-1), 0 6px 14px -6px color-mix(in oklab, var(--tenant-primary) 60%, transparent);
font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
}
.quote-h { display: flex; flex-direction: column; gap: var(--s1); }
.quote-name { font-size: 17px; font-weight: 600; }
.quote-sub { font-size: 13px; color: var(--text-3); }
.quote-price { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.quote-amount { font-size: clamp(24px, 3vw, 30px); font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.quote-cur { font-size: 15px; font-weight: 600; color: var(--text-3); }
.quote-range { font-size: 13px; color: var(--text-3); }
.quote-perks { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 auto; padding: 0; list-style: none; }
.quote-perks li { display: flex; align-items: flex-start; gap: var(--s2); font-size: 14px; color: var(--text-2); line-height: 1.45; }
.quote-perks li svg { flex: none; margin-top: 3px; }
.quote-foot { padding-top: var(--s3); border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; }
.quote--locked .quote-perks, .quote--locked .quote-price { filter: blur(4px); opacity: 0.5; user-select: none; }
.quote-lock {
position: absolute; inset: 0; z-index: 2; border-radius: var(--r-md);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
padding: var(--s6); text-align: center;
background: color-mix(in oklab, var(--surface-1) 82%, transparent);
backdrop-filter: saturate(120%) blur(3px); -webkit-backdrop-filter: saturate(120%) blur(3px);
}
.quote:not(.quote--locked) .quote-lock { display: none; }
.win-card {
position: relative; overflow: hidden;
display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s4); align-items: center;
padding: var(--s6); border-radius: var(--r-md);
background:
linear-gradient(90deg, color-mix(in oklab, var(--tenant-primary) 6%, transparent), transparent 42%,
transparent 58%, color-mix(in oklab, var(--tenant-accent) 6%, transparent)),
linear-gradient(180deg, color-mix(in oklab, var(--info) 8%, var(--surface-1)), color-mix(in oklab, var(--info) 4%, var(--surface-1)));
border: 1px solid color-mix(in oklab, var(--info) 24%, transparent);
box-shadow: var(--sheen), var(--sh-raised);
}
.win-col { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.win-ico {
width: 42px; height: 42px; flex: none; border-radius: var(--r-md); display: grid; place-items: center;
background: linear-gradient(180deg,
color-mix(in oklab, var(--tenant-primary) 15%, var(--surface-1)),
color-mix(in oklab, var(--tenant-primary) 9%, var(--surface-1)));
border: 1px solid color-mix(in oklab, var(--tenant-primary) 18%, transparent);
box-shadow: var(--sheen); color: var(--tenant-primary);
}
.win-ico--end {
background: linear-gradient(180deg,
color-mix(in oklab, var(--tenant-accent) 15%, var(--surface-1)),
color-mix(in oklab, var(--tenant-accent) 9%, var(--surface-1)));
border-color: color-mix(in oklab, var(--tenant-accent) 20%, transparent); color: var(--tenant-accent);
}
.win-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.win-body b { font-size: 16px; font-weight: 600; line-height: 1.3; }
.win-body > span:last-child { font-size: 13px; color: var(--text-3); }
.win-sep { color: var(--text-3); display: grid; place-items: center; }
.win-note {
grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--s2);
margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border);
font-size: 13px; color: var(--text-2);
}
.win-note svg { flex: none; margin-top: 3px; color: var(--info-ink); }
.result-cta { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s3); }
.calc-stage { min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); text-align: center; }
.calc-spinner { position: relative; width: 76px; height: 76px; flex: none; }
.calc-spinner svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.calc-spinner .ring-bg { stroke: var(--surface-3); }
.calc-spinner .ring-fg {
stroke: var(--tenant-primary); stroke-linecap: round;
stroke-dasharray: 62 138; transform-origin: 50% 50%;
animation: ringSpin 1.15s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.calc-spinner .ring-ico { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tenant-primary); opacity: 0.85; }
.calc-steps { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; min-height: 92px; }
.calc-line { display: flex; align-items: center; gap: var(--s2); font-size: 14px; color: var(--text-3); opacity: 0; transform: translateY(4px); }
.calc-line.is-on { opacity: 1; transform: none; color: var(--text-2); transition: opacity 200ms var(--e), transform 200ms var(--e), color 200ms var(--e); }
.calc-line.is-done .tick { color: var(--success-ink); }
.calc-line .tick { color: var(--text-3); flex: none; }
.success-stage { display: flex; flex-direction: column; align-items: center; gap: var(--s4); text-align: center; padding-block: var(--s6); }
.success-mark {
position: relative; width: 92px; height: 92px; flex: none; border-radius: 50%;
display: grid; place-items: center;
background: color-mix(in oklab, var(--success) 14%, var(--surface-1));
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success) 30%, transparent),
0 12px 28px -14px color-mix(in oklab, var(--success) 65%, transparent);
color: var(--success-ink);
animation: pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ticket {
display: inline-flex; align-items: center; gap: var(--s3);
padding: var(--s3) var(--s6); border-radius: var(--r-md);
background: var(--surface-2); border: 1px dashed var(--border-strong);
}
.ticket b { font-size: 20px; font-weight: 650; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.wz-tip {
position: relative; display: flex; align-items: flex-start; gap: var(--s3);
max-width: 620px; margin-top: var(--s8);
padding: var(--s3) var(--s4) var(--s3) var(--s6); border-radius: var(--r-md);
background: linear-gradient(90deg, color-mix(in oklab, var(--tenant-primary) 5%, var(--surface-2)), var(--surface-2) 58%);
border: 1px solid var(--border); box-shadow: var(--sheen);
font-size: 13px; line-height: 1.45; color: var(--text-2);
animation: tipIn 240ms var(--e);
}
.wz-tip[hidden] { display: none; }
.wz-tip::before {
content: ""; position: absolute; inset-block: var(--s3); inset-inline-start: var(--s3); width: 3px;
border-radius: var(--r-full); background: var(--tenant-primary);
}
.wz-tip svg { flex: none; margin-top: 2px; color: var(--tenant-primary); }
.wz-tip b { color: var(--text-1); font-weight: 600; }
@keyframes tipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.savings-strip {
display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
padding: var(--s3) var(--s4); border-radius: var(--r-md);
background: linear-gradient(180deg,
color-mix(in oklab, var(--success) 11%, var(--surface-1)),
color-mix(in oklab, var(--success) 6%, var(--surface-1)));
border: 1px solid color-mix(in oklab, var(--success) 28%, transparent);
box-shadow: var(--sheen); font-size: 14px; color: var(--text-1);
}
.savings-strip b { color: var(--success-ink); font-weight: 650; }
/* ═══ 18 · ROTA / İÇERİK SAYFALARI ═════════════════════════════════════════ */
.crumbs { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: 13px; color: var(--text-3); padding-top: var(--s6); }
.crumbs ol { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: var(--s2); }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--text-1); }
.crumbs li + li::before { content: "/"; color: var(--border-strong); }
.crumbs [aria-current] { color: var(--text-1); font-weight: 550; }
.page-hero { position: relative; padding-block: var(--s8) var(--s12); overflow: hidden; }
.page-hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(980px 420px at 82% -18%, color-mix(in oklab, var(--tenant-primary) 11%, transparent), transparent 66%),
radial-gradient(620px 340px at 2% -6%, var(--atmo-sun), transparent 64%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s8); align-items: start; }
.route-stats { display: flex; gap: var(--s3); flex-wrap: wrap; }
.rstat {
flex: 1 1 150px; padding: var(--s4); border-radius: var(--r-md);
background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--sheen), var(--sh-hair);
}
.rstat .t-caption { margin-bottom: 2px; }
.rstat b { display: block; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rstat span { font-size: 13px; color: var(--text-3); }
.prose { max-width: 68ch; color: var(--text-2); font-size: 16px; line-height: 1.68; }
.prose h2 { font-size: clamp(21px, 2.4vw, 26px); color: var(--text-1); margin-top: var(--s12); margin-bottom: var(--s4); letter-spacing: -0.01em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; color: var(--text-1); margin-top: var(--s8); margin-bottom: var(--s3); }
.prose p + p { margin-top: var(--s4); }
.prose ul { margin: var(--s4) 0; padding-inline-start: var(--s6); display: flex; flex-direction: column; gap: var(--s2); }
.prose strong { color: var(--text-1); font-weight: 600; }
.prose a { color: var(--tenant-primary); text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="dark"] .prose a { color: var(--tenant-primary-hover); }
.link-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.link-card {
display: flex; flex-direction: column; gap: var(--s1);
padding: var(--s4); border-radius: var(--r-md); text-decoration: none; color: inherit;
background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--sheen), var(--sh-hair);
transition: border-color var(--d-press) var(--e), transform var(--d-press) var(--e), box-shadow var(--d-press) var(--e);
}
.link-card:hover { border-color: color-mix(in oklab, var(--tenant-primary) 30%, var(--border)); transform: translateY(-2px); box-shadow: var(--sheen), var(--sh-raised); }
.link-card b { font-size: 15px; font-weight: 600; }
.link-card span { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.il-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.il-chip {
padding: 6px var(--s3); border-radius: var(--r-full);
background: var(--surface-2); border: 1px solid var(--border);
font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer;
box-shadow: var(--sheen);
transition: background var(--d-press) var(--e), color var(--d-press) var(--e),
border-color var(--d-press) var(--e), transform var(--d-press) var(--e), box-shadow var(--d-press) var(--e);
}
.il-chip:hover {
background: color-mix(in oklab, var(--tenant-primary) 9%, var(--surface-1));
border-color: color-mix(in oklab, var(--tenant-primary) 30%, transparent);
color: color-mix(in oklab, var(--tenant-primary) 88%, var(--text-1));
transform: translateY(-1px);
box-shadow: var(--sheen), 0 6px 14px -8px color-mix(in oklab, var(--tenant-primary) 55%, transparent);
}
html[data-theme="dark"] .il-chip:hover { color: var(--text-1); }
.il-chip[data-main="1"] {
background: color-mix(in oklab, var(--tenant-accent) 9%, var(--surface-1));
border-color: color-mix(in oklab, var(--tenant-accent) 28%, transparent);
color: var(--tenant-accent); font-weight: 600;
}
/* 404 */
.nf { min-height: 62vh; display: grid; place-items: center; text-align: center; padding-block: var(--s16); }
.nf-code {
font-size: clamp(72px, 14vw, 132px); line-height: 1; font-weight: 650; letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
color: color-mix(in oklab, var(--tenant-primary) 22%, var(--surface-3));
}
/* ═══ 19 · RESPONSIVE ══════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
.bento { grid-template-columns: repeat(4, 1fr); }
.svc, .svc--wide { grid-column: span 2; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
.pick-grid--6 { grid-template-columns: repeat(3, 1fr); }
.promise-grid { grid-template-columns: repeat(2, 1fr); }
.link-cards { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); }
.kasa-grid, .split-2 { grid-template-columns: 1fr; gap: var(--s6); }
}
@media (max-width: 900px) {
:root { --header-h: 60px; }
.site-nav { display: none; }
/* Mobilde ÖNCE metin+form, sonra görsel (tasarim-dili: "mobilde form üstte").
Görselimiz temsilîdir; ilk ekranı H1 + form hak eder. */
.hero-grid { grid-template-columns: 1fr; gap: var(--s8); }
.hero-copy { order: 1; }
.hero-media { order: 2; }
.hero-media-frame { aspect-ratio: 16 / 10; }
.page-hero-grid { grid-template-columns: 1fr; gap: var(--s6); }
.trust-grid { grid-template-columns: repeat(2, 1fr); }
.trust-cell:nth-child(3)::before { display: none; }
.trust-cell:nth-child(n+3)::after {
content: ""; position: absolute; inset-inline: 12%; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent);
}
.dir-grid { grid-template-columns: 1fr; }
.incl { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.dual { grid-template-columns: 1fr; }
.cat-list { grid-template-columns: 1fr; }
.pick-grid { grid-template-columns: repeat(2, 1fr); }
.result-cta { grid-template-columns: 1fr; }
.win-card { grid-template-columns: 1fr; }
.win-sep { justify-self: start; transform: rotate(90deg); margin-inline-start: 21px; }
.wz-scrim { padding: 0; }
.wz { max-height: 100vh; height: 100%; width: 100%; border-radius: 0; border: 0; }
.vol-panel { grid-template-columns: 1fr; gap: var(--s3); }
.empty-reviews { grid-template-columns: 1fr; }
.empty-slots { overflow-x: auto; }
}
@media (max-width: 720px) {
.wrap { padding-inline: var(--s4); }
.section { padding-block: var(--s12); }
.hero { padding-block: var(--s6) var(--s12); }
.hero-form-grid { grid-template-columns: 1fr; }
.hero-form-swap { width: 100%; height: 36px; }
.hero-form-actions { grid-template-columns: 1fr; }
/* Mobilde telefon ve WhatsApp zaten .mbar'da kalıcı: üstteki tel linki ve
yüzen FAB gereksiz tekrar olur, içeriğin üstünü kapatır. */
.header-phone { display: none; }
.mbar { display: grid; }
body { padding-bottom: 76px; }
.fab { display: none; }
.corridor { padding-inline: var(--s4); }
.cta-band { padding: var(--s8) var(--s4); }
.steps { grid-template-columns: 1fr; }
.promise-grid { grid-template-columns: 1fr; }
.link-cards { grid-template-columns: 1fr; }
.factlist div { grid-template-columns: 1fr; gap: var(--s1); }
.wz-pane { padding: var(--s6) var(--s4); }
.wz-head { padding: var(--s3) var(--s4); }
.wz-foot { padding: var(--s3) var(--s4); }
.wz-foot .btn { flex: 1 1 auto; }
.pick-grid, .pick-grid--2, .pick-grid--6 { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr; }
.kasa-figure { padding: var(--s4); }
}
@media (min-width: 721px) { .fab-lab { display: inline; } }
/* ═══ 20 · MOTION / PRINT ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1 !important; transform: none !important; }
.btn:hover, .card:hover, .svc:hover, .pick:hover, .fab:hover, .step:hover, .promise:hover { transform: none !important; }
}
@media print {
.site-header, .fab, .mbar, .wz-scrim, .hero-media { display: none !important; }
body { padding-bottom: 0; }
}